@tokenoftrust/storefront-runner 1.3.2

package/apps/storefront/src/components/admin/AdminSettingsTab.astro

@@ -0,0 +1,782 @@
+---
+import { getSettingsViewModel } from "@/lib/admin/services/mock";
+import AdminFoxyCartSettingsPanel from "@/components/admin/AdminFoxyCartSettingsPanel.astro";
+import { withBase } from "@/lib/basePath";
+
+const { envelope } = Astro.props;
+const settings = getSettingsViewModel(envelope);
+
+// Checkout styling editor (U12). Renders the current CheckoutStyle and saves it
+// through the versioned publish spine (POST /api/preview/checkout-style —
+// colocated with reconcile/promote in the control-plane publish cluster). The
+// endpoint is base-path-prefixed so it stays inside a path-routed tenant, and
+// the client script is nonce'd (CSP: script-src is 'self' + nonce).
+const { cspNonce, basePath } = Astro.locals;
+const checkoutStyle = settings.checkoutStyle;
+const checkoutStyleEndpoint = withBase(basePath || "", "/api/preview/checkout-style");
+const colorFields = [
+  { key: "background", label: "Page background" },
+  { key: "surface", label: "Card surface" },
+  { key: "primary", label: "Primary" },
+  { key: "primaryContrast", label: "On-primary text" },
+  { key: "accent", label: "Accent" },
+  { key: "text", label: "Body text" },
+] as const;
+// Initial CSS custom properties for the live preview (inline style ATTRIBUTES
+// are CSP-allowed via style-src-attr 'unsafe-inline'; no <style> is injected).
+const previewVars = [
+  `--cs-bg:${checkoutStyle.colors.background}`,
+  `--cs-surface:${checkoutStyle.colors.surface}`,
+  `--cs-primary:${checkoutStyle.colors.primary}`,
+  `--cs-primary-contrast:${checkoutStyle.colors.primaryContrast}`,
+  `--cs-accent:${checkoutStyle.colors.accent}`,
+  `--cs-text:${checkoutStyle.colors.text}`,
+  `--cs-font:${checkoutStyle.typography.fontFamily}`,
+  `--cs-size:${checkoutStyle.typography.baseSize}`,
+  `--cs-radius:${checkoutStyle.button.radius}`,
+].join(";");
+
+const APPROVAL_MODE_LABEL: Record<string, string> = {
+  draft_only: "Draft only",
+  approval_required: "Approval required",
+  guarded_automation: "Guarded automation",
+};
+
+const APPROVAL_MODE_DETAIL: Record<string, string> = {
+  draft_only: "AI can propose changes, but an operator must publish them.",
+  approval_required: "AI can draft and stage a change; it takes effect only after explicit approval.",
+  guarded_automation: "Pre-approved, narrowly-scoped changes may apply automatically within policy limits.",
+};
+
+const riskyCount = settings.sections.filter((s) => s.riskyChangeReview).length;
+
+function formatChangeSummary(change: string): string {
+  return change.replace(/^./, (c) => c.toUpperCase());
+}
+---
+
+<!-- agent-hook:settings-tab -->
+<section id="settings" class="band settings-tab" aria-labelledby="admin-tab-settings settings-title" data-admin-panel data-agent-scope="settings" role="tabpanel">
+  <div class="section-title">
+    <div>
+      <h2 id="settings-title">Settings</h2>
+      <p>Store configuration, operational policy, access, regulated storefront controls, and audited changes.</p>
+    </div>
+    <div class="actions">
+      <button class="btn" type="button"><svg><use href="#i-refresh"></use></svg>Sync policies</button>
+      <button class="btn primary" type="button"><svg><use href="#i-check"></use></svg>Review changes</button>
+    </div>
+  </div>
+
+  <div class="grid cols-4">
+    <div class="metric">
+      <span>Sections</span>
+      <strong>{settings.sections.length}</strong>
+      <small>Store, checkout, payments, shipping, taxes, and more</small>
+    </div>
+    <div class="metric">
+      <span>Risky review</span>
+      <strong>{riskyCount}</strong>
+      <small>Sections whose changes require review before they apply</small>
+    </div>
+    <div class="metric">
+      <span>Shipping restrictions</span>
+      <strong>{settings.shippingRestrictions.length}</strong>
+      <small>Regions with a destination or product restriction on file</small>
+    </div>
+    <div class="metric">
+      <span>AI / admin policy</span>
+      <strong>{APPROVAL_MODE_LABEL[settings.aiPolicyMode] ?? settings.aiPolicyMode}</strong>
+      <small>{APPROVAL_MODE_DETAIL[settings.aiPolicyMode] ?? ""}</small>
+    </div>
+  </div>
+
+  {riskyCount > 0 && (
+    <div class="ship-gate amber">
+      <div class="ship-gate-main">
+        <span class="seal"><svg><use href="#i-alert"></use></svg></span>
+        <div>
+          <b>{riskyCount} section{riskyCount === 1 ? "" : "s"} need review before changes apply</b>
+          <span>Risky-change review is required for payments, shipping, taxes, users &amp; access, and AI/admin policy.</span>
+        </div>
+      </div>
+      <a class="btn" href="#settings-sections">Review sections</a>
+    </div>
+  )}
+
+  <div class="settings-workspace">
+    <aside class="settings-menu" aria-label="Settings sections">
+      <div class="settings-search">
+        <label for="settings-search">Search settings</label>
+        <input id="settings-search" type="search" placeholder="Search settings" />
+      </div>
+      <div class="settings-section-list" role="list">
+        {settings.sections.map((section) => (
+          <a class:list={["settings-section-link", { active: section.key === "compliance" }]} href="#settings-sections" role="listitem">
+            <span>
+              <strong>{section.label}</strong>
+              <small>{section.summary}</small>
+            </span>
+            <span class:list={["chip", section.riskyChangeReview ? "amber" : "green"]}>
+              {section.riskyChangeReview ? "Review" : "Standard"}
+            </span>
+          </a>
+        ))}
+      </div>
+    </aside>
+
+    <div class="settings-detail">
+      <div id="settings-sections" class="panel">
+        <div class="panel-head settings-panel-head">
+          <h3><svg><use href="#i-gear"></use></svg>Settings Overview</h3>
+          <span class="chip blue">Draft-safe controls</span>
+        </div>
+        <div class="panel-body grid">
+          <div class="table-wrap">
+            <table class="settings-table">
+              <thead>
+                <tr>
+                  <th>Section</th>
+                  <th>Review</th>
+                  <th class="action">Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {settings.sections.map((section) => (
+                  <tr>
+                    <td><strong>{section.label}</strong><span class="subtle">{section.summary}</span></td>
+                    <td><span class:list={["chip", section.riskyChangeReview ? "amber" : "green"]}>{section.riskyChangeReview ? "Review required" : "No blocker"}</span></td>
+                    <td class="action"><button class="btn" type="button">{section.riskyChangeReview ? "Review" : "Manage"}</button></td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+
+      <div id="settings-checkout-styling" class="panel" data-agent-scope="settings-checkout-styling">
+        <div class="panel-head settings-panel-head">
+          <h3><svg><use href="#i-card"></use></svg>Checkout styling</h3>
+          <span class="chip blue">Versioned publish</span>
+        </div>
+        <div class="panel-body grid">
+          <p class="note">
+            Style the hosted checkout your buyers see. Saving publishes a versioned
+            draft to your <b>test</b> environment — preview it, then promote it live
+            from the go-live gate. Keep values ASCII-only; the checkout cache is not
+            Unicode-safe.
+          </p>
+
+          <form class="checkout-style-editor" data-checkout-style-form data-endpoint={checkoutStyleEndpoint} data-target-tenant={settings.targetTenant}>
+            <div class="grid cols-2">
+              <div class="cs-fields">
+                <fieldset class="cs-fieldset">
+                  <legend>Colors</legend>
+                  <div class="cs-color-grid">
+                    {colorFields.map((f) => (
+                      <div class="cs-color-row">
+                        <span class="cs-swatch" data-cs-swatch={`colors.${f.key}`} style={`background:${checkoutStyle.colors[f.key]}`} aria-hidden="true"></span>
+                        <label for={`cs-color-${f.key}`}>{f.label}</label>
+                        <input
+                          id={`cs-color-${f.key}`}
+                          type="text"
+                          spellcheck="false"
+                          autocomplete="off"
+                          data-cs-field={`colors.${f.key}`}
+                          value={checkoutStyle.colors[f.key]}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </fieldset>
+
+                <fieldset class="cs-fieldset">
+                  <legend>Typography &amp; shape</legend>
+                  <div class="cs-field">
+                    <label for="cs-font-family">Font family</label>
+                    <input id="cs-font-family" type="text" spellcheck="false" autocomplete="off" data-cs-field="typography.fontFamily" value={checkoutStyle.typography.fontFamily} />
+                  </div>
+                  <div class="cs-field-row">
+                    <div class="cs-field">
+                      <label for="cs-base-size">Base size</label>
+                      <input id="cs-base-size" type="text" spellcheck="false" autocomplete="off" data-cs-field="typography.baseSize" value={checkoutStyle.typography.baseSize} />
+                    </div>
+                    <div class="cs-field">
+                      <label for="cs-radius">Button radius</label>
+                      <input id="cs-radius" type="text" spellcheck="false" autocomplete="off" data-cs-field="button.radius" value={checkoutStyle.button.radius} />
+                    </div>
+                  </div>
+                  <div class="cs-field">
+                    <label for="cs-logo">Logo URL (optional)</label>
+                    <input id="cs-logo" type="url" spellcheck="false" autocomplete="off" placeholder="https://…" data-cs-field="logoUrl" value={checkoutStyle.logoUrl ?? ""} />
+                  </div>
+                </fieldset>
+              </div>
+
+              <div class="cs-preview-wrap">
+                <span class="cs-preview-label">Live preview</span>
+                <div class="cs-preview" data-cs-preview style={previewVars}>
+                  <div class="cs-preview-card">
+                    <div class="cs-preview-brand">
+                      <img data-cs-logo src={checkoutStyle.logoUrl || undefined} alt="" hidden={!checkoutStyle.logoUrl} />
+                      <strong>Checkout</strong>
+                    </div>
+                    <div class="cs-preview-line"><span>Order total</span><b>$48.00</b></div>
+                    <a class="cs-preview-link" href="#settings-checkout-styling" data-checkout-styling-noop>Have a coupon code?</a>
+                    <button class="cs-preview-pay" type="button" tabindex="-1">Pay now</button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="cs-actions">
+              <button class="btn primary" type="button" data-checkout-style-save><svg><use href="#i-check"></use></svg>Save checkout styling</button>
+              <p class="note cs-status" data-checkout-style-status role="status" aria-live="polite"></p>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div class="panel">
+        <div class="panel-head settings-panel-head">
+          <h3><svg><use href="#i-truck"></use></svg>Shipping Restrictions</h3>
+          <span class:list={["chip", settings.shippingRestrictions.length > 0 ? "amber" : "green"]}>
+            {settings.shippingRestrictions.length > 0 ? `${settings.shippingRestrictions.length} active` : "None"}
+          </span>
+        </div>
+        <div class="panel-body grid">
+          {settings.shippingRestrictions.length === 0 ? (
+            <p class="note">No destination or product shipping restrictions on file for this tenant.</p>
+          ) : (
+            <div class="readiness-list" aria-label="Shipping restrictions">
+              {settings.shippingRestrictions.map((restriction) => (
+                <div class="check-row blocking">
+                  <div><b>{restriction.region}</b><p>{restriction.reason}</p></div>
+                  <span class="chip amber">Action</span>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      <AdminFoxyCartSettingsPanel envelope={envelope} />
+
+      <div class="grid cols-2">
+        <div class="panel">
+          <div class="panel-head">
+            <h3><svg><use href="#i-alert"></use></svg>AI / Admin Policy</h3>
+            <span class="chip blue">Guardrails</span>
+          </div>
+          <div class="panel-body grid">
+            <div class="policy-row">
+              <div>
+                <b>AI drafting mode</b>
+                <p>{APPROVAL_MODE_DETAIL[settings.aiPolicyMode] ?? ""}</p>
+              </div>
+              <span class="chip blue">{APPROVAL_MODE_LABEL[settings.aiPolicyMode] ?? settings.aiPolicyMode}</span>
+            </div>
+            <div class="policy-row">
+              <div>
+                <b>Internal tenant picker</b>
+                <p>Only internal staff sessions can see or use the "Operating as" tenant picker in the admin shell.</p>
+              </div>
+              <span class:list={["chip", settings.internalTenantPickerEnabled ? "teal" : ""]}>
+                {settings.internalTenantPickerEnabled ? "Enabled" : "Disabled"}
+              </span>
+            </div>
+            <div class="policy-row">
+              <div>
+                <b>Risky policy changes</b>
+                <p>{riskyCount} of {settings.sections.length} sections require review before a change takes effect.</p>
+              </div>
+              <span class="chip blue">Require review</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="panel">
+          <div class="panel-head">
+            <h3><svg><use href="#i-file"></use></svg>Audit Activity</h3>
+            <button class="btn" type="button"><svg><use href="#i-export"></use></svg>Export</button>
+          </div>
+          <div class="panel-body grid">
+            {settings.auditTrail.length === 0 ? (
+              <p class="note">No audited changes yet for this tenant.</p>
+            ) : (
+              settings.auditTrail.map((event) => (
+                <div class="audit-row">
+                  <time datetime={event.at}>{new Date(event.at).toLocaleString()}</time>
+                  <div>
+                    <b>{formatChangeSummary(event.change)}</b>
+                    <p>{event.operator} &middot; {event.targetTenant}</p>
+                  </div>
+                  <span class="chip teal">Logged</span>
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<script is:inline nonce={cspNonce}>
+  (() => {
+    const form = document.querySelector("[data-checkout-style-form]");
+    if (!form) return;
+    const endpoint = form.dataset.endpoint || "/api/preview/checkout-style";
+    // The tenant this save targets — the routed tenant for a merchant, or the
+    // staff picker's "operating as" tenant. The endpoint re-authorizes it.
+    const targetTenant = form.dataset.targetTenant || "";
+    const preview = form.querySelector("[data-cs-preview]");
+    const logoImg = form.querySelector("[data-cs-logo]");
+    const status = form.querySelector("[data-checkout-style-status]");
+    const saveBtn = form.querySelector("[data-checkout-style-save]");
+
+    // data-cs-field → the preview CSS custom property it drives.
+    const CSS_VAR = {
+      "colors.background": "--cs-bg",
+      "colors.surface": "--cs-surface",
+      "colors.primary": "--cs-primary",
+      "colors.primaryContrast": "--cs-primary-contrast",
+      "colors.accent": "--cs-accent",
+      "colors.text": "--cs-text",
+      "typography.fontFamily": "--cs-font",
+      "typography.baseSize": "--cs-size",
+      "button.radius": "--cs-radius",
+    };
+
+    const fields = Array.from(form.querySelectorAll("[data-cs-field]"));
+
+    const setStatus = (message, state) => {
+      if (!status) return;
+      status.textContent = message;
+      if (state) status.dataset.state = state;
+      else delete status.dataset.state;
+    };
+
+    // Reflect edits into the preview live. Inline style ATTRIBUTES are the one
+    // CSP-tolerated relaxation (style-src-attr 'unsafe-inline'); no <style> tag is
+    // injected, so script-src/style-src stay fully strict.
+    const applyPreview = () => {
+      for (const el of fields) {
+        const path = el.dataset.csField;
+        const value = el.value.trim();
+        const cssVar = CSS_VAR[path];
+        if (cssVar && preview) preview.style.setProperty(cssVar, value);
+        const swatch = form.querySelector('[data-cs-swatch="' + path + '"]');
+        if (swatch) swatch.style.background = value;
+        if (path === "logoUrl" && logoImg) {
+          if (value) {
+            logoImg.src = value;
+            logoImg.hidden = false;
+          } else {
+            logoImg.removeAttribute("src");
+            logoImg.hidden = true;
+          }
+        }
+      }
+    };
+
+    // Gather the fields into the CheckoutStyle partial the save endpoint validates.
+    const collect = () => {
+      const style = { colors: {}, typography: {}, button: {} };
+      for (const el of fields) {
+        const path = el.dataset.csField;
+        const value = el.value.trim();
+        if (path === "logoUrl") {
+          if (value) style.logoUrl = value;
+          continue;
+        }
+        const dot = path.indexOf(".");
+        const group = path.slice(0, dot);
+        const key = path.slice(dot + 1);
+        if (style[group]) style[group][key] = value;
+      }
+      return style;
+    };
+
+    for (const el of fields) {
+      el.addEventListener("input", applyPreview);
+    }
+
+    saveBtn?.addEventListener("click", async () => {
+      setStatus("Saving…");
+      saveBtn.disabled = true;
+      try {
+        const res = await fetch(endpoint, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(targetTenant ? { ...collect(), targetTenant } : collect()),
+        });
+        let data = {};
+        try {
+          data = await res.json();
+        } catch {
+          /* non-JSON error body */
+        }
+        if (res.ok) {
+          const v = typeof data.versionId === "string" ? data.versionId.slice(0, 8) : "";
+          setStatus(v ? "Saved to test · version " + v : "Saved to test", "ok");
+        } else {
+          const detail =
+            Array.isArray(data.errors) && data.errors.length
+              ? data.errors.join("; ")
+              : data.error || "Save failed (" + res.status + ")";
+          setStatus(detail, "err");
+        }
+      } catch {
+        setStatus("Save failed — network error", "err");
+      } finally {
+        saveBtn.disabled = false;
+      }
+    });
+
+    // Preview coupon link is illustrative only; don't navigate.
+    form.querySelector("[data-checkout-styling-noop]")?.addEventListener("click", (e) => e.preventDefault());
+  })();
+</script>
+
+<style>
+  .settings-workspace {
+    display: grid;
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+    gap: 14px;
+    align-items: start;
+  }
+
+  .settings-menu,
+  .settings-detail {
+    min-width: 0;
+  }
+
+  .settings-menu {
+    position: sticky;
+    top: 84px;
+    display: grid;
+    gap: 10px;
+    max-height: calc(100vh - 104px);
+    overflow: auto;
+  }
+
+  .settings-search {
+    display: grid;
+    gap: 6px;
+    padding: 12px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--admin-surface);
+  }
+
+  .settings-search label {
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+
+  .settings-search input {
+    width: 100%;
+    min-height: 38px;
+    padding: 0 10px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+  }
+
+  .settings-section-list {
+    display: grid;
+    gap: 6px;
+  }
+
+  .settings-section-link {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 10px;
+    align-items: center;
+    min-height: 58px;
+    padding: 10px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    text-decoration: none;
+  }
+
+  .settings-section-link.active {
+    border-color: #8bcac4;
+    background: var(--admin-teal-soft);
+  }
+
+  .settings-section-link strong,
+  .settings-section-link small {
+    display: block;
+    overflow-wrap: anywhere;
+  }
+
+  .settings-section-link small {
+    margin-top: 2px;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .settings-detail {
+    display: grid;
+    gap: 14px;
+  }
+
+  .settings-panel-head {
+    flex-wrap: wrap;
+  }
+
+  .settings-table {
+    min-width: 640px;
+  }
+
+  .readiness-list {
+    display: grid;
+    gap: 0;
+  }
+
+  .policy-row,
+  .audit-row {
+    display: grid;
+    gap: 10px;
+    align-items: center;
+    padding: 10px 0;
+    border-bottom: 1px solid var(--admin-line);
+  }
+
+  .policy-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .audit-row {
+    grid-template-columns: 150px minmax(0, 1fr) auto;
+  }
+
+  .policy-row:last-child,
+  .audit-row:last-child {
+    border-bottom: 0;
+  }
+
+  .policy-row b,
+  .audit-row b {
+    display: block;
+    font-size: 13px;
+  }
+
+  .policy-row p,
+  .audit-row p {
+    margin: 2px 0 0;
+    color: var(--admin-muted);
+    font-size: 12px;
+  }
+
+  .audit-row time {
+    color: var(--admin-muted);
+    font-size: 12px;
+    font-weight: 760;
+  }
+
+  @media (max-width: 1180px) {
+    .settings-workspace {
+      grid-template-columns: 1fr;
+    }
+
+    .settings-menu {
+      position: static;
+      max-height: none;
+      overflow: visible;
+    }
+
+    .settings-section-list {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @media (max-width: 720px) {
+    .settings-section-list,
+    .policy-row,
+    .audit-row {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* Checkout styling editor (U12) */
+  .checkout-style-editor {
+    display: grid;
+    gap: 14px;
+  }
+
+  .cs-fields {
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+  }
+
+  .cs-fieldset {
+    display: grid;
+    gap: 10px;
+    margin: 0;
+    padding: 12px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius-sm);
+    background: #fcfdfc;
+  }
+
+  .cs-fieldset legend {
+    padding: 0 4px;
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+
+  .cs-color-grid {
+    display: grid;
+    gap: 8px;
+  }
+
+  .cs-color-row {
+    display: grid;
+    grid-template-columns: 24px minmax(90px, 0.5fr) minmax(0, 1fr);
+    gap: 8px;
+    align-items: center;
+  }
+
+  .cs-swatch {
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+  }
+
+  .cs-color-row label,
+  .cs-field label {
+    color: var(--admin-muted);
+    font-size: 12px;
+    font-weight: 680;
+  }
+
+  .cs-field {
+    display: grid;
+    gap: 5px;
+    min-width: 0;
+  }
+
+  .cs-field-row {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .checkout-style-editor input {
+    width: 100%;
+    min-width: 0;
+    min-height: 36px;
+    padding: 0 10px;
+    border: 1px solid var(--admin-line-strong);
+    border-radius: var(--admin-radius-sm);
+    background: var(--admin-surface);
+    color: var(--admin-ink);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    font-size: 12px;
+  }
+
+  .cs-preview-wrap {
+    display: grid;
+    gap: 6px;
+    align-content: start;
+  }
+
+  .cs-preview-label {
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 760;
+    text-transform: uppercase;
+  }
+
+  .cs-preview {
+    display: grid;
+    place-items: center;
+    padding: 18px;
+    border: 1px solid var(--admin-line);
+    border-radius: var(--admin-radius);
+    background: var(--cs-bg, #ffffff);
+  }
+
+  .cs-preview-card {
+    display: grid;
+    gap: 12px;
+    width: 100%;
+    max-width: 280px;
+    padding: 16px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    border-radius: var(--cs-radius, 6px);
+    background: var(--cs-surface, #f7f7f8);
+    color: var(--cs-text, #1a1a1a);
+    font-family: var(--cs-font, system-ui, sans-serif);
+    font-size: var(--cs-size, 16px);
+  }
+
+  .cs-preview-brand {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--cs-primary, #111111);
+  }
+
+  .cs-preview-brand img {
+    max-height: 24px;
+    max-width: 96px;
+  }
+
+  .cs-preview-line {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 0.85em;
+  }
+
+  .cs-preview-link {
+    color: var(--cs-accent, #2563eb);
+    font-size: 0.8em;
+    text-decoration: none;
+  }
+
+  .cs-preview-pay {
+    min-height: 40px;
+    border: 0;
+    border-radius: var(--cs-radius, 6px);
+    background: var(--cs-primary, #111111);
+    color: var(--cs-primary-contrast, #ffffff);
+    font: inherit;
+    font-weight: 680;
+  }
+
+  .cs-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .cs-status[data-state="ok"] {
+    color: var(--admin-green);
+  }
+
+  .cs-status[data-state="err"] {
+    color: var(--admin-red);
+  }
+
+  @media (max-width: 720px) {
+    .cs-field-row {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>