.auth-fields {
  display: grid;
  gap: 11px;
  margin-top: 15px;
}

.auth-gap { margin-top: 0; }

.auth-message {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
}

.auth-switch {
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}

.auth-submit-spinner {
  width: 12px;
  height: 12px;
  display: inline-block;
  margin-right: 7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: auth-submit-spin .7s linear infinite;
}

@keyframes auth-submit-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .auth-submit-spinner { animation: none; }
}

/* Plan 2026-10-04-002 U8: Continue with Google, the "or" divider, inline errors, the verify banner. */
.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin-top: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.auth-google svg { width: 18px; height: 18px; flex: none; }
.auth-google:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-or { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--sub); font-size: 11px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-fields input { min-height: 44px; }
.auth-error {
  margin-top: 10px;
  padding: 10px;
  border-radius: 8px;
  background: var(--red-soft, #fff1ea);
  color: var(--red, #c2410c);
}
.auth-error:empty { display: none; }
.auth-hint { color: var(--sub); font-size: 11px; }

.verify-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--text);
}
.verify-banner[hidden] { display: none; }
.verify-banner strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.verify-banner p { margin: 4px 0 0; color: var(--sub); font-size: 11px; }
.verify-banner p:empty { display: none; }
.verify-banner button {
  flex: none;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-weight: 700;
  cursor: pointer;
}
.verify-banner button:disabled { opacity: .6; cursor: default; }
.verify-banner button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 650px) { .verify-banner { align-items: flex-start; flex-direction: column; } .verify-banner button { width: 100%; } }
/* Plan 2026-10-16-004 U7: the deadline banner, its inline code, the lock screen. */
.verify-banner { flex-wrap: wrap; }
.verify-banner-copy { flex: 1 1 260px; min-width: 0; }
.verify-banner-code { flex: 1 1 100%; }
.verify-banner-code[hidden] { display: none; }
.verify-banner.urgent { border-color: var(--red, #c2410c); background: var(--red-soft, #fff1ea); }
.verify-banner.urgent strong { color: var(--red, #c2410c); }
.verify-banner.verified { border-color: var(--line); }
.verify-banner .fec button.fec-quiet, .verify-banner .fec button:not(.fec-primary) { background: var(--surface, #fff); color: var(--text); border-color: var(--line); }
.auth-code-hint[hidden], .auth-code[hidden], .auth-password-row[hidden] { display: none; }
.lock-screen p { overflow-wrap: anywhere; }
.lock-screen .lock-kept { color: var(--sub); }
.lock-screen .auth-google { margin-top: 6px; }