/* ==========================================================================
   VibeCode 101 — Gate styles (overlay + login wall)
   ========================================================================== */

.gate-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(255, 251, 247, 0.96);
  backdrop-filter: blur(12px);
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  font-family: var(--font-sans);
}
.gate-overlay.show { display: flex; }

.gate-card {
  max-width: 480px; width: 100%;
  background: var(--paper);
  border-radius: 28px;
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -20px rgba(187, 166, 255, 0.4);
  padding: 40px 36px;
  text-align: center;
}

.gate-card .gate-icon {
  font-size: 56px; line-height: 1; margin-bottom: 16px; display: block;
}

.gate-card h2 {
  font: 600 24px/1.2 var(--font-display);
  margin: 0 0 8px; color: var(--ink); letter-spacing: -0.02em;
}

.gate-card p {
  font-size: 15px; color: var(--muted);
  margin: 0 0 24px; line-height: 1.6;
}

.gate-actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
}

.gate-meta {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px dashed var(--line);
  font: 500 12px/1.5 var(--font-sans);
  color: var(--muted);
}

.gate-level {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--r-pill);
  font: 600 11px/1.4 var(--font-mono);
  background: var(--bg-2); color: var(--ink-2);
  margin-top: 8px;
}

.gate-content-hidden {
  display: none !important;
}

[data-gate] { position: relative; }
[data-gate="locked"] {
  cursor: not-allowed;
  user-select: none;
  pointer-events: none;
}

.gate-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font: 600 10px/1.4 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.gate-pill.member { background: var(--lavender-50); color: var(--lavender-400); border: 1px solid var(--lavender-100); }
.gate-pill.pro    { background: var(--peach-50); color: var(--peach-400); border: 1px solid var(--peach-100); }
.gate-pill.admin  { background: var(--mint-50); color: var(--mint-400); border: 1px solid var(--mint-100); }
.gate-pill.free   { background: var(--pink-50); color: var(--pink-400); border: 1px solid var(--pink-100); }