@erpsquad/common 1.11.8 → 1.11.10

package/dist/style.css

@@ -1298,63 +1298,6 @@
 }
 .chatBot--disclaimer-text .MuiTypography-root {
   margin-top: 0 !important;
-}
-
-.chatBot--panel.chatBot--panel--inline {
-  position: relative;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  width: 100%;
-  max-width: 600px;
-  margin: 0 auto;
-  height: 100%; /* Fill the container so input sits at the bottom */
-  min-height: calc(100vh - 80px); /* Fallback for FullScreenLayout padding */
-  border: none;
-  box-shadow: none;
-  animation: none;
-  background: transparent;
-  overflow: visible; /* Ensure floating button is not clipped */
-}
-.chatBot--panel.chatBot--panel--inline .chatBot--body {
-  padding-top: 40px;
-  flex: 1; /* Ensure body takes available space, pushing input down */
-}
-.chatBot--panel.chatBot--panel--inline .chatBot--input-area {
-  background: transparent;
-  border-top: none;
-  padding-bottom: 24px; /* Add some padding so it's not flush with the very bottom edge */
-}
-.chatBot--panel.chatBot--panel--inline .chatBot--input-wrap {
-  background: #fff;
-}
-.chatBot--panel.chatBot--panel--inline .chatBot--inline-actions {
-  position: absolute;
-  top: 24px;
-  right: -60px; /* Float outside the message flow */
-  z-index: 10;
-}
-.chatBot--panel.chatBot--panel--inline .chatBot--new-chat-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  padding: 0;
-  background: transparent;
-  border: none;
-  color: #666;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-.chatBot--panel.chatBot--panel--inline .chatBot--new-chat-btn:hover {
-  color: #000;
-  transform: scale(1.1);
-}
-
-.chatBot--welcome--center .chatBot--greeting,
-.chatBot--welcome--center .chatBot--greeting-sub {
-  text-align: center;
 }.action-bar {
   display: flex;
   padding: 0.75rem 0rem;
@@ -9823,32 +9766,11 @@ th .hbs-placeholder {
 
 .formSection--Button :disabled {
   color: rgba(0, 0, 0, 0.25);
-}.editSectionModal--Divider {
-  border-color: #eeeff1;
-}
-.editSectionModal--DialogTitle {
-  padding: 0.75rem 1.5rem !important;
-  border-bottom: 1px solid #d3d3d4;
-}
-.editSectionModal--SectionTitle {
-  padding-left: 1.5rem;
-}
-.editSectionModal--DialogContents {
-  padding: 1.5rem !important;
-}
-.editSectionModal--DialogAction {
-  justify-content: flex-end !important;
-  padding: 0.5rem 1.5rem !important;
-  background-color: #eeeff1;
-}
-.editSectionModal--DialogAction--WhiteBtn {
-  background-color: #fff !important;
-  color: #1f2125;
 }.companySelectionModal--Divider {
-  border-color: #eeeff1;
+  border-color: #d3d3d4;
 }
 .companySelectionModal--DialogTitle {
-  border-bottom: 1px solid #d3d3d4;
+  border-bottom: 1px solid #bdbebf;
 }
 .companySelectionModal--SectionTitle {
   padding-left: 1.5rem;
@@ -9859,36 +9781,4643 @@ th .hbs-placeholder {
 .companySelectionModal--DialogAction {
   justify-content: flex-end !important;
   padding: 0.5rem 1.5rem !important;
-  background-color: #eeeff1;
+  background-color: #d3d3d4;
 }
 .companySelectionModal--DialogAction--WhiteBtn {
   background-color: #fff !important;
   color: #1f2125;
-}.black-outlined-btn {
-  color: #1f2125 !important;
-}.companySelectionModal--Divider {
-  border-color: #eeeff1;
+}:root,
+.templates,
+.pb {
+
+  /* ── Brand ──────────────────────────────────────────────── */
+  --brand-green: #2EB273;
+  --brand-green-deep: #1A8A56;
+  --brand-green-dark: #146B43;
+  --brand-navy: #001866;
+  --brand-navy-soft: #1B2C6E;
+
+  /* ── Primary scale (green) ──────────────────────────────── */
+  --green-50: #F1FBF6;
+  --green-100: #E2F5EC;
+  --green-200: #C8EBD8;
+  --green-300: #A7DEC2;
+  --green-400: #6DCB9D;
+  --green-500: #2EB273;
+  --green-600: #1A8A56;
+  --green-700: #146B43;
+  --green-800: #0E4D31;
+  --green-900: #073220;
+
+  /* ── Neutrals — warm-tinted, calm ───────────────────────── */
+  --n-0: #FFFFFF;
+  --n-25: #FCFCFD;
+  --n-50: #F7F8F9;
+  --n-75: #F2F3F5;
+  --n-100: #ECEDEF;
+  --n-150: #E1E3E6;
+  --n-200: #D2D5D9;
+  --n-300: #B6BABF;
+  --n-400: #9498A0;
+  --n-450: #767B83;
+  /* AA-capable mid-grey — quaternary text floor (4.5:1 on white) */
+  --n-500: #6D7178;
+  --n-600: #54585F;
+  --n-700: #3D4046;
+  --n-800: #25272C;
+  --n-900: #15171B;
+  --n-950: #0B0C0F;
+
+  /* ── Surfaces ───────────────────────────────────────────── */
+  --surface-canvas: var(--n-25);
+  /* page bg */
+  --surface-raised: var(--n-0);
+  /* cards, top bar, main panels */
+  --surface-sunken: var(--n-50);
+  /* sidebars, toolbars */
+  --surface-muted: var(--n-75);
+  /* inactive inputs, subtle wells */
+  --surface-hover: var(--n-75);
+  --surface-active: var(--n-100);
+  --surface-overlay: rgba(15, 17, 21, 0.32);
+  /* modal/sheet scrim (added 2A) */
+  --surface-overlay-strong: rgba(15, 17, 21, 0.56);
+  /* fullscreen scrim (added 2A) */
+  --surface-inverse: var(--n-900);
+  /* tooltip, snackbar surface (added 2A) */
+  --text-on-inverse: var(--n-0);
+  /* text on inverse surface (added 2A) */
+
+  /* ── Borders ────────────────────────────────────────────── */
+  --border-subtle: var(--n-100);
+  --border-default: var(--n-150);
+  --border-strong: var(--n-200);
+  --border-divider: var(--n-100);
+  /* inline cell dividers (added 2A) */
+  --border-focus: var(--green-500);
+  --border-focus-ai: var(--ai-fg);
+  /* added 2A */
+  --border-focus-danger: var(--danger);
+  /* added 2A */
+
+  /* ── Text ───────────────────────────────────────────────── */
+  --text-primary: var(--n-900);
+  --text-secondary: var(--n-700);
+  --text-tertiary: var(--n-500);
+  --text-quaternary: var(--n-450);
+  /* a11y 4.3 — was n-400 (2.89:1, sub-AA on real text) */
+  --text-disabled: var(--n-300);
+  --text-inverse: var(--n-0);
+  --text-brand: var(--green-700);
+  /* a11y 4.4 — was green-600 (4.36:1, just-misses AA for text) */
+  --text-brand-strong: var(--green-700);
+
+  /* ── Action role — 3-tier brand indirection (primitive → brand → role)
+     Components consume --color-action ONLY; a new product/white-label
+     theme reskins by overriding --brand-action, never by touching a
+     component (gap-audit F1). Fill is green-700 so white text clears AA
+     at 6.53:1 — brand-green #2EB273 (2.72:1) stays for logo/identity. ── */
+  --brand-action: var(--green-700);
+  /* tier 2 — overridable per product/theme */
+  --brand-action-hover: var(--green-800);
+  --brand-action-active: var(--green-900);
+  --color-action: var(--brand-action);
+  /* tier 3 — the role components use */
+  --color-action-hover: var(--brand-action-hover);
+  --color-action-active: var(--brand-action-active);
+  --color-on-action: #FFFFFF;
+  /* text/icon on action fill */
+
+  /* ── Semantic colors ────────────────────────────────────── */
+  --success: #0C8C6A;
+  /* OWN teal-shifted ramp (~+15° off brand green) so brand green never signals routine status (1.1/7.1) */
+  --success-bg: #D8F3EB;
+  --success-bg-strong: #B6E8D8;
+
+  --warning: #B26B0F;
+  --warning-bg: #FEF1DD;
+  --warning-bg-strong: #FCDFB1;
+
+  --danger: #C2363A;
+  --danger-bg: #FBE3E5;
+  --danger-bg-strong: #F5C7CB;
+
+  --info: #2A6FDB;
+  --info-bg: #E6EEF9;
+  --info-bg-strong: #CDDDF3;
+
+  --neutral-bg: var(--n-100);
+  --neutral-fg: var(--n-700);
+
+  /* ── Row selection (brand-tinted, dark-aware) ──────────── */
+  --row-selected-bg: #EAF1FB;
+  /* neutral/info tint — NOT brand green (1.1) */
+  --row-selected-bg-hover: #D9E7F8;
+
+  /* ── Semantic strong-fg (text on *-bg-strong) — added 2A ── */
+  --success-fg-strong: #07543F;
+  /* teal-dark — matches de-branded success ramp */
+  --warning-fg-strong: #5C3604;
+  --danger-fg-strong: #7A1A1F;
+  --info-fg-strong: #133A7E;
+
+  /* ── AI accent (purple) — for AI-suggested fields, agents ── */
+  --ai-fg: #6D45D9;
+  --ai-bg: #EFE9FC;
+  --ai-bg-strong: #DDD0F8;
+  --ai-fg-deep: #5535B8;
+  /* filled-AI button bg (added 2A) */
+  --ai-on-fill: #FFFFFF;
+  /* text on ai-fg-deep (added 2A) */
+
+  /* ── Tag palette (8 hues, low-chroma) ───────────────────── */
+  --tag-slate-bg: #ECEDEF;
+  --tag-slate-fg: #3D4046;
+  --tag-green-bg: #E2F5EC;
+  --tag-green-fg: #1A6B43;
+  --tag-blue-bg: #E6EEF9;
+  --tag-blue-fg: #1F4FA8;
+  --tag-purple-bg: #EFE9FC;
+  --tag-purple-fg: #5535B8;
+  --tag-amber-bg: #FEF1DD;
+  --tag-amber-fg: #8A540B;
+  --tag-rose-bg: #FCE5E8;
+  --tag-rose-fg: #A8232A;
+  --tag-teal-bg: #DDF3F1;
+  --tag-teal-fg: #156B66;
+  --tag-pink-bg: #FBE4F1;
+  --tag-pink-fg: #9D2B6F;
+
+  /* ── Typography ─────────────────────────────────────────── */
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* compact scale — Attio-tight
+     Half-step tokens (3xs, 2_5xs) added during audit to absorb stray sizes
+     (9.5px, 10.5px, 11.5px) that were hardcoded across components. */
+  --text-3xs: 9px;
+  /* @restricted — numeric count-chips ONLY, never words (a11y 1.4); enforced by the font-size disallow-list in .stylelintrc.json. Legit count-chip uses opt in with a stylelint-disable-line comment. */
+  --text-2_5xs: 10px;
+  /* meta, kbd, eyebrows — section heads */
+  --text-2xs: 10px;
+  /* @deprecated — duplicate of --text-2_5xs; migrate to --text-2_5xs (1.2) */
+  --text-xs: 11px;
+  /* table meta, captions, footer text */
+  --text-sm: 12px;
+  /* default body in dense UI, buttons, chips, table cells */
+  --text-md: 13px;
+  /* preferred body, primary buttons */
+  --text-base: 14px;
+  /* page titles in narrow chrome */
+  --text-lg: 15px;
+  /* page title default */
+  --text-xl: 18px;
+  /* h2 */
+  --text-2xl: 22px;
+  /* h1 */
+  --text-3xl: 26px;
+  /* display */
+  --text-4xl: 32px;
+  /* hero */
+  --text-5xl: 44px;
+  /* hero page title */
+
+  --leading-1: 1;
+  /* @kind font */
+  /* single-line dense cells (added 2A) */
+  --leading-tight-1: 1.15;
+  /* @kind font */
+  /* dense headings (added 2A) */
+  --leading-tight: 1.25;
+  /* @kind font */
+  --leading-snug: 1.35;
+  /* @kind font */
+  --leading-normal: 1.5;
+  /* @kind font */
+
+  /* Font weights — explicit tokens so HC theme can shift +100 (added 2A) */
+  --fw-regular: 400;
+  /* @kind font */
+  --fw-medium: 500;
+  /* @kind font */
+  --fw-semibold: 600;
+  /* @kind font */
+  --fw-bold: 700;
+  /* @kind font */
+
+  --tracking-tight: -0.018em;
+  /* @kind font */
+  /* display */
+  --tracking-snug: -0.011em;
+  /* @kind font */
+  /* headings */
+  --tracking-normal: -0.003em;
+  /* @kind font */
+  /* body — Attio is barely-tracked */
+  --tracking-wide: 0.04em;
+  /* @kind font */
+  /* uppercase eyebrows */
+
+  /* ── Spacing — 4px grid ─────────────────────────────────── */
+  --s-0: 0px;
+  --s-1: 2px;
+  --s-2: 4px;
+  --s-3: 6px;
+  --s-4: 8px;
+  --s-5: 10px;
+  --s-6: 12px;
+  --s-7: 14px;
+  /* added 2A — absorbs ~80 stray 14px values across composites */
+  --s-8: 16px;
+  --s-10: 20px;
+  --s-12: 24px;
+  --s-16: 32px;
+  --s-20: 40px;
+  --s-24: 48px;
+  --s-32: 64px;
+
+  /* ── Radius ─────────────────────────────────────────────── */
+  --r-xs: 3px;
+  --r-sm: 4px;
+  --r-md: 6px;
+  /* default — buttons, inputs, chips */
+  --r-lg: 8px;
+  /* cards, popovers */
+  --r-xl: 10px;
+  /* sheets, modals */
+  --r-2xl: 14px;
+  --r-full: 9999px;
+
+  /* ── Shadows — ultra subtle ─────────────────────────────── */
+  --shadow-xs: 0 1px 0 rgba(15, 17, 21, .04);
+  --shadow-sm: 0 1px 2px rgba(15, 17, 21, .04),
+    0 0 0 1px rgba(15, 17, 21, .04);
+  --shadow-md: 0 2px 4px rgba(15, 17, 21, .04),
+    0 1px 2px rgba(15, 17, 21, .04),
+    0 0 0 1px rgba(15, 17, 21, .05);
+  --shadow-lg: 0 12px 32px -8px rgba(15, 17, 21, .14),
+    0 4px 8px -2px rgba(15, 17, 21, .06),
+    0 0 0 1px rgba(15, 17, 21, .04);
+  --shadow-xl: 0 24px 48px -12px rgba(15, 17, 21, .22),
+    0 8px 16px -4px rgba(15, 17, 21, .08),
+    0 0 0 1px rgba(15, 17, 21, .04);
+  --shadow-focus: 0 0 0 3px rgba(46, 178, 115, .18);
+  --shadow-focus-ai: 0 0 0 3px rgba(109, 69, 217, .18);
+  --shadow-focus-danger: 0 0 0 3px rgba(194, 54, 58, .18);
+  /* added 2A */
+  --shadow-inset-divider-b: inset 0 -1px 0 var(--border-subtle);
+  /* added 2A */
+  --shadow-inset-divider-t: inset 0 1px 0 var(--border-subtle);
+  /* added 2A */
+
+  /* ── Motion ─────────────────────────────────────────────── */
+  --ease-out: cubic-bezier(.16, 1, .3, 1);
+  /* @kind other */
+  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
+  /* @kind other */
+  --ease-emphasized: cubic-bezier(.2, 0, 0, 1);
+  /* @kind other */
+  /* modal entry (added 2A) */
+  --ease-decelerate: cubic-bezier(0, 0, .2, 1);
+  /* @kind other */
+  /* sheet entry (added 2A) */
+  --dur-fast: 120ms;
+  /* @kind other */
+  --dur-base: 180ms;
+  /* @kind other */
+  --dur-slow: 260ms;
+  /* @kind other */
+
+  /* ── Component heights — Attio-compact ──────────────────── */
+  --h-xs: 20px;
+  --h-sm: 24px;
+  --h-md: 28px;
+  /* default buttons, inputs */
+  --h-lg: 32px;
+  --row-h: 30px;
+  /* table row */
+  --row-h-c: 28px;
+  /* table row, compact */
+
+  /* ── Layout ─────────────────────────────────────────────── */
+  --sidebar-w: 220px;
+  --sidebar-w-mini: 56px;
+  --topbar-h: 44px;
+  --subbar-h: 40px;
+  --content-pad-x: 20px;
+  --content-pad-y: 16px;
+
+  /* ── Responsive scale standards ─────────────────────────────
+     Five breakpoints (added 2A). Tokens above are *desktop* values.
+     Mobile/tablet overrides live in responsive.css. */
+  --bp-sm: 480px;
+  --bp-md: 768px;
+  --bp-mobile: 640px;
+  /* @deprecated alias — use --bp-md/--bp-sm (1.2) */
+  --bp-tablet: 1024px;
+  /* @deprecated alias — use --bp-lg (1.2) */
+  --bp-lg: 1280px;
+  --bp-xl: 1440px;
+  --bp-2xl: 1920px;
+
+  /* Container-query breakpoints — for composites that need to
+     respond to their container width, not the viewport (added 2A) */
+  --cq-sm: 360px;
+  --cq-md: 600px;
+  --cq-lg: 900px;
+
+  /* Touch-target floor for mobile (WCAG 2.5.5 ≥ 44px) */
+  --touch-min: 44px;
+  /* @kind spacing */
+
+  /* Interactive hit-target floor — decoupled from painted size (T1).
+     Fine pointer 32px; coarse (touch) bumped to --touch-min below. */
+  --hit-min: 32px;
+  /* @kind spacing */
+
+  /* ── Z-index scale (added 2A) — every overlay must use these.
+     Raw values (49, 48, 30, 2, 1) flagged in audit are replaced. */
+  --z-base: 1;
+  /* @kind other */
+  --z-sticky: 20;
+  /* @kind other */
+  --z-dropdown: 30;
+  /* @kind other */
+  --z-drawer: 35;
+  /* @kind other */
+  --z-popover: 40;
+  /* @kind other */
+  --z-tooltip: 45;
+  /* @kind other */
+  --z-modal-scrim: 48;
+  /* @kind other */
+  --z-modal: 50;
+  /* @kind other */
+  --z-toast: 60;
+  /* @kind other */
+  --z-debug: 99;
+  /* @kind other */
+
+  /* Density mode — set by responsive.css per breakpoint.
+     Components consume these instead of hardcoding heights. */
+  --h-control: var(--h-md);
+  /* default control height */
+  --h-control-sm: var(--h-sm);
+  --h-row: var(--row-h);
+  --pad-x: var(--content-pad-x);
+  --pad-y: var(--content-pad-y);
+
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   ERPForce PDF / Document Template Builder
+   Builder chrome + the paginated A4 document (.pbd-*)
+   Light theme · matches Reports app · uses v2 tokens
+   ═══════════════════════════════════════════════════════════════ */
+
+html,
+body {
+  height: 100%;
 }
-.companySelectionModal--DialogTitle {
-  border-bottom: 1px solid #d3d3d4;
+
+body {
+  background: var(--surface-sunken);
+  overflow: hidden;
 }
-.companySelectionModal--SectionTitle {
-  padding-left: 1.5rem;
+
+#root {
+  height: 100%;
 }
-.companySelectionModal--DialogContents {
-  padding: 1.5rem !important;
+
+.pb,
+.pb *,
+.pb *::before,
+.pb *::after {
+  box-sizing: border-box;
 }
-.companySelectionModal--DialogAction {
-  justify-content: flex-end !important;
-  padding: 0.5rem 1.5rem !important;
-  background-color: #eeeff1;
+
+.pb {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  line-height: 1.5;
 }
-.companySelectionModal--DialogAction--WhiteBtn {
-  background-color: #fff !important;
-  color: #1f2125;
-}.templates {
-  padding: 0rem 2rem;
+
+/* ── top bar ────────────────────────────────────────────────── */
+.pb-top {
+  height: 48px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--s-5);
+  padding: 0 var(--s-6);
+  background: var(--surface-raised);
+  border-bottom: 1px solid var(--border-default);
+  z-index: var(--z-sticky);
+}
+
+.pb-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+}
+
+.pb-brand img {
+  height: 18px;
+  width: auto;
+  display: block;
+}
+
+.pb-brand-tag {
+  font-size: var(--text-2_5xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-quaternary);
+  padding: 3px 7px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-sm);
+}
+
+.pb-crumb {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+.pb-crumb svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pb-crumb b {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.pb-doc-input {
+  font: inherit;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  padding: 3px 7px;
+  max-width: 240px;
+  background: transparent;
+}
+
+.pb-doc-input:hover {
+  border-color: var(--border-default);
+}
+
+.pb-doc-input:focus {
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+  background: var(--surface-raised);
+}
+
+.pb-top-sp {
+  flex: 1;
+}
+
+/* generic buttons */
+.pbtn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  height: 30px;
+  padding: 0 var(--s-5);
+  border-radius: var(--r-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-default);
+  background: var(--surface-raised);
+  white-space: nowrap;
+  transition: background var(--dur-fast), border-color var(--dur-fast);
+}
+
+.pbtn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.pbtn:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.pbtn--primary {
+  background: var(--color-action);
+  border-color: transparent;
+  color: var(--color-on-action);
+  box-shadow: var(--shadow-sm);
+}
+
+.pbtn--primary:hover {
+  background: var(--color-action-hover);
+  color: var(--color-on-action);
+}
+
+.pbtn--ai {
+  background: var(--ai-fg-deep);
+  border-color: transparent;
+  color: #fff;
+}
+
+.pbtn--ai:hover {
+  background: var(--ai-fg);
+  color: #fff;
+}
+
+.pbtn--ghost {
+  border-color: transparent;
+  background: transparent;
+}
+
+.pbtn--ghost:hover {
+  background: var(--surface-hover);
+}
+
+.pbtn--sm {
+  height: 26px;
+  padding: 0 var(--s-4);
+  font-size: var(--text-xs);
+}
+
+.pbtn--icon {
+  width: 30px;
+  padding: 0;
+  justify-content: center;
+}
+
+.pbtn.is-on {
+  background: var(--green-50);
+  border-color: var(--green-300);
+  color: var(--text-brand-strong);
+}
+
+.pbtn:disabled {
+  opacity: .45;
+  cursor: not-allowed;
+}
+
+/* segmented */
+.pb-seg {
+  display: inline-flex;
+  background: var(--surface-muted);
+  border-radius: var(--r-md);
+  padding: 2px;
+  gap: 2px;
+}
+
+.pb-seg button {
+  height: 24px;
+  padding: 0 var(--s-4);
+  border-radius: var(--r-sm);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-tertiary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+
+.pb-seg button svg {
+  width: 12px;
+  height: 12px;
+}
+
+.pb-seg button.is-active {
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-xs);
+  font-weight: 600;
+}
+
+.pb-seg button:not(.is-active):hover {
+  color: var(--text-secondary);
+}
+
+/* ── body 3-column workspace ────────────────────────────────── */
+.pb-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+/* left rail */
+.pb-rail {
+  width: 248px;
+  flex-shrink: 0;
+  background: var(--surface-raised);
+  border-right: 1px solid var(--border-default);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.pb-rail--collapsed {
+  width: 0;
+  overflow: hidden;
+  border: 0;
+}
+
+.pb-rail-tabs {
+  display: flex;
+  padding: var(--s-4) var(--s-4) 0;
+  gap: var(--s-2);
+}
+
+.pb-rail-tab {
+  flex: 1;
+  height: 28px;
+  border-radius: var(--r-md);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-2);
+}
+
+.pb-rail-tab svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pb-rail-tab.is-active {
+  background: var(--surface-active);
+  color: var(--text-primary);
+}
+
+.pb-rail-body {
+  flex: 1;
+  overflow: auto;
+  padding: var(--s-4);
+  scrollbar-width: thin;
+}
+
+/* field tree */
+.pb-fnote {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  line-height: 1.5;
+  margin-bottom: var(--s-5);
+  padding: var(--s-4) var(--s-5);
+  background: var(--surface-muted);
+  border-radius: var(--r-md);
+}
+
+.pb-fnote code {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--text-brand-strong);
+  background: var(--green-50);
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+.pb-fgroup {
+  margin-bottom: var(--s-2);
+}
+
+.pb-fgroup-h {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
   width: 100%;
+  height: 30px;
+  padding: 0 var(--s-3);
+  border-radius: var(--r-md);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.pb-fgroup-h:hover {
+  background: var(--surface-hover);
+}
+
+.pb-fgroup-h svg.pb-fchev {
+  width: 13px;
+  height: 13px;
+  color: var(--text-quaternary);
+  transition: transform var(--dur-fast);
+}
+
+.pb-fgroup-h.is-open svg.pb-fchev {
+  transform: rotate(90deg);
+}
+
+.pb-fgroup-ic {
+  width: 22px;
+  height: 22px;
+  border-radius: var(--r-sm);
+  display: grid;
+  place-items: center;
+  background: var(--surface-muted);
+  color: var(--text-tertiary);
+}
+
+.pb-fgroup-ic svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pb-fgroup-c {
+  font-size: var(--text-2xs);
+  color: var(--text-quaternary);
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+}
+
+.pb-fields {
+  display: flex;
+  flex-direction: column;
+  padding: var(--s-1) 0 var(--s-3) 30px;
+  gap: 1px;
+}
+
+.pb-field {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  height: 28px;
+  padding: 0 var(--s-3);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+}
+
+.pb-field:hover {
+  background: var(--green-50);
+}
+
+.pb-field-tag {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  color: var(--text-brand-strong);
+  white-space: nowrap;
+}
+
+.pb-field-lbl {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-left: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pb-field-ins {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  display: grid;
+  place-items: center;
+  color: var(--brand-green);
+  opacity: 0;
+  flex-shrink: 0;
+}
+
+.pb-field:hover .pb-field-ins {
+  opacity: 1;
+}
+
+.pb-field-ins svg {
+  width: 12px;
+  height: 12px;
+}
+
+.pb-field--loop .pb-field-tag {
+  color: var(--ai-fg);
+}
+
+/* template switcher list */
+.pb-tlist {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+
+.pb-titem {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  padding: var(--s-4);
+  border-radius: var(--r-md);
+  border: 1px solid var(--border-subtle);
+  cursor: pointer;
+  text-align: left;
+}
+
+.pb-titem:hover {
+  border-color: var(--border-strong);
+  background: var(--surface-hover);
+}
+
+.pb-titem.is-active {
+  border-color: var(--green-400);
+  background: var(--green-50);
+}
+
+.pb-titem-ic {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--r-md);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.pb-titem-ic svg {
+  width: 15px;
+  height: 15px;
+}
+
+.pb-titem-t {
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.pb-titem-s {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-top: 1px;
+}
+
+/* ── center: editor + preview ───────────────────────────────── */
+.pb-center {
+  flex: 1;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+/* code editor */
+.pb-editor {
+  width: 44%;
+  min-width: 360px;
+  max-width: 620px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  background: #fbfbfc;
+  border-right: 1px solid var(--border-default);
+  min-height: 0;
+}
+
+.pb-editor--hidden {
+  display: none;
+}
+
+.pb-editor-bar {
+  height: 36px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  padding: 0 var(--s-5);
+  border-bottom: 1px solid var(--border-subtle);
+  background: var(--surface-raised);
+}
+
+.pb-editor-bar-t {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+
+.pb-editor-bar-t svg {
+  width: 13px;
+  height: 13px;
+  color: var(--text-tertiary);
+}
+
+.pb-editor-dirty {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--warning);
+}
+
+.pb-editor-wrap {
+  flex: 1;
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+}
+
+.pb-gutter {
+  flex-shrink: 0;
+  padding: 12px 0;
+  text-align: right;
+  background: #f4f5f7;
+  color: var(--text-quaternary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.55;
+  user-select: none;
+  overflow: hidden;
+  border-right: 1px solid var(--border-subtle);
+}
+
+.pb-gutter-inner span {
+  display: block;
+  padding: 0 10px 0 12px;
+}
+
+.pb-code-scroll {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+}
+
+.pb-code-area,
+.pb-code-hl {
+  margin: 0;
+  padding: 12px 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.55;
+  tab-size: 2;
+  white-space: pre;
+  word-wrap: normal;
+  box-sizing: border-box;
+}
+
+.pb-code-hl {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  color: var(--n-800);
+  overflow: visible;
+  will-change: transform;
+}
+
+.pb-code-area {
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--n-900);
+  border: 0;
+  outline: none;
+  resize: none;
+  -webkit-text-fill-color: transparent;
+  scrollbar-width: thin;
+}
+
+.pb-code-area::selection {
+  background: rgba(46, 178, 115, .24);
+  -webkit-text-fill-color: transparent;
+}
+
+/* token colors */
+.tk-mus {
+  color: var(--ai-fg);
+}
+
+.tk-blk {
+  color: #1f7a4d;
+  font-weight: 600;
+}
+
+.tk-tag {
+  color: #2a6fdb;
+}
+
+.tk-attr {
+  color: #8a540b;
+}
+
+.tk-str {
+  color: #1a8a56;
+}
+
+.tk-com {
+  color: var(--text-quaternary);
+  font-style: italic;
+}
+
+/* preview surface */
+.pb-preview {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  background: #4b4f54;
+  min-height: 0;
+}
+
+.pb-preview-bar {
+  height: 36px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  padding: 0 var(--s-5);
+  background: var(--surface-raised);
+  border-bottom: 1px solid var(--border-default);
+}
+
+.pb-preview-bar-t {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+.pb-preview-pages {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.pb-zoom {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+
+.pb-zoom-val {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  min-width: 38px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.pb-zbtn {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--r-sm);
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+}
+
+.pb-zbtn:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.pb-preview-scroll {
+  flex: 1;
+  overflow: auto;
+  padding: 28px;
+  scrollbar-width: thin;
+}
+
+.pb-pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
+  transform-origin: top center;
+}
+
+/* selection halo on a doc block */
+.pb-sel-outline {
+  outline: 2px solid var(--ai-fg);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.pbd [data-block] {
+  cursor: default;
+}
+
+.pb-pick .pbd [data-block] {
+  cursor: pointer;
+}
+
+.pb-pick .pbd [data-block]:hover {
+  outline: 1.5px dashed var(--info);
+  outline-offset: 2px;
+}
+
+/* ── AI panel (right dock) ──────────────────────────────────── */
+.pb-ai {
+  width: 340px;
+  flex-shrink: 0;
+  background: var(--surface-raised);
+  border-left: 1px solid var(--border-default);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.pb-ai--collapsed {
+  width: 0;
+  overflow: hidden;
+  border: 0;
+}
+
+.pb-ai-head {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  padding: var(--s-5) var(--s-5) var(--s-4);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.pb-ai-spark {
+  width: 26px;
+  height: 26px;
+  border-radius: var(--r-md);
+  background: var(--ai-fg);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  box-shadow: 0 1px 2px rgba(85, 53, 184, .3);
+}
+
+.pb-ai-spark svg {
+  width: 15px;
+  height: 15px;
+}
+
+.pb-ai-head-t {
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.pb-ai-head-s {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-top: 1px;
+}
+
+.pb-ai-scroll {
+  flex: 1;
+  overflow: auto;
+  padding: var(--s-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-5);
+  scrollbar-width: thin;
+}
+
+.pb-msg {
+  display: flex;
+  gap: var(--s-4);
+  font-size: var(--text-sm);
+  line-height: 1.5;
+}
+
+.pb-msg-av {
+  width: 22px;
+  height: 22px;
+  border-radius: var(--r-sm);
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+}
+
+.pb-msg-av svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pb-msg--ai .pb-msg-av {
+  background: var(--ai-bg);
+  color: var(--ai-fg);
+}
+
+.pb-msg--user .pb-msg-av {
+  background: var(--surface-active);
+  color: var(--text-secondary);
+}
+
+.pb-msg-body {
+  flex: 1;
+  min-width: 0;
+  padding-top: 2px;
+  color: var(--text-secondary);
+}
+
+.pb-msg-body b {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.pb-msg-body code {
+  font-family: var(--font-mono);
+  font-size: 10.5px;
+  background: var(--surface-muted);
+  padding: 1px 4px;
+  border-radius: 3px;
+  color: var(--text-brand-strong);
+}
+
+.pb-msg--user .pb-msg-body {
+  color: var(--text-primary);
+}
+
+.pb-msg-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-top: var(--s-3);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--ai-fg);
+  background: var(--ai-bg);
+  border-radius: var(--r-sm);
+  padding: 3px 7px;
+}
+
+.pb-msg-tag svg {
+  width: 11px;
+  height: 11px;
+}
+
+.pb-msg-undo {
+  margin-top: var(--s-3);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.pb-msg-undo:hover {
+  color: var(--text-primary);
+}
+
+.pb-ai-typing {
+  display: flex;
+  gap: 4px;
+  padding: 4px 0;
+}
+
+.pb-ai-typing i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--ai-fg);
+  opacity: .4;
+  animation: pb-blink 1.2s infinite;
+}
+
+.pb-ai-typing i:nth-child(2) {
+  animation-delay: .2s;
+}
+
+.pb-ai-typing i:nth-child(3) {
+  animation-delay: .4s;
+}
+
+@keyframes pb-blink {
+
+  0%,
+  60%,
+  100% {
+    opacity: .25;
+  }
+
+  30% {
+    opacity: 1;
+  }
+}
+
+.pb-ai-foot {
+  flex-shrink: 0;
+  border-top: 1px solid var(--border-subtle);
+  padding: var(--s-4);
+}
+
+/* AI scope selector — pick which part of the document to improve */
+.pb-scope {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-3);
+  margin-bottom: var(--s-4);
+}
+
+.pb-scope-lbl {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-tertiary);
+}
+
+.pb-scope-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  height: 28px;
+  padding: 0 var(--s-3);
+  border-radius: var(--r-md);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+}
+
+.pb-scope-btn:hover {
+  border-color: var(--ai-bg-strong);
+}
+
+.pb-scope-btn>svg {
+  width: 13px;
+  height: 13px;
+  color: var(--ai-fg);
+}
+
+.pb-scope-btn>svg:last-child {
+  width: 12px;
+  height: 12px;
+  color: var(--text-quaternary);
+  margin-left: -1px;
+}
+
+.pb-scope-btn.is-scoped {
+  color: var(--ai-fg-deep);
+  background: var(--ai-bg);
+  border-color: var(--ai-bg-strong);
+}
+
+.pb-scope-menu {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
+  z-index: 40;
+  width: 248px;
+  max-height: 320px;
+  overflow-y: auto;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-xl);
+  padding: var(--s-2);
+  scrollbar-width: thin;
+}
+
+.pb-scope-menu button {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  width: 100%;
+  padding: var(--s-3);
+  border-radius: var(--r-sm);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  text-align: left;
+}
+
+.pb-scope-menu button:hover {
+  background: var(--ai-bg);
+  color: var(--ai-fg-deep);
+}
+
+.pb-scope-menu button.is-current {
+  color: var(--ai-fg-deep);
+  font-weight: 600;
+}
+
+.pb-scope-menu button svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  color: var(--ai-fg);
+}
+
+.pb-scope-menu button span {
+  flex: 1;
+}
+
+.pb-scope-menu button .pb-scope-chk,
+.pb-scope-menu button svg:last-child:not(:first-child) {
+  color: var(--brand-green);
+}
+
+.pb-scope-sep {
+  font-size: var(--text-2_5xs);
+  font-weight: 700;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--text-quaternary);
+  padding: var(--s-3) var(--s-3) var(--s-1);
+}
+
+.pb-scope-hint {
+  font-size: var(--text-2_5xs);
+  color: var(--ai-fg);
+  background: var(--ai-bg);
+  border-radius: var(--r-full);
+  padding: 3px 9px;
+}
+
+.pb-msg-scope {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-2_5xs);
+  font-weight: 700;
+  color: var(--ai-fg-deep);
+  background: var(--ai-bg);
+  border-radius: var(--r-sm);
+  padding: 2px 6px;
+  margin-bottom: 4px;
+  vertical-align: middle;
+}
+
+.pb-msg-scope svg {
+  color: var(--ai-fg);
+}
+
+.pb-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-2);
+  margin-bottom: var(--s-4);
+}
+
+.pb-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 26px;
+  padding: 0 var(--s-4);
+  border-radius: var(--r-full);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-default);
+  background: var(--surface-raised);
+}
+
+.pb-chip svg {
+  width: 12px;
+  height: 12px;
+  color: var(--ai-fg);
+}
+
+.pb-chip:hover {
+  background: var(--ai-bg);
+  border-color: var(--ai-bg-strong);
+  color: var(--ai-fg-deep);
+}
+
+.pb-ai-input {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--s-3);
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-lg);
+  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
+  background: var(--surface-raised);
+}
+
+.pb-ai-input:focus-within {
+  border-color: var(--border-focus-ai);
+  box-shadow: var(--shadow-focus-ai);
+}
+
+.pb-ai-input textarea {
+  flex: 1;
+  border: 0;
+  outline: none;
+  resize: none;
+  font-size: var(--text-sm);
+  line-height: 1.45;
+  max-height: 96px;
+  background: transparent;
+}
+
+.pb-ai-send {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--r-md);
+  background: var(--ai-fg-deep);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.pb-ai-send svg {
+  width: 14px;
+  height: 14px;
+}
+
+.pb-ai-send:disabled {
+  background: var(--surface-active);
+  color: var(--text-quaternary);
+}
+
+/* inline suggestion card (selected element) */
+.pb-inline {
+  border: 1px solid var(--ai-bg-strong);
+  border-radius: var(--r-md);
+  background: color-mix(in oklch, var(--ai-bg) 45%, var(--surface-raised));
+  padding: var(--s-4);
+}
+
+.pb-inline-h {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--ai-fg-deep);
+  margin-bottom: var(--s-3);
+}
+
+.pb-inline-h svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pb-inline-acts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+}
+
+.pb-inline-act {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  height: 28px;
+  padding: 0 var(--s-4);
+  border-radius: var(--r-sm);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-subtle);
+  text-align: left;
+}
+
+.pb-inline-act svg {
+  width: 13px;
+  height: 13px;
+  color: var(--ai-fg);
+}
+
+.pb-inline-act:hover {
+  border-color: var(--ai-bg-strong);
+  color: var(--text-primary);
+}
+
+/* toast */
+.pb-toast {
+  position: fixed;
+  bottom: 22px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--z-toast);
+  background: var(--surface-inverse);
+  color: var(--text-on-inverse);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  padding: var(--s-4) var(--s-6);
+  border-radius: var(--r-md);
+  box-shadow: var(--shadow-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  animation: pb-toast-in var(--dur-base) var(--ease-out);
+}
+
+.pb-toast svg {
+  width: 14px;
+  height: 14px;
+  color: var(--green-400);
+}
+
+@keyframes pb-toast-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 8px);
+  }
+}
+
+/* ═══════════════ GALLERY (landing) ═══════════════════════════ */
+.pb-gallery {
+  flex: 1;
+  overflow: auto;
+  background: var(--surface-canvas);
+}
+
+.pb-gal-inner {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 40px 32px 64px;
+}
+
+.pb-gal-eye {
+  font-size: var(--text-2_5xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-brand);
+}
+
+.pb-gal-h {
+  font-size: var(--text-3xl);
+  font-weight: 700;
+  letter-spacing: var(--tracking-tight);
+  margin-top: var(--s-3);
+}
+
+.pb-gal-sub {
+  font-size: var(--text-base);
+  color: var(--text-tertiary);
+  margin-top: var(--s-3);
+  max-width: 620px;
+  line-height: 1.5;
+}
+
+.pb-gal-ai {
+  display: flex;
+  align-items: center;
+  gap: var(--s-6);
+  margin-top: var(--s-12);
+  padding: var(--s-8);
+  border: 1px solid var(--ai-bg-strong);
+  border-radius: var(--r-xl);
+  background: linear-gradient(180deg, color-mix(in oklch, var(--ai-bg) 50%, var(--surface-raised)), var(--surface-raised) 80px);
+}
+
+.pb-gal-ai-spark {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--r-lg);
+  background: var(--ai-fg);
+  color: #fff;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  box-shadow: 0 2px 6px rgba(85, 53, 184, .3);
+}
+
+.pb-gal-ai-spark svg {
+  width: 22px;
+  height: 22px;
+}
+
+.pb-gal-ai-field {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-lg);
+  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5);
+}
+
+.pb-gal-ai-field:focus-within {
+  border-color: var(--border-focus-ai);
+  box-shadow: var(--shadow-focus-ai);
+}
+
+.pb-gal-ai-field input {
+  flex: 1;
+  border: 0;
+  outline: none;
+  font-size: var(--text-md);
+  background: transparent;
+}
+
+.pb-gal-sec {
+  margin-top: var(--s-16);
+}
+
+.pb-gal-sec-h {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin-bottom: var(--s-6);
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+
+.pb-gal-sec-h .pb-fgroup-c {
+  margin-left: 0;
+}
+
+.pb-gal-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
+  gap: var(--s-6);
+}
+
+.pb-card {
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-lg);
+  background: var(--surface-raised);
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+  transition: box-shadow var(--dur-base), border-color var(--dur-base), transform var(--dur-base);
+}
+
+.pb-card-primary {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-2_5xs);
+  font-weight: 800;
+  letter-spacing: .05em;
+  text-transform: uppercase;
+  color: var(--color-on-action);
+  background: var(--color-action);
+  border-radius: var(--r-full);
+  padding: 3px 9px 3px 7px;
+  box-shadow: var(--shadow-sm);
+}
+
+.pb-card-primary svg {
+  width: 11px;
+  height: 11px;
+}
+
+/* template-variant picker (toolbar) */
+.pb-varpick {
+  position: relative;
+}
+
+.pb-varpick .pb-stnpick-menu {
+  right: auto;
+  left: 0;
+  width: 332px;
+}
+
+.pb-varpick-dot {
+  width: 11px;
+  height: 11px;
+  border-radius: var(--r-full);
+  flex-shrink: 0;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
+}
+
+.pb-varpick-star {
+  display: inline-grid;
+  place-items: center;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: var(--color-action);
+  color: var(--color-on-action);
+  flex-shrink: 0;
+}
+
+.pb-varpick-star svg {
+  width: 10px;
+  height: 10px;
+}
+
+.pb-varpick-tag {
+  margin-left: auto;
+  font-size: var(--text-2_5xs);
+  font-weight: 800;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--brand-green);
+  background: var(--green-50, rgba(46, 178, 115, .1));
+  border: 1px solid var(--green-100, rgba(46, 178, 115, .25));
+  border-radius: var(--r-full);
+  padding: 2px 7px;
+}
+
+.pb-varpick-menu .pb-stnpick-foot button:disabled {
+  opacity: .6;
+  cursor: default;
+}
+
+.pb-card:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.pb-card-thumb {
+  height: 156px;
+  background: var(--surface-sunken);
+  border-bottom: 1px solid var(--border-subtle);
+  position: relative;
+  overflow: hidden;
+  display: grid;
+  place-items: center;
+}
+
+.pb-card-mini {
+  width: 116px;
+  background: #fff;
+  box-shadow: var(--shadow-md);
+  transform: scale(1);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.pb-card-meta {
+  padding: var(--s-5);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-4);
+}
+
+.pb-card-ic {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--r-md);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.pb-card-ic svg {
+  width: 15px;
+  height: 15px;
+}
+
+.pb-card-t {
+  font-size: var(--text-sm);
+  font-weight: 600;
+}
+
+.pb-card-s {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  margin-top: 2px;
+  line-height: 1.4;
+}
+
+/* accent helpers */
+.acc-green {
+  background: var(--green-100);
+  color: var(--green-700);
+}
+
+.acc-blue {
+  background: var(--info-bg);
+  color: var(--info);
+}
+
+.acc-purple {
+  background: var(--ai-bg);
+  color: var(--ai-fg);
+}
+
+.acc-amber {
+  background: var(--warning-bg);
+  color: var(--warning);
+}
+
+.acc-teal {
+  background: var(--tag-teal-bg);
+  color: var(--tag-teal-fg);
+}
+
+.acc-rose {
+  background: var(--tag-rose-bg);
+  color: var(--tag-rose-fg);
+}
+
+.acc-slate {
+  background: var(--tag-slate-bg);
+  color: var(--tag-slate-fg);
+}
+
+.acc-navy {
+  background: #E3E8F7;
+  color: var(--brand-navy);
+}
+
+/* ═══════════════ PREVIEW-FIRST BUILDER ═══════════════════════ */
+/* slim option bar (à la print preview) */
+.pb-bar {
+  height: 50px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--s-5);
+  padding: 0 var(--s-6);
+  background: var(--surface-raised);
+  border-bottom: 1px solid var(--border-default);
+  z-index: var(--z-sticky);
+}
+
+.pb-bar-title {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  min-width: 0;
+}
+
+.pb-bar-back {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  height: 30px;
+  padding: 0 var(--s-4) 0 var(--s-3);
+  border-radius: var(--r-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.pb-bar-back:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.pb-bar-back svg {
+  width: 15px;
+  height: 15px;
+}
+
+.pb-bar-doc {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+
+.pb-bar-doc-ic {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--r-sm);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.pb-bar-doc-ic svg {
+  width: 14px;
+  height: 14px;
+}
+
+.pb-bar-name {
+  font: inherit;
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  border: 1px solid transparent;
+  border-radius: var(--r-sm);
+  padding: 3px 7px;
+  max-width: 220px;
+  background: transparent;
+}
+
+.pb-bar-name:hover {
+  border-color: var(--border-default);
+}
+
+.pb-bar-name:focus {
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+.pb-bar-sp {
+  flex: 1;
+}
+
+.pb-bar-grp {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+
+.pb-bar-grp+.pb-bar-grp {
+  padding-inline-start: var(--s-5);
+  border-inline-start: 1px solid var(--border-subtle);
+}
+
+.pb-bar-lbl {
+  font-size: var(--text-2_5xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-quaternary);
+}
+
+.pb-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.pb-toggle input {
+  accent-color: var(--brand-green);
+  width: 14px;
+  height: 14px;
+}
+
+/* dark stage + preview */
+.pb-stage {
+  flex: 1;
+  position: relative;
+  min-height: 0;
+  display: flex;
+  background: #4b4f54;
+  overflow: hidden;
+}
+
+.pb-stage-scroll {
+  flex: 1;
+  overflow: auto;
+  padding: 30px 24px 80px;
+  scrollbar-width: thin;
+}
+
+.pb-stage .pb-pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 22px;
+  transform-origin: top center;
+}
+
+/* floating zoom pill */
+.pb-zoomfloat {
+  position: absolute;
+  bottom: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--z-popover);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  background: rgba(20, 23, 27, .82);
+  backdrop-filter: blur(6px);
+  border-radius: var(--r-full);
+  padding: 5px 8px;
+  box-shadow: var(--shadow-lg);
+}
+
+.pb-zoomfloat button {
+  width: 26px;
+  height: 26px;
+  border-radius: var(--r-full);
+  display: grid;
+  place-items: center;
+  color: #d4d6d9;
+}
+
+.pb-zoomfloat button.pb-zf-text-btn {
+  width: auto;
+  padding: 0 10px;
+  gap: 4px;
+  display: flex;
+  font-size: var(--text-xs);
+  font-weight: 500;
+}
+
+.pb-zoomfloat button:hover {
+  background: rgba(255, 255, 255, .12);
+  color: #fff;
+}
+
+.pb-zoomfloat .pb-zoom-val {
+  color: #fff;
+  font-size: var(--text-xs);
+  min-width: 40px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.pb-zoomfloat .pb-zoom-pages {
+  color: #9da1a6;
+  font-size: var(--text-xs);
+  padding-left: var(--s-3);
+  margin-left: var(--s-2);
+  border-left: 1px solid rgba(255, 255, 255, .16);
+}
+
+/* slide-in customize drawer */
+.pb-drawer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 408px;
+  background: var(--surface-raised);
+  border-left: 1px solid var(--border-default);
+  box-shadow: -12px 0 32px -16px rgba(0, 0, 0, .4);
+  display: flex;
+  flex-direction: column;
+  transform: translateX(0);
+  transition: transform var(--dur-slow) var(--ease-out), width var(--dur-base);
+  z-index: var(--z-drawer);
+  min-height: 0;
+}
+
+.pb-drawer--wide {
+  width: 660px;
+}
+
+.pb-drawer--closed {
+  transform: translateX(101%);
+  box-shadow: none;
+}
+
+.pb-drawer-tabs {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-4) var(--s-4) 0;
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.pb-dtab {
+  height: 32px;
+  padding: 0 var(--s-5);
+  border-radius: var(--r-md) var(--r-md) 0 0;
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-tertiary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.pb-dtab svg {
+  width: 14px;
+  height: 14px;
+}
+
+.pb-dtab.is-active {
+  color: var(--text-primary);
+  font-weight: 600;
+  border-bottom-color: var(--brand-green);
+}
+
+.pb-dtab:not(.is-active):hover {
+  color: var(--text-secondary);
+}
+
+.pb-drawer-close {
+  margin-left: auto;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--r-md);
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+  margin-bottom: 2px;
+}
+
+.pb-drawer-close:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.pb-drawer-close svg {
+  width: 15px;
+  height: 15px;
+}
+
+.pb-drawer-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+/* brand / header-footer form */
+.pb-form {
+  flex: 1;
+  overflow: auto;
+  padding: var(--s-6);
+  scrollbar-width: thin;
+}
+
+.pb-form-note {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  line-height: 1.5;
+  margin-bottom: var(--s-6);
+  padding: var(--s-4) var(--s-5);
+  background: var(--ai-bg);
+  border-radius: var(--r-md);
+  color: var(--ai-fg-deep);
+  display: flex;
+  gap: var(--s-3);
+}
+
+.pb-form-note svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.pb-form-sec {
+  font-size: var(--text-2_5xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-quaternary);
+  margin: var(--s-6) 0 var(--s-4);
+}
+
+.pb-fld {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  margin-bottom: var(--s-5);
+}
+
+.pb-fld label {
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.pb-fld input,
+.pb-fld textarea {
+  height: 32px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-md);
+  padding: 0 var(--s-4);
+  font-size: var(--text-sm);
+  background: var(--surface-raised);
+  color: var(--text-primary);
+}
+
+.pb-fld textarea {
+  height: auto;
+  padding: var(--s-3) var(--s-4);
+  resize: vertical;
+  min-height: 52px;
+  line-height: 1.45;
+}
+
+.pb-fld input:focus,
+.pb-fld textarea:focus {
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+.pb-fld-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--s-4);
+}
+
+.pb-fld-tag {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ai-fg-deep);
+}
+
+/* swatches */
+.pb-swatches {
+  display: flex;
+  gap: var(--s-3);
+  flex-wrap: wrap;
+}
+
+.pb-swatch {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--r-md);
+  border: 2px solid transparent;
+  cursor: pointer;
+  position: relative;
+}
+
+.pb-swatch.is-sel {
+  border-color: var(--text-primary);
+  box-shadow: 0 0 0 2px var(--surface-raised) inset;
+}
+
+/* HTML tab layout inside drawer */
+.pb-htmltab {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+}
+
+.pb-htmltab .pb-rail {
+  width: 220px;
+}
+
+.pb-htmltab .pb-editor {
+  width: auto;
+  flex: 1;
+  min-width: 0;
+  max-width: none;
+  border-right: 0;
+}
+
+.pb-ai-dock {
+  flex: 1;
+  min-height: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   v3 — classic ERP designer shell (left rail · canvas · dock)
+   ═══════════════════════════════════════════════════════════════ */
+.pb-bar-div {
+  width: 1px;
+  height: 20px;
+  background: var(--border-default);
+}
+
+.pb-bar-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  padding: 3px 9px;
+  border-radius: var(--r-full);
+  margin-left: var(--s-2);
+  white-space: nowrap;
+}
+
+.pb-bar-stat svg {
+  width: 12px;
+  height: 12px;
+}
+
+.pb-bar-stat.is-saved {
+  color: var(--text-tertiary);
+}
+
+.pb-bar-stat.is-dirty {
+  color: var(--warning-fg-strong);
+  background: var(--warning-bg);
+}
+
+.pb-bar-dirty {
+  color: var(--warning);
+  display: grid;
+  place-items: center;
+}
+
+.pb-bar-dirty svg {
+  width: 12px;
+  height: 12px;
+}
+
+.pb-srv {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-brand-strong);
+  background: var(--green-50);
+  border: 1px solid var(--green-200);
+  border-radius: var(--r-full);
+  padding: 3px 9px;
+  margin-right: var(--s-2);
+}
+
+.pb-srv svg {
+  width: 12px;
+  height: 12px;
+}
+
+.pb-work {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+/* left rail */
+.pb-side {
+  width: 312px;
+  flex-shrink: 0;
+  background: var(--surface-raised);
+  border-right: 1px solid var(--border-default);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.pb-side-head {
+  flex-shrink: 0;
+  padding: var(--s-5) var(--s-6) var(--s-4);
+  border-bottom: 1px solid var(--border-subtle);
+  display: flex;
+  align-items: baseline;
+  gap: var(--s-3);
+}
+
+.pb-side-h-t {
+  font-size: var(--text-2_5xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  color: var(--text-quaternary);
+}
+
+.pb-side-h-s {
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--text-primary);
+  margin-left: auto;
+}
+
+.pb-side-collapse {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--r-sm);
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+  margin-left: var(--s-3);
+  flex-shrink: 0;
+}
+
+.pb-side-collapse:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.pb-side-collapse svg {
+  width: 15px;
+  height: 15px;
+}
+
+.pb-side-scroll {
+  flex: 1;
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+/* control sections */
+.cx-sec {
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.cx-sec-h {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  width: 100%;
+  height: 42px;
+  padding: 0 var(--s-6);
+  text-align: left;
+}
+
+.cx-sec-h:hover {
+  background: var(--surface-hover);
+}
+
+.cx-sec-ic {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--r-sm);
+  display: grid;
+  place-items: center;
+  background: var(--surface-muted);
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.cx-sec-ic svg {
+  width: 14px;
+  height: 14px;
+}
+
+.cx-sec-t {
+  font-size: var(--text-md);
+  font-weight: 600;
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.cx-sec-chev {
+  width: 15px;
+  height: 15px;
+  color: var(--text-quaternary);
+  transition: transform var(--dur-fast);
+}
+
+.cx-sec.is-open .cx-sec-chev {
+  transform: rotate(180deg);
+}
+
+.cx-sec-body {
+  padding: var(--s-3) var(--s-6) var(--s-6);
+}
+
+.cx-hint {
+  font-size: var(--text-xs);
+  color: var(--text-tertiary);
+  line-height: 1.5;
+  margin-bottom: var(--s-4);
+  padding: var(--s-3) var(--s-4);
+  background: var(--surface-muted);
+  border-radius: var(--r-sm);
+}
+
+.cx-divline {
+  height: 1px;
+  background: var(--border-subtle);
+  margin: var(--s-5) 0;
+}
+
+.cx-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  min-height: 34px;
+  padding: var(--s-2) 0;
+}
+
+.cx-row-l {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  flex-shrink: 0;
+}
+
+.cx-row-lbl {
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+}
+
+.cx-row-sub {
+  font-size: var(--text-2_5xs);
+  color: var(--text-quaternary);
+}
+
+.cx-row-c {
+  margin-left: auto;
+  display: flex;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.cx-row:has(.cx-seg.is-full),
+.cx-row:has(.cx-area),
+.cx-row:has(.cx-range) {
+  align-items: flex-start;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+
+.cx-row:has(.cx-seg.is-full) .cx-row-c,
+.cx-row:has(.cx-area) .cx-row-c,
+.cx-row:has(.cx-range) .cx-row-c {
+  margin-left: 0;
+  width: 100%;
+  justify-content: stretch;
+}
+
+/* toggle switch */
+.cx-switch {
+  width: 34px;
+  height: 20px;
+  border-radius: var(--r-full);
+  background: var(--n-200);
+  position: relative;
+  transition: background var(--dur-base);
+  flex-shrink: 0;
+}
+
+.cx-switch.is-on {
+  background: var(--brand-green);
+}
+
+.cx-switch-dot {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--dur-base) var(--ease-out);
+}
+
+.cx-switch.is-on .cx-switch-dot {
+  transform: translateX(14px);
+}
+
+/* segmented */
+.cx-seg {
+  display: inline-flex;
+  background: var(--surface-muted);
+  border-radius: var(--r-md);
+  padding: 2px;
+  gap: 2px;
+}
+
+.cx-seg.is-full {
+  display: flex;
+  width: 100%;
+}
+
+.cx-seg button {
+  height: 26px;
+  padding: 0 var(--s-4);
+  border-radius: var(--r-sm);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-tertiary);
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-2);
+}
+
+.cx-seg.is-full button {
+  flex: 1;
+}
+
+.cx-seg button svg {
+  width: 13px;
+  height: 13px;
+}
+
+.cx-seg button.is-active {
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-xs);
+  font-weight: 600;
+}
+
+.cx-seg button:not(.is-active):hover {
+  color: var(--text-secondary);
+}
+
+/* select */
+.cx-select {
+  height: 30px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-md);
+  padding: 0 var(--s-4);
+  font-size: var(--text-sm);
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  min-width: 150px;
+  cursor: pointer;
+}
+
+.cx-select:focus {
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+/* range */
+.cx-range {
+  display: flex;
+  align-items: center;
+  gap: var(--s-4);
+  width: 100%;
+}
+
+.cx-range input[type=range] {
+  flex: 1;
+  accent-color: var(--brand-green);
+  height: 4px;
+}
+
+.cx-range-v {
+  font-size: var(--text-xs);
+  color: var(--text-secondary);
+  font-variant-numeric: tabular-nums;
+  min-width: 40px;
+  text-align: right;
+}
+
+/* text inputs */
+.cx-input {
+  height: 30px;
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-md);
+  padding: 0 var(--s-4);
+  font-size: var(--text-sm);
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  width: 100%;
+  min-width: 0;
+}
+
+.cx-input:focus {
+  border-color: var(--border-focus);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+.cx-area {
+  height: auto;
+  min-height: 54px;
+  padding: var(--s-3) var(--s-4);
+  resize: vertical;
+  line-height: 1.45;
+}
+
+/* swatches */
+.cx-swatches {
+  display: flex;
+  gap: var(--s-3);
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.cx-swatch {
+  width: 26px;
+  height: 26px;
+  border-radius: var(--r-md);
+  border: 2px solid transparent;
+  cursor: pointer;
+}
+
+.cx-swatch.is-sel {
+  border-color: var(--text-primary);
+  box-shadow: 0 0 0 2px var(--surface-raised) inset;
+}
+
+/* line-items editor */
+.cx-items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+}
+
+.cx-item {
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-md);
+  padding: var(--s-4);
+  background: var(--surface-canvas);
+}
+
+.cx-item-top {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+}
+
+.cx-item-n {
+  width: 18px;
+  height: 18px;
+  border-radius: var(--r-xs);
+  background: var(--surface-active);
+  color: var(--text-tertiary);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+}
+
+.cx-item-name {
+  flex: 1;
+}
+
+.cx-item-move {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.cx-item-move button {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--r-sm);
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+}
+
+.cx-item-move button:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.cx-item-move button:disabled {
+  opacity: .3;
+  cursor: not-allowed;
+}
+
+.cx-item-move button svg {
+  width: 13px;
+  height: 13px;
+}
+
+.cx-item-del:hover {
+  background: var(--danger-bg) !important;
+  color: var(--danger) !important;
+}
+
+.cx-item-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--s-3);
+  margin-top: var(--s-3);
+}
+
+.cx-item-grid--2 {
+  grid-template-columns: 1fr 1fr;
+}
+
+.cx-item-grid label {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cx-item-grid label span {
+  font-size: var(--text-2_5xs);
+  color: var(--text-quaternary);
+  font-weight: 600;
+  letter-spacing: .02em;
+}
+
+.cx-item-grid .cx-input {
+  height: 28px;
+  padding: 0 var(--s-3);
+}
+
+.cx-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-2);
+  height: 32px;
+  border: 1px dashed var(--border-strong);
+  border-radius: var(--r-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.cx-add:hover {
+  border-color: var(--brand-green);
+  color: var(--text-brand-strong);
+  background: var(--green-50);
+}
+
+.cx-add svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* table-column / document-field editors */
+.cx-cols {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+
+.cx-col {
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-md);
+  padding: var(--s-3) var(--s-4);
+  background: var(--surface-canvas);
+}
+
+.cx-col-top {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+}
+
+.cx-grip {
+  color: var(--text-disabled);
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  cursor: grab;
+}
+
+.cx-grip svg {
+  width: 14px;
+  height: 14px;
+}
+
+.cx-col-lbl {
+  flex: 1;
+  height: 28px;
+}
+
+.cx-col-bind {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  margin-top: var(--s-3);
+}
+
+.cx-col-bind .cx-select {
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+}
+
+.cx-col-bind .cx-seg {
+  flex-shrink: 0;
+}
+
+.cx-col-bind .cx-seg button {
+  width: 26px;
+  padding: 0;
+}
+
+.cx-ph-tag {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--ai-fg-deep);
+  background: var(--ai-bg);
+  border-radius: var(--r-sm);
+  padding: 3px 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 130px;
+}
+
+/* lens bar above the canvas */
+.pb-lensbar {
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--z-popover);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-3);
+  width: max-content;
+  max-width: min(calc(100% - 24px), 640px);
+}
+
+.pb-lens {
+  display: inline-flex;
+  background: rgba(20, 23, 27, .82);
+  backdrop-filter: blur(6px);
+  border-radius: var(--r-full);
+  padding: 3px;
+  box-shadow: var(--shadow-lg);
+  flex-shrink: 0;
+}
+
+.pb-lens button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  height: 28px;
+  padding: 0 var(--s-5);
+  border-radius: var(--r-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: #c4c7cb;
+  white-space: nowrap;
+}
+
+.pb-lens button svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pb-lens button.is-active {
+  background: #fff;
+  color: var(--n-900);
+}
+
+.pb-edithint-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-size: var(--text-xs);
+  color: #d4d6d9;
+  background: rgba(20, 23, 27, .7);
+  backdrop-filter: blur(6px);
+  padding: 5px 10px;
+  border-radius: var(--r-full);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.pb-edithint-inline svg {
+  width: 12px;
+  height: 12px;
+  color: var(--green-400);
+  flex-shrink: 0;
+}
+
+.pb-edithint-inline--ph svg {
+  color: var(--ai-bg-strong);
+}
+
+/* field picker dropdown (Edit lens) */
+.pb-fp {
+  position: fixed;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-lg);
+  box-shadow: var(--shadow-xl);
+}
+
+.pb-fp-head {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-4);
+  border-bottom: 1px solid var(--border-subtle);
+}
+
+.pb-fp-head svg {
+  width: 14px;
+  height: 14px;
+  color: var(--text-tertiary);
+  flex-shrink: 0;
+}
+
+.pb-fp-head input {
+  flex: 1;
+  min-width: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+}
+
+.pb-fp-list {
+  overflow-y: auto;
+  padding: var(--s-2);
+  scrollbar-width: thin;
+}
+
+.pb-fp-grp+.pb-fp-grp {
+  margin-top: var(--s-2);
+}
+
+.pb-fp-grp-h {
+  font-size: var(--text-2_5xs);
+  font-weight: 700;
+  letter-spacing: .04em;
+  text-transform: uppercase;
+  color: var(--text-quaternary);
+  padding: var(--s-2) var(--s-3) var(--s-1);
+}
+
+.pb-fp-item {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  width: 100%;
+  padding: var(--s-3);
+  border-radius: var(--r-sm);
+  font-size: var(--text-sm);
+  color: var(--text-secondary);
+  text-align: left;
+}
+
+.pb-fp-item:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.pb-fp-item.is-current {
+  color: var(--text-brand-strong);
+  font-weight: 600;
+}
+
+.pb-fp-item-l {
+  flex: 1;
+}
+
+.pb-fp-item svg {
+  width: 14px;
+  height: 14px;
+  color: var(--brand-green);
+  flex-shrink: 0;
+}
+
+.pb-fp-empty {
+  padding: var(--s-6);
+  text-align: center;
+  font-size: var(--text-sm);
+  color: var(--text-tertiary);
+}
+
+.pb-fp-foot {
+  padding: var(--s-3) var(--s-4);
+  border-top: 1px solid var(--border-subtle);
+  font-size: var(--text-2_5xs);
+  color: var(--text-tertiary);
+  background: var(--surface-sunken);
+  line-height: 1.4;
+}
+
+/* placeholder chips in the document (Placeholders lens) */
+.pbd .pbd-ph {
+  font-family: var(--font-mono);
+  font-size: .82em;
+  color: var(--ai-fg-deep);
+  background: #efe9fc;
+  border: 1px solid #ddd0f8;
+  border-radius: 3px;
+  padding: 0 4px;
+  white-space: normal;
+  word-break: break-all;
+}
+
+/* read-only template-source note */
+.pb-editor-note {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-3);
+  padding: var(--s-3) var(--s-5);
+  font-size: var(--text-xs);
+  color: var(--text-brand-strong);
+  background: var(--green-50);
+  border-bottom: 1px solid var(--border-subtle);
+  line-height: 1.45;
+}
+
+.pb-editor-note svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--brand-green);
+}
+
+/* edit hint chip */
+.pb-edithint {
+  position: absolute;
+  top: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: var(--z-popover);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  background: rgba(20, 23, 27, .86);
+  backdrop-filter: blur(6px);
+  color: #eceef0;
+  font-size: var(--text-xs);
+  font-weight: 500;
+  padding: 6px 8px 6px 12px;
+  border-radius: var(--r-full);
+  box-shadow: var(--shadow-lg);
+}
+
+.pb-edithint svg {
+  width: 14px;
+  height: 14px;
+  color: var(--green-400);
+}
+
+.pb-edithint button {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  color: #aeb2b7;
+}
+
+.pb-edithint button:hover {
+  background: rgba(255, 255, 255, .14);
+  color: #fff;
+}
+
+.pb-edithint button svg {
+  width: 12px;
+  height: 12px;
+  color: inherit;
+}
+
+/* right dock */
+.pb-dock {
+  width: 340px;
+  flex-shrink: 0;
+  background: var(--surface-raised);
+  border-left: 1px solid var(--border-default);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  position: relative;
+}
+
+.pb-dock--wide {
+  width: 600px;
+}
+
+.pb-dock-resizer {
+  position: absolute;
+  top: 0;
+  left: -3px;
+  width: 7px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 2;
+}
+
+.pb-dock-resizer:hover {
+  background: linear-gradient(90deg, transparent, rgba(46, 178, 115, .35), transparent);
+}
+
+.pb-dock .pb-htmltab {
+  flex: 1;
+}
+
+.pb-dock-close {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--r-md);
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+}
+
+.pb-dock-close:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.pb-dock-close svg {
+  width: 15px;
+  height: 15px;
+}
+
+.pb-zoomwrap {
+  transform-origin: top center;
+}
+
+/* editor read-only / warn note + custom-lock banner */
+.pb-editor-note--warn {
+  color: var(--warning-fg-strong);
+  background: var(--warning-bg);
+}
+
+.pb-editor-note--warn svg {
+  color: var(--warning);
+}
+
+.cx-lockbanner {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--s-3);
+  margin: var(--s-5) var(--s-6) 0;
+  padding: var(--s-4) var(--s-5);
+  font-size: var(--text-xs);
+  line-height: 1.45;
+  color: var(--warning-fg-strong);
+  background: var(--warning-bg);
+  border: 1px solid var(--warning-bg-strong);
+  border-radius: var(--r-md);
+}
+
+.cx-lockbanner svg {
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  margin-top: 1px;
+  color: var(--warning);
+}
+
+.cx-lockbanner-body {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--s-3);
+}
+
+.cx-lockbanner-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  padding: var(--s-2) var(--s-3);
+  font: inherit;
+  font-weight: 600;
+  color: var(--warning-fg-strong);
+  background: #fff;
+  border: 1px solid var(--warning-bg-strong);
+  border-radius: var(--r-sm);
+  cursor: pointer;
+}
+
+.cx-lockbanner-btn:hover {
+  background: var(--warning-bg-strong);
+}
+
+.cx-lockbanner-btn svg {
+  margin-top: 0;
+}
+
+.cx-customnote {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--s-3);
+  padding: var(--s-2) 0;
+}
+
+.cx-customnote p {
+  margin: 0;
+  font-size: var(--text-xs);
+  line-height: 1.5;
+  color: var(--text-tertiary);
+}
+
+.cx-customnote .cx-lockbanner-btn {
+  width: auto;
+  white-space: nowrap;
+}
+
+.cx-lockbanner-btn svg {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+
+/* ── Dynamic Table editor (cx-tbl-*) ─────────────────────── */
+.cx-tbl-editor {
+  padding: 0 var(--s-4) var(--s-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-3);
+}
+
+.cx-tbl-source {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  background: var(--surface-sunken);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--r-md);
+  padding: var(--s-2) var(--s-3);
+}
+
+.cx-tbl-source .cx-ph-tag {
+  flex: 1;
+  font-size: var(--text-2_5xs);
+}
+
+.cx-tbl-cols-hd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--s-2) 0;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+/* ── Add Table Dialog ─────────────────────────────────────── */
+.cx-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: grid;
+  place-items: center;
+  background: rgba(0, 0, 0, .45);
+  backdrop-filter: blur(2px);
+}
+
+.cx-dialog {
+  background: var(--surface-raised);
+  border: 1px solid var(--border-default);
+  border-radius: var(--r-lg);
+  width: 420px;
+  max-width: 95vw;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-xl);
+}
+
+.cx-dialog-head {
+  display: flex;
+  align-items: center;
+  padding: var(--s-4) var(--s-5);
+  border-bottom: 1px solid var(--border-subtle);
+  font-weight: 600;
+  font-size: var(--text-sm);
+  color: var(--text-primary);
+}
+
+.cx-dialog-close {
+  margin-left: auto;
+  width: 26px;
+  height: 26px;
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+  border-radius: var(--r-sm);
+}
+
+.cx-dialog-close:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.cx-dialog-close svg {
+  width: 14px;
+  height: 14px;
+}
+
+.cx-dialog-body {
+  padding: var(--s-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-4);
+}
+
+.cx-dialog-body .cx-hint {
+  margin: 0;
+}
+
+.cx-dialog-lbl {
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-secondary);
+}
+
+.cx-dialog-body .cx-ph-tag {
+  font-size: var(--text-2_5xs);
+}
+
+.cx-dialog-foot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--s-3);
+  padding: var(--s-4) var(--s-5);
+  border-top: 1px solid var(--border-subtle);
+}
+
+/* V2 SVG and Button reset - required for icons (overrides hardcoded fills like white on white) */
+:where(.pb, .templates, .cx-dialog) button,
+button:where(.pbtn, .pb-bar-back) {
+  font: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  color: inherit;
+  letter-spacing: inherit;
+}
+
+:where(.pb, .templates, .pbtn, .te-sidebar, .cx-dialog, .pb-bar) svg:not(.MuiSvgIcon-root) {
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}/* ═══════════════════════════════════════════════════════════════
+   ERPForce PDF Builder — the document (.pbd-*)
+   A real A4 paginated document. Same CSS drives screen preview,
+   measurement pass, and @media print output.
+   Tunable per-doc via CSS vars set by AI / inline edits:
+     --pbd-accent      heading rules, doctype, grand total
+     --pbd-head-weight letterhead company weight
+   data-density="compact" tightens the line-item table.
+   ═══════════════════════════════════════════════════════════════ */
+
+.pbd {
+  --pbd-accent: #1B2C6E;
+  --pbd-ink: #14171b;
+  --pbd-muted: #6a6f76;
+  --pbd-faint: #9aa0a6;
+  --pbd-line: #e4e6e9;
+  --pbd-line-strong: #c9ccd0;
+  --pbd-fill: #f6f7f8;
+  --pbd-head-weight: 700;
+  --pbd-pad-y: 6.5px;
+  color: var(--pbd-ink);
+  font-family: 'Inter', sans-serif;
+  font-size: 11px; line-height: 1.45;
+  font-feature-settings: 'tnum';
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Page shell (built by the paginator / editor) ─────────────── */
+.pbd-page { width: var(--pbd-page-w, 794px); min-height: var(--pbd-page-h, 1123px); background: #fff; position: relative; flex-shrink: 0;
+  box-shadow: 0 6px 30px rgba(0,0,0,.4); display: flex; flex-direction: column; }
+.pbd-page-inner { flex: 1; padding: 54px 52px 56px; display: flex; flex-direction: column; overflow-x: auto; }
+
+/* running header / footer */
+.pbd-runhead { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
+  padding: 0 16px; border-bottom: .8px solid var(--pbd-line); font-size: 8px; color: var(--pbd-muted); }
+.pbd-runhead img { height: 11px; opacity: .9; }
+.pbd-runhead .rh-l { font-weight: 700; color: var(--pbd-ink); }
+.pbd-runhead .rh-r { margin-left: auto; font-family: 'JetBrains Mono', monospace; }
+.pbd-runfoot { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px;
+  padding: 0 16px; border-top: .8px solid var(--pbd-line); font-size: 8px; color: var(--pbd-muted); }
+.pbd-runfoot .rf-l { color: var(--pbd-muted); }
+.pbd-runfoot .rf-r { margin-left: auto; font-variant-numeric: tabular-nums; }
+
+/* ── letterhead ─────────────────────────────────────────────── */
+.pbd-lh { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px;
+  padding-bottom: 14px; border-bottom: 2.5px solid var(--pbd-accent); }
+.pbd-lh-co { display: flex; flex-direction: column; gap: 2px; max-width: 56%; }
+.pbd-logo { height: var(--pbd-logo-h, 24px); width: auto; display: block; margin-bottom: 7px; }
+
+/* compact letterhead — saves vertical space on the masthead */
+.pbd[data-head="compact"] .pbd-lh { padding-bottom: 9px; gap: 18px; }
+.pbd[data-head="compact"] .pbd-logo { margin-bottom: 4px; }
+.pbd[data-head="compact"] .pbd-co-name { font-size: 12.5px; }
+.pbd[data-head="compact"] .pbd-co-line { font-size: 8px; line-height: 1.35; }
+.pbd[data-head="compact"] .pbd-doctype { font-size: 19px; }
+.pbd[data-head="compact"] .pbd-ref { margin-top: 4px; font-size: 9px; }
+.pbd[data-head="compact"] .pbd-status { margin-top: 5px; }
+.pbd-co-name { font-size: 14px; font-weight: var(--pbd-head-weight); letter-spacing: -.01em; color: var(--pbd-ink); }
+.pbd-co-line { font-size: 9px; color: var(--pbd-muted); }
+.pbd-lh-doc { text-align: right; flex-shrink: 0; }
+.pbd-doctype { font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: var(--pbd-accent); text-transform: uppercase; line-height: 1.08; }
+.pbd-ref { font-size: 9.5px; color: var(--pbd-muted); margin-top: 7px; font-family: 'JetBrains Mono', monospace; }
+.pbd-ref b { color: var(--pbd-ink); font-weight: 600; }
+.pbd-status { display: inline-block; margin-top: 8px; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
+  padding: 3px 8px; border-radius: 3px; }
+.pbd-status--draft { color: #8a540b; background: #fef1dd; }
+.pbd-status--paid { color: #156b43; background: #e2f5ec; }
+.pbd-status--due { color: #a8232a; background: #fce5e8; }
+
+/* ── parties (bill to / ship to / from) ─────────────────────── */
+.pbd-parties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
+.pbd-parties--2 { grid-template-columns: 1fr 1fr; }
+.pbd-party-h { font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pbd-faint); margin-bottom: 5px; }
+.pbd-party-name { font-size: 11.5px; font-weight: 600; color: var(--pbd-ink); }
+.pbd-party-line { font-size: 9.5px; color: var(--pbd-muted); line-height: 1.5; }
+
+/* ── meta strip ─────────────────────────────────────────────── */
+.pbd-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px 18px; margin-top: 18px;
+  padding: 12px 16px; background: var(--pbd-fill); border: 1px solid var(--pbd-line); border-radius: 6px; }
+.pbd-meta-item { display: flex; flex-direction: column; gap: 1px; }
+.pbd-meta-k { font-size: 7.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pbd-faint); }
+.pbd-meta-v { font-size: 10.5px; font-weight: 600; color: var(--pbd-ink); }
+.pbd-meta--3 { grid-template-columns: repeat(3, 1fr); }
+.pbd-meta--2 { grid-template-columns: repeat(2, 1fr); }
+
+/* ── section heading ────────────────────────────────────────── */
+.pbd-h { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pbd-accent);
+  margin: 22px 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--pbd-line); }
+.pbd-intro { font-size: 10px; color: var(--pbd-muted); line-height: 1.55; margin-top: 16px; }
+
+/* ── line-item table (the hard part) ────────────────────────── */
+.pbd-items-wrap { margin-top: 14px; }
+.pbd-items { width: 100%; border-collapse: collapse; }
+.pbd-items thead th { font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
+  background: var(--pbd-accent); text-align: right; padding: 7px 9px; white-space: nowrap; }
+.pbd-items thead th:first-child { text-align: left; border-radius: 3px 0 0 0; }
+.pbd-items thead th:last-child { border-radius: 0 3px 0 0; }
+.pbd-items thead th.l { text-align: left; }
+.pbd-items tbody td { font-size: 10px; padding: var(--pbd-pad-y) 9px; text-align: right; border-bottom: 1px solid var(--pbd-line);
+  color: #2c2f35; white-space: nowrap; vertical-align: top; }
+.pbd-items tbody td.l { text-align: left; }
+.pbd-items tbody tr:nth-child(even) td { background: #fafbfb; }
+.pbd-items .it-no { color: var(--pbd-faint); font-size: 9px; width: 22px; }
+.pbd-items .it-desc { white-space: normal; max-width: 230px; }
+.pbd-items .it-desc b { font-weight: 600; color: var(--pbd-ink); }
+.pbd-items .it-sku { display: block; font-family: 'JetBrains Mono', monospace; font-size: 8px; color: var(--pbd-faint); margin-top: 1px; }
+.pbd-items .it-tax { color: var(--pbd-muted); font-size: 9px; }
+.pbd-items .it-disc { color: #156b43; }
+.pbd-items tfoot td { font-size: 9.5px; padding: 6px 9px; }
+
+/* "continued" caption when a table breaks across pages */
+.pbd-items-cont { font-size: 8px; font-style: italic; color: var(--pbd-faint); padding: 4px 9px 0; text-align: right; }
+
+/* density */
+.pbd[data-density="compact"] { --pbd-pad-y: 4px; }
+.pbd[data-density="compact"] .pbd-items thead th { padding: 5px 8px; }
+.pbd[data-density="comfortable"] { --pbd-pad-y: 9px; }
+
+/* ── totals ─────────────────────────────────────────────────── */
+.pbd-totals-wrap { display: flex; justify-content: flex-end; margin-top: 14px; }
+.pbd-totals { width: 280px; }
+.pbd-tot-row { display: flex; justify-content: space-between; padding: 5px 10px; font-size: 10px; color: var(--pbd-muted); }
+.pbd-tot-row .pbd-tot-v { color: var(--pbd-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
+.pbd-tot-row--sub { border-top: 1px solid var(--pbd-line); }
+.pbd-tot-row--disc .pbd-tot-v { color: #156b43; }
+.pbd-tot-grand { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 10px; margin-top: 4px;
+  background: var(--pbd-accent); color: #fff; border-radius: 5px; }
+.pbd-tot-grand .pbd-tot-k { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
+.pbd-tot-grand .pbd-tot-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.pbd-amountwords { margin-top: 10px; font-size: 9px; color: var(--pbd-muted); font-style: italic; }
+.pbd-amountwords b { font-style: normal; color: var(--pbd-ink); }
+
+/* ── notes / terms / signature ──────────────────────────────── */
+.pbd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; }
+.pbd-notes-h { font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pbd-faint); margin-bottom: 5px; }
+.pbd-notes-body { font-size: 9.5px; color: var(--pbd-muted); line-height: 1.55; }
+.pbd-notes-body ol, .pbd-notes-body ul { margin: 0; padding-left: 14px; display: flex; flex-direction: column; gap: 3px; }
+.pbd-pay { font-size: 9.5px; color: var(--pbd-muted); line-height: 1.7; }
+.pbd-pay b { color: var(--pbd-ink); font-weight: 600; }
+.pbd-pay .k { display: inline-block; min-width: 92px; color: var(--pbd-faint); }
+
+.pbd-sign { display: flex; gap: 48px; margin-top: 36px; }
+.pbd-sign-line { flex: 1; max-width: 220px; }
+.pbd-sign-rule { border-top: 1px solid var(--pbd-ink); padding-top: 5px; font-size: 9px; color: var(--pbd-muted); }
+.pbd-sign-rule b { color: var(--pbd-ink); display: block; font-size: 10px; }
+
+.pbd-foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--pbd-line); display: flex; justify-content: space-between;
+  font-size: 8.5px; color: var(--pbd-faint); }
+.pbd-foot b { color: var(--pbd-muted); }
+
+/* paid / draft stamp overlay */
+.pbd-stamp { position: absolute; top: 180px; right: 60px; transform: rotate(-14deg); border: 3px solid; border-radius: 8px;
+  padding: 6px 18px; font-size: 26px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .16; pointer-events: none; }
+.pbd-stamp--paid { color: #156b43; border-color: #156b43; }
+.pbd-stamp--due { color: #a8232a; border-color: #a8232a; }
+
+/* ── inline WYSIWYG edit affordances ─────────────────────────── */
+.pb-editable [data-edit] { cursor: text; border-radius: 2px; transition: background .12s, box-shadow .12s; }
+.pb-editable [data-edit]:hover { background: rgba(46,178,115,.10); box-shadow: 0 0 0 2px rgba(46,178,115,.16); }
+.pb-editable [data-edit].is-editing { background: #fff; box-shadow: 0 0 0 2px var(--brand-green); outline: none; }
+.pb-editable [data-edit].is-editing:empty::before { content: 'Type…'; color: var(--pbd-faint); }
+.pbd-ed:focus { outline: none; }
+
+/* ── template WYSIWYG edit affordances (Edit lens) ── */
+.pb-tpl-editable .pbd-lit { cursor: text; border-radius: 2px; transition: background .12s, box-shadow .12s; }
+.pb-tpl-editable .pbd-lit:hover { background: rgba(46,178,115,.10); box-shadow: 0 0 0 2px rgba(46,178,115,.16); }
+.pb-tpl-editable .pbd-lit.is-editing { background: #fff; box-shadow: 0 0 0 2px var(--brand-green); outline: none; }
+/* field chips: friendly, click-to-pick (not monospace, no raw paths) */
+.pb-tpl-editable .pbd-ph { font-family: inherit; font-size: .92em; cursor: pointer; padding: 0 4px 0 6px;
+  display: inline-flex; align-items: center; gap: 3px; transition: box-shadow .12s, background .12s; }
+.pb-tpl-editable .pbd-ph::after { content: '▾'; font-size: .72em; opacity: .55; margin-left: 1px; }
+.pb-tpl-editable .pbd-ph:hover { background: #e6dcff; box-shadow: 0 0 0 2px rgba(110,86,207,.30); }
+
+/* field-inspector pills (Fields preview mode) */
+.pbd-ph { font-family: 'JetBrains Mono', monospace; font-size: .82em; color: var(--ai-fg-deep);
+  background: #efe9fc; border: 1px solid #ddd0f8; border-radius: 3px; padding: 0 4px; white-space: normal; word-break: break-all; }
+
+/* ── financial report rows ──────────────────────────────────── */
+.pbd-items tr.is-section td, .pbd-items tr.is-section th { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
+  color: var(--pbd-faint); padding-top: 13px; border-bottom: 0; background: #fff !important; }
+.pbd-items tr.is-sub td { font-weight: 700; color: var(--pbd-ink); border-top: 1px solid var(--pbd-line-strong); background: var(--pbd-fill) !important; }
+.pbd-items tr.is-grand td { font-weight: 700; font-size: 11px; color: #fff; background: var(--pbd-accent) !important; }
+.pbd-items .pd-indent { padding-left: 22px; }
+.pbd-items .pd-neg { color: #b4282d; }
+.pbd-items .pd-pos { color: #156b43; }
+
+/* KPI strip (reports) */
+.pbd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
+.pbd-kpi { border: 1px solid var(--pbd-line); border-radius: 5px; padding: 9px 11px; }
+.pbd-kpi-l { font-size: 8px; color: var(--pbd-faint); text-transform: uppercase; letter-spacing: .04em; }
+.pbd-kpi-v { font-size: 16px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; color: var(--pbd-ink); }
+.pbd-kpi-s { font-size: 8px; color: var(--pbd-muted); margin-top: 2px; }
+
+/* ═══════════════════════════════════════════════════════════════
+   KSA bilingual (ZATCA) Tax Invoice  ·  .kx-*
+   Self-contained English/Arabic invoice. Arabic runs RTL with the
+   Kufi face; table styling is scoped under .kx-items-wrap so it
+   survives the paginator's continuation rebuild (which keeps the
+   wrap attributes but resets the table to class="pbd-items").
+   ═══════════════════════════════════════════════════════════════ */
+.kx-ar, .kx-ar-h, .kx-ar-sm, .kx-col-ar, .kx-title-ar,
+.kx-tot-ar, [dir="rtl"] { font-family: 'Noto Kufi Arabic', 'Inter', sans-serif; }
+
+/* ── header ─────────────────────────────────────────────────── */
+.kx-head { border-bottom: 2.5px solid var(--pbd-accent); padding-bottom: 12px; }
+.kx-head-row { display: flex; align-items: center; gap: 16px; }
+.kx-logo { height: 26px; width: auto; }
+.kx-title-block { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; }
+.kx-title { font-size: 22px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pbd-ink); }
+.kx-title-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pbd-accent); }
+.kx-title-ar { font-size: 23px; font-weight: 700; color: var(--pbd-accent); }
+.kx-head-tag { font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; text-align: center;
+  color: var(--pbd-accent); border: 1.2px solid var(--pbd-accent); border-radius: 5px; padding: 4px 7px; line-height: 1.25; }
+.kx-head-no { display: flex; justify-content: space-between; margin-top: 9px; }
+.kx-head-no-en, .kx-head-no-ar { display: flex; align-items: baseline; gap: 7px; }
+.kx-head-no .kx-k { font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pbd-faint); }
+.kx-head-no-ar .kx-k { text-transform: none; letter-spacing: 0; font-size: 9.5px; }
+.kx-head-no b { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: var(--pbd-accent); }
+
+/* ── seller / buyer cards ───────────────────────────────────── */
+.kx-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
+.kx-party { border: 1px solid var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
+.kx-party-bar { display: flex; justify-content: space-between; align-items: center; padding: 4px 11px;
+  background: var(--pbd-fill); border-bottom: 1px solid var(--pbd-line); }
+.kx-party-bar span:first-child { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pbd-accent); }
+.kx-party-bar .kx-ar { font-size: 11px; font-weight: 700; color: var(--pbd-accent); }
+.kx-party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 12px; }
+.kx-col-ar { text-align: right; }
+.kx-name { font-size: 11px; font-weight: 700; color: var(--pbd-ink); line-height: 1.35; }
+.kx-col-ar .kx-name { font-size: 12px; }
+.kx-line { font-size: 8.5px; color: var(--pbd-muted); line-height: 1.5; margin-top: 1px; }
+.kx-col-ar .kx-line { font-size: 9.5px; }
+.kx-kv { display: flex; gap: 6px; font-size: 8.5px; margin-top: 4px; }
+.kx-col-ar .kx-kv { flex-direction: row-reverse; }
+.kx-kv span { color: var(--pbd-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-width: 46px; }
+.kx-col-ar .kx-kv span { text-transform: none; letter-spacing: 0; min-width: 64px; }
+.kx-kv b { font-family: 'JetBrains Mono', monospace; color: var(--pbd-ink); font-weight: 600; }
+
+/* ── meta strip ─────────────────────────────────────────────── */
+.kx-meta { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 10px;
+  border: 1px solid var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
+.kx-meta-item { padding: 6px 10px; border-right: 1px solid var(--pbd-line); display: flex; flex-direction: column; gap: 3px; }
+.kx-meta-item:last-child { border-right: 0; }
+.kx-meta-k { font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pbd-faint);
+  display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
+.kx-meta-k .kx-ar { font-size: 8.5px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--pbd-muted); font-style: normal; }
+.kx-meta-v { font-size: 9.5px; font-weight: 700; color: var(--pbd-ink); font-variant-numeric: tabular-nums; }
+
+/* ── line-item table (scoped to the wrap so splits keep styling) ── */
+.kx-items-wrap { margin-top: 8px; }
+.kx-items-wrap .pbd-items thead th { font-size: 7.5px; line-height: 1.2; padding: 5px 6px; vertical-align: top; }
+.kx-items-wrap .pbd-items thead th .kx-ar-h { display: block; font-size: 8px; font-weight: 600; opacity: .9; margin-top: 2px; }
+.kx-items-wrap .pbd-items tbody td { font-size: 9px; padding: 3.5px 6px; vertical-align: middle; }
+.kx-items-wrap .pbd-items .it-no { width: 18px; }
+.kx-items-wrap .kx-sku { font-family: 'JetBrains Mono', monospace; font-size: 8.5px; color: var(--pbd-ink); }
+.kx-items-wrap .kx-desc { white-space: normal; min-width: 150px; max-width: 220px; }
+.kx-items-wrap .kx-desc b { font-weight: 600; color: var(--pbd-ink); display: block; }
+.kx-items-wrap .kx-desc .kx-ar { display: block; font-size: 9px; color: var(--pbd-muted); margin-top: 2px; direction: rtl; }
+.kx-items-wrap .kx-unit { display: block; }
+.kx-items-wrap .kx-ar-sm { display: block; font-size: 8px; color: var(--pbd-muted); margin-top: 1px; }
+.kx-items-wrap .kx-rate { color: var(--pbd-muted); }
+
+/* edit mode: the field chips ("Total with tax", "Tax amount"…) are wider than
+   the sample numbers they stand in for, and headers/chips are nowrap — across
+   11 columns that pushes the table past the page edge. Let headers and chips
+   wrap in template-edit mode so the width:100% table can shrink back to fit. */
+.pb-tpl-editable .pbd-items thead th { white-space: normal; }
+.pb-tpl-editable .pbd-items tbody td { padding-left: 4px; padding-right: 4px; }
+.pb-tpl-editable .pbd-items tbody .pbd-ph {
+  font-size: .8em; line-height: 1.12; padding: 0 2px; }
+
+/* ── totals (ZATCA grid: EN label · value · AR label) ───────── */
+.kx-totals { margin-top: 10px; }
+.kx-tot-grid { border: 1px solid var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
+.kx-tot-row { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center;
+  border-bottom: 1px solid var(--pbd-line); }
+.kx-tot-row:last-child { border-bottom: 0; }
+.kx-tot-en { font-size: 9.5px; font-weight: 600; color: var(--pbd-ink); padding: 4px 12px; }
+.kx-tot-v { font-size: 10.5px; font-weight: 700; color: var(--pbd-ink); text-align: center; padding: 4px 12px;
+  font-variant-numeric: tabular-nums; border-left: 1px solid var(--pbd-line); border-right: 1px solid var(--pbd-line); background: #fff; }
+.kx-tot-ar { font-size: 10px; font-weight: 600; color: var(--pbd-muted); text-align: right; padding: 4px 12px; }
+.kx-tot-grand { background: var(--pbd-fill); }
+.kx-tot-grand .kx-tot-en, .kx-tot-grand .kx-tot-ar { font-weight: 800; color: var(--pbd-ink); }
+.kx-tot-grand .kx-tot-v { font-size: 12px; }
+.kx-tot-due { background: var(--pbd-accent); }
+.kx-tot-due .kx-tot-en, .kx-tot-due .kx-tot-ar { color: #fff; font-weight: 800; }
+.kx-tot-due .kx-tot-v { color: #fff; font-size: 13px; background: transparent; border-color: rgba(255,255,255,.28); }
+
+.kx-words { margin-top: 8px; border: 1px dashed var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
+.kx-words-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 12px; }
+.kx-words-row:first-child { border-bottom: 1px solid var(--pbd-line); }
+.kx-words-k { font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--pbd-faint); white-space: nowrap; }
+.kx-words-row[dir="rtl"] .kx-words-k { text-transform: none; letter-spacing: 0; font-size: 9.5px; }
+.kx-words-v { font-size: 9.5px; font-weight: 600; color: var(--pbd-ink); }
+.kx-words-row[dir="rtl"] .kx-words-v { font-size: 10.5px; }
+
+/* ── QR + bank details ──────────────────────────────────────── */
+.kx-bankqr { display: flex; gap: 16px; margin-top: 10px; align-items: stretch; }
+.kx-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
+  border: 1px solid var(--pbd-line-strong); border-radius: 7px; padding: 11px; width: 152px; flex-shrink: 0; }
+.kx-qr img { width: 124px; height: 124px; display: block; }
+.kx-qr-cap { font-size: 7px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--pbd-faint); text-align: center; line-height: 1.35; }
+.kx-qr-cap .kx-ar { display: block; font-size: 8.5px; text-transform: none; letter-spacing: 0; color: var(--pbd-muted); margin-top: 1px; }
+.kx-bank { flex: 1; border: 1px solid var(--pbd-line-strong); border-radius: 7px; overflow: hidden; }
+.kx-bank-h { display: flex; justify-content: space-between; padding: 5px 11px; background: var(--pbd-fill); border-bottom: 1px solid var(--pbd-line); }
+.kx-bank-h span:first-child { font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--pbd-accent); }
+.kx-bank-h .kx-ar { font-size: 11px; font-weight: 700; color: var(--pbd-accent); }
+.kx-bank-tbl { width: 100%; border-collapse: collapse; }
+.kx-bank-tbl td { font-size: 9px; padding: 4px 11px; border-bottom: 1px solid var(--pbd-line); color: var(--pbd-ink); }
+.kx-bank-tbl tr:last-child td { border-bottom: 0; }
+.kx-bank-tbl tr:nth-child(even) td { background: #fafbfb; }
+.kx-bank-k { width: 130px; color: var(--pbd-faint); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 7.5px; }
+.kx-bank-k .kx-ar { float: right; text-transform: none; letter-spacing: 0; font-size: 9px; color: var(--pbd-muted); font-weight: 600; }
+.kx-bank-tbl td:not(.kx-bank-k) { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
+
+/* ── footer note ────────────────────────────────────────────── */
+.kx-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--pbd-line); text-align: center;
+  font-size: 8.5px; color: var(--pbd-faint); line-height: 1.5; }
+
+
+@media print {
+  html, body { height: auto !important; overflow: visible !important; background: #fff !important; }
+  .pb-top, .pb-bar, .pb-rail, .pb-editor, .pb-ai, .pb-drawer, .pb-side, .pb-dock, .pb-edithint, .pb-lensbar, .pb-lens, .pb-edithint-inline, .pb-preview-bar, .pb-zoomfloat, .tweaks-panel, .pb-toast { display: none !important; }
+  .pb, .pb-body, .pb-work, .pb-center, .pb-preview, .pb-stage, .pb-stage-scroll { display: block !important; height: auto !important; overflow: visible !important; background: #fff !important; }
+  .pb-editable [data-edit]:hover { background: none !important; box-shadow: none !important; }
+  .pb-preview-scroll, .pb-stage-scroll { overflow: visible !important; padding: 0 !important; background: #fff !important; }
+  .pb-pages { transform: none !important; gap: 0 !important; display: block !important; }
+  .pb-zoomwrap { transform: none !important; margin: 0 !important; width: auto !important; }
+  .pbd-page { box-shadow: none !important; margin: 0 auto !important; page-break-after: always; break-after: page; }
+  .pbd-page:last-child { page-break-after: auto; break-after: auto; }
+  .pbd-items thead th, .pbd-tot-grand, .pbd-meta, .pbd-status, .pbd-items tr.is-grand td, .pbd-items tr.is-sub td, .pbd-runhead, .pbd-runfoot, .pbd-stamp,
+  .kx-items-wrap .pbd-items thead th, .kx-tot-due, .kx-tot-grand, .kx-party-bar, .kx-bank-h, .kx-meta {
+    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+}
+.pbd-page-inner table:not(.pbd-items) { min-width: max-content; }
+/* ═══════════════════════════════════════════════════════════════
+   ERPForce PDF Builder — Stationery Master
+   The reusable header + footer + watermark that every document
+   template inherits. Brand colour (--st-brand) is independent of
+   the per-document accent (--pbd-accent).
+   Builds on styles.css (chrome) + doc.css (.pbd document).
+   ═══════════════════════════════════════════════════════════════ */
+
+.st { --st-brand: #2EB273; }
+
+/* the A4 sheet is a flex column: header · body(grows) · footer */
+.st .pbd-page { display: flex; flex-direction: column; overflow: hidden; }
+.st .pbd-page > * { position: relative; z-index: 1; }
+.st .pbd-page-inner { flex: 1; padding: 26px 52px 22px; }
+
+/* ── watermark (behind everything, centred over the whole page) ── */
+.st .pbd-page > .st-wm { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; }
+.st-wm img { display: block; max-width: 70%; height: auto; filter: grayscale(1); }
+
+/* ════════════════ HEADER MASTER ══════════════════════════════ */
+.st-head { display: flex; align-items: flex-start; gap: 28px; padding: 30px 52px 14px;
+  border-bottom: 2.5px solid var(--st-brand); }
+.st-logo { width: auto; display: block; }
+.st-id { display: flex; flex-direction: column; gap: 2px; }
+.st-name-en { font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--pbd-ink); line-height: 1.2; }
+.st-name-ar { font-family: 'Noto Kufi Arabic', 'Cairo', 'IBM Plex Sans Arabic', 'Tahoma', sans-serif; font-size: 15px; font-weight: 600;
+  color: #3a3f46; line-height: 1.4; direction: rtl; unicode-bidi: embed; }
+.st-tagline { font-size: 9.5px; font-family: 'JetBrains Mono', monospace; letter-spacing: .02em; color: var(--st-brand); margin-top: 2px; }
+.st-head-col { display: flex; flex-direction: column; gap: 3px; }
+
+/* variant — standard: logo left, identity right */
+.st-head--standard { justify-content: space-between; }
+.st-head--standard .st-id,
+.st-head--standard .st-name-en,
+.st-head--standard .st-name-ar,
+.st-head--standard .st-tagline { text-align: right; width: 100%; align-items: flex-end; }
+
+/* variant — split (client letterhead): logo+web left, bilingual name right */
+.st-head--split { justify-content: space-between; }
+.st-head--split .st-id,
+.st-head--split .st-name-en,
+.st-head--split .st-name-ar,
+.st-head--split .st-tagline { text-align: right; width: 100%; align-items: flex-end; }
+
+/* variant — centered */
+.st-head--centered { flex-direction: column; align-items: center; gap: 8px; text-align: center; padding-top: 26px; }
+.st-head--centered .st-id,
+.st-head--centered .st-name-en,
+.st-head--centered .st-name-ar,
+.st-head--centered .st-tagline { text-align: center; width: 100%; align-items: center; }
+.st-head--centered .st-logo { margin-bottom: 2px; }
+
+/* variant — compact (continuation pages / dense docs) */
+.st-head--compact { align-items: center; justify-content: space-between; padding: 11px 52px; gap: 16px; }
+.st-head--compact .st-head-cmp-l { display: flex; align-items: center; gap: 10px; }
+.st-head--compact .st-name-en { font-size: 11.5px; }
+.st-head--compact .st-tagline { margin-top: 0; }
+
+/* ════════════════ BODY · doc-title bar ═══════════════════════ */
+/* the body masthead (doctype / number) — separate from the letterhead.
+   uses the DOCUMENT accent, proving it is independent of --st-brand. */
+.st .pbd-page-inner > .st-doctitle:first-child { margin-top: 4px; }
+.st-doctitle { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 4px; }
+.st-doctitle-l { display: flex; flex-direction: column; align-items: flex-start; }
+.st-doctype { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--pbd-accent); text-transform: uppercase; line-height: 1.05; white-space: nowrap; }
+.st-doctype-rule { width: 38px; height: 3px; background: var(--pbd-accent); border-radius: 2px; margin-top: 7px; }
+.st-doctitle-r { text-align: right; flex-shrink: 0; }
+
+/* ════════════════ FOOTER MASTER ══════════════════════════════ */
+.st-foot { margin-top: auto; }
+.st-foot-band { background: var(--st-brand); color: #fff; display: flex; align-items: center; justify-content: center;
+  flex-wrap: wrap; gap: 6px 22px; padding: 7px 52px; font-size: 10px; font-weight: 700; letter-spacing: .05em;
+  font-family: 'JetBrains Mono', monospace; }
+.st-foot-band span { position: relative; }
+.st-foot-band span + span::before { content: '|'; position: absolute; left: -12px; opacity: .5; font-weight: 400; }
+.st-foot-contact { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px;
+  padding: 8px 52px 0; font-size: 9px; color: var(--pbd-muted); }
+.st-foot-contact span { display: inline-flex; align-items: center; gap: 5px; position: relative; }
+.st-foot-contact span + span::before { content: '·'; position: absolute; left: -9px; color: var(--pbd-faint); }
+.st-foot-contact svg { width: 11px; height: 11px; color: var(--st-brand); flex-shrink: 0; }
+.st-foot-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 6px 52px 14px; font-size: 8px; color: var(--pbd-faint); }
+.st-foot-meta .st-foot-pg { font-variant-numeric: tabular-nums; margin-left: auto; }
+
+/* continuation pages — slim single-line footer (no reg band / contact) */
+.st-foot--compact { border-top: 1px solid rgba(20,23,27,.08); }
+.st-foot--compact .st-foot-meta { padding-top: 8px; padding-bottom: 12px; }
+
+/* ════════════════ PRE-PRINTED reserved margins ═══════════════ */
+.st-reserve { display: grid; place-items: center; flex-shrink: 0;
+  background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(99,102,108,.06) 7px, rgba(99,102,108,.06) 8px); }
+.st-reserve--top { border-bottom: 1.5px dashed var(--border-strong); }
+.st-reserve--bot { border-top: 1.5px dashed var(--border-strong); }
+.st-reserve span { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; font-weight: 600; letter-spacing: .03em;
+  text-transform: uppercase; color: var(--text-quaternary); background: rgba(255,255,255,.7); padding: 3px 10px; border-radius: var(--r-full); }
+.st-reserve svg { width: 12px; height: 12px; }
+
+/* ════════════════ APP CHROME extras ═════════════════════════ */
+/* dock the toolbar on top; canvas scroll fills the rest */
+.st-stage { flex-direction: column; }
+/* a clean, non-overlapping toolbar above the canvas */
+.st-toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; width: 100%;
+  padding: var(--s-3) var(--s-5); background: var(--surface-raised); border-bottom: 1px solid var(--border-subtle);
+  box-shadow: var(--shadow-xs); }
+.st-toolbar-lbl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
+.st-toolbar-lbl svg { width: 13px; height: 13px; color: var(--green-500); }
+.st-toolbar-sp { flex: 1; }
+
+/* sample-content toggle */
+.st-sample-tg { display: inline-flex; align-items: center; gap: var(--s-2); height: 28px; padding: 0 var(--s-3) 0 5px;
+  border-radius: var(--r-full); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary);
+  background: var(--surface-muted); border: 1px solid var(--border-subtle); }
+.st-sample-tg:hover { background: var(--surface-sunken); }
+.st-sample-tg.is-on { color: var(--green-700); background: var(--green-50); border-color: var(--green-200); }
+.st-sample-tg .cx-switch { pointer-events: none; }
+.st-sample-tg.is-on .cx-switch { background: var(--green-500); }
+.st-sample-tg.is-on .cx-switch .cx-switch-dot { transform: translateX(14px); }
+
+.st-docchips { display: flex; gap: 4px; }
+.st-docchip { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: var(--r-full);
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); background: var(--surface-muted);
+  border: 1px solid var(--border-subtle); white-space: nowrap; }
+.st-docchip svg { width: 12px; height: 12px; }
+.st-docchip:hover { background: var(--surface-sunken); color: var(--text-primary); }
+.st-docchip.is-active { background: var(--n-900); color: #fff; border-color: var(--n-900); }
+.st-docchip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+
+/* blank letterpad placeholder (default view) */
+.st-blank { flex: 1; display: grid; place-items: center; min-height: 360px; }
+.st-blank span { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pbd-faint);
+  border: 1px dashed var(--border-subtle); border-radius: var(--r-full); padding: 4px 14px; opacity: .55; }
+
+/* ── Edit / Preview lens, re-skinned light for the docked toolbar ── */
+.st-toolbar .pb-lens { background: var(--surface-muted); border: 1px solid var(--border-subtle); box-shadow: none; backdrop-filter: none; padding: 2px; }
+.st-toolbar .pb-lens button { color: var(--text-tertiary); height: 26px; padding: 0 var(--s-4); }
+.st-toolbar .pb-lens button.is-active { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-xs); }
+.st-edithint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 500; color: var(--text-brand-strong); }
+.st-edithint svg { width: 13px; height: 13px; color: var(--green-500); }
+
+/* ── inline-editable text affordance (on the page) ────────────── */
+.st-ed { cursor: text; border-radius: 3px; outline: none; transition: box-shadow var(--dur-fast), background var(--dur-fast); }
+.st-head.is-edit .st-ed, .st-foot.is-edit .st-ed-inline { /* box-shadow removed as FreeWrap handles outlines */ }
+.st-head.is-edit .st-ed { padding: 0 3px; margin: 0 -3px; }
+.st-ed:hover { background: rgba(46,178,115,.05); }
+.st-ed:focus { background: rgba(46,178,115,.05); }
+.st-ed[data-empty="true"]::before { content: attr(data-ph); color: var(--pbd-faint); font-style: italic; opacity: .7; }
+.st-ed-inline[data-empty="true"]::before { content: attr(data-ph); opacity: .6; font-style: italic; }
+.st-ed-inline { cursor: text; border-radius: 3px; outline: none; padding: 0 2px; transition: box-shadow var(--dur-fast), background var(--dur-fast); }
+.st-foot-band .st-ed-inline:hover { background: rgba(255,255,255,.22); }
+.st-foot-band .st-ed-inline:focus { background: rgba(255,255,255,.28); box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
+.st-foot-contact .st-ed-inline:hover, .st-foot-meta .st-ed-inline:hover { background: rgba(46,178,115,.12); box-shadow: 0 0 0 1px rgba(46,178,115,.45); }
+.st-foot-contact .st-ed-inline:focus, .st-foot-meta .st-ed-inline:focus { background: rgba(46,178,115,.06); box-shadow: 0 0 0 1.5px var(--brand-green); }
+
+/* ── logo replace slot on the canvas (edit mode) ──────────────── */
+.st-logo-slot { position: relative; display: inline-flex; align-items: center; cursor: pointer; border-radius: var(--r-sm); }
+.st-logo-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.st-logo-slot .st-logo-hint { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 4px;
+  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 9px; font-weight: 600; color: #fff;
+  background: var(--n-900); padding: 3px 7px; border-radius: var(--r-full); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); z-index: 5; }
+.st-logo-slot .st-logo-hint svg { width: 10px; height: 10px; }
+.st-logo-slot:hover { box-shadow: 0 0 0 2px rgba(46,178,115,.5); }
+.st-logo-slot:hover .st-logo-hint { opacity: 1; }
+
+/* ── logo upload control in the rail ──────────────────────────── */
+.st-logo-up { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0 var(--s-2); }
+.st-logo-up-preview { width: 78px; height: 46px; flex-shrink: 0; border: 1px solid var(--border-subtle); border-radius: var(--r-md);
+  background: var(--surface-muted); display: grid; place-items: center; padding: 6px; }
+.st-logo-up-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.st-logo-up-actions { display: flex; flex-direction: column; gap: var(--s-2); }
+.cx-btn { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); height: 30px; padding: 0 var(--s-4);
+  border-radius: var(--r-md); font-size: var(--text-xs); font-weight: 600; color: #fff; background: var(--n-900); cursor: pointer; white-space: nowrap; }
+.cx-btn:hover { background: var(--n-800); }
+.cx-btn svg { width: 13px; height: 13px; }
+.cx-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.cx-btn--ghost { background: var(--surface-muted); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
+.cx-btn--ghost:hover { background: var(--surface-sunken); color: var(--text-primary); }
+.cx-btn--sm { height: 28px; }
+
+/* ── stationery PRESET bar (top bar of the Master editor) ─────── */
+.st-presetbar { display: inline-flex; align-items: center; gap: var(--s-2); }
+.st-preset-pick { position: relative; display: inline-flex; align-items: center; }
+.st-preset-select { -webkit-appearance: none; appearance: none; height: 30px; max-width: 190px; padding: 0 26px 0 11px;
+  border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--surface-muted); cursor: pointer;
+  font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); text-overflow: ellipsis; }
+.st-preset-select:hover { background: var(--surface-sunken); }
+.st-preset-caret { position: absolute; right: 8px; width: 13px; height: 13px; color: var(--text-tertiary); pointer-events: none; }
+.st-preset-name { height: 30px; width: 168px; padding: 0 10px; border-radius: var(--r-md);
+  border: 1px solid transparent; background: transparent; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
+.st-preset-name:hover { border-color: var(--border-subtle); background: var(--surface-muted); }
+.st-preset-name:focus { border-color: var(--brand-green); background: var(--surface-raised); box-shadow: 0 0 0 3px var(--green-100, rgba(46,178,115,.18)); outline: none; }
+.st-preset-acts { display: inline-flex; gap: 2px; }
+.st-preset-acts button { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center;
+  color: var(--text-tertiary); }
+.st-preset-acts button:hover { background: var(--surface-sunken); color: var(--text-primary); }
+.st-preset-acts button:disabled { opacity: .35; pointer-events: none; }
+.st-preset-acts button svg { width: 14px; height: 14px; }
+.st-preset-acts button:last-child:hover { background: var(--danger-bg); color: var(--danger); }
+.pb-bar-stat-count { font-size: var(--text-2_5xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
+  color: var(--text-quaternary); padding: 0 var(--s-2); }
+
+/* ── builder toolbar: stationery picker dropdown ─────────────── */
+/* lift the top bar above the floating lens pill (z-popover) so the
+   stationery dropdown isn't painted over by the Edit/Preview controls */
+.pb-bar { z-index: var(--z-tooltip); }
+.pb-stnpick { position: relative; }
+.pb-stnpick-btn { display: inline-flex; align-items: center; gap: var(--s-2); height: 30px; max-width: 220px; padding: 0 8px 0 10px;
+  border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--surface-muted);
+  font-size: var(--text-xs); font-weight: 600; color: var(--text-primary); cursor: pointer; }
+.pb-stnpick-btn:hover { background: var(--surface-sunken); }
+.pb-stnpick-btn.is-open { border-color: var(--brand-green); box-shadow: 0 0 0 3px var(--green-100, rgba(46,178,115,.16)); }
+.pb-stnpick-btn > svg { width: 13px; height: 13px; color: var(--text-tertiary); flex-shrink: 0; }
+.pb-stnpick-btn > svg:last-child { color: var(--text-quaternary); }
+.pb-stnpick-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pb-stnpick-dot { width: 11px; height: 11px; border-radius: var(--r-full); flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
+
+.pb-stnpick-menu { position: absolute; top: calc(100% + 6px); right: 0; width: 288px; z-index: 60;
+  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--r-lg);
+  box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,.18)); padding: var(--s-2); }
+.pb-stnpick-grp { font-size: var(--text-2_5xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
+  color: var(--text-quaternary); padding: var(--s-3) var(--s-3) var(--s-2); }
+.pb-stnpick-grp:not(:first-child) { border-top: 1px solid var(--border-subtle); margin-top: var(--s-2); }
+.pb-stnpick-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3);
+  border-radius: var(--r-md); text-align: left; cursor: pointer; color: var(--text-primary); }
+.pb-stnpick-item:hover { background: var(--surface-muted); }
+.pb-stnpick-item.is-sel { background: var(--green-50, rgba(46,178,115,.08)); }
+.pb-stnpick-item > .pb-stnpick-dot { margin: 2px 1px; }
+.pb-stnpick-ic { width: 13px; display: grid; place-items: center; color: var(--text-tertiary); }
+.pb-stnpick-ic svg { width: 14px; height: 14px; }
+.pb-stnpick-itemt { flex: 1; display: flex; flex-direction: column; font-size: var(--text-sm); font-weight: 600; line-height: 1.2; min-width: 0; }
+.pb-stnpick-itemt small { font-size: var(--text-2_5xs); font-weight: 500; color: var(--text-tertiary); margin-top: 2px;
+  text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.pb-stnpick-item > svg { width: 15px; height: 15px; color: var(--brand-green); flex-shrink: 0; }
+.pb-stnpick-foot { border-top: 1px solid var(--border-subtle); margin-top: var(--s-2); padding-top: var(--s-2); }
+.pb-stnpick-foot button { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3);
+  border-radius: var(--r-md); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); cursor: pointer; }
+.pb-stnpick-foot button:hover { background: var(--surface-muted); color: var(--text-primary); }
+.pb-stnpick-foot button svg { width: 14px; height: 14px; color: var(--text-tertiary); }
+
+/* ── builder: body masthead/footer SUPPRESSED when a stationery owns them ──
+   Every template body ships with its own .pbd-lh company letterhead and
+   .pbd-foot footer. When the document uses a Stationery preset / Pre-printed
+   / Blank, the stationery (or nothing) provides those — so we hide the body's
+   built-in company block + footer but KEEP the doc-type/number bar. Applied to
+   the live pages AND the off-screen measure surface so pagination stays exact. */
+.pb-stn .pbd-lh .pbd-logo,
+.pb-stn .pbd-lh .pbd-lh-co { display: none !important; }
+.pb-stn .pbd-lh { border-bottom: none; padding-bottom: 0; margin-bottom: 2px; gap: 0; }
+.pb-stn .pbd-lh-doc { text-align: left; }
+.pb-stn .pbd-foot { display: none !important; }
+
+/* mode segmented in the top bar */
+.st-mode { display: inline-flex; background: var(--surface-muted); border-radius: var(--r-md); padding: 2px; gap: 2px; }.st-mode button { height: 26px; padding: 0 var(--s-4); border-radius: var(--r-sm); font-size: var(--text-xs); font-weight: 600;
+  color: var(--text-tertiary); display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
+.st-mode button svg { width: 13px; height: 13px; }
+.st-mode button.is-active { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-xs); }
+
+/* registration-items editor (rail) */
+.st-reg { display: flex; flex-direction: column; gap: var(--s-3); }
+.st-reg-row { display: flex; align-items: center; gap: var(--s-2); }
+.st-reg-row .cx-input { height: 28px; }
+.st-reg-row .st-reg-lbl { width: 92px; flex-shrink: 0; }
+.st-reg-del { width: 26px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-tertiary); flex-shrink: 0; }
+.st-reg-del:hover { background: var(--danger-bg); color: var(--danger); }
+.st-reg-del svg { width: 13px; height: 13px; }
+
+/* rail brand-colour swatches incl. a custom picker */
+.st-brandsw { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
+.st-brandsw .cx-swatch { width: 26px; height: 26px; }
+.st-brandsw .st-swatch-custom { position: relative; width: 26px; height: 26px; border-radius: var(--r-md); overflow: hidden;
+  border: 1px dashed var(--border-strong); display: grid; place-items: center; cursor: pointer; }
+.st-brandsw .st-swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
+.st-brandsw .st-swatch-custom svg { width: 13px; height: 13px; color: var(--text-tertiary); }
+
+/* preprinted hint card in rail */
+.st-prehint { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-4); font-size: var(--text-xs);
+  line-height: 1.5; color: var(--ai-fg-deep); background: var(--ai-bg); border-radius: var(--r-md); }
+.st-prehint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
+
+/* small caption under variant picker */
+.st-variantnote { font-size: var(--text-2_5xs); color: var(--text-quaternary); margin-top: var(--s-3); line-height: 1.4; }
+
+/* print */
+@media print {
+  /* A4 with NO browser margins → removes the date/title chrome AND keeps
+     the 794×1123px page on a single sheet (no footer spilling to page 2) */
+  @page { size: A4 portrait; margin: 0; }
+  html, body { width: 794px; height: auto !important; margin: 0 !important; background: #fff !important; }
+  .pb-bar, .pb-side, .st-toolbar, .st-stage > .st-toolbar, .pb-zoomfloat, .pb-toast, .pb-lensbar, .pb-lens { display: none !important; }
+  .pb, .pb-work, .pb-stage, .st-stage, .pb-stage-scroll { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; background: #fff !important; padding: 0 !important; }
+  .pb-zoomwrap { transform: none !important; margin: 0 !important; width: auto !important; }
+  .pb-pages { gap: 0 !important; transform: none !important; }
+  .pbd-page { box-shadow: none !important; margin: 0 !important; min-height: 1122px !important; break-after: page; page-break-after: always; }
+  .pbd-page:last-child { break-after: auto; page-break-after: auto; }
+  .st-ed, .st-ed-inline { box-shadow: none !important; background: none !important; }
+  .st-logo-slot .st-logo-hint { display: none !important; }
+  .st-reserve { background: none !important; border: none !important; }
+  .st-reserve span { display: none !important; }
+  .st-head, .st-foot-band, .pbd-items thead th, .pbd-tot-grand, .st-doctype, .pbd-status { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+}
+.st-free-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+.st-free-content > * {
+  margin: 0 !important;
+  width: 100% !important;
+  box-sizing: border-box !important;
+  word-break: break-word;
+  pointer-events: none !important;
+}
+/* ═══════════════════════════════════════════════════════════════
+   ERPForce Stationery — creative letterhead directions  ·  v2
+   Six distinct "letter pad" treatments, all on the same A4 sheet
+   (794×1123) and the same brand kit:
+     · green mark #2EB273 / deep #1A8A56 · ink #1A1F26
+     · Inter (text) + JetBrains Mono (codes) + Noto Kufi Arabic (RTL)
+   Each is a full pad: header + (blank body) + footer.
+   ═══════════════════════════════════════════════════════════════ */
+:root {
+  --lp-green: #2EB273;
+  --lp-green-deep: #1A8A56;
+  --lp-green-dark: #146B43;
+  --lp-ink: #1A1F26;
+  --lp-ink-soft: #3D4046;
+  --lp-muted: #6D7178;
+  --lp-faint: #9aa0a8;
+  --lp-line: #e6e8eb;
+  --lp-line-soft: #f0f1f3;
+  --lp-mg: 64px;            /* baseline content margin */
+}
+
+/* the sheet */
+.lp { width: 794px; height: 1123px; background: #fff; position: relative; overflow: hidden;
+  font-family: 'Inter', sans-serif; color: var(--lp-ink); display: flex; flex-direction: column;
+  -webkit-font-smoothing: antialiased; }
+.lp * { box-sizing: border-box; }
+.lp-mono { font-family: 'JetBrains Mono', monospace; }
+.lp-ar { font-family: 'Noto Kufi Arabic', 'Tahoma', sans-serif; }
+
+/* layering: decorative elements behind, content in front */
+.lp > * { position: relative; z-index: 1; }
+.lp > .lp-wm { position: absolute; z-index: 0; }
+
+/* faint corner watermark shared by all — subtle, never over content */
+.lp-wm { position: absolute; inset: 0; pointer-events: none; }
+.lp-wm img { position: absolute; right: -60px; bottom: 88px; width: 360px; filter: grayscale(1); opacity: .035; }
+
+/* the blank body area (where document content would flow) */
+.lp-body { flex: 1; position: relative; }
+.lp-bodyhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
+  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--lp-faint);
+  opacity: .45; white-space: nowrap; }
+
+.lp-logo { display: block; width: auto; }
+.lp-name-en { font-weight: 700; letter-spacing: -.01em; line-height: 1.12; }
+.lp-name-ar { font-weight: 600; line-height: 1.45; color: var(--lp-ink-soft); display: inline-block; }
+
+/* ───────────────────────────────────────────────────────────────
+   1 · LEFT SPINE — a full-height colour spine carries the brand
+   ─────────────────────────────────────────────────────────────── */
+.lp--spine { padding-left: 44px; }
+.lp--spine .sp-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 44px;
+  background: linear-gradient(180deg, var(--lp-green), var(--lp-green-deep)); z-index: 2; }
+.lp--spine .sp-rail .sp-mark { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); width: 22px; }
+.lp--spine .sp-rail span { position: absolute; bottom: 40px; left: 50%; transform: translate(-50%,0) rotate(180deg);
+  writing-mode: vertical-rl; color: rgba(255,255,255,.92); font-size: 8.5px; letter-spacing: .34em;
+  text-transform: uppercase; font-weight: 600; }
+.lp--spine .sp-head { display: flex; justify-content: space-between; align-items: flex-start;
+  padding: 70px 64px 0 40px; }
+.lp--spine .sp-logo { height: 38px; }
+.lp--spine .lp-name-en { font-size: 16px; }
+.lp--spine .lp-name-ar { font-size: 14px; margin-top: 3px; }
+.lp--spine .sp-head-r { text-align: right; padding-top: 2px; }
+.lp--spine .sp-tag { margin-top: 8px; font-size: 9px; color: var(--lp-green-deep); letter-spacing: .04em; }
+.lp--spine .sp-foot { padding: 0 64px 56px 40px; display: flex; justify-content: space-between;
+  align-items: flex-end; gap: 24px; }
+.lp--spine .sp-foot::before { content: ''; position: absolute; left: 40px; right: 64px; top: -22px;
+  height: 1px; background: var(--lp-line); }
+.lp--spine .sp-foot-l { font-size: 9px; color: var(--lp-muted); line-height: 1.85; }
+.lp--spine .sp-foot-r { font-size: 8.5px; color: var(--lp-faint); text-align: right; line-height: 1.85; letter-spacing: .03em; }
+
+/* ───────────────────────────────────────────────────────────────
+   2 · MONOGRAM CREST — centred, formal, double-rule divider
+   ─────────────────────────────────────────────────────────────── */
+.lp--crest { align-items: center; text-align: center; }
+.lp--crest .cr-head { padding: 78px 80px 0; display: flex; flex-direction: column; align-items: center;
+  gap: 16px; width: 100%; }
+.lp--crest .cr-mark { width: 52px; }
+.lp--crest .lp-name-en { font-size: 22px; letter-spacing: .015em; }
+.lp--crest .lp-name-ar { font-size: 16px; margin-top: -2px; }
+.lp--crest .cr-rule { display: flex; align-items: center; gap: 14px; width: 300px; margin-top: 6px; }
+.lp--crest .cr-rule::before, .lp--crest .cr-rule::after { content: ''; height: 1px; flex: 1; background: var(--lp-line); }
+.lp--crest .cr-rule span { font-size: 8px; letter-spacing: .3em; text-transform: uppercase;
+  color: var(--lp-green-deep); font-weight: 600; white-space: nowrap; }
+.lp--crest .cr-foot { width: 100%; padding: 0 80px 56px; display: flex; flex-direction: column;
+  align-items: center; gap: 12px; }
+.lp--crest .cr-foot-rule { width: 64px; height: 2px; background: var(--lp-green); }
+.lp--crest .cr-reg { display: flex; gap: 22px; font-size: 9px; color: var(--lp-muted); letter-spacing: .02em; }
+.lp--crest .cr-reg b { color: var(--lp-ink); font-weight: 600; }
+.lp--crest .cr-contact { font-size: 8.5px; color: var(--lp-faint); letter-spacing: .05em; }
+
+/* ───────────────────────────────────────────────────────────────
+   3 · COLOUR BLOCK — bold solid header, logo reversed white
+   ─────────────────────────────────────────────────────────────── */
+.lp--block .bl-head { background: linear-gradient(120deg, var(--lp-green-deep), var(--lp-green));
+  padding: 52px 64px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
+.lp--block .bl-mark { width: 46px; filter: brightness(0) invert(1); }
+.lp--block .bl-head-r { text-align: right; }
+.lp--block .lp-name-en { font-size: 20px; color: #fff; }
+.lp--block .lp-name-ar { font-size: 15px; color: rgba(255,255,255,.92); margin-top: 2px; }
+.lp--block .bl-tag { margin-top: 9px; font-size: 9px; color: rgba(255,255,255,.85);
+  letter-spacing: .1em; text-transform: uppercase; }
+.lp--block .bl-foot { padding: 0 64px 52px; }
+.lp--block .bl-foot-rule { height: 3px; width: 56px; background: var(--lp-green); margin-bottom: 16px; }
+.lp--block .bl-foot-row { display: flex; justify-content: space-between; align-items: baseline;
+  gap: 18px; font-size: 9px; color: var(--lp-muted); letter-spacing: .02em; }
+.lp--block .bl-foot-row b { color: var(--lp-ink); font-weight: 600; }
+
+/* ───────────────────────────────────────────────────────────────
+   4 · HAIRLINE MINIMAL — Swiss, one rule, lots of air
+   ─────────────────────────────────────────────────────────────── */
+.lp--min .mn-head { padding: 72px 64px 20px; display: flex; justify-content: space-between; align-items: flex-end; }
+.lp--min .mn-logo { width: 92px; }
+.lp--min .mn-head-r { text-align: right; }
+.lp--min .lp-name-en { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
+.lp--min .lp-name-ar { font-size: 12px; margin-top: 3px; font-weight: 500; }
+.lp--min .mn-rule { height: 1px; background: var(--lp-ink); margin: 0 64px; }
+.lp--min .mn-foot { padding: 18px 64px 56px; display: flex; justify-content: space-between; align-items: flex-end; }
+.lp--min .mn-foot-rule { height: 1px; background: var(--lp-line); margin: 0 64px 18px; }
+.lp--min .mn-foot-l, .lp--min .mn-foot-r { font-size: 8.5px; color: var(--lp-faint); letter-spacing: .07em; line-height: 1.9; }
+.lp--min .mn-foot-r { text-align: right; }
+.lp--min .mn-dot { color: var(--lp-green); }
+
+/* ───────────────────────────────────────────────────────────────
+   5 · CORNER ACCENT — geometric angled shape, modern
+   ─────────────────────────────────────────────────────────────── */
+.lp--corner .cn-shape { position: absolute; top: 0; right: 0; width: 260px; height: 188px; z-index: 0;
+  background: linear-gradient(135deg, var(--lp-green) 0%, var(--lp-green-deep) 100%);
+  clip-path: polygon(100% 0, 100% 100%, 0 0); }
+.lp--corner .cn-shape2 { position: absolute; top: 0; right: 0; width: 140px; height: 140px; z-index: 0;
+  background: rgba(255,255,255,.16); clip-path: polygon(100% 0, 100% 100%, 0 0); }
+.lp--corner .cn-head { padding: 76px 64px 0; }
+.lp--corner .cn-logo { width: 118px; margin-bottom: 18px; }
+.lp--corner .lp-name-en { font-size: 18px; }
+.lp--corner .lp-name-ar { font-size: 14px; margin-top: 2px; }
+.lp--corner .cn-tag { margin-top: 9px; font-size: 9px; color: var(--lp-green-deep); letter-spacing: .04em; }
+.lp--corner .cn-foot { padding: 0 64px 56px; display: flex; align-items: center; gap: 16px; }
+.lp--corner .cn-foot-bar { width: 32px; height: 32px; flex-shrink: 0; background: var(--lp-green);
+  clip-path: polygon(0 0, 100% 100%, 0 100%); }
+.lp--corner .cn-foot-txt { font-size: 9px; color: var(--lp-muted); line-height: 1.75; letter-spacing: .02em; }
+.lp--corner .cn-foot-txt b { color: var(--lp-ink); font-weight: 600; }
+
+/* ───────────────────────────────────────────────────────────────
+   6 · INDUSTRIAL MONO — technical, monospace, full footer band
+   ─────────────────────────────────────────────────────────────── */
+.lp--mono .mo-head { padding: 64px 64px 0; }
+.lp--mono .mo-top { display: flex; align-items: center; gap: 20px; }
+.lp--mono .mo-logo { width: 104px; }
+.lp--mono .mo-id { border-left: 2px solid var(--lp-green); padding-left: 18px; }
+.lp--mono .lp-name-en { font-size: 17px; }
+.lp--mono .lp-name-ar { font-size: 13px; margin-top: 2px; }
+.lp--mono .mo-meta { margin-top: 22px; display: flex; gap: 0; border: 1px solid var(--lp-line);
+  border-radius: 8px; overflow: hidden; }
+.lp--mono .mo-meta div { flex: 1; padding: 11px 16px; border-right: 1px solid var(--lp-line); }
+.lp--mono .mo-meta div:last-child { border-right: 0; }
+.lp--mono .mo-meta .k { font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-faint); }
+.lp--mono .mo-meta .v { font-size: 10px; color: var(--lp-ink); margin-top: 3px; }
+.lp--mono .mo-foot-band { background: var(--lp-ink); color: #fff; padding: 14px 64px;
+  display: flex; justify-content: space-between; align-items: center; gap: 18px; font-size: 8.5px;
+  letter-spacing: .06em; }
+.lp--mono .mo-foot-band .g { color: var(--lp-green); }
+.lp--mono .mo-foot-contact { padding: 11px 64px 0; font-size: 8.5px; color: var(--lp-faint);
+  text-align: center; letter-spacing: .06em; }
+.black-outlined-btn {
+  color: #1f2125 !important;
+}.companySelectionModal--Divider {
+  border-color: #d3d3d4;
+}
+.companySelectionModal--DialogTitle {
+  border-bottom: 1px solid #bdbebf;
+}
+.companySelectionModal--SectionTitle {
+  padding-left: 1.5rem;
+}
+.companySelectionModal--DialogContents {
+  padding: 1.5rem !important;
+}
+.companySelectionModal--DialogAction {
+  justify-content: flex-end !important;
+  padding: 0.5rem 1.5rem !important;
+  background-color: #d3d3d4;
+}
+.companySelectionModal--DialogAction--WhiteBtn {
+  background-color: #fff !important;
+  color: #1f2125;
+}.templates {
+  padding: 0rem 2rem;
+  width: 100%;
+}.editSectionModal--Divider {
+  border-color: #d3d3d4;
+}
+.editSectionModal--DialogTitle {
+  padding: 0.75rem 1.5rem !important;
+  border-bottom: 1px solid #bdbebf;
+}
+.editSectionModal--SectionTitle {
+  padding-left: 1.5rem;
+}
+.editSectionModal--DialogContents {
+  padding: 1.5rem !important;
+}
+.editSectionModal--DialogAction {
+  justify-content: flex-end !important;
+  padding: 0.5rem 1.5rem !important;
+  background-color: #d3d3d4;
+}
+.editSectionModal--DialogAction--WhiteBtn {
+  background-color: #fff !important;
+  color: #1f2125;
+}.pbtn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  height: 30px;
+  padding: 0 var(--s-5);
+  border-radius: var(--r-md);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-default);
+  background: var(--surface-raised);
+  white-space: nowrap;
+  transition: background var(--dur-fast), border-color var(--dur-fast);
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+
+.pbtn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.pbtn:hover {
+  background: var(--surface-hover);
+  color: var(--text-primary);
+}
+
+.pbtn--primary {
+  background: var(--color-action);
+  border-color: transparent;
+  color: var(--color-on-action);
+  box-shadow: var(--shadow-sm);
+}
+
+.pbtn--primary:hover {
+  background: var(--color-action-hover);
+  color: var(--color-on-action);
+}
+
+.pbtn--ghost {
+  border-color: transparent;
+  background: transparent;
+}
+
+.pbtn--ghost:hover {
+  background: var(--surface-hover);
+}
+
+.pbtn--sm {
+  height: 26px;
+  padding: 0 var(--s-4);
+  font-size: var(--text-xs);
+}
+
+.pbtn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.pb-seg {
+  display: inline-flex;
+  background: var(--surface-muted);
+  border-radius: var(--r-md);
+  padding: 2px;
+  gap: 2px;
+}
+
+.pb-seg button {
+  height: 24px;
+  padding: 0 var(--s-4);
+  border-radius: var(--r-sm);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--text-tertiary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+
+.pb-seg button svg {
+  width: 12px;
+  height: 12px;
+}
+
+.pb-seg button.is-active {
+  background: var(--surface-raised);
+  color: var(--text-primary);
+  box-shadow: var(--shadow-xs);
+  font-weight: 600;
+}
+
+.pb-seg button:not(.is-active):hover {
+  color: var(--text-secondary);
+}
+
+.pb-lens {
+  display: inline-flex;
+  background: rgba(20, 23, 27, 0.82);
+  backdrop-filter: blur(6px);
+  border-radius: var(--r-full);
+  padding: 3px;
+  box-shadow: var(--shadow-lg);
+  flex-shrink: 0;
+}
+
+.pb-lens button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  height: 28px;
+  padding: 0 var(--s-5);
+  border-radius: var(--r-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: #c4c7cb;
+  white-space: nowrap;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+
+.pb-lens button svg {
+  width: 13px;
+  height: 13px;
+}
+
+.pb-lens button.is-active {
+  background: #fff;
+  color: var(--n-900);
+}
+
+.pb-bar-stat {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  padding: 3px 9px;
+  border-radius: var(--r-full);
+  margin-left: var(--s-2);
+  white-space: nowrap;
+}
+
+.pb-bar-stat svg {
+  width: 12px;
+  height: 12px;
+}
+
+.pb-bar-stat.is-dirty {
+  color: var(--warning-fg-strong);
+  background: var(--warning-bg);
+}
+
+.pb-bar-dirty {
+  color: var(--warning);
+  display: grid;
+  place-items: center;
+}
+
+.pb-bar-dirty svg {
+  width: 12px;
+  height: 12px;
+}
+
+.cx-switch {
+  width: 34px;
+  height: 20px;
+  border-radius: var(--r-full);
+  background: var(--n-200);
+  position: relative;
+  transition: background var(--dur-base);
+  flex-shrink: 0;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0;
+}
+
+.cx-switch.is-on {
+  background: var(--brand-green);
+}
+
+.cx-switch-dot {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: var(--shadow-sm);
+  transition: transform var(--dur-base) var(--ease-out);
+}
+
+.cx-switch.is-on .cx-switch-dot {
+  transform: translateX(14px);
+}
+
+.st-sample-tg {
+  display: flex;
+  align-items: center;
+  gap: var(--s-3);
+  border-radius: var(--r-full);
+  padding-right: var(--s-4);
+  background: transparent;
+  border: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.st-docchips {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: var(--s-2);
+}
+
+.st-docchip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 28px;
+  padding: 0 11px;
+  border-radius: var(--r-full);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: var(--text-secondary);
+  background: var(--surface-muted);
+  border: 1px solid var(--border-subtle);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all var(--dur-fast);
+}
+
+.st-docchip svg {
+  width: 14px;
+  height: 14px;
+  color: inherit;
+}
+
+.st-docchip:hover {
+  background: var(--surface-sunken);
+  color: var(--text-primary);
+}
+
+.st-docchip.is-active {
+  background: var(--n-900);
+  color: #fff;
+  border-color: var(--n-900);
+}
+
+.st-docchip-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
 }.dashboard-heading {
   margin-bottom: 1.5rem;
 }