@mevdragon/vidfarm-devcli 0.2.13 → 0.3.0

package/dist/src/page-shell.js

@@ -1,2393 +0,0 @@
-export function escapeHtml(value) {
-    return value
-        .replace(/&/g, "&")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;");
-}
-export function escapeAttribute(value) {
-    return escapeHtml(value).replace(/'/g, "&#39;");
-}
-export function escapeJsonForHtml(value) {
-    return JSON.stringify(value)
-        .replace(/</g, "\\u003c")
-        .replace(/>/g, "\\u003e")
-        .replace(/&/g, "\\u0026");
-}
-export function withAccountQuery(href, accountId) {
-    if (!accountId || !href.startsWith("/")) {
-        return href;
-    }
-    const url = new URL(href, "https://vidfarm.local");
-    if (url.pathname.startsWith("/u/")) {
-        return `${url.pathname}${url.search}${url.hash}`;
-    }
-    if (url.pathname === "/discover" || url.pathname.startsWith("/discover/") || url.pathname === "/help") {
-        return `${url.pathname}${url.search}${url.hash}`;
-    }
-    return `/u/${encodeURIComponent(accountId)}${url.pathname}${url.search}${url.hash}`;
-}
-export function resolveAccountDisplayName(input) {
-    const email = input?.email?.trim() || "";
-    const displayName = input?.displayName?.trim() || "";
-    if (displayName) {
-        return displayName;
-    }
-    if (!email) {
-        return "";
-    }
-    return email
-        .split("@")[0]
-        .replace(/[._-]+/g, " ")
-        .replace(/\b\w/g, (match) => match.toUpperCase());
-}
-function renderNavIcon(kind) {
-    if (kind === "discover") {
-        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M10 3v4"/><path d="M10 13v4"/><path d="M3 10h4"/><path d="M13 10h4"/><path d="m5.8 5.8 2.3 2.3"/><path d="m11.9 11.9 2.3 2.3"/><path d="m14.2 5.8-2.3 2.3"/><path d="m8.1 11.9-2.3 2.3"/></svg>`;
-    }
-    if (kind === "library") {
-        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 4.5h3v11h-3z"/><path d="M8.7 4.5h3v11h-3z"/><path d="m13.4 5.1 2.3-.6 2.2 10.7-2.3.6z"/></svg>`;
-    }
-    if (kind === "calendar") {
-        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.2"/><path d="M10 6.3v4.1l2.8 1.7"/></svg>`;
-    }
-    if (kind === "chat") {
-        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M4.2 5.2a2 2 0 0 1 2-2h7.6a2 2 0 0 1 2 2v5.6a2 2 0 0 1-2 2H9.2l-4.1 3.1v-3.1a2 2 0 0 1-.9-1.7Z"/><path d="M7.3 7.1h5.4"/><path d="M7.3 9.6h3.7"/></svg>`;
-    }
-    if (kind === "settings") {
-        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14.8 15.2a5.4 5.4 0 1 0-9.6 0"/><circle cx="10" cy="6.8" r="3.1"/></svg>`;
-    }
-    if (kind === "help") {
-        return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="7.2"/><path d="M8.1 8a2.2 2.2 0 1 1 3.7 1.6c-.8.7-1.4 1.1-1.4 2.2"/><path d="M10 14.8h.01"/></svg>`;
-    }
-    return `<svg viewBox="0 0 20 20" fill="currentColor"><circle cx="4.2" cy="10" r="1.45"/><circle cx="10" cy="10" r="1.45"/><circle cx="15.8" cy="10" r="1.45"/></svg>`;
-}
-function renderMenuIcon() {
-    return `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M3.5 5.5h13"/><path d="M3.5 10h13"/><path d="M3.5 14.5h13"/></svg>`;
-}
-export function renderPrimaryNav(input) {
-    const items = input.loggedIn
-        ? [
-            { id: "discover", href: withAccountQuery("/discover", input.accountId), label: "Studio", icon: renderNavIcon("discover") },
-            { id: "library", href: withAccountQuery("/library", input.accountId), label: "Library", icon: renderNavIcon("library") },
-            { id: "calendar", href: withAccountQuery("/calendar", input.accountId), label: "Calendar", icon: renderNavIcon("calendar") },
-            { id: "settings", href: withAccountQuery("/settings", input.accountId), label: "Settings", icon: renderNavIcon("settings") }
-        ]
-        : [
-            { id: "discover", href: "/discover", label: "Studio", icon: renderNavIcon("discover") },
-            { id: "login", href: "/login", label: "Login", icon: renderNavIcon("settings") }
-        ];
-    const menuItems = input.loggedIn
-        ? [
-            { id: "job-runs", href: withAccountQuery("/job-runs", input.accountId), label: "Render Runs" },
-            { id: "inpaint", href: withAccountQuery("/inpaint", input.accountId), label: "Image Tools" },
-            { id: "help", href: "/help", label: "Help" },
-            { id: "logout", action: "logout", label: "Log Out" }
-        ]
-        : [
-            { id: "help", href: "/help", label: "Help" },
-            { id: "login", href: "/login", label: "Login" }
-        ];
-    const mobileMenuPrimaryItems = items.filter((item) => !menuItems.some((menuItem) => menuItem.id === item.id));
-    const logoutDialog = input.loggedIn ? `
-    <dialog class="logout-dialog" data-logout-dialog>
-      <div class="logout-dialog-head">
-        <div class="label logout-dialog-kicker">Log out</div>
-        <h3>Log out of this browser?</h3>
-        <p>This clears the stored developer key, workspace access, and local session state for the current browser.</p>
-      </div>
-      <div class="toolbar logout-dialog-actions">
-        <button type="button" class="secondary" data-close-logout-dialog>Cancel</button>
-        <form method="post" action="/logout" data-logout-form>
-          <input type="hidden" name="account" value="${escapeAttribute(input.accountId ?? "")}" />
-          <button type="submit" class="danger">Yes, log out</button>
-        </form>
-      </div>
-    </dialog>
-  ` : "";
-    return `
-    <nav class="primary-nav" aria-label="Primary">
-      ${items.map((item) => `
-        <a class="nav-link${item.id === input.current ? " is-active" : ""}" href="${item.href}">
-          <span class="nav-icon" aria-hidden="true">${item.icon}</span>
-          <span>${item.label}</span>
-        </a>
-      `).join("")}
-      ${menuItems.map((item) => `
-        ${"href" in item ? `
-	          <a class="nav-link nav-mobile-extra${item.id === input.current ? " is-active" : ""}" href="${escapeAttribute(item.href ?? "#")}">
-            <span>${escapeHtml(item.label)}</span>
-          </a>
-        ` : `
-          <button type="button" class="nav-link nav-mobile-extra nav-action-link" data-open-logout-dialog>
-            <span>${escapeHtml(item.label)}</span>
-          </button>
-        `}
-      `).join("")}
-      ${menuItems.length ? `
-        <details class="nav-menu">
-          <summary class="nav-link nav-menu-trigger" aria-label="Open navigation menu">
-            <span class="nav-icon nav-menu-desktop-icon" aria-hidden="true">${renderNavIcon("more")}</span>
-            <span class="nav-icon nav-menu-mobile-icon" aria-hidden="true">${renderMenuIcon()}</span>
-            <span class="nav-menu-label">Menu</span>
-          </summary>
-          <div class="nav-menu-panel" role="menu">
-            ${mobileMenuPrimaryItems.map((item) => `
-              <a class="nav-menu-item nav-menu-mobile-only${item.id === input.current ? " is-active" : ""}" role="menuitem" href="${escapeAttribute(item.href ?? "#")}">${escapeHtml(item.label)}</a>
-            `).join("")}
-            ${menuItems.map((item) => `
-              ${"href" in item ? `
-	                <a class="nav-menu-item${item.id === input.current ? " is-active" : ""}" role="menuitem" href="${escapeAttribute(item.href ?? "#")}">${escapeHtml(item.label)}</a>
-              ` : `
-                <button type="button" class="nav-menu-item nav-menu-button" role="menuitem" data-open-logout-dialog>${escapeHtml(item.label)}</button>
-              `}
-            `).join("")}
-          </div>
-        </details>
-      ` : ""}
-    </nav>
-    ${logoutDialog}
-  `;
-}
-export function renderBrandLockup(input) {
-    const email = input?.email?.trim() || "";
-    const derivedName = resolveAccountDisplayName(input);
-    const href = withAccountQuery("/discover", input?.accountId);
-    const accountMeta = email
-        ? `<div class="brand-account-meta">${escapeHtml(derivedName)} <span>(${escapeHtml(email)})</span></div>`
-        : "";
-    return `
-    <a class="brand-lockup" href="${escapeAttribute(href)}">
-      <img class="brand-logo-image" src="/assets/logo-vidfarm.png" alt="VidFarm AI" />
-      <div class="brand-copy">
-        <div class="brand-title brand-title-static">VidFarm<span class="brand-title-mobile-hidden"> AI</span></div>
-        ${accountMeta}
-      </div>
-    </a>
-  `;
-}
-export function renderPageShell(input) {
-    return `<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>${escapeHtml(input.title)}</title>
-    <link rel="icon" href="/assets/favicon.ico" sizes="any" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
-    <style>
-      :root {
-        color-scheme: dark;
-        --bg: #030603;
-        --paper: rgba(7, 13, 7, 0.82);
-        --paper-strong: rgba(12, 20, 12, 0.96);
-        --panel: transparent;
-        --panel-muted: rgba(18, 28, 15, 0.82);
-        --ink: #fff9d7;
-        --muted: #a6b39b;
-        --line: rgba(210, 255, 110, 0.2);
-        --line-strong: rgba(248, 210, 74, 0.46);
-        --accent: #d7ff46;
-        --accent-deep: #0b1209;
-        --accent-soft: rgba(215, 255, 70, 0.16);
-        --shadow: 0 28px 90px rgba(0, 0, 0, 0.5);
-        --shadow-soft: 0 18px 42px rgba(0, 0, 0, 0.32);
-        --radius-lg: 32px;
-        --radius-md: 26px;
-        --radius-sm: 18px;
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      html {
-        height: 100%;
-        min-height: 100%;
-        overflow: hidden;
-      }
-
-      body {
-        margin: 0;
-        height: 100%;
-        min-height: 100%;
-        overflow: hidden;
-        color: var(--ink);
-        font-family: "Manrope", sans-serif;
-        background:
-          radial-gradient(circle at 14% 14%, rgba(65, 255, 109, 0.2), transparent 26%),
-          radial-gradient(circle at 84% 8%, rgba(255, 216, 75, 0.18), transparent 28%),
-          radial-gradient(circle at 72% 82%, rgba(91, 146, 255, 0.12), transparent 24%),
-          linear-gradient(145deg, #020402 0%, #071006 46%, #171603 100%);
-        background-attachment: fixed;
-      }
-
-      body::before {
-        content: "";
-        position: fixed;
-        inset: 0;
-        pointer-events: none;
-        background-image:
-          linear-gradient(rgba(223, 255, 118, 0.055) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(223, 255, 118, 0.045) 1px, transparent 1px),
-          linear-gradient(115deg, transparent 0 47%, rgba(255, 222, 88, 0.04) 48% 52%, transparent 53% 100%);
-        background-size: 30px 30px;
-        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 88%);
-      }
-
-      body::after {
-        content: "";
-        position: fixed;
-        inset: auto -10% -18% -10%;
-        height: 34vh;
-        pointer-events: none;
-        background:
-          repeating-linear-gradient(90deg, rgba(215, 255, 70, 0.18) 0 2px, transparent 2px 72px),
-          linear-gradient(180deg, transparent, rgba(215, 255, 70, 0.08));
-        filter: blur(0.2px);
-        opacity: 0.45;
-        transform: perspective(520px) rotateX(58deg);
-        transform-origin: bottom center;
-      }
-
-      a {
-        color: inherit;
-      }
-
-      button,
-      input,
-      select,
-      textarea {
-        font: inherit;
-      }
-
-      .app-shell {
-        width: min(1980px, calc(100vw - 40px));
-        margin: 0 auto;
-        height: 100dvh;
-        min-height: 0;
-        padding: 20px 0 28px;
-      }
-
-      .app-shell.is-wide {
-        width: min(1980px, calc(100vw - 40px));
-      }
-
-      .app-shell.is-narrow {
-        width: min(1980px, calc(100vw - 40px));
-      }
-
-      .page-stack {
-        display: grid;
-        height: 100%;
-        min-height: 0;
-        gap: 18px;
-      }
-
-      .frame {
-        position: relative;
-        display: grid;
-        grid-template-rows: auto minmax(0, 1fr);
-        min-height: 0;
-        overflow: hidden;
-        border-radius: var(--radius-lg);
-        background: var(--panel);
-      }
-
-      .frame-body {
-        display: grid;
-        min-height: 0;
-        gap: 20px;
-        padding: 14px 0 0;
-      }
-
-      .topbar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 12px;
-        min-height: 76px;
-        padding: 10px 16px 10px 20px;
-        border: 1px solid rgba(255, 255, 255, 0.82);
-        border-radius: var(--radius-lg);
-        background: var(--paper);
-        box-shadow: var(--shadow);
-      }
-
-      .brand-lockup {
-        display: flex;
-        flex: 1 1 min(0, 58%);
-        align-items: center;
-        gap: 14px;
-        min-width: 0;
-        color: inherit;
-        text-decoration: none;
-      }
-
-      .brand-lockup:hover,
-      .brand-lockup:focus {
-        text-decoration: none;
-      }
-
-      .brand-logo-image {
-        display: block;
-        width: auto;
-        height: 44px;
-        max-width: min(220px, 38vw);
-        object-fit: contain;
-        object-position: left center;
-        flex: 0 0 auto;
-        border-radius: 12px;
-      }
-
-      .brand-mark {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 38px;
-        height: 38px;
-        border-radius: 999px;
-        background: #111934;
-        color: #f3e8cd;
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
-      }
-
-      .brand-mark svg {
-        width: 20px;
-        height: 20px;
-      }
-
-      .brand-copy {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        min-width: 0;
-        flex-wrap: wrap;
-      }
-
-      .brand-account-meta {
-        min-width: 0;
-        color: rgba(116, 130, 156, 0.78);
-        font-size: 0.94rem;
-        line-height: 1.2;
-        font-weight: 500;
-        letter-spacing: -0.01em;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .brand-account-meta span {
-        color: rgba(116, 130, 156, 0.62);
-      }
-
-      .eyebrow {
-        font-size: 10px;
-        font-weight: 700;
-        letter-spacing: 0.28em;
-        text-transform: uppercase;
-        color: var(--muted);
-      }
-
-      .brand-title {
-        font-family: "Instrument Serif", serif;
-        font-size: clamp(1.65rem, 1.85vw, 2rem);
-        line-height: 0.92;
-        font-weight: 400;
-        letter-spacing: -0.05em;
-        color: #1f2635;
-      }
-
-      .brand-title-static {
-        font-family: "Instrument Serif", serif;
-        font-size: clamp(1.5rem, 1.7vw, 1.85rem);
-        line-height: 0.92;
-        font-weight: 400;
-        letter-spacing: -0.05em;
-        text-transform: none;
-        color: #1f2635;
-      }
-
-      .brand-description {
-        min-width: 0;
-        color: #66758d;
-        font-size: 0.94rem;
-      }
-
-      .topbar-actions {
-        display: flex;
-        flex-wrap: wrap;
-        flex: 1 1 auto;
-        gap: 6px;
-        justify-content: flex-end;
-        min-width: 0;
-      }
-
-      .primary-nav {
-        display: flex;
-        flex-wrap: nowrap;
-        gap: 4px;
-        align-items: center;
-        justify-content: flex-end;
-        width: auto;
-        min-width: 0;
-        max-width: 100%;
-        padding: 3px;
-        border: 1px solid rgba(191, 164, 109, 0.28);
-        border-radius: 22px;
-        background: linear-gradient(180deg, rgba(247, 241, 230, 0.94), rgba(244, 236, 223, 0.96));
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.88),
-          0 8px 18px rgba(138, 102, 32, 0.08);
-      }
-
-      .nav-link {
-        display: inline-flex;
-        flex: 0 0 auto;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        min-height: 38px;
-        padding: 0 14px;
-        white-space: nowrap;
-        border: 1px solid transparent;
-        border-radius: 16px;
-        color: #6f6451;
-        text-decoration: none;
-        font-size: 0.9rem;
-        font-weight: 600;
-        transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
-      }
-
-      .nav-link:hover {
-        color: var(--ink);
-      }
-
-      .nav-link.is-active {
-        border-color: rgba(232, 223, 204, 0.9);
-        background: rgba(255, 252, 247, 0.96);
-        color: var(--ink);
-        box-shadow: 0 8px 20px rgba(101, 73, 18, 0.08);
-      }
-
-      .nav-menu {
-        position: relative;
-        flex: 0 0 auto;
-      }
-
-      .nav-menu > summary {
-        list-style: none;
-        cursor: pointer;
-      }
-
-      .nav-menu > summary::-webkit-details-marker {
-        display: none;
-      }
-
-      .nav-menu-trigger {
-        min-width: 34px;
-        padding: 0 8px;
-        color: rgba(111, 100, 81, 0.68);
-      }
-
-      .nav-menu-trigger:hover,
-      .nav-menu[open] > .nav-menu-trigger {
-        color: rgba(47, 55, 72, 0.82);
-      }
-
-      .nav-menu-label {
-        display: none;
-      }
-
-      .nav-menu-mobile-icon,
-      .nav-menu-mobile-only {
-        display: none;
-      }
-
-      .nav-menu-panel {
-        position: absolute;
-        z-index: 40;
-        top: calc(100% + 8px);
-        right: 0;
-        display: grid;
-        width: max-content;
-        min-width: 142px;
-        padding: 6px;
-        border: 1px solid rgba(191, 164, 109, 0.3);
-        border-radius: 14px;
-        background: rgba(255, 252, 247, 0.98);
-        box-shadow: 0 18px 38px rgba(81, 58, 20, 0.15);
-      }
-
-      .nav-menu-item {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        width: 100%;
-        min-height: 34px;
-        padding: 0 10px;
-        border: 0;
-        border-radius: 10px;
-        background: transparent;
-        color: #5d6a80;
-        font-size: 0.88rem;
-        font-weight: 700;
-        font-family: inherit;
-        text-align: left;
-        text-decoration: none;
-        white-space: nowrap;
-        cursor: pointer;
-      }
-
-      .nav-menu-item:hover,
-      .nav-menu-item.is-active {
-        background: rgba(244, 236, 223, 0.86);
-        color: var(--ink);
-      }
-
-      .nav-menu-item.nav-menu-mobile-only {
-        display: none;
-      }
-
-      .nav-action-link {
-        border: 1px solid transparent;
-        background: transparent;
-        font-family: inherit;
-      }
-
-      .nav-mobile-extra {
-        display: none;
-      }
-
-      .nav-icon,
-      .nav-icon svg {
-        width: 16px;
-        height: 16px;
-      }
-
-      .surface,
-      .surface-hero,
-      .surface-muted {
-        position: relative;
-        border-radius: var(--radius-md);
-        background: transparent;
-      }
-
-      .surface-hero {
-        background:
-          radial-gradient(circle at top right, rgba(195, 159, 86, 0.14), transparent 26%),
-          transparent;
-      }
-
-      h1,
-      h2,
-      h3 {
-        margin: 0;
-        color: #1f2635;
-      }
-
-      h1 {
-        font-family: "Instrument Serif", serif;
-        font-size: clamp(3rem, 5vw, 4.6rem);
-        line-height: 0.88;
-        font-weight: 400;
-        letter-spacing: -0.07em;
-        text-wrap: balance;
-      }
-
-      h2 {
-        font-family: "Instrument Serif", serif;
-        font-size: clamp(1.8rem, 2.8vw, 2.7rem);
-        line-height: 0.92;
-        font-weight: 400;
-        letter-spacing: -0.06em;
-      }
-
-      h3 {
-        font-size: 1.12rem;
-        line-height: 1.2;
-        font-weight: 600;
-        letter-spacing: -0.03em;
-      }
-
-      p {
-        margin: 0;
-        color: var(--muted);
-        line-height: 1.65;
-      }
-
-      .lede {
-        max-width: 56ch;
-        font-size: 0.98rem;
-      }
-
-      .hero-grid,
-      .split-grid,
-      .card-grid,
-      .stats-grid,
-      .field-grid,
-      .toolbar {
-        display: grid;
-        gap: 16px;
-      }
-
-      .hero-grid {
-        grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
-        align-items: stretch;
-      }
-
-      .split-grid {
-        grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
-      }
-
-      .page-hero {
-        display: grid;
-        grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
-        gap: 18px;
-        align-items: start;
-      }
-
-      .page-section {
-        display: grid;
-        gap: 14px;
-      }
-
-      .page-section-head {
-        display: flex;
-        align-items: end;
-        justify-content: space-between;
-        gap: 16px;
-      }
-
-      .metric-grid {
-        display: grid;
-        gap: 14px;
-      }
-
-      .metric {
-        display: grid;
-        gap: 8px;
-      }
-
-      .card-grid {
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      }
-
-      .stats-grid {
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-      }
-
-      .field-grid.cols-2 {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-
-      .field-grid.cols-3 {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-      }
-
-      .logout-dialog {
-        width: min(28rem, calc(100vw - 1.5rem));
-        padding: 0;
-        border: 1px solid rgba(235, 195, 195, 0.96);
-        border-radius: 30px;
-        background: rgba(255, 250, 250, 0.98);
-        box-shadow: 0 28px 72px rgba(113, 30, 30, 0.16);
-      }
-
-      .logout-dialog::backdrop {
-        background: rgba(36, 24, 24, 0.24);
-        backdrop-filter: blur(8px);
-      }
-
-      .logout-dialog-head {
-        display: grid;
-        gap: 12px;
-        padding: 24px 24px 20px;
-        border-bottom: 1px solid rgba(235, 195, 195, 0.96);
-        background: rgba(148, 47, 47, 0.05);
-      }
-
-      .logout-dialog-kicker {
-        margin-bottom: 0;
-        color: #a33f3f;
-      }
-
-      .logout-dialog-head h3 {
-        margin: 0;
-        font-size: 2rem;
-        line-height: 0.95;
-        letter-spacing: -0.05em;
-        color: #571d1d;
-      }
-
-      .logout-dialog-head p {
-        margin: 0;
-        color: rgba(109, 36, 36, 0.8);
-      }
-
-      .logout-dialog-actions {
-        justify-content: flex-end;
-        padding: 20px 24px 24px;
-      }
-
-      .logout-dialog-actions form {
-        margin: 0;
-      }
-
-      .stack {
-        display: grid;
-        gap: 16px;
-      }
-
-      .stack-lg {
-        display: grid;
-        gap: 22px;
-      }
-
-      .kicker {
-        display: inline-flex;
-        align-items: center;
-        gap: 10px;
-        min-height: 34px;
-        width: max-content;
-        max-width: 100%;
-        align-self: start;
-        padding: 0 14px;
-        border: 1px solid rgba(209, 219, 233, 0.96);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.9);
-        color: #6f7d95;
-        font-size: 11px;
-        font-weight: 700;
-        letter-spacing: 0.24em;
-        text-transform: uppercase;
-      }
-
-      .kicker.is-muted {
-        color: var(--muted);
-      }
-
-      .button,
-      button,
-      .link-button,
-      .cta-button {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-        min-height: 46px;
-        padding: 0 18px;
-        border: 1px solid rgba(219, 196, 146, 0.8);
-        border-radius: 999px;
-        background: #dec081;
-        color: #243041;
-        text-decoration: none;
-        font-size: 0.95rem;
-        font-weight: 600;
-        cursor: pointer;
-        transition:
-          transform 160ms ease,
-          border-color 160ms ease,
-          background 160ms ease,
-          box-shadow 160ms ease;
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
-      }
-
-      .button:hover,
-      button:hover,
-      .link-button:hover {
-        transform: translateY(-1px);
-        border-color: rgba(191, 164, 109, 0.9);
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.84),
-          0 12px 28px rgba(118, 89, 38, 0.15);
-      }
-
-      .button.secondary,
-      button.secondary,
-      .link-button.secondary {
-        background: rgba(255, 255, 255, 0.88);
-        color: var(--ink);
-      }
-
-      .button.danger,
-      button.danger {
-        border-color: rgba(192, 90, 90, 0.42);
-        background: #9f3d3d;
-        color: #fff8f8;
-      }
-
-      .button.danger:hover,
-      button.danger:hover {
-        border-color: rgba(160, 58, 58, 0.62);
-        box-shadow: 0 12px 28px rgba(128, 38, 38, 0.18);
-      }
-
-      .nav-menu-button:hover,
-      .nav-action-link:hover {
-        transform: none;
-        box-shadow: none;
-      }
-
-      .button.ghost,
-      button.ghost,
-      .link-button.ghost {
-        background: rgba(255, 255, 255, 0.34);
-      }
-
-      button[disabled] {
-        cursor: not-allowed;
-        opacity: 0.5;
-        transform: none;
-        box-shadow: none;
-      }
-
-      .input,
-      input,
-      select,
-      textarea {
-        width: 100%;
-        border: 1px solid var(--line);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.92);
-        color: var(--ink);
-        padding: 14px 16px;
-        outline: none;
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
-      }
-
-      textarea {
-        min-height: 140px;
-        border-radius: 24px;
-        resize: vertical;
-      }
-
-      input:focus,
-      select:focus,
-      textarea:focus {
-        border-color: rgba(191, 164, 109, 0.9);
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.9),
-          0 0 0 4px var(--accent-soft);
-      }
-
-      label,
-      .label {
-        display: block;
-        margin-bottom: 8px;
-        color: var(--muted);
-        font-size: 11px;
-        font-weight: 700;
-        letter-spacing: 0.3em;
-        text-transform: uppercase;
-      }
-
-      .label-group {
-        display: grid;
-        gap: 8px;
-      }
-
-      .notice {
-        padding: 14px 16px;
-        border: 1px solid rgba(209, 219, 233, 0.96);
-        border-radius: 18px;
-        background: rgba(255, 255, 255, 0.82);
-        color: var(--ink);
-      }
-
-      .notice-success {
-        border-color: rgba(209, 219, 233, 0.96);
-        background: rgba(255, 255, 255, 0.82);
-        color: var(--ink);
-      }
-
-      .notice-error {
-        border-color: rgba(214, 107, 107, 0.35);
-        background: rgba(191, 38, 38, 0.1);
-        color: #7f1d1d;
-      }
-
-      .helper,
-      .tiny,
-      .meta-copy {
-        color: #7a879e;
-        font-size: 0.94rem;
-      }
-
-      .tiny {
-        font-size: 0.86rem;
-      }
-
-      .pill {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        min-height: 34px;
-        padding: 0 12px;
-        border: 1px solid rgba(209, 219, 233, 0.96);
-        border-radius: 999px;
-        background: rgba(255, 255, 255, 0.9);
-        color: #6f7d95;
-        font-size: 11px;
-        font-weight: 700;
-        letter-spacing: 0.24em;
-        text-transform: uppercase;
-      }
-
-      .status-pill.is-active::before,
-      .pill.is-active::before {
-        content: "";
-        width: 8px;
-        height: 8px;
-        border-radius: 999px;
-        background: var(--accent);
-        box-shadow: 0 0 0 4px rgba(222, 192, 129, 0.22);
-      }
-
-      .status-row,
-      .toolbar {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-      }
-
-      .toolbar,
-      .status-row {
-        gap: 10px;
-      }
-
-      .keyline {
-        height: 1px;
-        background: linear-gradient(90deg, rgba(112, 86, 34, 0), rgba(209, 219, 233, 0.96), rgba(112, 86, 34, 0));
-      }
-
-      .empty-state {
-        padding: 18px;
-        border: 1px dashed rgba(209, 219, 233, 0.96);
-        border-radius: 18px;
-        background: rgba(255, 255, 255, 0.5);
-        color: var(--muted);
-      }
-
-      .loading-inline {
-        display: inline-flex;
-        align-items: center;
-        gap: 10px;
-      }
-
-      .loading-spinner {
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        border: 2px solid rgba(36, 48, 65, 0.18);
-        border-top-color: rgba(36, 48, 65, 0.78);
-        border-radius: 999px;
-        animation: vidfarm-spin 0.8s linear infinite;
-        flex: 0 0 auto;
-      }
-
-      @keyframes vidfarm-spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
-      code,
-      pre {
-        font-family: "SFMono-Regular", Menlo, Consolas, monospace;
-      }
-
-      pre {
-        margin: 0;
-        border: 1px solid rgba(73, 57, 26, 0.18);
-        border-radius: 18px;
-        background: #211a12;
-        color: #f8eed6;
-        padding: 16px;
-        overflow: auto;
-        white-space: pre-wrap;
-        word-break: break-word;
-      }
-
-      ${input.style ?? ""}
-
-      /* HyperFrames render-bay skin. Kept after page CSS so old surfaces cannot leak through visually. */
-      .frame {
-        overflow: visible;
-      }
-
-      .frame-body {
-        position: relative;
-        z-index: 1;
-      }
-
-      .topbar {
-        position: relative;
-        z-index: 40;
-        border: 1px solid rgba(215, 255, 70, 0.22);
-        background:
-          linear-gradient(135deg, rgba(10, 18, 9, 0.92), rgba(15, 18, 5, 0.84)),
-          radial-gradient(circle at 10% 0%, rgba(215, 255, 70, 0.14), transparent 36%);
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.08),
-          0 24px 68px rgba(0, 0, 0, 0.44);
-        backdrop-filter: blur(18px);
-      }
-
-      .brand-lockup::before {
-        content: "";
-        width: 10px;
-        height: 10px;
-        border-radius: 999px;
-        background: #d7ff46;
-        box-shadow: 0 0 0 5px rgba(215, 255, 70, 0.12), 0 0 26px rgba(215, 255, 70, 0.64);
-        flex: 0 0 auto;
-      }
-
-      .brand-logo-image {
-        filter: saturate(1.12) contrast(1.08);
-      }
-
-      .brand-title,
-      .brand-title-static,
-      h1,
-      h2 {
-        color: var(--ink);
-        font-family: "Bebas Neue", "Instrument Serif", serif;
-        font-weight: 400;
-        letter-spacing: 0.01em;
-        text-transform: uppercase;
-      }
-
-      h3 {
-        color: var(--ink);
-      }
-
-      p,
-      .brand-account-meta,
-      .brand-account-meta span,
-      .helper,
-      .tiny,
-      .meta-copy {
-        color: var(--muted);
-      }
-
-      .primary-nav {
-        position: relative;
-        z-index: 45;
-        border: 1px solid rgba(215, 255, 70, 0.18);
-        background:
-          linear-gradient(180deg, rgba(18, 28, 15, 0.72), rgba(6, 12, 6, 0.78)),
-          repeating-linear-gradient(90deg, rgba(215, 255, 70, 0.07) 0 1px, transparent 1px 38px);
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
-      }
-
-      .nav-link,
-      .nav-menu-trigger,
-      .nav-menu-item {
-        color: rgba(255, 249, 215, 0.72);
-        font-family: "JetBrains Mono", "SFMono-Regular", monospace;
-        font-size: 0.78rem;
-        font-weight: 700;
-        letter-spacing: 0.02em;
-      }
-
-      .nav-link:hover,
-      .nav-menu-trigger:hover,
-      .nav-menu[open] > .nav-menu-trigger {
-        color: var(--ink);
-      }
-
-      .nav-link.is-active,
-      .nav-menu-item.is-active {
-        border-color: rgba(215, 255, 70, 0.42);
-        background: rgba(215, 255, 70, 0.12);
-        color: #f8ffd6;
-        box-shadow: 0 0 0 1px rgba(215, 255, 70, 0.08), 0 10px 28px rgba(0, 0, 0, 0.28);
-      }
-
-      .nav-menu-panel,
-      .logout-dialog,
-      .notice,
-      .empty-state {
-        z-index: 80;
-        border-color: rgba(215, 255, 70, 0.22);
-        background: rgba(8, 14, 8, 0.96);
-        color: var(--ink);
-        box-shadow: 0 26px 70px rgba(0, 0, 0, 0.52);
-      }
-
-      .surface,
-      .surface-hero,
-      .surface-muted,
-      .page-section,
-      .developer-panel,
-      .settings-pane,
-      .library-shell,
-      .help-shell,
-      .discover-shell,
-      .calendar-shell,
-      .custom-inpaint-panel,
-      .custom-inpaint-stage,
-      .custom-inpaint-output,
-      .editor-inpaint-panel,
-      .history-toolbar,
-      .history-group,
-      .history-subgroup,
-      .history-linked-job,
-      .history-media-modal,
-      .editor-hero,
-      .editor-section,
-      .editor-panel,
-      .editor-modal,
-      .editor-media-modal,
-      .editor-inpaint-modal,
-      .vf-editor-chat-http-card,
-      .vf-editor-chat-http-modal,
-      .library-post,
-      .library-options-panel,
-      .calendar-main,
-      .calendar-sidebar,
-      .calendar-day-panel,
-      .calendar-schedule-modal,
-      .help-details {
-        border-color: rgba(215, 255, 70, 0.18) !important;
-        background:
-          linear-gradient(180deg, rgba(13, 22, 11, 0.9), rgba(6, 11, 6, 0.9)),
-          radial-gradient(circle at 12% 0%, rgba(215, 255, 70, 0.1), transparent 30%) !important;
-        color: var(--ink);
-        box-shadow: var(--shadow-soft);
-      }
-
-      .surface-hero,
-      .editor-hero,
-      .discover-shell {
-        position: relative;
-        overflow: hidden;
-      }
-
-      .surface-hero::after,
-      .editor-hero::after,
-      .discover-shell::after {
-        content: "";
-        position: absolute;
-        inset: auto 20px 18px 20px;
-        height: 8px;
-        border-radius: 999px;
-        background: repeating-linear-gradient(90deg, rgba(215, 255, 70, 0.9) 0 18px, rgba(215, 255, 70, 0.2) 18px 22px, transparent 22px 54px);
-        opacity: 0.4;
-        pointer-events: none;
-      }
-
-      .button,
-      button,
-      .link-button,
-      .cta-button,
-      .history-filter-button,
-      .history-action-link,
-      .editor-history-button,
-      .vf-editor-chat-new-thread,
-      .vf-editor-chat-history-toggle,
-      .vf-editor-chat-history-close,
-      .vf-editor-chat-back-button {
-        border-color: rgba(215, 255, 70, 0.42);
-        background: linear-gradient(180deg, #e8ff63, #bddf26);
-        color: #071006;
-        font-family: "JetBrains Mono", "SFMono-Regular", monospace;
-        font-weight: 800;
-        letter-spacing: -0.02em;
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.48),
-          0 12px 28px rgba(174, 219, 32, 0.18);
-      }
-
-      .button:hover,
-      button:hover,
-      .link-button:hover,
-      .cta-button:hover,
-      .history-filter-button:hover,
-      .history-action-link:hover,
-      .editor-history-button:hover {
-        border-color: rgba(248, 210, 74, 0.74);
-        box-shadow:
-          inset 0 1px 0 rgba(255, 255, 255, 0.54),
-          0 14px 34px rgba(215, 255, 70, 0.24);
-      }
-
-      .button.secondary,
-      button.secondary,
-      .link-button.secondary,
-      .history-filter-button:not(.is-primary),
-      .editor-history-button:not(.is-primary),
-      .discover-media-modal-action,
-      .history-media-modal-source,
-      .editor-media-modal-source {
-        border-color: rgba(255, 249, 215, 0.16);
-        background: rgba(255, 249, 215, 0.08);
-        color: rgba(255, 249, 215, 0.88);
-        box-shadow: none;
-      }
-
-      .input,
-      input,
-      select,
-      textarea {
-        border-color: rgba(215, 255, 70, 0.22);
-        background: rgba(0, 0, 0, 0.34);
-        color: var(--ink);
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
-      }
-
-      input::placeholder,
-      textarea::placeholder {
-        color: rgba(166, 179, 155, 0.66);
-      }
-
-      input:focus,
-      select:focus,
-      textarea:focus {
-        border-color: rgba(215, 255, 70, 0.74);
-        box-shadow: 0 0 0 4px rgba(215, 255, 70, 0.13);
-      }
-
-      label,
-      .label,
-      .kicker,
-      .eyebrow,
-      .pill,
-      .pill-tag,
-      .history-chip,
-      .editor-pill,
-      .vf-editor-chat-kicker,
-      .vf-editor-chat-tracer-label,
-      .vf-editor-chat-http-label {
-        color: rgba(215, 255, 70, 0.82);
-        font-family: "JetBrains Mono", "SFMono-Regular", monospace;
-        letter-spacing: 0.18em;
-      }
-
-      .pill,
-      .pill-tag,
-      .history-chip,
-      .editor-pill,
-      .vf-editor-chat-tracer-chip,
-      .vf-editor-chat-thread-chip {
-        border-color: rgba(215, 255, 70, 0.18);
-        background: rgba(215, 255, 70, 0.08);
-        color: rgba(255, 249, 215, 0.86);
-      }
-
-      pre,
-      code,
-      .vf-editor-chat-http-pre {
-        border-color: rgba(215, 255, 70, 0.18);
-        background: rgba(0, 0, 0, 0.48);
-        color: #e8ff9b;
-      }
-
-      .discover-shell {
-        border: 1px solid rgba(215, 255, 70, 0.22);
-        background:
-          radial-gradient(circle at 9% 12%, rgba(215, 255, 70, 0.12), transparent 30%),
-          linear-gradient(135deg, rgba(9, 15, 8, 0.96), rgba(3, 6, 3, 0.94)) !important;
-        box-shadow: 0 34px 100px rgba(0, 0, 0, 0.5);
-      }
-
-      .discover-sidebar {
-        border-right-color: rgba(215, 255, 70, 0.18);
-        background:
-          linear-gradient(180deg, rgba(16, 27, 12, 0.94), rgba(4, 8, 4, 0.9)),
-          repeating-linear-gradient(0deg, rgba(215, 255, 70, 0.06) 0 1px, transparent 1px 44px) !important;
-      }
-
-      .discover-filter-block {
-        padding: 18px;
-        border: 1px solid rgba(215, 255, 70, 0.16);
-        border-radius: 20px;
-        background: rgba(0, 0, 0, 0.22);
-      }
-
-      .bookmarks-row,
-      .switch-shell,
-      .discover-filter-panel > summary {
-        border-color: rgba(215, 255, 70, 0.18);
-        background: rgba(0, 0, 0, 0.26);
-        color: rgba(255, 249, 215, 0.82);
-      }
-
-      .switch-shell[data-active="true"],
-      .switch-input:checked + .switch-knob {
-        background: #d7ff46;
-      }
-
-      .discover-results {
-        background:
-          linear-gradient(90deg, transparent 0 21px, rgba(215, 255, 70, 0.08) 21px 22px, transparent 22px 100%),
-          linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent);
-        background-size: 44px 100%, auto;
-      }
-
-      .discover-count {
-        color: rgba(215, 255, 70, 0.72);
-        background: linear-gradient(180deg, rgba(5, 9, 5, 0.98), rgba(5, 9, 5, 0));
-        font-family: "JetBrains Mono", "SFMono-Regular", monospace;
-        letter-spacing: 0.02em;
-      }
-
-      .discover-card {
-        position: relative;
-        overflow: hidden;
-        border-color: rgba(215, 255, 70, 0.2);
-        background:
-          linear-gradient(90deg, rgba(215, 255, 70, 0.09) 0 1px, transparent 1px 100%),
-          linear-gradient(180deg, rgba(17, 28, 13, 0.94), rgba(4, 8, 4, 0.94)) !important;
-        background-size: 58px 100%, auto !important;
-        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.46);
-      }
-
-      .discover-card::before {
-        content: "TIMELINE LAYERS";
-        position: absolute;
-        top: 14px;
-        right: 20px;
-        color: rgba(215, 255, 70, 0.46);
-        font-family: "JetBrains Mono", "SFMono-Regular", monospace;
-        font-size: 0.65rem;
-        font-weight: 800;
-        letter-spacing: 0.22em;
-      }
-
-      .discover-card-media {
-        border-color: rgba(215, 255, 70, 0.18);
-        background:
-          linear-gradient(45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%),
-          linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 25%, transparent 25%),
-          #050905;
-        background-size: 24px 24px;
-        box-shadow: inset 0 0 0 1px rgba(255, 249, 215, 0.04);
-      }
-
-      .discover-card-media::after {
-        content: "";
-        position: absolute;
-        left: 16px;
-        right: 16px;
-        bottom: 16px;
-        height: 5px;
-        border-radius: 999px;
-        background: linear-gradient(90deg, #d7ff46 0 26%, rgba(215, 255, 70, 0.2) 26% 64%, rgba(248, 210, 74, 0.78) 64% 100%);
-        opacity: 0.78;
-      }
-
-      .discover-card-title-wrap h2,
-      .library-post-title,
-      .history-title,
-      .editor-title,
-      .vf-editor-chat-empty h2,
-      .vf-editor-chat-disabled h2 {
-        color: var(--ink);
-      }
-
-      .discover-card-meta,
-      .discover-card-body p,
-      .editor-note,
-      .history-linked-job-meta,
-      .library-post-meta,
-      .vf-editor-chat-empty p,
-      .vf-editor-chat-disabled p {
-        color: rgba(201, 215, 188, 0.78);
-      }
-
-      .difficulty-pill,
-      .difficulty-pill[data-difficulty="hard"],
-      .difficulty-pill[data-difficulty="expert"] {
-        border-color: rgba(248, 210, 74, 0.42);
-        background: rgba(248, 210, 74, 0.12);
-        color: #ffe878;
-      }
-
-      .copy-inline[data-state="done"] {
-        border-color: rgba(215, 255, 70, 0.5);
-        background: rgba(215, 255, 70, 0.12);
-        color: var(--ink);
-      }
-
-      .editor-floating-nav {
-        border-color: rgba(215, 255, 70, 0.24);
-        background: rgba(5, 10, 5, 0.9);
-        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
-        backdrop-filter: blur(18px);
-      }
-
-      .editor-back-link {
-        border-color: rgba(215, 255, 70, 0.42);
-        background: #d7ff46;
-        color: #071006;
-      }
-
-      .editor-nav-title,
-      .vf-editor-chat-brainstorm-title,
-      .vf-editor-chat-header-title,
-      .vf-editor-chat-header-subtitle,
-      .vf-editor-chat-thread-chip-title,
-      .vf-editor-chat-http-url,
-      .editor-media-modal-title {
-        color: var(--ink);
-      }
-
-      .editor-chat-panel,
-      .vf-editor-chat-thread,
-      .vf-editor-chat-history-pane,
-      .vf-editor-chat-header,
-      .vf-editor-chat-empty,
-      .vf-editor-chat-disabled,
-      .vf-editor-chat-bubble,
-      .vf-editor-chat-thread-chip,
-      .vf-editor-chat-thread-menu {
-        border-color: rgba(215, 255, 70, 0.16);
-        background:
-          linear-gradient(180deg, rgba(12, 20, 10, 0.96), rgba(4, 8, 4, 0.96)) !important;
-        color: var(--ink);
-      }
-
-      .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble {
-        border-color: rgba(215, 255, 70, 0.18);
-        background: rgba(255, 249, 215, 0.08) !important;
-      }
-
-      .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
-        background: rgba(215, 255, 70, 0.14) !important;
-      }
-
-      .vf-editor-chat-composer,
-      .vf-editor-chat-input-shell {
-        border-color: rgba(215, 255, 70, 0.2);
-        background: rgba(0, 0, 0, 0.32);
-      }
-
-      .history-card,
-      .history-subgroup,
-      .history-linked-job,
-      .library-post,
-      .help-details,
-      .settings-pane,
-      .developer-panel {
-        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
-      }
-
-      .history-card-path,
-      .history-linked-job-title,
-      .history-card-time,
-      .library-content-box,
-      .calendar-ribbon-title,
-      .calendar-post-title {
-        color: var(--ink);
-      }
-
-      .library-toolbar,
-      .calendar-toolbar,
-      .history-options-popover {
-        border-color: rgba(215, 255, 70, 0.18);
-        background: rgba(6, 11, 6, 0.94);
-      }
-
-      .library-post[data-selected="true"] {
-        border-color: rgba(215, 255, 70, 0.48);
-        box-shadow: 0 0 0 1px rgba(215, 255, 70, 0.16), 0 18px 52px rgba(0, 0, 0, 0.42);
-      }
-
-      .discover-media-modal,
-      .custom-inpaint-lightbox-dialog,
-      .logout-dialog-head {
-        border-color: rgba(215, 255, 70, 0.18);
-        background: rgba(8, 14, 8, 0.98);
-      }
-
-      .discover-media-modal-head h2,
-      .custom-inpaint-lightbox-title,
-      .logout-dialog-head h3 {
-        color: var(--ink);
-      }
-
-      .discover-media-modal-stage,
-      .custom-inpaint-lightbox-stage,
-      .editor-media-modal-body {
-        background: #020402;
-      }
-
-      .auth-frame {
-        overflow: visible;
-      }
-
-      .auth-layout {
-        align-items: stretch;
-        overflow: auto;
-        padding-bottom: 22px;
-      }
-
-      .auth-shell-panel {
-        position: relative;
-        overflow: hidden;
-        border-color: rgba(215, 255, 70, 0.22) !important;
-        background:
-          radial-gradient(circle at 12% 8%, rgba(215, 255, 70, 0.12), transparent 30%),
-          linear-gradient(135deg, rgba(9, 15, 8, 0.96), rgba(3, 6, 3, 0.94)) !important;
-        color: var(--ink);
-        box-shadow: 0 34px 100px rgba(0, 0, 0, 0.5);
-      }
-
-      .auth-shell-inner {
-        min-height: min(680px, calc(100dvh - 148px));
-      }
-
-      .auth-shell-copy {
-        border-right-color: rgba(215, 255, 70, 0.18) !important;
-        background:
-          linear-gradient(180deg, rgba(16, 27, 12, 0.82), rgba(4, 8, 4, 0.68)),
-          repeating-linear-gradient(0deg, rgba(215, 255, 70, 0.06) 0 1px, transparent 1px 44px) !important;
-      }
-
-      .auth-copy-stack .label,
-      .auth-plan-kicker,
-      .mode-switch a {
-        color: #e8ff63 !important;
-      }
-
-      .auth-plan-card,
-      .auth-shell,
-      .form-panel {
-        border-color: rgba(215, 255, 70, 0.18) !important;
-        background: rgba(0, 0, 0, 0.26) !important;
-        color: var(--ink);
-      }
-
-      .auth-plan-card.featured {
-        border-color: rgba(248, 210, 74, 0.42) !important;
-        background:
-          linear-gradient(180deg, rgba(248, 210, 74, 0.12), rgba(0, 0, 0, 0.24)) !important;
-      }
-
-      .auth-plan-card p,
-      .auth-shell p,
-      .form-panel p {
-        color: rgba(201, 215, 188, 0.78) !important;
-      }
-
-      .auth-plan-name,
-      .auth-plan-price strong,
-      .auth-plan-features span,
-      .form-panel label {
-        color: var(--ink) !important;
-      }
-
-      .form-panel input,
-      .auth-shell input {
-        border-color: rgba(215, 255, 70, 0.22) !important;
-        background: rgba(0, 0, 0, 0.32) !important;
-        color: var(--ink) !important;
-      }
-
-      /* Dark surface normalization for legacy pages that still ship light local CSS. */
-      .app-shell h1,
-      .app-shell h2,
-      .app-shell .history-title,
-      .app-shell .settings-sidebar h1,
-      .app-shell .calendar-ribbon-title {
-        font-family: "Bebas Neue", "Arial Narrow", sans-serif !important;
-        font-weight: 400 !important;
-        letter-spacing: 0.01em !important;
-        text-transform: uppercase !important;
-      }
-
-      .auth-login-frame .auth-shell-inner {
-        grid-template-columns: minmax(360px, 0.66fr) minmax(0, 1fr) !important;
-        align-items: stretch;
-      }
-
-      .auth-login-frame .auth-shell-form {
-        order: 1;
-        align-items: stretch;
-        justify-content: stretch;
-        padding: clamp(20px, 3vw, 34px);
-        border: 1px solid rgba(215, 255, 70, 0.2);
-        border-radius: 28px;
-        background:
-          radial-gradient(circle at 16% 12%, rgba(215, 255, 70, 0.12), transparent 34%),
-          rgba(0, 0, 0, 0.26);
-      }
-
-      .auth-login-frame .auth-shell-copy {
-        order: 2;
-        padding: clamp(18px, 2.2vw, 28px);
-        border-right: 0 !important;
-        border-left: 1px solid rgba(215, 255, 70, 0.14);
-      }
-
-      .auth-login-frame .auth-shell {
-        display: grid;
-        width: 100%;
-        align-content: center;
-      }
-
-      .auth-login-frame .auth-plan-grid {
-        max-height: min(54dvh, 520px);
-        overflow: auto;
-        padding-right: 6px;
-      }
-
-      .auth-shell-form .form-panel {
-        padding: clamp(22px, 3vw, 34px);
-        border-radius: 24px;
-      }
-
-      .auth-shell-form .form-panel h2 {
-        font-size: clamp(3rem, 6vw, 5.4rem);
-        line-height: 0.85;
-      }
-
-      .auth-frame .price-panel,
-      .auth-frame .auth-plan-features span,
-      .settings-frame .settings-nav-panel > summary,
-      .settings-frame .flockposter-dialog,
-      .settings-frame .channel-menu,
-      .settings-frame .channel-menu-panel {
-        border-color: rgba(215, 255, 70, 0.18) !important;
-        background:
-          linear-gradient(180deg, rgba(13, 22, 11, 0.94), rgba(6, 11, 6, 0.94)) !important;
-        color: var(--ink) !important;
-      }
-
-      .auth-login-frame .auth-shell-panel {
-        place-items: stretch;
-        overflow: auto;
-      }
-
-      .auth-login-frame .auth-shell-inner {
-        min-height: 0;
-      }
-
-      .settings-shell,
-      .calendar-shell,
-      .calendar-rail,
-      .calendar-stage,
-      .library-toolbar,
-      .history-toolbar,
-      .custom-inpaint-workbench,
-      .vf-editor-chat-shell {
-        color: var(--ink) !important;
-      }
-
-      .settings-shell,
-      .calendar-shell {
-        border-color: rgba(215, 255, 70, 0.2) !important;
-        background:
-          linear-gradient(135deg, rgba(10, 18, 9, 0.94), rgba(3, 6, 3, 0.96)),
-          radial-gradient(circle at 8% 8%, rgba(215, 255, 70, 0.12), transparent 32%) !important;
-        box-shadow: 0 32px 90px rgba(0, 0, 0, 0.52) !important;
-      }
-
-      .settings-sidebar,
-      .settings-content,
-      .calendar-rail,
-      .calendar-stage {
-        border-color: rgba(215, 255, 70, 0.16) !important;
-        background:
-          linear-gradient(180deg, rgba(14, 24, 11, 0.9), rgba(3, 7, 3, 0.92)),
-          repeating-linear-gradient(0deg, rgba(215, 255, 70, 0.045) 0 1px, transparent 1px 42px) !important;
-      }
-
-      .profile-card,
-      .files-card,
-      .settings-panel,
-      .key-card,
-      .attachment-card,
-      .price-panel,
-      .developer-panel,
-      .wallet-panel,
-      .wallet-history,
-      .wallet-history-item,
-      .wallet-history-empty,
-      .file-card,
-      .developer-card,
-      .channel-card,
-      .provider-key-card,
-      .email-avatar-preview,
-      .files-dropzone,
-      .file-popconfirm,
-      .settings-flash,
-      .agency-list-card,
-      .agency-account-card,
-      .library-post,
-      .library-options-panel,
-      .library-row-menu,
-      .library-content-box,
-      .library-empty,
-      .history-card,
-      .history-group,
-      .history-subgroup,
-      .history-linked-job,
-      .history-options-popover,
-      .history-output-preview,
-      .history-preview-empty,
-      .history-summary-preview,
-      .history-summary-preview-more,
-      .history-mobile-details summary::after,
-      .calendar-channel-card,
-      .calendar-empty-card,
-      .calendar-board,
-      .calendar-weekdays,
-      .calendar-grid,
-      .calendar-cell,
-      .calendar-day-post,
-      .calendar-day-hero,
-      .calendar-post-pill,
-      .calendar-view-tabs,
-      .calendar-nav,
-      .custom-inpaint-upload,
-      .custom-inpaint-history,
-      .custom-inpaint-history-item,
-      .custom-inpaint-history-empty,
-      .custom-inpaint-history-popconfirm,
-      .custom-inpaint-settings,
-      .custom-inpaint-output,
-      .editor-inpaint-toolbar,
-      .editor-inpaint-color-row,
-      .editor-inpaint-global,
-      .editor-inpaint-prompt-field,
-      .editor-inpaint-attachment-chip,
-      .vf-editor-chat-footer,
-      .vf-editor-chat-composer,
-      .vf-editor-chat-input-shell,
-      .vf-editor-chat-empty-prompts button {
-        border-color: rgba(215, 255, 70, 0.18) !important;
-        background:
-          linear-gradient(180deg, rgba(16, 27, 12, 0.88), rgba(4, 8, 4, 0.9)),
-          radial-gradient(circle at 0% 0%, rgba(215, 255, 70, 0.08), transparent 34%) !important;
-        color: var(--ink) !important;
-        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34) !important;
-      }
-
-      .wallet-hero {
-        border-color: rgba(248, 210, 74, 0.32) !important;
-        background:
-          linear-gradient(135deg, rgba(248, 210, 74, 0.16), rgba(215, 255, 70, 0.08)),
-          rgba(0, 0, 0, 0.26) !important;
-      }
-
-      .settings-nav-item,
-      .library-options summary,
-      .library-row-menu button,
-      .library-row-menu a,
-      .history-filter-button,
-      .history-toolbar-back,
-      .calendar-tab,
-      .calendar-nav button,
-      .calendar-ribbon-refresh,
-      .calendar-refresh-button,
-      .vf-editor-chat-empty-prompts button {
-        border-color: rgba(215, 255, 70, 0.24) !important;
-        background: rgba(255, 249, 215, 0.07) !important;
-        color: rgba(255, 249, 215, 0.86) !important;
-        box-shadow: none !important;
-      }
-
-      .settings-nav-item.is-active,
-      .calendar-tab.is-active,
-      .calendar-day-chip.is-selected,
-      .history-filter-button.is-primary {
-        border-color: rgba(215, 255, 70, 0.66) !important;
-        background: linear-gradient(180deg, #e8ff63, #bddf26) !important;
-        color: #071006 !important;
-        box-shadow: 0 12px 28px rgba(215, 255, 70, 0.18) !important;
-      }
-
-      .settings-nav-item-danger {
-        color: #ffb5a7 !important;
-      }
-
-      .wallet-balance-label,
-      .history-toolbar .label-group label,
-      .library-options-panel label,
-      .library-selection-count,
-      .calendar-post-meta,
-      .calendar-cell-more,
-      .editor-inpaint-label,
-      .custom-inpaint-status,
-      .vf-editor-chat-history-kicker,
-      .vf-editor-chat-kicker {
-        color: rgba(215, 255, 70, 0.72) !important;
-      }
-
-      .wallet-balance-amount,
-      .wallet-history-item-title,
-      .files-dropzone-title,
-      .file-card-copy h3,
-      .developer-card-titleline h3,
-      .history-group-head h2,
-      .history-subgroup-head h3,
-      .history-path,
-      .history-linked-job-title,
-      .library-post-title,
-      .library-content-details summary,
-      .calendar-channel-name,
-      .calendar-day-post-top,
-      .calendar-empty-title,
-      .custom-inpaint-history-title,
-      .vf-editor-chat-input {
-        color: var(--ink) !important;
-      }
-
-      .wallet-history-item-meta,
-      .files-dropzone-copy p,
-      .file-popconfirm p,
-      .profile-id-inline,
-      .history-toolbar-copy .tiny,
-      .history-card-time,
-      .history-mobile-details summary,
-      .history-linked-job-meta,
-      .library-post-meta span,
-      .custom-inpaint-history-subtitle,
-      .vf-editor-chat-input::placeholder {
-        color: rgba(201, 215, 188, 0.72) !important;
-      }
-
-      .wallet-history-item-amount.is-credit,
-      .history-chip.is-success,
-      .calendar-status.sent,
-      .calendar-post-pill.sent,
-      .custom-inpaint-status[data-tone="success"] {
-        color: #abff9b !important;
-        border-color: rgba(171, 255, 155, 0.28) !important;
-      }
-
-      .wallet-history-item-amount.is-debit,
-      .history-chip.is-error,
-      .calendar-status.error,
-      .calendar-post-pill.error,
-      .custom-inpaint-status[data-tone="error"] {
-        color: #ff9f91 !important;
-        border-color: rgba(255, 159, 145, 0.28) !important;
-      }
-
-      .history-chip,
-      .history-method,
-      .library-post-meta span,
-      .calendar-status,
-      .calendar-today-badge {
-        border-color: rgba(215, 255, 70, 0.18) !important;
-        background: rgba(215, 255, 70, 0.08) !important;
-        color: rgba(255, 249, 215, 0.86) !important;
-      }
-
-      .calendar-board {
-        overflow: hidden;
-      }
-
-      .calendar-weekdays,
-      .calendar-grid {
-        border-color: rgba(215, 255, 70, 0.16) !important;
-      }
-
-      .calendar-cell {
-        box-shadow: inset 1px 0 0 rgba(215, 255, 70, 0.09), inset 0 1px 0 rgba(215, 255, 70, 0.09) !important;
-      }
-
-      .calendar-cell.is-outside {
-        opacity: 0.56;
-      }
-
-      .calendar-day-chip {
-        color: rgba(255, 249, 215, 0.92) !important;
-      }
-
-      .calendar-day-chip.is-muted {
-        color: rgba(201, 215, 188, 0.42) !important;
-      }
-
-      .calendar-channel-card.is-selected {
-        border-color: rgba(248, 210, 74, 0.42) !important;
-        background:
-          linear-gradient(180deg, rgba(248, 210, 74, 0.12), rgba(4, 8, 4, 0.88)) !important;
-      }
-
-      .calendar-avatar,
-      .calendar-platform-avatar,
-      .file-card-art,
-      .history-summary-preview-fallback {
-        border-color: rgba(215, 255, 70, 0.18) !important;
-        background: rgba(255, 249, 215, 0.08) !important;
-        color: var(--ink) !important;
-      }
-
-      .custom-inpaint-stage,
-      .editor-inpaint-canvas-wrap {
-        background:
-          radial-gradient(circle at center, rgba(215, 255, 70, 0.05), transparent 44%),
-          rgba(0, 0, 0, 0.32) !important;
-      }
-
-      .custom-inpaint-upload {
-        border-style: dashed !important;
-      }
-
-      .editor-inpaint-prompt,
-      .editor-inpaint-provider select,
-      .vf-editor-chat-input,
-      .settings-frame input,
-      .settings-frame textarea,
-      .settings-frame select,
-      .calendar-frame input,
-      .calendar-frame select,
-      .history-toolbar input,
-      .history-toolbar select,
-      .library-search,
-      .library-options input,
-      .library-options select {
-        border-color: rgba(215, 255, 70, 0.24) !important;
-        background: rgba(0, 0, 0, 0.38) !important;
-        color: var(--ink) !important;
-      }
-
-      .editor-inpaint-color-picker {
-        background: transparent !important;
-        box-shadow: 0 0 0 1px rgba(215, 255, 70, 0.2) !important;
-      }
-
-      .vf-editor-chat-footer {
-        border-top: 1px solid rgba(215, 255, 70, 0.18) !important;
-      }
-
-      .frame :is(
-        .calendar-weekday,
-        .calendar-day-view,
-        .calendar-empty,
-        .calendar-ribbon,
-        .calendar-ribbon-channel,
-        .history-http-action,
-        .history-output-previews,
-        .vf-editor-chat-http-card,
-        .vf-editor-chat-http-modal,
-        .vf-editor-chat-http-modal-header,
-        .vf-editor-chat-http-body,
-        .vf-editor-chat-http-pre,
-        .custom-inpaint-panel-head,
-        .custom-inpaint-tool-head,
-        .editor-inpaint-color-row[data-active="true"]
-      ) {
-        border-color: rgba(215, 255, 70, 0.18) !important;
-        background: rgba(6, 11, 6, 0.9) !important;
-        color: var(--ink) !important;
-      }
-
-      .frame :is(
-        .calendar-nav-title,
-        .calendar-day-date,
-        .calendar-post-title,
-        .vf-editor-chat-http-url,
-        .vf-editor-chat-http-modal-url,
-        .vf-editor-chat-http-status,
-        .vf-editor-chat-http-expand
-      ) {
-        color: var(--ink) !important;
-      }
-
-      .frame :is(
-        .calendar-channel-handle-inline,
-        .calendar-ribbon-channel-handle,
-        .calendar-day-post-summary,
-        .custom-inpaint-history-empty,
-        .vf-editor-chat-http-label,
-        .vf-editor-chat-http-meta
-      ) {
-        color: rgba(201, 215, 188, 0.78) !important;
-      }
-
-      .vf-editor-chat-empty-prompts div,
-      .vf-editor-chat-attachment,
-      .vf-editor-chat-composer-attachment-item,
-      .vf-editor-chat-http-pill {
-        border-color: rgba(215, 255, 70, 0.18) !important;
-        background: rgba(0, 0, 0, 0.34) !important;
-        color: var(--ink) !important;
-      }
-
-      .vf-editor-chat-attach-button,
-      .vf-editor-chat-send-button,
-      .editor-inpaint-attach-button,
-      .custom-inpaint-history-icon,
-      .custom-inpaint-history-check,
-      .editor-inpaint-color-remove {
-        border-color: rgba(215, 255, 70, 0.22) !important;
-        background: rgba(255, 249, 215, 0.08) !important;
-        color: var(--ink) !important;
-        box-shadow: none !important;
-      }
-
-      @media (max-width: 900px) {
-        .auth-login-frame .auth-shell-inner {
-          grid-template-columns: 1fr !important;
-        }
-
-        .auth-login-frame .auth-shell-copy {
-          border-left: 0 !important;
-          border-top: 1px solid rgba(215, 255, 70, 0.14);
-        }
-      }
-
-      .frame h1,
-      .frame h2,
-      .frame h3,
-      .frame summary,
-      .frame [class$="-title"],
-      .frame [class*="-title "],
-      .frame [class*="-title"],
-      .frame [class*="-head"] h1,
-      .frame [class*="-head"] h2,
-      .frame [class*="-head"] h3,
-      .editor-workbench h1,
-      .editor-workbench h2,
-      .editor-workbench h3,
-      .editor-workbench [class*="-title"],
-      .vf-editor-chat-shell h1,
-      .vf-editor-chat-shell h2,
-      .vf-editor-chat-shell h3 {
-        color: var(--ink) !important;
-      }
-
-      .frame p,
-      .frame [class*="-meta"],
-      .frame [class*="-note"],
-      .frame [class*="-desc"],
-      .frame [class*="-subtitle"],
-      .frame [class*="-empty"],
-      .editor-workbench p,
-      .editor-workbench [class*="-meta"],
-      .editor-workbench [class*="-note"],
-      .editor-workbench [class*="-desc"],
-      .editor-workbench [class*="-subtitle"],
-      .vf-editor-chat-shell p,
-      .vf-editor-chat-shell [class*="-preview"],
-      .vf-editor-chat-shell [class*="-tracers"] {
-        color: rgba(201, 215, 188, 0.78) !important;
-      }
-
-      .frame a:not(.button):not(.cta-button):not(.link-button),
-      .editor-workbench a:not(.button):not(.cta-button):not(.link-button),
-      .vf-editor-chat-shell a:not(.button):not(.cta-button):not(.link-button) {
-        color: #e8ff63;
-      }
-
-      @media (max-width: 1024px) {
-        .hero-grid,
-        .split-grid,
-        .page-hero {
-          grid-template-columns: 1fr;
-        }
-      }
-
-      @media (max-width: 1024px) {
-        html,
-        body {
-          height: auto;
-          min-height: 100%;
-          overflow: auto;
-          overflow-x: hidden;
-        }
-
-        .app-shell,
-        .app-shell.is-wide,
-        .app-shell.is-narrow {
-          width: min(100vw - 14px, 1980px);
-          height: auto;
-          min-height: 100svh;
-          padding-top: 8px;
-          padding-bottom: 18px;
-        }
-
-        .page-stack,
-        .frame {
-          height: auto;
-          min-height: 0;
-          overflow: visible;
-        }
-
-        .topbar {
-          min-height: auto;
-          padding: 8px;
-          border-radius: 24px;
-          align-items: center;
-          flex-wrap: nowrap;
-          gap: 8px;
-        }
-
-        .brand-lockup {
-          flex: 1 1 auto;
-          width: auto;
-          gap: 7px;
-        }
-
-        .brand-copy {
-          display: flex;
-          flex: 0 0 auto;
-          min-width: 0;
-          gap: 0;
-          flex-wrap: nowrap;
-        }
-
-        .brand-title-static {
-          font-size: 1.24rem;
-          line-height: 1;
-        }
-
-        .brand-account-meta {
-          display: none;
-        }
-
-        .brand-title-mobile-hidden {
-          display: none;
-        }
-
-        .topbar-actions {
-          flex: 0 0 auto;
-          width: auto;
-          justify-content: flex-end;
-          overflow: visible;
-          padding-bottom: 0;
-          scrollbar-width: none;
-        }
-
-        .topbar-actions::-webkit-scrollbar {
-          display: none;
-        }
-
-        .brand-logo-image {
-          height: 32px;
-          max-width: 38px;
-        }
-
-        .primary-nav {
-          min-width: 0;
-          width: auto;
-          max-width: none;
-          flex-wrap: nowrap;
-          justify-content: flex-end;
-          gap: 0;
-          padding: 0;
-          border: 0;
-          border-radius: 0;
-          background: transparent;
-          box-shadow: none;
-          overflow: visible;
-        }
-
-        .primary-nav > .nav-link {
-          display: none;
-        }
-
-        .nav-link {
-          flex: 0 0 auto;
-          min-height: 44px;
-          gap: 6px;
-          padding: 0 12px;
-          border-radius: 14px;
-          font-size: 0.86rem;
-        }
-
-        .nav-mobile-extra {
-          display: none;
-        }
-
-        .nav-menu {
-          display: block;
-        }
-
-        .nav-menu-trigger {
-          min-width: 44px;
-          width: 44px;
-          height: 44px;
-          padding: 0;
-          border: 1px solid rgba(191, 164, 109, 0.32);
-          border-radius: 15px;
-          background: rgba(255, 252, 247, 0.96);
-          color: var(--ink);
-          box-shadow: 0 8px 18px rgba(138, 102, 32, 0.1);
-        }
-
-        .nav-menu-desktop-icon {
-          display: none;
-        }
-
-        .nav-menu-mobile-icon {
-          display: inline-flex;
-        }
-
-        .nav-menu-panel {
-          top: calc(100% + 10px);
-          right: 0;
-          width: min(82vw, 260px);
-          min-width: 190px;
-          max-height: calc(100svh - 92px);
-          overflow: auto;
-          padding: 8px;
-          border-radius: 16px;
-          box-shadow: 0 20px 46px rgba(81, 58, 20, 0.18);
-        }
-
-        .nav-menu-item {
-          min-height: 42px;
-          padding: 0 12px;
-          border-radius: 12px;
-          font-size: 0.88rem;
-        }
-
-        .nav-menu-item.nav-menu-mobile-only {
-          display: flex;
-        }
-
-        .nav-link > span:not(.nav-icon) {
-          display: none;
-        }
-
-        .nav-link > .nav-menu-label {
-          display: none;
-        }
-
-        .nav-icon,
-        .nav-icon svg {
-          width: 18px;
-          height: 18px;
-        }
-
-        @media (max-width: 560px) {
-          .primary-nav > .nav-link {
-            display: none;
-          }
-
-          .primary-nav > .nav-link > span:not(.nav-icon) {
-            display: none;
-          }
-        }
-
-        @media (max-width: 374px) {
-          .topbar {
-            gap: 6px;
-          }
-
-          .brand-logo-image {
-            height: 30px;
-            max-width: 34px;
-          }
-
-          .brand-lockup {
-            gap: 5px;
-          }
-
-          .brand-title-static {
-            font-size: 1.08rem;
-          }
-
-          .primary-nav {
-            gap: 3px;
-          }
-
-          .nav-link {
-            gap: 3px;
-            padding: 0 6px;
-            font-size: 0.72rem;
-          }
-        }
-
-        .field-grid.cols-2,
-        .field-grid.cols-3 {
-          grid-template-columns: 1fr;
-        }
-
-        h1 {
-          font-size: clamp(2.2rem, 14vw, 3.2rem);
-        }
-      }
-    </style>
-    <script src="/assets/sentry-config.js"></script>
-  </head>
-  <body>
-    <main class="app-shell${input.mainClass ? ` ${escapeHtml(input.mainClass)}` : ""}">
-      <div class="page-stack${input.shellClass ? ` ${escapeHtml(input.shellClass)}` : ""}">
-        ${input.body}
-      </div>
-    </main>
-    <script>
-      (() => {
-        const logoutDialog = document.querySelector("[data-logout-dialog]");
-        const logoutForm = document.querySelector("[data-logout-form]");
-        const openLogoutButtons = document.querySelectorAll("[data-open-logout-dialog]");
-        const closeLogoutButtons = document.querySelectorAll("[data-close-logout-dialog]");
-
-        function clearLogoutAccountCache() {
-          if (!(logoutForm instanceof HTMLFormElement)) {
-            return;
-          }
-          const account = String(new FormData(logoutForm).get("account") || "").trim();
-          if (!account) {
-            return;
-          }
-          try {
-            const registryIndexKey = "vidfarm:agency:accounts:index";
-            const rawIds = window.localStorage.getItem(registryIndexKey);
-            const ids = rawIds ? JSON.parse(rawIds) : [];
-            if (Array.isArray(ids)) {
-              window.localStorage.setItem(registryIndexKey, JSON.stringify(ids.filter((value) => value !== account)));
-            }
-            window.localStorage.removeItem("vidfarm:agency:account_" + account);
-            window.localStorage.removeItem("vidfarm:flockposter-cache:v1_" + account);
-            window.localStorage.removeItem("vidfarm:discover-bookmarks:v1_" + account);
-          } catch {
-            // Ignore storage failures.
-          }
-        }
-
-        if (logoutDialog instanceof HTMLDialogElement && openLogoutButtons.length) {
-          openLogoutButtons.forEach((button) => {
-            button.addEventListener("click", () => {
-              if (!logoutDialog.open) {
-                logoutDialog.showModal();
-              }
-            });
-          });
-          closeLogoutButtons.forEach((button) => {
-            button.addEventListener("click", () => logoutDialog.close());
-          });
-          logoutDialog.addEventListener("click", (event) => {
-            const rect = logoutDialog.getBoundingClientRect();
-            const isBackdropClick =
-              event.clientX < rect.left ||
-              event.clientX > rect.right ||
-              event.clientY < rect.top ||
-              event.clientY > rect.bottom;
-            if (isBackdropClick) {
-              logoutDialog.close();
-            }
-          });
-        } else if (openLogoutButtons.length && logoutForm instanceof HTMLFormElement) {
-          openLogoutButtons.forEach((button) => {
-            button.addEventListener("click", () => {
-              if (window.confirm("Log out of this browser and clear local workspace access?")) {
-                logoutForm.requestSubmit();
-              }
-            });
-          });
-        }
-
-        if (logoutForm instanceof HTMLFormElement) {
-          logoutForm.addEventListener("submit", clearLogoutAccountCache);
-        }
-      })();
-    </script>
-    ${input.runtimeBoot ? `<div id="page-runtime-root" hidden></div>
-    <script id="page-runtime-boot" type="application/json">${escapeJsonForHtml(input.runtimeBoot)}</script>
-    <script type="module" src="/assets/page-runtime-client-app.js"></script>` : ""}
-  </body>
-</html>`;
-}
-//# sourceMappingURL=page-shell.js.map