@blamejs/blamejs-shop 0.1.22 → 0.1.23

package/CHANGELOG.md

@@ -8,6 +8,8 @@ upgrading across more than a few patches at a time.
 
 ## v0.1.x
 
+- v0.1.23 (2026-05-25) — **The admin console renders styled again, and both surfaces now self-host their fonts.** The admin console shipped its design system as an inline <style> block, inline style="" attributes, and a cross-origin Google Fonts link — all three of which the strict `style-src 'self'` / `font-src 'self'` CSP that governs container-served routes refuses, so the console rendered as an unstyled page in production. Its styling now lives in an external stylesheet served from /assets (like the storefront's), and the typeface is self-hosted, so the console renders as designed under the same CSP that protects it. Both the storefront and the console now serve Inter from /assets rather than naming it and hoping the visitor has it installed. **Changed:** *Inter is self-hosted on both the storefront and the console* — The default theme named Inter / Inter Tight first in its font stack but shipped no font files, so the intended typography only rendered for visitors who happened to have Inter installed locally — everyone else fell back to a system sans-serif. The latin subset of Inter (400/500/600) and Inter Tight (600/700) now ships under `themes/default/assets/fonts` and is referenced via `@font-face`, so the typeface renders for every visitor and loads same-origin under `font-src 'self'` — no cross-origin font CDN on any page. The fonts are SIL OFL 1.1 (license alongside the files); `font-display:swap` paints text immediately in the system fallback and swaps when the file arrives. · *Admin console visual refresh* — With the stylesheet external it also got a pass: a proper centered sign-in card (replacing the bare form that was the first thing an operator saw), softer surfaces and shadows on cards and panels, a sticky console nav, and consistent spacing. The brand palette (ink + the storefront's accent) and every screen's structure are unchanged — this is presentation only. **Fixed:** *Admin console renders unstyled in production* — Every `/admin` screen built its design system three ways the strict CSP refuses: an inline `<style>` block, inline `style=""` attributes, and a `<link>` to fonts.googleapis.com. Container-served routes run under `style-src 'self'` / `font-src 'self'`, which drops all three — so the console arrived as unstyled HTML (a plain page) once deployed, even though it looked correct in isolation. The styling now ships as `/assets/themes/default/css/admin.css`, an external file `'self'` allows, linked with a `sha384` Subresource Integrity digest so the browser rejects a tampered or stale object; the inline attributes are gone, folded into that stylesheet. A render-shell test asserts every admin screen links the external stylesheet, carries no inline styles, and pulls no third-party font host, so the regression can't return. Operators redeploy to pick this up — `npm run deploy` uploads the new stylesheet (and the fonts below) to R2 as part of the asset sync.
+
 - v0.1.22 (2026-05-25) — **Fix the container boot crash-loop, plus gift cards, subscription self-management, and a customers roster.** The deployable container could crash-loop on startup, taking every write route (add-to-cart, checkout, account, admin) down while edge-rendered reads kept working — this release fixes that boot path. It also adds gift cards (issue / balance / redeem-at-checkout with an operator ledger), customer subscription self-management at `/account/subscriptions`, and a read-only customers roster in the admin console. **Added:** *Gift cards — redeem at checkout, balance check, operator ledger* — A gift-card code can be applied at checkout as a credit against the order total: the amount due drops by the available balance (never below zero), the order still records the full total it owed, and the debit is recorded once per order behind an atomic `balance >= amount` guard so concurrent spends can't overdraw — a card that fully covers the order is marked paid with no card charge. Customers check a balance at `GET /gift-cards` (which is not a code-existence oracle — unknown / malformed / expired all return the same generic result). Operators work `/admin/gift-cards`: list issued cards (masked code, original + remaining balance, status, issued date) filtered by lifecycle status, issue a card (the bearer code shown once, right after creation), and open a card to read its full credit / debit / expire ledger. Codes are stored as a `namespaceHash` digest plus a 4-char hint — never in the clear. · *Customer subscription self-management* — Signed-in customers view and cancel their own subscriptions at `/account/subscriptions` — each row shows the plan summary, status, and renew / end date, with a Cancel control on cancelable subscriptions. Every action is ownership-checked: a subscription that doesn't belong to the signed-in customer is a 404, never another account's row. Cancellation runs through the payment provider, so the cancel control mounts only when the payment handle is wired; without it the list renders read-only. Customer-facing subscription creation — a subscription-checkout flow — remains a separate follow-up; this surface is for managing existing subscriptions. · *Customers admin roster* — `/admin/customers` renders a read-only account roster (newest first): display name, a short id, the join date, the sign-in method (passkey count plus any linked OAuth providers), and the order count, with cursor pagination in the browser and a JSON list (with `next_cursor`) for a bearer-token client. Account creation and changes stay with the storefront's passkey / OIDC ceremonies. Order counts and sign-in methods are resolved with bounded aggregate queries over each page's ids — no per-row database trips. Raw email is never stored, so it is never shown. **Changed:** *Console nav gains Customers and Gift cards* — The signed-in admin nav now includes Customers and Gift cards alongside the existing screens, each shown when its primitive is wired. All new endpoints content-negotiate like the rest of the console: a bearer-token client gets the JSON API, a signed-in browser gets HTML; a request without the bearer token returns the sign-in form on a GET and redirects on a write. The customers roster, the subscription cancel, and the gift-card balance page all degrade gracefully when an optional dependency (payment, or the primitive itself) isn't configured. · *Deploy now syncs theme assets to R2* — `npm run deploy` chains `wrangler deploy` with a new `scripts/sync-r2-assets.js` that uploads the repo's theme stylesheets to the R2 bucket the Worker serves `/assets/*` from. `wrangler deploy` alone ships the Worker + container but never touches R2, so a CSS change would silently drift from the deployed HTML — new markup against a stale stylesheet. Run `npm run sync-assets` to push the stylesheets without a full redeploy. · *Theme stylesheet and island scripts served with Subresource Integrity* — The default theme's stylesheet `<link>` and the externalized passkey island `<script>` tags now carry a `sha384` `integrity` attribute computed from the on-disk asset, so a browser refuses any `/assets/*` response whose bytes don't match — closing the window where a tampered or stale CDN object could execute against the page. The digests are computed once at boot and cached; a missing or unreadable asset degrades to no integrity attribute rather than blocking the render. **Fixed:** *Passkey sign-in / registration no longer blocked by CSP* — The WebAuthn passkey ceremonies on `/account/login` and `/account/register` were inline `<script>` blocks, which the storefront's strict `script-src 'self'` CSP refuses to execute — so on the deploy the sign-in and registration buttons did nothing (accounts are passkey-only, so this blocked all customer auth). The ceremonies now ship as external assets (`/assets/themes/default/js/passkey-login.js` + `passkey-register.js`) that `'self'` allows, served from R2 and uploaded by the deploy's asset sync. Same effect, CSP-clean — and a clearer split between the server-rendered form and its opt-in enhancement. · *Container no longer crash-loops on startup* — The container boot had three ways to fail before it could serve a request, each of which left edge-rendered reads working while every container-served route (add-to-cart, cart update / remove, checkout, `/account`, `/admin`) was unreachable. (1) The secure-default boot unlocks a wrapped vault **and** a wrapped audit-signing keypair, which the framework reads from `BLAMEJS_VAULT_PASSPHRASE` / `BLAMEJS_AUDIT_SIGNING_PASSPHRASE`, but the deploy contract documents a single `VAULT_PASSPHRASE` the framework never read — so the container had no passphrase source, no TTY to prompt, and exited. The entry point now bridges the documented secret onto the vault passphrase and derives a domain-separated audit-signing passphrase from it. (2) Encrypted-at-rest requires a tmpfs; the image now points it at `/dev/shm` rather than failing to find one. (3) The Docker liveness probe was `wget`, which bot-guard blocks as automation (403), so a healthy container was marked unhealthy and stopped — the probe is now a browser-shaped Node request (`scripts/healthcheck.js`) that passes bot-guard like real traffic, without exempting the health path from the security middleware. A boot gate (`test/layer-2-integration/server-boot.test.js`) spawns the real entry point and asserts it listens, answers the probe, and still blocks header-less clients. Operators must redeploy the container to pick this up.
 
 - v0.1.21 (2026-05-25) — **Admin console — a collections screen.** Collections join the admin console. `/admin/collections` lists manual and smart product collections, creates either kind, edits title / description / sort strategy, archives one, manages a manual collection's members (add / remove / reorder), and builds a smart collection's rules with a live preview of the products they match — all from a signed-in browser. As with the other console screens, the same paths serve the existing JSON API to a bearer-token client unchanged. **Added:** *Collections management screen* — `/admin/collections` lists the shop's collections (title, slug, type, status, member or match count) with an all / active / archived filter; `/admin/collections/:slug` opens one. For a manual collection it manages members — add a product by id, remove, and reorder. For a smart collection it edits the rule set (field / operator / value rows over the supported fields and operators) and renders a live preview of the products the rules currently match. A form creates either kind; editing updates the title, description, and sort strategy (and rules for smart collections); and a collection can be archived. A bad-shape submit re-renders with the validator's message rather than a 500, and an unknown slug or product is a no-op notice. **Changed:** *Console nav gains Collections* — The signed-in admin nav now includes Collections, shown when the collections primitive is wired. The list, detail, create, edit, archive, and member endpoints content-negotiate like the other screens: a bearer-token client gets the JSON API, a signed-in browser gets HTML. A request without the bearer token returns the sign-in form on a GET and redirects on a write.

package/README.md

@@ -61,7 +61,7 @@ Every primitive is composed on the vendored blamejs surface — no npm runtime d
 | **`lib/order.js`** | FSM-driven post-checkout record via upstream `b.fsm`. States: pending → paid → fulfilling → shipped → delivered (+ refunded / cancelled). Every transition appends to `order_transitions`. |
 | **`lib/checkout.js`** | Orchestrator. `quote()` returns priced quote; `confirm()` creates a Stripe PaymentIntent + persists order pending; `handleStripeEvent()` verifies webhook + fires the FSM transition. PayPal path: `createPaypalOrder()` opens a PayPal order + persists pending, `capturePaypalOrder()` captures → paid, `handlePaypalEvent()` is the webhook backstop. All idempotent on re-delivery. |
 | **`lib/email.js`** | Transactional templates — order receipt, ship notification, refund confirmation. Strict `{{var}}` renderer with HTML escape + refusal of unknown / unused placeholders. Composed on `b.mail` (DKIM/SPF/DMARC/BIMI upstream). |
-| **`lib/storefront.js`** | Server-rendered HTML — utility bar + sticky header + dark hero with code-preview card + primitives marquee + featured-product callout + collections grid + framework feature band + designed catalog grid + newsletter band + four-column footer. Designed surfaces also for PDP, cart, checkout, pay, order, account login / register / dashboard, search results, `/admin` API landing, 404. Image-bearing cards on the home + search grids pull from `catalog.media`. The default theme stylesheet is external (R2-served `themes/default/assets/css/main.css`) and CSP-compliant — operators override by uploading a replacement at the same key, by passing `opts.theme_css` to renderers, or by registering a named theme through the `theme` primitive. |
+| **`lib/storefront.js`** | Server-rendered HTML — utility bar + sticky header + dark hero with code-preview card + primitives marquee + featured-product callout + collections grid + framework feature band + designed catalog grid + newsletter band + four-column footer. Designed surfaces also for PDP, cart, checkout, pay, order, account login / register / dashboard, search results, `/admin` API landing, 404. Image-bearing cards on the home + search grids pull from `catalog.media`. The default theme stylesheet is external (R2-served `themes/default/assets/css/main.css`) and CSP-compliant; the typeface (Inter / Inter Tight) is self-hosted from `themes/default/assets/fonts`, so no page loads a cross-origin font. Operators override by uploading a replacement at the same key, by passing `opts.theme_css` to renderers, or by registering a named theme through the `theme` primitive. |
 | **`lib/customers.js`** | Customer accounts — passkey (WebAuthn) + **Sign in with Google / Apple** (OIDC). Email is stored hash-only (`b.crypto.namespaceHash` namespace `customer-email`); the raw address never lands in D1. Passkey credentials carry CBOR-encoded public keys, transport hints, and SHA3-512-fingerprinted attestation. `signInWithOIDC` keys federated accounts on the provider `(provider, subject)` and links an existing account only on a provider-verified email (never on an unverified one). `mintAppleClientSecret` produces Apple's required ES256 client-secret JWT from a Services-ID `.p8` key (the one classical signature the protocol mandates; the PQC default doesn't apply to an external IdP's wire format). Account routes (`/account/login`, `/account/register`, `/account`, `/account/login/google`, `/account/login/apple`) ship as designed cards on the storefront. |
 | **`lib/reviews.js`** | Operator-moderated product ratings. Submission requires a signed-in customer **and** a verified purchase — `/products/:slug/review` confirms a completed order for the product (via `order.hasPurchasedProduct`) before accepting, re-checked on POST; reviews land `pending`. Author identity is hash-only (`b.crypto.namespaceHash`); the raw email is never stored. The PDP renders the average, per-star distribution, and published reviews with `AggregateRating` JSON-LD. `/admin/reviews` is the moderation queue (`listByStatus` → publish / reject). |
 | **`lib/wishlist.js`** | Per-customer saved products. The PDP renders a login-gated "Save to wishlist" toggle and a "N shoppers saved this" social-proof count; `/account/wishlist` lists saved items (remove + reopen, orphan-tolerant when a product is archived). `POST /wishlist/toggle` is idempotent (`INSERT OR IGNORE`) and redirects to the canonical product slug or a safe same-origin `return_to`. UUID-shape-validated ids, `b.pagination` HMAC cursors. |
@@ -75,7 +75,7 @@ Every primitive is composed on the vendored blamejs surface — no npm runtime d
 | **`lib/giftcards.js`** | Prepaid bearer gift cards. `issue({ amount_minor, currency })` generates a 16-char code (32-glyph alphabet, no ambiguous letters) via `b.crypto.generateBytes`, stores only its `namespaceHash` digest + a 4-char hint, and returns the plaintext code once. `balance(code)` / `lookup(code)` resolve a code to its live balance (constant-time hash compare); `redeem({ code, order_id, amount_minor })` decrements the balance with an atomic `balance >= amount` SQL guard so concurrent spends can't overdraw. Redeemed at checkout as a credit against the order grand total: the amount due drops by the applied balance (never below zero), the order still records the full total it owed, and the debit is recorded once per order — a card that fully covers the order is marked paid with no Stripe charge. Customers check a balance at `GET /gift-cards`; the page is not a code-existence oracle (unknown / malformed / expired all return the same generic not-found). |
 | **`lib/gift-card-ledger.js`** | Append-only credit / debit / expire history per gift card, with a denormalized `balance_after_minor` snapshot for O(1) balance reads. `credit` / `debit` / `expire` write one row each; `history(id)` paginates a card's transactions; `transactionsForOrder(id)` lists a card's movements for one order. The audit trail behind the admin gift-card ledger console; overdraft is refused at the primitive layer. |
 | **`lib/newsletter.js`** | Operator-collected email broadcast list — `signup({ email, source })` composes `b.guardEmail` for shape validation, `b.crypto.namespaceHash` for the dedup key, and `INSERT OR IGNORE` for idempotency. Storefront POST `/newsletter` route renders a designed thank-you card with separate copy for the `new` vs `dedup` branches. |
-| **`lib/admin.js`** | Bearer-token-gated CRUD over catalog + orders + refunds + bulk CSV import + subscription plans + review moderation + return moderation. Token compared via `b.crypto.timingSafeEqual`. Errors as RFC 9457 problem documents via `b.problemDetails`. Audit emission on every mutation. Also serves a **browser admin console**: sign in at `/admin` by pasting the API key (sealed `shop_admin` session cookie, SameSite=Strict, /admin-scoped), with a persistent nav across every signed-in page. A guided **setup wizard** at `/admin/setup` writes shop identity to config; **Products** (`/admin/products`) browses the catalog and creates / archives / restores; **Inventory** (`/admin/inventory`) lists stock per SKU (on-hand / held / available) with a low-stock filter, restocks, sets per-SKU thresholds, and tracks new SKUs; **Orders** (`/admin/orders`) lists recent orders with status filters, opens an order's items, totals, and shipping address, and drives the lifecycle (mark paid → fulfil → ship → deliver, cancel — Refund goes through the payment provider) through the order FSM; **Customers** (`/admin/customers`) is a read-only roster, newest first — display name, short id, join date, sign-in method (passkey count + linked OAuth providers), and order count, with the count and sign-in methods resolved by bounded aggregate queries so a page of customers costs no per-row trips (email addresses aren't stored in the clear, so they're not shown); **Returns** (`/admin/returns`) is the RMA moderation queue — filter by status, open a request's items and reason, and approve (with refund amount) → mark received → refund, or reject with a reason, over the return FSM; **Reviews** (`/admin/reviews`) is the review moderation queue — filter by status and publish, reject (with a reason), or take down each submission inline; **Subscriptions** (`/admin/subscription-plans`) is the recurring-offer catalog — filter active / archived, create a plan (Stripe price id, interval, amount, trial), and archive one, with archiving terminal because the mirrored Stripe price can go stale; **Collections** (`/admin/collections`) manages manual + smart product collections — filter active / archived, create a collection (manual or smart with a starter rule), and per collection edit title / description / sort strategy, manage manual members (add by product id, remove, reorder) or edit a smart collection's rule set with a live preview of the products the rules currently match, and archive; **Gift cards** (`/admin/gift-cards`) is the gift-card ledger — list issued cards (masked code, original + remaining balance, status, issued date) filtered by lifecycle status, issue a new card (the bearer code shown once, right after creation), and open a card to see its full credit / debit / expire ledger; **Webhooks** (`/admin/webhooks`) registers outbound endpoints (https:// only) with a one-time signing-secret reveal, enables / disables / deletes them, and opens an endpoint's delivery feed to retry a failed delivery — the signing secret is shown once on create and never in the list, and order transitions fan out signed deliveries to subscribed endpoints. The Customers, Returns, Reviews, Subscriptions, Collections, Gift cards, and Webhooks links appear only when those primitives are wired. Each console path content-negotiates: a bearer-token client still gets the JSON API unchanged, a signed-in browser gets HTML. Reachable by the cookie or the bearer token. |
+| **`lib/admin.js`** | Bearer-token-gated CRUD over catalog + orders + refunds + bulk CSV import + subscription plans + review moderation + return moderation. Token compared via `b.crypto.timingSafeEqual`. Errors as RFC 9457 problem documents via `b.problemDetails`. Audit emission on every mutation. Also serves a **browser admin console**: sign in at `/admin` by pasting the API key (sealed `shop_admin` session cookie, SameSite=Strict, /admin-scoped), with a persistent nav across every signed-in page. A guided **setup wizard** at `/admin/setup` writes shop identity to config; **Products** (`/admin/products`) browses the catalog and creates / archives / restores; **Inventory** (`/admin/inventory`) lists stock per SKU (on-hand / held / available) with a low-stock filter, restocks, sets per-SKU thresholds, and tracks new SKUs; **Orders** (`/admin/orders`) lists recent orders with status filters, opens an order's items, totals, and shipping address, and drives the lifecycle (mark paid → fulfil → ship → deliver, cancel — Refund goes through the payment provider) through the order FSM; **Customers** (`/admin/customers`) is a read-only roster, newest first — display name, short id, join date, sign-in method (passkey count + linked OAuth providers), and order count, with the count and sign-in methods resolved by bounded aggregate queries so a page of customers costs no per-row trips (email addresses aren't stored in the clear, so they're not shown); **Returns** (`/admin/returns`) is the RMA moderation queue — filter by status, open a request's items and reason, and approve (with refund amount) → mark received → refund, or reject with a reason, over the return FSM; **Reviews** (`/admin/reviews`) is the review moderation queue — filter by status and publish, reject (with a reason), or take down each submission inline; **Subscriptions** (`/admin/subscription-plans`) is the recurring-offer catalog — filter active / archived, create a plan (Stripe price id, interval, amount, trial), and archive one, with archiving terminal because the mirrored Stripe price can go stale; **Collections** (`/admin/collections`) manages manual + smart product collections — filter active / archived, create a collection (manual or smart with a starter rule), and per collection edit title / description / sort strategy, manage manual members (add by product id, remove, reorder) or edit a smart collection's rule set with a live preview of the products the rules currently match, and archive; **Gift cards** (`/admin/gift-cards`) is the gift-card ledger — list issued cards (masked code, original + remaining balance, status, issued date) filtered by lifecycle status, issue a new card (the bearer code shown once, right after creation), and open a card to see its full credit / debit / expire ledger; **Webhooks** (`/admin/webhooks`) registers outbound endpoints (https:// only) with a one-time signing-secret reveal, enables / disables / deletes them, and opens an endpoint's delivery feed to retry a failed delivery — the signing secret is shown once on create and never in the list, and order transitions fan out signed deliveries to subscribed endpoints. The Customers, Returns, Reviews, Subscriptions, Collections, Gift cards, and Webhooks links appear only when those primitives are wired. Each console path content-negotiates: a bearer-token client still gets the JSON API unchanged, a signed-in browser gets HTML. Reachable by the cookie or the bearer token. The console's styling is an external, integrity-pinned stylesheet (`themes/default/assets/css/admin.css`) with the same self-hosted typeface — no inline styles and no third-party font host, so it renders correctly under the strict `style-src 'self'` / `font-src 'self'` CSP that governs the route. |
 | **`lib/catalog-import.js`** | Bulk CSV import — `POST /admin/catalog/import` accepts a `text/csv` body, parses via `b.csv`, content-safety-filters every cell through `b.guardCsv` (formula-injection / bidi / control / dangerous-function denylist), validates exact header order, de-dupes rows by `product_slug`, returns per-row errors without aborting. Default 1 MiB / 10000 rows caps. |
 | **`lib/theme.js`** | File-backed templates with fallback chain. Operators register a named theme under `<themesDir>/<name>/*.html` and the storefront dispatches every renderer through it. `assetUrl(path)` resolves to `/assets/themes/<name>/<path>`. The shipped `default` theme is the fallback. |
 

package/lib/admin.js

@@ -37,6 +37,36 @@ 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
@@ -2249,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" +
@@ -2460,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>";
@@ -2530,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) {
@@ -2538,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) {
@@ -2583,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>" +
@@ -2649,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);
@@ -2675,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") +
@@ -2780,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>";
@@ -2793,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>" +
@@ -2801,13 +2755,13 @@ 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>";
@@ -2946,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>");
@@ -2981,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>" +
@@ -2989,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) +
@@ -2999,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>";
@@ -3032,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>" +
@@ -3083,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>";
@@ -3095,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\"") +
@@ -3133,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>" +
@@ -3155,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") +
@@ -3222,8 +3176,8 @@ function renderAdminGiftCards(opts) {
   // plaintext code is shown once on the card's detail page after a
   // successful issue, never again.
   var issueForm =
-    "<div class=\"panel\" style=\"margin-top:1.5rem; max-width:34rem;\">" +
-      "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Issue a card</h3>" +
+    "<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") +
@@ -3284,7 +3238,7 @@ function renderAdminGiftCard(opts) {
     : "<p class=\"empty\">No ledger transactions recorded for this card yet.</p>";
 
   var body = "<section><h2>Gift card</h2>" + issuedBanner + summary +
-    "<h3 style=\"font-size:.95rem; margin:1.5rem 0 .75rem;\">Ledger</h3>" + ledgerTable +
+    "<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);
 }
@@ -3309,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("");
 
@@ -3319,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>" +
@@ -3346,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>" +
@@ -3379,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>" +
@@ -3429,7 +3383,7 @@ function renderAdminCollections(opts) {
       "<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\" style=\"display:inline;\">" +
+          "<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>";
@@ -3451,8 +3405,8 @@ function renderAdminCollections(opts) {
   }).join("");
 
   var createForm =
-    "<div class=\"panel\" style=\"margin-top:1.5rem; max-width:40rem;\">" +
-      "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Create a collection</h3>" +
+    "<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\">" +
@@ -3462,14 +3416,14 @@ function renderAdminCollections(opts) {
         _setupField("Title", "title", "", "text", "", " maxlength=\"500\" required") +
         _setupField("Slug", "slug", "", "text", "Lowercase, hyphenated.", " maxlength=\"200\" required") +
         _setupField("Description (optional)", "description", "", "text", "", " maxlength=\"2000\"") +
-        "<fieldset style=\"border:1px solid var(--hair); border-radius:.5rem; padding:.75rem 1rem; margin:1rem 0;\">" +
-          "<legend style=\"padding:0 .4rem; font-size:.85rem;\">Smart rule (used only for smart collections)</legend>" +
+        "<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 style=\"color:var(--mute);\">Numeric fields (price_minor, inventory_count, created_at) compare as integers. Add more rules after creating.</small>" +
+          "<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>" +
@@ -3501,8 +3455,8 @@ function renderAdminCollection(opts) {
   }).join("");
 
   var editForm =
-    "<div class=\"panel\" style=\"max-width:40rem;\">" +
-      "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Details</h3>" +
+    "<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\"") +
@@ -3524,17 +3478,17 @@ function renderAdminCollection(opts) {
       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\" style=\"margin:.4rem 0;\">" +
+      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 style=\"border:1px solid var(--hair); border-radius:.5rem; padding:.75rem 1rem; margin:1rem 0;\">" +
-        "<legend style=\"padding:0 .4rem; font-size:.85rem;\">Rules (all must match)</legend>" +
+      "<fieldset class=\"box\">" +
+        "<legend class=\"legend-sm\">Rules (all must match)</legend>" +
         ruleRows +
-        "<small style=\"color:var(--mute);\">Leave a row blank to drop it. Lists (in / not_in) + between use comma-separated values.</small>" +
+        "<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>";
@@ -3546,7 +3500,7 @@ function renderAdminCollection(opts) {
       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\" style=\"display:inline;\">" +
+        "<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>";
@@ -3560,8 +3514,8 @@ function renderAdminCollection(opts) {
     // 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\" style=\"margin-top:1rem; max-width:40rem;\">" +
-          "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Reorder members</h3>" +
+      ? "<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>" +
@@ -3572,15 +3526,15 @@ function renderAdminCollection(opts) {
       : "";
 
     var addForm =
-      "<div class=\"panel\" style=\"margin-top:1rem; max-width:40rem;\">" +
-        "<h3 style=\"font-size:.95rem; margin-bottom:.75rem;\">Add a member</h3>" +
+      "<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 style=\"margin-top:1.5rem;\"><h3 style=\"font-size:1.05rem;\">Members</h3>" +
+    detailBody = "<section class=\"mt\"><h3 class=\"fs-105\">Members</h3>" +
       memberTable + reorderForm + addForm + "</section>";
   } else {
     var preview = opts.preview || [];
@@ -3594,7 +3548,7 @@ function renderAdminCollection(opts) {
     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 style=\"margin-top:1.5rem;\"><h3 style=\"font-size:1.05rem;\">Matched products (live preview)</h3>" +
+    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>";
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blamejs/blamejs-shop",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "description": "Open-source framework built on blamejs. Vendored stack, zero npm runtime deps, PQC-first crypto, security-on by default.",
   "main": "lib/index.js",
   "scripts": {