@mevdragon/vidfarm-devcli 0.20.5 → 0.20.8

package/dist/src/reskin/discover-page.js

@@ -1,1788 +0,0 @@
-// /reskin/discover — the template discovery surface, MIGRATED to the REAL
-// production feed (part of the /reskin/* UX migration; reference:
-// job-runs-page.ts for the "render a shell → client-fetch a real endpoint"
-// pattern, settings-page.ts for the real-data render pattern).
-//
-// Three server-routed modes, each its own URL, surfaced as a Feed / Swipe /
-// Categories segmented toggle (three real <a> links):
-//   • feed       → /reskin/discover/feed       — real /discover/feed poster grid
-//   • swipe      → /reskin/discover/swipe       — real /discover/swipe/* Tinder deck
-//   • categories → /reskin/discover/categories  — real /discover/popular groups
-//
-// Every mode renders the farmville shell + a self-contained module script that
-// fetches the SAME real, same-origin endpoints the live React SPA hits, with
-// credentials, and renders real poster cards (real title, real thumbnail/video
-// from the real url, real source + duration) that fork/open into the real
-// editor at /editor/<template_id>. Loading / empty / error states are all
-// guarded so an offline fetch degrades to a friendly state instead of throwing.
-//
-// Poster-grid extras (feed + categories reveal, which share posterCardHtml):
-//   • hover audio — mousing over a card's (muted, autoplaying) video unmutes
-//     it while the pointer stays, with an autoplay-policy fallback that
-//     reverts to muted playback if the browser blocks unmuted play.
-//   • TikTok-style viewer — clicking a card opens a fullscreen vertical
-//     scroll-snap deck (swipe / wheel / arrow keys between templates, sound
-//     on, tap video to pause, mute toggle) with an "Open Editor" CTA per
-//     slide. The card's "Open Editor" button still deep-links the editor.
-//     The viewer is shared: feed swipes the (filtered) feed, categories
-//     swipes the revealed group.
-//   • bookmarks — one-tap bookmark on each viewer slide + on cards on hover,
-//     persisted client-side in localStorage ('rk-discover-bookmarks'; there
-//     is no backend favorite endpoint), plus a "bookmarked only" toolbar
-//     filter chip on the feed so saved templates are findable.
-//   • no platform pill on posters (user feedback) — source only shows as the
-//     small meta line inside the viewer slide.
-//
-// The renderer keeps its `mode` signature (so the existing zero-arg
-// `/reskin/discover/:mode` route keeps working — the client fetches the live
-// endpoints same-origin using the browser session cookie) and adds an optional
-// 2nd `input` arg (defaulted) so the parent route can, if it wants, pass the
-// signed-in account id (→ ?account= on fetches + editor links, matching the
-// live editorHref) and override any endpoint.
-import { reskinDocument, rkEscape } from "./document.js";
-import { POPULAR_INSPIRATION_GROUPS } from "../frontend/homepage-shared.js";
-/** Config-only defaults (the data fields feedInitial/feedFetchedAt are seeded
- *  per-request, never defaulted). */
-const DEFAULT_INPUT = {
-    accountId: "",
-    isLoggedIn: false,
-    feedEndpoint: "/discover/feed",
-    popularEndpoint: "/discover/popular",
-    swipeStackEndpoint: "/discover/swipe/stack",
-    swipeRefillEndpoint: "/discover/swipe/refill",
-    swipeBase: "/discover/swipe",
-    editorBase: "/editor"
-};
-const MODES = [
-    { mode: "feed", label: "Feed" },
-    { mode: "swipe", label: "Swipe" },
-    { mode: "categories", label: "Categories" }
-];
-const MODE_COPY = {
-    feed: {
-        sub: "Browse proven short-form formats, then open one in the editor and make it yours in an afternoon."
-    },
-    swipe: {
-        sub: "One template at a time — keep the ones that fit and we'll recut them into ads for your brand."
-    },
-    categories: {
-        sub: "Jump straight to the style you need — every short-form format, neatly grouped."
-    }
-};
-// Functional (non-decorative) SVG glyphs.
-const EDIT_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>`;
-const COPY_ICON = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"/></svg>`;
-const IDCHECK_ICON = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12.5l5 5 10-11"/></svg>`;
-const BOOKMARK_ICON = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21l-5-3.4L7 21V5.2A2.2 2.2 0 0 1 9.2 3h5.6A2.2 2.2 0 0 1 17 5.2z"/></svg>`;
-const CHECK_ICON = `<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12.5l5 5 10-11"/></svg>`;
-const CROSS_ICON = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6L6 18"/></svg>`;
-const SOUND_ON_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/><path d="M18.5 6a9 9 0 0 1 0 12"/></svg>`;
-const SOUND_OFF_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5 6 9H3v6h3l5 4z"/><path d="m16 9.5 5 5M21 9.5l-5 5"/></svg>`;
-const CHEV_UP_ICON = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 14.5 7-7 7 7"/></svg>`;
-const CHEV_DOWN_ICON = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 9.5 7 7 7-7"/></svg>`;
-const PLAY_ICON = `<svg width="56" height="56" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.4v13.2L19 12z"/></svg>`;
-const PLUS_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>`;
-const UPLOAD_ICON = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg>`;
-/** Safe JSON embedding inside a <script> tag (mirrors page-shell.escapeJsonForHtml). */
-function jsonForScript(value) {
-    return JSON.stringify(value ?? null)
-        .replace(/</g, "\\u003c")
-        .replace(/>/g, "\\u003e")
-        .replace(/&/g, "\\u0026")
-        .replace(/\u2028/g, "\\u2028")
-        .replace(/\u2029/g, "\\u2029");
-}
-// The segmented Feed / Swipe / Categories toggle (three real links).
-function modeToggle(active) {
-    const links = MODES.map((m) => {
-        const on = m.mode === active ? " is-active" : "";
-        return `<a class="rk-discover-mode${on}" href="/discover/${m.mode}"${m.mode === active ? ' aria-current="page"' : ""}>${m.label}</a>`;
-    }).join("");
-    return `<nav class="rk-discover-modes" aria-label="Discover mode">${links}</nav>`;
-}
-// Server-rendered category skeleton from the real POPULAR_INSPIRATION_GROUPS
-// manifest — always renders (real group labels + real format counts) even
-// before/without the /discover/popular fetch, so categories mode is never blank
-// and degrades gracefully offline. The client enriches each card with real
-// thumbnails + wires an in-page reveal of that group's real templates.
-function categorySkeleton() {
-    return POPULAR_INSPIRATION_GROUPS.map((g) => {
-        const count = g.items.length;
-        const blurb = g.items.slice(0, 4).map((i) => i.title).join(" · ");
-        const fallbackQuery = encodeURIComponent(g.label);
-        // Placeholder thumb tiles (no media yet) keep the card height stable; the
-        // client swaps in real poster media once /discover/popular resolves.
-        const thumbs = Array.from({ length: 4 })
-            .map(() => `<span class="rk-discover-mini rk-discover-mini-ph"></span>`)
-            .join("");
-        return `<a class="rk-discover-cat rk-card-hover" href="/discover?q=${fallbackQuery}" data-rk-cat="${rkEscape(g.label)}">
-    <div class="rk-discover-cat-head">
-      <div class="rk-discover-cat-titlewrap">
-        <h3 class="rk-discover-cat-title">${rkEscape(g.label)}</h3>
-        <p class="rk-discover-cat-count" data-rk-cat-count>${count} format${count === 1 ? "" : "s"}</p>
-      </div>
-      <span class="rk-discover-cat-arrow" aria-hidden="true">&rarr;</span>
-    </div>
-    <div class="rk-discover-cat-thumbs" data-rk-cat-thumbs>${thumbs}</div>
-    <p class="rk-discover-cat-blurb">${rkEscape(blurb)}</p>
-  </a>`;
-    }).join("");
-}
-// The fullscreen TikTok-style viewer shell — shared by feed and categories
-// (the client script fills [data-viewer-track] with slides on open).
-function viewerHtml() {
-    return `
-    <div class="rk-discover-viewer" data-rk-viewer hidden role="dialog" aria-modal="true" aria-label="Template viewer">
-      <div class="rk-discover-viewer-scrim" data-viewer-close></div>
-      <div class="rk-discover-viewer-track" data-viewer-track></div>
-      <div class="rk-discover-viewer-ui">
-        <button type="button" class="rk-discover-viewer-btn" data-viewer-mute aria-label="Toggle sound"><span class="rk-dvm-on">${SOUND_ON_ICON}</span><span class="rk-dvm-off">${SOUND_OFF_ICON}</span></button>
-        <button type="button" class="rk-discover-viewer-btn" data-viewer-close aria-label="Close viewer">${CROSS_ICON}</button>
-      </div>
-      <div class="rk-discover-viewer-nav">
-        <button type="button" class="rk-discover-viewer-btn" data-viewer-prev aria-label="Previous template">${CHEV_UP_ICON}</button>
-        <button type="button" class="rk-discover-viewer-btn" data-viewer-next aria-label="Next template">${CHEV_DOWN_ICON}</button>
-      </div>
-    </div>`;
-}
-// The fullscreen TikTok-style viewer for the SWIPE deck — a sibling of the feed
-// viewer above but purpose-built for swiping: slides carry live composition
-// iframes (not video/img), and a bottom action bar reject/approves the ACTIVE
-// card, driving the same POST /discover/swipe/:id/{approve,reject} the deck uses.
-// The client script (swipe block) fills [data-sv-track] with slides on open.
-function swipeViewerHtml() {
-    return `
-    <div class="rk-discover-viewer rk-swipe-viewer" data-rk-swipe-viewer hidden role="dialog" aria-modal="true" aria-label="Swipe preview">
-      <div class="rk-discover-viewer-scrim" data-sv-close></div>
-      <div class="rk-discover-viewer-track rk-swipe-viewer-track" data-sv-track></div>
-      <div class="rk-discover-viewer-ui">
-        <button type="button" class="rk-discover-viewer-btn" data-sv-mute aria-label="Toggle sound"><span class="rk-dvm-on">${SOUND_ON_ICON}</span><span class="rk-dvm-off">${SOUND_OFF_ICON}</span></button>
-        <button type="button" class="rk-discover-viewer-btn" data-sv-close aria-label="Close viewer">${CROSS_ICON}</button>
-      </div>
-      <div class="rk-discover-viewer-nav">
-        <button type="button" class="rk-discover-viewer-btn" data-sv-prev aria-label="Previous">${CHEV_UP_ICON}</button>
-        <button type="button" class="rk-discover-viewer-btn" data-sv-next aria-label="Next">${CHEV_DOWN_ICON}</button>
-      </div>
-      <div class="rk-swipe-viewer-actions" data-sv-actions>
-        <button type="button" class="rk-discover-act rk-discover-act-skip" data-sv-reject aria-label="Reject">${CROSS_ICON}</button>
-        <button type="button" class="rk-discover-act rk-discover-act-fork" data-sv-approve aria-label="Approve">${CHECK_ICON}</button>
-      </div>
-    </div>`;
-}
-// The "Add New" modal (feed mode only) — paste a social video URL or upload a
-// video, adding it to the caller's private Discover feed via the same real
-// endpoints the old React SPA used (POST /discover/templates + the upload
-// presign pair). Mirrors the old UI's Add Template modal, farmville-styled.
-function addModalHtml() {
-    return `
-    <div class="rk-add-modal" data-rk-add-modal hidden role="dialog" aria-modal="true" aria-labelledby="rk-add-title">
-      <div class="rk-add-scrim" data-rk-add-close></div>
-      <div class="rk-add-card">
-        <div class="rk-add-head">
-          <h2 class="rk-add-title" id="rk-add-title">Add to your feed</h2>
-          <button type="button" class="rk-add-x" data-rk-add-close aria-label="Close">${CROSS_ICON}</button>
-        </div>
-        <p class="rk-add-sub">Paste a TikTok, YouTube, Twitter/X, or Instagram video link &mdash; or upload a video from your computer. It's added to your Discover feed, visible only to your account.</p>
-        <form class="rk-add-form" data-rk-add-form>
-          <div class="rk-add-field">
-            <label class="rk-add-label" for="rk-add-url">Video URL</label>
-            <input class="rk-add-input" id="rk-add-url" type="url" placeholder="https://www.tiktok.com/@&hellip;" autocomplete="off" data-rk-add-url />
-          </div>
-          <div class="rk-add-or"><span>or</span></div>
-          <label class="rk-add-file" data-rk-add-filelabel>
-            <input type="file" accept="video/*,.mp4,.mov,.webm,.m4v" data-rk-add-file />
-            <span class="rk-add-file-ic">${UPLOAD_ICON}</span>
-            <span class="rk-add-file-text" data-rk-add-filetext>Upload a video<span class="rk-add-optional">MP4 / MOV / WebM, up to 200 MB</span></span>
-          </label>
-          <div class="rk-add-field">
-            <label class="rk-add-label" for="rk-add-tagline">Tagline <span class="rk-add-optional">optional</span></label>
-            <input class="rk-add-input" id="rk-add-tagline" type="text" placeholder="What makes it work" autocomplete="off" data-rk-add-tagline />
-          </div>
-          <div class="rk-add-field">
-            <label class="rk-add-label" for="rk-add-notes">Notes <span class="rk-add-optional">optional</span></label>
-            <textarea class="rk-add-input rk-add-textarea" id="rk-add-notes" rows="2" placeholder="Anything to remember about this one" data-rk-add-notes></textarea>
-          </div>
-          <p class="rk-add-error" data-rk-add-error hidden></p>
-          <div class="rk-add-actions">
-            <button type="button" class="rk-btn rk-btn-ghost" data-rk-add-close>Cancel</button>
-            <button type="submit" class="rk-btn rk-btn-gold" data-rk-add-submit>Add to feed</button>
-          </div>
-        </form>
-      </div>
-    </div>`;
-}
-export function renderReskinDiscover(mode = "feed", input = {}) {
-    const copy = MODE_COPY[mode];
-    // feedInitial/feedFetchedAt only make sense in feed mode; drop them elsewhere
-    // so swipe/categories boots stay lean.
-    const { feedInitial, feedFetchedAt, ...cfg } = input;
-    const boot = {
-        ...DEFAULT_INPUT,
-        ...cfg,
-        feedInitial: mode === "feed" ? feedInitial ?? null : null,
-        feedFetchedAt: mode === "feed" ? feedFetchedAt ?? null : null
-    };
-    let modeBody = "";
-    // ── FEED ────────────────────────────────────────────────────────────────
-    if (mode === "feed") {
-        modeBody = `
-    <div class="rk-discover-feed" data-rk-feed>
-      <div class="rk-discover-grid" data-rk-grid></div>
-      <div class="rk-discover-state" data-rk-state>Loading templates&hellip;</div>
-    </div>${viewerHtml()}`;
-    }
-    // Feed's quick search + bookmarked-only chip share the toolbar row with the
-    // mode toggle.
-    const toolbarSearch = mode === "feed"
-        ? `<label class="rk-discover-search">
-      <span class="rk-discover-search-ic" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="8.5" r="5.8"/><path d="m13 13 4.2 4.2"/></svg></span>
-      <input type="search" data-rk-search placeholder="Search templates" autocomplete="off" aria-label="Search templates" />
-    </label>
-    <button type="button" class="rk-discover-bmfilter" data-rk-bmfilter aria-pressed="false" title="Show bookmarked templates only">${BOOKMARK_ICON}<span class="rk-discover-bmfilter-count" data-rk-bmcount></span></button>`
-        : "";
-    // Categories' in-page group reveal header ("← All categories" + the group
-    // title) lives IN the toolbar row, next to the mode toggle (user feedback);
-    // the client unhides it while a group is revealed.
-    const toolbarReveal = mode === "categories"
-        ? `<div class="rk-discover-reveal-head" data-rk-reveal-head hidden>
-      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-rk-cat-back>&larr; All categories</button>
-      <h2 class="rk-discover-reveal-title" data-rk-reveal-title></h2>
-    </div>`
-        : "";
-    // ── SWIPE ───────────────────────────────────────────────────────────────
-    if (mode === "swipe") {
-        modeBody = `
-    <div class="rk-discover-swipe-wrap" data-rk-swipe>
-      <div class="rk-discover-stage">
-        <button type="button" class="rk-discover-act rk-discover-act-skip" data-swipe-skip data-swipe-act hidden aria-label="Skip">${CROSS_ICON}</button>
-        <div class="rk-discover-deck" data-deck>
-          <button type="button" class="rk-discover-sound-toggle" data-swipe-sound hidden aria-label="Unmute" aria-pressed="false">${SOUND_OFF_ICON}</button>
-          <div class="rk-discover-swipe-state" data-rk-swipe-state>Loading your deck&hellip;</div>
-        </div>
-        <button type="button" class="rk-discover-act rk-discover-act-fork" data-swipe-fork data-swipe-act hidden aria-label="Fork">${CHECK_ICON}</button>
-      </div>
-      <p class="rk-discover-act-hint" data-actions-hint hidden>Tap the card to preview full-screen. Swipe to customize into an ad for your brand.</p>
-    </div>${swipeViewerHtml()}`;
-    }
-    // ── CATEGORIES ──────────────────────────────────────────────────────────
-    if (mode === "categories") {
-        modeBody = `
-    <div class="rk-discover-catwrap" data-rk-cats>
-      <div class="rk-discover-cats" data-rk-cats-grid>${categorySkeleton()}</div>
-      <section class="rk-discover-cat-reveal" data-rk-cat-reveal hidden>
-        <div class="rk-discover-grid" data-rk-reveal-grid></div>
-      </section>
-      <div class="rk-discover-state rk-discover-cats-state" data-rk-cats-state hidden></div>
-    </div>${viewerHtml()}`;
-    }
-    // "Add New" lives top-right of the page head (feed mode only) — opens the
-    // Add modal when signed in, else routes to /login (mirrors the old UI).
-    const addNewBtn = mode === "feed"
-        ? (boot.isLoggedIn
-            ? `<button type="button" class="rk-btn rk-btn-gold rk-discover-add" data-rk-add>${PLUS_ICON}<span>Add New</span></button>`
-            : `<a class="rk-btn rk-btn-gold rk-discover-add" href="/login">${PLUS_ICON}<span>Add New</span></a>`)
-        : "";
-    const body = `
-<main class="rk-container rk-page">
-  <div class="rk-page-head rk-discover-head">
-    <div class="rk-discover-headtext">
-      <h1 class="rk-h1">Discover</h1>
-      <p class="rk-sub">${copy.sub}</p>
-    </div>
-    ${addNewBtn}
-  </div>
-  <div class="rk-discover-toolbar">
-    ${modeToggle(mode)}
-    ${toolbarReveal}
-    ${toolbarSearch}
-  </div>
-  ${modeBody}
-  ${mode === "feed" ? addModalHtml() : ""}
-  <script type="application/json" data-rk-discover-boot>${jsonForScript(boot)}</script>
-</main>`;
-    const pageCss = `
-/* head row: title block on the left, "Add New" CTA pinned top-right */
-.rk-discover-head{margin-bottom:22px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
-.rk-discover-headtext{display:grid;gap:4px;min-width:0}
-.rk-discover-add{flex:none;align-self:flex-start}
-.rk-discover-add svg{margin-top:-1px}
-@media(max-width:520px){
-  .rk-discover-add span{display:none}
-  .rk-discover-add{padding:11px}
-}
-
-/* ── "Add New" modal ── */
-.rk-add-modal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:20px}
-.rk-add-modal[hidden]{display:none}
-.rk-add-scrim{position:absolute;inset:0;background:rgba(15,12,5,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
-.rk-add-card{position:relative;z-index:1;width:min(480px,100%);max-height:calc(100vh - 40px);overflow:auto;
-  background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-xl);padding:24px 24px 22px}
-.rk-add-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
-.rk-add-title{font-family:var(--rk-font-display);font-size:var(--rk-text-xl);font-weight:800;color:var(--rk-ink);letter-spacing:-.02em}
-.rk-add-x{flex:none;width:34px;height:34px;border-radius:var(--rk-r-full);border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600);
-  display:grid;place-items:center;cursor:pointer;transition:color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
-.rk-add-x:hover{color:var(--rk-ink);border-color:var(--rk-border-strong)}
-.rk-add-x svg{width:16px;height:16px}
-.rk-add-sub{font-size:13px;color:var(--rk-text-muted);line-height:1.5;margin-bottom:18px}
-.rk-add-form{display:grid;gap:14px}
-.rk-add-field{display:grid;gap:6px}
-.rk-add-label{font-size:12.5px;font-weight:700;color:var(--rk-n-700)}
-.rk-add-optional{font-weight:500;color:var(--rk-text-faint)}
-.rk-add-input{width:100%;box-sizing:border-box;border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);
-  background:#fff;padding:11px 14px;font-family:var(--rk-font-body);font-size:14px;color:var(--rk-ink);outline:none;
-  transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
-.rk-add-input::placeholder{color:var(--rk-n-400)}
-.rk-add-input:focus{border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
-.rk-add-textarea{resize:vertical;min-height:52px;line-height:1.45}
-.rk-add-or{display:flex;align-items:center;gap:12px;color:var(--rk-text-faint);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
-.rk-add-or::before,.rk-add-or::after{content:"";height:1px;flex:1;background:var(--rk-border)}
-.rk-add-file{display:flex;align-items:center;gap:12px;border:1px dashed var(--rk-border-strong);border-radius:var(--rk-r-lg);
-  padding:13px 14px;cursor:pointer;color:var(--rk-n-700);
-  transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
-.rk-add-file:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
-.rk-add-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
-.rk-add-file-ic{flex:none;color:var(--rk-gold-700);display:grid;place-items:center}
-.rk-add-file-text{font-size:13.5px;font-weight:600;display:grid;gap:2px;min-width:0}
-.rk-add-file-text .rk-add-optional{font-size:11.5px;font-weight:500}
-.rk-add-file.is-picked{border-style:solid;border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
-.rk-add-error{font-size:13px;color:#b91c1c;background:var(--rk-red-tint);border:1px solid #fecaca;border-radius:var(--rk-r-lg);padding:9px 12px;font-weight:500;line-height:1.4}
-.rk-add-error[hidden]{display:none}
-.rk-add-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
-.rk-add-actions .rk-btn[disabled]{opacity:.6;cursor:default;transform:none}
-
-/* toolbar row: mode toggle + (feed) quick search share one line, wrap on mobile */
-.rk-discover-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
-
-/* segmented Feed / Swipe / Categories toggle — three real links, gold active */
-.rk-discover-modes{display:inline-flex;flex:none;gap:4px;background:var(--rk-n-100);border:1px solid var(--rk-border);
-  border-radius:var(--rk-r-full);padding:4px;box-shadow:var(--rk-shadow-xs);max-width:100%;overflow:auto;scrollbar-width:none}
-.rk-discover-modes::-webkit-scrollbar{display:none}
-.rk-discover-mode{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--rk-r-full);
-  font-size:14px;font-weight:600;color:var(--rk-n-600);white-space:nowrap;
-  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
-.rk-discover-mode:hover{color:var(--rk-ink)}
-.rk-discover-mode.is-active{background:var(--rk-gold-500);color:var(--rk-ink);font-weight:700;box-shadow:var(--rk-shadow-sm)}
-
-/* ── feed: quick search (lives in the toolbar row) + poster grid ── */
-.rk-discover-search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--rk-border-strong);
-  border-radius:var(--rk-r-full);padding:10px 16px;box-shadow:var(--rk-shadow-xs);
-  transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
-.rk-discover-search:focus-within{border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
-.rk-discover-search-ic{color:var(--rk-text-faint);display:grid;place-items:center;flex:none}
-.rk-discover-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--rk-font-body);font-size:14px;color:var(--rk-ink)}
-.rk-discover-search input::placeholder{color:var(--rk-n-400)}
-
-.rk-discover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:22px}
-@media(max-width:520px){.rk-discover-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}}
-.rk-discover-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);overflow:hidden;box-shadow:var(--rk-shadow-card);display:flex;flex-direction:column;min-width:0}
-.rk-discover-poster{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--rk-n-100);color:inherit}
-.rk-discover-poster img,.rk-discover-poster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
-.rk-discover-media-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--rk-text-faint);
-  background:repeating-linear-gradient(135deg,var(--rk-n-100),var(--rk-n-100) 12px,var(--rk-n-50) 12px,var(--rk-n-50) 24px)}
-.rk-discover-dur{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--rk-font-body);font-size:11.5px;font-weight:700;color:#fff;
-  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:4px 9px;border-radius:var(--rk-r-full)}
-.rk-discover-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.28) 0%,transparent 42%)}
-/* wrap = positioning context so the bookmark button can sit NEXT TO (not
-   inside) the poster anchor — a button inside an <a> is invalid HTML */
-.rk-discover-posterwrap{position:relative}
-.rk-discover-bm{position:absolute;right:10px;bottom:10px;z-index:4;width:34px;height:34px;border:0;border-radius:var(--rk-r-full);
-  display:none;place-items:center;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;
-  transition:transform var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
-.rk-discover-posterwrap:hover .rk-discover-bm{display:grid}
-/* touch has no hover, so always show the bookmark button there (else you can
-   never save a not-yet-bookmarked card from the grid) */
-@media(hover:none){.rk-discover-bm{display:grid}}
-.rk-discover-bm:hover{transform:scale(1.08);background:rgba(0,0,0,.6)}
-.rk-discover-bm.is-on{display:grid;background:var(--rk-gold-500);color:var(--rk-ink)}
-.rk-discover-bm.is-on svg{fill:currentColor}
-.rk-discover-body{padding:15px 16px 16px;display:grid;gap:13px;min-width:0}
-.rk-discover-titlewrap{display:grid;gap:6px;min-width:0}
-.rk-discover-title{font-family:var(--rk-font-display);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;color:var(--rk-ink);line-height:1.2;
-  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-.rk-discover-desc{font-size:12.5px;font-weight:500;color:var(--rk-text-muted);line-height:1.4;
-  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-.rk-discover-idchip{justify-self:start;display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;
-  padding:3px 8px;border-radius:999px;background:var(--rk-surface-2,rgba(0,0,0,.05));
-  font-family:var(--rk-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:11px;font-weight:600;
-  color:var(--rk-text-muted);cursor:pointer;border:0;line-height:1.4;transition:background .15s,color .15s;
-  -webkit-user-select:none;user-select:none;box-sizing:border-box}
-.rk-discover-idchip:hover{background:var(--rk-surface-3,rgba(0,0,0,.09));color:var(--rk-ink)}
-.rk-discover-idchip svg{flex:0 0 auto;opacity:.7}
-.rk-discover-idchip .rk-idchip-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.rk-discover-idchip.is-copied{background:rgba(52,168,110,.16);color:#1f7a4d}
-.rk-discover-idchip.is-copied svg{opacity:1;color:#1f7a4d}
-.rk-discover-fork{gap:7px}
-.rk-discover-fork svg{margin-top:-1px}
-.rk-discover-fork-disabled{opacity:.6;cursor:default;pointer-events:none}
-.rk-discover-badges{display:flex;flex-wrap:wrap;gap:6px}
-
-/* hover-to-unmute speaker badge (video posters only): hidden until hover,
-   flips to a gold "sound on" chip once the browser actually allows audio */
-.rk-discover-sound{position:absolute;left:12px;bottom:12px;z-index:3;width:32px;height:32px;display:none;place-items:center;color:#fff;
-  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--rk-r-full);pointer-events:none}
-.rk-discover-sound span{display:grid;place-items:center;line-height:0}
-.rk-discover-posterwrap:hover .rk-discover-sound{display:grid}
-.rk-discover-sound .rk-ds-on{display:none}
-.rk-discover-posterwrap.is-sound .rk-discover-sound{display:grid;background:var(--rk-gold-500);color:var(--rk-ink)}
-.rk-discover-posterwrap.is-sound .rk-ds-on{display:grid}
-.rk-discover-posterwrap.is-sound .rk-ds-off{display:none}
-
-/* bookmarked-only toolbar chip (feed) — count span collapses when empty */
-.rk-discover-bmfilter{flex:none;display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:var(--rk-r-full);
-  border:1px solid var(--rk-border-strong);background:#fff;color:var(--rk-n-600);font-family:var(--rk-font-body);font-size:13px;font-weight:700;
-  cursor:pointer;box-shadow:var(--rk-shadow-xs);
-  transition:color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
-.rk-discover-bmfilter:hover{color:var(--rk-ink);border-color:var(--rk-gold-600)}
-.rk-discover-bmfilter.is-active{background:var(--rk-gold-500);border-color:transparent;color:var(--rk-ink)}
-.rk-discover-bmfilter.is-active svg{fill:currentColor}
-.rk-discover-bmfilter-count:empty{display:none}
-
-/* load / empty / error state (feed + categories) */
-.rk-discover-state{padding:48px 16px;text-align:center;color:var(--rk-text-muted);font-size:14px;
-  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xs)}
-.rk-discover-state[hidden]{display:none}
-.rk-discover-state.is-error{color:#b91c1c;background:var(--rk-red-tint);border-color:#fecaca;font-weight:500}
-.rk-discover-state .rk-btn{margin-top:14px}
-
-/* ── feed: TikTok-style fullscreen viewer (click a card → vertical deck) ── */
-html.rk-noscroll,html.rk-noscroll body{overflow:hidden}
-.rk-discover-viewer{position:fixed;inset:0;z-index:120}
-.rk-discover-viewer[hidden]{display:none}
-.rk-discover-viewer-scrim{position:absolute;inset:0;background:rgba(15,12,5,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
-.rk-discover-viewer-track{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
-.rk-discover-viewer-track::-webkit-scrollbar{display:none}
-.rk-discover-viewer-slide{height:100%;display:grid;place-items:center;scroll-snap-align:start;scroll-snap-stop:always;padding:20px 0}
-.rk-discover-viewer-stage{position:relative;width:min(92vw,calc(93vh * 9 / 16));aspect-ratio:9/16;max-height:100%;margin:0;
-  border-radius:var(--rk-r-3xl);overflow:hidden;background:#000;box-shadow:var(--rk-shadow-xl)}
-.rk-discover-viewer-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
-video.rk-discover-viewer-media{cursor:pointer}
-.rk-discover-viewer-pause{position:absolute;inset:0;z-index:2;display:none;place-items:center;color:rgba(255,255,255,.92);pointer-events:none;
-  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
-.rk-discover-viewer-slide.is-paused .rk-discover-viewer-pause{display:grid}
-.rk-discover-viewer-shade{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;
-  background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.22) 62%,transparent 100%)}
-/* right padding reserves the bookmark rail so text never runs under it */
-.rk-discover-viewer-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 78px 20px 20px;display:grid;gap:7px;justify-items:start;pointer-events:none}
-.rk-discover-viewer-bm{position:absolute;right:14px;bottom:22px;z-index:4;width:48px;height:48px;border-radius:var(--rk-r-full);
-  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
-  color:#fff;display:grid;place-items:center;cursor:pointer;
-  transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
-.rk-discover-viewer-bm:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
-.rk-discover-viewer-bm.is-on{background:var(--rk-gold-500);border-color:transparent;color:var(--rk-ink)}
-.rk-discover-viewer-bm.is-on svg{fill:currentColor}
-.rk-discover-viewer-meta{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.72)}
-.rk-discover-viewer-title{font-family:var(--rk-font-display);font-weight:700;font-size:1.12rem;line-height:1.2;letter-spacing:-.01em;color:#fff}
-.rk-discover-viewer-desc{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82);line-height:1.4;
-  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-.rk-discover-viewer-fork{pointer-events:auto;gap:7px;margin-top:5px}
-.rk-discover-viewer-ui{position:absolute;top:max(16px,env(safe-area-inset-top,0px));right:16px;z-index:5;display:flex;gap:10px}
-.rk-discover-viewer-btn{width:44px;height:44px;border-radius:var(--rk-r-full);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);
-  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;
-  transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
-.rk-discover-viewer-btn:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
-.rk-discover-viewer-btn span{display:grid;place-items:center;line-height:0}
-.rk-discover-viewer .rk-dvm-off{display:none}
-.rk-discover-viewer.is-muted .rk-dvm-on{display:none}
-.rk-discover-viewer.is-muted .rk-dvm-off{display:grid}
-.rk-discover-viewer-nav{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:5;display:grid;gap:12px}
-@media(hover:none){.rk-discover-viewer-nav{display:none}}
-@media(max-width:640px){
-  .rk-discover-viewer-nav{display:none}
-  .rk-discover-viewer-slide{padding:0}
-  .rk-discover-viewer-stage{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
-}
-
-/* ── swipe: single-card deck ── */
-.rk-discover-swipe-wrap{display:grid;justify-items:center;gap:18px;padding:4px 0 8px}
-.rk-discover-deck{position:relative;width:min(322px,84vw);aspect-ratio:9/16;margin:6px 0}
-.rk-discover-swipe-state{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:28px;
-  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card);color:var(--rk-text-muted);font-size:14px}
-.rk-discover-swipe-state[hidden]{display:none}
-.rk-discover-swipe-state.is-error{color:#b91c1c}
-.rk-discover-swipe-state-title{font-family:var(--rk-font-display);font-size:var(--rk-text-lg);font-weight:700;color:var(--rk-ink)}
-.rk-discover-swipe-state .rk-btn{margin-top:6px}
-.rk-discover-spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--rk-gold-tint2);border-top-color:var(--rk-gold-700);animation:rk-discover-spin .8s linear infinite}
-@keyframes rk-discover-spin{to{transform:rotate(360deg)}}
-.rk-discover-swipe{position:absolute;inset:0;border-radius:var(--rk-r-3xl);overflow:hidden;border:1px solid var(--rk-border);background:#0b0b0b;
-  box-shadow:var(--rk-shadow-xl);transform-origin:center bottom;will-change:transform;
-  transition:transform .38s var(--rk-ease),opacity .38s var(--rk-ease)}
-.rk-discover-swipe-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;background:#000}
-.rk-discover-swipe-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;
-  background:linear-gradient(155deg,#3a3a3a,#111);color:#fff;font-family:var(--rk-font-display);font-weight:700;font-size:1.1rem;line-height:1.15;
-  transition:opacity .4s var(--rk-ease)}
-.rk-discover-swipe-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.16) 46%,transparent 74%)}
-.rk-discover-swipe-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;display:grid;gap:6px;pointer-events:none}
-.rk-discover-swipe-title{font-family:var(--rk-font-display);font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:-.01em;line-height:1.18}
-.rk-discover-swipe-caption{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.84);line-height:1.35;
-  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-/* audio toggle — overlays the top-of-deck card, top-right; global mute state */
-.rk-discover-sound-toggle{position:absolute;top:12px;right:12px;z-index:40;width:38px;height:38px;border-radius:var(--rk-r-full);
-  border:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(15,15,15,.5);backdrop-filter:blur(6px);
-  -webkit-backdrop-filter:blur(6px);box-shadow:0 2px 8px -2px rgba(0,0,0,.5);
-  transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
-.rk-discover-sound-toggle[hidden]{display:none}
-.rk-discover-sound-toggle:hover{background:rgba(15,15,15,.72);transform:scale(1.06)}
-.rk-discover-sound-toggle.is-on{background:var(--rk-gold-500);color:var(--rk-ink)}
-.rk-discover-sound-toggle.is-on:hover{background:var(--rk-gold-700)}
-
-/* deck flanked by skip/fork — buttons ride the card's vertical center, 1fr gutters absorb spare width.
-   Explicit column placement keeps the deck centered when the buttons are display:none (empty/caught-up states). */
-.rk-discover-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;width:100%}
-.rk-discover-deck{grid-column:2}
-.rk-discover-act{width:60px;height:60px;flex:none;border-radius:var(--rk-r-full);border:1px solid var(--rk-border);background:#fff;
-  display:grid;place-items:center;cursor:pointer;box-shadow:var(--rk-shadow-md);
-  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
-.rk-discover-act[hidden]{display:none}
-.rk-discover-act-skip{grid-column:1;justify-self:end}
-.rk-discover-act-fork{grid-column:3;justify-self:start}
-/* no side room on small phones — card spans, buttons drop under it as a pair */
-@media(max-width:560px){
-  .rk-discover-stage{grid-template-columns:auto auto;grid-template-areas:"deck deck" "skip fork";justify-content:center;column-gap:26px;row-gap:16px}
-  .rk-discover-deck{grid-area:deck}
-  .rk-discover-act-skip{grid-area:skip;justify-self:center}
-  .rk-discover-act-fork{grid-area:fork;justify-self:center}
-}
-/* short viewports (landscape phones, small laptops): the deck is sized by width
-   with a locked 9/16 ratio → ~570px tall, taller than the screen, so the card +
-   its flanking Skip/Fork controls fall off-screen. Cap it by HEIGHT instead and
-   let width follow the ratio (mirrors how the fullscreen viewer stage sizes). */
-@media(max-height:720px){
-  .rk-discover-deck{height:min(74vh,572px);width:auto}
-}
-@media(max-height:520px){
-  .rk-discover-head{margin-bottom:10px}
-  .rk-discover-swipe-wrap{gap:10px;padding:0}
-}
-.rk-discover-act:hover{transform:translateY(-2px);box-shadow:var(--rk-shadow-lg)}
-.rk-discover-act:disabled{opacity:.5;cursor:default;transform:none}
-.rk-discover-act-skip{color:var(--rk-n-500)}
-.rk-discover-act-skip:hover{color:var(--rk-red);border-color:var(--rk-red-tint)}
-.rk-discover-act-fork{background:var(--rk-gold-500);color:var(--rk-ink);border-color:transparent}
-.rk-discover-act-fork:hover{background:var(--rk-gold-700);box-shadow:0 8px 22px -6px rgba(252,185,0,.6)}
-.rk-discover-act-hint{font-size:12.5px;font-weight:600;color:var(--rk-text-faint);text-align:center;letter-spacing:.01em}
-.rk-discover-act-hint[hidden]{display:none}
-/* tapping the front card opens the fullscreen swipe viewer */
-.rk-discover-deck .rk-discover-swipe{cursor:pointer}
-/* ── swipe: fullscreen TikTok viewer — reuses .rk-discover-viewer* shell; slides
-   hold live composition iframes (.rk-discover-swipe-frame) and a bottom bar
-   reject/approves the active card. */
-.rk-swipe-viewer-stage{background:#000}
-.rk-swipe-viewer-slide .rk-discover-swipe-frame{border-radius:inherit}
-.rk-swipe-viewer .rk-discover-viewer-info{padding-bottom:112px}
-.rk-swipe-viewer-actions{position:absolute;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom,0px));z-index:6;
-  display:flex;gap:40px;justify-content:center;align-items:center;pointer-events:none}
-.rk-swipe-viewer-actions .rk-discover-act{pointer-events:auto;width:64px;height:64px}
-.rk-swipe-viewer-actions .rk-discover-act[hidden]{display:none}
-@media(max-width:560px){.rk-swipe-viewer-actions{gap:30px}}
-
-/* ── categories: browse-by-format cards ── */
-.rk-discover-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
-@media(max-width:560px){.rk-discover-cats{grid-template-columns:1fr}}
-.rk-discover-cats[hidden]{display:none}
-.rk-discover-cat{display:flex;flex-direction:column;gap:14px;background:var(--rk-surface);border:1px solid var(--rk-border);
-  border-radius:var(--rk-r-3xl);padding:22px;box-shadow:var(--rk-shadow-card);color:inherit}
-.rk-discover-cat-head{display:flex;align-items:center;gap:14px}
-.rk-discover-cat-titlewrap{flex:1;min-width:0;display:grid;gap:2px}
-.rk-discover-cat-title{font-family:var(--rk-font-display);font-size:var(--rk-text-lg);font-weight:700;color:var(--rk-ink);letter-spacing:-.01em}
-.rk-discover-cat-count{font-size:12.5px;font-weight:600;color:var(--rk-text-muted)}
-.rk-discover-cat-arrow{flex:none;font-size:18px;color:var(--rk-n-400);transition:transform var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
-.rk-discover-cat:hover .rk-discover-cat-arrow{transform:translateX(3px);color:var(--rk-gold-700)}
-.rk-discover-cat-blurb{font-size:13px;color:var(--rk-text-muted);line-height:1.45;
-  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-.rk-discover-cat-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
-.rk-discover-mini{position:relative;aspect-ratio:9/16;border-radius:var(--rk-r-lg);overflow:hidden;background:var(--rk-n-100);box-shadow:var(--rk-shadow-xs)}
-.rk-discover-mini img,.rk-discover-mini video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
-.rk-discover-mini-ph{background:linear-gradient(135deg,var(--rk-n-100),var(--rk-n-200))}
-
-.rk-discover-cat-reveal[hidden]{display:none}
-/* reveal header shares the toolbar row with the mode toggle (user feedback) */
-.rk-discover-reveal-head{display:flex;align-items:center;gap:12px;min-width:0}
-.rk-discover-reveal-head[hidden]{display:none}
-.rk-discover-reveal-title{font-family:var(--rk-font-display);font-size:var(--rk-text-xl);font-weight:800;color:var(--rk-ink);letter-spacing:-.02em;
-  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.rk-discover-cats-state[hidden]{display:none}
-`;
-    const script = `
-(function(){
-  var root=document;
-  var bootEl=root.querySelector('[data-rk-discover-boot]');
-  var boot={};
-  try{ boot=JSON.parse(bootEl&&bootEl.textContent?bootEl.textContent:'{}')||{}; }catch(e){ boot={}; }
-  var feedEndpoint=boot.feedEndpoint||'/discover/feed';
-  var popularEndpoint=boot.popularEndpoint||'/discover/popular';
-  var swipeStackEndpoint=boot.swipeStackEndpoint||'/discover/swipe/stack';
-  var swipeRefillEndpoint=boot.swipeRefillEndpoint||'/discover/swipe/refill';
-  var swipeBase=boot.swipeBase||'/discover/swipe';
-  var editorBase=boot.editorBase||'/editor';
-  var accountId=boot.accountId||'';
-
-  function esc(v){ return String(v==null?'':v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }
-  function attr(v){ return String(v==null?'':v).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
-  function isVideo(u){ return Boolean(u)&&/\\.(mp4|webm|ogg|mov)(\\?|#|$)/i.test(u); }
-  // previewUrl falls back to the template's raw videoUrl, which is often a
-  // signed/extension-less URL — so treat "not a known image" as video, never
-  // the other way round, or those templates render a broken <img> (no preview).
-  function isImage(u){ return Boolean(u)&&/\\.(png|jpe?g|gif|webp|avif|svg)(\\?|#|$)/i.test(u); }
-  function withAccount(u){
-    try{ var url=new URL(u, window.location.href); if(accountId) url.searchParams.set('account', accountId); return url.toString(); }
-    catch(e){ return u; }
-  }
-  function editorUrl(id){
-    var u=editorBase+'/'+encodeURIComponent(String(id));
-    return accountId? u+'?account='+encodeURIComponent(accountId) : u;
-  }
-  // Feed cards browse INSPIRATIONS: an entry may have no template yet. The real
-  // template id (if decomposed) opens the editor directly; otherwise the card
-  // carries an inspirationId and its CTA decomposes on demand (preview → Remix).
-  function realTemplateId(t){ var id=t.templateId||t.template_id||''; return /^template_/.test(String(id))? String(id):''; }
-  function inspirationIdOf(t){ return String(t.inspirationId||t.inspiration_id||''); }
-  function domId(t){ return realTemplateId(t)||inspirationIdOf(t)||''; }
-  function needsDecompose(t){ return !realTemplateId(t) && Boolean(inspirationIdOf(t)); }
-  // POST the lazy decompose, then hand off to the editor. Shared by card +
-  // viewer Remix buttons via a delegated [data-remix] listener.
-  function remixInspiration(btn){
-    var inspId=btn.getAttribute('data-remix'); if(!inspId||btn.getAttribute('data-busy')) return;
-    btn.setAttribute('data-busy','1');
-    var label=btn.innerHTML; btn.innerHTML='Preparing&hellip;';
-    fetch(withAccount('/discover/inspirations/'+encodeURIComponent(inspId)+'/decompose'),{method:'POST',credentials:'same-origin',headers:{Accept:'application/json'}})
-      .then(function(r){ return r.json().then(function(d){ return {ok:r.ok,data:d}; }); })
-      .then(function(res){
-        if(res.ok&&res.data&&res.data.templateId){ window.location.href=editorUrl(res.data.templateId); return; }
-        btn.removeAttribute('data-busy'); btn.innerHTML=label;
-        window.alert((res.data&&res.data.error)||'Could not open this inspiration — please try again.');
-      })
-      .catch(function(){ btn.removeAttribute('data-busy'); btn.innerHTML=label; window.alert('Network error — please try again.'); });
-  }
-  document.addEventListener('click',function(e){
-    var b=e.target&&e.target.closest?e.target.closest('[data-remix]'):null;
-    if(!b) return; e.preventDefault(); remixInspiration(b);
-  });
-  // Click the template-id chip on a feed card to copy the id to the clipboard,
-  // with a brief inline "Copied" swap (icon + label) as subtle confirmation.
-  function copyText(text){
-    if(navigator.clipboard&&navigator.clipboard.writeText){ return navigator.clipboard.writeText(text); }
-    return new Promise(function(resolve,reject){
-      try{
-        var ta=document.createElement('textarea'); ta.value=text;
-        ta.style.position='fixed'; ta.style.top='-9999px'; document.body.appendChild(ta);
-        ta.focus(); ta.select(); var ok=document.execCommand('copy'); document.body.removeChild(ta);
-        ok?resolve():reject(new Error('copy failed'));
-      }catch(err){ reject(err); }
-    });
-  }
-  document.addEventListener('click',function(e){
-    var chip=e.target&&e.target.closest?e.target.closest('[data-copy-id]'):null;
-    if(!chip) return;
-    e.preventDefault(); e.stopPropagation();
-    var id=chip.getAttribute('data-copy-id')||'';
-    if(!id||chip.getAttribute('data-copied')) return;
-    copyText(id).then(function(){
-      var txt=chip.querySelector('.rk-idchip-text'); var prev=txt?txt.textContent:'';
-      chip.setAttribute('data-copied','1'); chip.classList.add('is-copied');
-      chip.innerHTML=IDCHECK_ICON+'<span class="rk-idchip-text">Copied</span>';
-      window.setTimeout(function(){
-        chip.classList.remove('is-copied'); chip.removeAttribute('data-copied');
-        chip.innerHTML=COPY_ICON+'<span class="rk-idchip-text">'+esc(prev)+'</span>';
-      },1300);
-    }).catch(function(){});
-  });
-  function fmtDuration(s){
-    s=Number(s); if(!s||!isFinite(s)||s<=0) return '';
-    if(s>=60){ var m=Math.floor(s/60); var r=Math.round(s%60); return m+':'+(r<10?'0':'')+r; }
-    return (s>=10? s.toFixed(0) : s.toFixed(1))+'s';
-  }
-  var SOURCE_MAP={tiktok:'TikTok','tiktok.com':'TikTok',youtube:'YouTube','youtube.com':'YouTube','youtu.be':'YouTube',instagram:'Instagram','instagram.com':'Instagram',twitter:'Twitter/X',x:'Twitter/X','x.com':'Twitter/X'};
-  function sourceLabel(s){ s=String(s||'').toLowerCase(); if(!s) return ''; if(SOURCE_MAP[s]) return SOURCE_MAP[s]; var host=s.replace(/^www\\./,'').split('.')[0]; return host.charAt(0).toUpperCase()+host.slice(1); }
-  var EDIT_ICON=${JSON.stringify(EDIT_ICON)};
-  var COPY_ICON=${JSON.stringify(COPY_ICON)};
-  var IDCHECK_ICON=${JSON.stringify(IDCHECK_ICON)};
-  var BOOKMARK_ICON=${JSON.stringify(BOOKMARK_ICON)};
-  var SOUND_ON_ICON=${JSON.stringify(SOUND_ON_ICON)};
-  var SOUND_OFF_ICON=${JSON.stringify(SOUND_OFF_ICON)};
-  var PLAY_ICON=${JSON.stringify(PLAY_ICON)};
-
-  // ── bookmarks: client-side saves in localStorage (no backend favorite
-  // endpoint exists), shared by feed cards, category reveal cards and the
-  // viewer slides. One delegated document listener toggles any [data-bm].
-  var BM_KEY='rk-discover-bookmarks';
-  var bookmarks=(function(){
-    try{ var v=JSON.parse(window.localStorage.getItem(BM_KEY)||'[]'); return new Set(Array.isArray(v)?v.map(String):[]); }
-    catch(e){ return new Set(); }
-  })();
-  var bmChangeHandlers=[];
-  function isBookmarked(id){ return Boolean(id)&&bookmarks.has(String(id)); }
-  function syncBmButtons(){
-    root.querySelectorAll('[data-bm]').forEach(function(b){
-      var on=isBookmarked(b.getAttribute('data-bm'));
-      b.classList.toggle('is-on',on);
-      b.setAttribute('aria-pressed',on?'true':'false');
-      b.setAttribute('aria-label',on?'Remove bookmark':'Bookmark');
-    });
-  }
-  function toggleBookmark(id){
-    id=String(id||''); if(!id) return;
-    if(bookmarks.has(id)) bookmarks.delete(id); else bookmarks.add(id);
-    try{ window.localStorage.setItem(BM_KEY, JSON.stringify(Array.from(bookmarks))); }catch(e){}
-    syncBmButtons();
-    bmChangeHandlers.forEach(function(fn){ try{ fn(id); }catch(e){} });
-  }
-  function bmBtnHtml(id, cls){
-    if(!id) return '';
-    var on=isBookmarked(id);
-    return '<button type="button" class="'+cls+(on?' is-on':'')+'" data-bm="'+attr(id)+'" aria-pressed="'+(on?'true':'false')+'" aria-label="'+(on?'Remove bookmark':'Bookmark')+'">'+BOOKMARK_ICON+'</button>';
-  }
-  document.addEventListener('click',function(e){
-    var b=(e.target&&e.target.closest)?e.target.closest('[data-bm]'):null;
-    if(!b) return;
-    e.preventDefault();
-    toggleBookmark(b.getAttribute('data-bm'));
-  });
-
-  // ── shared: pause/resume a grid's muted autoplay (while the viewer is open) ──
-  function parkVideos(container){
-    if(!container) return;
-    container.querySelectorAll('video').forEach(function(o){ o.muted=true; o.pause(); });
-    container.querySelectorAll('.rk-discover-posterwrap.is-sound').forEach(function(p){ p.classList.remove('is-sound'); });
-  }
-  function resumeVideos(container){
-    if(!container) return;
-    container.querySelectorAll('video').forEach(function(o){ o.muted=true; var pr=o.play(); if(pr&&pr.catch) pr.catch(function(){}); });
-  }
-
-  function friendlyError(err){
-    var msg=(err&&err.message)?String(err.message):'';
-    if(!msg||/failed to fetch|networkerror|load failed/i.test(msg)) return "Couldn't reach the server — check your connection, or sign in to keep browsing.";
-    return msg;
-  }
-
-  function mediaHtml(t){
-    var url=t.previewUrl||t.preview_url||'';
-    if(!url) return '<div class="rk-discover-media-empty">'+(t.status==='processing'?'Downloading&hellip;':'No preview')+'</div>';
-    if(isImage(url)) return '<img src="'+attr(url)+'" alt="'+attr((t.title||'Template')+' preview')+'" loading="lazy" decoding="async">';
-    // #t=0.1 paints the first frame even where autoplay is blocked.
-    return '<video src="'+attr(url+'#t=0.1')+'" muted loop autoplay playsinline preload="metadata" tabindex="-1"></video>';
-  }
-
-  // Real feed/category poster card. The "Open Editor" CTA always deep-links
-  // into the real editor; the poster itself carries data-rk-view=<index> so a
-  // plain click opens the TikTok-style viewer instead (cmd/middle-click still
-  // opens the editor via the untouched href). No platform/source pill on the
-  // poster (user feedback) — source shows only in the viewer's meta line.
-  function posterCardHtml(t, viewIdx){
-    var id=domId(t);
-    var tid=realTemplateId(t);
-    var remix=needsDecompose(t);
-    var url=t.previewUrl||t.preview_url||'';
-    var hasVideo=Boolean(url)&&!isImage(url);
-    var pending=(t.status==='processing'||t.status==='failed');
-    var viewable=!pending&&Boolean(url)&&typeof viewIdx==='number'&&viewIdx>=0;
-    var dur=fmtDuration(t.durationSeconds);
-    var desc=String(t.viralDna||t.summary||'').trim();
-    // Real templates deep-link to the editor; inspiration-only cards open the
-    // preview viewer instead (a plain anchor href would 404 the editor), and the
-    // CTA decomposes on demand.
-    var posterHref=remix? '#' : editorUrl(tid);
-    var posterInner=mediaHtml(t)
-      +(dur?'<span class="rk-discover-dur">'+esc(dur)+'</span>':'')
-      +'<div class="rk-discover-scrim"></div>'
-      +(hasVideo&&!pending?'<span class="rk-discover-sound" aria-hidden="true"><span class="rk-ds-on">'+SOUND_ON_ICON+'</span><span class="rk-ds-off">'+SOUND_OFF_ICON+'</span></span>':'');
-    var poster=pending
-      ? '<div class="rk-discover-poster">'+posterInner+'</div>'
-      : '<a class="rk-discover-poster" href="'+attr(posterHref)+'"'+(viewable?' data-rk-view="'+viewIdx+'"':'')+' aria-label="'+attr((viewable?'Preview ':'Open ')+(t.title||id)+(viewable?'':' in the editor'))+'">'+posterInner+'</a>';
-    // bookmark sits NEXT TO the anchor inside the wrap (button-in-anchor is
-    // invalid HTML); the wrap is the shared hover context for sound + bookmark
-    poster='<div class="rk-discover-posterwrap">'+poster+(pending?'':bmBtnHtml(id,'rk-discover-bm'))+'</div>';
-    var cta=pending
-      ? '<span class="rk-btn rk-btn-ghost rk-btn-sm rk-btn-block rk-discover-fork rk-discover-fork-disabled" aria-disabled="true">'+(t.status==='failed'?'Download failed':'Preparing&hellip;')+'</span>'
-      : remix
-        ? '<button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork" data-remix="'+attr(inspirationIdOf(t))+'">'+EDIT_ICON+' Remix</button>'
-        : '<a class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork" href="'+attr(editorUrl(tid))+'" target="_blank" rel="noopener">'+EDIT_ICON+' Open Editor</a>';
-    return '<article class="rk-discover-card rk-card-hover">'
-      + poster
-      + '<div class="rk-discover-body">'
-        + '<div class="rk-discover-titlewrap">'
-          + '<h3 class="rk-discover-title">'+esc(t.title||id)+'</h3>'
-          + (desc?'<p class="rk-discover-desc">'+esc(desc)+'</p>':'')
-          + (tid?'<button type="button" class="rk-discover-idchip" data-copy-id="'+attr(tid)+'" title="Copy template ID">'+COPY_ICON+'<span class="rk-idchip-text">'+esc(tid)+'</span></button>':'')
-        + '</div>'
-        + cta
-      + '</div>'
-    + '</article>';
-  }
-
-  // ── hover audio: unmute a poster's (muted, autoplaying) video while the
-  // pointer is over it; only one card is ever audible at a time. Browsers may
-  // refuse unmuted playback before the user's first click (autoplay policy) —
-  // in that case we verify shortly after and fall back to muted playback
-  // instead of leaving a frozen poster. Delegated, so grid re-renders keep it.
-  function bindHoverAudio(container){
-    if(!container) return;
-    function posterOf(e){ var t=e.target; return (t&&t.closest)?t.closest('.rk-discover-posterwrap'):null; }
-    function setSound(poster,on){
-      var v=poster.querySelector('video'); if(!v) return;
-      if(on){
-        container.querySelectorAll('video').forEach(function(o){ if(o!==v) o.muted=true; });
-        container.querySelectorAll('.rk-discover-posterwrap.is-sound').forEach(function(p){ if(p!==poster) p.classList.remove('is-sound'); });
-        v.muted=false;
-        if(v.paused){ var pr=v.play(); if(pr&&pr.catch) pr.catch(function(){}); }
-        window.setTimeout(function(){
-          if(v.muted) return; // already reverted (pointer left)
-          if(v.paused){ v.muted=true; poster.classList.remove('is-sound'); var pr2=v.play(); if(pr2&&pr2.catch) pr2.catch(function(){}); }
-          else poster.classList.add('is-sound');
-        },70);
-      } else {
-        v.muted=true; poster.classList.remove('is-sound');
-      }
-    }
-    container.addEventListener('mouseover',function(e){
-      var p=posterOf(e); if(!p) return;
-      if(e.relatedTarget&&p.contains(e.relatedTarget)) return; // still inside the same poster
-      setSound(p,true);
-    });
-    container.addEventListener('mouseout',function(e){
-      var p=posterOf(e); if(!p) return;
-      if(e.relatedTarget&&p.contains(e.relatedTarget)) return;
-      setSound(p,false);
-    });
-  }
-
-  // ── TikTok-style viewer modal — SHARED by the feed grid and the categories
-  // reveal grid. open(list, clickedIdx, park): list is the template array
-  // behind the grid the user clicked, clickedIdx the clicked card index in
-  // that list, park the grid container whose muted autoplay is paused while
-  // the modal owns audio + CPU. Slides hydrate lazily (active +/-1); the click
-  // that opens the modal is a real user gesture, so the active video plays
-  // WITH sound (with a muted-playback fallback if the browser still refuses).
-  var viewerCtl=(function(){
-    var viewer=root.querySelector('[data-rk-viewer]');
-    if(!viewer) return null;
-    var vTrack=viewer.querySelector('[data-viewer-track]');
-    var vItems=[]; var vOpen=false; var vActive=-1; var vSound=true; var vIO=null; var parkEl=null;
-
-    function viewerSlideHtml(t,i){
-      var id=domId(t);
-      var tid=realTemplateId(t);
-      var remix=needsDecompose(t);
-      var url=t.previewUrl||t.preview_url||'';
-      var media=isImage(url)
-        ? '<img class="rk-discover-viewer-media" src="'+attr(url)+'" alt="'+attr((t.title||'Template')+' preview')+'">'
-        : '<video class="rk-discover-viewer-media" data-vsrc="'+attr(url)+'" loop playsinline preload="none"></video>';
-      var meta=[];
-      var srcL=sourceLabel(t.sourceType); if(srcL) meta.push(esc(srcL));
-      var dur=fmtDuration(t.durationSeconds); if(dur) meta.push(esc(dur));
-      var desc=String(t.viralDna||t.summary||'').trim();
-      return '<section class="rk-discover-viewer-slide" data-vslide="'+i+'">'
-        +'<figure class="rk-discover-viewer-stage">'
-          + media
-          +'<span class="rk-discover-viewer-pause">'+PLAY_ICON+'</span>'
-          +'<div class="rk-discover-viewer-shade"></div>'
-          + bmBtnHtml(id,'rk-discover-viewer-bm')
-          +'<div class="rk-discover-viewer-info">'
-            +(meta.length?'<div class="rk-discover-viewer-meta">'+meta.join(' &middot; ')+'</div>':'')
-            +'<div class="rk-discover-viewer-title">'+esc(t.title||id)+'</div>'
-            +(desc?'<div class="rk-discover-viewer-desc">'+esc(desc)+'</div>':'')
-            +(remix
-              ? '<button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-discover-viewer-fork" data-remix="'+attr(inspirationIdOf(t))+'">'+EDIT_ICON+' Remix</button>'
-              : '<a class="rk-btn rk-btn-gold rk-btn-sm rk-discover-viewer-fork" href="'+attr(editorUrl(tid))+'" target="_blank" rel="noopener">'+EDIT_ICON+' Open Editor</a>')
-          +'</div>'
-        +'</figure>'
-      +'</section>';
-    }
-    function hydrateSlide(slide){
-      var v=slide.querySelector('video[data-vsrc]');
-      if(!v||v.getAttribute('src')) return;
-      v.preload='auto';
-      v.setAttribute('src', v.getAttribute('data-vsrc'));
-    }
-    function updateMuteUi(){ viewer.classList.toggle('is-muted',!vSound); }
-    function setViewerActive(idx){
-      vActive=idx;
-      [].forEach.call(vTrack.children,function(s,i){
-        if(Math.abs(i-idx)<=1) hydrateSlide(s);
-        s.classList.remove('is-paused');
-        var v=s.querySelector('video');
-        if(!v) return;
-        if(i===idx){
-          v.muted=!vSound;
-          var pr=v.play();
-          if(pr&&pr.catch) pr.catch(function(){
-            // sound-on autoplay blocked → fall back to muted playback
-            v.muted=true; vSound=false; updateMuteUi();
-            var pr2=v.play(); if(pr2&&pr2.catch) pr2.catch(function(){});
-          });
-        } else { v.pause(); }
-      });
-      updateMuteUi();
-    }
-    function stepViewer(d){
-      if(!vOpen) return;
-      var next=Math.max(0,Math.min(vItems.length-1,vActive+d));
-      if(next===vActive) return;
-      vTrack.scrollTo({top:next*vTrack.clientHeight,behavior:'smooth'});
-    }
-    function open(list, clickedIdx, park){
-      vItems=[]; var start=0;
-      (list||[]).forEach(function(t,i){
-        var url=t.previewUrl||t.preview_url||'';
-        if(!url||t.status==='processing'||t.status==='failed') return;
-        if(i===clickedIdx) start=vItems.length;
-        vItems.push(t);
-      });
-      if(!vItems.length) return;
-      parkEl=park||null;
-      vTrack.innerHTML=vItems.map(viewerSlideHtml).join('');
-      vOpen=true; vSound=true;
-      viewer.hidden=false;
-      document.documentElement.classList.add('rk-noscroll');
-      parkVideos(parkEl);
-      if(vIO) vIO.disconnect();
-      vIO=('IntersectionObserver' in window)?new IntersectionObserver(function(entries){
-        entries.forEach(function(en){
-          if(!en.isIntersecting) return;
-          var i=Number(en.target.getAttribute('data-vslide'));
-          if(i!==vActive) setViewerActive(i);
-        });
-      },{root:vTrack,threshold:0.6}):null;
-      if(vIO) [].forEach.call(vTrack.children,function(s){ vIO.observe(s); });
-      vTrack.scrollTop=start*vTrack.clientHeight;
-      setViewerActive(start);
-    }
-    function close(){
-      if(!vOpen) return;
-      vOpen=false; vActive=-1;
-      if(vIO){ vIO.disconnect(); vIO=null; }
-      vTrack.querySelectorAll('video').forEach(function(v){ v.pause(); });
-      vTrack.innerHTML='';
-      viewer.hidden=true;
-      document.documentElement.classList.remove('rk-noscroll');
-      resumeVideos(parkEl);
-      parkEl=null;
-    }
-
-    viewer.querySelectorAll('[data-viewer-close]').forEach(function(b){ b.addEventListener('click',close); });
-    var muteBtn=viewer.querySelector('[data-viewer-mute]');
-    if(muteBtn) muteBtn.addEventListener('click',function(){
-      vSound=!vSound; updateMuteUi();
-      var s=vTrack.children[vActive]; var v=s&&s.querySelector('video');
-      if(v){ v.muted=!vSound; if(vSound&&v.paused){ var pr=v.play(); if(pr&&pr.catch) pr.catch(function(){}); s.classList.remove('is-paused'); } }
-    });
-    var prevBtn=viewer.querySelector('[data-viewer-prev]');
-    var nextBtn=viewer.querySelector('[data-viewer-next]');
-    if(prevBtn) prevBtn.addEventListener('click',function(){ stepViewer(-1); });
-    if(nextBtn) nextBtn.addEventListener('click',function(){ stepViewer(1); });
-    // tap the video → pause/resume (TikTok); tap the empty gutter → close;
-    // bookmarks are handled by the document-level [data-bm] listener
-    vTrack.addEventListener('click',function(e){
-      var t=e.target;
-      if(t&&t.closest&&(t.closest('a')||t.closest('[data-bm]'))) return;
-      var media=(t&&t.closest)?t.closest('.rk-discover-viewer-media'):null;
-      if(media&&media.tagName==='VIDEO'){
-        var slide=media.closest('.rk-discover-viewer-slide');
-        if(media.paused){ var pr=media.play(); if(pr&&pr.catch) pr.catch(function(){}); if(slide) slide.classList.remove('is-paused'); }
-        else { media.pause(); if(slide) slide.classList.add('is-paused'); }
-        return;
-      }
-      if(t&&t.classList&&(t.classList.contains('rk-discover-viewer-slide')||t===vTrack)) close();
-    });
-    document.addEventListener('keydown',function(e){
-      if(!vOpen) return;
-      if(e.key==='Escape'){ e.preventDefault(); close(); }
-      else if(e.key==='ArrowDown'||e.key==='PageDown'){ e.preventDefault(); stepViewer(1); }
-      else if(e.key==='ArrowUp'||e.key==='PageUp'){ e.preventDefault(); stepViewer(-1); }
-    });
-    window.addEventListener('resize',function(){
-      if(vOpen&&vActive>=0) vTrack.scrollTop=vActive*vTrack.clientHeight;
-    });
-
-    return { open: open, close: close, isOpen: function(){ return vOpen; } };
-  })();
-
-  // Wire a poster grid's plain-clicks into the shared viewer. getList is
-  // called at click time so it always reflects the grid's CURRENT contents
-  // (search filter, bookmark filter, revealed group).
-  function bindViewerOpens(container, getList){
-    if(!container||!viewerCtl) return;
-    container.addEventListener('click',function(e){
-      if(e.defaultPrevented||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button!==0) return;
-      var a=(e.target&&e.target.closest)?e.target.closest('[data-rk-view]'):null;
-      if(!a||!container.contains(a)) return;
-      e.preventDefault();
-      viewerCtl.open(getList()||[], Number(a.getAttribute('data-rk-view')), container);
-    });
-  }
-
-  // ════════════════════════════════════════════════════════════════════════
-  // FEED
-  // ════════════════════════════════════════════════════════════════════════
-  var feedRoot=root.querySelector('[data-rk-feed]');
-  if(feedRoot){
-    var gridEl=feedRoot.querySelector('[data-rk-grid]');
-    var stateEl=feedRoot.querySelector('[data-rk-state]');
-    // search lives in the shared toolbar row (outside [data-rk-feed]); the
-    // visible-count is folded into the search placeholder rather than shown as
-    // a separate label.
-    var searchEl=root.querySelector('[data-rk-search]');
-    // caption the placeholder with the count, but only while the box is empty —
-    // a typed query keeps its own placeholder-less state.
-    function setCountHint(n){
-      if(!searchEl) return;
-      searchEl.placeholder = (n==null)
-        ? 'Search templates'
-        : 'Search '+n+' template'+(n===1?'':'s');
-    }
-    var bmChip=root.querySelector('[data-rk-bmfilter]');
-    var bmCountEl=root.querySelector('[data-rk-bmcount]');
-    var bmFilter=false;
-    var feedState={items:[],visible:[],loading:false};
-    var feedReq=0;
-
-    function feedSetState(msg,isError){
-      if(gridEl) gridEl.innerHTML='';
-      if(stateEl){ stateEl.hidden=false; stateEl.innerHTML=msg; stateEl.classList.toggle('is-error',!!isError); }
-      setCountHint(null);
-    }
-    function updateBmChip(){
-      if(!bmChip) return;
-      var n=0;
-      feedState.items.forEach(function(t){ if(isBookmarked(t.templateId||t.template_id)) n++; });
-      if(bmCountEl) bmCountEl.textContent=n?String(n):'';
-      bmChip.classList.toggle('is-active',bmFilter);
-      bmChip.setAttribute('aria-pressed',bmFilter?'true':'false');
-    }
-    function feedRender(){
-      var vis=bmFilter
-        ? feedState.items.filter(function(t){ return isBookmarked(t.templateId||t.template_id); })
-        : feedState.items;
-      feedState.visible=vis;
-      updateBmChip();
-      if(!vis.length){
-        feedSetState(bmFilter?'No bookmarks yet — tap the bookmark on any template to save it for later.':'No templates match — try a different search.',false);
-        return;
-      }
-      if(stateEl) stateEl.hidden=true;
-      if(gridEl) gridEl.innerHTML=vis.map(function(t,i){ return posterCardHtml(t,i); }).join('');
-      setCountHint(vis.length);
-    }
-    if(bmChip) bmChip.addEventListener('click',function(){ bmFilter=!bmFilter; feedRender(); });
-    bmChangeHandlers.push(function(){
-      updateBmChip();
-      // with the filter on, un-bookmarking drops the card from the grid; the
-      // re-render restarts muted autoplay, so re-park it if the viewer is open
-      if(bmFilter){ feedRender(); if(viewerCtl&&viewerCtl.isOpen()) parkVideos(gridEl); }
-    });
-    function applyFeedItems(items){
-      feedState.items=Array.isArray(items)?items:[];
-      feedState.loading=false;
-      feedRender();
-    }
-    // Direct same-origin fetch — the fallback for when the Zustand bridge isn't
-    // on the page yet (its deferred module is still loading) or is disabled.
-    function feedFetchDirect(query,my){
-      var url=feedEndpoint;
-      try{ var u=new URL(feedEndpoint, window.location.href); if(query) u.searchParams.set('q', query); if(accountId) u.searchParams.set('account', accountId); url=u.toString(); }catch(e){ url=feedEndpoint; }
-      fetch(url,{credentials:'same-origin',headers:{'accept':'application/json'}})
-        .then(function(r){ if(!r.ok){ throw new Error(r.status===401?'Sign in to browse the template feed.':("Couldn't load templates ("+r.status+").")); } return r.json(); })
-        .then(function(j){ if(my!==feedReq) return; applyFeedItems((j&&Array.isArray(j.templates))?j.templates:[]); })
-        .catch(function(err){ if(my!==feedReq) return; feedState.loading=false; feedSetState(esc(friendlyError(err)),true); });
-    }
-    // Feed loads flow through the Zustand store bridge (SSR-seed + SWR cache);
-    // it may call onResult twice for the default feed (cached snapshot first,
-    // then a background-revalidated fresh copy) — both are honored under the
-    // same request token so a newer search still wins.
-    function feedLoad(query){
-      var my=++feedReq;
-      feedState.loading=true;
-      // Only flash the loading state when nothing's painted yet — a
-      // revalidate must never blank an already-good grid.
-      if(!feedState.items.length) feedSetState('Loading templates&hellip;',false);
-      var bridge=window.__vidfarmDiscover;
-      if(bridge&&bridge.loadFeed){
-        bridge.loadFeed(query,{
-          onLoading:function(){ if(my===feedReq && !feedState.items.length) feedSetState('Loading templates&hellip;',false); },
-          onResult:function(items){ if(my!==feedReq) return; applyFeedItems(items); },
-          onError:function(err){ if(my!==feedReq) return; feedState.loading=false; feedSetState(esc(friendlyError(err)),true); }
-        });
-      } else {
-        feedFetchDirect(query,my);
-      }
-    }
-    // Honor a ?q= (e.g. from a category link) in the page URL.
-    var initialQuery='';
-    try{ initialQuery=(new URL(window.location.href)).searchParams.get('q')||''; }catch(e){ initialQuery=''; }
-    if(searchEl){
-      searchEl.value=initialQuery;
-      var debounce=null;
-      searchEl.addEventListener('input',function(){
-        if(debounce) window.clearTimeout(debounce);
-        var v=searchEl.value.trim();
-        debounce=window.setTimeout(function(){ feedLoad(v); },260);
-      });
-      searchEl.addEventListener('keydown',function(e){ if(e.key==='Enter'){ if(debounce) window.clearTimeout(debounce); feedLoad(searchEl.value.trim()); } });
-    }
-    bindHoverAudio(gridEl);
-    // plain click on a card → shared viewer over the CURRENT visible feed
-    // (search + bookmark filter applied)
-    bindViewerOpens(gridEl, function(){ return feedState.visible; });
-    // SSR-seed: if the server inlined the first page of the default feed AND
-    // there's no ?q= search, paint it immediately with NO initial fetch — this
-    // is what kills the redundant SSR-render → client-fetch round trip.
-    var seeded=false;
-    if(!initialQuery && boot.feedInitial && Array.isArray(boot.feedInitial) && boot.feedInitial.length){
-      applyFeedItems(boot.feedInitial);
-      seeded=true;
-    }
-    if(!seeded){
-      feedLoad(initialQuery.trim());
-    }
-    // A background revalidation (stale snapshot / BFCache restore) from the
-    // store bridge re-paints the grid — but only while not mid-search.
-    window.addEventListener('vidfarm:discover-feed-updated',function(ev){
-      var q=searchEl?searchEl.value.trim():'';
-      if(q) return;
-      var items=ev&&ev.detail&&ev.detail.items;
-      if(Array.isArray(items)) applyFeedItems(items);
-    });
-
-    // ── "Add New" modal — paste a social URL or upload a video, add it to the
-    // caller's private feed (real POST /discover/templates + upload presign
-    // pair), then reload the feed so the new pending card appears. In feed
-    // scope so it can reach feedLoad + the current search value.
-    var addModal=root.querySelector('[data-rk-add-modal]');
-    var addBtn=root.querySelector('[data-rk-add]');
-    if(addModal&&addBtn){
-      var addForm=addModal.querySelector('[data-rk-add-form]');
-      var addUrl=addModal.querySelector('[data-rk-add-url]');
-      var addFile=addModal.querySelector('[data-rk-add-file]');
-      var addFileLabel=addModal.querySelector('[data-rk-add-filelabel]');
-      var addFileText=addModal.querySelector('[data-rk-add-filetext]');
-      var addTagline=addModal.querySelector('[data-rk-add-tagline]');
-      var addNotes=addModal.querySelector('[data-rk-add-notes]');
-      var addErr=addModal.querySelector('[data-rk-add-error]');
-      var addSubmit=addModal.querySelector('[data-rk-add-submit]');
-      var MAX_UPLOAD=200*1024*1024;
-      var defaultFileText=addFileText?addFileText.innerHTML:'';
-      var addBusy=false;
-
-      function showAddErr(msg){ if(addErr){ addErr.textContent=msg||''; addErr.hidden=!msg; } }
-      function openAdd(){
-        addModal.hidden=false;
-        document.documentElement.classList.add('rk-noscroll');
-        if(addUrl){ try{ addUrl.focus(); }catch(e){} }
-      }
-      function closeAdd(){
-        if(addBusy) return;
-        addModal.hidden=true;
-        document.documentElement.classList.remove('rk-noscroll');
-      }
-      function resetAdd(){
-        if(addForm) addForm.reset();
-        if(addFileLabel) addFileLabel.classList.remove('is-picked');
-        if(addFileText) addFileText.innerHTML=defaultFileText;
-        showAddErr('');
-      }
-      function setAddBusy(on,label){
-        addBusy=on;
-        if(addSubmit){ addSubmit.disabled=on; addSubmit.textContent=on?(label||'Adding\\u2026'):'Add to feed'; }
-      }
-
-      addBtn.addEventListener('click',openAdd);
-      addModal.querySelectorAll('[data-rk-add-close]').forEach(function(b){ b.addEventListener('click',closeAdd); });
-      document.addEventListener('keydown',function(e){ if(e.key==='Escape'&&!addModal.hidden) closeAdd(); });
-
-      if(addFile){
-        addFile.addEventListener('change',function(){
-          var f=addFile.files&&addFile.files[0];
-          if(addFileLabel) addFileLabel.classList.toggle('is-picked',!!f);
-          if(addFileText) addFileText.innerHTML=f?esc(f.name):defaultFileText;
-          showAddErr('');
-        });
-      }
-
-      function ingest(uploadRef){
-        var tagline=addTagline?addTagline.value.trim():'';
-        var notes=addNotes?addNotes.value.trim():'';
-        var payload=uploadRef
-          ? { upload:uploadRef, tagline:tagline||null, notes:notes||null }
-          : { source_url:(addUrl?addUrl.value.trim():''), tagline:tagline||null, notes:notes||null };
-        return fetch(withAccount('/discover/templates'),{
-          method:'POST',credentials:'same-origin',
-          headers:{'content-type':'application/json',Accept:'application/json'},
-          body:JSON.stringify(payload)
-        }).then(function(r){ return r.json().catch(function(){ return {}; }).then(function(d){ return {ok:r.ok,status:r.status,data:d}; }); });
-      }
-      function uploadFile(file){
-        return fetch(withAccount('/discover/templates/upload/presign'),{
-          method:'POST',credentials:'same-origin',
-          headers:{'content-type':'application/json',Accept:'application/json'},
-          body:JSON.stringify({ file_name:file.name, content_type:file.type||null, size_bytes:file.size })
-        }).then(function(r){ return r.json().catch(function(){ return {}; }).then(function(d){ return {ok:r.ok,data:d}; }); })
-        .then(function(res){
-          if(!res.ok) throw new Error((res.data&&res.data.error)||'Unable to start the video upload.');
-          var p=res.data||{};
-          if(p.transport==='presigned'&&p.upload&&p.upload.url&&p.storage_key){
-            return fetch(p.upload.url,{ method:(p.upload.method||'PUT'), headers:(p.upload.headers||{}), body:file })
-              .then(function(put){ if(!put.ok) throw new Error('Video upload failed ('+put.status+'). Try again.');
-                return { storage_key:p.storage_key, file_name:p.file_name||file.name }; });
-          }
-          var form=new FormData(); form.append('file',file,p.file_name||file.name);
-          return fetch((p.upload&&p.upload.url)||'/discover/templates/upload',{ method:'POST',credentials:'same-origin',body:form })
-            .then(function(direct){ return direct.json().catch(function(){ return {}; }).then(function(dd){
-              if(!direct.ok||!dd.storage_key) throw new Error(dd.error||'Video upload failed. Try again.');
-              return { storage_key:dd.storage_key, file_name:dd.file_name||file.name }; }); });
-        });
-      }
-
-      if(addForm){
-        addForm.addEventListener('submit',function(e){
-          e.preventDefault();
-          if(addBusy) return;
-          showAddErr('');
-          var file=addFile&&addFile.files?addFile.files[0]:null;
-          var url=addUrl?addUrl.value.trim():'';
-          if(!file&&!url){ showAddErr('Paste a TikTok, YouTube, Twitter/X, or Instagram video URL \\u2014 or upload a video file.'); return; }
-          if(file&&file.size>MAX_UPLOAD){ showAddErr('Video uploads can be at most 200 MB.'); return; }
-          setAddBusy(true,file?'Uploading\\u2026':'Adding\\u2026');
-          var chain=file?uploadFile(file):Promise.resolve(null);
-          chain.then(function(uploadRef){ return ingest(uploadRef); })
-            .then(function(res){
-              setAddBusy(false);
-              if(!res.ok){ showAddErr((res.data&&res.data.error)||'Unable to add that video.'); return; }
-              resetAdd(); closeAdd();
-              // A new inspiration just landed — drop the cached snapshot so the
-              // reload fetches fresh (no stale-cache flash of the old feed).
-              if(window.__vidfarmDiscover&&window.__vidfarmDiscover.invalidate) window.__vidfarmDiscover.invalidate();
-              feedLoad(searchEl?searchEl.value.trim():'');
-            })
-            .catch(function(err){ setAddBusy(false); showAddErr((err&&err.message)?err.message:'Unable to add that video.'); });
-        });
-      }
-    }
-  }
-
-  // ════════════════════════════════════════════════════════════════════════
-  // SWIPE
-  // ════════════════════════════════════════════════════════════════════════
-  var swipeRoot=root.querySelector('[data-rk-swipe]');
-  if(swipeRoot){
-    var deck=swipeRoot.querySelector('[data-deck]');
-    var swStateEl=swipeRoot.querySelector('[data-rk-swipe-state]');
-    var actionBtns=[].slice.call(swipeRoot.querySelectorAll('[data-swipe-act]'));
-    var hint=swipeRoot.querySelector('[data-actions-hint]');
-    var skipBtn=swipeRoot.querySelector('[data-swipe-skip]');
-    var forkBtn=swipeRoot.querySelector('[data-swipe-fork]');
-    var soundBtn=swipeRoot.querySelector('[data-swipe-sound]');
-    var sw={target:5,customizing:0,productSet:false,busy:false,refilling:false,loaded:false,soundOn:false,known:{}};
-    var nodes=[]; // live card DOM nodes, top-of-deck first
-    var deckExpanded=false; // true while the fullscreen swipe viewer owns the previews
-
-    // ── audio: the same-origin preview iframes poll these window flags (see
-    // injectSwipePreviewFit). Only the TOP card's id is named audible so the
-    // preloaded 2nd iframe stays silent (audio never doubles). Deck previews
-    // always start muted (the only autoplay browsers permit); the toggle is the
-    // user gesture that unlocks sound.
-    function syncSound(){
-      // While the fullscreen viewer is open it owns the audio flags (it names the
-      // active slide's card audible); the deck must not clobber them.
-      if(deckExpanded) return;
-      try{
-        window.__VF_SWIPE_SOUND__ = sw.soundOn===true;
-        window.__VF_SWIPE_SOUND_TOP__ = nodes.length? String(nodes[0]._card.id): null;
-      }catch(e){}
-    }
-    function updateSoundBtn(){
-      if(!soundBtn) return;
-      var show=nodes.length>0;
-      soundBtn.hidden=!show;
-      soundBtn.classList.toggle('is-on', sw.soundOn);
-      soundBtn.setAttribute('aria-pressed', sw.soundOn?'true':'false');
-      soundBtn.setAttribute('aria-label', sw.soundOn?'Mute':'Unmute');
-      soundBtn.innerHTML = sw.soundOn? SOUND_ON_ICON : SOUND_OFF_ICON;
-    }
-    if(soundBtn) soundBtn.addEventListener('click',function(){ sw.soundOn=!sw.soundOn; syncSound(); updateSoundBtn(); });
-
-    function swShowState(html,kind){
-      if(swStateEl){ swStateEl.hidden=false; swStateEl.innerHTML=html; swStateEl.classList.toggle('is-error',kind==='error'); }
-      actionBtns.forEach(function(b){ b.hidden=true; });
-      if(hint) hint.hidden=true;
-    }
-    function swHideState(){ if(swStateEl) swStateEl.hidden=true; }
-
-    function makeCard(card){
-      if(card&&card.id) sw.known[String(card.id)]=true;
-      var el=document.createElement('article');
-      el.className='rk-discover-swipe';
-      el._card=card; el._iframed=false;
-      var title=esc(card.title||card.source_title||card.template_id||'Template');
-      var caption=card.caption?('<div class="rk-discover-swipe-caption">'+esc(card.caption)+'</div>'):'';
-      el.innerHTML='<div class="rk-discover-swipe-fallback"><span>'+title+'</span></div>'
-        +'<div class="rk-discover-swipe-scrim"></div>'
-        +'<div class="rk-discover-swipe-info"><div class="rk-discover-swipe-title">'+title+'</div>'+caption+'</div>';
-      deck.appendChild(el);
-      return el;
-    }
-    function upgradeToIframe(el){
-      if(el._iframed) return;
-      var card=el._card; var url=card&&(card.preview_url||card.previewUrl);
-      if(!url) return;
-      var fb=el.querySelector('.rk-discover-swipe-fallback');
-      var frame=document.createElement('iframe');
-      frame.className='rk-discover-swipe-frame';
-      frame.setAttribute('src', url);
-      frame.setAttribute('title', String(card.title||'Preview'));
-      frame.setAttribute('loading','lazy');
-      frame.setAttribute('scrolling','no');
-      frame.setAttribute('allow','autoplay');
-      // The fallback is an OPAQUE dark placeholder that sits later in the DOM,
-      // so it paints over the iframe. Reveal the live preview once it loads by
-      // fading the placeholder out (kept as a load state until then). A timed
-      // fallback covers the case where 'load' never fires.
-      function revealFrame(){ if(fb){ fb.style.opacity='0'; fb.style.pointerEvents='none'; } }
-      frame.addEventListener('load', function(){ window.setTimeout(revealFrame, 120); });
-      window.setTimeout(revealFrame, 2600);
-      if(fb&&fb.parentNode) fb.parentNode.insertBefore(frame, fb); else el.insertBefore(frame, el.firstChild);
-      el._iframed=true;
-    }
-    function restack(){
-      nodes.forEach(function(el,i){
-        if(i>2){ el.style.display='none'; return; }
-        el.style.display='';
-        el.style.zIndex=String(20-i);
-        el.style.transform='translateY('+(i*12)+'px) scale('+(1-i*0.045).toFixed(3)+')';
-        el.style.opacity=i===0?'1':(i===1?'0.92':'0.82');
-        // The viewer owns the previews while expanded — don't build deck iframes
-        // (that would double the audio + CPU); resume rebuilds them on close.
-        if(i<=1 && !deckExpanded) upgradeToIframe(el);
-      });
-      var has=nodes.length>0;
-      actionBtns.forEach(function(b){ b.hidden=!has; });
-      if(hint) hint.hidden=!has;
-      syncSound(); updateSoundBtn();
-      // Keep the open viewer's slide list in step with refills/removals.
-      if(deckExpanded && swViewer) swViewer.sync();
-      if(!has) swCaughtUp();
-    }
-    function swCaughtUp(){
-      if(sw.customizing>0||sw.refilling){
-        swShowState('<div class="rk-discover-spinner" aria-hidden="true"></div><div class="rk-discover-swipe-state-title">Customizing fresh clips&hellip;</div><div>Recutting viral templates into ads for your product.</div>');
-      } else {
-        swShowState('<div class="rk-discover-swipe-state-title">You\\u2019re all caught up</div><div>No more templates to customize right now. Check back as new ones are added.</div>');
-      }
-    }
-    // POST approve/reject for a card (shared by the deck buttons + the viewer).
-    function postDecision(card,dir){
-      var path=swipeBase+'/'+encodeURIComponent(String(card.id))+'/'+(dir==='fork'?'approve':'reject');
-      return fetch(withAccount(path),{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json','accept':'application/json'},body:'{}'})
-        .then(function(r){ return r.json().catch(function(){ return {}; }); })
-        .catch(function(){ return {}; });
-    }
-    // Drop a card from the live deck (array + its DOM node) by id. The viewer can
-    // consume a card that isn't the top one, so removal is id-based, not shift().
-    function removeNodeByCard(card){
-      var id=card&&card.id!=null?String(card.id):null; if(id==null) return;
-      for(var i=0;i<nodes.length;i++){
-        if(String(nodes[i]._card.id)===id){
-          var el=nodes[i]; nodes.splice(i,1);
-          if(el&&el.parentNode) el.parentNode.removeChild(el);
-          return;
-        }
-      }
-    }
-    function decide(dir){
-      if(sw.busy||!nodes.length) return;
-      sw.busy=true;
-      var el=nodes.shift();
-      var card=el._card;
-      el.classList.remove('is-front');
-      el.style.zIndex='30';
-      el.style.transform='translateX('+(dir==='fork'?460:-460)+'px) rotate('+(dir==='fork'?15:-15)+'deg)';
-      el.style.opacity='0';
-      window.setTimeout(function(){ if(el&&el.parentNode) el.parentNode.removeChild(el); },380);
-      postDecision(card,dir).then(function(){ sw.busy=false; restack(); refill(); });
-    }
-    function refill(){
-      if(sw.refilling||!sw.productSet||!sw.loaded) return;
-      if(nodes.length>=sw.target) return;
-      sw.refilling=true;
-      fetch(withAccount(swipeRefillEndpoint),{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json','accept':'application/json'},body:'{}'})
-        .then(function(r){ return r.json().catch(function(){ return {}; }); })
-        .then(function(j){
-          sw.refilling=false;
-          if(!j||j.ok===false) return; // e.g. need_provider_key — stop quietly
-          if(j.filled&&j.record){ makeCard(j.record); restack(); }
-          var more=j.filled&&nodes.length<sw.target&&j.reason!=='no_eligible'&&j.reason!=='at_target';
-          if(more) refill();
-          // Server said it's still working (no card yet, not "done") — the
-          // customization keeps running Lambda-side even if THIS request replies
-          // late; poll the stack so a finished card appears without a refresh.
-          else if(!j.filled&&j.reason!=='no_eligible'&&j.reason!=='at_target') schedulePoll();
-        })
-        .catch(function(){
-          // Timeout / 504 / network drop: customizeOneMore often runs past the
-          // gateway's reply window, so the card lands server-side after we gave
-          // up here. Poll the stack to pick it up (this is the "504 on first
-          // load, works after a manual refresh" case — now it self-heals).
-          sw.refilling=false; schedulePoll();
-        });
-    }
-    // ── stack re-poll: recover cards the refill Lambda produced after its HTTP
-    // reply timed out. Backs off after a fixed number of empty tries so we never
-    // poll forever.
-    var pollTimer=null, pollTries=0;
-    function schedulePoll(){
-      if(pollTimer||pollTries>=12) return;
-      if(nodes.length>=sw.target) return;
-      pollTimer=window.setTimeout(function(){ pollTimer=null; pollStack(); }, 5000);
-    }
-    function pollStack(){
-      if(nodes.length>=sw.target) return;
-      fetch(withAccount(swipeStackEndpoint),{credentials:'same-origin',headers:{'accept':'application/json'}})
-        .then(function(r){ return r.ok? r.json(): null; })
-        .then(function(j){
-          if(!j){ pollTries++; schedulePoll(); return; }
-          sw.customizing=Number(j&&j.customizing)||0;
-          var stack=(j&&Array.isArray(j.stack))?j.stack:[];
-          var added=0;
-          stack.forEach(function(card){ if(card&&card.id&&!sw.known[String(card.id)]){ nodes.push(makeCard(card)); added++; } });
-          if(added){ pollTries=0; swHideState(); restack(); }
-          else { pollTries++; if(!nodes.length) swCaughtUp(); }
-          if((sw.customizing>0||nodes.length<sw.target)&&nodes.length<sw.target) schedulePoll();
-        })
-        .catch(function(){ pollTries++; schedulePoll(); });
-    }
-    function loadStack(){
-      swShowState('<div class="rk-discover-spinner" aria-hidden="true"></div><div>Loading your deck&hellip;</div>');
-      fetch(withAccount(swipeStackEndpoint),{credentials:'same-origin',headers:{'accept':'application/json'}})
-        .then(function(r){
-          if(r.status===401){ var e=new Error('unauth'); e.code=401; throw e; }
-          if(!r.ok){ throw new Error("Couldn't load your deck ("+r.status+")."); }
-          return r.json();
-        })
-        .then(function(j){
-          sw.loaded=true;
-          sw.target=Number(j&&j.target_depth)||5;
-          sw.customizing=Number(j&&j.customizing)||0;
-          sw.productSet=Boolean(j&&j.product_description_set);
-          var stack=(j&&Array.isArray(j.stack))?j.stack:[];
-          if(!sw.productSet){
-            swShowState('<div class="rk-discover-swipe-state-title">Tell us about your product</div><div>Swipe auto-recuts viral templates into ads for your product. Add a product / offer description in Settings to start the deck.</div><a class="rk-btn rk-btn-gold rk-btn-sm" href="/settings/profile">Open Settings</a>');
-            return;
-          }
-          nodes=stack.map(makeCard);
-          if(nodes.length){ swHideState(); restack(); }
-          else { swCaughtUp(); }
-          refill();
-        })
-        .catch(function(err){
-          if(err&&err.code===401){
-            swShowState('<div class="rk-discover-swipe-state-title">Swipe is for your product</div><div>Log in to auto-generate ads from viral templates and swipe to approve.</div><a class="rk-btn rk-btn-gold rk-btn-sm" href="/login">Log in</a>');
-            return;
-          }
-          swShowState('<div class="rk-discover-swipe-state-title">Couldn\\u2019t load your deck</div><div>'+esc(friendlyError(err))+'</div>','error');
-        });
-    }
-    // ── fullscreen swipe viewer — a TikTok-style vertical scroll over the CURRENT
-    // deck. Its bottom bar reject/approves the ACTIVE slide (same postDecision +
-    // refill the deck buttons use). While open it OWNS the previews: the deck's
-    // iframes are torn down (parkDeck) so audio/CPU never double, and it drives
-    // __VF_SWIPE_SOUND_* for the active slide's card. Closing rebuilds the deck.
-    var swViewer=(function(){
-      var el=root.querySelector('[data-rk-swipe-viewer]');
-      if(!el) return null;
-      var track=el.querySelector('[data-sv-track]');
-      var actionsEl=el.querySelector('[data-sv-actions]');
-      var rejectBtn=el.querySelector('[data-sv-reject]');
-      var approveBtn=el.querySelector('[data-sv-approve]');
-      var open=false, active=-1, sound=false, io=null, busy=false, activeCardId=null;
-
-      function updateMuteUi(){ el.classList.toggle('is-muted',!sound); }
-      function syncSVSound(){
-        try{ window.__VF_SWIPE_SOUND__ = sound===true; window.__VF_SWIPE_SOUND_TOP__ = activeCardId || null; }catch(e){}
-        updateMuteUi();
-      }
-      function updateActionState(){ if(actionsEl) actionsEl.style.display=track.children.length?'':'none'; }
-      // Detach every deck iframe so only the viewer plays audio/video.
-      function parkDeck(){
-        nodes.forEach(function(n){
-          var f=n.querySelector('.rk-discover-swipe-frame');
-          if(f&&f.parentNode) f.parentNode.removeChild(f);
-          n._iframed=false;
-          var fb=n.querySelector('.rk-discover-swipe-fallback');
-          if(fb){ fb.style.opacity=''; fb.style.pointerEvents=''; }
-        });
-      }
-      function hydrate(slide){
-        if(!slide||slide._iframed) return;
-        var url=slide.getAttribute('data-preview-url'); if(!url) return;
-        var fb=slide.querySelector('.rk-discover-swipe-fallback');
-        var frame=document.createElement('iframe');
-        frame.className='rk-discover-swipe-frame';
-        frame.setAttribute('src',url);
-        frame.setAttribute('title', slide.getAttribute('data-title')||'Preview');
-        frame.setAttribute('loading','lazy');
-        frame.setAttribute('scrolling','no');
-        frame.setAttribute('allow','autoplay');
-        function reveal(){ if(fb){ fb.style.opacity='0'; fb.style.pointerEvents='none'; } }
-        frame.addEventListener('load',function(){ window.setTimeout(reveal,120); });
-        window.setTimeout(reveal,2600);
-        var stage=slide.querySelector('.rk-swipe-viewer-stage');
-        if(stage) stage.insertBefore(frame, stage.firstChild); else slide.insertBefore(frame, slide.firstChild);
-        slide._iframed=true;
-      }
-      function setActive(idx){
-        active=idx;
-        var kids=track.children;
-        for(var i=0;i<kids.length;i++){ if(Math.abs(i-idx)<=1) hydrate(kids[i]); }
-        var s=kids[idx];
-        activeCardId=s? s.getAttribute('data-card-id'): null;
-        syncSVSound();
-      }
-      function appendSlide(card){
-        var slide=document.createElement('section');
-        slide.className='rk-discover-viewer-slide rk-swipe-viewer-slide';
-        slide.setAttribute('data-card-id', String(card.id));
-        var url=card.preview_url||card.previewUrl||'';
-        if(url) slide.setAttribute('data-preview-url', url);
-        var titleTxt=String(card.title||card.source_title||card.template_id||'Template');
-        slide.setAttribute('data-title', titleTxt);
-        var title=esc(titleTxt);
-        var caption=card.caption?('<div class="rk-discover-viewer-desc">'+esc(card.caption)+'</div>'):'';
-        slide.innerHTML='<figure class="rk-discover-viewer-stage rk-swipe-viewer-stage">'
-          +'<div class="rk-discover-swipe-fallback"><span>'+title+'</span></div>'
-          +'<div class="rk-discover-viewer-shade"></div>'
-          +'<div class="rk-discover-viewer-info"><div class="rk-discover-viewer-title">'+title+'</div>'+caption+'</div>'
-          +'</figure>';
-        track.appendChild(slide);
-        if(open&&io) io.observe(slide);
-        return slide;
-      }
-      // Keep the open track in step with the live deck: append a slide for any
-      // node that doesn't have one yet (refills). Removals go through decide().
-      function sync(){
-        if(!open) return;
-        var have={};
-        for(var i=0;i<track.children.length;i++){ have[track.children[i].getAttribute('data-card-id')]=true; }
-        nodes.forEach(function(n){ if(!have[String(n._card.id)]) appendSlide(n._card); });
-        updateActionState();
-      }
-      function step(d){
-        if(!open) return;
-        var next=Math.max(0,Math.min(track.children.length-1,active+d));
-        if(next===active) return;
-        track.scrollTo({top:next*track.clientHeight,behavior:'smooth'});
-      }
-      function decideActive(dir){
-        if(busy||active<0) return;
-        var slide=track.children[active]; if(!slide) return;
-        var id=slide.getAttribute('data-card-id'); var card=null;
-        for(var i=0;i<nodes.length;i++){ if(String(nodes[i]._card.id)===String(id)){ card=nodes[i]._card; break; } }
-        if(!card) return;
-        busy=true; var wasIdx=active;
-        var stage=slide.querySelector('.rk-swipe-viewer-stage');
-        if(stage){
-          stage.style.transition='transform .34s ease, opacity .34s ease';
-          stage.style.transform='translateX('+(dir==='fork'?'62%':'-62%')+') rotate('+(dir==='fork'?'9deg':'-9deg')+')';
-          stage.style.opacity='0';
-        }
-        postDecision(card,dir).then(function(){ refill(); });
-        removeNodeByCard(card);
-        window.setTimeout(function(){
-          if(slide&&slide.parentNode) slide.parentNode.removeChild(slide);
-          busy=false; updateActionState();
-          if(!track.children.length){ close(); return; }
-          var nextIdx=Math.min(wasIdx, track.children.length-1);
-          track.scrollTop=nextIdx*track.clientHeight;
-          setActive(nextIdx);
-        },340);
-      }
-      function openAt(startId){
-        if(!nodes.length||open) return;
-        deckExpanded=true; parkDeck();
-        track.innerHTML=''; sound=sw.soundOn===true; open=true;
-        el.hidden=false; document.documentElement.classList.add('rk-noscroll');
-        if(io) io.disconnect();
-        io=('IntersectionObserver' in window)?new IntersectionObserver(function(entries){
-          entries.forEach(function(en){
-            if(!en.isIntersecting) return;
-            var i=[].indexOf.call(track.children,en.target);
-            if(i>=0&&i!==active) setActive(i);
-          });
-        },{root:track,threshold:0.6}):null;
-        nodes.forEach(function(n){ appendSlide(n._card); });
-        updateActionState();
-        var startIdx=0;
-        for(var i=0;i<nodes.length;i++){ if(String(nodes[i]._card.id)===String(startId)){ startIdx=i; break; } }
-        track.scrollTop=startIdx*track.clientHeight;
-        setActive(startIdx);
-      }
-      function close(){
-        if(!open) return;
-        open=false; active=-1; activeCardId=null; busy=false;
-        if(io){ io.disconnect(); io=null; }
-        track.innerHTML=''; el.hidden=true;
-        document.documentElement.classList.remove('rk-noscroll');
-        deckExpanded=false; sw.soundOn=sound; // carry the sound pref back to the deck
-        restack(); updateSoundBtn();
-      }
-
-      el.querySelectorAll('[data-sv-close]').forEach(function(b){ b.addEventListener('click',close); });
-      var muteBtn=el.querySelector('[data-sv-mute]');
-      if(muteBtn) muteBtn.addEventListener('click',function(){ sound=!sound; syncSVSound(); });
-      var prevBtn=el.querySelector('[data-sv-prev]'); if(prevBtn) prevBtn.addEventListener('click',function(){ step(-1); });
-      var nextBtn=el.querySelector('[data-sv-next]'); if(nextBtn) nextBtn.addEventListener('click',function(){ step(1); });
-      if(rejectBtn) rejectBtn.addEventListener('click',function(){ decideActive('skip'); });
-      if(approveBtn) approveBtn.addEventListener('click',function(){ decideActive('fork'); });
-      // tap the empty gutter (not the phone frame) closes the viewer
-      track.addEventListener('click',function(e){
-        var t=e.target;
-        if(t&&t.classList&&(t.classList.contains('rk-discover-viewer-slide')||t===track)) close();
-      });
-      document.addEventListener('keydown',function(e){
-        if(!open) return;
-        if(e.key==='Escape'){ e.preventDefault(); close(); }
-        else if(e.key==='ArrowDown'||e.key==='PageDown'){ e.preventDefault(); step(1); }
-        else if(e.key==='ArrowUp'||e.key==='PageUp'){ e.preventDefault(); step(-1); }
-        else if(e.key==='ArrowRight'){ e.preventDefault(); decideActive('fork'); }
-        else if(e.key==='ArrowLeft'){ e.preventDefault(); decideActive('skip'); }
-      });
-      window.addEventListener('resize',function(){ if(open&&active>=0) track.scrollTop=active*track.clientHeight; });
-
-      return { openAt:openAt, close:close, sync:sync, isOpen:function(){ return open; } };
-    })();
-
-    // Tap the front card → open the fullscreen viewer at that card.
-    if(deck) deck.addEventListener('click',function(e){
-      if(sw.busy||(swViewer&&swViewer.isOpen())||!nodes.length) return;
-      var el=(e.target&&e.target.closest)?e.target.closest('.rk-discover-swipe'):null;
-      if(!el||!el._card||el!==nodes[0]) return; // only the front card is interactive
-      if(swViewer) swViewer.openAt(el._card.id);
-    });
-
-    if(skipBtn) skipBtn.addEventListener('click',function(){ decide('skip'); });
-    if(forkBtn) forkBtn.addEventListener('click',function(){ decide('fork'); });
-    loadStack();
-  }
-
-  // ════════════════════════════════════════════════════════════════════════
-  // CATEGORIES
-  // ════════════════════════════════════════════════════════════════════════
-  var catsRoot=root.querySelector('[data-rk-cats]');
-  if(catsRoot){
-    var catsGrid=catsRoot.querySelector('[data-rk-cats-grid]');
-    var reveal=catsRoot.querySelector('[data-rk-cat-reveal]');
-    var revealGrid=catsRoot.querySelector('[data-rk-reveal-grid]');
-    // reveal header ("← All categories" + group title) lives in the toolbar row
-    var revealHead=root.querySelector('[data-rk-reveal-head]');
-    var revealTitle=root.querySelector('[data-rk-reveal-title]');
-    var backBtn=root.querySelector('[data-rk-cat-back]');
-    var catsState=catsRoot.querySelector('[data-rk-cats-state]');
-    var groups={}; // label -> [templates]
-    var revealItems=[]; // the currently-revealed group's templates (viewer list)
-
-    function miniHtml(t){
-      var url=t.previewUrl||t.preview_url||'';
-      if(!url) return '<span class="rk-discover-mini rk-discover-mini-ph"></span>';
-      if(isImage(url)) return '<span class="rk-discover-mini"><img src="'+attr(url)+'" alt="" loading="lazy" decoding="async"></span>';
-      // First-frame still, NOT autoplay: 4 tiles x 16 category cards would be
-      // ~64 playing videos. preload=metadata + #t=0.1 paints frame one only.
-      return '<span class="rk-discover-mini"><video src="'+attr(url+'#t=0.1')+'" muted playsinline preload="metadata" tabindex="-1" aria-hidden="true"></video></span>';
-    }
-    function showReveal(label){
-      var items=groups[label]||[];
-      if(!items.length) return false;
-      revealItems=items;
-      if(revealTitle) revealTitle.textContent=label;
-      // cards carry data-rk-view=<i> so a plain click opens the shared viewer
-      if(revealGrid) revealGrid.innerHTML=items.map(function(t,i){ return posterCardHtml(t,i); }).join('');
-      if(catsGrid) catsGrid.hidden=true;
-      if(reveal) reveal.hidden=false;
-      if(revealHead) revealHead.hidden=false;
-      window.scrollTo(0,0);
-      return true;
-    }
-    function hideReveal(){
-      if(viewerCtl&&viewerCtl.isOpen()) viewerCtl.close();
-      revealItems=[];
-      if(reveal) reveal.hidden=true;
-      if(revealHead) revealHead.hidden=true;
-      if(catsGrid) catsGrid.hidden=false;
-    }
-    if(backBtn) backBtn.addEventListener('click',hideReveal);
-    bindHoverAudio(revealGrid); // reveal cards share posterCardHtml → same hover audio
-    bindViewerOpens(revealGrid, function(){ return revealItems; }); // click → shared TikTok viewer
-
-    // Intercept category-card clicks: if we have live templates for that group,
-    // reveal them in-page; otherwise let the href fall through to a filtered
-    // feed (graceful offline / not-yet-seeded fallback).
-    catsRoot.querySelectorAll('[data-rk-cat]').forEach(function(a){
-      a.addEventListener('click',function(e){
-        var label=a.getAttribute('data-rk-cat');
-        if(groups[label]&&groups[label].length){ e.preventDefault(); showReveal(label); }
-      });
-    });
-
-    function enrichCards(){
-      catsRoot.querySelectorAll('[data-rk-cat]').forEach(function(a){
-        var label=a.getAttribute('data-rk-cat');
-        var items=groups[label]||[];
-        if(!items.length) return;
-        var thumbs=a.querySelector('[data-rk-cat-thumbs]');
-        if(thumbs) thumbs.innerHTML=items.slice(0,4).map(miniHtml).join('');
-        var count=a.querySelector('[data-rk-cat-count]');
-        if(count) count.textContent=items.length+' template'+(items.length===1?'':'s');
-      });
-    }
-    function ingestPopular(list){
-      groups={};
-      (list||[]).forEach(function(t){ var g=(t.popularGroup||'Popular').trim()||'Popular'; (groups[g]=groups[g]||[]).push(t); });
-      enrichCards();
-    }
-    function loadPopular(){
-      var url=popularEndpoint;
-      try{ var u=new URL(popularEndpoint, window.location.href); if(accountId) u.searchParams.set('account', accountId); url=u.toString(); }catch(e){ url=popularEndpoint; }
-      fetch(url,{credentials:'same-origin',headers:{'accept':'application/json'}})
-        .then(function(r){ if(!r.ok){ throw new Error("Couldn't load categories ("+r.status+")."); } return r.json(); })
-        .then(function(j){
-          var list=(j&&Array.isArray(j.templates))?j.templates:[];
-          if(list.length){ ingestPopular(list); return; }
-          // Local serve without the popular catalog seeded (and no upstream
-          // passthrough configured): fall back to the public prod endpoint —
-          // it's CORS-open and unauthenticated — so the sandbox still shows
-          // real first-frame previews on a fully-local box.
-          loadPopularFallback();
-          // The static skeleton already shows every real group; the fetch just
-          // enriches it, so a fetch that returns nothing is not an error state.
-        })
-        .catch(function(){
-          // Offline / unreachable: try the public prod catalog before settling
-          // for the static skeleton grid (real group labels + counts, clicks
-          // fall through to the filtered feed).
-          loadPopularFallback();
-        });
-    }
-    function loadPopularFallback(){
-      if(window.location.hostname==='vidfarm.cc') return; // already prod
-      fetch('https://vidfarm.cc/discover/popular',{headers:{'accept':'application/json'}})
-        .then(function(r){ return r.ok?r.json():null; })
-        .then(function(j){
-          var list=(j&&Array.isArray(j.templates))?j.templates:[];
-          if(list.length) ingestPopular(list);
-        })
-        .catch(function(){ /* keep the static skeleton */ });
-    }
-    loadPopular();
-  }
-})();`;
-    return reskinDocument({
-        title: `vidfarm reskin — Discover (${mode})`,
-        description: "Reskinned vidfarm Discover — real Feed / Swipe / Categories, live template posters, warm sunny SaaS.",
-        activeSlug: "discover",
-        account: { name: input.name, email: input.email },
-        pageCss,
-        body,
-        script,
-        // Feed mode hydrates a Zustand store (SSR-seed + stale-while-revalidate);
-        // the other modes don't need it.
-        moduleScripts: mode === "feed" ? ["/assets/discover-client-app.js"] : undefined
-    });
-}
-//# sourceMappingURL=discover-page.js.map