/* Build 723: pair an airy porcelain canvas with MyMappi's midnight-ocean hero. */
html body .auth-gate {
  background:
    radial-gradient(circle at 14% 8%, rgba(52, 145, 181, 0.16) 0%, rgba(52, 145, 181, 0) 36%),
    radial-gradient(circle at 88% 86%, rgba(63, 187, 151, 0.12) 0%, rgba(63, 187, 151, 0) 40%),
    radial-gradient(circle at 50% 110%, rgba(221, 185, 118, 0.1) 0%, rgba(221, 185, 118, 0) 42%),
    linear-gradient(145deg, #edf5f6 0%, #fbfbf7 52%, #f4f3ec 100%) !important;
}

html body .auth-gate::after {
  opacity: 0.78;
  background:
    repeating-linear-gradient(118deg, transparent 0 76px, rgba(8, 65, 91, 0.025) 76px 77px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.34), transparent 38% 68%, rgba(255, 255, 255, 0.22)) !important;
}

html body .auth-gate .auth-memory-path {
  border-color: rgba(13, 91, 119, 0.12) !important;
}

html body .auth-gate .auth-card {
  border-color: rgba(255, 255, 255, 0.88) !important;
  background: linear-gradient(145deg, rgba(255, 254, 249, 0.97), rgba(244, 250, 248, 0.93)) !important;
  box-shadow:
    0 34px 76px rgba(2, 47, 68, 0.12),
    0 10px 24px rgba(28, 111, 133, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

html body .auth-gate .auth-card::before {
  border-color: rgba(136, 222, 229, 0.2) !important;
  background:
    radial-gradient(circle at 22% 15%, rgba(26, 141, 177, 0.18) 0%, rgba(26, 141, 177, 0) 38%),
    radial-gradient(circle at 88% 92%, rgba(42, 166, 132, 0.14) 0%, rgba(42, 166, 132, 0) 42%),
    linear-gradient(148deg, #00162c 0%, #00243f 52%, #064763 100%) !important;
}

/* Carry that ocean palette into the form without cooling its warm surface. */
html body .auth-gate .account-auth-button.primary {
  color: #f7fffc !important;
  border-color: rgba(11, 114, 100, 0.42) !important;
  background: linear-gradient(112deg, #00243f 0%, #075965 54%, #0b806e 100%) !important;
  box-shadow:
    0 15px 30px rgba(4, 52, 74, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Registration is part of the same primary path as Log in, so its compact
   action uses the identical ocean treatment without changing its geometry. */
html body .auth-gate .auth-beta-request-link {
  color: #f7fffc !important;
  border-color: rgba(11, 114, 100, 0.42) !important;
  background: linear-gradient(112deg, #00243f 0%, #075965 54%, #0b806e 100%) !important;
  box-shadow:
    0 15px 30px rgba(4, 52, 74, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html body .auth-gate .auth-gate-form input {
  border-color: rgba(11, 82, 109, 0.18) !important;
  caret-color: #12617f;
}

html body .auth-gate .auth-gate-form input:focus {
  border-color: rgba(18, 97, 127, 0.72) !important;
  box-shadow: 0 0 0 4px rgba(25, 112, 145, 0.13) !important;
}

html body .auth-gate .auth-text-button,
html body .auth-gate .auth-legal-links a,
html body .auth-gate .auth-legal-consent a,
html body .auth-gate .auth-gate-form .auth-local-option .local-device-button {
  color: #0b617a !important;
}

html body .auth-gate .auth-private-note {
  color: #0a6f68;
  border-color: rgba(10, 111, 104, 0.14);
  background: rgba(42, 166, 132, 0.07);
}

html body .auth-gate .auth-private-note::before {
  border-color: #22a17e;
  background: radial-gradient(circle at center, #22a17e 0 2px, transparent 2.5px);
}

html body .auth-gate .auth-form-heading::before {
  background: linear-gradient(90deg, #0b526d, #0b806e) !important;
  box-shadow: 0 4px 12px rgba(11, 82, 109, 0.16);
}

html body .auth-gate .auth-password-toggle {
  color: #0b5f78 !important;
}

html body .auth-gate .auth-password-toggle.is-revealed {
  color: #0b617a !important;
  border-color: rgba(18, 97, 127, 0.12) !important;
  background: rgba(25, 112, 145, 0.075) !important;
}

html body .auth-gate .auth-card button:focus-visible,
html body .auth-gate .auth-card a:focus-visible,
html body .auth-gate .auth-password-toggle:focus-visible {
  outline-color: rgba(29, 125, 157, 0.46) !important;
}

html body .auth-gate .auth-card.signup-mode .auth-legal-consent input[type="checkbox"] {
  accent-color: #0b806e !important;
}

@media (max-width: 760px) {
  html body .auth-gate .auth-card {
    box-shadow:
      0 18px 40px rgba(2, 47, 68, 0.1),
      0 3px 10px rgba(28, 111, 133, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  }
}