:root {
  --bg: #0a0a0f;
  --panel: #14141c;
  --ink: #e8e8ec;
  --dim: #8a8a96;
  --accent: #5b2d8e;
  --accent-glow: #5b2d8e66;
  --line: #2a2a34;
  --font-title: Montserrat, sans-serif;
  --font-body: Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%; min-height: 100dvh;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, #1a1228 0%, var(--bg) 55%, #050508 100%);
  color: var(--ink); font: 16px/1.4 var(--font-body);
}
.gate {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gate-inner { text-align: center; }
.gate-brand {
  margin: 0 0 2.5rem;
  font: 600 0.72rem/1 var(--font-title);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--dim);
}
.gate-cta {
  font: 700 clamp(1rem, 3vw, 1.15rem)/1.2 var(--font-title);
  color: #fff; background: linear-gradient(165deg, #6b3aa8 0%, var(--accent) 45%, #4a2478 100%);
  border: 1px solid #7a4cb8;
  border-radius: 999px;
  padding: 1.1rem 2.4rem;
  cursor: pointer;
  box-shadow: 0 0 0 1px #ffffff12, 0 16px 40px var(--accent-glow), 0 4px 24px #00000080;
  transition: transform 0.2s, box-shadow 0.2s;
}
.gate-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #ffffff22, 0 20px 48px #5b2d8e88, 0 6px 28px #00000090;
}
.gate-dialog {
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel); color: var(--ink);
  padding: 1.5rem 1.35rem 1.25rem; max-width: 22rem; width: calc(100vw - 2rem);
  box-shadow: 0 24px 64px #000000a0;
}
.gate-dialog::backdrop { background: #000000bb; backdrop-filter: blur(4px); }
.gate-dialog-label {
  margin: 0 0 0.75rem;
  font: 700 0.78rem/1 var(--font-title);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim);
}
.gate-dialog input {
  width: 100%; margin: 0 0 0.5rem;
  padding: 0.75rem 0.9rem; border-radius: 12px;
  border: 1px solid var(--line); background: var(--bg);
  color: var(--ink); font: inherit;
}
.gate-dialog input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.gate-err { margin: 0 0 0.75rem; font-size: 0.82rem; color: #e88f2b; }
.gate-actions { display: flex; gap: 8px; justify-content: flex-end; }
.gate-actions button {
  font: inherit; padding: 0.55rem 1rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
}
.gate-actions button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.gate-actions button.ghost:hover { border-color: var(--dim); color: var(--ink); }