/* gate.css — styles for the email/OTP login gate (gate.js). Restyle to taste. */
.gate-overlay {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: radial-gradient(1000px 520px at 50% -6%, #2a1a3a 0%, transparent 60%), #0b0810;
  transition: opacity .4s ease;
}
.gate-overlay.gate-hide { opacity: 0; pointer-events: none; }
.gate-card {
  width: min(440px, 92vw); text-align: center; padding: 30px 26px;
  background: linear-gradient(180deg, #1b1426, #100b18);
  border: 1px solid rgba(255,255,255,.12); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6); color: #eef0ff;
  font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
}
.gate-emoji { font-size: 42px; }
.gate-card h1 { font-size: 22px; margin: 6px 0 10px; }
.gate-lead { color: #b9b6d0; font-size: 14px; line-height: 1.7; margin: 0 0 18px; }
.gate-input {
  width: 100%; box-sizing: border-box; padding: 13px 14px; margin: 0 0 12px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: #0c0912; color: #fff;
  font-size: 16px; text-align: center; letter-spacing: 1px;
}
.gate-input:focus { outline: none; border-color: #8a6cff; }
#gate-code { letter-spacing: 8px; font-size: 22px; font-weight: 800; }
.gate-consent { display: flex; gap: 8px; align-items: flex-start; text-align: left;
  color: #9a97b5; font-size: 12px; line-height: 1.5; margin: 0 0 14px; }
.gate-consent a { color: #b79bff; }
.gate-btn {
  width: 100%; padding: 13px; border: none; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #7b5cff, #b44cff); color: #fff; font-weight: 800; font-size: 15px;
}
.gate-btn:disabled { opacity: .6; }
.gate-link { margin-top: 10px; background: none; border: none; color: #9a97b5; cursor: pointer; font-size: 13px; }
.gate-msg { min-height: 18px; margin: 10px 0 0; color: #ff9db2; font-size: 13px; }

/* Hide app content until approved (optional; add .gate-guard to elements you want hidden pre-login) */
.gate-guard { visibility: hidden; }
.gate-approved .gate-guard { visibility: visible; }