/* Shared login overlay styles, used by index.html, mobile.html, and
admin.html. Fallback values in each var() so this works standalone
regardless of which page's base stylesheet (style.css/mobile.css/admin.css)
is also loaded. */

#auth-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--header-bg-1, #142a1a), var(--header-bg-2, #234030) 60%, #2b4d36);
}
.auth-gate-card {
  background: var(--panel, #fffaf0);
  border: 1px solid var(--border-soft, #ddc990);
  border-radius: var(--radius, 20px);
  padding: 32px;
  width: min(360px, 88vw);
  box-shadow: 0 24px 60px rgba(20, 16, 10, 0.4);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-body, "Inter", "Segoe UI", Roboto, system-ui, sans-serif);
}
.auth-gate-card h1 {
  margin: 0 0 8px;
  font-family: var(--font-display, "Fraunces", Georgia, serif);
  font-style: italic;
  font-size: 1.6rem;
  text-align: center;
  color: var(--accent-dark, #1c3520);
}
.auth-gate-subtitle {
  margin: 0 0 4px;
  font-size: 0.85rem;
  text-align: center;
  color: var(--text-dim, #8a7350);
}
.auth-gate-card input {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, #c9a969);
  background: var(--panel-alt, #f3e6c4);
  color: var(--text, #2e2318);
  font-size: 1rem;
  font-family: inherit;
}
.auth-gate-card input:focus {
  outline: none;
  border-color: var(--accent, #2f5233);
  box-shadow: 0 0 0 3px rgba(47, 82, 51, 0.18);
}
.auth-gate-card button {
  background: linear-gradient(160deg, var(--accent-light, #4a7a54), var(--accent, #2f5233) 70%);
  color: white;
  border: none;
  padding: 14px 20px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 14px rgba(47, 82, 51, 0.45);
}
.auth-gate-card button:active { transform: translateY(1px) scale(0.98); }
.auth-gate-error { color: var(--danger, #8b3a3a); font-size: 0.9rem; text-align: center; }