body.gated > header, body.gated > .filters, body.gated > main { filter: blur(4px); pointer-events: none; }
#authGate {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center;
  background: rgba(246, 247, 249, .82); backdrop-filter: blur(10px);
}
#authGate .gate-card {
  background: #fff; border: 1px solid var(--line, #e2e6ec); border-radius: 14px;
  box-shadow: 0 18px 60px rgba(16,24,40,.16); padding: 32px; width: min(440px, 92vw); text-align: center;
}
#authGate .gate-mark {
  width: 40px; height: 40px; margin: 0 auto 16px; border-radius: 11px;
  background: linear-gradient(135deg, #0b5cd5, #6941c6);
}
#authGate h1 { margin: 0 0 6px; font-size: 19px; letter-spacing: -.02em; }
#authGate p { margin: 0 0 18px; color: var(--ink-2, #55606e); font-size: 14px; }
#authGate .gate-btn {
  margin-top: 14px; padding: 9px 16px; border-radius: 8px;
  border: 1px solid var(--line, #e2e6ec); background: #fff; cursor: pointer;
}
#clerkMount { display: flex; justify-content: center; }
#authGate .gate-detail {
  margin: 12px auto 0; max-width: 340px; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-2, #55606e); background: var(--line-2, #eef1f5);
  border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; text-align: left;
}
#authGate .gate-actions { display: flex; gap: 8px; justify-content: center; }