@mevdragon/vidfarm-devcli 0.2.11 → 0.2.13

package/dist/src/page-shell.js

@@ -22,6 +22,9 @@ export function withAccountQuery(href, accountId) {
     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) {
@@ -48,20 +51,60 @@ function renderNavIcon(kind) {
     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>`;
     }
-    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 === "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: "Discover", icon: renderNavIcon("discover") },
+            { 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: "Discover", icon: renderNavIcon("discover") },
+            { 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) => `
@@ -70,7 +113,40 @@ export function renderPrimaryNav(input) {
           <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) {
@@ -100,24 +176,24 @@ export function renderPageShell(input) {
     <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=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <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: light;
-        --bg: #f8f4eb;
-        --paper: rgba(255, 252, 247, 0.88);
-        --paper-strong: rgba(255, 252, 247, 0.96);
+        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(250, 245, 234, 0.9);
-        --ink: #2f3748;
-        --muted: #74829c;
-        --line: rgba(209, 219, 233, 0.9);
-        --line-strong: rgba(191, 164, 109, 0.42);
-        --accent: #dec081;
-        --accent-deep: #243041;
-        --accent-soft: rgba(222, 192, 129, 0.18);
-        --shadow: 0 24px 80px rgba(15, 23, 42, 0.08);
-        --shadow-soft: 0 16px 36px rgba(148, 109, 42, 0.08);
+        --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;
@@ -141,10 +217,10 @@ export function renderPageShell(input) {
         color: var(--ink);
         font-family: "Manrope", sans-serif;
         background:
-          radial-gradient(circle at 12% 18%, rgba(222, 192, 129, 0.28), transparent 24%),
-          radial-gradient(circle at 84% 12%, rgba(123, 92, 29, 0.12), transparent 22%),
-          linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0)),
-          linear-gradient(145deg, #f8f4eb 0%, #f1e7d3 52%, #e9dbba 100%);
+          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;
       }
 
@@ -154,10 +230,26 @@ export function renderPageShell(input) {
         inset: 0;
         pointer-events: none;
         background-image:
-          linear-gradient(rgba(96, 74, 36, 0.035) 1px, transparent 1px),
-          linear-gradient(90deg, rgba(96, 74, 36, 0.035) 1px, transparent 1px);
+          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.38), transparent 86%);
+        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 {
@@ -380,6 +472,95 @@ export function renderPageShell(input) {
         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;
@@ -506,6 +687,55 @@ export function renderPageShell(input) {
         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;
@@ -582,6 +812,25 @@ export function renderPageShell(input) {
         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 {
@@ -764,7 +1013,1073 @@ export function renderPageShell(input) {
 
       ${input.style ?? ""}
 
-      @media (max-width: 767px) {
+      /* 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 {
@@ -772,7 +2087,7 @@ export function renderPageShell(input) {
         }
       }
 
-      @media (max-width: 767px) {
+      @media (max-width: 1024px) {
         html,
         body {
           height: auto;
@@ -808,7 +2123,7 @@ export function renderPageShell(input) {
         }
 
         .brand-lockup {
-          flex: 0 0 auto;
+          flex: 1 1 auto;
           width: auto;
           gap: 7px;
         }
@@ -835,7 +2150,7 @@ export function renderPageShell(input) {
         }
 
         .topbar-actions {
-          flex: 1 1 auto;
+          flex: 0 0 auto;
           width: auto;
           justify-content: flex-end;
           overflow: visible;
@@ -855,36 +2170,104 @@ export function renderPageShell(input) {
         .primary-nav {
           min-width: 0;
           width: auto;
-          max-width: 100%;
+          max-width: none;
           flex-wrap: nowrap;
           justify-content: flex-end;
-          gap: 2px;
-          padding: 2px;
-          border-radius: 18px;
-          overflow: hidden;
+          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 1 auto;
-          min-height: 34px;
-          gap: 4px;
-          padding: 0 6px;
+          flex: 0 0 auto;
+          min-height: 44px;
+          gap: 6px;
+          padding: 0 12px;
           border-radius: 14px;
-          font-size: 0.68rem;
+          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: inline;
-          min-width: 0;
-          overflow: visible;
-          text-overflow: clip;
-          white-space: nowrap;
+          display: none;
+        }
+
+        .nav-link > .nav-menu-label {
+          display: none;
         }
 
         .nav-icon,
         .nav-icon svg {
-          width: 12px;
-          height: 12px;
+          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) {
@@ -906,13 +2289,13 @@ export function renderPageShell(input) {
           }
 
           .primary-nav {
-            gap: 1px;
+            gap: 3px;
           }
 
           .nav-link {
             gap: 3px;
-            padding: 0 4px;
-            font-size: 0.62rem;
+            padding: 0 6px;
+            font-size: 0.72rem;
           }
         }
 
@@ -926,6 +2309,7 @@ export function renderPageShell(input) {
         }
       }
     </style>
+    <script src="/assets/sentry-config.js"></script>
   </head>
   <body>
     <main class="app-shell${input.mainClass ? ` ${escapeHtml(input.mainClass)}` : ""}">
@@ -933,9 +2317,77 @@ export function renderPageShell(input) {
         ${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