.auth-loading,
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(47, 164, 216, 0.25), transparent 38%),
    linear-gradient(145deg, #083a5c 0%, #155f8d 52%, #062f4d 100%);
}

.auth-loading[hidden],
.auth-gate[hidden] { display: none; }

.auth-loading {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.auth-card {
  width: min(100%, 430px);
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 24px 70px rgba(0, 25, 43, 0.35);
  color: #0a3f62;
}

.auth-brand { display: flex; gap: 13px; align-items: center; margin-bottom: 24px; }
.auth-brand-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #176897, #2aa5db);
  color: #fff;
  font-size: 1.25rem;
}
.auth-brand h1 { margin: 0; font-size: 1.45rem; }
.auth-brand p { margin: 3px 0 0; color: #587387; font-size: 0.88rem; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 20px; padding: 5px; border-radius: 12px; background: #eaf3f8; }
.auth-tab { min-height: 40px; border: 0; border-radius: 9px; background: transparent; color: #49677a; font: inherit; font-weight: 800; cursor: pointer; }
.auth-tab.is-active { background: #fff; color: #07507b; box-shadow: 0 2px 8px rgba(7, 63, 98, 0.12); }
.auth-form { display: grid; gap: 14px; }
.auth-form[hidden] { display: none; }
.auth-field { display: grid; gap: 6px; }
.auth-field label { font-size: 0.82rem; font-weight: 800; }
.auth-field input { width: 100%; min-height: 46px; box-sizing: border-box; border: 1px solid #b8cfde; border-radius: 10px; padding: 10px 12px; color: #083a5c; background: #fff; font: inherit; }
.auth-field input:focus { outline: 3px solid rgba(34, 151, 207, 0.2); border-color: #1685bb; }
.auth-submit { min-height: 48px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #176897, #249bd1); color: #fff; font: inherit; font-weight: 900; cursor: pointer; box-shadow: 0 8px 18px rgba(19, 121, 170, 0.22); }
.auth-submit:disabled { opacity: 0.65; cursor: wait; }
.auth-link { border: 0; padding: 0; background: transparent; color: #0876ad; font: inherit; font-weight: 800; cursor: pointer; }
.auth-secondary { text-align: center; font-size: 0.85rem; }
.auth-message { min-height: 1.25em; margin: 0; color: #47697d; font-size: 0.84rem; line-height: 1.4; }
.auth-message.is-error { color: #b42318; }
.auth-message.is-success { color: #087443; }
.auth-password-help { color: #647f90; font-size: 0.75rem; }

.account-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  max-width: 240px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.account-button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dialog { width: min(calc(100% - 32px), 410px); border: 0; border-radius: 18px; padding: 0; color: #0a3f62; box-shadow: 0 22px 65px rgba(0, 28, 48, 0.35); }
.account-dialog::backdrop { background: rgba(2, 30, 49, 0.55); }
.account-dialog-body { padding: 24px; }
.account-dialog h2 { margin: 0 0 5px; }
.account-email { margin: 0 0 22px; color: #59768a; overflow-wrap: anywhere; }
.account-actions { display: grid; gap: 10px; }
.account-actions button { min-height: 44px; border-radius: 10px; font: inherit; font-weight: 800; cursor: pointer; }
.account-close { border: 1px solid #bfd3df; background: #fff; color: #124865; }
.account-signout { border: 0; background: #154f73; color: #fff; }

@media (max-width: 760px) {
  .auth-card { padding: 23px 18px; }
  .account-button { width: 42px; min-width: 42px; padding: 0; justify-content: center; }
  .account-button span { display: none; }
}