:root[data-auth-theme="dark"][data-auth-form-theme="dark"] {
  --dark-form: #0e281f;
  --dark-control: #163329;
  --dark-control-hover: #1a3a2f;
  --dark-text: #f2f5f2;
  --dark-muted: #a4b4ab;
  --dark-line: rgb(234 241 237 / 17%);
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .auth-form-panel {
  border-color: var(--dark-line);
  background: var(--dark-form);
  color: var(--dark-text);
  box-shadow: 0 30px 72px -42px rgb(0 5 3 / 78%);
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .auth-form-panel h1 {
  color: var(--dark-text);
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .form-intro,
:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .divider,
:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .form-signup-prompt {
  color: var(--dark-muted);
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .divider::before,
:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .divider::after {
  background: var(--dark-line);
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .social-button,
:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .field input {
  border-color: var(--dark-line);
  background: var(--dark-control);
  color: var(--dark-text);
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .social-button:hover,
:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .field input:hover {
  border-color: rgb(215 255 114 / 40%);
  background: var(--dark-control-hover);
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .field label {
  color: #dce6e0;
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .field-heading a,
:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .form-signup-prompt a {
  color: #d7ff72;
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .field input::placeholder {
  color: #82968b;
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .field input:focus {
  border-color: #d7ff72;
  background: var(--dark-control);
  box-shadow: 0 0 0 3px rgb(215 255 114 / 13%);
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] input:-webkit-autofill,
:root[data-auth-theme="dark"][data-auth-form-theme="dark"] input:-webkit-autofill:hover,
:root[data-auth-theme="dark"][data-auth-form-theme="dark"] input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--dark-control) inset;
  box-shadow: 0 0 0 1000px var(--dark-control) inset;
  -webkit-text-fill-color: var(--dark-text);
  caret-color: var(--dark-text);
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"]
  .auth-form-panel
  :where(a, button, input):focus-visible {
  outline-color: #d7ff72;
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .status-message {
  border-color: rgb(134 194 147 / 44%);
  background: #183727;
  color: #c9e8d2;
}

:root[data-auth-theme="dark"][data-auth-form-theme="dark"] .error-message {
  border-color: rgb(235 139 126 / 42%);
  background: #3c211d;
  color: #ffd8d1;
}