@ads-repo/meta-creative-buckets 1.0.0

package/scripts/build-buckets-matrix.cjs

@@ -0,0 +1,1367 @@
+#!/usr/bin/env node
+
+/**
+ * Build a self-contained MATRIX dashboard that plots Meta creatives on a Spend × CRR
+ * quadrant grid:
+ *
+ *        CRR bad (high)  │  Wait     │  Kill
+ *                        ├───────────┼──────────
+ *        CRR good (low)  │  NotData  │  Scale
+ *                        └──────────────────────
+ *                          low spend    enough spend
+ *
+ * The Y axis is
+ *
+ *   CRR = spend ÷ purchase revenue, as %   (7d click; inverse ROAS, CRR 40% == ROAS 2.5)
+ *
+ * LOWER is better, so an ad sits lower on the grid the better it earns.
+ *
+ * The spend gate is its own currency slider, independent of the target: a multiple of a
+ * percentage target would be meaningless. The whole LEFT column (under the gate) is
+ * "Not enough data" — an ad there is not judged on CRR yet. Cards are bubbles inside the
+ * quadrants; clicking a quadrant (or its header) filters the list underneath to that bucket.
+ *
+ * Defaults are seeded FROM THE DATA (see below), not hardcoded, so the target line starts
+ * where the account actually sits rather than at an invented benchmark.
+ *
+ * Currency is read off the fetched JSON — never assumed, and never inferred from the account
+ * name: an account named "… CZ" may still bill in EUR, where a hardcoded "Kč" would be wrong
+ * by a factor of ~25.
+ *
+ * Output: data/meta-ads/<client>/buckets-matrix.html (opens in browser).
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const cfg = require('./config.cjs');
+
+const MA_DIR = cfg.dataDir;
+const HIST_DIR = cfg.historyDir;
+const LATEST = cfg.latestFile;
+
+if (!fs.existsSync(LATEST)) {
+  console.error(`Error: ${LATEST} not found — run fetch-buckets-data.cjs first.`);
+  process.exit(1);
+}
+const cur = JSON.parse(fs.readFileSync(LATEST, 'utf-8'));
+
+// Ad and campaign names are user-authored in Ads Manager, so they can contain anything.
+// Inside a <script> block the parser looks for "</script>" in the raw text, ahead of JSON
+// syntax — an ad named "sale </script>" would end the block early and blank the page. The
+// escapes below are invisible to JSON.parse and keep the payload inert.
+function jsonForScript(value) {
+  return JSON.stringify(value)
+    .replace(/</g, '\\u003c')
+    .replace(/>/g, '\\u003e')
+    // U+2028/U+2029 are literal line breaks in JS source but legal inside a JSON string
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+}
+
+// Account names come from the Meta API, so they are interpolated into the HTML escaped.
+function esc(s) {
+  return String(s == null ? '' : s)
+    .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
+// Optional logos, inlined as data URIs so the dashboard stays a single portable file (it is
+// opened straight off disk / emailed around, so an external <img src> would break).
+// Set `logo` / `agencyLogo` in buckets.config.json to project-root-relative image paths.
+// Nothing configured, or a missing file, renders no logo rather than a broken image.
+function dataUri(relPath) {
+  if (!relPath) return null;
+  const p = path.isAbsolute(relPath) ? relPath : path.join(process.cwd(), relPath);
+  if (!fs.existsSync(p)) {
+    console.warn(`  ⚠ logo not found: ${relPath} — rendering without it`);
+    return null;
+  }
+  const mime = { '.png': 'image/png', '.jpg': 'image/jpeg', '.jpeg': 'image/jpeg',
+                 '.svg': 'image/svg+xml', '.webp': 'image/webp' }[path.extname(p).toLowerCase()];
+  if (!mime) {
+    console.warn(`  ⚠ unsupported logo format: ${relPath} — rendering without it`);
+    return null;
+  }
+  return `data:${mime};base64,${fs.readFileSync(p).toString('base64')}`;
+}
+const LOGO_CLIENT = dataUri(cfg.logo);
+const LOGO_AGENCY = dataUri(cfg.agencyLogo);
+
+// Header label: config override, then the name stored by the fetch, then the account id.
+const ACCOUNT_LABEL = cfg.accountName || cur.accountName || cur.account;
+
+// Currency symbol straight from the account, via the fetched JSON. Never inferred from the
+// account name — an account named "… CZ" may still bill in EUR.
+const CURRENCY = cur.currency || 'EUR';
+const SYMBOL = { EUR: '€', CZK: 'Kč', USD: '$', GBP: '£' }[CURRENCY] || (CURRENCY + ' ');
+
+// ---------------------------------------------------------------------------
+// Previous snapshot -> day-over-day CRR movement arrows in the table.
+// Picks the newest dated snapshot that is NOT the current one.
+// ---------------------------------------------------------------------------
+function prevSnapshot() {
+  if (!fs.existsSync(HIST_DIR)) return null;
+  const files = fs.readdirSync(HIST_DIR).filter(f => /^\d{8}-buckets\.json$/.test(f)).sort();
+  const curName = `${cur.endDate.replace(/-/g, '')}-buckets.json`;
+  const older = files.filter(f => f < curName);
+  if (!older.length) return null;
+  try { return JSON.parse(fs.readFileSync(path.join(HIST_DIR, older[older.length - 1]), 'utf-8')); }
+  catch (e) { return null; }
+}
+const prev = prevSnapshot();
+const prevCrr = {};
+if (prev) for (const a of prev.ads) prevCrr[a.ad_id] = a.crr;
+
+// ---------------------------------------------------------------------------
+// OPTIONAL promo labels, joined by ad_id. Not part of the standard workflow: the labels
+// come from a separate creative classification, so most setups will not have this file
+// and the dashboard simply hides the promo filter.
+//
+// Format is a flat JSON map, ad_id -> one of:
+//   "Promo - main message" | "Promo - secondary message" | "Non-promo"
+// written to data/meta-ads/<client>/promo-labels.json.
+//
+// When the file IS present, unlabelled ads are DROPPED rather than folded into Non-promo —
+// unknown is not the same as "no offer" — so every bubble on the page is classified. That
+// makes coverage partial by design; the build prints how many ads were dropped.
+//
+// UNCLASSIFIED therefore survives only as a defensive fallback in the chip renderer:
+// it is unreachable while the drop-filter is on, and exists so a future change that
+// stops dropping unlabelled ads degrades to a visible "—" instead of `undefined`.
+// ---------------------------------------------------------------------------
+const UNCLASSIFIED = 'Unclassified';
+const PROMO_FILE = path.join(MA_DIR, 'promo-labels.json');
+
+// OPTIONAL creative thumbnails, ad_id -> image path, in thumbs.json. By default the
+// dashboard uses Meta's own preview_thumb from the fetch; this file overrides it, which
+// matters on accounts where the creative pass is rate limited and previews come back null.
+// No file, no override.
+const THUMBS_FILE = path.join(MA_DIR, 'thumbs.json');
+let thumbFiles = {};
+if (fs.existsSync(THUMBS_FILE)) {
+  try { thumbFiles = JSON.parse(fs.readFileSync(THUMBS_FILE, 'utf-8')); }
+  catch (e) { console.warn(`  ⚠ could not read ${path.basename(THUMBS_FILE)} — no thumbnails`); }
+}
+let promoLabels = {};
+if (fs.existsSync(PROMO_FILE)) {
+  try { promoLabels = JSON.parse(fs.readFileSync(PROMO_FILE, 'utf-8')); }
+  catch (e) { console.warn(`  ⚠ could not read ${path.basename(PROMO_FILE)} — promo filter disabled`); }
+}
+const HAS_PROMO = Object.keys(promoLabels).length > 0;
+
+// last-3-days rollup from the daily series: avg daily spend, and CRR over those 3 days
+// (summed spend / summed revenue, not an average of daily CRRs).
+function last3(a) {
+  const d = (a.daily || []).slice(-3);
+  if (!d.length) return { spend3d: null, crr3d: null };
+  const spend = d.reduce((s, x) => s + (+x.spend || 0), 0);
+  const revenue = d.reduce((s, x) => s + (+x.revenue || 0), 0);
+  return {
+    spend3d: Math.round((spend / d.length) * 100) / 100,   // avg per day
+    crr3d: revenue > 0 ? Math.round((spend / revenue) * 1000) / 10 : null,
+  };
+}
+
+// With no promo-labels.json (the usual case) every spending ad is plotted. When labels
+// ARE supplied, unlabelled ads are dropped rather than shown as "Unclassified" — keeping
+// them would leave a bucket the reader cannot act on.
+const _spent = cur.ads.filter(a => a.spend > 0);
+const _labelled = HAS_PROMO ? _spent.filter(a => promoLabels[a.ad_id]) : _spent;
+const _dropped = _spent.length - _labelled.length;
+
+const ads = _labelled.map(a => {
+  const l3 = last3(a);
+  return {
+    id: a.ad_id, name: a.ad_name, adset: a.adset_name, campaign: a.campaign_name,
+    media: a.media_type, active: a.active,
+    spend: a.spend, revenue: a.revenue, purchases: a.purchases,
+    crr: a.crr, roas: a.roas, ctr: a.ctr, freq: a.frequency,
+    days: a.active_days,
+    spend3d: l3.spend3d, crr3d: l3.crr3d,
+    // a supplied thumbnail overrides Meta's preview, which is null on rate-limited accounts
+    thumb: thumbFiles[a.ad_id] || a.preview_thumb || null, image: a.preview_image || null,
+    promo: promoLabels[a.ad_id] || UNCLASSIFIED,
+    prevCrr: prevCrr[a.ad_id] != null ? prevCrr[a.ad_id] : null,
+    // trimmed daily series for the time-axis slider
+    daily: (a.daily || []).map(d => ({
+      date: d.date, spend: +d.spend || 0, revenue: +d.revenue || 0,
+      purchases: +d.purchases || 0, impr: +d.impr || 0, clicks: +d.clicks || 0,
+    })),
+  };
+});
+
+// unified, sorted, unique list of all days present in the window (YYYY-MM-DD)
+const DAYS_AXIS = [...new Set(cur.ads.flatMap(a => (a.daily || []).map(d => d.date)))].sort();
+
+// ---------------------------------------------------------------------------
+// Data-seeded defaults (the user asked for these to come from real numbers).
+//
+//   Target CRR   = the account's blended CRR over the window (spend ÷ revenue). Starting the
+//                  line at the account average splits the creatives into "better than my
+//                  current average" vs "worse", which is the honest starting question.
+//   Spend gate   = the 75th percentile of per-ad spend, floored at 3× AOV. An ad that has not
+//                  yet spent a few average order values cannot be judged on revenue at all,
+//                  and the median (~1 AOV here) would wave through far too many.
+// Both are sliders — the user can move them freely; these are only the opening position.
+// ---------------------------------------------------------------------------
+const spends = ads.map(a => a.spend).sort((x, y) => x - y);
+function pct(arr, p) { return arr.length ? arr[Math.floor((arr.length - 1) * p)] : 0; }
+
+const blendedCrr = (cur.totals && cur.totals.crr) || null;
+const aov = (cur.totals && cur.totals.aov) || null;
+
+const defTarget = Math.max(5, Math.round(blendedCrr || 40));
+const p75Spend = pct(spends, 0.75);
+const defSpendThresh = Math.max(20, Math.round((aov ? Math.max(p75Spend, aov * 3) : p75Spend) / 10) * 10);
+
+// slider ceilings, generous enough to cover the data without becoming unusable
+const targetMax = Math.max(100, Math.ceil((defTarget * 3) / 10) * 10);
+const threshMax = Math.max(100, Math.ceil(Math.max(defSpendThresh * 4, pct(spends, 0.98)) / 50) * 50);
+
+const html = `<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Creative Matrix - ${esc(ACCOUNT_LABEL)}</title>
+<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<style>
+:root{
+  --bg:#F3F4F6;--card:#ffffff;--edge:#E5E7EB;--edge2:#eef0f3;
+  --ink:#111111;--muted:#6b7280;--muted2:#9ca3af;--accent:#ff5722;
+  --nd:#94a3b8;--wait:#f59e0b;--scale:#16a34a;--kill:#dc2626;
+}
+*{box-sizing:border-box}
+body{margin:0;font-family:'Raleway',-apple-system,sans-serif;background:var(--bg);color:var(--ink);font-size:13px;-webkit-font-smoothing:antialiased}
+
+/* header */
+header{background:var(--card);border-bottom:1px solid var(--edge);padding:26px 0 22px}
+.hwrap{max-width:1240px;margin:0 auto;padding:0 32px}
+h1{margin:0 0 6px;font-size:26px;font-weight:600;letter-spacing:-.01em}
+
+/* ---- Top bar ----
+   Same sticky pill navbar as the Ad Library report (prehled.html), so the two read as one
+   product rather than two loose files: site link left, client + agency logos right, split
+   by a hairline. */
+.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);
+  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
+  border-bottom:1px solid var(--edge2)}
+.topbar-in{max-width:1460px;margin:0 auto;padding:11px 20px;display:flex;
+  align-items:center;justify-content:space-between;gap:16px}
+.tb-home{font-size:12.5px;font-weight:600;color:var(--muted);text-decoration:none;
+  border:1px solid var(--edge);border-radius:999px;padding:6px 15px;transition:.14s}
+.tb-home:hover{color:var(--accent);border-color:#ffccbc;background:#fff3f0}
+.tb-logos{display:flex;align-items:center;gap:15px;flex:none}
+.tb-logos img{width:auto;display:block}
+.tb-client{height:32px}
+.tb-agency{height:20px}
+.tb-sep{width:1px;height:24px;background:var(--edge);flex:none}
+@media(max-width:640px){.tb-logos{gap:10px}}
+.sub{color:var(--muted);font-size:13px;line-height:1.5}
+.controls{display:flex;gap:40px;flex-wrap:wrap;margin-top:22px;align-items:flex-start}
+.ctl{min-width:220px}
+.ctl label{display:flex;justify-content:space-between;align-items:baseline;color:var(--ink);font-size:12px;font-weight:600;margin-bottom:9px;text-transform:uppercase;letter-spacing:.05em}
+.ctl .val{color:var(--accent);font-weight:700;font-size:15px;letter-spacing:0}
+.valedit{width:60px;font-family:'Raleway',sans-serif;font-size:15px;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:5px;padding:1px 5px;background:#fff;text-align:right}
+.valedit:focus{outline:none}
+.valedit::-webkit-outer-spin-button,.valedit::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
+.valedit[type=number]{-moz-appearance:textfield;appearance:textfield}
+.hint{color:var(--muted2);font-size:11px;max-width:250px;margin-top:8px;line-height:1.4}
+.roashint{color:var(--muted);font-weight:600}
+/* clean slider */
+input[type=range]{-webkit-appearance:none;appearance:none;width:230px;height:4px;border-radius:4px;background:var(--edge);outline:none}
+input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
+input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
+
+.wrap{padding:26px 32px 48px;max-width:1240px;margin:0 auto}
+
+/* time-axis slider above the plot */
+.timeaxis{background:var(--card);border:1px solid var(--edge);border-radius:8px;padding:14px 18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
+.tahead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:16px;flex-wrap:wrap}
+.talabel{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
+.tacontrols{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
+.tdash{color:var(--muted2)}
+/* period picker */
+.periodwrap{position:relative}
+.periodbtn{display:inline-flex;align-items:center;gap:8px;font-family:'Raleway',sans-serif;font-size:13px;font-weight:600;color:var(--ink);border:1px solid var(--edge);border-radius:8px;padding:8px 14px;background:#fff;cursor:pointer}
+.periodbtn:hover{border-color:var(--muted2)}
+.periodbtn .cal{color:var(--muted);display:block}.periodbtn .caret{color:var(--muted2);font-size:10px}
+/* above the sticky topbar (z 50) — the calendar opens downward but can overlap it on scroll */
+.periodpop{position:absolute;top:calc(100% + 8px);right:0;z-index:60;display:flex;background:#fff;border:1px solid var(--edge);border-radius:10px;box-shadow:0 12px 32px rgba(16,24,40,.18);overflow:hidden}
+.ppresets{width:170px;border-right:1px solid var(--edge);padding:8px 0;background:#fafafa}
+.ppreset{display:block;width:100%;text-align:left;font-family:'Raleway',sans-serif;font-size:13px;color:var(--ink);padding:8px 18px;border:none;background:none;cursor:pointer}
+.ppreset:hover{background:#fff}
+.ppreset.on{color:var(--accent);font-weight:700}
+.pcal{padding:16px 18px}
+.pcalhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
+.pnav{border:none;background:none;font-size:20px;color:var(--muted);cursor:pointer;padding:0 8px;line-height:1}
+.pnav:hover{color:var(--ink)}
+.pmonths{display:flex;gap:70px;font-size:15px;font-weight:600;color:var(--ink)}
+.pgrids{display:flex;gap:24px}
+.pgrid{display:grid;grid-template-columns:repeat(7,32px);gap:2px}
+.pgh{font-size:10px;font-weight:600;color:var(--muted2);text-align:center;text-transform:uppercase;height:20px;line-height:20px}
+.pday{height:32px;line-height:32px;text-align:center;font-size:12px;color:var(--ink);border-radius:6px;cursor:pointer;user-select:none}
+.pday.mut{color:#cbd5e1;cursor:default}
+.pday.off{color:#e2e8f0;cursor:not-allowed}
+.pday:not(.mut):not(.off):hover{background:#fff2ec}
+.pday.inrange{background:#ffe9e0}
+.pday.edge{background:var(--accent);color:#fff;font-weight:700}
+.pfoot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--edge);gap:16px}
+.pinputs{display:flex;align-items:center;gap:10px}
+.pin{font-size:13px;color:var(--ink);border:1px solid var(--edge);border-radius:6px;padding:6px 12px;min-width:120px;display:inline-block}
+.pactions{display:flex;gap:8px}
+.pbtn{font-family:'Raleway',sans-serif;font-size:13px;font-weight:600;padding:8px 16px;border-radius:6px;border:1px solid var(--edge);background:#fff;color:var(--ink);cursor:pointer}
+.pbtn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
+.pbtn.primary:hover{filter:brightness(1.05)}
+.granbtns{display:inline-flex;border:1px solid var(--edge);border-radius:6px;overflow:hidden;margin-left:4px}
+.granbtn{font-family:'Raleway',sans-serif;font-size:12px;font-weight:600;padding:6px 12px;border:none;background:#fff;color:var(--muted);cursor:pointer;border-left:1px solid var(--edge)}
+.granbtn:first-child{border-left:none}
+.granbtn.on{background:var(--accent);color:#fff}
+.taday{font-size:13px;font-weight:500;color:var(--muted2)}
+.timeaxis input[type=range]{width:100%;display:block}
+/* ---- first-visit drag hint ----
+   The time slider is the least obvious control on the page and the most useful, so on a
+   fresh visit the thumb pulses and a hand points at it. Any interaction dismisses it for
+   good (localStorage), so it never nags a returning user. */
+.tarow{position:relative}
+/* anchored to the right, because the slider opens at "today" — the thumb sits at that end,
+   and the gesture to demonstrate is dragging back into the past (leftwards) */
+.draghint{position:absolute;right:0;top:26px;display:flex;align-items:center;gap:8px;
+  flex-direction:row-reverse;pointer-events:none;z-index:4;
+  transition:opacity .35s,transform .35s;will-change:transform}
+.draghint.hide{opacity:0;transform:translateY(-6px)}
+.dhand{font-size:20px;line-height:1;display:block;animation:dhwave 1.9s ease-in-out infinite;transform-origin:60% 0}
+.dhtext{background:var(--ink);color:#fff;font-size:11.5px;font-weight:600;padding:5px 10px;
+  border-radius:6px;white-space:nowrap;box-shadow:0 3px 10px rgba(16,24,40,.28)}
+/* the hand slides left and back — the drag-into-the-past gesture the user should copy */
+@keyframes dhwave{
+  0%,100%{transform:translateX(0)}
+  50%{transform:translateX(-26px)}
+}
+/* pulsing ring on the slider thumb, drawn as a sibling so the native thumb keeps working */
+.thumbpulse{position:absolute;top:0;width:16px;height:16px;border-radius:50%;pointer-events:none;
+  z-index:3;transform:translate(-50%,-50%);box-shadow:0 0 0 0 rgba(255,87,34,.55);
+  animation:tpulse 1.9s ease-out infinite}
+@keyframes tpulse{
+  0%{box-shadow:0 0 0 0 rgba(255,87,34,.5)}
+  70%{box-shadow:0 0 0 14px rgba(255,87,34,0)}
+  100%{box-shadow:0 0 0 0 rgba(255,87,34,0)}
+}
+@media (prefers-reduced-motion:reduce){
+  .dhand,.thumbpulse{animation:none}
+}
+.taends{display:flex;justify-content:space-between;align-items:center;color:var(--muted2);font-size:11px;margin-top:6px}
+.plot{position:relative;background:var(--card);border:1px solid var(--edge);border-radius:8px;padding:14px 16px 8px;margin-bottom:8px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
+.plottop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
+.aggstats{display:flex;gap:28px}
+.aggbox{display:flex;flex-direction:column;gap:1px}
+.agglab{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted2)}
+.aggval{font-size:19px;font-weight:700;color:var(--ink);line-height:1.1}
+.aggval .sm{font-size:12px;font-weight:600;color:var(--muted);margin-left:5px}
+.info{color:var(--muted2);cursor:help;font-weight:400}
+/* promo segmented control, sits next to the Active-only toggle */
+.promowrap{display:flex;align-items:center;gap:9px;margin-left:auto}
+.promolab2{font-size:11px;font-weight:600;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em}
+.promoseg{display:inline-flex;border:1px solid var(--edge);border-radius:6px;overflow:hidden}
+.promobtn{font-family:'Raleway',sans-serif;font-size:12px;font-weight:600;padding:6px 11px;border:none;background:#fff;color:var(--muted);cursor:pointer;border-left:1px solid var(--edge);white-space:nowrap}
+.promobtn:first-child{border-left:none}
+.promobtn:hover{background:#fafafa}
+.promobtn.on{background:var(--accent);color:#fff}
+.promobtn.on:hover{background:var(--accent)}
+.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:none;user-select:none}
+.toggle .tglab{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap}
+.toggle input{display:none}
+.tgtrack{width:38px;height:22px;border-radius:22px;background:var(--edge);position:relative;transition:background .15s}
+.tgknob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
+.toggle input:checked + .tgtrack{background:var(--accent)}
+.toggle input:checked + .tgtrack .tgknob{left:18px}
+#scatter{display:block;width:100%;height:560px;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
+#scatter text{font-family:'Raleway',sans-serif}
+.zoneLabel{font-size:14px;font-weight:500;letter-spacing:.06em;pointer-events:none;font-family:'Raleway',sans-serif}
+.gridline{stroke:var(--edge);stroke-width:1}
+.threshline{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:5 4;opacity:.7}
+.axislabel{fill:var(--muted);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-family:'Raleway',sans-serif}
+.ticklabel{fill:var(--muted2);font-size:10px;font-family:'Raleway',sans-serif}
+.pt{cursor:pointer;stroke:#fff;stroke-width:1.5;transition:fill .4s ease,opacity .12s}
+.pt:hover{stroke:var(--ink);stroke-width:2}
+.pt.dim{opacity:.15}
+.pt.sel{stroke:var(--ink);stroke-width:2.5}
+.pt.nd{fill:var(--nd)}.pt.wait{fill:var(--wait)}.pt.scale{fill:var(--scale)}.pt.kill{fill:var(--kill)}
+.zone{cursor:pointer}
+.zone.nd{fill:rgba(148,163,184,.07)}.zone.wait{fill:rgba(245,158,11,.06)}
+.zone.scale{fill:rgba(22,163,74,.06)}.zone.kill{fill:rgba(220,38,38,.05)}
+.zone.sel{stroke:var(--accent);stroke-width:1.5}
+/* stacked spend bar */
+.barwrap{background:var(--card);border:1px solid var(--edge);border-radius:8px;padding:16px 18px;margin-top:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
+.bartitle{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:12px}
+.bartitle .bartotal{float:right;color:var(--ink);font-weight:700;text-transform:none;letter-spacing:0;font-size:13px}
+.stacked{display:flex;height:38px;border-radius:6px;overflow:hidden;background:#f1f5f9}
+.seg{position:relative;height:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;transition:filter .12s;min-width:0;white-space:nowrap;overflow:hidden}
+.seg:hover{filter:brightness(1.06)}
+.seg.dim{opacity:.35}
+.seg.nd{background:var(--nd)}.seg.wait{background:var(--wait)}.seg.scale{background:var(--scale)}.seg.kill{background:var(--kill)}
+.barlegend{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px}
+.blg{display:flex;align-items:center;gap:7px;font-size:12px;cursor:pointer}
+.blg.dim{opacity:.4}
+.blg .sw{width:10px;height:10px;border-radius:3px;flex:none}
+.blg.nd .sw{background:var(--nd)}.blg.wait .sw{background:var(--wait)}.blg.scale .sw{background:var(--scale)}.blg.kill .sw{background:var(--kill)}
+.blg .bn{font-weight:600;color:var(--ink)}
+.blg .bm{color:var(--muted);font-weight:500}
+.blg .bspend{color:var(--ink);font-weight:700}
+.tip{position:absolute;pointer-events:none;background:var(--ink);border-radius:6px;padding:8px 11px;font-size:11px;color:#fff;display:none;z-index:5;max-width:250px;box-shadow:0 4px 12px rgba(0,0,0,.25);line-height:1.5}
+.tip b{display:block;margin-bottom:3px;font-size:12px}
+
+/* list */
+.listhead{display:flex;align-items:center;gap:12px;margin:26px 0 12px;flex-wrap:wrap}
+.dropfilters{display:flex;gap:8px;flex-wrap:wrap}
+.dropfilter{font-family:'Raleway',sans-serif;font-size:12px;color:var(--ink);border:1px solid var(--edge);border-radius:6px;padding:6px 10px;background:#fff;cursor:pointer;max-width:220px}
+.dropfilter:focus{outline:none;border-color:var(--accent)}
+.dropfilter.set{border-color:var(--accent);color:var(--accent);font-weight:600}
+.listhead .pill{font-size:12px;font-weight:600;padding:5px 12px;border-radius:6px;display:flex;align-items:center;gap:6px;border:1px solid transparent}
+.pill.nd{background:#f1f5f9;color:#475569;border-color:#e2e8f0}.pill.wait{background:#fffbeb;color:#b45309;border-color:#fde68a}
+.pill.scale{background:#f0fdf4;color:#15803d;border-color:#bbf7d0}.pill.kill{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
+.pill.all{background:#fff;color:var(--muted);border-color:var(--edge)}
+.clr{color:var(--accent);font-size:12px;font-weight:500;cursor:pointer}
+.clr:hover{text-decoration:underline}
+.tablecard{background:var(--card);border:1px solid var(--edge);border-radius:8px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04)}
+table{width:100%;border-collapse:collapse}
+th,td{text-align:left;padding:11px 14px;font-size:12px}
+td{border-top:1px solid var(--edge2)}
+thead th{background:var(--ink);color:#fff;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;user-select:none;white-space:nowrap}
+thead th:hover{background:#2a2a2a}
+td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
+tbody tr:hover{background:#fafafa}
+.tname{display:flex;align-items:center;gap:10px}
+.tthumb{width:38px;height:38px;border-radius:6px;object-fit:cover;background:#f1f5f9;flex:none;border:1px solid var(--edge);cursor:zoom-in;transition:transform .12s,box-shadow .12s}
+.tthumb:hover{transform:scale(1.08);box-shadow:0 2px 8px rgba(16,24,40,.22);border-color:var(--muted2)}
+/* creative lightbox */
+.lb{position:fixed;inset:0;z-index:100;background:rgba(17,17,17,.82);display:none;align-items:center;justify-content:center;padding:32px}
+.lb.on{display:flex}
+.lbinner{position:relative;max-width:min(92vw,760px);max-height:92vh;display:flex;flex-direction:column;gap:10px}
+.lbimg{max-width:100%;max-height:78vh;object-fit:contain;border-radius:10px;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.45)}
+.lbbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:#fff}
+.lbname{font-size:14px;font-weight:600;line-height:1.3}
+.lbmeta{font-size:12px;color:#cfd4da;font-variant-numeric:tabular-nums}
+.lbclose{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;border:none;background:#fff;color:var(--ink);font-size:19px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}
+.lbclose:hover{background:#f1f5f9}
+.lbnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.3)}
+.lbnav:hover{background:#fff}
+.lbprev{left:-56px}.lbnext{right:-56px}
+@media (max-width:900px){.lbprev{left:4px}.lbnext{right:4px}}
+.tnoimg{width:38px;height:38px;border-radius:6px;background:repeating-linear-gradient(45deg,#f5f7f9,#f5f7f9 4px,#eceff2 4px,#eceff2 8px);flex:none;border:1px solid var(--edge)}
+/* name above, promo chip below — keeps the row to one column instead of two */
+.nmwrap{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
+.tname .nm{font-weight:500;line-height:1.25}
+.badge{font-size:9px;font-weight:600;padding:2px 6px;border-radius:4px;background:#f1f5f9;color:var(--muted);margin-left:7px;letter-spacing:.02em}
+.badge.vid{background:#f3e8ff;color:#7c3aed}.badge.img{background:#e0f2fe;color:#0369a1}
+.badge.unk{background:#f1f5f9;color:var(--muted2)}
+tr.paused{color:var(--muted2)}
+.chkcol{width:34px;text-align:center;padding-left:12px;padding-right:0}
+.rowchk{width:15px;height:15px;accent-color:var(--accent);cursor:pointer;vertical-align:middle}
+tr.rowdim{opacity:.32;transition:opacity .12s}
+tr.rowdim:hover{opacity:.7}
+.st{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:5px}
+.st.on{color:var(--scale)}.st.off{color:var(--muted2)}
+.st .d{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
+.crr-good{color:var(--scale);font-weight:600}.crr-bad{color:var(--kill);font-weight:600}.crr-none{color:var(--muted2)}
+.arrow{font-size:9px;margin-left:3px}.up{color:var(--kill)}.down{color:var(--scale)}
+.bdot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:middle}
+.bdot.nd{background:var(--nd)}.bdot.wait{background:var(--wait)}.bdot.scale{background:var(--scale)}.bdot.kill{background:var(--kill)}
+/* promo label chips — same palette as the Ad Library report */
+.pmchip{font-size:9px;font-weight:700;padding:1px 6px;border-radius:4px;border:1px solid;white-space:nowrap;letter-spacing:.02em;line-height:1.5}
+.pmchip.pm-main{background:#fdeaea;border-color:#f4c4c4;color:#a13a3a}
+.pmchip.pm-both{background:#f1e8fa;border-color:#dcc8ef;color:#6b3f96}
+.pmchip.pm-none{background:#eef1f4;border-color:#d5dbe1;color:#5a6672}
+.pmchip.pm-unk{background:#fff;border-color:var(--edge);color:var(--muted2);font-weight:600}
+</style></head>
+<body>
+<div class="topbar"><div class="topbar-in">
+  <a class="tb-home" href="https://adsrepo.com" target="_blank" rel="noopener">adsrepo.com &rarr;</a>
+  <div class="tb-logos">${LOGO_CLIENT ? `<img class="tb-client" src="${LOGO_CLIENT}" alt="${esc(ACCOUNT_LABEL)}">` : ''}${LOGO_CLIENT && LOGO_AGENCY ? '<span class="tb-sep"></span>' : ''}${LOGO_AGENCY ? `<img class="tb-agency" src="${LOGO_AGENCY}" alt="">` : ''}</div>
+</div></div>
+<header>
+  <div class="hwrap">
+    <h1>Creative Buckets - Meta Ads</h1>
+    <div class="sub">${esc(ACCOUNT_LABEL)} &nbsp;·&nbsp; ${cur.startDate} → ${cur.endDate} (${cur.days} days) &nbsp;·&nbsp; CRR = spend ÷ revenue (7d&nbsp;click) &nbsp;·&nbsp; billed in ${CURRENCY}</div>
+    <div class="controls">
+      <div class="ctl"><label>Target CRR <span class="val" id="v_target"></span></label>
+        <input type="range" id="s_target" min="1" max="${targetMax}" step="1">
+        <div class="hint">How much ad spend per 100 ${SYMBOL} of revenue you can afford. At or below = winner, 3× above = loser. <span class="roashint" id="v_roas"></span></div></div>
+      <div class="ctl"><label>Spend threshold <span class="val" id="v_thresh"></span></label>
+        <input type="range" id="s_thresh" min="10" max="${threshMax}" step="10">
+        <div class="hint">Minimum spend before an ad is judged. Under it → Not enough data.</div></div>
+    </div>
+  </div>
+</header>
+
+<div class="wrap">
+  <div class="timeaxis">
+    <div class="tahead">
+      <span class="talabel">Time</span>
+      <div class="tacontrols">
+        <div class="periodwrap">
+          <button id="periodBtn" class="periodbtn"><svg class="cal" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg><span id="periodLabel">Last 30 days</span><span class="caret">▾</span></button>
+          <div id="periodPop" class="periodpop" style="display:none">
+            <div class="ppresets" id="presets"></div>
+            <div class="pcal">
+              <div class="pcalhead">
+                <button class="pnav" id="calPrev">‹</button>
+                <div class="pmonths"><span id="mo0"></span><span id="mo1"></span></div>
+                <button class="pnav" id="calNext">›</button>
+              </div>
+              <div class="pgrids"><div id="grid0" class="pgrid"></div><div id="grid1" class="pgrid"></div></div>
+              <div class="pfoot">
+                <div class="pinputs"><span id="fFrom" class="pin"></span><span class="tdash">–</span><span id="fTo" class="pin"></span></div>
+                <div class="pactions"><button id="calCancel" class="pbtn">Cancel</button><button id="calUpdate" class="pbtn primary">Update</button></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="granbtns">
+          <button data-g="day" class="granbtn on">Day</button>
+          <button data-g="week" class="granbtn">Week</button>
+          <button data-g="month" class="granbtn">Month</button>
+        </div>
+      </div>
+    </div>
+    <div class="tarow">
+      <input type="range" id="s_day" min="0" step="1">
+      <div class="draghint" id="dragHint"><span class="dhand">👆</span><span class="dhtext">Drag me — watch the creatives move day by day</span></div>
+    </div>
+    <div class="taends"><span id="ta_start"></span><span class="taday" id="v_day"></span><span id="ta_end">today →</span></div>
+  </div>
+  <div class="plot">
+    <div class="plottop">
+      <div class="aggstats">
+        <div class="aggbox"><span class="agglab" id="aggScope">Spend</span><span class="aggval" id="aggSpend">-</span></div>
+        <div class="aggbox"><span class="agglab">Revenue</span><span class="aggval" id="aggRev">-</span></div>
+        <div class="aggbox"><span class="agglab">CRR <span class="info" title="Per-ad revenue double-counts purchases that several ads touched, so this reads roughly 8-12% better than the same period in Ads Manager at account level. Use it to rank creatives against each other, not as the account's true blended CRR.">ⓘ</span></span><span class="aggval" id="aggCrr">-</span></div>
+      </div>
+      <div class="promowrap"${HAS_PROMO ? '' : ' style="display:none"'}>
+        <span class="promolab2">Promo</span>
+        <div class="promoseg">
+          <button class="promobtn on" data-promo="">All ads</button>
+          <button class="promobtn" data-promo="Non-promo">Non-promo</button>
+          <button class="promobtn" data-promo="Promo - main message">Promo · main</button>
+          <button class="promobtn" data-promo="Promo - secondary message">Promo · secondary</button>
+        </div>
+      </div>
+      <label class="toggle"><span class="tglab">Active only</span><input type="checkbox" id="activeOnly"><span class="tgtrack"><span class="tgknob"></span></span></label>
+    </div>
+    <svg id="scatter" viewBox="0 0 1000 560" preserveAspectRatio="none"></svg>
+    <div class="tip" id="tip"></div>
+  </div>
+  <div class="barwrap">
+    <div class="bartitle">Spend distribution across buckets <span class="bartotal" id="barTotal"></span></div>
+    <div class="stacked" id="stacked"></div>
+    <div class="barlegend" id="barLegend"></div>
+  </div>
+
+  <div class="listhead">
+    <span class="pill all" id="filterPill">All creatives</span>
+    <div class="dropfilters">
+      <select id="fCampaign" class="dropfilter"><option value="">All campaigns</option></select>
+      <select id="fAdset" class="dropfilter"><option value="">All ad sets</option></select>
+      <select id="fAd" class="dropfilter"><option value="">All ads</option></select>
+      <select id="fStatus" class="dropfilter"><option value="">All statuses</option><option value="active">Active</option><option value="paused">Paused</option></select>
+      <select id="fPromo" class="dropfilter"${HAS_PROMO ? '' : ' style="display:none"'}><option value="">All promotion</option><option value="Non-promo">Non-promo</option><option value="Promo - main message">Promo · main</option><option value="Promo - secondary message">Promo · secondary</option></select>
+    </div>
+    <span class="clr" id="clearBtn" style="display:none">clear filter ✕</span>
+  </div>
+  <div class="tablecard">
+  <table>
+    <thead><tr>
+      <th class="chkcol"></th>
+      <th data-s="name">Creative</th>
+      <th data-s="bucket">Bucket</th>
+      <th data-s="active">Status</th>
+      <th data-s="spend" class="num">Spend</th>
+      <th data-s="revenue" class="num">Revenue</th>
+      <th data-s="purchases" class="num">Purch.</th>
+      <th data-s="crr" class="num">CRR</th>
+      <th data-s="roas" class="num">ROAS</th>
+      <th data-s="spend3d" class="num">Spend 3d/day</th>
+      <th data-s="crr3d" class="num">CRR 3d</th>
+      <th data-s="ctr" class="num">CTR</th>
+      <th data-s="days" class="num">Days</th>
+    </tr></thead>
+    <tbody id="tbody"></tbody>
+  </table>
+  </div>
+</div>
+
+<div class="lb" id="lb">
+  <div class="lbinner">
+    <button class="lbclose" id="lbClose" title="Close (Esc)">×</button>
+    <button class="lbnav lbprev" id="lbPrev" title="Previous (←)">‹</button>
+    <button class="lbnav lbnext" id="lbNext" title="Next (→)">›</button>
+    <img class="lbimg" id="lbImg" src="" alt="">
+    <div class="lbbar">
+      <div><div class="lbname" id="lbName"></div><div class="lbmeta" id="lbMeta"></div></div>
+    </div>
+  </div>
+</div>
+
+<script>
+const ADS = ${jsonForScript(ads)};
+const DAYS_AXIS = ${JSON.stringify(DAYS_AXIS)};   // every fetched day, sorted
+const D = ${JSON.stringify({ defTarget, defSpendThresh })};
+const CUR = ${JSON.stringify(SYMBOL)};            // currency symbol, from the ad account
+
+// money formatter — symbol comes from the account, never hardcoded
+function money(v){ return CUR==='Kč' ? Math.round(v).toLocaleString()+' Kč' : CUR+Math.round(v).toLocaleString(); }
+
+// ---- date range + granularity (client-side, no re-fetch) ----
+const DATA_MIN = DAYS_AXIS[0], DATA_MAX = DAYS_AXIS[DAYS_AXIS.length-1];
+let rangeStart = DAYS_AXIS[Math.max(0, DAYS_AXIS.length-30)];   // default: last 30 fetched days
+let rangeEnd = DATA_MAX;
+let gran = 'day';                    // 'day' | 'week' | 'month' — slider step granularity
+let AXIS = [];                       // slider stops (subset of DAYS_AXIS in range, thinned by gran)
+let dayIdx = 0;                      // index into AXIS (set to last stop after buildAxis)
+
+// build the slider's stop list from the selected range + granularity.
+// day = every day; week = every 7th day; month = one stop per calendar month.
+// the range's last day is always the final stop so "today" is reachable.
+function buildAxis(){
+  const inRange = DAYS_AXIS.filter(d => d>=rangeStart && d<=rangeEnd);
+  let stops;
+  if(gran==='day'){ stops = inRange.slice(); }
+  else if(gran==='week'){ stops = inRange.filter((d,i)=> i%7===0); }
+  else { // month: last day present for each YYYY-MM
+    const byMonth={}; for(const d of inRange) byMonth[d.slice(0,7)]=d; stops=Object.values(byMonth);
+  }
+  if(stops[stops.length-1]!==inRange[inRange.length-1]) stops.push(inRange[inRange.length-1]);
+  AXIS = stops.length ? stops : inRange.slice(-1);
+  dayIdx = AXIS.length-1;
+}
+buildAxis();
+const LABELS = { nd:'Not enough data', wait:'Wait', scale:'Scale', kill:'Kill' };
+const BUCKET_COLOR = { nd:'#94a3b8', wait:'#f59e0b', scale:'#16a34a', kill:'#dc2626' };
+let filter = null;        // active bucket filter (null = all)
+let selIds = new Set();   // selected ad ids (checkboxes + dot clicks). empty = none selected.
+let activeOnly = false;   // "Active only" toggle — default OFF: show all ads (active + paused)
+let fCamp='', fAds='', fAd='';   // cascading dropdown filters: campaign / ad set / ad
+let fStatus='';                  // status (active/paused)
+// No media filter: Meta's creative pass is permanently rate limited on this account, so
+// media_type is 'unknown' for every ad — a video/image dropdown would filter on a field
+// that carries no signal. The promo filter took its place in the UI.
+let fPromo='';                   // promo label filter ('' = all); segment + dropdown share it
+let sortKey = 'spend', sortDir = -1;
+let visibleRows = [];            // rows as currently sorted+filtered; the lightbox steps through these
+
+const KILL_MULT = 3;
+// final bucket for one creative.
+// CRR is inverse ROAS, so LOWER is better — identical direction to CPA on the lead-gen
+// variant, which is why these rules are unchanged from it.
+function classify(a, t){
+  if(a.spend < t.thresh) return 'nd';                       // spend gate — not judged yet
+  // no revenue at all: stays "not enough data" until it burns the kill gate, then kill.
+  // never "wait" — there's nothing to wait on without a single purchase.
+  if(!(a.revenue > 0)) return a.spend >= t.thresh * KILL_MULT ? 'kill' : 'nd';
+  if(a.crr >= t.target * KILL_MULT) return 'kill';
+  if(a.crr <= t.target) return 'scale';
+  return 'wait';
+}
+
+// Cumulative state of every ad from rangeStart up to and including the given day (YYYY-MM-DD).
+// Sums only days inside the selected date range, so picking "last 14 days" starts fresh at
+// the range start rather than accumulating the whole window.
+function snapshotFor(upto){
+  const out = [];
+  for(const a of ADS){
+    const win = a.daily.filter(d => d.date>=rangeStart && d.date<=upto);
+    let spend=0, revenue=0, purchases=0, impr=0, clicks=0, activeDays=0;
+    for(const d of win){ spend+=d.spend; revenue+=d.revenue; purchases+=d.purchases; impr+=d.impr; clicks+=d.clicks; if(d.impr>0) activeDays++; }
+    if(spend<=0) continue;                                   // hasn't started spending yet by this day
+    // last-3-days rollup ending on the selected day
+    const l3 = win.slice(-3);
+    const s3 = l3.reduce((s,d)=>s+d.spend,0), r3 = l3.reduce((s,d)=>s+d.revenue,0);
+    // "active on the selected day" = it spent money that exact day (ran that day)
+    const today = a.daily.find(d => d.date===upto);
+    const activeToday = !!(today && today.spend>0);
+    out.push({
+      id:a.id, name:a.name, adset:a.adset, campaign:a.campaign, media:a.media, active:a.active,
+      activeToday,
+      thumb:a.thumb, image:a.image, prevCrr:a.prevCrr, promo:a.promo,
+      spend:Math.round(spend*100)/100, revenue:Math.round(revenue*100)/100, purchases,
+      crr: revenue>0 ? Math.round(spend/revenue*1000)/10 : null,
+      roas: revenue>0 ? Math.round(revenue/spend*100)/100 : null,
+      ctr: impr>0 ? Math.round(clicks/impr*10000)/100 : 0,
+      days: activeDays,
+      spend3d: l3.length ? Math.round(s3/l3.length*100)/100 : null,
+      crr3d: r3>0 ? Math.round(s3/r3*1000)/10 : null,
+    });
+  }
+  return out;
+}
+
+function fmtCrr(a){
+  if(a.crr == null) return '<span class="crr-none">-</span>';
+  let arrow='';
+  if(a.prevCrr != null && a.prevCrr>0){
+    const d=a.crr-a.prevCrr;
+    if(Math.abs(d)/a.prevCrr>=0.03) arrow = d>0 ? ' <span class="arrow up">▲</span>' : ' <span class="arrow down">▼</span>';
+  }
+  return a.crr.toFixed(1)+'%'+arrow;
+}
+function crrCls(a,t){ return a.crr==null?'crr-none':(a.crr<=t.target?'crr-good':(a.crr>=t.target*KILL_MULT?'crr-bad':'')); }
+function crr3dCls(a,t){ return a.crr3d==null?'crr-none':(a.crr3d<=t.target?'crr-good':(a.crr3d>=t.target*KILL_MULT?'crr-bad':'')); }
+function img(a){ return a.thumb||a.image; }
+
+// promo label as a small coloured chip, matching the Ad Library report's colours
+const HAS_PROMO = ${HAS_PROMO};
+const PROMO_CLS = {
+  'Promo - main message':'pm-main',
+  'Promo - secondary message':'pm-both',
+  'Non-promo':'pm-none',
+  '${UNCLASSIFIED}':'pm-unk',
+};
+const PROMO_SHORT = {
+  'Promo - main message':'Promo · main',
+  'Promo - secondary message':'Promo · secondary',
+  'Non-promo':'Non-promo',
+  '${UNCLASSIFIED}':'—',
+};
+function promoChip(a){
+  const p=a.promo||'${UNCLASSIFIED}';
+  const t=p==='${UNCLASSIFIED}'?' title="Not in the Ad Library report, or a video (promo classification covered static creatives only)"':'';
+  return '<span class="pmchip '+(PROMO_CLS[p]||'pm-unk')+'"'+t+'>'+(PROMO_SHORT[p]||p)+'</span>';
+}
+
+// ---- scatter geometry (viewBox 1000×560) ----
+// main CRR plot on top, a separate "no revenue yet" strip at the bottom for ads without CRR.
+const PLOT = { x0:60, x1:960, y0:30, y1:400, w:0, h:0 };
+PLOT.w = PLOT.x1-PLOT.x0; PLOT.h = PLOT.y1-PLOT.y0;
+const STRIP = { y0:440, y1:488, mid:464 };                  // no-revenue band, below the plot
+const SVGNS='http://www.w3.org/2000/svg';
+
+// X = log10(spend) mapped across the plot. domain from data.
+const SPENDS = ADS.map(a=>a.spend).filter(v=>v>0);
+const SX_MIN = Math.log10(Math.max(5, Math.min(...SPENDS)) * 0.8);
+const SX_MAX = Math.log10(Math.max(...SPENDS) * 1.15);
+function xOf(spend){
+  const v = Math.log10(Math.max(1, spend));
+  const f = (v - SX_MIN) / (SX_MAX - SX_MIN || 1);
+  return PLOT.x0 + Math.max(0, Math.min(1, f)) * PLOT.w;
+}
+// Y = CRR %, 0 at bottom, capped at top. Ads without revenue pinned to the bottom strip.
+// The cap is clamped to a sane multiple of the kill line: a single ad at CRR 600% would
+// otherwise squash every real creative into the bottom pixel of the plot.
+let CY_MAX = 10;
+function computeCyMax(t){
+  const crrs = ADS.filter(a=>a.crr!=null).map(a=>a.crr).sort((x,y)=>x-y);
+  const p95 = crrs.length ? crrs[Math.floor((crrs.length-1)*0.95)] : t.target*3;
+  CY_MAX = Math.max(t.target*3.2, Math.min(p95*1.1, t.target*6));
+}
+function yOf(crr){
+  if(crr==null) return STRIP.mid;                          // no-revenue ads sit in the bottom strip
+  const f = crr / CY_MAX;
+  return PLOT.y1 - Math.max(0, Math.min(1, f)) * PLOT.h;
+}
+// dot radius scales with spend (area ∝ spend)
+const MAX_SPEND = Math.max(1, ...ADS.map(a=>a.spend));
+function rOf(spend){ return 4 + Math.sqrt(Math.max(0,spend)/MAX_SPEND) * 16; }
+
+function el(ns, tag, attrs){ const e=document.createElementNS(ns,tag); for(const k in attrs) e.setAttribute(k,attrs[k]); return e; }
+
+const dotEls={};   // ad id -> its <circle>, kept across renders so positions can animate
+function drawScatter(t, snap){
+  const svg=document.getElementById('scatter');
+  // wipe only the static background layer; the dots live in a persistent <g> that we keep.
+  let bg=document.getElementById('bgLayer'), dots=document.getElementById('dotLayer');
+  if(!dots){
+    bg=el(SVGNS,'g',{id:'bgLayer'}); dots=el(SVGNS,'g',{id:'dotLayer'});
+    svg.innerHTML=''; svg.appendChild(bg); svg.appendChild(dots);
+  } else {
+    bg.innerHTML='';   // redraw static parts (zones/lines/axes depend on thresholds, not day)
+  }
+  const xT = xOf(t.thresh);          // vertical spend-threshold line
+  const yT = yOf(t.target);          // horizontal target-CRR line
+  const yK = yOf(t.target*KILL_MULT);// horizontal kill line
+
+  // spend share per bucket (for the "(NN%)" in each zone label)
+  const zoneSpend={nd:0,wait:0,scale:0,kill:0};
+  for(const a of snap){ zoneSpend[classify(a,t)] += a.spend; }
+  const zoneTotal=Object.values(zoneSpend).reduce((s,v)=>s+v,0)||1;
+
+  // zone rectangles (background), clickable → filter. left column = nd (full height).
+  const zones=[
+    {b:'nd',   x:PLOT.x0, y:PLOT.y0, w:xT-PLOT.x0, h:PLOT.h},                 // left = not enough data
+    {b:'scale',x:xT,      y:yT,      w:PLOT.x1-xT, h:PLOT.y1-yT},             // right & CRR good
+    {b:'wait', x:xT,      y:yK,      w:PLOT.x1-xT, h:yT-yK},                  // right, between kill & target
+    {b:'kill', x:xT,      y:PLOT.y0, w:PLOT.x1-xT, h:yK-PLOT.y0},            // right & CRR very high
+  ];
+  for(const z of zones){
+    if(z.w<=0||z.h<=0) continue;
+    const r=el(SVGNS,'rect',{class:'zone '+z.b+(filter===z.b?' sel':''),x:z.x,y:z.y,width:z.w,height:z.h,rx:4,'data-b':z.b});
+    r.addEventListener('click',()=>setFilter(z.b));
+    bg.appendChild(r);
+    // zone label — inline font + colour so SVG text renders in Raleway on file://
+    const lb=el(SVGNS,'text',{class:'zoneLabel',x:z.x+10,y:z.y+20,fill:BUCKET_COLOR[z.b],
+      'font-family':"'Raleway',sans-serif",'font-size':'14','font-weight':'500','letter-spacing':'0.06em'});
+    const pct=Math.round(zoneSpend[z.b]/zoneTotal*100);
+    lb.textContent=LABELS[z.b].toUpperCase()+' ('+pct+'%)'; lb.style.pointerEvents='none';
+    bg.appendChild(lb);
+  }
+  // threshold lines (only inside the main plot)
+  bg.appendChild(el(SVGNS,'line',{class:'threshline',x1:xT,y1:PLOT.y0,x2:xT,y2:PLOT.y1}));
+  bg.appendChild(el(SVGNS,'line',{class:'threshline',x1:PLOT.x0,y1:yT,x2:PLOT.x1,y2:yT}));
+  bg.appendChild(el(SVGNS,'line',{class:'threshline',x1:xT,y1:yK,x2:PLOT.x1,y2:yK}));
+
+  // "no revenue yet" strip below the plot — ads with no purchase, positioned by spend only
+  bg.appendChild(el(SVGNS,'rect',{x:PLOT.x0,y:STRIP.y0,width:PLOT.w,height:STRIP.y1-STRIP.y0,rx:4,
+    fill:'#f8fafc',stroke:'#e5e7eb','stroke-width':1}));
+  bg.appendChild(txt(PLOT.x0+8, STRIP.y0-14, 'NO REVENUE YET (no CRR - placed by spend only)', 'axislabel', 'start'));
+
+  // axes labels
+  bg.appendChild(txt(PLOT.x0+PLOT.w/2, STRIP.y1+42, 'SPEND (log) →', 'axislabel', 'middle'));
+  const yl=txt(12, PLOT.y0+PLOT.h/2, 'CRR (%) ↑', 'axislabel', 'middle');
+  yl.setAttribute('transform',\`rotate(-90 12 \${PLOT.y0+PLOT.h/2})\`); bg.appendChild(yl);
+
+  // x ticks at nice spend values within domain — below the strip
+  [10,25,50,100,250,500,1000,2500,5000].forEach(v=>{
+    const lx=xOf(v); if(lx<PLOT.x0-1||lx>PLOT.x1+1) return;
+    bg.appendChild(el(SVGNS,'line',{class:'gridline',x1:lx,y1:STRIP.y1,x2:lx,y2:STRIP.y1+4}));
+    bg.appendChild(txt(lx, STRIP.y1+18, money(v), 'ticklabel', 'middle'));
+  });
+  // y ticks: target + kill get labels (ROAS shown alongside — same number, familiar framing)
+  bg.appendChild(txt(PLOT.x0-6, yT+3, t.target+'%', 'ticklabel', 'end'));
+  bg.appendChild(txt(PLOT.x0-6, yK+3, (t.target*KILL_MULT)+'%', 'ticklabel', 'end'));
+
+  // dots — from the day snapshot (cumulative state as of the selected day)
+  const counts={nd:0,wait:0,scale:0,kill:0};
+  const spends={nd:0,wait:0,scale:0,kill:0};
+  const present={};
+  for(const a of snap){
+    a._bucket=classify(a,t); counts[a._bucket]++; spends[a._bucket]+=a.spend; present[a.id]=a;
+  }
+  // Create each ad's <circle> ONCE, in whole-window spend order (stable stacking: big under small).
+  if(!dots.childElementCount){
+    const initOrder=ADS.slice().sort((x,y)=>y.spend-x.spend);
+    for(const ref of initOrder){
+      const c=el(SVGNS,'circle',{class:'pt nd',cx:0,cy:0,r:2,'data-id':ref.id});
+      c.__x=xOf(ref.spend); c.__y=yOf(ref.crr); c.__r=rOf(ref.spend);   // current animated values
+      c.setAttribute('cx',c.__x); c.setAttribute('cy',c.__y); c.setAttribute('r',c.__r);
+      c.addEventListener('click',(e)=>{ e.stopPropagation(); if(c.__ad) toggleSel(c.__ad.id); });
+      c.addEventListener('mousemove',(e)=>{ if(c.__ad) showTip(e,c.__ad); });
+      c.addEventListener('mouseleave',hideTip);
+      dotEls[ref.id]=c; dots.appendChild(c);
+    }
+  }
+  // Set each dot's TARGET position/size; class+visibility apply immediately, position tweened in JS.
+  for(const id in dotEls){
+    const c=dotEls[id], a=present[id];
+    if(!a){ c.style.display='none'; c.__ad=null; continue; }
+    let dim='';
+    if(selIds.size) dim = selIds.has(a.id) ? '' : ' dim';   // selection wins: highlight chosen, dim rest
+    else if(filter) dim = filter===a._bucket ? '' : ' dim';
+    const sel = selIds.has(a.id) ? ' sel':'';
+    c.__ad=a;
+    c.setAttribute('class','pt '+a._bucket+dim+sel);
+    c.setAttribute('data-b',a._bucket);
+    c.style.display='';
+    c.__tx=xOf(a.spend); c.__ty=yOf(a.crr); c.__tr=rOf(a.spend);   // targets to animate toward
+  }
+  animateDots();
+  drawStackedBar(counts, spends);
+}
+
+// JS tween of cx/cy/r toward each dot's __tx/__ty/__tr targets (SVG attrs can't CSS-transition).
+let animRAF=null, animStart=null;
+const ANIM_MS=450;
+function animateDots(){
+  if(animRAF) cancelAnimationFrame(animRAF);
+  for(const id in dotEls){ const c=dotEls[id]; c.__sx=c.__x; c.__sy=c.__y; c.__sr=c.__r; }
+  animStart=null;
+  const ease=p=>1-Math.pow(1-p,3);   // easeOutCubic
+  function step(ts){
+    if(animStart==null) animStart=ts;
+    const p=Math.min(1,(ts-animStart)/ANIM_MS), e=ease(p);
+    for(const id in dotEls){
+      const c=dotEls[id];
+      if(c.__tx==null) continue;
+      c.__x=c.__sx+(c.__tx-c.__sx)*e;
+      c.__y=c.__sy+(c.__ty-c.__sy)*e;
+      c.__r=c.__sr+(c.__tr-c.__sr)*e;
+      c.setAttribute('cx',c.__x); c.setAttribute('cy',c.__y); c.setAttribute('r',c.__r);
+    }
+    if(p<1) animRAF=requestAnimationFrame(step); else animRAF=null;
+  }
+  animRAF=requestAnimationFrame(step);
+}
+
+// horizontal stacked bar: segment width = share of total spend
+function drawStackedBar(counts, spends){
+  const order=['nd','wait','scale','kill'];
+  const totalSpend=order.reduce((s,b)=>s+spends[b],0) || 1;
+  set('barTotal', money(totalSpend)+' total');
+  const bar=document.getElementById('stacked'); bar.innerHTML='';
+  for(const b of order){
+    const pct=spends[b]/totalSpend*100;
+    if(pct<=0) continue;
+    const seg=document.createElement('div');
+    seg.className='seg '+b+(filter&&filter!==b?' dim':'');
+    seg.style.width=pct+'%';
+    seg.title=LABELS[b]+' - '+money(spends[b])+' ('+pct.toFixed(1)+'% of spend, '+counts[b]+' ads)';
+    if(pct>=8) seg.textContent=Math.round(pct)+'%';
+    seg.addEventListener('click',()=>setFilter(b));
+    bar.appendChild(seg);
+  }
+  // legend below with count + spend + %
+  const leg=document.getElementById('barLegend'); leg.innerHTML='';
+  for(const b of order){
+    const pct=Math.round(spends[b]/totalSpend*100);
+    const item=document.createElement('div');
+    item.className='blg '+b+(filter&&filter!==b?' dim':'');
+    item.innerHTML='<span class="sw"></span><span class="bn">'+LABELS[b]+'</span>'+
+      '<span class="bm"><b class="bspend">'+money(spends[b])+' ('+pct+'%)</b> · '+counts[b]+' ads</span>';
+    item.addEventListener('click',()=>setFilter(b));
+    leg.appendChild(item);
+  }
+}
+function txt(x,y,s,cls,anchor){ const e=el(SVGNS,'text',{x,y,class:cls,'text-anchor':anchor||'start'}); e.textContent=s; return e; }
+
+const tip=document.getElementById('tip');
+function showTip(e,a){
+  const rect=document.querySelector('.plot').getBoundingClientRect();
+  tip.style.display='block';
+  tip.style.left=(e.clientX-rect.left+12)+'px';
+  tip.style.top=(e.clientY-rect.top+12)+'px';
+  tip.innerHTML='<b>'+a.name+'</b>'+LABELS[a._bucket]+' · '+money(a.spend)+' spend · '+money(a.revenue)+' rev'+
+    '<br>CRR '+(a.crr==null?'-':a.crr.toFixed(1)+'%')+(a.roas!=null?' · ROAS '+a.roas.toFixed(2):'')+' · '+a.purchases+' purch.';
+}
+function hideTip(){ tip.style.display='none'; }
+
+// While the time slider is being dragged we skip the table: rewriting 150+ rows of innerHTML
+// (each with an img) on every input event costs tens of ms, and the resulting layout churn
+// makes the browser drop the drag — the thumb would only respond to clicks, never to dragging.
+// The scatter and the stat tiles still update live; the table catches up on release.
+let skipList = false;
+
+function render(){
+  const t={target:+val('s_target'),thresh:+val('s_thresh')};
+  set('v_target',t.target+'%'); set('v_thresh',money(t.thresh));
+  // ROAS echo — same threshold, the framing most people carry in their head
+  set('v_roas','= ROAS '+(100/t.target).toFixed(2)+' · kill line '+(t.target*KILL_MULT)+'% (ROAS '+(100/(t.target*KILL_MULT)).toFixed(2)+')');
+  computeCyMax(t);
+  let snap = snapshotFor(AXIS[dayIdx]);
+  if(activeOnly) snap = snap.filter(a=>a.activeToday);   // "Active only" → only ads that spent on the selected day
+  if(fCamp) snap = snap.filter(a=>a.campaign===fCamp);   // cascading campaign / ad set / ad filters
+  if(fAds)  snap = snap.filter(a=>a.adset===fAds);
+  if(fAd)   snap = snap.filter(a=>a.name===fAd);
+  if(fStatus) snap = snap.filter(a=>fStatus==='active'?a.active:!a.active);   // status (Meta now)
+  if(fPromo)  snap = snap.filter(a=>a.promo===fPromo);                        // promo label
+  updateDayLabel();
+  updateAggStats(snap, t);
+  drawScatter(t, snap);
+  if(skipList){
+    // keep visibleRows in step with the plot even when the table is not redrawn,
+    // so the lightbox never walks a stale list
+    for(const a of snap) a._bucket=classify(a,t);
+    visibleRows = filter ? snap.filter(a=>a._bucket===filter) : snap;
+  } else {
+    renderList(t, snap);
+  }
+}
+
+// aggregate Spend + Revenue + CRR of what's currently in focus.
+// priority: checkbox selection > clicked bucket/zone > all shown ads.
+// CRR = total spend / total revenue (weighted), not an average of per-ad CRRs.
+function updateAggStats(snap, t){
+  let pool, scope;
+  if(selIds.size){ pool = snap.filter(a=>selIds.has(a.id)); scope = 'Spend ('+pool.length+' selected)'; }
+  else if(filter){ pool = snap.filter(a=>classify(a,t)===filter); scope = 'Spend ('+LABELS[filter]+')'; }
+  else { pool = snap; scope = 'Spend'; }
+  let spend=0, revenue=0;
+  for(const a of pool){ spend+=a.spend; revenue+=a.revenue; }
+  set('aggScope', scope);
+  set('aggSpend', money(spend));
+  set('aggRev', money(revenue));
+  const crrEl=document.getElementById('aggCrr');
+  crrEl.innerHTML = revenue>0
+    ? (spend/revenue*100).toFixed(1)+'%<span class="sm">ROAS '+(revenue/spend).toFixed(2)+'</span>'
+    : '-';
+}
+
+// day-slider label: "Day D / N · YYYY-MM-DD" (today = last day of the whole dataset)
+function updateDayLabel(){
+  const cur = AXIS[dayIdx];
+  const isToday = cur===DATA_MAX;
+  const unit = gran==='week' ? 'Week' : gran==='month' ? 'Month' : 'Day';
+  set('v_day', unit+' '+(dayIdx+1)+' / '+AXIS.length+' · '+cur+(isToday?' (today)':''));
+}
+
+function renderList(t, snap){
+  // table mirrors the graph: cumulative state as of the selected day/range.
+  for(const a of snap) a._bucket=classify(a,t);
+  let rows = snap.slice();
+  if(filter) rows = rows.filter(a=>a._bucket===filter);     // bucket filter still hides other buckets
+  // selection does NOT hide rows — selected stay bright, the rest just dim (handled per-row below)
+  const dir=sortDir;
+  rows.sort((x,y)=>{
+    let vx=x[sortKey], vy=y[sortKey];
+    if(sortKey==='name'||sortKey==='bucket'||sortKey==='promo'){
+      const pick=(o)=> sortKey==='bucket'?o._bucket : (sortKey==='promo'?(o.promo||''):o.name);
+      return dir*String(pick(x)||'').localeCompare(String(pick(y)||''));
+    }
+    // null CRR sorts last regardless of direction intent: "no data" is not "best".
+    if(sortKey==='crr'){ vx=x.crr==null?Infinity:x.crr; vy=y.crr==null?Infinity:y.crr; }
+    if(sortKey==='crr3d'){ vx=x.crr3d==null?Infinity:x.crr3d; vy=y.crr3d==null?Infinity:y.crr3d; }
+    if(sortKey==='roas'){ vx=x.roas==null?-1:x.roas; vy=y.roas==null?-1:y.roas; }
+    if(sortKey==='spend3d'){ vx=x.spend3d==null?-1:x.spend3d; vy=y.spend3d==null?-1:y.spend3d; }
+    return dir*((vx||0)-(vy||0));
+  });
+  // keep the rows exactly as sorted/filtered, so the lightbox's ← → walk the same order
+  visibleRows = rows;
+  const tb=document.getElementById('tbody');
+  tb.innerHTML = rows.map(a=>{
+    const im=img(a);
+    // No media badge: media_type is 'unknown' for every ad on this rate-limited account,
+    // so a ▶/▢/? badge would be pure noise. The thumbnail shows the creative instead.
+    const rowDim = selIds.size && !selIds.has(a.id) ? ' rowdim' : '';   // dim non-selected when any picked
+    const checked = selIds.has(a.id) ? ' checked' : '';
+    return \`<tr class="\${a.active?'':'paused'}\${rowDim}">
+      <td class="chkcol"><input type="checkbox" class="rowchk" data-id="\${a.id}"\${checked}></td>
+      <td><div class="tname">\${im?\`<img class="tthumb" src="\${im}" loading="lazy" alt="" data-id="\${a.id}" title="Click to enlarge">\`:'<div class="tnoimg" title="No creative image in the Ad Library scrape"></div>'}<div class="nmwrap"><span class="nm">\${a.name}</span>\${HAS_PROMO?promoChip(a):''}</div></div></td>
+      <td><span class="bdot \${a._bucket}"></span>\${LABELS[a._bucket]}</td>
+      <td>\${a.active?'<span class="st on"><span class="d"></span>Active</span>':'<span class="st off"><span class="d"></span>Paused</span>'}</td>
+      <td class="num">\${money(a.spend)}</td>
+      <td class="num">\${money(a.revenue)}</td>
+      <td class="num">\${a.purchases}</td>
+      <td class="num \${crrCls(a,t)}">\${fmtCrr(a)}</td>
+      <td class="num">\${a.roas==null?'<span class="crr-none">-</span>':a.roas.toFixed(2)}</td>
+      <td class="num">\${a.spend3d==null?'<span class="crr-none">-</span>':money(a.spend3d)}</td>
+      <td class="num \${crr3dCls(a,t)}">\${a.crr3d==null?'<span class="crr-none">-</span>':a.crr3d.toFixed(1)+'%'}</td>
+      <td class="num">\${a.ctr.toFixed(2)}%</td>
+      <td class="num">\${a.days}</td>
+    </tr>\`;
+  }).join('') || '<tr><td colspan="13" style="color:var(--muted);text-align:center;padding:16px">no creatives in this bucket</td></tr>';
+
+  // wire the row checkboxes (toggle selection)
+  document.querySelectorAll('.rowchk').forEach(chk=>chk.addEventListener('change',()=>toggleSel(chk.dataset.id)));
+
+  const pill=document.getElementById('filterPill');
+  if(selIds.size){ pill.className='pill all'; pill.textContent=selIds.size+' selected'; document.getElementById('clearBtn').style.display=''; }
+  else if(filter){ pill.className='pill '+filter; pill.textContent=LABELS[filter]+' ('+rows.length+')'; document.getElementById('clearBtn').style.display=''; }
+  else { pill.className='pill all'; pill.textContent='All creatives ('+rows.length+')'; document.getElementById('clearBtn').style.display='none'; }
+}
+
+// clicking a zone → filter that bucket (clears any selection)
+function setFilter(b){ selIds.clear(); filter = (filter===b)?null:b; render(); }
+// toggle an ad in/out of the selection (dot click or row checkbox)
+function toggleSel(id){ filter=null; if(selIds.has(id)) selIds.delete(id); else selIds.add(id); render(); }
+
+function val(id){return document.getElementById(id).value}
+function set(id,v){document.getElementById(id).textContent=v}
+
+document.getElementById('clearBtn').addEventListener('click',()=>{filter=null;selIds.clear();render();});
+document.querySelectorAll('th[data-s]').forEach(th=>th.addEventListener('click',()=>{
+  const k=th.dataset.s; if(sortKey===k) sortDir*=-1; else {sortKey=k; sortDir=(k==='name'||k==='bucket'||k==='promo')?1:-1;} render();
+}));
+
+// Two INDEPENDENT sliders. Unlike the lead-gen variant there is no "multiple" coupling:
+// a spend gate expressed as a multiple of a percentage target would be meaningless.
+const sTarget=document.getElementById('s_target'), sThresh=document.getElementById('s_thresh');
+sTarget.value=D.defTarget;
+sThresh.value=D.defSpendThresh;
+sTarget.addEventListener('input',render);
+sThresh.addEventListener('input',render);
+
+// Make each value label click-to-edit: click the number, type a value,
+// Enter/blur applies it to the matching slider (clamped) and re-renders.
+function makeEditable(labelId, slider){
+  const span=document.getElementById(labelId);
+  span.style.cursor='text'; span.title='click to edit';
+  span.addEventListener('click',()=>{
+    if(span.querySelector('input')) return;
+    const cur=+slider.value;
+    const inp=document.createElement('input');
+    inp.type='number'; inp.value=cur; inp.min=slider.min; inp.max=slider.max; inp.step=slider.step;
+    inp.className='valedit';
+    span.textContent=''; span.appendChild(inp); inp.focus(); inp.select();
+    const commit=()=>{
+      let v=parseFloat(inp.value);
+      if(!isNaN(v)){
+        v=Math.max(+slider.min, Math.min(+slider.max, v));
+        slider.value=v;
+      }
+      render();                        // repaint label either way
+    };
+    inp.addEventListener('keydown',e=>{ if(e.key==='Enter') inp.blur(); if(e.key==='Escape'){ inp.value=cur; inp.blur(); } });
+    inp.addEventListener('blur',commit);
+  });
+}
+makeEditable('v_target', sTarget);
+makeEditable('v_thresh', sThresh);
+
+// "Active only" toggle
+document.getElementById('activeOnly').addEventListener('change',e=>{ activeOnly=e.target.checked; render(); });
+
+// ---- cascading Campaign / Ad Set / Ad dropdowns ----
+const selCamp=document.getElementById('fCampaign'), selAds=document.getElementById('fAdset'), selAd=document.getElementById('fAd');
+function fillSelect(sel, values, chosen, allLabel){
+  sel.innerHTML='<option value="">'+allLabel+'</option>'+
+    values.map(v=>'<option value="'+v.replace(/"/g,'&quot;')+'"'+(v===chosen?' selected':'')+'>'+v+'</option>').join('');
+  sel.classList.toggle('set', !!chosen);
+}
+function uniq(arr){ return [...new Set(arr)].sort((a,b)=>a.localeCompare(b)); }
+function populateDropdowns(){
+  // campaigns: all; ad sets: only within chosen campaign; ads: only within chosen ad set (cascade)
+  fillSelect(selCamp, uniq(ADS.map(a=>a.campaign)), fCamp, 'All campaigns');
+  let adsetPool = ADS.filter(a=>!fCamp||a.campaign===fCamp);
+  fillSelect(selAds, uniq(adsetPool.map(a=>a.adset)), fAds, 'All ad sets');
+  let adPool = adsetPool.filter(a=>!fAds||a.adset===fAds);
+  fillSelect(selAd, uniq(adPool.map(a=>a.name)), fAd, 'All ads');
+}
+selCamp.addEventListener('change',()=>{ fCamp=selCamp.value; fAds=''; fAd=''; populateDropdowns(); render(); });
+selAds.addEventListener('change',()=>{ fAds=selAds.value; fAd=''; populateDropdowns(); render(); });
+selAd.addEventListener('change',()=>{ fAd=selAd.value; populateDropdowns(); render(); });
+
+// status + media dropdowns (independent, just AND with the rest)
+const selStatus=document.getElementById('fStatus');
+selStatus.addEventListener('change',()=>{ fStatus=selStatus.value; selStatus.classList.toggle('set',!!fStatus); render(); });
+
+// ---- promo label filter ----
+// The segmented control next to "Active only" and the dropdown in the filter row are two
+// views of ONE state (fPromo), so changing either updates the other. Without that they
+// would drift apart and show contradictory selections.
+const selPromo=document.getElementById('fPromo');
+function syncPromoUI(){
+  if(selPromo){ selPromo.value=fPromo; selPromo.classList.toggle('set',!!fPromo); }
+  document.querySelectorAll('.promobtn').forEach(b=>b.classList.toggle('on', b.dataset.promo===fPromo));
+}
+function setPromo(v){ fPromo=v; syncPromoUI(); render(); }
+if(selPromo) selPromo.addEventListener('change',()=>setPromo(selPromo.value));
+document.querySelectorAll('.promobtn').forEach(b=>b.addEventListener('click',()=>setPromo(b.dataset.promo)));
+syncPromoUI();
+populateDropdowns();
+
+// ---- time-axis: range + granularity + day slider ----
+const sDay=document.getElementById('s_day');
+
+// date helpers (YYYY-MM-DD strings)
+const MONTHS=['January','February','March','April','May','June','July','August','September','October','November','December'];
+function ymd(d){ return d.toISOString().slice(0,10); }
+function parseD(s){ return new Date(s+'T00:00:00'); }
+function fmtNice(s){ const d=parseD(s); return d.getDate()+' '+MONTHS[d.getMonth()].slice(0,3)+' '+d.getFullYear(); }
+function addMonths(d,n){ return new Date(d.getFullYear(), d.getMonth()+n, 1); }
+
+// point the slider at the current AXIS and refresh the visible labels
+function syncTimeUI(){
+  sDay.max=AXIS.length-1; sDay.value=dayIdx;
+  document.getElementById('ta_start').textContent=rangeStart;
+  document.getElementById('ta_end').textContent=(rangeEnd===DATA_MAX?'today →':rangeEnd);
+  const isPreset=PRESET_LABEL(); document.getElementById('periodLabel').textContent = isPreset || (fmtNice(rangeStart)+' – '+fmtNice(rangeEnd));
+}
+// if the current range matches a "last N days" preset, return its label, else null
+function PRESET_LABEL(){
+  if(rangeEnd!==DATA_MAX) return null;
+  for(const n of [7,14,28,30]){ if(rangeStart===DAYS_AXIS[Math.max(0,DAYS_AXIS.length-n)]) return 'Last '+n+' days'; }
+  if(rangeStart===DATA_MIN) return 'Maximum';
+  return null;
+}
+function applyRange(from,to){
+  rangeStart = from<DATA_MIN?DATA_MIN:from;
+  rangeEnd   = to>DATA_MAX?DATA_MAX:to;
+  if(rangeStart>rangeEnd){ const s=rangeStart; rangeStart=rangeEnd; rangeEnd=s; }
+  buildAxis(); syncTimeUI(); render();
+}
+
+// granularity buttons
+document.querySelectorAll('.granbtn').forEach(b=>b.addEventListener('click',()=>{
+  document.querySelectorAll('.granbtn').forEach(x=>x.classList.remove('on'));
+  b.classList.add('on'); gran=b.dataset.g; buildAxis(); syncTimeUI(); render();
+}));
+// Drag = plot only (see skipList above); the table is rebuilt once the thumb is released.
+// 'change' fires on release for mouse/touch and on every keypress for arrow keys, so both
+// input methods end with a full render.
+sDay.addEventListener('pointerdown',()=>{ skipList=true; });
+sDay.addEventListener('input',()=>{ dayIdx=+sDay.value; render(); });
+function endDayDrag(){
+  if(!skipList) return;
+  skipList=false;
+  render();
+}
+sDay.addEventListener('change',endDayDrag);
+window.addEventListener('pointerup',endDayDrag);
+window.addEventListener('pointercancel',endDayDrag);
+
+// ---- calendar popover ----
+const periodBtn=document.getElementById('periodBtn'), pop=document.getElementById('periodPop');
+let calMonth=addMonths(parseD(DATA_MAX),-1);   // left month shown; right = calMonth+1
+let selFrom=rangeStart, selTo=rangeEnd, pickStage=0;  // pickStage 0 = pick start next
+
+function buildPresets(){
+  const box=document.getElementById('presets'); box.innerHTML='';
+  const items=[['Last 7 days',7],['Last 14 days',14],['Last 28 days',28],['Last 30 days',30],['Maximum',9999]];
+  for(const [lab,n] of items){
+    const b=document.createElement('button'); b.className='ppreset'; b.textContent=lab;
+    b.addEventListener('click',()=>{
+      selFrom = n>=9999 ? DATA_MIN : DAYS_AXIS[Math.max(0,DAYS_AXIS.length-n)];
+      selTo=DATA_MAX; pickStage=0; calMonth=addMonths(parseD(selTo),-1); drawCal();
+    });
+    box.appendChild(b);
+  }
+}
+function monthGrid(base, gridEl, hdrEl){
+  hdrEl.textContent=MONTHS[base.getMonth()]+' '+base.getFullYear();
+  gridEl.innerHTML='';
+  ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].forEach(d=>{ const h=document.createElement('div'); h.className='pgh'; h.textContent=d; gridEl.appendChild(h); });
+  const first=new Date(base.getFullYear(),base.getMonth(),1);
+  let lead=(first.getDay()+6)%7;                 // Mon-first offset
+  for(let i=0;i<lead;i++){ const e=document.createElement('div'); e.className='pday mut'; gridEl.appendChild(e); }
+  const dim=new Date(base.getFullYear(),base.getMonth()+1,0).getDate();
+  for(let day=1;day<=dim;day++){
+    const ds=ymd(new Date(base.getFullYear(),base.getMonth(),day));
+    const cell=document.createElement('div'); cell.textContent=day;
+    const disabled = ds<DATA_MIN || ds>DATA_MAX;
+    let cls='pday'+(disabled?' off':'');
+    if(!disabled){
+      if(ds===selFrom||ds===selTo) cls+=' edge';
+      else if(ds>selFrom&&ds<selTo) cls+=' inrange';
+      cell.addEventListener('click',()=>{
+        if(pickStage===0){ selFrom=ds; selTo=ds; pickStage=1; }
+        else { if(ds<selFrom){ selTo=selFrom; selFrom=ds; } else selTo=ds; pickStage=0; }
+        drawCal();
+      });
+    }
+    cell.className=cls; gridEl.appendChild(cell);
+  }
+}
+function drawCal(){
+  monthGrid(calMonth, document.getElementById('grid0'), document.getElementById('mo0'));
+  monthGrid(addMonths(calMonth,1), document.getElementById('grid1'), document.getElementById('mo1'));
+  document.getElementById('fFrom').textContent=fmtNice(selFrom);
+  document.getElementById('fTo').textContent=fmtNice(selTo);
+  const pl=(function(){ if(selTo!==DATA_MAX) return null; for(const n of [7,14,28,30]){ if(selFrom===DAYS_AXIS[Math.max(0,DAYS_AXIS.length-n)]) return 'Last '+n+' days'; } if(selFrom===DATA_MIN) return 'Maximum'; return null; })();
+  document.querySelectorAll('.ppreset').forEach(b=>b.classList.toggle('on', b.textContent===pl));
+}
+function openPop(){ selFrom=rangeStart; selTo=rangeEnd; pickStage=0; calMonth=addMonths(parseD(rangeEnd),-1); drawCal(); pop.style.display='flex'; }
+function closePop(){ pop.style.display='none'; }
+periodBtn.addEventListener('click',(e)=>{ e.stopPropagation(); pop.style.display==='none'?openPop():closePop(); });
+pop.addEventListener('click',e=>e.stopPropagation());
+document.addEventListener('click',closePop);
+document.getElementById('calPrev').addEventListener('click',()=>{ calMonth=addMonths(calMonth,-1); drawCal(); });
+document.getElementById('calNext').addEventListener('click',()=>{ calMonth=addMonths(calMonth,1); drawCal(); });
+document.getElementById('calCancel').addEventListener('click',closePop);
+document.getElementById('calUpdate').addEventListener('click',()=>{ applyRange(selFrom,selTo); closePop(); });
+
+// ---- creative lightbox ----
+// Clicking a row thumbnail opens the bigger copy (thumbs/<id>@full.jpg, written alongside
+// the small one by extract-thumbs.cjs). Arrows step through whatever the table currently
+// shows, so the lightbox honours the active filters instead of walking all 154 ads.
+const lb=document.getElementById('lb'), lbImg=document.getElementById('lbImg');
+const lbName=document.getElementById('lbName'), lbMeta=document.getElementById('lbMeta');
+let lbList=[], lbIdx=-1;
+
+function fullSrc(a){ return a.thumb ? a.thumb.replace(/\\.jpg$/, '@full.jpg') : ''; }
+
+function lbShow(i){
+  if(!lbList.length) return;
+  lbIdx=(i+lbList.length)%lbList.length;          // wrap around at both ends
+  const a=lbList[lbIdx];
+  // fall back to the small image if the @full copy is missing, rather than a broken icon
+  lbImg.onerror=()=>{ lbImg.onerror=null; lbImg.src=a.thumb||''; };
+  lbImg.src=fullSrc(a);
+  lbImg.alt=a.name||'';
+  lbName.textContent=a.name||'';
+  lbMeta.textContent=[
+    LABELS[a._bucket]||'',
+    a.promo||'',
+    money(a.spend)+' spend',
+    money(a.revenue)+' rev',
+    a.crr==null?'CRR -':'CRR '+a.crr.toFixed(1)+'%',
+    a.roas==null?'':'ROAS '+a.roas.toFixed(2),
+    (lbIdx+1)+' / '+lbList.length,
+  ].filter(Boolean).join('  ·  ');
+  lb.classList.add('on');
+}
+function lbClose(){ lb.classList.remove('on'); lbImg.src=''; lbIdx=-1; }
+
+// delegated: rows are re-rendered constantly, so bind once on the table body
+document.getElementById('tbody').addEventListener('click',e=>{
+  const img=e.target.closest('.tthumb');
+  if(!img) return;
+  e.stopPropagation();                             // don't toggle row selection
+  const id=img.dataset.id;
+  lbList=visibleRows.filter(a=>a.thumb);           // only ads that have an image
+  const i=lbList.findIndex(a=>a.id===id);
+  if(i>=0) lbShow(i);
+});
+
+document.getElementById('lbClose').addEventListener('click',lbClose);
+document.getElementById('lbPrev').addEventListener('click',e=>{ e.stopPropagation(); lbShow(lbIdx-1); });
+document.getElementById('lbNext').addEventListener('click',e=>{ e.stopPropagation(); lbShow(lbIdx+1); });
+lb.addEventListener('click',e=>{ if(e.target===lb) lbClose(); });   // click the backdrop to dismiss
+document.addEventListener('keydown',e=>{
+  if(!lb.classList.contains('on')) return;
+  if(e.key==='Escape') lbClose();
+  else if(e.key==='ArrowLeft') lbShow(lbIdx-1);
+  else if(e.key==='ArrowRight') lbShow(lbIdx+1);
+});
+
+// ---- first-visit hint on the time slider ----
+// The slider is the page's least discoverable control, so point at it once. The pulse ring
+// is positioned over the native thumb (which cannot be styled with a sibling animation
+// directly), and both it and the hand disappear on the first real interaction.
+const HINT_KEY='creativeBucketsDragHintSeen';
+const dragHint=document.getElementById('dragHint');
+let thumbPulse=null;
+
+function thumbLeft(){
+  // mirror the native thumb position: 16px wide, so its centre travels (width-16) px
+  const r=sDay.getBoundingClientRect(), max=+sDay.max||1, v=+sDay.value;
+  return 8 + (v/max)*(r.width-16);
+}
+function placePulse(){
+  if(!thumbPulse) return;
+  thumbPulse.style.left=thumbLeft()+'px';
+  thumbPulse.style.top=(sDay.offsetTop + sDay.offsetHeight/2)+'px';
+}
+// localStorage can throw on file:// or in private windows — treat that as "not seen yet"
+// rather than letting it break the page.
+function hintSeen(){ try{ return !!localStorage.getItem(HINT_KEY); }catch(e){ return false; } }
+
+function showHint(){
+  if(!dragHint) return;
+  if(hintSeen()) { dragHint.remove(); return; }
+  // Decorative only — never let a missing node take the dashboard down with it.
+  try{
+    thumbPulse=document.createElement('div');
+    thumbPulse.className='thumbpulse';
+    sDay.parentNode.appendChild(thumbPulse);
+    placePulse();
+    window.addEventListener('resize', placePulse);
+  }catch(e){ thumbPulse=null; }
+}
+function dismissHint(){
+  if(!dragHint || dragHint.classList.contains('hide')) return;
+  dragHint.classList.add('hide');
+  if(thumbPulse) thumbPulse.remove();
+  try{ localStorage.setItem(HINT_KEY,'1'); }catch(e){}
+  setTimeout(()=>dragHint.remove(), 400);
+}
+// any real use of the slider (or of the period picker, which does the same job) ends it
+sDay.addEventListener('pointerdown',dismissHint);
+sDay.addEventListener('input',dismissHint);
+sDay.addEventListener('keydown',dismissHint);
+periodBtn.addEventListener('click',dismissHint);
+
+buildPresets();
+syncTimeUI();
+render();
+
+// after the first render: the slider now has its real width and max, so the pulse ring
+// lands on the actual thumb rather than at a stale position
+showHint();
+</script>
+</body></html>`;
+
+const out = path.join(MA_DIR, 'buckets-matrix.html');
+fs.writeFileSync(out, html);
+console.log(`✓ Matrix written: ${out}`);
+console.log(`  account:   ${ACCOUNT_LABEL} (${cur.account}) · ${CURRENCY}`);
+console.log(`  window:    ${cur.startDate} → ${cur.endDate} (${cur.days} days) · ${ads.length} ads with spend`);
+if (_dropped) console.log(`  dropped:   ${_dropped} ads with no promo label ` +
+  `— every remaining ad is classified`);
+console.log(`  defaults:  target CRR ${defTarget}% (ROAS ${(100 / defTarget).toFixed(2)}, = account blended) · spend gate ${SYMBOL}${defSpendThresh}`);
+try { execSync(`open "${out}"`); } catch (e) { /* non-mac / headless: skip auto-open */ }