@mevdragon/vidfarm-devcli 0.16.0 → 0.17.0

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

@@ -0,0 +1,353 @@
+// /reskin/settings — the flagship reskin. Reference implementation for the
+// migration: shows how to port a real vidfarm page (the 4-tab Settings screen)
+// into the farmville design system using ONLY shared rk-* primitives + a small
+// page-scoped CSS block + a self-contained module script.
+//
+// Renders with representative SAMPLE data so it can be viewed without auth. All
+// forms post to the REAL /settings/* endpoints, so the shape stays honest.
+// Faithfully mirrors src/account-pages-legacy.ts → renderSettingsPage:
+//   Profile (display name, about, attachments) · Wallet (balance, ledger) ·
+//   Channels (email + FlockPoster) · Developer (vidfarm key, AI provider keys).
+import { reskinDocument, rkEscape } from "./document.js";
+const SAMPLE = {
+    name: "Dylan Vane",
+    email: "dylan@studio.co",
+    accountId: "acct_8f2a10",
+    isPaidPlan: true,
+    about: "Vidfarm makes short-form ads for DTC brands. Punchy hooks, UGC energy, captions that pop. Audience: founders & marketers who want to ship a week of content in an afternoon.",
+    vidfarmApiKey: "vf_live_9c41f0b7a2e84d6f8b3c9a1e",
+    wallet: { balanceUsd: 12.4, totalFundsAddedUsd: 40, totalChargeUsd: 27.6, updatedAt: "Jul 7, 2026, 4:12 PM" },
+    walletEvents: [
+        { title: "Wallet top-up", sub: "Visa ···· 4242", amountUsd: 20, when: "Jul 6", kind: "credit" },
+        { title: "Timeline render usage", sub: "HyperFrames Lambda · job_a91f", amountUsd: -1.8, when: "Jul 6", kind: "debit" },
+        { title: "Clip scan usage", sub: "clip_scan_lambda · 14 clips", amountUsd: -0.42, when: "Jul 5", kind: "debit" },
+        { title: "Timeline render usage", sub: "HyperFrames Lambda · job_77c2", amountUsd: -2.1, when: "Jul 4", kind: "debit" },
+        { title: "Wallet top-up", sub: "Visa ···· 4242", amountUsd: 20, when: "Jul 1", kind: "credit" }
+    ],
+    attachments: [
+        { fileName: "brand-guidelines.pdf", kind: "PDF", size: "2.4 MB", when: "Jul 2" },
+        { fileName: "logo-lockup.png", kind: "PNG", size: "184 KB", when: "Jul 2" },
+        { fileName: "founder-vo-sample.mp3", kind: "Audio", size: "1.1 MB", when: "Jun 28" }
+    ],
+    channels: [
+        { title: "Vidfarm Daily", platform: "TikTok", handle: "@vidfarm", status: "Connected", kind: "flockposter" },
+        { title: "Founder Reels", platform: "Instagram", handle: "@dylan.builds", status: "Connected", kind: "flockposter" },
+        { title: "Newsletter drop", platform: "Email", handle: "dylan@studio.co", status: "Verify sent", kind: "email" }
+    ],
+    providerKeys: [
+        { provider: "OpenAI", label: "gpt-5.4 workspace", secret: "sk-proj-1a2b3c4d5e6f7g8h9i0j", status: "Active", lastUsed: "2h ago" },
+        { provider: "Gemini", label: "clip tagging", secret: "AIzaSyD-9x0q1w2e3r4t5y6u7i8o", status: "Active", lastUsed: "yesterday" }
+    ]
+};
+const EYE = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>`;
+function money(n) {
+    const abs = Math.abs(n).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    return `${n < 0 ? "−" : ""}$${abs}`;
+}
+function tabButton(slug, label, active) {
+    return `<button type="button" class="rk-side-item${active ? " is-active" : ""}" data-rk-tab="${slug}">${label}</button>`;
+}
+export function renderReskinSettings() {
+    const s = SAMPLE;
+    const acct = `<input type="hidden" name="account" value="${rkEscape(s.accountId)}" />`;
+    // ---- Profile ----
+    const attachmentCards = s.attachments.map((a) => {
+        const ext = (a.fileName.split(".").pop() || a.kind).toUpperCase();
+        return `
+    <div class="rk-item">
+      <span class="rk-tile rk-tile-txt rk-tile-sky">${rkEscape(ext)}</span>
+      <div class="rk-item-main">
+        <div class="rk-item-title">${rkEscape(a.fileName)}</div>
+        <div class="rk-item-sub">${rkEscape(a.kind)} · ${rkEscape(a.size)} · added ${rkEscape(a.when)}</div>
+      </div>
+      <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button">Open</button>
+    </div>`;
+    }).join("");
+    const profile = `
+  <div class="rk-card rk-set-panel-card">
+    <div class="rk-card-head">
+      <span class="rk-eyebrow">Profile</span>
+      <h2>Profile, notes &amp; attachments</h2>
+      <p class="rk-muted">The product description powers Swipe mode's auto-recut. Attachments are your reusable brand assets.</p>
+    </div>
+    <form class="rk-stack" method="post" action="/settings/profile">
+      ${acct}
+      <div class="rk-field">
+        <label class="rk-label" for="rk-name">Display name</label>
+        <input class="rk-input" id="rk-name" type="text" name="display_name" value="${rkEscape(s.name)}" />
+      </div>
+      <div class="rk-field">
+        <label class="rk-label" for="rk-about">Product description</label>
+        <textarea class="rk-textarea" id="rk-about" name="about" placeholder="What it is, who it's for, the promise…">${rkEscape(s.about)}</textarea>
+        <span class="rk-hint">Swipe mode reads this to auto-recut templates into ads for you.</span>
+      </div>
+      <div class="rk-field">
+        <label class="rk-label">Brand assets</label>
+        <div class="rk-set-drop">
+          <div><strong>Drop files</strong> or <span class="rk-set-link">browse</span> — logos, fonts, VO, footage.</div>
+        </div>
+        <div class="rk-list rk-set-attach">${attachmentCards}</div>
+      </div>
+      <div class="rk-row">
+        <button class="rk-btn rk-btn-ink" type="submit">Save changes</button>
+        <span class="rk-hint">Signed in as ${rkEscape(s.email)}</span>
+      </div>
+    </form>
+  </div>`;
+    // ---- Wallet ----
+    const historyRows = s.walletEvents.map((e) => `
+    <div class="rk-item">
+      <span class="rk-tile rk-tile-sm rk-tile-txt ${e.kind === "credit" ? "rk-tile-green" : "rk-tile-ink"}">${e.kind === "credit" ? "+" : "−"}</span>
+      <div class="rk-item-main">
+        <div class="rk-item-title">${rkEscape(e.title)}</div>
+        <div class="rk-item-sub">${rkEscape(e.sub)} · ${rkEscape(e.when)}</div>
+      </div>
+      <div class="rk-set-amount ${e.kind === "credit" ? "is-credit" : ""}">${money(e.amountUsd)}</div>
+    </div>`).join("");
+    const wallet = `
+  <div class="rk-stack rk-set-panel">
+    <div class="rk-grid rk-grid-2 rk-set-wallet-top">
+      <div class="rk-card rk-set-balance">
+        <span class="rk-eyebrow">Wallet</span>
+        <div class="rk-stat-num rk-set-balance-num">${money(s.wallet.balanceUsd)}</div>
+        <p class="rk-muted">Available balance · updated ${rkEscape(s.wallet.updatedAt)}</p>
+        <div class="rk-row rk-wrap rk-set-balance-cta">
+          <a class="rk-btn rk-btn-gold" href="#">Top up wallet <span class="rk-arrow">→</span></a>
+          <span class="rk-pill rk-pill-green">Auto-scales to zero</span>
+        </div>
+      </div>
+      <div class="rk-stack">
+        <div class="rk-card rk-card-pad-sm rk-stat">
+          <div class="rk-stat-label">Funds added</div>
+          <div class="rk-stat-num">${money(s.wallet.totalFundsAddedUsd)}</div>
+        </div>
+        <div class="rk-card rk-card-pad-sm rk-stat">
+          <div class="rk-stat-label">Total usage</div>
+          <div class="rk-stat-num">${money(s.wallet.totalChargeUsd)}</div>
+        </div>
+      </div>
+    </div>
+    <div class="rk-card">
+      <div class="rk-card-head">
+        <span class="rk-eyebrow">Ledger</span>
+        <h2>Transparent billing history</h2>
+        <p class="rk-muted">Every render and top-up, itemized. You're only charged for compute — BYO AI keys are never billed.</p>
+      </div>
+      <div class="rk-list">${historyRows}</div>
+      <div class="rk-row rk-set-ledger-foot"><button class="rk-btn rk-btn-ghost rk-btn-sm" type="button">Load more</button></div>
+    </div>
+  </div>`;
+    // ---- Channels ----
+    const channelCards = s.channels.map((c) => {
+        const tint = c.platform === "TikTok" ? "rk-tile-ink" : c.platform === "Instagram" ? "rk-tile-coral" : "rk-tile-sky";
+        const initial = rkEscape(c.platform.charAt(0).toUpperCase());
+        const statusPill = c.status === "Connected" ? "rk-pill-green" : "rk-pill-gold";
+        return `<div class="rk-item">
+      <span class="rk-tile rk-tile-txt ${tint}">${initial}</span>
+      <div class="rk-item-main">
+        <div class="rk-item-title">${rkEscape(c.title)}</div>
+        <div class="rk-item-sub">${rkEscape(c.platform)} · ${rkEscape(c.handle)}</div>
+      </div>
+      <span class="rk-pill ${statusPill}">${rkEscape(c.status)}</span>
+      <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button">Manage</button>
+    </div>`;
+    }).join("");
+    const channels = `
+  <div class="rk-stack rk-set-panel">
+    <div class="rk-card">
+      <div class="rk-spread rk-wrap rk-card-head">
+        <div>
+          <span class="rk-eyebrow">Channels</span>
+          <h2>${s.channels.length} connected channels</h2>
+          <p class="rk-muted">Where approved cuts get published. Connect via FlockPoster or add an email channel.</p>
+        </div>
+        <a class="rk-btn rk-btn-ink" href="#">Connect channel <span class="rk-arrow">→</span></a>
+      </div>
+      <div class="rk-list">${channelCards}</div>
+    </div>
+    <div class="rk-card">
+      <div class="rk-card-head">
+        <span class="rk-eyebrow">FlockPoster</span>
+        <h3>FlockPoster API key</h3>
+        <p class="rk-muted">Paste a FlockPoster key to pull in this workspace's connected social channels.</p>
+      </div>
+      <form class="rk-stack" method="post" action="/settings/channels/flockposter">
+        ${acct}
+        <div class="rk-field">
+          <label class="rk-label" for="rk-fp">API key</label>
+          <div class="rk-input-group">
+            <input class="rk-input" id="rk-fp" type="password" name="api_key" placeholder="fp_live_…" />
+            <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button" data-rk-reveal="rk-fp" aria-label="Show API key">${EYE}</button>
+          </div>
+        </div>
+        <div class="rk-row">
+          <button class="rk-btn rk-btn-gold" type="submit">Save &amp; test connection</button>
+        </div>
+      </form>
+    </div>
+  </div>`;
+    // ---- Developer ----
+    const keyRows = s.providerKeys.map((k, i) => {
+        const id = `rk-pk-${i}`;
+        const tint = k.provider === "OpenAI" ? "rk-tile-green" : k.provider === "Gemini" ? "rk-tile-sky" : "rk-tile-violet";
+        const initial = rkEscape(k.provider.charAt(0).toUpperCase());
+        return `<div class="rk-item">
+      <span class="rk-tile rk-tile-txt ${tint}">${initial}</span>
+      <div class="rk-item-main">
+        <div class="rk-item-title">${rkEscape(k.label)} <span class="rk-pill rk-pill-green">${rkEscape(k.status)}</span></div>
+        <div class="rk-item-sub"><span class="rk-mono" id="${id}" data-rk-secret="${rkEscape(k.secret)}">${"•".repeat(18)}</span> · ${rkEscape(k.provider)} · used ${rkEscape(k.lastUsed)}</div>
+      </div>
+      <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button" data-rk-reveal-text="${id}" aria-label="Show key">${EYE}</button>
+      <form method="post" action="/settings/provider-keys/delete" style="display:inline">
+        ${acct}<input type="hidden" name="id" value="${rkEscape(k.label)}" />
+        <button class="rk-btn rk-btn-danger rk-btn-sm" type="submit">Remove</button>
+      </form>
+    </div>`;
+    }).join("");
+    const developer = `
+  <div class="rk-stack rk-set-panel">
+    <div class="rk-card">
+      <div class="rk-card-head">
+        <span class="rk-eyebrow">Developer</span>
+        <h2>Your vidfarm API key</h2>
+        <p class="rk-muted">Authenticates the <code>vidfarm</code> CLI and REST calls. Keep it secret.</p>
+      </div>
+      <div class="rk-field">
+        <div class="rk-input-group">
+          <input class="rk-input rk-mono" id="rk-vfkey" type="password" value="${rkEscape(s.vidfarmApiKey)}" readonly />
+          <button class="rk-btn rk-btn-ghost rk-btn-sm" type="button" data-rk-reveal="rk-vfkey" aria-label="Show key">${EYE}</button>
+          <button class="rk-btn rk-btn-ink rk-btn-sm" type="button" data-rk-copy="rk-vfkey">Copy</button>
+        </div>
+      </div>
+    </div>
+    <div class="rk-card">
+      <div class="rk-spread rk-wrap rk-card-head">
+        <div>
+          <span class="rk-eyebrow">AI keys</span>
+          <h2>Bring your own model keys</h2>
+          <p class="rk-muted">Stored per workspace. Used for clip tagging, recaption, and Swipe — never billed by vidfarm.</p>
+        </div>
+      </div>
+      <div class="rk-list rk-set-keys">${keyRows}</div>
+      <form class="rk-set-addkey" method="post" action="/settings/provider-keys">
+        ${acct}
+        <div class="rk-grid rk-grid-3 rk-set-addkey-grid">
+          <div class="rk-field">
+            <label class="rk-label" for="rk-prov">Provider</label>
+            <select class="rk-select" id="rk-prov" name="provider">
+              <option>OpenAI</option><option>Gemini</option><option>OpenRouter</option><option>Anthropic</option>
+            </select>
+          </div>
+          <div class="rk-field">
+            <label class="rk-label" for="rk-prov-label">Label</label>
+            <input class="rk-input" id="rk-prov-label" name="label" placeholder="Optional" />
+          </div>
+          <div class="rk-field">
+            <label class="rk-label" for="rk-prov-secret">API key</label>
+            <input class="rk-input" id="rk-prov-secret" type="password" name="secret" placeholder="sk-…" />
+          </div>
+        </div>
+        <button class="rk-btn rk-btn-gold" type="submit">Add AI key</button>
+      </form>
+    </div>
+    <div class="rk-card rk-set-skill">
+      <div class="rk-item-main">
+        <h3>Director skill</h3>
+        <p class="rk-muted">The full REST + CLI playbook for driving vidfarm from an agent.</p>
+      </div>
+      <a class="rk-btn rk-btn-ghost" href="#">Download SKILL.director.md</a>
+    </div>
+  </div>`;
+    const body = `
+<main class="rk-container rk-page">
+  <div class="rk-page-head">
+    <span class="rk-badge">Account settings</span>
+    <h1 class="rk-h1">Settings</h1>
+    <p class="rk-sub">Manage your profile, wallet, publishing channels, and developer access.</p>
+  </div>
+  <div class="rk-shell">
+    <nav class="rk-side" aria-label="Settings sections">
+      ${tabButton("profile", "Profile", true)}
+      ${tabButton("wallet", "Wallet", false)}
+      ${tabButton("channels", "Channels", false)}
+      ${tabButton("developer", "Developer", false)}
+    </nav>
+    <div class="rk-set-panels">
+      <section class="rk-reveal" data-rk-panel="profile">${profile}</section>
+      <section class="rk-reveal" data-rk-panel="wallet" hidden>${wallet}</section>
+      <section class="rk-reveal" data-rk-panel="channels" hidden>${channels}</section>
+      <section class="rk-reveal" data-rk-panel="developer" hidden>${developer}</section>
+    </div>
+  </div>
+</main>`;
+    const pageCss = `
+.rk-tile-txt{font-family:var(--rk-font-display);font-weight:700;font-size:14px;letter-spacing:.01em;line-height:1}
+.rk-tile-txt.rk-tile-sm{font-size:15px}
+.rk-set-panel-card,.rk-set-panel{max-width:760px}
+.rk-set-drop{display:flex;align-items:center;gap:14px;padding:20px;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-2xl);background:var(--rk-n-50);font-size:14px;color:var(--rk-text-muted)}
+.rk-set-link{color:var(--rk-gold-700);font-weight:600;cursor:pointer}
+.rk-set-attach{margin-top:12px}
+.rk-set-wallet-top{align-items:stretch}
+.rk-set-balance{display:grid;gap:10px;align-content:start}
+.rk-set-balance-num{font-size:var(--rk-text-5xl)}
+.rk-set-balance-cta{margin-top:6px}
+.rk-set-amount{font-family:var(--rk-font-display);font-weight:700;font-size:15px;color:var(--rk-n-600);white-space:nowrap}
+.rk-set-amount.is-credit{color:#16a34a}
+.rk-set-ledger-foot{margin-top:16px;justify-content:center}
+.rk-set-keys{margin-bottom:20px}
+.rk-set-addkey{border-top:1px solid var(--rk-border);padding-top:20px;display:grid;gap:16px}
+.rk-set-addkey-grid{gap:14px}
+.rk-set-skill{display:flex;align-items:center;gap:18px}
+@media(max-width:620px){.rk-set-skill{flex-wrap:wrap}}
+`;
+    const script = `
+(function(){
+  var root=document;
+  // tab switching
+  root.querySelectorAll('[data-rk-tab]').forEach(function(btn){
+    btn.addEventListener('click',function(){
+      var tab=btn.getAttribute('data-rk-tab');
+      root.querySelectorAll('[data-rk-tab]').forEach(function(b){b.classList.toggle('is-active',b===btn)});
+      root.querySelectorAll('[data-rk-panel]').forEach(function(p){p.hidden=p.getAttribute('data-rk-panel')!==tab});
+      if(history.replaceState)history.replaceState(null,'','#'+tab);
+    });
+  });
+  var hash=(location.hash||'').replace('#','');
+  if(hash){var t=root.querySelector('[data-rk-tab="'+hash+'"]');if(t)t.click();}
+  // reveal password-style inputs
+  root.querySelectorAll('[data-rk-reveal]').forEach(function(btn){
+    btn.addEventListener('click',function(){
+      var el=root.getElementById(btn.getAttribute('data-rk-reveal'));
+      if(!el)return; el.type=el.type==='password'?'text':'password';
+    });
+  });
+  // reveal masked secret text
+  root.querySelectorAll('[data-rk-reveal-text]').forEach(function(btn){
+    btn.addEventListener('click',function(){
+      var el=root.getElementById(btn.getAttribute('data-rk-reveal-text'));
+      if(!el)return; var real=el.getAttribute('data-rk-secret');
+      var shown=el.getAttribute('data-rk-shown')==='1';
+      el.textContent=shown?'\\u2022'.repeat(18):real; el.setAttribute('data-rk-shown',shown?'0':'1');
+    });
+  });
+  // copy
+  root.querySelectorAll('[data-rk-copy]').forEach(function(btn){
+    btn.addEventListener('click',function(){
+      var el=root.getElementById(btn.getAttribute('data-rk-copy'));
+      if(!el||!navigator.clipboard)return;
+      navigator.clipboard.writeText(el.value||el.textContent||'').then(function(){
+        var t=btn.textContent; btn.textContent='Copied!'; setTimeout(function(){btn.textContent=t},1200);
+      });
+    });
+  });
+})();`;
+    return reskinDocument({
+        title: "vidfarm reskin — Settings",
+        description: "Reskinned vidfarm settings page (profile, wallet, channels, developer).",
+        activeSlug: "settings",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=settings-page.js.map

package/dist/src/reskin/theme.js

@@ -0,0 +1,265 @@
+// ─────────────────────────────────────────────────────────────────────────
+// /reskin/* shared design system — "farmville-saas-ux" (warm sunny Fillout)
+// ─────────────────────────────────────────────────────────────────────────
+// This is the SHARED, ISOLATED stylesheet for the /reskin/* migration surface,
+// where we port old vidfarm pages into the new design system one at a time.
+//
+// CSS isolation contract (do not break it):
+//   • Every /reskin page is its own standalone HTML document (see document.ts)
+//     with only THIS stylesheet — it never shares a <style> with the live app,
+//     so nothing here can conflict with old-page CSS and vice versa.
+//   • Belt-and-suspenders: every design token is prefixed `--rk-` and every
+//     class is prefixed `rk-`. Even if this CSS were ever inlined next to app
+//     CSS, there would be no collision.
+//   • Page modules add ONLY page-scoped classes prefixed `rk-<page>-` and lean
+//     on the shared primitives below. Never introduce an unprefixed class.
+//
+// The token values are copied from the farmville-saas-ux skill (honey-gold
+// accent over a neutral base, heavy rounded display type, soft cards, glass
+// pill nav, warm-dark footer).
+export const RESKIN_PAGES = [
+    { slug: "settings", label: "Settings", emoji: "⚙️", blurb: "Profile, wallet, channels & developer keys", live: "/settings", done: true },
+    { slug: "library", label: "Library", emoji: "🎬", blurb: "Your projects, renders & mined clips (tabbed)", live: "/library", done: true },
+    { slug: "discover", label: "Discover", emoji: "✨", blurb: "Template feed · swipe · categories", live: "/discover", done: true },
+    { slug: "chat", label: "Brainstorm", emoji: "💬", blurb: "Full AI brainstorm chat", live: "/chat", done: true },
+    { slug: "calendar", label: "Calendar", emoji: "📅", blurb: "Scheduled posts", live: "/calendar", done: true },
+    { slug: "job-runs", label: "Job runs", emoji: "🩺", blurb: "Render & job history", live: "/job-runs", done: true },
+    { slug: "agency", label: "Agency", emoji: "🏢", blurb: "Agency / client workspaces", live: "/agency", done: true },
+    { slug: "pricing", label: "Pricing", emoji: "💳", blurb: "Plans & wallet top-up", live: "/pricing", done: true },
+    { slug: "login", label: "Login", emoji: "🔑", blurb: "Sign in / sign up", live: "/login", done: true },
+    { slug: "help", label: "Help", emoji: "🆘", blurb: "Help & getting started", live: "/help", done: true }
+];
+/** Google Fonts + preconnect for the reskin display/body stack. Put in <head>. */
+export const RESKIN_FONT_LINKS = `<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=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">`;
+/** The complete shared stylesheet. Injected once per reskin document. */
+export const RESKIN_CSS = `
+:root{
+  --rk-font-display:"Hanken Grotesk","blMelody",ui-sans-serif,system-ui,sans-serif;
+  --rk-font-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
+  --rk-font-mono:ui-monospace,"SFMono-Regular",Menlo,Monaco,Consolas,monospace;
+  /* honey gold — the one joy accent */
+  --rk-gold-500:#ffc738;--rk-gold-600:#f6c744;--rk-gold-700:#fcb900;--rk-gold-tint:#fff5e4;--rk-gold-tint2:#ffe9cc;
+  /* ink + neutral scale */
+  --rk-ink:#171717;--rk-n-800:#262626;--rk-n-700:#404040;--rk-n-600:#525252;--rk-n-500:#737373;--rk-n-400:#a3a3a3;
+  --rk-n-300:#d4d4d4;--rk-n-200:#ededed;--rk-n-100:#f5f5f5;--rk-n-50:#fbfbfb;--rk-white:#fff;
+  /* support pastels */
+  --rk-sky:#3f9fe0;--rk-sky-tint:#e2effd;--rk-violet:#9f5bde;--rk-violet-tint:#e4ddfd;
+  --rk-green:#22c55e;--rk-green-tint:#dcfce7;--rk-coral:#f97316;--rk-coral-tint:#ffe9cc;
+  --rk-red:#ef4444;--rk-red-tint:#fee2e2;
+  /* semantic */
+  --rk-bg:var(--rk-n-50);--rk-bg-section:var(--rk-n-100);--rk-surface:var(--rk-white);
+  --rk-border:var(--rk-n-200);--rk-border-strong:var(--rk-n-300);
+  --rk-text:var(--rk-n-700);--rk-text-muted:var(--rk-n-500);--rk-text-faint:var(--rk-n-400);
+  /* radius */
+  --rk-r-sm:6px;--rk-r-md:8px;--rk-r-lg:10px;--rk-r-xl:12px;--rk-r-2xl:16px;--rk-r-3xl:24px;--rk-r-full:9999px;
+  /* shadow — diffuse soft sunlight, never harsh */
+  --rk-shadow-xs:0 1px 2px 0 #0000000d;
+  --rk-shadow-sm:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;
+  --rk-shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;
+  --rk-shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;
+  --rk-shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;
+  --rk-shadow-card:0 1px 2px #0000000d,0 8px 24px -12px #00000014;
+  --rk-shadow-nav:0 4px 24px -8px #00000026,0 1px 2px #0000000d;
+  --rk-ring-gold:0 0 0 3px var(--rk-gold-600),0 0 14px rgba(246,199,68,.4);
+  /* type scale */
+  --rk-text-xs:.75rem;--rk-text-sm:.875rem;--rk-text-base:1rem;--rk-text-lg:1.125rem;
+  --rk-text-xl:1.25rem;--rk-text-2xl:1.5rem;--rk-text-3xl:1.875rem;--rk-text-4xl:2.25rem;--rk-text-5xl:3rem;
+  /* space + motion */
+  --rk-container:75rem;--rk-gutter:clamp(1rem,4vw,2rem);--rk-section-y:clamp(3rem,6vw,5rem);
+  --rk-glass-blur:16px;--rk-ease:cubic-bezier(.22,1,.36,1);--rk-dur:200ms;
+}
+
+*,*::before,*::after{box-sizing:border-box}
+.rk-root{margin:0;font-family:var(--rk-font-body);color:var(--rk-text);background:var(--rk-bg);
+  -webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh}
+.rk-root a{text-decoration:none;color:inherit}
+.rk-root h1,.rk-root h2,.rk-root h3,.rk-root h4{font-family:var(--rk-font-display);font-weight:800;
+  letter-spacing:-.025em;line-height:1.1;color:var(--rk-ink);margin:0}
+.rk-root p{margin:0}
+.rk-root code{font-family:var(--rk-font-mono);font-size:.9em;background:var(--rk-n-100);
+  padding:2px 6px;border-radius:6px;color:var(--rk-n-700)}
+
+/* layout */
+.rk-container{width:min(var(--rk-container),100%);margin:0 auto;padding:0 var(--rk-gutter)}
+.rk-container-wide{width:min(85rem,100%);margin:0 auto;padding:0 var(--rk-gutter)}
+.rk-page{padding:40px 0 96px}
+.rk-page-head{display:grid;gap:8px;margin-bottom:32px}
+.rk-h1{font-size:var(--rk-text-4xl);letter-spacing:-.03em}
+.rk-sub{font-size:var(--rk-text-lg);color:var(--rk-text-muted)}
+.rk-stack{display:grid;gap:16px}
+.rk-row{display:flex;align-items:center;gap:12px}
+.rk-spread{display:flex;align-items:center;justify-content:space-between;gap:16px}
+.rk-wrap{flex-wrap:wrap}
+.rk-grid{display:grid;gap:20px}
+.rk-grid-2{grid-template-columns:repeat(2,1fr)}
+.rk-grid-3{grid-template-columns:repeat(3,1fr)}
+.rk-grid-4{grid-template-columns:repeat(4,1fr)}
+@media(max-width:900px){.rk-grid-3,.rk-grid-4{grid-template-columns:repeat(2,1fr)}}
+@media(max-width:620px){.rk-grid-2,.rk-grid-3,.rk-grid-4{grid-template-columns:1fr}}
+.rk-muted{color:var(--rk-text-muted)}.rk-faint{color:var(--rk-text-faint)}
+.rk-mono{font-family:var(--rk-font-mono)}
+
+/* app chrome — fixed LEFT sidebar nav + content column */
+.rk-app{min-height:100vh}
+.rk-sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:50;display:flex;flex-direction:column;gap:4px;
+  padding:20px 14px 16px;background:#fff;border-right:1px solid var(--rk-border);overflow-y:auto}
+.rk-content{margin-left:248px;min-height:100vh;background:var(--rk-bg)}
+.rk-sidebar-brand{display:flex;align-items:center;gap:8px;padding:6px 10px 18px;font-family:var(--rk-font-display);
+  font-weight:800;font-size:20px;color:var(--rk-ink);letter-spacing:-.02em}
+.rk-sidebar-nav{display:flex;flex-direction:column;gap:3px;flex:1;min-height:0}
+.rk-sidebar-sep{height:1px;background:var(--rk-border);margin:8px}
+.rk-sidebar-item{display:flex;align-items:center;padding:9px 13px;border-radius:var(--rk-r-lg);
+  font-size:14px;font-weight:600;color:var(--rk-n-600);white-space:nowrap;
+  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-sidebar-item:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-sidebar-item.is-active{background:var(--rk-gold-tint);color:var(--rk-ink)}
+.rk-sidebar-foot{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--rk-border);margin-top:6px}
+.rk-sidebar-foot-link{font-size:12.5px;font-weight:500;color:var(--rk-text-muted);padding:4px 11px;border-radius:var(--rk-r-md)}
+.rk-sidebar-foot-link:hover{color:var(--rk-ink)}
+.rk-sidebar-cta{justify-content:center}
+
+/* brand + glass helpers (kept — reused by the sidebar brand + the login page) */
+.rk-glass{background:rgba(255,255,255,.72);backdrop-filter:blur(var(--rk-glass-blur));
+  -webkit-backdrop-filter:blur(var(--rk-glass-blur));border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-nav)}
+.rk-brand{display:inline-flex;align-items:center;gap:8px;font-family:var(--rk-font-display);
+  font-weight:800;font-size:20px;color:var(--rk-ink);letter-spacing:-.02em;flex:none}
+.rk-brand-mark{width:26px;height:26px;border-radius:8px;background:var(--rk-gold-500);
+  display:grid;place-items:center;font-family:var(--rk-font-display);font-weight:800;font-size:15px;
+  color:var(--rk-ink);box-shadow:var(--rk-shadow-xs);flex:none}
+.rk-brand-tag{font-family:var(--rk-font-body);font-size:11px;font-weight:600;color:var(--rk-gold-700);
+  background:var(--rk-gold-tint2);padding:2px 8px;border-radius:var(--rk-r-full);letter-spacing:.02em}
+
+/* narrow: sidebar collapses to a horizontal top strip */
+@media(max-width:900px){
+  .rk-sidebar{position:static;width:auto;flex-direction:row;align-items:center;gap:6px;
+    padding:10px 14px;border-right:0;border-bottom:1px solid var(--rk-border);overflow-x:auto}
+  .rk-sidebar-brand{padding:6px 8px;flex:none}
+  .rk-sidebar-nav{flex-direction:row;gap:4px;flex:1}
+  .rk-sidebar-sep{display:none}
+  .rk-sidebar-item{padding:8px 12px}
+  .rk-sidebar-foot{display:none}
+  .rk-content{margin-left:0}
+}
+
+/* buttons */
+.rk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;
+  border-radius:var(--rk-r-full);font-family:var(--rk-font-body);font-size:14px;font-weight:600;
+  border:1px solid transparent;cursor:pointer;white-space:nowrap;text-align:center;
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-btn .rk-arrow{transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-btn:hover .rk-arrow{transform:translateX(3px)}
+.rk-btn-ink{background:var(--rk-ink);color:#fff;box-shadow:var(--rk-shadow-sm)}
+.rk-btn-ink:hover{background:#000;box-shadow:var(--rk-shadow-md);transform:translateY(-1px)}
+.rk-btn-gold{background:var(--rk-gold-500);color:var(--rk-ink);font-weight:700;box-shadow:var(--rk-shadow-sm)}
+.rk-btn-gold:hover{background:var(--rk-gold-700);box-shadow:0 6px 18px -6px rgba(252,185,0,.6);transform:translateY(-1px)}
+.rk-btn-ghost{background:#fff;color:var(--rk-ink);border-color:var(--rk-border);box-shadow:var(--rk-shadow-xs)}
+.rk-btn-ghost:hover{border-color:var(--rk-border-strong);box-shadow:var(--rk-shadow-sm)}
+.rk-btn-danger{background:#fff;color:var(--rk-red);border-color:var(--rk-red-tint)}
+.rk-btn-danger:hover{background:var(--rk-red-tint)}
+.rk-btn-sm{padding:7px 13px;font-size:13px}
+.rk-btn-lg{padding:14px 24px;font-size:15px}
+.rk-btn-block{width:100%}
+
+/* badges + pills */
+.rk-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--rk-r-full);
+  background:#fff;border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xs);
+  font-size:13px;font-weight:500;color:var(--rk-n-700);justify-self:start;width:fit-content}
+.rk-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--rk-r-full);
+  font-size:12px;font-weight:600;background:var(--rk-n-100);color:var(--rk-n-600)}
+.rk-pill-gold{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
+.rk-pill-green{background:var(--rk-green-tint);color:#15803d}
+.rk-pill-sky{background:var(--rk-sky-tint);color:#1d6fb8}
+.rk-pill-violet{background:var(--rk-violet-tint);color:#7c3aed}
+.rk-pill-red{background:var(--rk-red-tint);color:#b91c1c}
+
+/* cards */
+.rk-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);
+  padding:28px;box-shadow:var(--rk-shadow-card)}
+.rk-card-hover{transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-card-hover:hover{transform:translateY(-2px);box-shadow:var(--rk-shadow-lg)}
+.rk-card-pad-sm{padding:20px}
+.rk-card h2{font-size:var(--rk-text-2xl);letter-spacing:-.02em}
+.rk-card h3{font-size:var(--rk-text-lg);font-weight:700;font-family:var(--rk-font-display)}
+.rk-card-head{display:grid;gap:6px;margin-bottom:20px}
+.rk-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
+  color:var(--rk-gold-700);text-transform:uppercase;letter-spacing:.04em;justify-self:start;width:fit-content}
+
+/* icon tiles */
+.rk-tile{width:40px;height:40px;border-radius:var(--rk-r-xl);display:grid;place-items:center;font-size:18px;flex:none}
+.rk-tile-sm{width:32px;height:32px;font-size:15px;border-radius:var(--rk-r-lg)}
+.rk-tile-lg{width:52px;height:52px;font-size:24px}
+.rk-tile-gold{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
+.rk-tile-sky{background:var(--rk-sky-tint);color:var(--rk-sky)}
+.rk-tile-violet{background:var(--rk-violet-tint);color:var(--rk-violet)}
+.rk-tile-green{background:var(--rk-green-tint);color:#16a34a}
+.rk-tile-coral{background:var(--rk-coral-tint);color:var(--rk-coral)}
+.rk-tile-ink{background:var(--rk-n-100);color:var(--rk-ink)}
+
+/* forms */
+.rk-field{display:grid;gap:7px}
+.rk-label{font-size:13px;font-weight:600;color:var(--rk-n-700)}
+.rk-hint{font-size:12px;color:var(--rk-text-muted)}
+.rk-input,.rk-textarea,.rk-select{width:100%;font-family:var(--rk-font-body);font-size:14px;
+  color:var(--rk-ink);background:#fff;border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-xl);
+  padding:11px 14px;transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-input::placeholder,.rk-textarea::placeholder{color:var(--rk-n-400)}
+.rk-textarea{min-height:110px;resize:vertical;line-height:1.5}
+.rk-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23737373' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
+.rk-input:focus,.rk-textarea:focus,.rk-select:focus{outline:none;border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
+.rk-input-group{display:flex;align-items:stretch;gap:8px}
+.rk-input-group .rk-input{flex:1}
+
+/* notice / flash */
+.rk-notice{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:var(--rk-r-2xl);
+  font-size:14px;font-weight:500;border:1px solid transparent}
+.rk-notice-ok{background:var(--rk-green-tint);color:#15803d;border-color:#bbf7d0}
+.rk-notice-err{background:var(--rk-red-tint);color:#b91c1c;border-color:#fecaca}
+
+/* two-column shell with sticky side rail (settings, etc.) */
+.rk-shell{display:grid;grid-template-columns:248px minmax(0,1fr);gap:32px;align-items:start}
+@media(max-width:860px){.rk-shell{grid-template-columns:1fr}}
+.rk-side{position:sticky;top:88px;display:grid;gap:4px;background:#fff;border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-2xl);padding:12px;box-shadow:var(--rk-shadow-card)}
+@media(max-width:860px){.rk-side{position:static;grid-auto-flow:column;overflow:auto}}
+.rk-side-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--rk-r-xl);
+  font-size:14px;font-weight:600;color:var(--rk-n-600);cursor:pointer;border:0;background:transparent;
+  width:100%;text-align:left;white-space:nowrap;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-side-item:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-side-item.is-active{background:var(--rk-gold-tint);color:var(--rk-ink)}
+.rk-side-item.is-active .rk-side-ic{background:var(--rk-gold-500)}
+.rk-side-ic{width:26px;height:26px;border-radius:8px;background:var(--rk-n-100);display:grid;place-items:center;font-size:14px;flex:none}
+
+/* simple list rows */
+.rk-list{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
+.rk-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;min-width:0;
+  border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xs)}
+.rk-item-main{flex:1;min-width:0}
+.rk-item-title{font-weight:600;color:var(--rk-ink);font-size:14px}
+.rk-item-sub{font-size:13px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+
+/* stat tiles */
+.rk-stat{display:grid;gap:6px}
+.rk-stat-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--rk-text-muted)}
+.rk-stat-num{font-family:var(--rk-font-display);font-size:var(--rk-text-4xl);font-weight:800;letter-spacing:-.02em;color:var(--rk-ink)}
+
+/* footer — warm-dark charcoal */
+.rk-footer{background:var(--rk-ink);color:var(--rk-n-400);padding:56px var(--rk-gutter) 40px;margin-top:64px}
+.rk-footer-inner{width:min(var(--rk-container),100%);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
+.rk-footer-brand{font-family:var(--rk-font-display);font-weight:800;font-size:22px;color:var(--rk-gold-500);display:inline-flex;align-items:center;gap:8px}
+.rk-footer a{color:var(--rk-n-300)}.rk-footer a:hover{color:#fff}
+.rk-footer-links{display:flex;gap:8px;flex-wrap:wrap}
+.rk-trust-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--rk-r-full);background:#ffffff0d;color:var(--rk-n-400);font-size:13px}
+
+/* hero band (sunny sky) — sits flush at the top of the content column */
+.rk-hero-band{position:relative;overflow:hidden;margin-top:0}
+.rk-hero-art{position:absolute;inset:0;z-index:0;background:
+  radial-gradient(58% 46% at 78% 20%,rgba(255,241,204,.9),transparent 60%),
+  linear-gradient(180deg,#3f9fe0 0%,#6cc0f5 55%,#a9dbfb 100%)}
+.rk-hero{position:relative;z-index:1;text-align:center;padding:119px var(--rk-gutter) 72px}
+
+:where(.rk-root a,.rk-root button,.rk-root input,.rk-root textarea,.rk-root select):focus-visible{outline:none;box-shadow:var(--rk-ring-gold)}
+.rk-reveal[hidden]{display:none}
+`;
+//# sourceMappingURL=theme.js.map