@blamejs/blamejs-shop 0.1.20 → 0.1.23

package/lib/admin.js

@@ -31,11 +31,42 @@
  */
 
 var pricing = require("./pricing");
+var collectionsModule = require("./collections");
 
 var b = require("./vendor/blamejs");
 
 var AUDIT_NAMESPACE = "shop_admin";
 
+// The console stylesheet ships as an external /assets file — an inline
+// <style> block (or inline style="" attributes) is refused by the strict
+// `style-src 'self'` CSP that governs container-served routes, which is
+// why the console renders unstyled when those are inlined. `'self'`
+// allows this file; the deploy's R2 asset sync uploads it. The `?v=` is
+// the per-release cache-buster; the sha384 Subresource Integrity digest
+// (b.crypto.sri, W3C SRI 1.0) makes the browser reject a tampered or
+// stale object. Same-origin, so no `crossorigin` is needed. Kept local
+// to this module per the admin renderer's no-cross-module convention; a
+// missing asset (e.g. a unit-test cwd) omits the attribute, never throws.
+var _assetFs = require("node:fs"); // allow:non-shop-require — one sync read of the bundled in-repo stylesheet to compute its SRI hash via b.crypto.sri (the primitive needs the bytes); no remote/write
+var _ASSET_VERSION = require("../package.json").version;
+var _SRI_CACHE = {};
+function _assetSri(relUnderThemeAssets) {
+  if (Object.prototype.hasOwnProperty.call(_SRI_CACHE, relUnderThemeAssets)) {
+    return _SRI_CACHE[relUnderThemeAssets];
+  }
+  var sri = null;
+  try {
+    sri = b.crypto.sri(_assetFs.readFileSync(__dirname + "/../themes/default/assets/" + relUnderThemeAssets), { algorithm: "sha384" });
+  } catch (_e) { sri = null; }
+  _SRI_CACHE[relUnderThemeAssets] = sri;
+  return sri;
+}
+function _adminStylesheetLink() {
+  var sri = _assetSri("css/admin.css");
+  return "<link rel=\"stylesheet\" href=\"/assets/themes/default/css/admin.css?v=" + _ASSET_VERSION + "\"" +
+    (sri ? " integrity=\"" + sri + "\"" : "") + ">";
+}
+
 // Conservative content-type → file-extension map for the upload route.
 // Unknown types fall back to no extension; the R2 object metadata still
 // carries the full content-type so the asset serves correctly either
@@ -221,11 +252,12 @@ function mount(router, deps) {
   var catalogImport = deps.catalogImport || null;   // bulk-import route disabled when absent
   var reviews       = deps.reviews       || null;   // moderation endpoints disabled when absent
   var returns       = deps.returns       || null;   // RMA moderation endpoints disabled when absent
+  var customers     = deps.customers     || null;   // read-only customers console disabled when absent
 
   // Which optional console sections are wired — gates their nav links so a
   // signed-in admin is never sent to a route that wasn't mounted. Passed
   // into every authed render call as `nav_available`.
-  var navAvailable = { returns: !!returns, reviews: !!reviews, subscriptions: !!deps.subscriptions, webhooks: !!deps.webhooks };
+  var navAvailable = { returns: !!returns, reviews: !!reviews, subscriptions: !!deps.subscriptions, webhooks: !!deps.webhooks, collections: !!deps.collections, customers: !!deps.customers, giftcards: !!deps.giftcards };
 
   try { b.audit.registerNamespace(AUDIT_NAMESPACE); } catch (_e) { /* idempotent */ }
 
@@ -755,6 +787,48 @@ function mount(router, deps) {
     },
   ));
 
+  // ---- customers (read-only) ------------------------------------------
+
+  // Operator-facing customer roster, newest first. READ-ONLY — no create /
+  // edit / delete (the storefront owns account mutation via passkey / OIDC
+  // ceremonies). The raw email is never stored, so the table shows the
+  // display name, a short id, the join date, the sign-in method (passkey
+  // count + linked OAuth providers), and the order count. Order counts +
+  // sign-in methods are resolved with bounded aggregate queries over the
+  // page's ids — no per-row N+1. Endpoint omitted when no customers
+  // primitive is wired.
+  if (customers) {
+    router.get("/admin/customers", _pageOrApi(true,
+      R(async function (req, res) {
+        var url    = req.url ? new URL(req.url, "http://localhost") : null;
+        var cursor = url && url.searchParams.get("cursor");
+        var limitS = url && url.searchParams.get("limit");
+        var limit  = limitS == null ? 50 : parseInt(limitS, 10);
+        var page = await customers.list({ cursor: cursor || undefined, limit: limit });
+        _json(res, 200, page);
+      }),
+      async function (req, res) {
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var cursor = url && url.searchParams.get("cursor");
+        var page = await customers.list({ cursor: cursor || undefined, limit: 100 });
+        var rows = page.rows || [];
+        var ids = rows.map(function (c) { return c.id; });
+        // One grouped query for order counts, one IN-bounded pair for
+        // sign-in methods — never a trip per row.
+        var counts  = await order.countsByCustomer(ids);
+        var methods = await customers.signInMethodsByCustomer(ids);
+        _sendHtml(res, 200, renderAdminCustomers({
+          shop_name: deps.shop_name, nav_available: navAvailable,
+          customers: rows,
+          order_counts:  counts,
+          passkey_counts: methods.passkeys,
+          oauth_providers: methods.oauth,
+          next_cursor: page.next_cursor || null,
+        }));
+      },
+    ));
+  }
+
   // ---- refunds --------------------------------------------------------
 
   if (payment) {
@@ -1350,6 +1424,393 @@ function mount(router, deps) {
     ));
   }
 
+  // ---- collections ----------------------------------------------------
+
+  // Operator-side console for manual + smart product collections (the
+  // customer-facing /collections pages already ship). Manual collections
+  // get a member manager (add by product id, remove, reorder); smart
+  // collections get a rule editor (field/op/value rows) plus a live
+  // preview of the products the rules currently match. Endpoints are
+  // omitted entirely when no collections primitive is wired.
+  var collections = deps.collections || null;
+  if (collections) {
+    // Form rule rows arrive as parallel arrays (rule_field[], rule_op[],
+    // rule_value[]) — or scalars when the operator submits a single row.
+    // Normalise to arrays, zip into a { all: [...] } rule set, and coerce
+    // numeric / array op values so the primitive's validator sees the
+    // shape it expects. Bad shapes throw TypeError, surfaced as a 400
+    // re-render the same way every other create form does.
+    function _asArray(v) {
+      if (v == null) return [];
+      return Array.isArray(v) ? v : [v];
+    }
+    function _rulesFromForm(body) {
+      var fields = _asArray(body.rule_field);
+      var ops    = _asArray(body.rule_op);
+      var values = _asArray(body.rule_value);
+      var all = [];
+      for (var i = 0; i < fields.length; i += 1) {
+        var field = fields[i];
+        var op    = ops[i];
+        var raw   = values[i];
+        // Skip wholly blank rows (the editor renders a spare empty row).
+        if ((field == null || field === "") && (raw == null || raw === "")) continue;
+        var value = _coerceRuleValue(field, op, raw);
+        all.push({ field: field, op: op, value: value });
+      }
+      if (all.length === 0) {
+        throw new TypeError("rules: add at least one rule (field, op, value)");
+      }
+      return { all: all };
+    }
+    function _coerceRuleValue(field, op, raw) {
+      var s = raw == null ? "" : String(raw);
+      // `in` / `not_in` take a comma-separated list; numeric fields parse
+      // each entry as an integer, others stay strings.
+      if (op === "in" || op === "not_in") {
+        return s.split(",").map(function (part) {
+          var t = part.trim();
+          return _isNumericField(field) ? _strictInt(t, "rule value") : t;
+        });
+      }
+      // `between` takes "lo,hi" — both strict integers.
+      if (op === "between") {
+        var parts = s.split(",");
+        if (parts.length !== 2) throw new TypeError("rules: 'between' value must be \"lo,hi\"");
+        return [_strictInt(parts[0].trim(), "rule lo"), _strictInt(parts[1].trim(), "rule hi")];
+      }
+      // Numeric comparison ops + numeric-field eq/neq parse as integers.
+      var numericOp = op === "gt" || op === "gte" || op === "lt" || op === "lte";
+      if (numericOp || (_isNumericField(field) && (op === "eq" || op === "neq"))) {
+        return _strictInt(s, "rule value");
+      }
+      return s;
+    }
+    function _isNumericField(field) {
+      return field === "price_minor" || field === "inventory_count" || field === "created_at";
+    }
+    // Strict integer parse — refuses "12abc" / "" / floats, unlike
+    // parseInt's loose prefix match. Money / count fields must be exact.
+    function _strictInt(s, label) {
+      if (typeof s !== "string" || !/^-?\d+$/.test(s.trim())) {
+        throw new TypeError("collections: " + label + " must be an integer");
+      }
+      var n = Number(s.trim());
+      if (!Number.isSafeInteger(n)) throw new TypeError("collections: " + label + " out of range");
+      return n;
+    }
+
+    function _cleanCreateMessage(e) {
+      return (e && e.message || "Couldn't create that collection.").replace(/^collections[.:]\s*/, "");
+    }
+
+    // Map the ?active= query to a collections.list filter: 1/true →
+    // active-only, 0/false → archived-only, absent → all.
+    function _collectionsFilter(activeS) {
+      if (activeS === "1" || activeS === "true")  return { active_only: true };
+      if (activeS === "0" || activeS === "false") return { archived_only: true };
+      return {};
+    }
+
+    async function _listForBrowser(filter) {
+      var rows = await collections.list(filter || {});
+      // Annotate each row with its current size: manual → member count,
+      // smart → matched-preview count. Both compose productsIn; the loop
+      // is bounded by the collection count (operators have tens, not
+      // thousands), so this is not an N+1 over an unbounded set.
+      for (var i = 0; i < rows.length; i += 1) {
+        var count = null;
+        try {
+          var p = await collections.productsIn({ slug: rows[i].slug, limit: 200 });
+          count = (p.rows || []).length;
+        } catch (_e) { count = null; }
+        rows[i]._count = count;
+      }
+      return rows;
+    }
+
+    // List content-negotiates: bearer → JSON (the raw list, unchanged for
+    // tooling); signed-in browser → the console table with an
+    // all/active/archived filter.
+    router.get("/admin/collections", _pageOrApi(true,
+      R(async function (req, res) {
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var activeS = url && url.searchParams.get("active");
+        var rows = await collections.list(_collectionsFilter(activeS));
+        _json(res, 200, { rows: rows });
+      }),
+      async function (req, res) {
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var activeS = url && url.searchParams.get("active");
+        var rows = await _listForBrowser(_collectionsFilter(activeS));
+        _sendHtml(res, 200, renderAdminCollections({
+          shop_name: deps.shop_name, nav_available: navAvailable, collections: rows,
+          active_filter: activeS,
+          created:  url && url.searchParams.get("created"),
+          archived: url && url.searchParams.get("archived"),
+          notice:   (url && url.searchParams.get("err")) ? "That action couldn't be completed for the collection." : null,
+        }));
+      },
+    ));
+
+    // Create content-negotiates: bearer → JSON 201 (manual or smart per
+    // body.type); browser form → create, then PRG. A bad shape (TypeError)
+    // re-renders the list with the validator's message rather than 500.
+    router.post("/admin/collections", _pageOrApi(false,
+      W("collection.create", async function (req, res) {
+        var body = req.body || {};
+        var col;
+        if (body.type === "smart") col = await collections.defineSmart(body);
+        else                       col = await collections.defineManual(body);
+        _json(res, 201, col);
+        return { id: col.slug };
+      }),
+      async function (req, res) {
+        var body = req.body || {};
+        var type = body.type === "smart" ? "smart" : "manual";
+        try {
+          if (type === "smart") {
+            await collections.defineSmart({
+              slug:          typeof body.slug === "string" ? body.slug.trim() : body.slug,
+              title:         body.title,
+              description:   body.description,
+              rules:         _rulesFromForm(body),
+              sort_strategy: body.sort_strategy || "newest",
+            });
+          } else {
+            await collections.defineManual({
+              slug:          typeof body.slug === "string" ? body.slug.trim() : body.slug,
+              title:         body.title,
+              description:   body.description,
+              sort_strategy: body.sort_strategy || "manual",
+            });
+          }
+        } catch (e) {
+          if (!(e instanceof TypeError)) throw e;
+          var rows = await _listForBrowser({});
+          return _sendHtml(res, 400, renderAdminCollections({
+            shop_name: deps.shop_name, nav_available: navAvailable, collections: rows,
+            notice: _cleanCreateMessage(e), form_type: type,
+          }));
+        }
+        b.audit.safeEmit({ action: AUDIT_NAMESPACE + ".collection.create", outcome: "success" });
+        _redirect(res, "/admin/collections?created=1");
+      },
+    ));
+
+    async function _detailModel(slug) {
+      var col = await collections.get(slug);
+      if (!col) return null;
+      var preview = null, members = null;
+      if (col.type === "manual") {
+        var pm = await collections.productsIn({ slug: slug, limit: 200 });
+        members = pm.rows || [];
+      } else {
+        var ps = await collections.productsIn({ slug: slug, limit: 50 });
+        preview = ps.rows || [];
+      }
+      return { collection: col, members: members, preview: preview };
+    }
+
+    // Detail content-negotiates: bearer → JSON (collection + members /
+    // preview); browser → the member manager (manual) or rule editor +
+    // preview (smart). A bad / unknown slug is a 404 page, never a 500.
+    router.get("/admin/collections/:slug", _pageOrApi(true,
+      R(async function (req, res) {
+        var model;
+        try { model = await _detailModel(req.params.slug); }
+        catch (e) { if (e instanceof TypeError) return _problem(res, 404, "collection-not-found", e.message); throw e; }
+        if (!model) return _problem(res, 404, "collection-not-found");
+        _json(res, 200, model);
+      }),
+      async function (req, res) {
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var model;
+        try { model = await _detailModel(req.params.slug); }
+        catch (e) { if (!(e instanceof TypeError)) throw e; model = null; }
+        if (!model) return _sendHtml(res, 404, renderAdminCollections({
+          shop_name: deps.shop_name, nav_available: navAvailable, collections: [], notice: "Collection not found.",
+        }));
+        _sendHtml(res, 200, renderAdminCollection({
+          shop_name: deps.shop_name, nav_available: navAvailable,
+          collection: model.collection, members: model.members, preview: model.preview,
+          rule_fields: collectionsModule.RULE_FIELDS, rule_ops: collectionsModule.RULE_OPS,
+          sort_strategies: collectionsModule.SORT_STRATEGIES,
+          saved:   url && url.searchParams.get("saved"),
+          updated: url && url.searchParams.get("updated"),
+          notice:  (url && url.searchParams.get("err")) ? "That action couldn't be completed." : null,
+        }));
+      },
+    ));
+
+    // Edit content-negotiates: bearer PATCH (the JSON contract) + browser
+    // POST /edit (HTML forms can't PATCH). Both update title / description
+    // / sort_strategy, and rules for smart. A bad shape is a 400 / notice.
+    router.patch("/admin/collections/:slug", W("collection.update", async function (req, res) {
+      var col;
+      try { col = await collections.update(req.params.slug, req.body || {}); }
+      catch (e) { if (e instanceof TypeError) return _problem(res, 400, "bad-request", e.message); throw e; }
+      if (!col) return _problem(res, 404, "collection-not-found");
+      _json(res, 200, col);
+      return { id: col.slug };
+    }));
+
+    router.post("/admin/collections/:slug/edit", _pageOrApi(false,
+      W("collection.update", async function (req, res) {
+        var col;
+        try { col = await collections.update(req.params.slug, req.body || {}); }
+        catch (e) { if (e instanceof TypeError) return _problem(res, 400, "bad-request", e.message); throw e; }
+        if (!col) return _problem(res, 404, "collection-not-found");
+        _json(res, 200, col);
+        return { id: col.slug };
+      }),
+      async function (req, res) {
+        var slug = req.params.slug;
+        var body = req.body || {};
+        var enc = encodeURIComponent(slug);
+        try {
+          var existing = await collections.get(slug);
+          if (!existing) return _redirect(res, "/admin/collections/" + enc + "?err=1");
+          var patch = {};
+          if (body.title !== undefined)       patch.title = body.title;
+          if (body.description !== undefined) patch.description = body.description;
+          if (body.sort_strategy)             patch.sort_strategy = body.sort_strategy;
+          if (existing.type === "smart" && (body.rule_field !== undefined || body.rule_op !== undefined)) {
+            patch.rules = _rulesFromForm(body);
+          }
+          if (Object.keys(patch).length === 0) return _redirect(res, "/admin/collections/" + enc + "?err=1");
+          await collections.update(slug, patch);
+        } catch (e) {
+          if (!(e instanceof TypeError)) throw e;
+          return _redirect(res, "/admin/collections/" + enc + "?err=1");
+        }
+        b.audit.safeEmit({ action: AUDIT_NAMESPACE + ".collection.update", outcome: "success", metadata: { slug: slug } });
+        _redirect(res, "/admin/collections/" + enc + "?updated=1");
+      },
+    ));
+
+    // Archive content-negotiates: bearer DELETE (soft archive) + browser
+    // POST /archive. An unknown / already-archived slug is a no-op notice
+    // (?err=1), never a false success.
+    router.delete("/admin/collections/:slug", W("collection.archive", async function (req, res) {
+      var col;
+      try { col = await collections.archive(req.params.slug); }
+      catch (e) { if (e instanceof TypeError) return _problem(res, 400, "bad-request", e.message); throw e; }
+      if (!col) return _problem(res, 404, "collection-not-found");
+      _json(res, 200, col);
+      return { id: col.slug };
+    }));
+
+    router.post("/admin/collections/:slug/archive", _pageOrApi(false,
+      W("collection.archive", async function (req, res) {
+        var col;
+        try { col = await collections.archive(req.params.slug); }
+        catch (e) { if (e instanceof TypeError) return _problem(res, 400, "bad-request", e.message); throw e; }
+        if (!col) return _problem(res, 404, "collection-not-found");
+        _json(res, 200, col);
+        return { id: col.slug };
+      }),
+      async function (req, res) {
+        var slug = req.params.slug;
+        var col = null;
+        try { col = await collections.archive(slug); }
+        catch (e) { if (!(e instanceof TypeError)) throw e; }
+        // archive() returns the row whether or not it flipped (already-
+        // archived re-returns the row); treat a missing row as the only
+        // err. An already-archived re-archive is idempotent, not an error.
+        if (!col) return _redirect(res, "/admin/collections?err=1");
+        b.audit.safeEmit({ action: AUDIT_NAMESPACE + ".collection.archive", outcome: "success", metadata: { slug: slug } });
+        _redirect(res, "/admin/collections?archived=1");
+      },
+    ));
+
+    // Manual member ops — browser POST routes (the JSON API composes
+    // addProduct / removeProduct / reorderProducts directly). Each PRGs
+    // back to the detail; a bad shape / unknown product is a ?err=1 notice.
+    function _memberRedirect(res, slug, ok) {
+      var enc = encodeURIComponent(slug);
+      return _redirect(res, "/admin/collections/" + enc + (ok ? "?updated=1" : "?err=1"));
+    }
+
+    router.post("/admin/collections/:slug/members/add", _pageOrApi(false,
+      W("collection.member_add", async function (req, res) {
+        var body = req.body || {};
+        var m;
+        try { m = await collections.addProduct({ collection_slug: req.params.slug, product_id: body.product_id }); }
+        catch (e) { if (e instanceof TypeError) return _problem(res, 400, "bad-request", e.message); throw e; }
+        _json(res, 201, m);
+        return { id: req.params.slug };
+      }),
+      async function (req, res) {
+        var slug = req.params.slug;
+        var body = req.body || {};
+        try {
+          await collections.addProduct({ collection_slug: slug, product_id: (body.product_id || "").trim() });
+        } catch (e) {
+          if (!(e instanceof TypeError)) throw e;
+          return _memberRedirect(res, slug, false);
+        }
+        b.audit.safeEmit({ action: AUDIT_NAMESPACE + ".collection.member_add", outcome: "success", metadata: { slug: slug } });
+        _memberRedirect(res, slug, true);
+      },
+    ));
+
+    router.post("/admin/collections/:slug/members/remove", _pageOrApi(false,
+      W("collection.member_remove", async function (req, res) {
+        var body = req.body || {};
+        var ok;
+        try { ok = await collections.removeProduct({ collection_slug: req.params.slug, product_id: body.product_id }); }
+        catch (e) { if (e instanceof TypeError) return _problem(res, 400, "bad-request", e.message); throw e; }
+        if (!ok) return _problem(res, 404, "collection-member-not-found");
+        _json(res, 200, { ok: true });
+        return { id: req.params.slug };
+      }),
+      async function (req, res) {
+        var slug = req.params.slug;
+        var body = req.body || {};
+        var ok = false;
+        try {
+          ok = await collections.removeProduct({ collection_slug: slug, product_id: (body.product_id || "").trim() });
+        } catch (e) { if (!(e instanceof TypeError)) throw e; }
+        if (!ok) return _memberRedirect(res, slug, false);
+        b.audit.safeEmit({ action: AUDIT_NAMESPACE + ".collection.member_remove", outcome: "success", metadata: { slug: slug } });
+        _memberRedirect(res, slug, true);
+      },
+    ));
+
+    router.post("/admin/collections/:slug/members/reorder", _pageOrApi(false,
+      W("collection.reorder", async function (req, res) {
+        var body = req.body || {};
+        var ids = Array.isArray(body.ordered_product_ids) ? body.ordered_product_ids : null;
+        if (!ids) return _problem(res, 400, "bad-request", "ordered_product_ids array required");
+        try { await collections.reorderProducts({ collection_slug: req.params.slug, ordered_product_ids: ids }); }
+        catch (e) { if (e instanceof TypeError) return _problem(res, 400, "bad-request", e.message); throw e; }
+        _json(res, 200, { ok: true });
+        return { id: req.params.slug };
+      }),
+      async function (req, res) {
+        var slug = req.params.slug;
+        var body = req.body || {};
+        // The reorder form posts the full ordered id list — a single hidden
+        // field of comma-joined ids, or repeated ordered_product_id rows.
+        var ids;
+        if (body.ordered_product_ids != null && typeof body.ordered_product_ids === "string") {
+          ids = body.ordered_product_ids.split(",").map(function (s) { return s.trim(); }).filter(Boolean);
+        } else {
+          ids = _asArray(body.ordered_product_id).map(function (s) { return String(s).trim(); }).filter(Boolean);
+        }
+        try {
+          await collections.reorderProducts({ collection_slug: slug, ordered_product_ids: ids });
+        } catch (e) {
+          if (!(e instanceof TypeError)) throw e;
+          return _memberRedirect(res, slug, false);
+        }
+        b.audit.safeEmit({ action: AUDIT_NAMESPACE + ".collection.reorder", outcome: "success", metadata: { slug: slug } });
+        _memberRedirect(res, slug, true);
+      },
+    ));
+  }
+
   // ---- analytics ------------------------------------------------------
 
   var analytics = deps.analytics || null;
@@ -1548,6 +2009,132 @@ function mount(router, deps) {
     }
   }
 
+  // ---- gift cards -----------------------------------------------------
+  //
+  // The ledger console: list issued cards (masked by code_hint + the
+  // original/remaining balance + status), drill into one card's ledger
+  // transactions (issue / redeem / adjust), and — when the ledger is
+  // wired — issue a new card from the console. The bearer JSON contract
+  // is unchanged; the signed-in browser session gets the rendered page.
+  // `giftcards` owns the card rows; `giftCardLedger` (optional) owns the
+  // append-only transaction history shown on the detail view.
+  var giftcards     = deps.giftcards || null;
+  var giftCardLedger = deps.giftCardLedger || null;
+  if (giftcards) {
+    // Issue a card. Bearer → JSON (the issued plaintext code is
+    // returned ONCE for the operator to deliver); browser form →
+    // issue, then PRG to the detail page so the code shows once.
+    router.post("/admin/gift-cards", _pageOrApi(false,
+      W("gift_card.issue", async function (req, res) {
+        var issued = await _issueGiftCard(req.body || {});
+        _json(res, 201, issued);
+        return { id: issued.id };
+      }),
+      async function (req, res) {
+        var issued;
+        try {
+          issued = await _issueGiftCard(req.body || {});
+        } catch (e) {
+          if (!(e instanceof TypeError)) throw e;
+          var rows = await giftcards.list({});
+          return _sendHtml(res, 400, renderAdminGiftCards({
+            shop_name: deps.shop_name, nav_available: navAvailable, cards: rows,
+            notice: e.message.replace(/^giftcards?[.:]\s*/i, ""),
+          }));
+        }
+        b.audit.safeEmit({ action: AUDIT_NAMESPACE + ".gift_card.issue", outcome: "success", metadata: { id: issued.id } });
+        _redirect(res, "/admin/gift-cards/" + issued.id + "?issued=" + encodeURIComponent(issued.code));
+      },
+    ));
+
+    router.get("/admin/gift-cards", _pageOrApi(true,
+      R(async function (req, res) {
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var status = url && url.searchParams.get("status");
+        var rows = await giftcards.list(status ? { status: status } : {});
+        _json(res, 200, { rows: rows });
+      }),
+      async function (req, res) {
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var status = url && url.searchParams.get("status");
+        var rows = await giftcards.list(status ? { status: status } : {});
+        _sendHtml(res, 200, renderAdminGiftCards({
+          shop_name: deps.shop_name, nav_available: navAvailable, cards: rows,
+          status_filter: status,
+          ledger_enabled: !!giftCardLedger,
+        }));
+      },
+    ));
+
+    router.get("/admin/gift-cards/:id", _pageOrApi(true,
+      R(async function (req, res) {
+        var card = await giftcards.getById(req.params.id);
+        if (!card) return _problem(res, 404, "gift-card-not-found");
+        var history = [];
+        if (giftCardLedger) {
+          try { history = (await giftCardLedger.history(req.params.id, { limit: 500 })).rows; }
+          catch (e) { if (!(e instanceof TypeError)) throw e; }
+        }
+        _json(res, 200, { card: card, ledger: history });
+      }),
+      async function (req, res) {
+        var card = await giftcards.getById(req.params.id);
+        var url = req.url ? new URL(req.url, "http://localhost") : null;
+        var issuedCode = url && url.searchParams.get("issued");
+        if (!card) {
+          return _sendHtml(res, 404, renderAdminGiftCard({
+            shop_name: deps.shop_name, nav_available: navAvailable, card: null,
+          }));
+        }
+        var history = [];
+        if (giftCardLedger) {
+          try { history = (await giftCardLedger.history(req.params.id, { limit: 500 })).rows; }
+          catch (e) { if (!(e instanceof TypeError)) throw e; }
+        }
+        _sendHtml(res, 200, renderAdminGiftCard({
+          shop_name: deps.shop_name, nav_available: navAvailable, card: card,
+          ledger: history, issued_code: issuedCode,
+        }));
+      },
+    ));
+  }
+
+  // Issue a card from operator input, recording the opening balance as
+  // a `manual` credit in the ledger (when wired) so the transaction
+  // history starts from the issuance event. Strict integer parsing of
+  // the amount; the giftcards primitive enforces the rest.
+  async function _issueGiftCard(body) {
+    var input = { currency: typeof body.currency === "string" ? body.currency.trim().toUpperCase() : body.currency };
+    if (body.amount_minor != null && body.amount_minor !== "") {
+      var n = typeof body.amount_minor === "number" ? body.amount_minor : parseInt(String(body.amount_minor), 10);
+      if (!Number.isInteger(n)) throw new TypeError("giftcards: amount_minor must be an integer (minor units)");
+      input.amount_minor = n;
+    }
+    if (body.issued_to_email) input.issued_to_email = String(body.issued_to_email).trim();
+    if (body.expires_at != null && body.expires_at !== "") {
+      var ex = typeof body.expires_at === "number" ? body.expires_at : parseInt(String(body.expires_at), 10);
+      if (!Number.isInteger(ex)) throw new TypeError("giftcards: expires_at must be an integer epoch-ms");
+      input.expires_at = ex;
+    }
+    var issued = await giftcards.issue(input);
+    if (giftCardLedger) {
+      // Opening credit so the ledger history starts from issuance.
+      // Best-effort: a ledger write failure must not lose the issued
+      // card (the card row + plaintext code already exist) — the
+      // operator can reconcile, and the card balance is authoritative
+      // on the card row. Swallow only the ledger fault.
+      try {
+        await giftCardLedger.credit({
+          gift_card_id: issued.id,
+          amount_minor: input.amount_minor,
+          source:       "manual",
+          source_ref:   "admin-issue",
+        });
+      } catch (_e) { /* drop-silent — card issued; ledger seed is advisory */ }
+    }
+    return issued;
+  }
+
   // ---- admin web pages (browser session + setup wizard) ---------------
   //
   // The operator signs in by pasting the ADMIN_API_KEY once; that sets a
@@ -1692,97 +2279,13 @@ var DASHBOARD_LAYOUT =
   "  <meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n" +
   "  <meta name=\"robots\" content=\"noindex,nofollow\">\n" +
   "  <title>Admin dashboard — {{shop_name}}</title>\n" +
-  "  <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n" +
-  "  <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n" +
-  "  <link href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n" +
-  "  <style>\n" +
-  "    :root { --ink:#191919; --ink-2:#414141; --mute:#727272; --hair:#d9d9d9; --paper:#ffffff; --bg:#fafafa; --accent:#fa4f09; --accent-d:#d8410a; }\n" +
-  "    * { box-sizing: border-box; }\n" +
-  "    html, body { margin:0; padding:0; background:var(--bg); }\n" +
-  "    body { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; color:var(--ink); font-size:15px; line-height:1.55; }\n" +
-  "    h1, h2, h3 { font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:-0.01em; margin:0 0 .65rem; }\n" +
-  "    .admin-header { background:var(--ink); color:var(--paper); border-bottom:3px solid var(--accent); }\n" +
-  "    .admin-header__inner { max-width:80rem; margin:0 auto; padding:1.2rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }\n" +
-  "    .admin-header h1 { color:var(--paper); font-size:1.1rem; margin:0; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }\n" +
-  "    .admin-header .brand-accent { color:var(--accent); }\n" +
-  "    main { max-width:80rem; margin:0 auto; padding:2.5rem 1.5rem 5rem; }\n" +
-  "    section { margin-bottom:2.5rem; }\n" +
-  "    section h2 { font-size:1.1rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); font-weight:600; margin-bottom:1rem; }\n" +
-  "    .stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(12rem, 1fr)); gap:1rem; }\n" +
-  "    .stat-card { background:var(--paper); border:1px solid var(--hair); border-radius:8px; padding:1.25rem 1.4rem; }\n" +
-  "    .stat-card .label { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mute); font-weight:600; }\n" +
-  "    .stat-card .value { font-family:'Montserrat',sans-serif; font-weight:700; font-size:1.8rem; color:var(--ink); margin-top:.35rem; line-height:1.1; }\n" +
-  "    .stat-card .value.accent { color:var(--accent); }\n" +
-  "    .panel { background:var(--paper); border:1px solid var(--hair); border-radius:8px; padding:1.5rem; }\n" +
-  "    .two-col { display:grid; grid-template-columns: 2fr 1fr; gap:1.5rem; align-items:start; }\n" +
-  "    @media (max-width: 56rem) { .two-col { grid-template-columns: 1fr; } }\n" +
-  "    table { width:100%; border-collapse:collapse; font-size:.9rem; }\n" +
-  "    thead th { text-align:left; padding:.65rem .75rem; border-bottom:2px solid var(--ink); font-family:'Montserrat',sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--mute); }\n" +
-  "    tbody td { padding:.65rem .75rem; border-bottom:1px solid var(--hair); }\n" +
-  "    tbody tr:last-child td { border-bottom:none; }\n" +
-  "    td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }\n" +
-  "    .status-pill { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; background:var(--bg); color:var(--ink-2); border:1px solid var(--hair); }\n" +
-  "    .status-pill.paid, .status-pill.fulfilling, .status-pill.shipped, .status-pill.delivered { background:#e9f5ec; color:#1f6b3a; border-color:#bfe1c9; }\n" +
-  "    .status-pill.refunded { background:#fff1eb; color:var(--accent-d); border-color:#f6c5af; }\n" +
-  "    .status-pill.cancelled { background:#f4f4f4; color:var(--mute); }\n" +
-  "    .status-pill.pending { background:#fff8e1; color:#7a5d0f; border-color:#f1e1a8; }\n" +
-  "    .spark { width:100%; height:8rem; background:var(--bg); border:1px solid var(--hair); border-radius:6px; padding:.5rem; }\n" +
-  "    .spark svg { display:block; width:100%; height:100%; }\n" +
-  "    .empty { color:var(--mute); font-style:italic; padding:1rem 0; text-align:center; }\n" +
-  "    .meta { color:var(--mute); font-size:.85rem; margin-bottom:1rem; }\n" +
-  "    .order-id { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.78rem; color:var(--ink-2); }\n" +
-  "    .form-field { display:block; margin-bottom:1.1rem; }\n" +
-  "    .form-field span { display:block; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--mute); font-weight:600; margin-bottom:.35rem; }\n" +
-  "    .form-field input { width:100%; max-width:28rem; padding:.6rem .75rem; border:1px solid var(--hair); border-radius:6px; font:inherit; }\n" +
-  "    .form-field input:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }\n" +
-  "    .form-field small { display:block; color:var(--mute); font-size:.78rem; margin-top:.3rem; }\n" +
-  "    .btn { display:inline-flex; align-items:center; gap:.4rem; background:var(--accent); color:var(--paper); border:1px solid var(--accent); padding:.6rem 1.1rem; border-radius:6px; font-family:'Montserrat',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; cursor:pointer; }\n" +
-  "    .btn:hover { background:var(--accent-d); border-color:var(--accent-d); }\n" +
-  "    .btn--ghost { background:transparent; color:var(--ink); border-color:var(--ink); }\n" +
-  "    .btn--ghost:hover { background:var(--ink); color:var(--paper); }\n" +
-  "    .btn--danger { background:transparent; color:var(--accent-d); border-color:var(--accent-d); }\n" +
-  "    .btn--danger:hover { background:var(--accent-d); color:var(--paper); }\n" +
-  "    .order-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.25rem; }\n" +
-  "    .chip { display:inline-block; padding:.3rem .8rem; border-radius:999px; border:1px solid var(--hair); color:var(--ink-2); text-decoration:none; font-size:.78rem; text-transform:capitalize; }\n" +
-  "    .chip:hover { border-color:var(--accent); }\n" +
-  "    .chip--on { background:var(--ink); color:var(--paper); border-color:var(--ink); }\n" +
-  "    .order-totals { width:100%; }\n" +
-  "    .order-totals td { padding:.3rem 0; }\n" +
-  "    .order-actions { display:flex; flex-wrap:wrap; gap:.6rem; }\n" +
-  "    .return-actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.25rem; }\n" +
-  "    .return-action { border:1px solid var(--hair); border-radius:8px; padding:1rem; }\n" +
-  "    .return-action h4 { margin:0 0 .6rem; font-size:.9rem; }\n" +
-  "    .review-card { margin-bottom:1rem; }\n" +
-  "    .review-card__head { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.5rem; }\n" +
-  "    .review-card__body { margin:.25rem 0 .75rem; white-space:pre-wrap; }\n" +
-  "    .review-stars { color:#c9821f; letter-spacing:.1em; }\n" +
-  "    .review-reject { display:inline-flex; gap:.4rem; align-items:center; }\n" +
-  "    .review-reject input { padding:.45rem .6rem; border:1px solid var(--hair); border-radius:6px; font-size:.82rem; }\n" +
-  "    .inv-row-form { display:flex; gap:.4rem; align-items:center; }\n" +
-  "    .inv-row-form input { padding:.4rem .5rem; border:1px solid var(--hair); border-radius:6px; font-size:.82rem; }\n" +
-  "    tr.row--low td { background:#fff8e1; }\n" +
-  "    .nav-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1rem; }\n" +
-  "    .nav-card { display:block; background:var(--paper); border:1px solid var(--hair); border-radius:8px; padding:1.4rem; text-decoration:none; color:var(--ink); }\n" +
-  "    .nav-card:hover { border-color:var(--accent); box-shadow:0 8px 20px -12px rgba(0,0,0,.25); }\n" +
-  "    .nav-card h3 { margin:0 0 .35rem; font-size:1.05rem; }\n" +
-  "    .nav-card p { margin:0; color:var(--mute); font-size:.88rem; }\n" +
-  "    .banner { padding:.9rem 1.1rem; border-radius:8px; margin-bottom:1.5rem; font-size:.92rem; }\n" +
-  "    .banner--warn { background:#fff8e1; border:1px solid #f1e1a8; color:#7a5d0f; }\n" +
-  "    .banner--ok { background:#e9f5ec; border:1px solid #bfe1c9; color:#1f6b3a; }\n" +
-  "    .banner--err { background:#fff1eb; border:1px solid #f6c5af; color:var(--accent-d); }\n" +
-  "    .actions-row { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-top:1.5rem; }\n" +
-  "    .admin-nav { background:var(--paper); border-bottom:1px solid var(--hair); }\n" +
-  "    .admin-nav__inner { max-width:80rem; margin:0 auto; padding:0 1.5rem; display:flex; gap:.1rem; flex-wrap:wrap; }\n" +
-  "    .admin-nav a { display:inline-block; padding:.85rem .9rem; color:var(--ink-2); text-decoration:none; font-size:.84rem; font-weight:600; border-bottom:2px solid transparent; }\n" +
-  "    .admin-nav a:hover { color:var(--ink); }\n" +
-  "    .admin-nav a.active { color:var(--accent); border-bottom-color:var(--accent); }\n" +
-  "  </style>\n" +
+  "  RAW_ADMIN_CSS\n" +
   "</head>\n" +
   "<body>\n" +
   "  <header class=\"admin-header\">\n" +
   "    <div class=\"admin-header__inner\">\n" +
   "      <h1>{{shop_name}} <span class=\"brand-accent\">/ admin</span></h1>\n" +
-  "      <span style=\"font-size:.8rem; color:var(--mute);\">{{window_label}}</span>\n" +
+  "      <span class=\"window-label\">{{window_label}}</span>\n" +
   "    </div>\n" +
   "  </header>\n" +
   "  {{nav}}\n" +
@@ -1903,11 +2406,11 @@ function renderDashboard(opts) {
   var twoCol =
     "<section><h2>Catalog + activity</h2><div class=\"two-col\">" +
     "  <div class=\"panel\">" +
-    "    <h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Top SKUs by units sold</h3>" +
+    "    <h3 class=\"subhead\">Top SKUs by units sold</h3>" +
     "    <table><thead><tr><th>SKU</th><th class=\"num\">Units</th><th class=\"num\">Revenue</th></tr></thead><tbody>" + topRows + "</tbody></table>" +
     "  </div>" +
     "  <div class=\"panel\">" +
-    "    <h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Recent orders</h3>" +
+    "    <h3 class=\"subhead\">Recent orders</h3>" +
     "    <table><thead><tr><th>Order</th><th>Status</th><th class=\"num\">Total</th></tr></thead><tbody>" + recentRows + "</tbody></table>" +
     "  </div>" +
     "</div></section>";
@@ -1943,9 +2446,12 @@ var ADMIN_NAV_ITEMS = [
   { key: "products",     href: "/admin/products",     label: "Products" },
   { key: "inventory",    href: "/admin/inventory",    label: "Inventory" },
   { key: "orders",       href: "/admin/orders",       label: "Orders" },
+  { key: "customers",    href: "/admin/customers",    label: "Customers",    requires: "customers" },
   { key: "returns",      href: "/admin/returns",      label: "Returns",      requires: "returns" },
   { key: "reviews",      href: "/admin/reviews",      label: "Reviews",      requires: "reviews" },
   { key: "subscriptions", href: "/admin/subscription-plans", label: "Subscriptions", requires: "subscriptions" },
+  { key: "collections",  href: "/admin/collections",  label: "Collections",  requires: "collections" },
+  { key: "giftcards",    href: "/admin/gift-cards",    label: "Gift cards",   requires: "giftcards" },
   { key: "webhooks",     href: "/admin/webhooks",     label: "Webhooks",     requires: "webhooks" },
   { key: "integrations", href: "/admin/integrations", label: "Integrations" },
   { key: "setup",        href: "/admin/setup",        label: "Setup" },
@@ -1970,7 +2476,9 @@ function _renderAdminShell(shopName, subtitle, bodyHtml, active, available) {
     window_label: subtitle || "",
     nav:          "RAW_NAV",
     body:         "RAW_BODY",
-  }).replace("RAW_NAV", _adminNav(active, available)).replace("RAW_BODY", bodyHtml);
+  }).replace("RAW_ADMIN_CSS", _adminStylesheetLink())
+    .replace("RAW_NAV", _adminNav(active, available))
+    .replace("RAW_BODY", bodyHtml);
 }
 
 function renderAdminLogin(opts) {
@@ -1978,18 +2486,24 @@ function renderAdminLogin(opts) {
   var err = opts.error
     ? "<div class=\"banner banner--err\">That key didn't match. Check the ADMIN_API_KEY this deployment was started with.</div>"
     : "";
+  var shopName = opts.shop_name || "blamejs.shop";
   var body =
-    "<section style=\"max-width:30rem;\">" +
-      "<h2>Sign in</h2>" + err +
-      "<form method=\"post\" action=\"/admin/login\">" +
-        "<label class=\"form-field\"><span>Admin API key</span>" +
-          "<input type=\"password\" name=\"token\" autocomplete=\"off\" autofocus required>" +
-          "<small>Paste the ADMIN_API_KEY this deployment was started with.</small>" +
-        "</label>" +
-        "<button type=\"submit\" class=\"btn\">Sign in</button>" +
-      "</form>" +
-    "</section>";
-  return _renderAdminShell(opts.shop_name, "Sign in", body, null);
+    "<div class=\"signin-wrap\">" +
+      "<div class=\"signin-card\">" +
+        "<div class=\"signin-mark\"><span class=\"dot\"></span>" + _htmlEscape(shopName) + " admin</div>" +
+        "<h2>Sign in</h2>" +
+        "<p class=\"signin-lede\">This console manages your shop's catalog, orders, and settings.</p>" +
+        err +
+        "<form method=\"post\" action=\"/admin/login\">" +
+          "<label class=\"form-field\"><span>Admin API key</span>" +
+            "<input type=\"password\" name=\"token\" autocomplete=\"off\" autofocus required>" +
+            "<small>The ADMIN_API_KEY this deployment was started with.</small>" +
+          "</label>" +
+          "<button type=\"submit\" class=\"btn\">Sign in</button>" +
+        "</form>" +
+      "</div>" +
+    "</div>";
+  return _renderAdminShell(shopName, "Sign in", body, null);
 }
 
 function renderAdminLanding(opts) {
@@ -2023,14 +2537,14 @@ function renderAdminSetup(opts) {
   var saved  = opts.saved  ? "<div class=\"banner banner--ok\">Saved. Your shop details are live.</div>" : "";
   var notice = opts.notice ? "<div class=\"banner banner--err\">" + _htmlEscape(opts.notice) + "</div>" : "";
   var body =
-    "<section style=\"max-width:34rem;\">" +
+    "<section class=\"mw-34\">" +
       "<h2>Shop setup</h2>" +
       "<p class=\"meta\">Set the basics customers see across the storefront. You can change these any time.</p>" +
       saved + notice +
       "<form method=\"post\" action=\"/admin/setup\">" +
         _setupField("Shop name", "shop_name", v.shop_name, "text", "Shown in the header, page titles, and emails.", " maxlength=\"80\" required") +
         _setupField("Contact email", "contact_email", v.contact_email, "email", "Where customer replies and operational mail land.", " maxlength=\"160\"") +
-        _setupField("Default currency", "currency", v.currency, "text", "3-letter ISO 4217 code (e.g. USD, EUR, GBP).", " maxlength=\"3\" style=\"text-transform:uppercase;max-width:8rem;\"") +
+        _setupField("Default currency", "currency", v.currency, "text", "3-letter ISO 4217 code (e.g. USD, EUR, GBP).", " maxlength=\"3\" class=\"input-code\"") +
         _setupField("Support URL", "support_url", v.support_url, "url", "Linked from the storefront footer (help centre, contact page).", " maxlength=\"300\"") +
         "<div class=\"actions-row\"><button type=\"submit\" class=\"btn\">Save shop details</button>" +
           "<a class=\"btn btn--ghost\" href=\"/admin\">Back</a></div>" +
@@ -2089,7 +2603,7 @@ function renderAdminIntegrations(opts) {
         "<thead><tr><th>Integration</th><th>Status</th><th>To enable</th></tr></thead>" +
         "<tbody>" + rows + "</tbody>" +
       "</table></div>" +
-      "<p class=\"meta\" style=\"margin-top:1.25rem;\">Sign in with Apple and PayPal are planned. “Sign in with Shop” / Shop Pay isn't available to a self-hosted store. See the README “Optional integrations” section for full setup steps.</p>" +
+      "<p class=\"meta mt-125\">Sign in with Apple and PayPal are planned. “Sign in with Shop” / Shop Pay isn't available to a self-hosted store. See the README “Optional integrations” section for full setup steps.</p>" +
       "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin\">Back</a></div>" +
     "</section>";
   return _renderAdminShell(opts.shop_name, "Integrations", body, "integrations", opts.nav_available);
@@ -2115,8 +2629,8 @@ function renderAdminProducts(opts) {
     : "<p class=\"empty\">No products yet — create your first one below.</p>";
   var body =
     "<section><h2>Products</h2>" + created + notice + table +
-      "<div class=\"panel\" style=\"margin-top:1.5rem; max-width:34rem;\">" +
-        "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">New product</h3>" +
+      "<div class=\"panel mt mw-34\">" +
+        "<h3 class=\"subhead\">New product</h3>" +
         "<form method=\"post\" action=\"/admin/products\">" +
           _setupField("Title", "title", "", "text", "", " maxlength=\"200\" required") +
           _setupField("Slug", "slug", "", "text", "Lowercase, hyphenated — the storefront URL.", " maxlength=\"200\" required") +
@@ -2220,12 +2734,12 @@ function renderAdminOrder(opts) {
   var actionForms = transitions.map(function (t) {
     if (t.on === "refund") {
       if (!opts.can_refund) return "";  // no payment intent — nothing to refund here
-      return "<form method=\"post\" action=\"/admin/orders/" + _htmlEscape(o.id) + "/refund\" style=\"display:inline;\">" +
+      return "<form method=\"post\" action=\"/admin/orders/" + _htmlEscape(o.id) + "/refund\" class=\"form-inline\">" +
         "<button class=\"btn btn--danger\" type=\"submit\">" + _htmlEscape(t.label) + "</button>" +
         "</form>";
     }
     var danger = (t.on === "cancel");
-    return "<form method=\"post\" action=\"/admin/orders/" + _htmlEscape(o.id) + "/transition\" style=\"display:inline;\">" +
+    return "<form method=\"post\" action=\"/admin/orders/" + _htmlEscape(o.id) + "/transition\" class=\"form-inline\">" +
       "<input type=\"hidden\" name=\"event\" value=\"" + _htmlEscape(t.on) + "\">" +
       "<button class=\"btn" + (danger ? " btn--danger" : "") + "\" type=\"submit\">" + _htmlEscape(t.label) + "</button>" +
       "</form>";
@@ -2233,7 +2747,7 @@ function renderAdminOrder(opts) {
   var actions = actionForms || "<span class=\"meta\">This order is in a final state — no further changes.</span>";
 
   var body =
-    "<section style=\"max-width:48rem;\">" +
+    "<section class=\"mw-48\">" +
       "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin/orders\">&larr; Orders</a></div>" +
       "<h2>Order <code class=\"order-id\">" + _htmlEscape(o.id.slice(0, 8)) + "</code> " +
         "<span class=\"status-pill " + _htmlEscape(o.status) + "\">" + _htmlEscape(o.status) + "</span></h2>" +
@@ -2241,19 +2755,73 @@ function renderAdminOrder(opts) {
         (o.payment_intent_id ? " · payment <code class=\"order-id\">" + _htmlEscape(o.payment_intent_id) + "</code>" : "") + "</p>" +
       moved + notice +
       "<div class=\"two-col\">" +
-        "<div class=\"panel\"><h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Items</h3>" + linesTable + "</div>" +
-        "<div class=\"panel\"><h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Ship to</h3>" +
+        "<div class=\"panel\"><h3 class=\"subhead\">Items</h3>" + linesTable + "</div>" +
+        "<div class=\"panel\"><h3 class=\"subhead\">Ship to</h3>" +
           (shipLines || "<span class=\"meta\">No shipping address.</span>") +
-          "<h3 style=\"font-size:.95rem; margin:1.25rem 0 .75rem;\">Totals</h3>" + totals +
+          "<h3 class=\"subhead subhead--sp\">Totals</h3>" + totals +
         "</div>" +
       "</div>" +
-      "<div class=\"panel\" style=\"margin-top:1.5rem;\"><h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Actions</h3>" +
+      "<div class=\"panel mt\"><h3 class=\"subhead\">Actions</h3>" +
         "<div class=\"order-actions\">" + actions + "</div>" +
       "</div>" +
     "</section>";
   return _renderAdminShell(opts.shop_name, "Order " + o.id.slice(0, 8), body, "orders", opts.nav_available);
 }
 
+// Read-only customer roster. The raw email is never stored (lookups are
+// keyed on a SHA3-512 namespace hash), so the table surfaces the display
+// name, a short id, the join date, the sign-in method (passkey count +
+// linked OAuth providers), and the order count. Order counts + sign-in
+// methods arrive as { customer_id: … } maps resolved by the route's
+// bounded aggregate queries — the renderer just looks them up, no work
+// per row beyond the lookup. No row actions: the storefront owns account
+// mutation via the passkey / OIDC ceremonies.
+function renderAdminCustomers(opts) {
+  opts = opts || {};
+  var customers = opts.customers || [];
+  var orderCounts    = opts.order_counts    || {};
+  var passkeyCounts  = opts.passkey_counts  || {};
+  var oauthProviders = opts.oauth_providers || {};
+
+  var rows = customers.map(function (c) {
+    var passkeys = passkeyCounts[c.id] || 0;
+    var providers = oauthProviders[c.id] || [];
+    // Sign-in method chips: one per passkey-count + one per linked OAuth
+    // provider. A customer mid-registration (no credential yet) shows none.
+    var methodCells = [];
+    if (passkeys > 0) {
+      methodCells.push("<span class=\"chip\">" + _htmlEscape(passkeys === 1 ? "1 passkey" : passkeys + " passkeys") + "</span>");
+    }
+    for (var i = 0; i < providers.length; i += 1) {
+      methodCells.push("<span class=\"chip\">" + _htmlEscape(providers[i]) + "</span>");
+    }
+    var method = methodCells.length ? methodCells.join(" ") : "<span class=\"meta\">—</span>";
+    var orders = orderCounts[c.id] || 0;
+    return "<tr>" +
+      "<td><strong>" + _htmlEscape(c.display_name) + "</strong></td>" +
+      "<td><code class=\"order-id\">" + _htmlEscape(String(c.id).slice(0, 8)) + "</code></td>" +
+      "<td>" + _htmlEscape(_fmtDate(c.created_at)) + "</td>" +
+      "<td>" + method + "</td>" +
+      "<td class=\"num\">" + _htmlEscape(String(orders)) + "</td>" +
+      "</tr>";
+  }).join("");
+
+  var table = customers.length
+    ? "<div class=\"panel\"><table><thead><tr><th>Name</th><th>ID</th><th>Joined</th><th>Sign-in method</th><th class=\"num\">Orders</th></tr></thead><tbody>" + rows + "</tbody></table></div>"
+    : "<p class=\"empty\">No customers yet.</p>";
+
+  // Cursor pager — a Next link when the page filled and more rows remain.
+  // The opaque cursor is HMAC-tagged by customers.list; encode it for the URL.
+  var pager = opts.next_cursor
+    ? "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin/customers?cursor=" + _htmlEscape(encodeURIComponent(opts.next_cursor)) + "\">Next page <span aria-hidden=\"true\">→</span></a></div>"
+    : "";
+
+  var body = "<section><h2>Customers</h2>" +
+    "<p class=\"meta\">Accounts are passwordless — customers enrol a passkey or sign in with a federated provider. Email addresses aren't stored in the clear, so they're not shown here.</p>" +
+    table + pager + "</section>";
+  return _renderAdminShell(opts.shop_name, "Customers", body, "customers", opts.nav_available);
+}
+
 // The RMA states an operator can filter the returns queue by — drives the
 // filter chips, lifecycle order then terminal.
 var RETURN_STATUS_FILTERS = ["pending", "approved", "received", "refunded", "rejected"];
@@ -2332,7 +2900,7 @@ function renderAdminReturn(opts) {
       "<form method=\"post\" action=\"/admin/returns/" + _htmlEscape(r.id) + "/approve\" class=\"return-action\">" +
         "<h4>Approve</h4>" +
         _setupField("Refund amount (minor units)", "refund_amount_minor", "", "number", "e.g. 4999 for $49.99.", " min=\"0\" required") +
-        _setupField("Refund currency", "refund_currency", r.refund_currency || "USD", "text", "3-letter ISO 4217.", " maxlength=\"3\" style=\"text-transform:uppercase;max-width:8rem;\"") +
+        _setupField("Refund currency", "refund_currency", r.refund_currency || "USD", "text", "3-letter ISO 4217.", " maxlength=\"3\" class=\"input-code\"") +
         _setupField("Operator notes", "operator_notes", "", "text", "", " maxlength=\"500\"") +
         "<button class=\"btn\" type=\"submit\">Approve return</button>" +
       "</form>");
@@ -2367,7 +2935,7 @@ function renderAdminReturn(opts) {
     : "<span class=\"meta\">This return is in a final state — no further changes.</span>";
 
   var body =
-    "<section style=\"max-width:48rem;\">" +
+    "<section class=\"mw-48\">" +
       "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin/returns\">&larr; Returns</a></div>" +
       "<h2>Return <code class=\"order-id\">" + _htmlEscape(r.rma_code || r.id.slice(0, 8)) + "</code> " +
         "<span class=\"status-pill " + _returnPillClass(r.status) + "\">" + _htmlEscape(r.status) + "</span></h2>" +
@@ -2375,8 +2943,8 @@ function renderAdminReturn(opts) {
         " · order <a class=\"order-id\" href=\"/admin/orders/" + _htmlEscape(r.order_id) + "\">" + _htmlEscape(String(r.order_id).slice(0, 8)) + "</a></p>" +
       moved + notice +
       "<div class=\"two-col\">" +
-        "<div class=\"panel\"><h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Items</h3>" + linesTable + "</div>" +
-        "<div class=\"panel\"><h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Details</h3>" +
+        "<div class=\"panel\"><h3 class=\"subhead\">Items</h3>" + linesTable + "</div>" +
+        "<div class=\"panel\"><h3 class=\"subhead\">Details</h3>" +
           _field("Reason", r.reason) +
           _field("Customer detail", r.reason_detail) +
           _field("Customer notes", r.customer_notes) +
@@ -2385,7 +2953,7 @@ function renderAdminReturn(opts) {
           (r.rejected_reason ? _field("Rejection reason", r.rejected_reason) : "") +
         "</div>" +
       "</div>" +
-      "<div class=\"panel\" style=\"margin-top:1.5rem;\"><h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Actions</h3>" +
+      "<div class=\"panel mt\"><h3 class=\"subhead\">Actions</h3>" +
         actions +
       "</div>" +
     "</section>";
@@ -2418,7 +2986,7 @@ function renderAdminReviews(opts) {
   // sense from its current status (a rejected review can be published, a
   // published one taken down, a pending one either way).
   var cards = list.map(function (rv) {
-    var pub = "<form method=\"post\" action=\"/admin/reviews/" + _htmlEscape(rv.id) + "/publish\" style=\"display:inline;\">" +
+    var pub = "<form method=\"post\" action=\"/admin/reviews/" + _htmlEscape(rv.id) + "/publish\" class=\"form-inline\">" +
       "<button class=\"btn\" type=\"submit\">Publish</button></form>";
     var rej = "<form method=\"post\" action=\"/admin/reviews/" + _htmlEscape(rv.id) + "/reject\" class=\"review-reject\">" +
       "<input type=\"text\" name=\"reason\" placeholder=\"Reason (shown in the log)\" maxlength=\"300\" required>" +
@@ -2469,8 +3037,8 @@ function renderAdminInventory(opts) {
       "<td class=\"num\"><strong>" + _htmlEscape(String(available)) + "</strong></td>" +
       "<td>" +
         "<form method=\"post\" action=\"/admin/inventory/" + _htmlEscape(r.sku) + "/restock\" class=\"inv-row-form\">" +
-          "<input type=\"number\" name=\"qty\" min=\"1\" placeholder=\"+ qty\" style=\"width:6rem;\">" +
-          "<input type=\"number\" name=\"threshold\" min=\"0\" value=\"" + _htmlEscape(thVal) + "\" placeholder=\"alert ≤\" title=\"low-stock threshold (blank clears)\" style=\"width:6rem;\">" +
+          "<input type=\"number\" name=\"qty\" min=\"1\" placeholder=\"+ qty\" class=\"input-narrow\">" +
+          "<input type=\"number\" name=\"threshold\" min=\"0\" value=\"" + _htmlEscape(thVal) + "\" placeholder=\"alert ≤\" title=\"low-stock threshold (blank clears)\" class=\"input-narrow\">" +
           "<button class=\"btn btn--ghost\" type=\"submit\">Save</button>" +
         "</form>" +
       "</td></tr>";
@@ -2481,8 +3049,8 @@ function renderAdminInventory(opts) {
     : "<p class=\"empty\">No inventory rows" + (opts.low ? " below threshold" : " yet") + ".</p>";
 
   var createForm =
-    "<div class=\"panel\" style=\"margin-top:1.5rem; max-width:34rem;\">" +
-      "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Track a new SKU</h3>" +
+    "<div class=\"panel mt mw-34\">" +
+      "<h3 class=\"subhead\">Track a new SKU</h3>" +
       "<form method=\"post\" action=\"/admin/inventory\">" +
         _setupField("SKU", "sku", "", "text", "Must match a variant SKU.", " maxlength=\"128\" required") +
         _setupField("Starting stock on hand", "stock_on_hand", "0", "number", "", " min=\"0\"") +
@@ -2519,7 +3087,7 @@ function renderAdminSubscriptionPlans(opts) {
     var price = pricing.format(p.amount_minor, String(p.currency || "").toUpperCase()) + " / " + every;
     var isActive = p.active === 1 || p.active === true;
     var archiveCell = isActive
-      ? "<form method=\"post\" action=\"/admin/subscription-plans/" + _htmlEscape(p.id) + "/archive\" style=\"display:inline;\">" +
+      ? "<form method=\"post\" action=\"/admin/subscription-plans/" + _htmlEscape(p.id) + "/archive\" class=\"form-inline\">" +
           "<button class=\"btn btn--ghost\" type=\"submit\">Archive</button></form>"
       : "<span class=\"meta\">—</span>";
     return "<tr>" +
@@ -2541,8 +3109,8 @@ function renderAdminSubscriptionPlans(opts) {
   }).join("");
 
   var createForm =
-    "<div class=\"panel\" style=\"margin-top:1.5rem; max-width:34rem;\">" +
-      "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Create a plan</h3>" +
+    "<div class=\"panel mt mw-34\">" +
+      "<h3 class=\"subhead\">Create a plan</h3>" +
       "<p class=\"meta\">Pre-create the recurring Price in Stripe, then mirror it here so the storefront can render the plan without a network hop.</p>" +
       "<form method=\"post\" action=\"/admin/subscription-plans\">" +
         _setupField("Stripe price id", "stripe_price_id", "", "text", "The recurring Price id from your Stripe dashboard (e.g. price_…).", " maxlength=\"255\" required") +
@@ -2560,6 +3128,121 @@ function renderAdminSubscriptionPlans(opts) {
   return _renderAdminShell(opts.shop_name, "Subscription plans", bodyHtml, "subscriptions", opts.nav_available);
 }
 
+// Gift-card ledger console — list issued cards. The code is masked to
+// its `code_hint` (last 4 plaintext chars) prefixed with the standard
+// •••• fill; the plaintext bearer code is never stored and so never
+// rendered here. Original (issued) + remaining balance + lifecycle
+// status + issued date per row, newest first.
+function renderAdminGiftCards(opts) {
+  opts = opts || {};
+  var rows = opts.cards || [];
+  var notice = opts.notice ? "<div class=\"banner banner--err\">" + _htmlEscape(opts.notice) + "</div>" : "";
+
+  var sf = opts.status_filter;
+  var STATUS = ["active", "redeemed", "expired", "voided"];
+  var chipHtml = "<a class=\"chip" + (sf == null ? " chip--on" : "") + "\" href=\"/admin/gift-cards\">All</a>";
+  for (var s = 0; s < STATUS.length; s += 1) {
+    chipHtml += "<a class=\"chip" + (sf === STATUS[s] ? " chip--on" : "") +
+      "\" href=\"/admin/gift-cards?status=" + STATUS[s] + "\">" + STATUS[s] + "</a>";
+  }
+  var chips = "<div class=\"order-filters\">" + chipHtml + "</div>";
+
+  // Card lifecycle → status-pill class (reuse the order pills): active
+  // = paid (green), redeemed = neutral, expired/voided = cancelled.
+  function _pill(status) {
+    var cls = status === "active" ? "paid" : (status === "redeemed" ? "pending" : "cancelled");
+    return "<span class=\"status-pill " + cls + "\">" + _htmlEscape(status) + "</span>";
+  }
+
+  var bodyRows = rows.map(function (gc) {
+    var cur = String(gc.currency || "").toUpperCase();
+    var issued    = pricing.format(gc.issued_minor, cur);
+    var remaining = pricing.format(gc.balance_minor, cur);
+    return "<tr>" +
+      "<td><code class=\"order-id\">••••" + _htmlEscape(gc.code_hint) + "</code></td>" +
+      "<td class=\"num\">" + _htmlEscape(issued) + "</td>" +
+      "<td class=\"num\"><strong>" + _htmlEscape(remaining) + "</strong></td>" +
+      "<td>" + _pill(gc.status) + "</td>" +
+      "<td>" + _htmlEscape(_fmtDate(gc.created_at)) + "</td>" +
+      "<td><a class=\"btn btn--ghost\" href=\"/admin/gift-cards/" + _htmlEscape(gc.id) + "\">Ledger</a></td>" +
+    "</tr>";
+  }).join("");
+
+  var table = rows.length
+    ? "<div class=\"panel\"><table><thead><tr><th>Code</th><th class=\"num\">Issued</th><th class=\"num\">Remaining</th><th>Status</th><th>Issued on</th><th>Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    : "<p class=\"empty\">No gift cards" + (sf ? " " + _htmlEscape(sf) : " yet") + ".</p>";
+
+  // The issue form composes the giftcards primitive's issue() — the
+  // plaintext code is shown once on the card's detail page after a
+  // successful issue, never again.
+  var issueForm =
+    "<div class=\"panel mt mw-34\">" +
+      "<h3 class=\"subhead\">Issue a card</h3>" +
+      "<p class=\"meta\">Generates a bearer code. You'll see the code once, on the next screen — deliver it to the recipient; it can't be shown again.</p>" +
+      "<form method=\"post\" action=\"/admin/gift-cards\">" +
+        _setupField("Amount (minor units)", "amount_minor", "", "number", "In the currency's smallest unit — e.g. 5000 = $50.00.", " min=\"1\" required") +
+        _setupField("Currency", "currency", "", "text", "3-letter ISO 4217 (e.g. USD).", " maxlength=\"3\" required") +
+        _setupField("Recipient email (optional)", "issued_to_email", "", "email", "Stored as a one-way hash so the recipient can claim it after sign-in.", " maxlength=\"160\"") +
+        "<div class=\"actions-row\"><button class=\"btn\" type=\"submit\">Issue card</button></div>" +
+      "</form>" +
+    "</div>";
+
+  var body = "<section><h2>Gift cards</h2>" + notice + chips + table + issueForm + "</section>";
+  return _renderAdminShell(opts.shop_name, "Gift cards", body, "giftcards", opts.nav_available);
+}
+
+// Single-card detail: the masked code, the balances + status, the
+// (optionally shown-once) freshly-issued plaintext code, and the
+// append-only ledger of transactions against the card.
+function renderAdminGiftCard(opts) {
+  opts = opts || {};
+  var gc = opts.card;
+  if (!gc) {
+    var nf = "<section><h2>Gift card</h2><p class=\"empty\">Gift card not found.</p>" +
+      "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin/gift-cards\">Back to gift cards</a></div></section>";
+    return _renderAdminShell(opts.shop_name, "Gift card", nf, "giftcards", opts.nav_available);
+  }
+  var cur = String(gc.currency || "").toUpperCase();
+  var issuedBanner = opts.issued_code
+    ? "<div class=\"banner banner--ok\">Copy the code now — it is shown once and cannot be retrieved again: " +
+        "<code class=\"order-id\">" + _htmlEscape(opts.issued_code) + "</code></div>"
+    : "";
+
+  var statusCls = gc.status === "active" ? "paid" : (gc.status === "redeemed" ? "pending" : "cancelled");
+  var summary =
+    "<div class=\"panel\"><dl class=\"detail-grid\">" +
+      "<div><dt>Code</dt><dd><code class=\"order-id\">••••" + _htmlEscape(gc.code_hint) + "</code></dd></div>" +
+      "<div><dt>Issued</dt><dd>" + _htmlEscape(pricing.format(gc.issued_minor, cur)) + "</dd></div>" +
+      "<div><dt>Remaining</dt><dd><strong>" + _htmlEscape(pricing.format(gc.balance_minor, cur)) + "</strong></dd></div>" +
+      "<div><dt>Status</dt><dd><span class=\"status-pill " + statusCls + "\">" + _htmlEscape(gc.status) + "</span></dd></div>" +
+      "<div><dt>Issued on</dt><dd>" + _htmlEscape(_fmtDate(gc.created_at)) + "</dd></div>" +
+      "<div><dt>Expires</dt><dd>" + (gc.expires_at ? _htmlEscape(_fmtDate(gc.expires_at)) : "<span class=\"meta\">never</span>") + "</dd></div>" +
+    "</dl></div>";
+
+  var ledger = opts.ledger || [];
+  var ledgerRows = ledger.map(function (row) {
+    var detail = row.order_id
+      ? "<code class=\"order-id\">" + _htmlEscape(String(row.order_id).slice(0, 8)) + "</code>"
+      : (row.source ? _htmlEscape(row.source) + (row.source_ref ? " · " + _htmlEscape(row.source_ref) : "") : "<span class=\"meta\">—</span>");
+    var sign = row.kind === "credit" ? "+" : "−";
+    return "<tr>" +
+      "<td>" + _htmlEscape(row.kind) + "</td>" +
+      "<td class=\"num\">" + sign + _htmlEscape(pricing.format(row.amount_minor, cur)) + "</td>" +
+      "<td class=\"num\">" + _htmlEscape(pricing.format(row.balance_after_minor, cur)) + "</td>" +
+      "<td>" + detail + "</td>" +
+      "<td>" + _htmlEscape(_fmtDate(row.occurred_at)) + "</td>" +
+    "</tr>";
+  }).join("");
+  var ledgerTable = ledger.length
+    ? "<div class=\"panel\"><table><thead><tr><th>Type</th><th class=\"num\">Amount</th><th class=\"num\">Balance after</th><th>Detail</th><th>When</th></tr></thead><tbody>" + ledgerRows + "</tbody></table></div>"
+    : "<p class=\"empty\">No ledger transactions recorded for this card yet.</p>";
+
+  var body = "<section><h2>Gift card</h2>" + issuedBanner + summary +
+    "<h3 class=\"subhead subhead--sp-lg\">Ledger</h3>" + ledgerTable +
+    "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin/gift-cards\">Back to gift cards</a></div></section>";
+  return _renderAdminShell(opts.shop_name, "Gift card", body, "giftcards", opts.nav_available);
+}
+
 function renderAdminWebhooks(opts) {
   opts = opts || {};
   var rows  = opts.endpoints    || [];
@@ -2580,8 +3263,8 @@ function renderAdminWebhooks(opts) {
       "<td class=\"num\">" + _htmlEscape(String(e.rate_limit_per_minute)) + "/min</td>" +
       "<td>" +
         "<a class=\"btn btn--ghost\" href=\"/admin/webhooks/" + _htmlEscape(e.id) + "/deliveries\">Deliveries</a> " +
-        "<form method=\"post\" action=\"/admin/webhooks/" + _htmlEscape(e.id) + "/toggle\" style=\"display:inline;\"><button class=\"btn btn--ghost\" type=\"submit\">" + (isActive ? "Disable" : "Enable") + "</button></form> " +
-        "<form method=\"post\" action=\"/admin/webhooks/" + _htmlEscape(e.id) + "/delete\" style=\"display:inline;\"><button class=\"btn btn--danger\" type=\"submit\">Delete</button></form>" +
+        "<form method=\"post\" action=\"/admin/webhooks/" + _htmlEscape(e.id) + "/toggle\" class=\"form-inline\"><button class=\"btn btn--ghost\" type=\"submit\">" + (isActive ? "Disable" : "Enable") + "</button></form> " +
+        "<form method=\"post\" action=\"/admin/webhooks/" + _htmlEscape(e.id) + "/delete\" class=\"form-inline\"><button class=\"btn btn--danger\" type=\"submit\">Delete</button></form>" +
       "</td></tr>";
   }).join("");
 
@@ -2590,20 +3273,20 @@ function renderAdminWebhooks(opts) {
     : "<p class=\"empty\">No webhook endpoints yet.</p>";
 
   var eventChecks = known.map(function (ev) {
-    return "<label style=\"display:block; margin:.3rem 0;\"><input type=\"checkbox\" name=\"evt_" + _htmlEscape(ev) + "\"> <code>" + _htmlEscape(ev) + "</code></label>";
+    return "<label class=\"kv\"><input type=\"checkbox\" name=\"evt_" + _htmlEscape(ev) + "\"> <code>" + _htmlEscape(ev) + "</code></label>";
   }).join("");
 
   var createForm =
-    "<div class=\"panel\" style=\"margin-top:1.5rem; max-width:40rem;\">" +
-      "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Add an endpoint</h3>" +
+    "<div class=\"panel mt mw-40\">" +
+      "<h3 class=\"subhead\">Add an endpoint</h3>" +
       "<p class=\"meta\">Deliveries are signed (HMAC-SHA3-512); the signing secret is shown once, right after you create the endpoint. Only https:// URLs are accepted.</p>" +
       "<form method=\"post\" action=\"/admin/webhooks\">" +
         _setupField("Endpoint URL", "url", "", "url", "Where deliveries are POSTed (https:// only).", " maxlength=\"2048\" required") +
-        "<fieldset style=\"border:1px solid var(--hair); border-radius:.5rem; padding:.75rem 1rem; margin:1rem 0;\">" +
-          "<legend style=\"padding:0 .4rem; font-size:.85rem;\">Events</legend>" +
-          "<label style=\"display:block; margin:.3rem 0;\"><input type=\"checkbox\" name=\"events_all\"> <strong>All events (*)</strong></label>" +
+        "<fieldset class=\"box\">" +
+          "<legend class=\"legend-sm\">Events</legend>" +
+          "<label class=\"kv\"><input type=\"checkbox\" name=\"events_all\"> <strong>All events (*)</strong></label>" +
           eventChecks +
-          "<small style=\"color:var(--mute);\">Pick specific events, or check “All events” to subscribe to everything.</small>" +
+          "<small class=\"u-mute\">Pick specific events, or check “All events” to subscribe to everything.</small>" +
         "</fieldset>" +
         "<div class=\"actions-row\"><button class=\"btn\" type=\"submit\">Create endpoint</button></div>" +
       "</form>" +
@@ -2617,13 +3300,13 @@ function renderAdminWebhookSecret(opts) {
   opts = opts || {};
   var e = opts.endpoint || {};
   var body =
-    "<section style=\"max-width:42rem;\">" +
+    "<section class=\"mw-42\">" +
       "<h2>Endpoint created</h2>" +
       "<div class=\"banner banner--ok\">Copy the signing secret now — it is shown once and cannot be retrieved again.</div>" +
       "<div class=\"panel\">" +
         "<p class=\"meta\">Endpoint</p><p><code class=\"order-id\">" + _htmlEscape(e.url || "") + "</code></p>" +
         "<p class=\"meta\">Signing secret (HMAC-SHA3-512, key id <code>v1</code>)</p>" +
-        "<pre style=\"white-space:pre-wrap; word-break:break-all; background:var(--bg); border:1px solid var(--hair); border-radius:.5rem; padding:.75rem;\"><code>" + _htmlEscape(e.secret || "") + "</code></pre>" +
+        "<pre class=\"code-block\"><code>" + _htmlEscape(e.secret || "") + "</code></pre>" +
         "<p class=\"meta\">Verify each delivery's signature with this secret using your framework's webhook verifier.</p>" +
       "</div>" +
       "<div class=\"actions-row\"><a class=\"btn\" href=\"/admin/webhooks\">Done</a></div>" +
@@ -2650,7 +3333,7 @@ function renderAdminWebhookDeliveries(opts) {
       : "<span class=\"status-pill " + (d.last_error ? "refunded" : "pending") + "\">" + (d.last_error ? "failed" : "pending") + "</span>";
     var code = d.last_status != null ? _htmlEscape(String(d.last_status)) : "—";
     var retry = ok ? "<span class=\"meta\">—</span>"
-      : "<form method=\"post\" action=\"/admin/webhooks/deliveries/" + _htmlEscape(d.id) + "/retry\" style=\"display:inline;\"><button class=\"btn btn--ghost\" type=\"submit\">Retry</button></form>";
+      : "<form method=\"post\" action=\"/admin/webhooks/deliveries/" + _htmlEscape(d.id) + "/retry\" class=\"form-inline\"><button class=\"btn btn--ghost\" type=\"submit\">Retry</button></form>";
     return "<tr>" +
       "<td>" + _htmlEscape(d.event_type) + "</td>" +
       "<td>" + statusCell + "</td>" +
@@ -2672,6 +3355,215 @@ function renderAdminWebhookDeliveries(opts) {
   return _renderAdminShell(opts.shop_name, "Deliveries", body, "webhooks", opts.nav_available);
 }
 
+function renderAdminCollections(opts) {
+  opts = opts || {};
+  var rows = opts.collections || [];
+  var created  = opts.created  ? "<div class=\"banner banner--ok\">Collection created.</div>" : "";
+  var archived = opts.archived ? "<div class=\"banner banner--ok\">Collection archived.</div>" : "";
+  var notice   = opts.notice   ? "<div class=\"banner banner--err\">" + _htmlEscape(opts.notice) + "</div>" : "";
+
+  var af = opts.active_filter;
+  var chips = "<div class=\"order-filters\">" +
+    "<a class=\"chip" + (af == null ? " chip--on" : "") + "\" href=\"/admin/collections\">All</a>" +
+    "<a class=\"chip" + (af === "1" ? " chip--on" : "") + "\" href=\"/admin/collections?active=1\">Active</a>" +
+    "<a class=\"chip" + (af === "0" ? " chip--on" : "") + "\" href=\"/admin/collections?active=0\">Archived</a>" +
+    "</div>";
+
+  var bodyRows = rows.map(function (c) {
+    var isArchived = c.archived_at != null;
+    var typeLabel = c.type === "smart" ? "smart" : "manual";
+    var countLabel = c._count == null ? "—" : String(c._count);
+    var countTitle = c.type === "smart" ? "matched products" : "members";
+    return "<tr>" +
+      "<td><a href=\"/admin/collections/" + _htmlEscape(encodeURIComponent(c.slug)) + "\"><strong>" + _htmlEscape(c.title) + "</strong></a></td>" +
+      "<td><code class=\"order-id\">" + _htmlEscape(c.slug) + "</code></td>" +
+      "<td><span class=\"status-pill " + (c.type === "smart" ? "pending" : "paid") + "\">" + _htmlEscape(typeLabel) + "</span></td>" +
+      "<td><span class=\"status-pill " + (isArchived ? "cancelled" : "paid") + "\">" + (isArchived ? "archived" : "active") + "</span></td>" +
+      "<td class=\"num\" title=\"" + _htmlEscape(countTitle) + "\">" + _htmlEscape(countLabel) + "</td>" +
+      "<td><div class=\"actions-row\">" +
+        "<a class=\"btn btn--ghost\" href=\"/admin/collections/" + _htmlEscape(encodeURIComponent(c.slug)) + "\">Manage</a>" +
+        (isArchived ? "" :
+          "<form method=\"post\" action=\"/admin/collections/" + _htmlEscape(encodeURIComponent(c.slug)) + "/archive\" class=\"form-inline\">" +
+            "<button class=\"btn btn--danger\" type=\"submit\">Archive</button></form>") +
+      "</div></td>" +
+    "</tr>";
+  }).join("");
+
+  var table = rows.length
+    ? "<div class=\"panel\"><table><thead><tr><th>Title</th><th>Slug</th><th>Type</th><th>Status</th><th class=\"num\">Products</th><th>Actions</th></tr></thead><tbody>" + bodyRows + "</tbody></table></div>"
+    : "<p class=\"empty\">No collections" + (af === "0" ? " archived" : af === "1" ? " active" : " yet") + ".</p>";
+
+  // The create form toggles between a manual and a smart shape. Manual
+  // needs only title + slug; smart adds one starter rule row (the detail
+  // page's rule editor adds more after the collection exists).
+  var startType = opts.form_type === "smart" ? "smart" : "manual";
+  var fieldOpts = collectionsModule.RULE_FIELDS.map(function (f) {
+    return "<option value=\"" + _htmlEscape(f) + "\">" + _htmlEscape(f) + "</option>";
+  }).join("");
+  var opOpts = collectionsModule.RULE_OPS.map(function (o) {
+    return "<option value=\"" + _htmlEscape(o) + "\">" + _htmlEscape(o) + "</option>";
+  }).join("");
+
+  var createForm =
+    "<div class=\"panel mt mw-40\">" +
+      "<h3 class=\"subhead\">Create a collection</h3>" +
+      "<p class=\"meta\">Manual collections are handpicked; smart collections match products by a rule set. Slug is the storefront URL (/collections/&lt;slug&gt;).</p>" +
+      "<form method=\"post\" action=\"/admin/collections\">" +
+        "<label class=\"form-field\"><span>Type</span><select name=\"type\">" +
+          "<option value=\"manual\"" + (startType === "manual" ? " selected" : "") + ">manual</option>" +
+          "<option value=\"smart\""  + (startType === "smart"  ? " selected" : "") + ">smart</option>" +
+        "</select></label>" +
+        _setupField("Title", "title", "", "text", "", " maxlength=\"500\" required") +
+        _setupField("Slug", "slug", "", "text", "Lowercase, hyphenated.", " maxlength=\"200\" required") +
+        _setupField("Description (optional)", "description", "", "text", "", " maxlength=\"2000\"") +
+        "<fieldset class=\"box\">" +
+          "<legend class=\"legend-sm\">Smart rule (used only for smart collections)</legend>" +
+          "<div class=\"actions-row\">" +
+            "<select name=\"rule_field\"><option value=\"\">field…</option>" + fieldOpts + "</select>" +
+            "<select name=\"rule_op\"><option value=\"\">op…</option>" + opOpts + "</select>" +
+            "<input type=\"text\" name=\"rule_value\" placeholder=\"value (lists + between: comma-separated)\" maxlength=\"500\">" +
+          "</div>" +
+          "<small class=\"u-mute\">Numeric fields (price_minor, inventory_count, created_at) compare as integers. Add more rules after creating.</small>" +
+        "</fieldset>" +
+        "<div class=\"actions-row\"><button class=\"btn\" type=\"submit\">Create collection</button></div>" +
+      "</form>" +
+    "</div>";
+
+  var bodyHtml = "<section><h2>Collections</h2>" + created + archived + notice + chips + table + createForm + "</section>";
+  return _renderAdminShell(opts.shop_name, "Collections", bodyHtml, "collections", opts.nav_available);
+}
+
+function renderAdminCollection(opts) {
+  opts = opts || {};
+  var col = opts.collection;
+  if (!col) {
+    var nf = "<section><h2>Collection</h2><p class=\"empty\">Collection not found.</p>" +
+      "<div class=\"actions-row\"><a class=\"btn btn--ghost\" href=\"/admin/collections\">Back to collections</a></div></section>";
+    return _renderAdminShell(opts.shop_name, "Collection", nf, "collections", opts.nav_available);
+  }
+  var updated = (opts.updated || opts.saved) ? "<div class=\"banner banner--ok\">Saved.</div>" : "";
+  var notice  = opts.notice ? "<div class=\"banner banner--err\">" + _htmlEscape(opts.notice) + "</div>" : "";
+  var enc = encodeURIComponent(col.slug);
+
+  var sortStrategies = opts.sort_strategies || collectionsModule.SORT_STRATEGIES;
+  var sortOpts = sortStrategies.filter(function (s) {
+    // `manual` sort only applies to manual collections (the primitive
+    // refuses it on smart) — drop it from the smart editor's options.
+    return !(col.type === "smart" && s === "manual");
+  }).map(function (s) {
+    return "<option value=\"" + _htmlEscape(s) + "\"" + (s === col.sort_strategy ? " selected" : "") + ">" + _htmlEscape(s) + "</option>";
+  }).join("");
+
+  var editForm =
+    "<div class=\"panel mw-40\">" +
+      "<h3 class=\"subhead\">Details</h3>" +
+      "<form method=\"post\" action=\"/admin/collections/" + _htmlEscape(enc) + "/edit\">" +
+        _setupField("Title", "title", col.title, "text", "", " maxlength=\"500\" required") +
+        _setupField("Description", "description", col.description || "", "text", "", " maxlength=\"2000\"") +
+        "<label class=\"form-field\"><span>Sort strategy</span><select name=\"sort_strategy\">" + sortOpts + "</select></label>";
+
+  if (col.type === "smart") {
+    var fields = opts.rule_fields || collectionsModule.RULE_FIELDS;
+    var ops    = opts.rule_ops    || collectionsModule.RULE_OPS;
+    var existing = (col.rules && Array.isArray(col.rules.all)) ? col.rules.all : [];
+    // Render the existing rules plus one spare empty row so the operator
+    // can append without a separate "add row" round-trip.
+    var ruleRows = existing.concat([{ field: "", op: "", value: "" }]).map(function (rule) {
+      var rv = rule.value;
+      if (Array.isArray(rv)) rv = rv.join(",");
+      else if (rv == null)   rv = "";
+      var fieldOpts = "<option value=\"\">field…</option>" + fields.map(function (f) {
+        return "<option value=\"" + _htmlEscape(f) + "\"" + (f === rule.field ? " selected" : "") + ">" + _htmlEscape(f) + "</option>";
+      }).join("");
+      var opOpts = "<option value=\"\">op…</option>" + ops.map(function (o) {
+        return "<option value=\"" + _htmlEscape(o) + "\"" + (o === rule.op ? " selected" : "") + ">" + _htmlEscape(o) + "</option>";
+      }).join("");
+      return "<div class=\"actions-row m-04\">" +
+        "<select name=\"rule_field\">" + fieldOpts + "</select>" +
+        "<select name=\"rule_op\">" + opOpts + "</select>" +
+        "<input type=\"text\" name=\"rule_value\" value=\"" + _htmlEscape(String(rv)) + "\" placeholder=\"value\" maxlength=\"500\">" +
+      "</div>";
+    }).join("");
+    editForm +=
+      "<fieldset class=\"box\">" +
+        "<legend class=\"legend-sm\">Rules (all must match)</legend>" +
+        ruleRows +
+        "<small class=\"u-mute\">Leave a row blank to drop it. Lists (in / not_in) + between use comma-separated values.</small>" +
+      "</fieldset>";
+  }
+  editForm += "<div class=\"actions-row\"><button class=\"btn\" type=\"submit\">Save</button></div></form></div>";
+
+  var detailBody;
+  if (col.type === "manual") {
+    var members = opts.members || [];
+    var memberRows = members.map(function (m) {
+      return "<tr>" +
+        "<td class=\"num\">" + _htmlEscape(String(m.position)) + "</td>" +
+        "<td><code class=\"order-id\">" + _htmlEscape(m.product_id) + "</code></td>" +
+        "<td><form method=\"post\" action=\"/admin/collections/" + _htmlEscape(enc) + "/members/remove\" class=\"form-inline\">" +
+          "<input type=\"hidden\" name=\"product_id\" value=\"" + _htmlEscape(m.product_id) + "\">" +
+          "<button class=\"btn btn--danger\" type=\"submit\">Remove</button></form></td>" +
+      "</tr>";
+    }).join("");
+    var memberTable = members.length
+      ? "<div class=\"panel\"><table><thead><tr><th class=\"num\">#</th><th>Product id</th><th></th></tr></thead><tbody>" + memberRows + "</tbody></table></div>"
+      : "<p class=\"empty\">No members yet — add a product below.</p>";
+
+    // Reorder: a single field of the current ids, comma-joined, that the
+    // operator can rewrite into the new order. v1-defensible without
+    // client JS — the primitive normalises positions to 0..N-1.
+    var currentIds = members.map(function (m) { return m.product_id; }).join(",");
+    var reorderForm = members.length > 1
+      ? "<div class=\"panel mt-1 mw-40\">" +
+          "<h3 class=\"subhead\">Reorder members</h3>" +
+          "<p class=\"meta\">Rewrite the comma-separated id list into the order you want. Must list every current member.</p>" +
+          "<form method=\"post\" action=\"/admin/collections/" + _htmlEscape(enc) + "/members/reorder\">" +
+            "<label class=\"form-field\"><span>Ordered product ids</span>" +
+              "<input type=\"text\" name=\"ordered_product_ids\" value=\"" + _htmlEscape(currentIds) + "\"></label>" +
+            "<div class=\"actions-row\"><button class=\"btn btn--ghost\" type=\"submit\">Apply order</button></div>" +
+          "</form>" +
+        "</div>"
+      : "";
+
+    var addForm =
+      "<div class=\"panel mt-1 mw-40\">" +
+        "<h3 class=\"subhead\">Add a member</h3>" +
+        "<form method=\"post\" action=\"/admin/collections/" + _htmlEscape(enc) + "/members/add\">" +
+          _setupField("Product id", "product_id", "", "text", "The catalog product's UUID.", " maxlength=\"64\" required") +
+          "<div class=\"actions-row\"><button class=\"btn\" type=\"submit\">Add product</button></div>" +
+        "</form>" +
+      "</div>";
+
+    detailBody = "<section class=\"mt\"><h3 class=\"fs-105\">Members</h3>" +
+      memberTable + reorderForm + addForm + "</section>";
+  } else {
+    var preview = opts.preview || [];
+    var previewCards = preview.map(function (p) {
+      return "<tr>" +
+        "<td><strong>" + _htmlEscape(p.title || "(untitled)") + "</strong></td>" +
+        "<td><code class=\"order-id\">" + _htmlEscape(p.slug || p.id || "") + "</code></td>" +
+        "<td>" + _htmlEscape(p.status || "") + "</td>" +
+      "</tr>";
+    }).join("");
+    var previewTable = preview.length
+      ? "<div class=\"panel\"><table><thead><tr><th>Title</th><th>Slug</th><th>Status</th></tr></thead><tbody>" + previewCards + "</tbody></table></div>"
+      : "<p class=\"empty\">No products match these rules yet.</p>";
+    detailBody = "<section class=\"mt\"><h3 class=\"fs-105\">Matched products (live preview)</h3>" +
+      "<p class=\"meta\">The first " + _htmlEscape(String(preview.length)) + " products the rules match right now.</p>" +
+      previewTable + "</section>";
+  }
+
+  var head =
+    "<p class=\"meta\"><a href=\"/admin/collections\">&larr; Collections</a> · " +
+      "<code class=\"order-id\">" + _htmlEscape(col.slug) + "</code> · " +
+      "<span class=\"status-pill " + (col.type === "smart" ? "pending" : "paid") + "\">" + _htmlEscape(col.type) + "</span>" +
+      (col.archived_at != null ? " · <span class=\"status-pill cancelled\">archived</span>" : "") +
+      " · <a href=\"/collections/" + _htmlEscape(enc) + "\" target=\"_blank\" rel=\"noreferrer\">View on storefront &rarr;</a></p>";
+
+  var body = "<section><h2>" + _htmlEscape(col.title) + "</h2>" + updated + notice + head + editForm + "</section>" + detailBody;
+  return _renderAdminShell(opts.shop_name, "Collection " + col.slug, body, "collections", opts.nav_available);
+}
+
 module.exports = {
   mount:           mount,
   AUDIT_NAMESPACE: AUDIT_NAMESPACE,
@@ -2684,7 +3576,12 @@ module.exports = {
   renderAdminInventory:    renderAdminInventory,
   renderAdminOrders:       renderAdminOrders,
   renderAdminOrder:        renderAdminOrder,
+  renderAdminCustomers:    renderAdminCustomers,
   renderAdminReturns:      renderAdminReturns,
   renderAdminReturn:       renderAdminReturn,
   renderAdminReviews:      renderAdminReviews,
+  renderAdminCollections:  renderAdminCollections,
+  renderAdminCollection:   renderAdminCollection,
+  renderAdminGiftCards:    renderAdminGiftCards,
+  renderAdminGiftCard:     renderAdminGiftCard,
 };