diff --git a/src/components/InvoicePreview.vue b/src/components/InvoicePreview.vue
index d729ba8..90dc8d8 100644
--- a/src/components/InvoicePreview.vue
+++ b/src/components/InvoicePreview.vue
@@ -21,703 +21,1554 @@ const sampleItems: InvoiceItem[] = [
   { description: 'Project Management', quantity: 12, rate: 100, amount: 1200 },
 ]
 
-const displayItems = computed(() =>
-  props.items.length > 0 ? props.items : sampleItems,
-)
-
-const config = computed(() => props.template)
-
-const clientName = computed(() => props.client?.name || 'N/A')
+const displayItems = computed(() => props.items.length > 0 ? props.items : sampleItems)
+const c = computed(() => props.template.colors)
+const clientName = computed(() => props.client?.name || 'Client Name')
 const clientEmail = computed(() => props.client?.email || '')
-const clientAddressLines = computed(() =>
-  props.client?.address ? props.client.address.split('\n') : [],
-)
-
+const clientCompany = computed(() => props.client?.company || '')
+const clientAddress = computed(() => props.client?.address || '')
+const clientAddressLines = computed(() => props.client?.address ? props.client.address.split('\n') : [])
 const biz = computed(() => props.businessInfo)
-const bizAddressLines = computed(() =>
-  biz.value?.address ? biz.value.address.split('\n') : [],
-)
+const bizAddressLines = computed(() => biz.value?.address ? biz.value.address.split('\n') : [])
 
-const numberFont = computed(() =>
-  config.value.typography.numberStyle === 'monospace-feel'
-    ? "'Courier New', Courier, monospace"
-    : 'inherit',
-)
-
-const sideOffset = computed(() =>
-  config.value.layout.headerStyle === 'sidebar'
-    ? `${config.value.decorative.sidebarWidth + 6}%`
-    : '0px',
-)
-
-// Divider style helper
-const dividerBorder = computed(() => {
-  if (!config.value.layout.showDividers || config.value.layout.dividerStyle === 'none') return 'none'
-  switch (config.value.layout.dividerStyle) {
-    case 'thin': return `1px solid ${config.value.colors.tableBorder}`
-    case 'double': return `3px double ${config.value.colors.tableBorder}`
-    case 'thick': return `2px solid ${config.value.colors.primary}`
-    default: return 'none'
-  }
-})
-
-const showDivider = computed(() =>
-  config.value.layout.showDividers && config.value.layout.dividerStyle !== 'none',
-)
-
-// Logo position style
-const logoContainerStyle = computed(() => {
-  const pos = config.value.layout.logoPosition
-  const base: Record<string, string> = { marginBottom: '2%' }
-  if (pos === 'top-center') base.textAlign = 'center'
-  else if (pos === 'top-right') base.textAlign = 'right'
-  else base.textAlign = 'left'
-  return base
-})
+void clientAddress
 </script>
 
 <template>
-  <!-- Outer A4 container -->
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 1: CLEAN                                                -->
+  <!-- ================================================================ -->
   <div
+    v-if="template.id === 'clean'"
     :style="{
-      backgroundColor: config.colors.background,
-      color: config.colors.bodyText,
-      fontFamily: '\'Helvetica Neue\', Helvetica, Arial, sans-serif',
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
       position: 'relative',
-      aspectRatio: '8.5 / 11',
+      aspectRatio: '210 / 297',
       width: '100%',
       overflow: 'hidden',
-      borderRadius: '4px',
-      boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
     }"
   >
-    <!-- Background tint -->
-    <div
-      v-if="config.decorative.backgroundTint && config.decorative.backgroundTintColor"
-      :style="{
-        position: 'absolute',
-        inset: '0',
-        backgroundColor: config.decorative.backgroundTintColor,
-        pointerEvents: 'none',
-      }"
-    />
-
-    <!-- Decorative: Sidebar -->
-    <div
-      v-if="config.decorative.sidebarWidth > 0"
-      :style="{
-        position: 'absolute',
-        top: '0',
-        left: '0',
-        bottom: '0',
-        width: config.decorative.sidebarWidth + '%',
-        backgroundColor: config.decorative.sidebarColor,
-        pointerEvents: 'none',
-      }"
-    />
-
-    <!-- Decorative: Corner block -->
-    <div
-      v-if="config.decorative.cornerShape === 'colored-block'"
-      :style="{
-        position: 'absolute',
-        top: '0',
-        left: '0',
-        width: '28%',
-        height: '20%',
-        backgroundColor: config.colors.primary,
-        pointerEvents: 'none',
-      }"
-    />
-
-    <!-- Decorative: Triangle (SVG in top-right) -->
-    <svg
-      v-if="config.decorative.cornerShape === 'triangle'"
-      :style="{
-        position: 'absolute',
-        top: '0',
-        right: '0',
-        width: '28%',
-        height: '28%',
-        pointerEvents: 'none',
-      }"
-      viewBox="0 0 100 100"
-      preserveAspectRatio="none"
-    >
-      <polygon points="100,0 100,100 0,0" :fill="config.colors.primary" />
-    </svg>
-
-    <!-- Decorative: Diagonal -->
-    <svg
-      v-if="config.decorative.cornerShape === 'diagonal'"
-      :style="{
-        position: 'absolute',
-        top: '0',
-        left: '0',
-        width: '100%',
-        height: '20%',
-        pointerEvents: 'none',
-      }"
-      viewBox="0 0 210 60"
-      preserveAspectRatio="none"
-    >
-      <polygon points="0,0 210,0 0,60" :fill="config.colors.primary" />
-    </svg>
-
-    <!-- Content area with padding -->
-    <div
-      :style="{
-        position: 'relative',
-        zIndex: 1,
-        padding: '5%',
-        fontSize: config.typography.bodySize * 0.85 + 'px',
-        lineHeight: '1.4',
-        height: '100%',
-        boxSizing: 'border-box',
-        overflow: 'hidden',
-      }"
-    >
-      <!-- ===== HEADER: MINIMAL ===== -->
-      <template v-if="config.layout.headerStyle === 'minimal'">
-        <!-- Logo -->
-        <div v-if="biz?.logo" :style="logoContainerStyle">
-          <img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
+    <div :style="{ padding: '6%' }">
+      <!-- Logo + Biz Name -->
+      <div :style="{ marginBottom: '10px' }">
+        <img
+          v-if="biz?.logo"
+          :src="biz.logo"
+          :style="{ width: '28px', height: '28px', objectFit: 'contain', marginBottom: '4px', display: 'block' }"
+        />
+        <div :style="{ fontSize: '13px', fontWeight: '600', color: c.headerText }">
+          {{ biz?.name || 'Your Business' }}
         </div>
+      </div>
 
-        <!-- Business info -->
-        <div v-if="biz?.name" :style="{ marginBottom: '2%' }">
-          <div :style="{ fontWeight: 'bold', fontSize: config.typography.headerSize * 0.85 + 'px', color: config.colors.headerText }">
-            {{ biz.name }}
-          </div>
-          <div v-for="(line, i) in bizAddressLines" :key="'ba' + i" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ line }}</div>
-          <div v-if="biz.email" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.email }}</div>
-          <div v-if="biz.phone" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.phone }}</div>
-        </div>
-
-        <!-- Title -->
-        <div :style="{
-          fontWeight: config.typography.titleWeight,
-          fontSize: config.typography.titleSize * 0.85 + 'px',
-          color: config.colors.primary,
-          marginBottom: '1%',
-        }">
+      <!-- INVOICE title + accent line -->
+      <div :style="{ marginBottom: '14px' }">
+        <div :style="{ fontSize: '20px', fontWeight: '700', color: '#64748b', letterSpacing: '0.02em' }">
           INVOICE
         </div>
+        <div :style="{ width: '30%', height: '1px', backgroundColor: c.secondary, marginTop: '4px' }" />
+      </div>
 
-        <!-- Accent line -->
-        <div :style="{ width: '15%', height: '2px', backgroundColor: config.colors.primary, marginBottom: '3%' }" />
-
-        <!-- Details + Bill To -->
-        <div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '3%' }">
-          <div>
-            <div>Invoice #: {{ invoice.invoice_number }}</div>
-            <div>Date: {{ formatDate(invoice.date) }}</div>
-            <div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
-            <div>Status: {{ invoice.status }}</div>
-          </div>
-          <div :style="{ textAlign: 'right' }">
-            <div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
-            <div>{{ clientName }}</div>
-            <div v-if="clientEmail">{{ clientEmail }}</div>
-            <div v-for="(line, i) in clientAddressLines" :key="'ca' + i">{{ line }}</div>
-          </div>
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.secondary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'bf'+i">{{ line }}</div>
+          <div v-if="biz?.email">{{ biz.email }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
         </div>
-
-        <!-- Divider -->
-        <div v-if="showDivider" :style="{ borderBottom: dividerBorder, marginBottom: '3%' }" />
-      </template>
-
-      <!-- ===== HEADER: FULL-WIDTH ===== -->
-      <template v-if="config.layout.headerStyle === 'full-width'">
-        <!-- Full-width banner (negative margins to fill) -->
-        <div :style="{
-          margin: '-5% -5% 0 -5%',
-          padding: '4% 5%',
-          backgroundColor: config.colors.headerBg,
-          color: config.colors.headerText,
-          marginBottom: '3%',
-        }">
-          <!-- Logo inside banner -->
-          <div v-if="biz?.logo" :style="logoContainerStyle">
-            <img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
-          </div>
-
-          <div :style="{ display: 'flex', justifyContent: 'space-between' }">
-            <div>
-              <div :style="{
-                fontWeight: config.typography.titleWeight,
-                fontSize: config.typography.titleSize * 0.85 + 'px',
-                marginBottom: '2%',
-              }">
-                INVOICE
-              </div>
-              <div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">
-                <div>#{{ invoice.invoice_number }}</div>
-                <div>Date: {{ formatDate(invoice.date) }}</div>
-                <div v-if="invoice.due_date">Due: {{ formatDate(invoice.due_date) }}</div>
-                <div>Status: {{ invoice.status }}</div>
-              </div>
-            </div>
-            <div v-if="biz?.name && config.layout.logoPosition !== 'top-right'" :style="{ textAlign: 'right', fontSize: config.typography.bodySize * 0.8 + 'px' }">
-              <div :style="{ fontWeight: 'bold', fontSize: config.typography.bodySize * 0.9 + 'px' }">{{ biz.name }}</div>
-              <div v-if="biz.email">{{ biz.email }}</div>
-              <div v-if="biz.phone">{{ biz.phone }}</div>
-              <div v-for="(line, i) in bizAddressLines" :key="'fba' + i">{{ line }}</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Bill To below banner -->
-        <div :style="{ marginBottom: '3%' }">
-          <div :style="{ fontWeight: 'bold', marginBottom: '2px', color: config.colors.bodyText }">Bill To:</div>
-          <div :style="{ color: config.colors.bodyText }">
-            <div>{{ clientName }}</div>
-            <div v-if="clientEmail">{{ clientEmail }}</div>
-            <div v-for="(line, i) in clientAddressLines" :key="'fca' + i">{{ line }}</div>
-          </div>
-        </div>
-      </template>
-
-      <!-- ===== HEADER: SPLIT ===== -->
-      <template v-if="config.layout.headerStyle === 'split'">
-        <div :style="{
-          display: 'flex',
-          margin: '-5% -5% 0 -5%',
-          marginBottom: '3%',
-        }">
-          <!-- Left half: colored -->
-          <div :style="{
-            width: '50%',
-            backgroundColor: config.colors.headerBg,
-            color: config.colors.headerText,
-            padding: '4% 5%',
-          }">
-            <div :style="{
-              fontWeight: config.typography.titleWeight,
-              fontSize: config.typography.titleSize * 0.85 + 'px',
-              marginBottom: '3%',
-            }">
-              INVOICE
-            </div>
-            <div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">
-              <div v-if="biz?.name" :style="{ fontWeight: 'bold' }">{{ biz.name }}</div>
-              <div v-if="biz?.email">{{ biz.email }}</div>
-              <div v-if="biz?.phone">{{ biz.phone }}</div>
-              <div v-for="(line, i) in bizAddressLines" :key="'sba' + i">{{ line }}</div>
-            </div>
-            <!-- Logo in left half -->
-            <div v-if="biz?.logo" :style="{ marginTop: '3%' }">
-              <img :src="biz.logo" :style="{ maxHeight: '14%', maxWidth: '40%', objectFit: 'contain' }" />
-            </div>
-          </div>
-          <!-- Right half: light -->
-          <div :style="{
-            width: '50%',
-            padding: '4% 5%',
-            color: config.colors.bodyText,
-          }">
-            <div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">
-              <div>Invoice #: {{ invoice.invoice_number }}</div>
-              <div>Date: {{ formatDate(invoice.date) }}</div>
-              <div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
-              <div>Status: {{ invoice.status }}</div>
-            </div>
-          </div>
-        </div>
-
-        <!-- Bill To below split -->
-        <div :style="{ marginBottom: '3%' }">
-          <div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
-          <div>{{ clientName }}</div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.secondary, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'ct'+i">{{ line }}</div>
           <div v-if="clientEmail">{{ clientEmail }}</div>
-          <div v-for="(line, i) in clientAddressLines" :key="'sca' + i">{{ line }}</div>
         </div>
-      </template>
+      </div>
 
-      <!-- ===== HEADER: SIDEBAR ===== -->
-      <template v-if="config.layout.headerStyle === 'sidebar'">
-        <div :style="{ paddingLeft: sideOffset }">
-          <!-- Logo -->
-          <div v-if="biz?.logo" :style="logoContainerStyle">
-            <img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
+      <!-- Invoice meta -->
+      <div :style="{ display: 'flex', gap: '12px', marginBottom: '14px', fontSize: '7.5px' }">
+        <div><span :style="{ fontWeight: '600' }">Invoice #:</span> {{ invoice.invoice_number }}</div>
+        <div><span :style="{ fontWeight: '600' }">Date:</span> {{ formatDate(invoice.date) }}</div>
+        <div v-if="invoice.due_date"><span :style="{ fontWeight: '600' }">Due:</span> {{ formatDate(invoice.due_date) }}</div>
+      </div>
+
+      <!-- Table -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ borderBottom: '1px solid ' + c.tableBorder }">
+            <td :style="{ padding: '4px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
           </div>
-
-          <!-- Business info -->
-          <div v-if="biz?.name" :style="{ marginBottom: '2%' }">
-            <div :style="{ fontWeight: 'bold', fontSize: config.typography.headerSize * 0.85 + 'px', color: config.colors.headerText }">
-              {{ biz.name }}
-            </div>
-            <div v-for="(line, i) in bizAddressLines" :key="'sbba' + i" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ line }}</div>
-            <div v-if="biz?.email" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.email }}</div>
-            <div v-if="biz?.phone" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.phone }}</div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
           </div>
-
-          <!-- Title -->
-          <div :style="{
-            fontWeight: config.typography.titleWeight,
-            fontSize: config.typography.titleSize * 0.85 + 'px',
-            color: config.colors.primary,
-            marginBottom: '1%',
-          }">
-            INVOICE
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
           </div>
-
-          <!-- Details + Bill To -->
-          <div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '3%' }">
-            <div>
-              <div>Invoice #: {{ invoice.invoice_number }}</div>
-              <div>Date: {{ formatDate(invoice.date) }}</div>
-              <div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
-              <div>Status: {{ invoice.status }}</div>
-            </div>
-            <div :style="{ textAlign: 'right' }">
-              <div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
-              <div>{{ clientName }}</div>
-              <div v-if="clientEmail">{{ clientEmail }}</div>
-              <div v-for="(line, i) in clientAddressLines" :key="'sbca' + i">{{ line }}</div>
-            </div>
-          </div>
-
-          <!-- Divider -->
-          <div v-if="showDivider" :style="{ borderBottom: dividerBorder, marginBottom: '3%' }" />
-        </div>
-      </template>
-
-      <!-- ===== HEADER: GRADIENT ===== -->
-      <template v-if="config.layout.headerStyle === 'gradient'">
-        <div :style="{
-          margin: '-5% -5% 0 -5%',
-          padding: '4% 5%',
-          background: `linear-gradient(to right, ${config.decorative.gradientFrom || config.colors.headerBg}, ${config.decorative.gradientTo || config.colors.primary})`,
-          color: config.colors.headerText,
-          marginBottom: '3%',
-        }">
-          <!-- Logo inside gradient -->
-          <div v-if="biz?.logo" :style="logoContainerStyle">
-            <img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
-          </div>
-
-          <div :style="{ display: 'flex', justifyContent: 'space-between' }">
-            <div>
-              <div :style="{
-                fontWeight: config.typography.titleWeight,
-                fontSize: config.typography.titleSize * 0.85 + 'px',
-                marginBottom: '2%',
-              }">
-                INVOICE
-              </div>
-              <div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">
-                <div>#{{ invoice.invoice_number }}</div>
-                <div>Date: {{ formatDate(invoice.date) }}</div>
-                <div v-if="invoice.due_date">Due: {{ formatDate(invoice.due_date) }}</div>
-                <div>Status: {{ invoice.status }}</div>
-              </div>
-            </div>
-            <div v-if="biz?.name && config.layout.logoPosition !== 'top-right'" :style="{ textAlign: 'right', fontSize: config.typography.bodySize * 0.8 + 'px' }">
-              <div :style="{ fontWeight: 'bold', fontSize: config.typography.bodySize * 0.9 + 'px' }">{{ biz.name }}</div>
-              <div v-if="biz.email">{{ biz.email }}</div>
-              <div v-if="biz.phone">{{ biz.phone }}</div>
-            </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '1px solid ' + c.tableBorder, marginTop: '4px', fontSize: '12px', fontWeight: '700', color: c.secondary }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
           </div>
         </div>
+      </div>
 
-        <!-- Bill To below gradient -->
-        <div :style="{ marginBottom: '3%', color: config.colors.bodyText }">
-          <div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
-          <div>{{ clientName }}</div>
-          <div v-if="clientEmail">{{ clientEmail }}</div>
-          <div v-for="(line, i) in clientAddressLines" :key="'gca' + i">{{ line }}</div>
-        </div>
-      </template>
-
-      <!-- ===== HEADER: GEOMETRIC ===== -->
-      <template v-if="config.layout.headerStyle === 'geometric'">
-        <!-- Logo (top-left to avoid triangle) -->
-        <div v-if="biz?.logo" :style="logoContainerStyle">
-          <img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
-        </div>
-
-        <!-- Business info -->
-        <div v-if="biz?.name" :style="{ marginBottom: '2%', maxWidth: '60%' }">
-          <div :style="{ fontWeight: 'bold', fontSize: config.typography.headerSize * 0.85 + 'px', color: config.colors.headerText }">
-            {{ biz.name }}
-          </div>
-          <div v-if="biz.email" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.email }}</div>
-          <div v-if="biz.phone" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.phone }}</div>
-        </div>
-
-        <!-- Title -->
-        <div :style="{
-          fontWeight: config.typography.titleWeight,
-          fontSize: config.typography.titleSize * 0.85 + 'px',
-          color: config.colors.primary,
-          marginBottom: '1%',
-        }">
-          INVOICE
-        </div>
-
-        <!-- Details + Bill To -->
-        <div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '3%' }">
-          <div>
-            <div>Invoice #: {{ invoice.invoice_number }}</div>
-            <div>Date: {{ formatDate(invoice.date) }}</div>
-            <div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
-            <div>Status: {{ invoice.status }}</div>
-          </div>
-          <div :style="{ textAlign: 'right' }">
-            <div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
-            <div>{{ clientName }}</div>
-            <div v-if="clientEmail">{{ clientEmail }}</div>
-            <div v-for="(line, i) in clientAddressLines" :key="'geca' + i">{{ line }}</div>
-          </div>
-        </div>
-
-        <!-- Divider -->
-        <div v-if="showDivider" :style="{ borderBottom: dividerBorder, marginBottom: '3%' }" />
-      </template>
-
-      <!-- ===== HEADER: CENTERED ===== -->
-      <template v-if="config.layout.headerStyle === 'centered'">
-        <!-- Logo centered -->
-        <div v-if="biz?.logo" :style="{ textAlign: 'center', marginBottom: '2%' }">
-          <img :src="biz.logo" :style="{ maxHeight: '5%', maxWidth: '20%', objectFit: 'contain' }" />
-        </div>
-
-        <!-- Top divider line -->
-        <div :style="{ borderBottom: '1px solid ' + config.colors.tableBorder, marginBottom: '2%' }" />
-
-        <!-- Title centered -->
-        <div :style="{
-          textAlign: 'center',
-          fontWeight: config.typography.titleWeight,
-          fontSize: config.typography.titleSize * 0.85 + 'px',
-          color: config.colors.primary,
-          marginBottom: '1%',
-        }">
-          INVOICE
-        </div>
-
-        <!-- Business name centered -->
-        <div v-if="biz?.name" :style="{ textAlign: 'center', marginBottom: '2%' }">
-          <div :style="{ fontSize: config.typography.headerSize * 0.85 + 'px', color: config.colors.headerText }">
-            {{ biz.name }}
-          </div>
-          <div v-for="(line, i) in bizAddressLines" :key="'cba' + i" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ line }}</div>
-          <div v-if="biz.email" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.email }}</div>
-          <div v-if="biz.phone" :style="{ fontSize: config.typography.bodySize * 0.8 + 'px' }">{{ biz.phone }}</div>
-        </div>
-
-        <!-- Bottom divider line -->
-        <div :style="{ borderBottom: '1px solid ' + config.colors.tableBorder, marginBottom: '2%' }" />
-
-        <!-- Details + Bill To side by side -->
-        <div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '3%' }">
-          <div>
-            <div>Invoice #: {{ invoice.invoice_number }}</div>
-            <div>Date: {{ formatDate(invoice.date) }}</div>
-            <div v-if="invoice.due_date">Due Date: {{ formatDate(invoice.due_date) }}</div>
-            <div>Status: {{ invoice.status }}</div>
-          </div>
-          <div :style="{ textAlign: 'right' }">
-            <div :style="{ fontWeight: 'bold', marginBottom: '2px' }">Bill To:</div>
-            <div>{{ clientName }}</div>
-            <div v-if="clientEmail">{{ clientEmail }}</div>
-            <div v-for="(line, i) in clientAddressLines" :key="'cca' + i">{{ line }}</div>
-          </div>
-        </div>
-
-        <!-- Divider -->
-        <div v-if="showDivider" :style="{ borderBottom: dividerBorder, marginBottom: '3%' }" />
-      </template>
-
-      <!-- ===== TABLE ===== -->
-      <div :style="{ paddingLeft: config.layout.headerStyle === 'sidebar' ? sideOffset : '0' }">
-        <table
-          :style="{
-            width: '100%',
-            borderCollapse: 'collapse',
-            fontSize: config.typography.bodySize * 0.85 + 'px',
-            marginBottom: '4%',
-          }"
-        >
-          <thead>
-            <tr
-              :style="{
-                backgroundColor: config.colors.tableHeaderBg,
-                color: config.colors.tableHeaderText,
-              }"
-            >
-              <th
-                :style="{
-                  textAlign: 'left',
-                  padding: '1.5% 2%',
-                  fontWeight: 'bold',
-                  width: '50%',
-                  ...(config.layout.tableStyle === 'bordered'
-                    ? { border: '1px solid ' + config.colors.tableBorder }
-                    : {}),
-                }"
-              >
-                Description
-              </th>
-              <th
-                :style="{
-                  textAlign: 'left',
-                  padding: '1.5% 2%',
-                  fontWeight: 'bold',
-                  width: '15%',
-                  fontFamily: numberFont,
-                  ...(config.layout.tableStyle === 'bordered'
-                    ? { border: '1px solid ' + config.colors.tableBorder }
-                    : {}),
-                }"
-              >
-                Qty
-              </th>
-              <th
-                :style="{
-                  textAlign: 'left',
-                  padding: '1.5% 2%',
-                  fontWeight: 'bold',
-                  width: '17.5%',
-                  fontFamily: numberFont,
-                  ...(config.layout.tableStyle === 'bordered'
-                    ? { border: '1px solid ' + config.colors.tableBorder }
-                    : {}),
-                }"
-              >
-                Rate
-              </th>
-              <th
-                :style="{
-                  textAlign: 'left',
-                  padding: '1.5% 2%',
-                  fontWeight: 'bold',
-                  width: '17.5%',
-                  fontFamily: numberFont,
-                  ...(config.layout.tableStyle === 'bordered'
-                    ? { border: '1px solid ' + config.colors.tableBorder }
-                    : {}),
-                }"
-              >
-                Amount
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(item, idx) in displayItems"
-              :key="idx"
-              :style="{
-                backgroundColor:
-                  config.layout.tableStyle === 'striped' && idx % 2 === 1
-                    ? config.colors.tableRowAlt
-                    : config.layout.tableStyle === 'colored-sections'
-                      ? idx % 2 === 1 ? config.colors.tableRowAlt : config.colors.background
-                      : 'transparent',
-                borderBottom:
-                  config.layout.tableStyle === 'minimal-lines'
-                    ? '1px solid ' + config.colors.tableBorder
-                    : 'none',
-              }"
-            >
-              <td
-                :style="{
-                  padding: '1.5% 2%',
-                  ...(config.layout.tableStyle === 'bordered'
-                    ? { border: '1px solid ' + config.colors.tableBorder }
-                    : {}),
-                }"
-              >
-                {{ item.description }}
-              </td>
-              <td
-                :style="{
-                  padding: '1.5% 2%',
-                  fontFamily: numberFont,
-                  ...(config.layout.tableStyle === 'bordered'
-                    ? { border: '1px solid ' + config.colors.tableBorder }
-                    : {}),
-                }"
-              >
-                {{ item.quantity }}
-              </td>
-              <td
-                :style="{
-                  padding: '1.5% 2%',
-                  fontFamily: numberFont,
-                  ...(config.layout.tableStyle === 'bordered'
-                    ? { border: '1px solid ' + config.colors.tableBorder }
-                    : {}),
-                }"
-              >
-                {{ formatCurrency(item.rate) }}
-              </td>
-              <td
-                :style="{
-                  padding: '1.5% 2%',
-                  fontFamily: numberFont,
-                  ...(config.layout.tableStyle === 'bordered'
-                    ? { border: '1px solid ' + config.colors.tableBorder }
-                    : {}),
-                }"
-              >
-                {{ formatCurrency(item.amount) }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-
-        <!-- ===== TOTALS ===== -->
-        <div
-          :style="{
-            display: 'flex',
-            justifyContent: config.layout.totalsPosition === 'center' ? 'center' : 'flex-end',
-            marginBottom: '4%',
-          }"
-        >
-          <div :style="{ width: '40%', fontSize: config.typography.bodySize * 0.9 + 'px' }">
-            <!-- Subtotal -->
-            <div :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '1%' }">
-              <span>Subtotal:</span>
-              <span :style="{ fontFamily: numberFont }">{{ formatCurrency(invoice.subtotal) }}</span>
-            </div>
-
-            <!-- Tax -->
-            <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '1%' }">
-              <span>Tax ({{ invoice.tax_rate }}%):</span>
-              <span :style="{ fontFamily: numberFont }">{{ formatCurrency(invoice.tax_amount) }}</span>
-            </div>
-
-            <!-- Discount -->
-            <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', marginBottom: '1%' }">
-              <span>Discount:</span>
-              <span :style="{ fontFamily: numberFont }">-{{ formatCurrency(invoice.discount) }}</span>
-            </div>
-
-            <!-- Separator -->
-            <div :style="{ borderBottom: '1px solid ' + config.colors.tableBorder, margin: '2% 0' }" />
-
-            <!-- Total -->
-            <div :style="{
-              display: 'flex',
-              justifyContent: 'space-between',
-              fontWeight: 'bold',
-              fontSize: config.typography.bodySize * 1.1 + 'px',
-              color: config.colors.totalHighlight,
-            }">
-              <span>Total:</span>
-              <span :style="{ fontFamily: numberFont }">{{ formatCurrency(invoice.total) }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- ===== NOTES ===== -->
-        <div v-if="invoice.notes" :style="{ borderTop: '1px solid ' + config.colors.tableBorder, paddingTop: '2%' }">
-          <div :style="{ fontWeight: 'bold', marginBottom: '1%' }">Notes:</div>
-          <div :style="{ fontSize: config.typography.bodySize * 0.8 + 'px', whiteSpace: 'pre-wrap' }">{{ invoice.notes }}</div>
-        </div>
+      <!-- Notes -->
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
       </div>
     </div>
   </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 2: PROFESSIONAL                                         -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'professional'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <!-- Navy header band -->
+    <div :style="{ backgroundColor: c.headerBg, color: c.headerText, padding: '5% 6% 4%', minHeight: '17%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
+      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }">
+        <div>
+          <div :style="{ fontSize: '22px', fontWeight: '700', lineHeight: '1.2' }">INVOICE</div>
+          <div :style="{ fontSize: '7.5px', marginTop: '4px', opacity: 0.8 }">
+            #{{ invoice.invoice_number }} &middot; {{ formatDate(invoice.date) }}
+            <span v-if="invoice.due_date"> &middot; Due {{ formatDate(invoice.due_date) }}</span>
+          </div>
+        </div>
+        <div :style="{ textAlign: 'right' }">
+          <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '24px', height: '24px', objectFit: 'contain', marginBottom: '2px', marginLeft: 'auto', display: 'block' }" />
+          <div :style="{ fontSize: '12px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div :style="{ padding: '4% 6%' }">
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.headerBg, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'pf'+i">{{ line }}</div>
+          <div v-if="biz?.email">{{ biz.email }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.headerBg, marginBottom: '3px' }">Bill To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'pt'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ backgroundColor: i % 2 === 1 ? c.tableRowAlt : 'transparent' }">
+            <td :style="{ padding: '4px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '2px solid ' + c.headerBg, marginTop: '4px', fontSize: '13px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 3: BOLD                                                 -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'bold'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <!-- Top section: indigo block + biz info -->
+    <div :style="{ display: 'flex', minHeight: '17%' }">
+      <!-- Large indigo rectangle -->
+      <div :style="{ width: '55%', backgroundColor: c.headerBg, color: c.headerText, padding: '5% 5%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
+        <div :style="{ fontSize: '24px', fontWeight: '800', lineHeight: '1.1' }">INVOICE</div>
+        <div :style="{ fontSize: '8px', marginTop: '4px', opacity: 0.85 }">#{{ invoice.invoice_number }}</div>
+      </div>
+      <!-- Biz info outside the block -->
+      <div :style="{ flex: 1, padding: '5% 5%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
+        <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '22px', height: '22px', objectFit: 'contain', marginBottom: '3px' }" />
+        <div :style="{ fontSize: '9px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+        <div v-for="(line, i) in bizAddressLines" :key="'blf'+i" :style="{ fontSize: '7px' }">{{ line }}</div>
+        <div v-if="biz?.email" :style="{ fontSize: '7px' }">{{ biz.email }}</div>
+      </div>
+    </div>
+
+    <div :style="{ padding: '4% 5%' }">
+      <!-- Dates -->
+      <div :style="{ display: 'flex', gap: '12px', marginBottom: '10px', fontSize: '7.5px' }">
+        <div><span :style="{ fontWeight: '600' }">Date:</span> {{ formatDate(invoice.date) }}</div>
+        <div v-if="invoice.due_date"><span :style="{ fontWeight: '600' }">Due:</span> {{ formatDate(invoice.due_date) }}</div>
+      </div>
+
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'blf2'+i">{{ line }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'blt'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ lineHeight: '2' }">
+            <td :style="{ padding: '3px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '3px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '3px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '3px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', marginTop: '4px', fontSize: '16px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 4: MINIMAL                                              -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'minimal'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <div :style="{ padding: '6%' }">
+      <!-- Centered header -->
+      <div :style="{ textAlign: 'center', marginBottom: '10px' }">
+        <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '26px', height: '26px', objectFit: 'contain', margin: '0 auto 6px', display: 'block' }" />
+        <div :style="{ height: '1px', backgroundColor: '#e4e4e7', marginBottom: '8px' }" />
+        <div :style="{ fontSize: '20px', fontWeight: '700', color: '#18181b', letterSpacing: '0.04em' }">INVOICE</div>
+        <div :style="{ fontSize: '9px', fontWeight: '600', color: '#18181b', marginTop: '2px' }">{{ biz?.name || 'Your Business' }}</div>
+        <div :style="{ height: '1px', backgroundColor: '#e4e4e7', marginTop: '8px' }" />
+      </div>
+
+      <!-- Invoice meta centered -->
+      <div :style="{ textAlign: 'center', marginBottom: '12px', fontSize: '7.5px', color: '#3f3f46' }">
+        #{{ invoice.invoice_number }} &middot; {{ formatDate(invoice.date) }}
+        <span v-if="invoice.due_date"> &middot; Due {{ formatDate(invoice.due_date) }}</span>
+      </div>
+
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#18181b', marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600', color: '#18181b' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'mf'+i">{{ line }}</div>
+          <div v-if="biz?.email">{{ biz.email }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: '#18181b', marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600', color: '#18181b' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'mt'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: NO backgrounds, whitespace-only separation -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr>
+            <th :style="{ textAlign: 'left', padding: '6px 4px', fontSize: '7px', fontWeight: '700', textTransform: 'uppercase', color: '#18181b', letterSpacing: '0.03em' }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '6px 4px', fontSize: '7px', fontWeight: '700', textTransform: 'uppercase', color: '#18181b', width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '6px 4px', fontSize: '7px', fontWeight: '700', textTransform: 'uppercase', color: '#18181b', width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '6px 4px', fontSize: '7px', fontWeight: '700', textTransform: 'uppercase', color: '#18181b', width: '58px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i">
+            <td :style="{ padding: '6px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '6px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '6px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '6px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals centered -->
+      <div :style="{ textAlign: 'center' }">
+        <div :style="{ display: 'inline-block', textAlign: 'right' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', gap: '16px', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', gap: '16px', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', gap: '16px', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', gap: '16px', padding: '4px 0', marginTop: '4px', fontSize: '13px', fontWeight: '700', color: '#18181b' }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: '#3f3f46', opacity: 0.7, textAlign: 'center' }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 5: CLASSIC                                              -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'classic'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <div :style="{ padding: '6%' }">
+      <!-- Traditional two-column header -->
+      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '6px' }">
+        <div>
+          <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '24px', height: '24px', objectFit: 'contain', marginBottom: '3px' }" />
+          <div :style="{ fontSize: '11px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'clf'+i">{{ line }}</div>
+          <div v-if="biz?.email">{{ biz.email }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ textAlign: 'right' }">
+          <div :style="{ fontSize: '20px', fontWeight: '700', color: c.primary }">INVOICE</div>
+          <div :style="{ fontSize: '8px', marginTop: '2px' }"><span :style="{ fontWeight: '600' }">#</span>{{ invoice.invoice_number }}</div>
+          <div :style="{ fontSize: '7.5px', marginTop: '1px' }">{{ formatDate(invoice.date) }}</div>
+          <div v-if="invoice.due_date" :style="{ fontSize: '7.5px' }">Due: {{ formatDate(invoice.due_date) }}</div>
+        </div>
+      </div>
+
+      <!-- Burgundy rule -->
+      <div :style="{ height: '2px', backgroundColor: c.primary, marginBottom: '12px' }" />
+
+      <!-- Bill To -->
+      <div :style="{ marginBottom: '14px' }">
+        <div :style="{ fontSize: '9px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">Bill To</div>
+        <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+        <div v-if="clientCompany">{{ clientCompany }}</div>
+        <div v-for="(line, i) in clientAddressLines" :key="'clt'+i">{{ line }}</div>
+        <div v-if="clientEmail">{{ clientEmail }}</div>
+      </div>
+
+      <!-- Table: bordered grid -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px', border: '1px solid ' + c.tableBorder }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, border: '1px solid ' + c.tableBorder }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px', border: '1px solid ' + c.tableBorder }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px', border: '1px solid ' + c.tableBorder }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px', border: '1px solid ' + c.tableBorder }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ backgroundColor: i % 2 === 1 ? c.tableRowAlt : 'transparent' }">
+            <td :style="{ padding: '4px 4px', border: '1px solid ' + c.tableBorder }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px', border: '1px solid ' + c.tableBorder }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px', border: '1px solid ' + c.tableBorder }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px', border: '1px solid ' + c.tableBorder }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '2px solid ' + c.primary, marginTop: '4px', fontSize: '13px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 6: MODERN                                               -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'modern'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <div :style="{ padding: '6%' }">
+      <!-- Asymmetric header -->
+      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '6px' }">
+        <div>
+          <div :style="{ fontSize: '22px', fontWeight: '700', color: c.headerText, lineHeight: '1.1' }">INVOICE</div>
+          <div :style="{ fontSize: '7.5px', marginTop: '3px', color: c.bodyText }">
+            #{{ invoice.invoice_number }} &middot; {{ formatDate(invoice.date) }}
+          </div>
+          <div v-if="invoice.due_date" :style="{ fontSize: '7.5px', color: c.bodyText }">Due {{ formatDate(invoice.due_date) }}</div>
+        </div>
+        <div :style="{ textAlign: 'right' }">
+          <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '22px', height: '22px', objectFit: 'contain', marginBottom: '2px', marginLeft: 'auto', display: 'block' }" />
+          <div :style="{ fontSize: '10px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'modf'+i" :style="{ fontSize: '7px' }">{{ line }}</div>
+          <div v-if="biz?.email" :style="{ fontSize: '7px' }">{{ biz.email }}</div>
+        </div>
+      </div>
+
+      <!-- Thin teal line -->
+      <div :style="{ height: '1px', backgroundColor: c.primary, marginBottom: '12px' }" />
+
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'modf2'+i">{{ line }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'modt'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: borderless, teal bottom borders, teal header TEXT -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr>
+            <th :style="{ textAlign: 'left', padding: '4px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, borderBottom: '1px solid ' + c.primary }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px', borderBottom: '1px solid ' + c.primary }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px', borderBottom: '1px solid ' + c.primary }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px', borderBottom: '1px solid ' + c.primary }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ borderBottom: '1px solid ' + c.tableBorder }">
+            <td :style="{ padding: '4px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals with teal bg strip on total row -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '5px 4px', marginTop: '4px', fontSize: '13px', fontWeight: '700', color: c.totalHighlight, backgroundColor: c.tableRowAlt, borderRadius: '2px' }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 7: ELEGANT                                              -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'elegant'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <div :style="{ padding: '6%' }">
+      <!-- Gold double-rule at top -->
+      <div :style="{ marginBottom: '10px' }">
+        <div :style="{ height: '1px', backgroundColor: c.primary }" />
+        <div :style="{ height: '1.5px' }" />
+        <div :style="{ height: '1px', backgroundColor: c.primary }" />
+      </div>
+
+      <!-- Centered header -->
+      <div :style="{ textAlign: 'center', marginBottom: '8px' }">
+        <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '24px', height: '24px', objectFit: 'contain', margin: '0 auto 4px', display: 'block' }" />
+        <div :style="{ fontSize: '20px', fontWeight: '700', color: c.headerText, letterSpacing: '0.06em' }">INVOICE</div>
+        <div :style="{ fontSize: '10px', fontWeight: '600', color: c.headerText, marginTop: '2px' }">{{ biz?.name || 'Your Business' }}</div>
+        <div :style="{ fontSize: '7.5px', marginTop: '2px' }">
+          #{{ invoice.invoice_number }} &middot; {{ formatDate(invoice.date) }}
+          <span v-if="invoice.due_date"> &middot; Due {{ formatDate(invoice.due_date) }}</span>
+        </div>
+      </div>
+
+      <!-- Gold double-rule -->
+      <div :style="{ marginBottom: '12px' }">
+        <div :style="{ height: '1px', backgroundColor: c.primary }" />
+        <div :style="{ height: '1.5px' }" />
+        <div :style="{ height: '1px', backgroundColor: c.primary }" />
+      </div>
+
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'ef'+i">{{ line }}</div>
+          <div v-if="biz?.email">{{ biz.email }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'et'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: gold double-rule above/below header, single rule between rows -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr>
+            <th :colspan="4" :style="{ padding: 0, height: '0' }">
+              <div :style="{ height: '1px', backgroundColor: c.primary }" />
+              <div :style="{ height: '1.5px' }" />
+              <div :style="{ height: '1px', backgroundColor: c.primary }" />
+            </th>
+          </tr>
+          <tr>
+            <th :style="{ textAlign: 'left', padding: '5px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px' }">Amount</th>
+          </tr>
+          <tr>
+            <th :colspan="4" :style="{ padding: 0, height: '0' }">
+              <div :style="{ height: '1px', backgroundColor: c.primary }" />
+              <div :style="{ height: '1.5px' }" />
+              <div :style="{ height: '1px', backgroundColor: c.primary }" />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ borderBottom: '1px solid ' + c.tableBorder }">
+            <td :style="{ padding: '4px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '1px solid ' + c.primary, marginTop: '4px', fontSize: '13px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 8: CREATIVE                                             -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'creative'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <!-- Narrow purple sidebar -->
+    <div :style="{ position: 'absolute', left: '0', top: '0', bottom: '0', width: '3%', backgroundColor: c.primary }" />
+
+    <!-- Content offset past sidebar -->
+    <div :style="{ paddingLeft: '7%', paddingRight: '5%', paddingTop: '5%', paddingBottom: '5%' }">
+      <!-- Logo + Title -->
+      <div :style="{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '10px' }">
+        <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '24px', height: '24px', objectFit: 'contain' }" />
+        <div>
+          <div :style="{ fontSize: '20px', fontWeight: '700', color: c.primary }">INVOICE</div>
+          <div :style="{ fontSize: '7.5px' }">#{{ invoice.invoice_number }}</div>
+        </div>
+      </div>
+
+      <!-- Biz name -->
+      <div :style="{ fontSize: '10px', fontWeight: '600', color: c.headerText, marginBottom: '3px' }">{{ biz?.name || 'Your Business' }}</div>
+      <div :style="{ fontSize: '7.5px', marginBottom: '10px' }">
+        {{ formatDate(invoice.date) }}
+        <span v-if="invoice.due_date"> &middot; Due {{ formatDate(invoice.due_date) }}</span>
+      </div>
+
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'crf'+i">{{ line }}</div>
+          <div v-if="biz?.email">{{ biz.email }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'crt'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: card-style rows -->
+      <div :style="{ marginBottom: '12px' }">
+        <!-- Header -->
+        <div :style="{ display: 'flex', padding: '4px 6px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText }">
+          <div :style="{ flex: 1 }">Description</div>
+          <div :style="{ width: '42px', textAlign: 'right' }">Qty</div>
+          <div :style="{ width: '50px', textAlign: 'right' }">Rate</div>
+          <div :style="{ width: '58px', textAlign: 'right' }">Amount</div>
+        </div>
+        <!-- Rows as subtle cards -->
+        <div
+          v-for="(item, i) in displayItems"
+          :key="i"
+          :style="{ display: 'flex', padding: '5px 6px', backgroundColor: c.tableRowAlt, borderRadius: '2px', marginTop: '2px' }"
+        >
+          <div :style="{ flex: 1 }">{{ item.description }}</div>
+          <div :style="{ width: '42px', textAlign: 'right' }">{{ item.quantity }}</div>
+          <div :style="{ width: '50px', textAlign: 'right' }">{{ formatCurrency(item.rate) }}</div>
+          <div :style="{ width: '58px', textAlign: 'right' }">{{ formatCurrency(item.amount) }}</div>
+        </div>
+      </div>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', marginTop: '4px', fontSize: '14px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 9: COMPACT                                              -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'compact'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <div :style="{ padding: '4%' }">
+      <!-- Single-line header: biz name left, INVOICE # right -->
+      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: '2px' }">
+        <div :style="{ fontSize: '11px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+        <div :style="{ fontSize: '9px', fontWeight: '700', color: c.primary }">INVOICE #{{ invoice.invoice_number }}</div>
+      </div>
+      <div :style="{ display: 'flex', justifyContent: 'space-between', fontSize: '7px', marginBottom: '10px', color: c.bodyText }">
+        <div>
+          <span v-if="biz?.email">{{ biz.email }}</span>
+          <span v-if="biz?.phone"> &middot; {{ biz.phone }}</span>
+        </div>
+        <div>
+          {{ formatDate(invoice.date) }}
+          <span v-if="invoice.due_date"> &middot; Due {{ formatDate(invoice.due_date) }}</span>
+        </div>
+      </div>
+
+      <!-- From / To: tight spacing -->
+      <div :style="{ display: 'flex', gap: '4%', marginBottom: '10px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '2px' }">From</div>
+          <div :style="{ fontSize: '7.5px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'cpf'+i" :style="{ fontSize: '7px' }">{{ line }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '2px' }">To</div>
+          <div :style="{ fontSize: '7.5px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany" :style="{ fontSize: '7px' }">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'cpt'+i" :style="{ fontSize: '7px' }">{{ line }}</div>
+          <div v-if="clientEmail" :style="{ fontSize: '7px' }">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: tight zebra stripes, smaller row height -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '10px' }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '3px 3px', fontSize: '6.5px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '3px 3px', fontSize: '6.5px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '38px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '3px 3px', fontSize: '6.5px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '46px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '3px 3px', fontSize: '6.5px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '52px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ backgroundColor: i % 2 === 1 ? c.tableRowAlt : 'transparent' }">
+            <td :style="{ padding: '3px 3px', fontSize: '7px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '3px 3px', fontSize: '7px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '3px 3px', fontSize: '7px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '3px 3px', fontSize: '7px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals: subtle, not oversized -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '40%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '1px 0', fontSize: '7px' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '1px 0', fontSize: '7px' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '1px 0', fontSize: '7px' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', borderTop: '1px solid ' + c.tableBorder, marginTop: '3px', fontSize: '10px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '10px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 10: DARK                                                -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'dark'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <div :style="{ padding: '6%' }">
+      <!-- Header -->
+      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '6px' }">
+        <div>
+          <div :style="{ fontSize: '22px', fontWeight: '700', color: c.primary, lineHeight: '1.1' }">INVOICE</div>
+          <div :style="{ width: '40px', height: '1px', backgroundColor: c.primary, marginTop: '4px' }" />
+        </div>
+        <div :style="{ textAlign: 'right' }">
+          <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '22px', height: '22px', objectFit: 'contain', marginBottom: '2px', marginLeft: 'auto', display: 'block' }" />
+          <div :style="{ fontSize: '10px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+        </div>
+      </div>
+
+      <!-- Meta -->
+      <div :style="{ fontSize: '7.5px', marginBottom: '12px', color: c.bodyText }">
+        #{{ invoice.invoice_number }} &middot; {{ formatDate(invoice.date) }}
+        <span v-if="invoice.due_date"> &middot; Due {{ formatDate(invoice.due_date) }}</span>
+      </div>
+
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'df'+i">{{ line }}</div>
+          <div v-if="biz?.email">{{ biz.email }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600', color: c.headerText }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'dt'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: dark header, alternating dark rows -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ backgroundColor: i % 2 === 1 ? c.tableRowAlt : c.background }">
+            <td :style="{ padding: '4px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '1px solid ' + c.tableBorder, marginTop: '4px', fontSize: '14px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 11: VIBRANT                                             -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'vibrant'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <!-- Gradient band -->
+    <div :style="{ background: 'linear-gradient(135deg, #ea580c 0%, #f97316 100%)', color: '#ffffff', padding: '5% 6% 4%', minHeight: '15%', display: 'flex', flexDirection: 'column', justifyContent: 'center' }">
+      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }">
+        <div>
+          <div :style="{ fontSize: '22px', fontWeight: '700', lineHeight: '1.1' }">INVOICE</div>
+          <div :style="{ fontSize: '7.5px', marginTop: '3px', opacity: 0.9 }">
+            #{{ invoice.invoice_number }} &middot; {{ formatDate(invoice.date) }}
+            <span v-if="invoice.due_date"> &middot; Due {{ formatDate(invoice.due_date) }}</span>
+          </div>
+        </div>
+        <div :style="{ textAlign: 'right' }">
+          <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '22px', height: '22px', objectFit: 'contain', marginBottom: '2px', marginLeft: 'auto', display: 'block' }" />
+          <div :style="{ fontSize: '11px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-if="biz?.email" :style="{ fontSize: '7px', opacity: 0.9 }">{{ biz.email }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div :style="{ padding: '4% 6%' }">
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'vf'+i">{{ line }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'vt'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: warm-tinted header, borderless -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '4px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ backgroundColor: i % 2 === 1 ? c.tableRowAlt : 'transparent' }">
+            <td :style="{ padding: '4px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '2px solid ' + c.primary, marginTop: '4px', fontSize: '14px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 12: CORPORATE                                           -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'corporate'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <!-- Deep blue band -->
+    <div :style="{ backgroundColor: c.headerBg, color: c.headerText, padding: '4% 6% 3%', minHeight: '12%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }">
+      <div>
+        <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '22px', height: '22px', objectFit: 'contain', marginBottom: '2px' }" />
+        <div :style="{ fontSize: '12px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+      </div>
+      <div :style="{ fontSize: '22px', fontWeight: '700' }">INVOICE</div>
+    </div>
+
+    <!-- Lighter blue info bar -->
+    <div :style="{ backgroundColor: c.secondary, color: '#ffffff', padding: '1.5% 6%', fontSize: '7px', display: 'flex', justifyContent: 'space-between' }">
+      <div>#{{ invoice.invoice_number }}</div>
+      <div>{{ formatDate(invoice.date) }}</div>
+      <div v-if="invoice.due_date">Due: {{ formatDate(invoice.due_date) }}</div>
+      <div :style="{ textTransform: 'uppercase', fontWeight: '600' }">{{ invoice.status }}</div>
+    </div>
+
+    <div :style="{ padding: '4% 6%' }">
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'cof'+i">{{ line }}</div>
+          <div v-if="biz?.email">{{ biz.email }}</div>
+          <div v-if="biz?.phone">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">Bill To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'cot'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: bordered, blue header -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px', border: '1px solid ' + c.tableBorder }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, border: '1px solid ' + c.tableBorder }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px', border: '1px solid ' + c.tableBorder }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px', border: '1px solid ' + c.tableBorder }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px', border: '1px solid ' + c.tableBorder }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ backgroundColor: i % 2 === 1 ? c.tableRowAlt : 'transparent' }">
+            <td :style="{ padding: '4px 4px', border: '1px solid ' + c.tableBorder }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px', border: '1px solid ' + c.tableBorder }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px', border: '1px solid ' + c.tableBorder }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px', border: '1px solid ' + c.tableBorder }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '2px solid ' + c.primary, marginTop: '4px', fontSize: '14px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 13: FRESH                                               -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'fresh'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <div :style="{ padding: '6%' }">
+      <!-- Header with logo left, watermark invoice number right -->
+      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px', position: 'relative' }">
+        <div>
+          <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '26px', height: '26px', objectFit: 'contain', marginBottom: '3px' }" />
+          <div :style="{ fontSize: '11px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'frf'+i" :style="{ fontSize: '7px' }">{{ line }}</div>
+          <div v-if="biz?.email" :style="{ fontSize: '7px' }">{{ biz.email }}</div>
+          <div v-if="biz?.phone" :style="{ fontSize: '7px' }">{{ biz.phone }}</div>
+        </div>
+        <div :style="{ textAlign: 'right', position: 'relative' }">
+          <div :style="{ fontSize: '14px', fontWeight: '600', color: c.primary, letterSpacing: '0.02em' }">INVOICE</div>
+          <!-- Oversized watermark number -->
+          <div :style="{ fontSize: '40px', fontWeight: '800', color: '#bae6fd', opacity: 0.3, lineHeight: '1', marginTop: '-4px' }">
+            {{ invoice.invoice_number }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Dates -->
+      <div :style="{ display: 'flex', gap: '12px', marginBottom: '10px', fontSize: '7.5px' }">
+        <div><span :style="{ fontWeight: '600' }">Date:</span> {{ formatDate(invoice.date) }}</div>
+        <div v-if="invoice.due_date"><span :style="{ fontWeight: '600' }">Due:</span> {{ formatDate(invoice.due_date) }}</div>
+      </div>
+
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'frf2'+i">{{ line }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'frt'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: sky blue header, light blue zebra -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ backgroundColor: i % 2 === 1 ? c.tableRowAlt : 'transparent' }">
+            <td :style="{ padding: '4px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '2px solid ' + c.primary, marginTop: '4px', fontSize: '14px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 14: NATURAL                                             -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'natural'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <div :style="{ padding: '6%' }">
+      <!-- Header -->
+      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }">
+        <div>
+          <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '24px', height: '24px', objectFit: 'contain', marginBottom: '3px' }" />
+          <div :style="{ fontSize: '20px', fontWeight: '700', color: c.primary }">INVOICE</div>
+        </div>
+        <div :style="{ textAlign: 'right' }">
+          <div :style="{ fontSize: '11px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'nf'+i" :style="{ fontSize: '7px', color: c.headerText }">{{ line }}</div>
+          <div v-if="biz?.email" :style="{ fontSize: '7px', color: c.headerText }">{{ biz.email }}</div>
+          <div v-if="biz?.phone" :style="{ fontSize: '7px', color: c.headerText }">{{ biz.phone }}</div>
+        </div>
+      </div>
+
+      <!-- Meta -->
+      <div :style="{ display: 'flex', gap: '12px', marginBottom: '12px', fontSize: '7.5px', color: c.headerText }">
+        <div><span :style="{ fontWeight: '600' }">#</span>{{ invoice.invoice_number }}</div>
+        <div>{{ formatDate(invoice.date) }}</div>
+        <div v-if="invoice.due_date">Due: {{ formatDate(invoice.due_date) }}</div>
+      </div>
+
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'nf2'+i">{{ line }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.primary, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600', color: c.headerText }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'nt'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: terracotta header, warm cream alternating rows -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr :style="{ backgroundColor: c.tableHeaderBg }">
+            <th :style="{ textAlign: 'left', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '4px 4px', fontSize: '7px', fontWeight: '500', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i" :style="{ backgroundColor: i % 2 === 1 ? c.tableRowAlt : c.background }">
+            <td :style="{ padding: '4px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '4px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Totals -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderTop: '2px solid ' + c.primary, marginTop: '4px', fontSize: '14px', fontWeight: '700', color: c.totalHighlight }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- TEMPLATE 15: STATEMENT                                           -->
+  <!-- ================================================================ -->
+  <div
+    v-else-if="template.id === 'statement'"
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+    }"
+  >
+    <div :style="{ padding: '6%' }">
+      <!-- Hero header: INVOICE small top-left, TOTAL MASSIVE top-right -->
+      <div :style="{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '14px' }">
+        <div>
+          <div :style="{ fontSize: '14px', fontWeight: '700', color: c.headerText }">INVOICE</div>
+          <div :style="{ fontSize: '7.5px', marginTop: '2px' }">#{{ invoice.invoice_number }}</div>
+          <div :style="{ fontSize: '7.5px' }">{{ formatDate(invoice.date) }}</div>
+          <div v-if="invoice.due_date" :style="{ fontSize: '7.5px' }">Due: {{ formatDate(invoice.due_date) }}</div>
+        </div>
+        <div :style="{ textAlign: 'right' }">
+          <div :style="{ fontSize: '7px', textTransform: 'uppercase', letterSpacing: '0.08em', color: c.bodyText, fontWeight: '500' }">Total Due</div>
+          <div :style="{ fontSize: '24px', fontWeight: '800', color: c.secondary, lineHeight: '1.1' }">{{ formatCurrency(invoice.total) }}</div>
+        </div>
+      </div>
+
+      <!-- Biz info -->
+      <div :style="{ marginBottom: '10px' }">
+        <img v-if="biz?.logo" :src="biz.logo" :style="{ width: '22px', height: '22px', objectFit: 'contain', marginBottom: '3px' }" />
+        <div :style="{ fontSize: '9px', fontWeight: '600', color: c.headerText }">{{ biz?.name || 'Your Business' }}</div>
+        <div v-for="(line, i) in bizAddressLines" :key="'sf'+i" :style="{ fontSize: '7px' }">{{ line }}</div>
+        <div v-if="biz?.email" :style="{ fontSize: '7px' }">{{ biz.email }}</div>
+        <div v-if="biz?.phone" :style="{ fontSize: '7px' }">{{ biz.phone }}</div>
+      </div>
+
+      <!-- From / To -->
+      <div :style="{ display: 'flex', gap: '6%', marginBottom: '14px' }">
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.headerText, marginBottom: '3px' }">From</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ biz?.name || 'Your Business' }}</div>
+          <div v-for="(line, i) in bizAddressLines" :key="'sf2'+i">{{ line }}</div>
+        </div>
+        <div :style="{ flex: 1 }">
+          <div :style="{ fontSize: '8px', fontWeight: '600', textTransform: 'uppercase', letterSpacing: '0.05em', color: c.headerText, marginBottom: '3px' }">To</div>
+          <div :style="{ fontSize: '8px', fontWeight: '600' }">{{ clientName }}</div>
+          <div v-if="clientCompany">{{ clientCompany }}</div>
+          <div v-for="(line, i) in clientAddressLines" :key="'st'+i">{{ line }}</div>
+          <div v-if="clientEmail">{{ clientEmail }}</div>
+        </div>
+      </div>
+
+      <!-- Table: clean, whitespace-only. NO borders, NO stripes -->
+      <table :style="{ width: '100%', borderCollapse: 'collapse', marginBottom: '12px' }">
+        <thead>
+          <tr>
+            <th :style="{ textAlign: 'left', padding: '5px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText }">Description</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '42px' }">Qty</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '50px' }">Rate</th>
+            <th :style="{ textAlign: 'right', padding: '5px 4px', fontSize: '7px', fontWeight: '600', textTransform: 'uppercase', color: c.tableHeaderText, width: '58px' }">Amount</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in displayItems" :key="i">
+            <td :style="{ padding: '5px 4px' }">{{ item.description }}</td>
+            <td :style="{ textAlign: 'right', padding: '5px 4px' }">{{ item.quantity }}</td>
+            <td :style="{ textAlign: 'right', padding: '5px 4px' }">{{ formatCurrency(item.rate) }}</td>
+            <td :style="{ textAlign: 'right', padding: '5px 4px' }">{{ formatCurrency(item.amount) }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <!-- Summary totals (total already shown at top as hero) -->
+      <div :style="{ display: 'flex', justifyContent: 'flex-end' }">
+        <div :style="{ width: '45%' }">
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Subtotal</span><span>{{ formatCurrency(invoice.subtotal) }}</span>
+          </div>
+          <div v-if="invoice.tax_rate > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Tax ({{ invoice.tax_rate }}%)</span><span>{{ formatCurrency(invoice.tax_amount) }}</span>
+          </div>
+          <div v-if="invoice.discount > 0" :style="{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }">
+            <span>Discount</span><span>-{{ formatCurrency(invoice.discount) }}</span>
+          </div>
+          <div :style="{ display: 'flex', justifyContent: 'space-between', padding: '3px 0', borderTop: '1px solid ' + c.tableBorder, marginTop: '3px', fontSize: '9px', fontWeight: '600', color: c.headerText }">
+            <span>Total</span><span>{{ formatCurrency(invoice.total) }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="invoice.notes" :style="{ marginTop: '14px', fontSize: '6.5px', color: c.bodyText, opacity: 0.7 }">
+        <div :style="{ fontWeight: '600', marginBottom: '2px' }">Notes</div>
+        {{ invoice.notes }}
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================ -->
+  <!-- FALLBACK                                                         -->
+  <!-- ================================================================ -->
+  <div
+    v-else
+    :style="{
+      backgroundColor: c.background,
+      color: c.bodyText,
+      fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif',
+      position: 'relative',
+      aspectRatio: '210 / 297',
+      width: '100%',
+      overflow: 'hidden',
+      fontSize: '7.5px',
+      lineHeight: '1.5',
+      padding: '6%',
+    }"
+  >
+    <div :style="{ fontSize: '14px', fontWeight: '700', color: c.headerText }">INVOICE</div>
+    <div :style="{ marginTop: '4px' }">Template "{{ template.id }}" not found.</div>
+  </div>
 </template>