:root {
      --bg: #020f0d;
      --panel: rgba(8, 43, 36, 0.78);
      --panel2: rgba(10, 54, 46, 0.72);
      --border: rgba(64, 222, 199, 0.18);
      --accent: #14d3be;
      --accent2: #70fff0;
      --text: #f3fffb;
      --muted: #9ccbc4;
      --soft: rgba(255, 255, 255, 0.06);
      --shadow: 0 30px 90px rgba(0,0,0,0.36);
    }
    * { box-sizing: border-box; }
    html { width: 100%; overflow-x: hidden; }
    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 15% 5%, rgba(20, 211, 190, 0.18), transparent 28%),
        radial-gradient(circle at 85% 10%, rgba(112, 255, 240, 0.10), transparent 30%),
        linear-gradient(180deg, #031a15, #020f0d 46%, #010806);
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    a { color: inherit; }
    .page-shell, .admin-shell { max-width: 1220px; margin: 0 auto; padding: 34px; }
    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 900; letter-spacing: -0.02em; }
    .brand img { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 28px rgba(20,211,190,.24); }
    .nav-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .nav-actions a, .pill-button, .ghost-button, .main-button, .request-link { text-decoration: none; border-radius: 999px; padding: 12px 16px; font-weight: 900; font-size: 14px; }
    .nav-actions a, .ghost-button, .request-link { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: var(--text); }
    .pill-button, .main-button { background: var(--accent); color: #02100d; border: 1px solid rgba(112,255,240,.28); }
    .nav-actions button, .nav-logout-button { width:auto; max-width:none; margin-top:0; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border-radius:999px; padding:12px 16px; font-weight:950; font-size:14px; line-height:1; cursor:pointer; }
    .nav-logout-button { border:1px solid rgba(255,128,128,.35); background:rgba(255,72,72,.14); color:#ffdede; }
    .panel { background: linear-gradient(180deg, var(--panel), rgba(5, 26, 22, .82)); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); }
    .hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 26px; align-items: stretch; }
    .hero-panel { padding: 34px; }
    .preview-panel { padding: 32px; display: grid; place-items: center; }
    .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #b7fff4; text-transform: uppercase; letter-spacing: .09em; font-size: 12px; font-weight: 900; background: rgba(20, 211, 190, 0.12); border: 1px solid rgba(20, 211, 190, 0.20); padding: 7px 11px; border-radius: 999px; }
    .eyebrow span, .footer-badge span { width: 8px; height: 8px; background: var(--accent); display: inline-block; border-radius: 999px; box-shadow: 0 0 18px rgba(20,211,190,.85); }
    .centered { justify-content: center; }
    h1 { font-size: clamp(42px, 7vw, 76px); line-height: .94; letter-spacing: -0.07em; margin: 22px 0 18px; }
    h2 { font-size: 26px; line-height: 1.08; letter-spacing: -0.04em; margin: 0 0 10px; }
    p { color: var(--muted); line-height: 1.65; }
    .lead { font-size: 18px; max-width: 760px; }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
    .steps-list { display: grid; gap: 10px; margin-top: 28px; }
    .steps-list div, .admin-how div { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; }
    .steps-list strong, .admin-how strong { display: block; margin-bottom: 4px; }
    .steps-list span, .admin-how span { color: var(--muted); font-size: 14px; }
    .mini-card { width: min(420px, 100%); background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 28px; text-align: center; }
    .preview-logo, .gate-logo { width: 58px; height: 58px; border-radius: 16px; display: block; margin: 0 auto 16px; }
    .fake-input { text-align: left; padding: 14px; border: 1px solid rgba(129,246,231,.16); background: rgba(0,0,0,.25); border-radius: 14px; color: rgba(255,255,255,.72); margin-top: 10px; }
    .fake-button { background: var(--accent); color: #02100d; font-weight: 900; padding: 14px; border-radius: 16px; margin-top: 12px; }
    .info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 24px; }
    .info-panel { padding: 24px; }
    .mini-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
    .mini-actions a { text-decoration: none; border-radius: 999px; padding: 9px 12px; font-weight: 900; font-size: 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
    .public-footer { margin-top: 24px; padding: 22px; display: grid; grid-template-columns: 1.1fr 1.9fr; gap: 18px; align-items: center; }
    .public-footer strong { display: block; font-size: 18px; margin-bottom: 5px; }
    .public-footer span { color: var(--muted); line-height: 1.5; }
    .public-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
    .public-footer nav a { text-decoration: none; border-radius: 999px; padding: 10px 12px; font-weight: 900; font-size: 13px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); }
    .demo-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 24px; align-items: stretch; margin-top: 20px; }
    .demo-flow-card { display: flex; flex-direction: column; justify-content: center; text-align: left; }
    .demo-flow-card .centered { align-self: flex-start; }
    .compact-steps { margin-top: 16px; }
    .demo-engine-panel { margin-top: 18px; padding: 28px; }
    .demo-engine-panel h2 { font-size: clamp(28px, 4vw, 42px); max-width: 920px; }
    .demo-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
    .compact-actions { margin-top: 16px; }
    .legal-shell { max-width: 980px; }
    .legal-panel { padding: clamp(24px, 5vw, 44px); }
    .legal-panel h1 { font-size: clamp(38px, 7vw, 64px); }
    .legal-panel h2 { margin-top: 24px; }
    .footer-badge { text-decoration: none; position: fixed; right: 20px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; background: rgba(16, 28, 48, .86); border: 1px solid rgba(255,255,255,.08); color: #dffdfa; border-radius: 999px; padding: 10px 14px; font-weight: 800; font-size: 13px; }
    .gate-page {
      min-height: 100vh;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 100vw;
      padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
      overflow-x: hidden;
    }
    .gate-panel {
      width: min(480px, 100%);
      max-width: calc(100vw - 32px);
      text-align: center;
      background: linear-gradient(180deg, rgba(8,43,36,.90), rgba(3,20,17,.94));
      border: 1px solid var(--border);
      border-radius: 30px;
      padding: clamp(22px, 5vw, 34px);
      box-shadow: var(--shadow);
    }
    .gate-panel h1 {
      font-size: clamp(30px, 10vw, 52px);
      line-height: 1;
      letter-spacing: -.055em;
      overflow-wrap: anywhere;
    }
    .loit-form { text-align: left; margin-top: 22px; }
    label { display: block; margin: 14px 0 7px; font-size: 13px; font-weight: 900; color: #cffff8; text-transform: uppercase; letter-spacing: .04em; }
    input, textarea, select { width: 100%; max-width: 100%; border: 1px solid rgba(129,246,231,.18); background: rgba(0,0,0,.24); color: var(--text); border-radius: 15px; padding: 14px; font: inherit; font-size: 16px; outline: none; }
    textarea { resize: vertical; }
    input::placeholder, textarea::placeholder { color: rgba(255,255,255,.42); }
    button { width: 100%; max-width: 100%; border: 0; border-radius: 17px; padding: 15px 18px; background: var(--accent); color: #02100d; font-weight: 950; font: inherit; font-size: 16px; cursor: pointer; margin-top: 16px; }
    .message { min-height: 24px; color: #b7fff4; font-weight: 800; }
    .gate-panel.login-busy button { opacity: .78; cursor: wait; }
    .gate-panel.gate-shake { animation: gateShake .28s ease; }
    @keyframes gateShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
    input:focus, textarea:focus, select:focus { border-color: rgba(20,211,190,.55); box-shadow: 0 0 0 4px rgba(20,211,190,.08); }
    .help-text, .muted { color: var(--muted); }
    .request-link { display: inline-block; margin-top: 8px; }
    .admin-intro, .owner-key-panel, .existing-panel, .instructions-panel { padding: 26px; margin-bottom: 20px; }
    .admin-intro h1 { font-size: clamp(38px, 6vw, 62px); }
    .admin-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 20px; }
    .admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
    .admin-card { padding: 24px; }
    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .result-box, .share-box { white-space: pre-wrap; background: rgba(0,0,0,.28); color: #dffffa; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; min-height: 46px; overflow: auto; font-size: 13px; }
    .gate-list { display: grid; gap: 12px; margin-top: 16px; }
    .gate-item { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 16px; }
    .gate-item strong { display: block; margin-bottom: 6px; font-size: 19px; }
    .gate-link-access-row { margin: 12px 0; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
    .gate-link-access-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
    .gate-link-access-select { flex: 1 1 220px; min-width: 220px; margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); color: var(--text); }
    .field-help.compact, .muted.compact { margin: 8px 0 0; font-size: 12px; line-height: 1.45; }
    .gate-meta-row { margin-bottom: 6px; }
    .badge-showcase { display: inline-flex; align-items: center; gap: 6px; background: rgba(20,211,190,.12); border: 1px solid rgba(20,211,190,.25); color: #b7fff4; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; }
    .badge-showcase.muted { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); color: var(--muted); }
    .badge-plan { background: rgba(255,255,255,.15); border-radius: 999px; padding: 1px 7px; font-size: 11px; text-transform: uppercase; }
    .gate-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .search-select-wrap { display: flex; flex-direction: column; gap: 6px; }
    .search-select-input { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 10px 14px; color: var(--text); font-size: 15px; width: 100%; }
    .gate-actions a, .small-button { width: auto; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border-radius: 999px; padding: 9px 12px; font-weight: 900; font-size: 13px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: var(--text); margin: 0; }
    .creator-invite-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(1, 8, 6, .82); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 20px; }
    .creator-invite-overlay.open { display: flex; }
    .creator-invite-modal {
      width: min(560px, 100%);
      max-height: 90vh;
      overflow-y: auto;
      padding: 28px 28px 24px;
      position: relative;
      margin: 0;
      background: linear-gradient(180deg, rgba(8, 43, 36, .98), rgba(3, 20, 17, .98));
      border: 1px solid var(--border);
      border-radius: 24px;
      box-shadow: var(--shadow);
      color: var(--text);
    }
    .creator-invite-modal .eyebrow { margin-bottom: 12px; }
    .creator-invite-modal h2 { margin: 0 0 6px; font-size: clamp(28px, 4vw, 34px); color: var(--text); letter-spacing: -0.04em; }
    .creator-invite-modal h3 { margin: 0 0 12px; font-size: 18px; letter-spacing: -0.03em; color: var(--text); }
    .creator-invite-gate-name { margin: 0 0 18px; font-size: 15px; color: #b7fff4; font-weight: 800; }
    .creator-invite-close { position: absolute; top: 16px; right: 16px; width: auto; max-width: none; margin: 0; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
    .creator-invite-form { margin-top: 0; text-align: left; }
    .creator-invite-form label { display: block; margin: 14px 0 7px; font-size: 13px; font-weight: 900; color: #cffff8; text-transform: uppercase; letter-spacing: .04em; }
    .creator-invite-form label .optional { text-transform: none; font-weight: 700; letter-spacing: 0; font-size: 12px; color: var(--muted); }
    .creator-invite-form .field-help { margin: 6px 0 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
    .creator-invite-form input { width: 100%; max-width: 100%; border: 1px solid rgba(129,246,231,.18); background: rgba(0,0,0,.24); color: var(--text); border-radius: 15px; padding: 14px; font: inherit; font-size: 16px; outline: none; margin: 0; }
    .creator-invite-form input::placeholder { color: rgba(255,255,255,.42); }
    .creator-invite-form input[type="datetime-local"] { color-scheme: dark; }
    .creator-invite-form input:focus { border-color: rgba(20,211,190,.55); box-shadow: 0 0 0 4px rgba(20,211,190,.08); }
    .creator-invite-row { display: flex; gap: 10px; align-items: stretch; }
    .creator-invite-row input { flex: 1; min-width: 0; width: auto; }
    .creator-invite-lookup { flex: 0 0 auto; width: auto; max-width: none; margin: 0; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 900; white-space: nowrap; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.08); color: var(--text); cursor: pointer; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; }
    .creator-invite-submit { width: 100%; max-width: 100%; margin-top: 18px; border: 0; border-radius: 17px; padding: 15px 18px; background: var(--accent); color: #02100d; font-weight: 950; font: inherit; font-size: 16px; cursor: pointer; }
    .creator-invite-preview { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; margin: 12px 0 4px; font-size: 14px; line-height: 1.5; color: var(--text); }
    .creator-invite-result { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.08); color: var(--text); }
    .creator-invite-result.ok { color: #b7fff4; border-color: rgba(20,211,190,.28); background: rgba(20,211,190,.08); }
    .creator-invite-result.err { color: #ffb4b4; border-color: rgba(255,120,120,.28); background: rgba(255,72,72,.08); }
    .creator-invite-list-wrap { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
    .creator-invite-list { display: grid; gap: 10px; color: var(--muted); font-size: 14px; }
    .creator-invite-item { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; }
    .creator-invite-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
    .creator-invite-item-head strong { font-size: 16px; margin: 0; color: var(--text); }
    .creator-invite-plan { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; background: rgba(20,211,190,.16); border: 1px solid rgba(20,211,190,.24); color: #b7fff4; }
    .creator-invite-meta { color: var(--muted); font-size: 13px; line-height: 1.5; }
    .creator-invite-revoke { width: auto; max-width: none; margin: 10px 0 0; padding: 8px 12px; font-size: 13px; border-radius: 999px; background: rgba(255,72,72,.14); border: 1px solid rgba(255,128,128,.35); color: #ffdede; cursor: pointer; }
    .creator-invite-pick { width: 100%; max-width: 100%; margin: 0 0 8px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); color: var(--text); text-align: left; cursor: pointer; }
    .creator-invite-pick:hover { border-color: rgba(20,211,190,.35); background: rgba(20,211,190,.08); }
    .notice { padding: 12px 14px; border-radius: 16px; background: rgba(20, 211, 190, 0.12); color: #b7fff4; font-weight: 800; }
    .ghost-wide { background: rgba(255,255,255,.08); color: var(--text); border: 1px solid rgba(255,255,255,.12); }
    .request-choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
    .request-choice-row .ghost-wide { margin-top: 0; }
    .request-access-form { border-top: 1px solid rgba(255,255,255,.10); margin-top: 18px; padding-top: 8px; }
    .field-help { margin: 7px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
    .pricing-section { margin-top: 24px; padding: 28px; }
    .pricing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
    .pricing-head h2 { font-size: clamp(30px, 4vw, 48px); margin-top: 14px; max-width: 760px; }
    .pricing-head p { max-width: 760px; margin-bottom: 0; }
    .pricing-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
    .pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .price-card { display: flex; flex-direction: column; gap: 12px; min-height: 100%; padding: 20px; border-radius: 20px; background: rgba(255,255,255,.052); border: 1px solid rgba(255,255,255,.08); }
    .price-card.highlighted { background: linear-gradient(180deg, rgba(20,211,190,.16), rgba(255,255,255,.052)); border-color: rgba(20,211,190,.30); box-shadow: 0 22px 58px rgba(0,0,0,.26); }
    .price-card.highlighted-soft { background: linear-gradient(180deg, rgba(112,255,240,.09), rgba(255,255,255,.052)); }
    .plan-label { width: fit-content; border-radius: 999px; padding: 7px 10px; background: rgba(20,211,190,.13); color: #b7fff4; font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
    .price-card h3 { margin: 0; font-size: 38px; letter-spacing: -.05em; }
    .price-card h3 span { font-size: 15px; color: var(--muted); letter-spacing: 0; }
    .price-card p { margin: 0; font-size: 14px; line-height: 1.55; }
    .price-card ul { margin: 0; padding-left: 18px; color: #dffffa; display: grid; gap: 7px; font-size: 13px; line-height: 1.4; }
    .price-card a { margin-top: auto; text-align: center; text-decoration: none; border-radius: 999px; padding: 11px 12px; font-weight: 950; font-size: 13px; color: #02100d; background: var(--accent); }
    .pricing-note { margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; background: rgba(20,211,190,.10); border: 1px solid rgba(20,211,190,.16); color: #b7fff4; font-size: 14px; line-height: 1.55; }
    .addon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
    .addon-grid div { border-radius: 18px; padding: 16px; background: rgba(255,255,255,.052); border: 1px solid rgba(255,255,255,.08); }
    .addon-grid strong { display: block; margin-bottom: 5px; color: var(--text); }
    .addon-grid span { display: block; color: var(--muted); font-size: 13px; line-height: 1.55; }
    .demo-strip {
      margin-top: 24px;
      padding: 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .demo-strip h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 14px; }
    .demo-strip p { margin-bottom: 0; max-width: 760px; }
    .demo-panel { padding: clamp(24px, 5vw, 42px); }
    .demo-panel h1 { font-size: clamp(38px, 7vw, 68px); max-width: 860px; }
    .demo-form { max-width: 560px; }
    .demo-result { margin-top: 18px; }
    .demo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .demo-notes { margin-top: 18px; padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .demo-notes div { border-radius: 16px; padding: 14px; background: rgba(255,255,255,.052); border: 1px solid rgba(255,255,255,.08); }
    .demo-notes strong { display: block; margin-bottom: 5px; color: var(--text); }
    .demo-notes span { color: var(--muted); font-size: 14px; line-height: 1.55; }
    .mobile-action-footer { display: none; margin-top: 24px; padding: 24px; text-align: center; }
    .mobile-action-footer h2 { font-size: clamp(28px, 7vw, 40px); margin: 14px 0 8px; }
    .mobile-action-footer p { margin: 0 auto 16px; max-width: 620px; }
    .mobile-footer-actions { display: grid; gap: 10px; }
    .mobile-footer-actions a { width: 100%; text-align: center; justify-content: center; }
    @media (max-width: 640px) {
      .page-shell, .admin-shell {
        padding: 16px 12px 24px;
        text-align: center;
      }
      .topbar {
        width: 100%;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 14px;
      }
      .brand {
        justify-content: center;
        width: 100%;
        font-size: 18px;
      }
      .brand img {
        width: 34px;
        height: 34px;
        border-radius: 10px;
      }
      .page-shell > .topbar .nav-actions {
        display: none;
      }
      .admin-shell > .topbar .nav-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
      }
      .admin-shell > .topbar .nav-actions a,
      .admin-shell > .topbar .nav-actions button,
      .admin-shell > .topbar .nav-actions .pill-button {
        width: 100%;
        padding: 10px 8px;
        font-size: 12px;
        text-align: center;
        justify-content: center;
      }
      .mobile-action-footer {
        display: block;
      }
      .hero-panel,
      .preview-panel,
      .info-panel,
      .pricing-section,
      .demo-strip,
      .demo-panel,
      .demo-notes,
      .mobile-action-footer {
        padding: 20px 16px;
        border-radius: 20px;
      }
      .preview-panel {
        display: none;
      }
      .hero-panel h1 {
        font-size: clamp(38px, 12vw, 54px);
        text-align: center;
      }
      .lead,
      .hero-panel p,
      .info-panel p,
      .pricing-head p,
      .demo-strip p,
      .demo-panel p {
        text-align: center;
      }
      .hero-actions,
      .pricing-cta,
      .demo-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
      }
      .hero-actions a,
      .hero-actions .main-button,
      .hero-actions .ghost-button,
      .pricing-cta a,
      .demo-actions a {
        width: 100%;
        text-align: center;
        justify-content: center;
      }
      .demo-strip,
      .pricing-head {
        flex-direction: column;
        align-items: center;
      }
      .demo-notes {
        grid-template-columns: 1fr;
      }
      .footer-badge {
        position: static;
        margin: 20px auto 0;
        width: fit-content;
        max-width: calc(100vw - 24px);
      }
      .gate-page {
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: max(14px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
      }
      .gate-panel {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        border-radius: 22px;
        padding: 22px 16px;
      }
      .gate-page .footer-badge {
        position: static;
        width: fit-content;
        max-width: calc(100vw - 24px);
        margin: 0 auto;
        padding: 8px 12px;
        font-size: 12px;
        white-space: nowrap;
      }
      .gate-logo {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        margin-bottom: 12px;
      }
      .gate-panel .eyebrow {
        font-size: 10px;
        padding: 6px 9px;
      }
      .gate-panel h1 {
        margin: 16px 0 12px;
      }
      .gate-panel p {
        font-size: 14px;
        line-height: 1.55;
      }
      .loit-form {
        margin-top: 16px;
      }
      label {
        margin: 12px 0 6px;
        font-size: 11px;
      }
      .message {
        font-size: 14px;
        line-height: 1.45;
      }
      .request-link {
        width: 100%;
        text-align: center;
      }
      .help-text {
        margin-top: 16px;
      }
      .creator-invite-overlay { padding: 12px; }
      .creator-invite-modal { padding: 22px 18px 18px; border-radius: 20px; }
      .creator-invite-row { flex-direction: column; }
      .creator-invite-lookup { width: 100%; min-height: 46px; }
    }

    .role-router-panel { margin-top: 24px; padding: 28px; }
    .role-router-panel h2 { font-size: clamp(30px, 4vw, 46px); margin-top: 16px; }
    .role-router-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
    .role-card { display: flex; flex-direction: column; gap: 14px; min-height: 250px; padding: 22px; border-radius: 20px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); }
    .role-card.highlighted { background: linear-gradient(180deg, rgba(20,211,190,.16), rgba(255,255,255,.055)); border-color: rgba(20,211,190,.26); }
    .role-card strong { font-size: 22px; line-height: 1.1; letter-spacing: -.04em; }
    .role-card span { color: var(--muted); line-height: 1.55; flex: 1; }
    .role-card a { text-align: center; justify-content: center; }
    .dashboard-hero-row { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
    .danger-button { border: 1px solid rgba(255,128,128,.35); background: rgba(255,72,72,.16); color: #ffdede; border-radius: 999px; padding: 12px 16px; font-weight: 950; cursor: pointer; }
    .dashboard-logout { align-items: center; justify-content: center; min-height: 40px; }

    @media (max-width: 1050px) {
      .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .role-router-grid { grid-template-columns: 1fr; }
      .pricing-head { align-items: flex-start; flex-direction: column; }
      .pricing-cta { justify-content: flex-start; }
    }
    @media (max-width: 900px) {
      .demo-hero-grid, .demo-card-grid, .public-footer { grid-template-columns: 1fr; }
      .public-footer nav { justify-content: flex-start; }

      .hero-grid, .info-grid, .admin-grid, .admin-how, .two-col, .pricing-grid, .addon-grid, .demo-notes, .role-router-grid { grid-template-columns: 1fr; }
      .dashboard-hero-row { flex-direction: column; }
      .page-shell, .admin-shell { padding: 20px; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .nav-actions { width: 100%; }
      .nav-actions a { width: auto; }
      .footer-badge { position: static; margin: 24px auto 0; width: fit-content; max-width: 100%; }
    }
  `;
}

function escapeHtml(value) {
  return String(value)
    .replaceAll('&', '&')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#039;');
}

function escapeAttr(value) {
  return escapeHtml(value).replaceAll('`', '&#096;');
}

// ─────────────────────────────────────────────────────────────────────────────
// Superadmin: Creator Gates management page
// ─────────────────────────────────────────────────────────────────────────────

function renderSuperadminCreatorGatesPage() {
  return `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Creator Gates | AccessGate Superadmin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex,nofollow">
  <link rel="icon" href="${LOIT_LOGO_URL}">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f6fa; color: #1a1a2e; min-height: 100vh; }
    .topbar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 56px; }
    .topbar-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: #0f172a; text-decoration: none; }
    .topbar-logo img { height: 28px; }
    .topbar-nav { display: flex; gap: 8px; }
    .topbar-nav a { font-size: 13px; padding: 6px 12px; border-radius: 6px; color: #4b5563; text-decoration: none; transition: background .15s; }
    .topbar-nav a:hover, .topbar-nav a.active { background: #f3f4f6; color: #111; }
    .container { max-width: 900px; margin: 32px auto; padding: 0 20px; }
    h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
    .subtitle { color: #6b7280; font-size: 14px; margin-bottom: 24px; }
    .card { background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 24px; margin-bottom: 24px; }
    .card h2 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
    label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: #374151; }
    input, textarea { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; outline: none; transition: border-color .15s; margin-bottom: 12px; }
    input:focus, textarea:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
    textarea { resize: vertical; min-height: 72px; }
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: background .15s, opacity .15s; }
    .btn-primary { background: #6366f1; color: #fff; }
    .btn-primary:hover { background: #4f46e5; }
    .btn-danger { background: #fee2e2; color: #dc2626; }
    .btn-danger:hover { background: #fecaca; }
    .btn-sm { padding: 5px 12px; font-size: 12px; }
    .btn:disabled { opacity: .5; cursor: not-allowed; }
    table { width: 100%; border-collapse: collapse; font-size: 14px; }
    th { text-align: left; padding: 10px 12px; background: #f9fafb; border-bottom: 1px solid #e5e7eb; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
    td { padding: 12px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
    tr:last-child td { border-bottom: none; }
    .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
    .badge-green { background: #dcfce7; color: #16a34a; }
    .badge-gray { background: #f3f4f6; color: #6b7280; }
    .empty { text-align: center; color: #9ca3af; padding: 32px; font-size: 14px; }
    .toast { position: fixed; bottom: 24px; right: 24px; background: #1f2937; color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 14px; z-index: 9999; display: none; max-width: 320px; }
    .toast.show { display: block; }
    .gate-row-actions { display: flex; gap: 6px; align-items: center; }
    .section-title { font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1000; display: none; align-items: center; justify-content: center; }
    .modal-overlay.open { display: flex; }
    .modal { background: #fff; border-radius: 14px; padding: 28px; width: 100%; max-width: 480px; position: relative; }
    .modal h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
    .modal .modal-sub { font-size: 13px; color: #6b7280; margin-bottom: 20px; }
    .modal-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 20px; cursor: pointer; color: #9ca3af; }
    @media (max-width: 600px) { .topbar { flex-direction: column; height: auto; padding: 12px 16px; gap: 8px; } .container { padding: 0 12px; } }
  </style>
</head>
<body>
  <div class="topbar">
    <a class="topbar-logo" href="/">
      <img src="${LOIT_LOGO_URL}" alt="AccessGate">
      AccessGate
    </a>
    <nav class="topbar-nav">
      <a href="/creator">Creator Dashboard</a>
      <a href="/superadmin/creator-gates" class="active">Creator Gates</a>
    </nav>
  </div>

  <div class="container">
    <h1>Creator Gates</h1>
    <p class="subtitle">Manage gates created for creators. Only invited creators can log in to these gates.</p>

    <!-- Create gate -->
    <div class="card">
      <h2>Create Creator Gate</h2>
      <form id="createForm">
        <label>Slug (used in URL, e.g. <code>my-creator-tools</code>)</label>
        <input id="f-slug" name="slug" placeholder="my-creator-tools" required>
        <label>Name</label>
        <input id="f-name" name="name" placeholder="My Creator Tools" required>
        <label>Description (optional)</label>
        <textarea id="f-desc" name="description" placeholder="A short description…"></textarea>
        <label>Destination URL</label>
        <input id="f-dest" name="destination_url" placeholder="https://example.com/dashboard" required>
        <label>Contact / Help URL (optional)</label>
        <input id="f-contact" name="contact_url" placeholder="https://example.com/support">
        <button type="submit" class="btn btn-primary" id="createBtn">Create Gate</button>
      </form>
    </div>

    <!-- Gate list -->
    <div class="card">
      <h2>Your Creator Gates</h2>
      <div id="gateList"><p class="empty">Loading…</p></div>
    </div>
  </div>

  <!-- Invite showcase modal -->
  <div class="modal-overlay" id="inviteModal">
    <div class="modal">
      <button class="modal-close" onclick="closeInviteModal()">✕</button>
      <h3>Invite Showcase</h3>
      <p class="modal-sub" id="inviteGateName"></p>
      <form id="inviteForm">
        <label>Showcase slug or name</label>
        <div style="display:flex;gap:8px;margin-bottom:12px">
          <input id="i-business-id" name="business_id" placeholder="e.g. cubelink-restaurant" required style="margin-bottom:0;flex:1">
          <button type="button" class="btn btn-sm" style="background:#f3f4f6;color:#374151;white-space:nowrap" onclick="lookupShowcase()">Look up</button>
        </div>
        <div id="showcase-preview" style="display:none;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:13px"></div>
        <label>Note (optional)</label>
        <input id="i-note" name="note" placeholder="e.g. Beta access, Plan override…">
        <label>Expires At (optional)</label>
        <input id="i-expires" name="expires_at" type="datetime-local">
        <button type="submit" class="btn btn-primary" id="inviteBtn">Invite Showcase</button>
      </form>
    </div>
  </div>

  <!-- Access list modal -->
  <div class="modal-overlay" id="accessModal">
    <div class="modal" style="max-width:560px">
      <button class="modal-close" onclick="closeAccessModal()">✕</button>
      <h3>Invited Showcases</h3>
      <p class="modal-sub" id="accessGateName"></p>
      <div id="accessList"><p class="empty">Loading…</p></div>
    </div>
  </div>

  <div class="toast" id="toast"></div>

  <script>
    const ADMIN_TOKEN_KEY = "ag_admin_token";
    let _currentInviteGateId = null;
    let _currentAccessGateId = null;

    function showToast(msg, err) {
      const t = document.getElementById("toast");
      t.textContent = msg;
      t.style.background = err ? "#dc2626" : "#1f2937";
      t.classList.add("show");
      setTimeout(() => t.classList.remove("show"), 3000);
    }

    function getAdminHeaders() {
      const token = localStorage.getItem(ADMIN_TOKEN_KEY) || "";
      return { "content-type": "application/json", "x-admin-token": token };
    }

    // ── Gate list ────────────────────────────────────────────────────────────

    async function loadGates() {
      const el = document.getElementById("gateList");
      el.innerHTML = '<p class="empty">Loading…</p>';
      try {
        const res = await fetch("/api/superadmin/creator-gates", { headers: getAdminHeaders() });
        const data = await res.json();
        if (!res.ok) { el.innerHTML = '<p class="empty">' + (data.error || "Failed to load.") + "</p>"; return; }
        if (!data || !data.length) { el.innerHTML = '<p class="empty">No creator gates yet. Create one above.</p>'; return; }
        el.innerHTML = \`<div style="overflow-x:auto"><table>
          <thead><tr>
            <th>Name / Slug</th><th>Destination</th><th>Status</th><th style="width:160px">Actions</th>
          </tr></thead>
          <tbody id="gatesTbody"></tbody>
        </table></div>\`;
        const tbody = document.getElementById("gatesTbody");
        data.forEach(g => {
          const tr = document.createElement("tr");
          tr.innerHTML = \`
            <td><div style="font-weight:600">\${escHtml(g.name)}</div><div style="font-size:12px;color:#6b7280">/g/\${escHtml(g.slug)}</div></td>
            <td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
              <a href="\${escHtml(g.destination_url)}" target="_blank" style="color:#6366f1;font-size:13px">\${escHtml(g.destination_url)}</a>
            </td>
            <td><span class="badge \${g.status === 'active' ? 'badge-green' : 'badge-gray'}">\${escHtml(g.status)}</span></td>
            <td><div class="gate-row-actions">
              <button class="btn btn-sm btn-primary" onclick="openInviteModal('\${escHtml(g.id)}', '\${escHtml(g.name)}')">Invite</button>
              <button class="btn btn-sm" style="background:#f3f4f6;color:#374151" onclick="openAccessModal('\${escHtml(g.id)}', '\${escHtml(g.name)}')">Access</button>
              <button class="btn btn-sm btn-danger" onclick="deactivateGate('\${escHtml(g.id)}')">Off</button>
            </div></td>
          \`;
          tbody.appendChild(tr);
        });
      } catch(e) { el.innerHTML = '<p class="empty">Error: ' + e.message + "</p>"; }
    }

    async function deactivateGate(id) {
      if (!confirm("Deactivate this gate?")) return;
      const res = await fetch("/api/superadmin/creator-gates/" + id, { method: "DELETE", headers: getAdminHeaders() });
      const data = await res.json();
      if (res.ok) { showToast("Gate deactivated."); loadGates(); }
      else showToast(data.error || "Error.", true);
    }

    // ── Create form ──────────────────────────────────────────────────────────

    document.getElementById("createForm").addEventListener("submit", async e => {
      e.preventDefault();
      const btn = document.getElementById("createBtn");
      btn.disabled = true; btn.textContent = "Creating…";
      const body = {
        slug: document.getElementById("f-slug").value.trim(),
        name: document.getElementById("f-name").value.trim(),
        description: document.getElementById("f-desc").value.trim() || undefined,
        destination_url: document.getElementById("f-dest").value.trim(),
        contact_url: document.getElementById("f-contact").value.trim() || undefined,
      };
      const res = await fetch("/api/superadmin/creator-gates", { method: "POST", headers: getAdminHeaders(), body: JSON.stringify(body) });
      const data = await res.json();
      btn.disabled = false; btn.textContent = "Create Gate";
      if (res.ok) { showToast("Gate created!"); e.target.reset(); loadGates(); }
      else showToast(data.message || data.error || "Error.", true);
    });

    // ── Invite modal ─────────────────────────────────────────────────────────

    function openInviteModal(gateId, gateName) {
      _currentInviteGateId = gateId;
      document.getElementById("inviteGateName").textContent = "Gate: " + gateName;
      document.getElementById("inviteForm").reset();
      document.getElementById("showcase-preview").style.display = "none";
      document.getElementById("inviteModal").classList.add("open");
    }
    function closeInviteModal() {
      document.getElementById("inviteModal").classList.remove("open");
      _currentInviteGateId = null;
    }

    function normalizeBusinessSearchResponse(data) {
      if (Array.isArray(data)) return data;
      if (data && Array.isArray(data.businesses)) return data.businesses;
      return [];
    }

    async function lookupShowcase() {
      const id = document.getElementById("i-business-id").value.trim();
      const preview = document.getElementById("showcase-preview");
      if (!id) { showToast("Enter a showcase slug or name first.", true); return; }
      preview.textContent = "Looking up…";
      preview.style.display = "block";
      try {
        const res = await fetch("/api/creator/businesses/search?q=" + encodeURIComponent(id), { headers: getAdminHeaders() });
        const list = normalizeBusinessSearchResponse(await res.json());
        const qLower = id.toLowerCase();
        const match = list.find(function(b) { return String(b.slug || "").toLowerCase() === qLower; })
          || list.find(function(b) { return String(b.title || "").toLowerCase() === qLower; })
          || list[0];
        if (!match) { preview.innerHTML = '<span style="color:#dc2626">No showcase found. Check the slug or name.</span>'; return; }
        document.getElementById("i-business-id").value = match.slug || match.title || "";
        document.getElementById("i-business-id").dataset.selectedBusinessId = match.id;
        preview.innerHTML = \`
          <div style="font-weight:600">\${escHtml(match.title || match.slug)}</div>
          <div style="color:#6b7280;font-size:12px">Slug: \${escHtml(match.slug)} &nbsp;·&nbsp; Plan: <strong>\${escHtml(match.plan || "free")}</strong></div>
          <div style="color:#6b7280;font-size:12px">Owner: \${escHtml(match.owner?.first_name || "")} \${escHtml(match.owner?.last_name || "")} &lt;\${escHtml(match.owner?.email || "")}&gt;</div>
        \`;
      } catch(e) { preview.innerHTML = '<span style="color:#dc2626">Lookup failed: ' + e.message + '</span>'; }
    }

    document.getElementById("inviteForm").addEventListener("submit", async e => {
      e.preventDefault();
      if (!_currentInviteGateId) return;
      const btn = document.getElementById("inviteBtn");
      btn.disabled = true; btn.textContent = "Inviting…";
      const bizInput = document.getElementById("i-business-id");
      const businessId = bizInput.dataset.selectedBusinessId || "";
      if (!businessId) { showToast("Look up the showcase by slug or name first.", true); btn.disabled = false; btn.textContent = "Invite Showcase"; return; }
      const body = {
        business_id: businessId,
        note: document.getElementById("i-note").value.trim() || undefined,
        expires_at: document.getElementById("i-expires").value || undefined,
      };
      const res = await fetch("/api/superadmin/creator-gates/" + _currentInviteGateId + "/invite", { method: "POST", headers: getAdminHeaders(), body: JSON.stringify(body) });
      const data = await res.json();
      btn.disabled = false; btn.textContent = "Invite Showcase";
      if (res.ok) { showToast("Showcase invited!"); closeInviteModal(); }
      else showToast(data.message || data.error || "Error.", true);
    });

    // ── Access list modal ─────────────────────────────────────────────────────

    function openAccessModal(gateId, gateName) {
      _currentAccessGateId = gateId;
      document.getElementById("accessGateName").textContent = "Gate: " + gateName;
      document.getElementById("accessModal").classList.add("open");
      loadAccessList(gateId);
    }
    function closeAccessModal() {
      document.getElementById("accessModal").classList.remove("open");
      _currentAccessGateId = null;
    }

    async function loadAccessList(gateId) {
      const el = document.getElementById("accessList");
      el.innerHTML = '<p class="empty">Loading…</p>';
      const res = await fetch("/api/superadmin/creator-gates/" + gateId + "/access", { headers: getAdminHeaders() });
      const data = await res.json();
      if (!res.ok) { el.innerHTML = '<p class="empty">' + (data.error || "Failed.") + "</p>"; return; }
      if (!data || !data.length) { el.innerHTML = '<p class="empty">No showcases invited yet.</p>'; return; }
      el.innerHTML = \`<div style="overflow-x:auto"><table>
        <thead><tr><th>Showcase</th><th>Plan</th><th>Status</th><th>Expires</th><th></th></tr></thead>
        <tbody id="accessTbody"></tbody>
      </table></div>\`;
      const tbody = document.getElementById("accessTbody");
      data.forEach(a => {
        const tr = document.createElement("tr");
        tr.innerHTML = \`
          <td>
            <div style="font-weight:600">\${escHtml(a.business?.title || a.business?.slug || "")}</div>
            <div style="font-size:12px;color:#6b7280">Owner: \${escHtml(a.business?.owner?.first_name || "")} \${escHtml(a.business?.owner?.last_name || "")} &lt;\${escHtml(a.business?.owner?.email || "")}&gt;</div>
            \${a.note ? '<div style="font-size:11px;color:#9ca3af">' + escHtml(a.note) + '</div>' : ''}
          </td>
          <td><span class="badge badge-gray">\${escHtml(a.business?.plan || "free")}</span></td>
          <td><span class="badge \${a.status === 'active' ? 'badge-green' : 'badge-gray'}">\${escHtml(a.status)}</span></td>
          <td style="font-size:12px;color:#6b7280">\${a.expires_at ? new Date(a.expires_at).toLocaleDateString() : '—'}</td>
          <td><button class="btn btn-sm btn-danger" onclick="revokeAccess('\${escHtml(a.id)}', this)">Revoke</button></td>
        \`;
        tbody.appendChild(tr);
      });
    }

    async function revokeAccess(accessId, btn) {
      if (!confirm("Revoke this creator's access?")) return;
      btn.disabled = true;
      const res = await fetch("/api/superadmin/creator-gate-access/" + accessId, { method: "DELETE", headers: getAdminHeaders() });
      const data = await res.json();
      if (res.ok) { showToast("Access revoked."); if (_currentAccessGateId) loadAccessList(_currentAccessGateId); }
      else { showToast(data.error || "Error.", true); btn.disabled = false; }
    }

    // ── Modal keyboard close ──────────────────────────────────────────────────

    document.addEventListener("keydown", e => {
      if (e.key === "Escape") { closeInviteModal(); closeAccessModal(); }
    });

    // ── Helpers ───────────────────────────────────────────────────────────────

    function escHtml(v) {
      return String(v ?? "").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
    }

    loadGates();
  </script>
</body>
</html>`;
}