@erpsquad/common 1.11.7 → 1.11.8

package/dist/style.css

@@ -1298,6 +1298,63 @@
 }
 .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;
@@ -9766,11 +9823,32 @@ 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: #d3d3d4;
+  border-color: #eeeff1;
 }
 .companySelectionModal--DialogTitle {
-  border-bottom: 1px solid #bdbebf;
+  border-bottom: 1px solid #d3d3d4;
 }
 .companySelectionModal--SectionTitle {
   padding-left: 1.5rem;
@@ -9781,4643 +9859,36 @@ th .hbs-placeholder {
 .companySelectionModal--DialogAction {
   justify-content: flex-end !important;
   padding: 0.5rem 1.5rem !important;
-  background-color: #d3d3d4;
+  background-color: #eeeff1;
 }
 .companySelectionModal--DialogAction--WhiteBtn {
   background-color: #fff !important;
   color: #1f2125;
-}: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%;
-}
-
-body {
-  background: var(--surface-sunken);
-  overflow: hidden;
-}
-
-#root {
-  height: 100%;
-}
-
-.pb,
-.pb *,
-.pb *::before,
-.pb *::after {
-  box-sizing: border-box;
-}
-
-.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;
-}
-
-/* ── 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);
+}.black-outlined-btn {
+  color: #1f2125 !important;
+}.companySelectionModal--Divider {
+  border-color: #eeeff1;
 }
-
-.pb-rail-body {
-  flex: 1;
-  overflow: auto;
-  padding: var(--s-4);
-  scrollbar-width: thin;
+.companySelectionModal--DialogTitle {
+  border-bottom: 1px solid #d3d3d4;
 }
-
-/* 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);
+.companySelectionModal--SectionTitle {
+  padding-left: 1.5rem;
 }
-
-.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;
+.companySelectionModal--DialogContents {
+  padding: 1.5rem !important;
 }
-
-.pb-fgroup {
-  margin-bottom: var(--s-2);
+.companySelectionModal--DialogAction {
+  justify-content: flex-end !important;
+  padding: 0.5rem 1.5rem !important;
+  background-color: #eeeff1;
 }
-
-.pb-fgroup-h {
-  display: flex;
-  align-items: center;
-  gap: var(--s-3);
+.companySelectionModal--DialogAction--WhiteBtn {
+  background-color: #fff !important;
+  color: #1f2125;
+}.templates {
+  padding: 0rem 2rem;
   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;
 }