/* ============================================================
   templates.css — AUTO-GENERATED by mix css.templates
   Do NOT edit this file directly.
   Edit individual files in assets/css/templates/ instead.
   ============================================================ */

/* === _base_pdf.css === */
/* Base PDF styles — A4 page setup and body defaults.
   Used by render_for_pdf/4 for PDF generation and portal iframes. */

@page {
    size: A4;
    margin: 0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 11px;
    line-height: 1.5;
    color: #1d1d1f;
    background: #ffffff;
}

.invoice-full-preview {
    width: 595px;
    height: 842px;
    padding: 40px;
    box-sizing: border-box;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}


/* === _footer.css === */
/* Shared invoice footer: QR + totals layout, bank details, SB-ID, sendbillie link.
   Used by ALL 28 templates via render_invoice_footer/3. */

.invoice-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.invoice-bottom-qr {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.invoice-bottom-right {
    text-align: right;
}

/* Inline QR code (inside template body, left of totals) */
.invoice-inline-qr {
    text-align: center;
}

.invoice-inline-qr svg {
    width: 80px;
    height: 80px;
}

.invoice-inline-qr-placeholder {
    width: 80px;
    height: 80px;
    border: 1.5px solid #c7c7cc;
    background: repeating-conic-gradient(#e5e5e7 0% 25%, #ffffff 0% 50%) 50% / 8px 8px;
}

.invoice-inline-qr-caption {
    font-size: 8px;
    color: #8e8e93;
    margin-top: 4px;
}

/* Bank Details Footer */
.invoice-bank-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e5e7;
    font-size: 9px;
    color: #6e6e73;
    line-height: 1.4;
}

.invoice-bank-details-title {
    font-size: 9px;
    font-weight: 600;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.invoice-bank-details-grid {
    display: flex;
    gap: 16px;
}

.invoice-bank-details-col {
    flex: 1;
}

.invoice-bank-details-row {
    display: flex;
    gap: 6px;
    margin-bottom: 2px;
}

.invoice-bank-details-label {
    font-weight: 600;
    color: #8e8e93;
    min-width: 32px;
}

.invoice-bank-details-value {
    color: #1d1d1f;
}

.invoice-bank-details-ref {
    margin-top: 4px;
    font-weight: 600;
    color: #1d1d1f;
    font-size: 9px;
}

/* SendBillie link footer */
.invoice-full-footer {
    text-align: center;
    font-size: 10px;
    color: #8e8e93;
    margin-top: 6px;
    padding-top: 4px;
    border-top: 1px solid #e5e5e7;
}

.invoice-full-footer a {
    color: #0077cc;
    text-decoration: none;
}

.invoice-full-footer a:hover {
    text-decoration: underline;
}


/* === _no_logo.css === */
/* No Logo Variants — Shared across all templates.
   Hides or adjusts logo elements when company has no logo uploaded. */

.modern-1.no-logo .logo-company {
    gap: 0;
}

.modern-1b.no-logo .logo-company {
    gap: 0;
}

.modern-2.no-logo .logo-placeholder {
    display: none;
}

.modern-2b.no-logo .sidebar .logo-placeholder {
    display: none;
}

.modern-3.no-logo .logo-placeholder {
    display: none;
}

.modern-3.no-logo .logo-section {
    gap: 0;
}

.modern-3b.no-logo .logo-placeholder {
    display: none;
}

.modern-3b.no-logo .logo-section {
    gap: 0;
}

.modern-4.no-logo .logo-placeholder {
    display: none;
}

.modern-4.no-logo .logo-section {
    gap: 0;
}

.modern-4b.no-logo .logo-placeholder {
    display: none;
}

.modern-4b.no-logo .logo-section {
    gap: 0;
}

.modern-4c.no-logo .logo-placeholder {
    display: none;
}

.modern-4c.no-logo .logo-section {
    gap: 0;
}

.invoice-template-mono.no-logo .mono-logo {
    display: none;
}

.invoice-template-wire.no-logo .wire-logo {
    display: none;
}


/* === _qr.css === */
/* QR code positioning for PDF invoices.
   Used by render_for_pdf/4 when QR code is included. */

.epc-qr-pdf {
    position: fixed;
    bottom: 28px;
    right: 40px;
    text-align: center;
    z-index: 100;
}

.epc-qr-pdf svg {
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto;
}

.epc-qr-pdf-caption {
    font-size: 9px;
    color: #666;
    margin-top: 4px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


/* === _sb_id.css === */
/* SB-ID footer positioning for PDF invoices.
   Displays the client reference number on the invoice. */

.invoice-sb-id {
    position: fixed;
    bottom: 28px;
    left: 40px;
    font-size: 9px;
    color: #999;
    font-family: 'Courier New', monospace;
    z-index: 100;
}


/* === basic.css === */
/* Template: Classic (basic, basic-simple, basic-twocol, basic-compact)
   Single source of truth for gallery + PDF rendering.
   All 4 classic variants share these .invoice-full-* classes. */

/* Full Invoice Preview - Option 1 Style */
.invoice-full-preview {
    width: 595px;
    height: 842px;
    background: #ffffff !important;
    border: 1px solid #e5e5e7;
    border-radius: 0;
    padding: 40px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1d1d1f;
    overflow: hidden;
}

.invoice-full-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #1d1d1f;
}

.invoice-full-company h3 {
    font-size: 18px;
    margin-bottom: 8px;
    margin-top: 0;
    color: #1d1d1f;
    font-weight: 600;
    font-style: normal;
}

.invoice-full-company p {
    font-size: 11px;
    color: #6e6e73;
    line-height: 1.5;
    margin: 0;
}

.invoice-full-meta {
    text-align: right;
}

.invoice-full-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #1d1d1f;
}

.invoice-full-details {
    font-size: 11px;
    color: #6e6e73;
}

.invoice-full-details div {
    margin-bottom: 4px;
}

.invoice-full-client {
    margin-bottom: 24px;
}

.invoice-full-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8e8e93;
    margin-bottom: 6px;
}

.invoice-full-client-info {
    font-size: 12px;
    color: #1d1d1f;
    line-height: 1.5;
}

.invoice-full-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 120px;
}

.invoice-full-table thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 6px;
    border-bottom: 2px solid #1d1d1f;
    color: #6e6e73;
    font-weight: 600;
}

.invoice-full-table thead th:last-child {
    text-align: right;
}

.invoice-full-table tbody td {
    padding: 10px 6px;
    border-bottom: 1px solid #e5e5e7;
    font-size: 11px;
    color: #1d1d1f;
}

.invoice-full-table tbody td:last-child {
    text-align: right;
    font-weight: 500;
}

.invoice-full-item-desc {
    font-size: 10px;
    color: #8e8e93;
    margin-top: 2px;
}

/* Classic totals (used by render_totals, render_simple_totals, render_compact_totals) */
.invoice-full-totals {
    margin-left: auto;
    width: 220px;
}

.invoice-full-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 11px;
}

.invoice-full-total-row:not(:last-child) {
    border-bottom: 1px solid #e5e5e7;
}

.invoice-full-total-row.final {
    font-size: 14px;
    font-weight: bold;
    padding-top: 10px;
    border-top: 2px solid #1d1d1f;
    margin-top: 6px;
}

/* Pay Now Button - Classic: filled black, white text, matches totals width */
.invoice-full-preview .classic-paynow {
    display: block;
    width: 220px;
    margin-left: auto;
    margin-top: 10px;
    padding: 10px 20px;
    background: #1d1d1f;
    border: 2px solid #1d1d1f;
    border-radius: 0;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    letter-spacing: 0.5px;
}


/* === edge.css === */
/* Template: Edge — Single source of truth for gallery + PDF rendering */

.invoice-template-edge {
    background: #ffffff;
    width: 595px;
    height: 842px;
    display: flex;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
    min-height: 100%;
}

.invoice-template-edge .edge-sidebar {
    width: 80px;
    border-right: 3px solid #3d2852;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 10px;
    justify-content: flex-start;
    gap: 20px;
}

.invoice-template-edge .edge-sidebar-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 10px;
    letter-spacing: 4px;
    color: #3d2852;
    font-weight: 600;
}

.invoice-template-edge .edge-sidebar-number {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    font-weight: 700;
    color: #3d2852;
    letter-spacing: 1px;
}

.invoice-template-edge .edge-main {
    flex: 1;
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
}

.invoice-template-edge .edge-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.invoice-template-edge .edge-company {
    font-size: 16px;
    font-weight: 700;
    color: #3d2852;
}

.invoice-template-edge .edge-address {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
    line-height: 1.6;
}

.invoice-template-edge .edge-date {
    font-size: 24px;
    font-weight: 300;
    color: #3d2852;
    text-align: right;
}

.invoice-template-edge .edge-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 36px;
}

.invoice-template-edge .edge-label {
    font-size: 9px;
    letter-spacing: 2px;
    color: #3d2852;
    font-weight: 600;
    margin-bottom: 8px;
}

.invoice-template-edge .edge-label-muted {
    font-size: 9px;
    letter-spacing: 2px;
    color: #6e6e73;
    font-weight: 600;
    margin-bottom: 8px;
    text-align: right;
}

.invoice-template-edge .edge-client {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-template-edge .edge-client-address {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
}

.invoice-template-edge .edge-due {
    font-size: 14px;
    font-weight: 600;
    color: #3d2852;
    text-align: right;
}

.invoice-template-edge table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
}

.invoice-template-edge th {
    text-align: left;
    padding: 12px 0;
    font-size: 9px;
    letter-spacing: 1px;
    color: #3d2852;
    font-weight: 600;
    border-bottom: 2px solid #3d2852;
}

.invoice-template-edge th.qty { text-align: center; width: 50px; }
.invoice-template-edge th.rate { text-align: right; width: 100px; }
.invoice-template-edge th.amount { text-align: right; width: 80px; }

.invoice-template-edge td {
    padding: 14px 0;
    font-size: 13px;
    color: #1d1d1f;
    border-bottom: 1px solid #f0f0f0;
}

.invoice-template-edge td.qty { text-align: center; color: #6e6e73; }
.invoice-template-edge td.rate { text-align: right; color: #6e6e73; }
.invoice-template-edge td.amount { text-align: right; font-weight: 600; }

.invoice-template-edge tr:last-child td {
    border-bottom: none;
}

.invoice-template-edge .edge-totals-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.invoice-template-edge .edge-totals-box {
    width: 220px;
    border-top: 2px solid #3d2852;
    padding-top: 16px;
}

.invoice-template-edge .edge-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #6e6e73;
}

.invoice-template-edge .edge-total-final {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    margin-top: 8px;
    border: 2px solid #3d2852;
    border-radius: 8px;
}

.invoice-template-edge .edge-total-final .label {
    font-size: 13px;
    font-weight: 600;
    color: #3d2852;
}

.invoice-template-edge .edge-total-final .value {
    font-size: 18px;
    font-weight: 700;
    color: #3d2852;
}

.invoice-template-edge .edge-paynow {
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    background: #ffffff;
    border: 2px solid #3d2852;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #3d2852;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
}

.invoice-template-edge .edge-disclaimer {
    font-size: 9px;
    color: #a1a1a6;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.invoice-template-edge .edge-footer {
    text-align: center;
    font-size: 10px;
    color: #a1a1a6;
    margin-top: 16px;
}


/* === float.css === */
/* Template: Float — Single source of truth for gallery + PDF rendering */

.invoice-template-float {
    background: #f8fafa;
    width: 595px;
    height: 842px;
    padding: 40px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.invoice-template-float .float-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}

.invoice-template-float .float-company-card {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.invoice-template-float .float-company {
    font-size: 14px;
    font-weight: 700;
    color: #2d6a6a;
}

.invoice-template-float .float-address {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 4px;
}

.invoice-template-float .float-invoice-card {
    background: #2d6a6a;
    padding: 20px;
    border-radius: 10px;
    text-align: right;
}

.invoice-template-float .float-invoice-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}

.invoice-template-float .float-invoice-number {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
}

.invoice-template-float .float-info-row {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
}

.invoice-template-float .float-billto-card {
    flex: 1;
    background: #ffffff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.invoice-template-float .float-date-card {
    background: #ffffff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.invoice-template-float .float-due-card {
    background: #e8f5f3;
    padding: 16px;
    border-radius: 10px;
}

.invoice-template-float .float-label {
    font-size: 9px;
    letter-spacing: 2px;
    color: #2d6a6a;
    font-weight: 600;
    margin-bottom: 8px;
}

.invoice-template-float .float-label-muted {
    font-size: 9px;
    letter-spacing: 2px;
    color: #6e6e73;
    font-weight: 600;
    margin-bottom: 8px;
}

.invoice-template-float .float-client {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-template-float .float-client-address {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 4px;
}

.invoice-template-float .float-date {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-template-float .float-due {
    font-size: 13px;
    font-weight: 600;
    color: #2d6a6a;
}

.invoice-template-float .float-table-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    overflow: hidden;
    margin-bottom: 20px;
    flex: 1;
}

.invoice-template-float table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-template-float th {
    text-align: left;
    padding: 14px 16px;
    font-size: 9px;
    letter-spacing: 1px;
    color: #2d6a6a;
    font-weight: 600;
    background: #f8fafa;
}

.invoice-template-float th.qty { text-align: center; width: 50px; }
.invoice-template-float th.rate { text-align: right; width: 100px; }
.invoice-template-float th.amount { text-align: right; width: 80px; }

.invoice-template-float td {
    padding: 14px 16px;
    font-size: 13px;
    color: #1d1d1f;
}

.invoice-template-float td.qty { text-align: center; color: #6e6e73; }
.invoice-template-float td.rate { text-align: right; color: #6e6e73; }
.invoice-template-float td.amount { text-align: right; font-weight: 600; }

.invoice-template-float tr:not(:first-child) td {
    border-top: 1px solid #f0f0f0;
}

.invoice-template-float .float-totals-wrapper {
    display: flex;
    justify-content: flex-end;
}

.invoice-template-float .float-totals-box {
    width: 240px;
}

.invoice-template-float .float-totals-inner {
    background: #2d6a6a;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 12px;
}

.invoice-template-float .float-total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}

.invoice-template-float .float-total-row .value {
    color: #ffffff;
}

.invoice-template-float .float-total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.invoice-template-float .float-total-final .label {
    font-size: 12px;
    font-weight: 600;
    color: #9fd5c8;
}

.invoice-template-float .float-total-final .value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.invoice-template-float .float-paynow {
    width: 100%;
    padding: 12px 20px;
    background: #ffffff;
    border: 2px solid #2d6a6a;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #2d6a6a;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.invoice-template-float .float-disclaimer {
    font-size: 9px;
    color: #a1a1a6;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.invoice-template-float .float-footer {
    text-align: center;
    font-size: 10px;
    color: #a1a1a6;
    margin-top: 16px;
}


/* === modern1.css === */
/* Template: modern1 (Pink Punch #1 - Gradient Flow)
   Single source of truth for gallery + PDF rendering. */

/* Modern 1: Pink Punch #1 - Gradient Flow */
.modern-1 .invoice {
    padding: 0;
    position: relative;
    overflow: hidden;
    width: 595px;
    height: 842px;
    background: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
}

.modern-1 .diagonal-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 224px;
    background: linear-gradient(135deg, #fa8eaa 0%, #f74a76 40%, #eb0a44 100%);
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
}

.modern-1 .invoice-content {
    position: relative;
    z-index: 1;
    padding: 50px;
}

.modern-1 .header-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.modern-1 .logo-company {
    display: flex;
    gap: 20px;
    align-items: center;
}

.modern-1 .logo-placeholder {
    width: 68px;
    height: 68px;
    background: linear-gradient(135deg, #f86c90 0%, #f5275c 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 10px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(235, 10, 68, 0.2);
}

.modern-1 .company-info h3 {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.modern-1 .company-info p {
    font-size: 13px;
    color: #6e6e73;
    line-height: 1.6;
}

.modern-1 .invoice-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.modern-1 .invoice-title {
    font-size: 42px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 16px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.15);
}

.modern-1 .invoice-details {
    background: linear-gradient(135deg, #cd083b 0%, #880527 100%);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(235, 10, 68, 0.25);
    text-align: left;
}

.modern-1 .invoice-details div {
    margin-bottom: 6px;
}

.modern-1 .invoice-details div:last-child {
    margin-bottom: 0;
}

.modern-1 .client-section {
    background: linear-gradient(90deg, rgba(250, 142, 170, 0.1) 0%, #f5f5f7 100%);
    padding: 24px;
    border-radius: 12px;
    border-left: 5px solid #eb0a44;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.modern-1 .section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #eb0a44;
    font-weight: 700;
    margin-bottom: 12px;
}

.modern-1 .client-info {
    font-size: 14px;
    color: #1d1d1f;
    line-height: 1.2;
}

.modern-1 .client-info strong {
    display: block;
    margin-bottom: 4px;
}

.modern-1 .client-info .client-address {
    display: block;
}

.modern-1 table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.modern-1 thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 8px;
    border-bottom: 2px solid #f5275c;
    color: #6e6e73;
    font-weight: 600;
}

.modern-1 thead th:last-child {
    text-align: right;
}

.modern-1 tbody td {
    padding: 12px 8px;
    border-bottom: 1px solid #e5e5ea;
    font-size: 12px;
    color: #1d1d1f;
}

.modern-1 tbody td:last-child {
    text-align: right;
    font-weight: 500;
}

.modern-1 .item-description {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
}

.modern-1 .totals {
    margin-left: auto;
    width: 320px;
}

.modern-1 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 12px;
    color: #6e6e73;
}

.modern-1 .total-row.final {
    font-size: 15px;
    font-weight: 700;
    padding-top: 12px;
    border-top: 2px solid #f5275c;
    margin-top: 8px;
    color: #1d1d1f;
}

.modern-1 .pay-now-button {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(135deg, #f74a76 0%, #eb0a44 100%);
    color: white;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(235, 10, 68, 0.3);
}

.modern-1 .pay-now-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(235, 10, 68, 0.4);
}

.modern-1 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #6e6e73;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #e5e5ea;
}

.modern-1 .invoice-footer a {
    color: #0077cc;
    text-decoration: none;
}


/* === modern1b.css === */
/* Template: modern1b (Pink Punch #2 - Accent Strip)
   Single source of truth for gallery + PDF rendering. */

/* Modern 1B: Pink Punch #2 - Accent Strip */
/* Systematically converted from React artifact */
.modern-1b .invoice {
    background: #ffffff;
    overflow: hidden;
    position: relative;
    width: 595px;
    height: 842px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
}

.modern-1b .top-strip {
    height: 6px;
    background: linear-gradient(90deg, #fa8eaa 0%, #f74a76 30%, #eb0a44 70%, #cd083b 100%);
}

.modern-1b .side-accent {
    position: absolute;
    top: 6px;
    right: 0;
    width: 3px;
    height: 200px;
    background: linear-gradient(180deg, #eb0a44 0%, transparent 100%);
}

.modern-1b .invoice-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 6px);
    box-sizing: border-box;
}

.modern-1b .header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.modern-1b .logo-company {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.modern-1b .logo-placeholder {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border: 2px solid #f74a76;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef0a45;
    font-size: 9px;
    font-weight: 700;
}

.modern-1b .company-info h3 {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.modern-1b .company-info p {
    font-size: 11px;
    color: #6e6e73;
    line-height: 1.4;
}

.modern-1b .invoice-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

.modern-1b .invoice-title {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(135deg, #eb0a44 0%, #cd083b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -1px;
    margin-bottom: 10px;
    margin-top: -6px;
    line-height: 1;
}

.modern-1b .invoice-details {
    background: #f5f5f7;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 12px;
    color: #1d1d1f;
    border-right: 3px solid #eb0a44;
    text-align: left;
}

.modern-1b .invoice-details div {
    margin-bottom: 4px;
}

.modern-1b .invoice-details div:last-child {
    margin-bottom: 0;
}

.modern-1b .invoice-details span {
    color: #6e6e73;
}

.modern-1b .invoice-details strong {
    color: #1d1d1f;
}

.modern-1b .invoice-details .due-date {
    color: #eb0a44;
}

.modern-1b .client-section {
    padding: 16px 0;
    border-top: 1px solid #e5e5ea;
    border-bottom: 1px solid #e5e5ea;
    margin-bottom: 20px;
}

.modern-1b .section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.modern-1b .section-label .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #eb0a44;
}

.modern-1b .section-label span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #cd083b;
    font-weight: 700;
}

.modern-1b .client-info {
    font-size: 13px;
    color: #1d1d1f;
    line-height: 1.2;
    padding-left: 12px;
}

.modern-1b .client-info strong {
    display: block;
    margin-bottom: 2px;
}

.modern-1b .client-info .client-address {
    color: #6e6e73;
    display: block;
}

.modern-1b table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.modern-1b thead tr {
    background: linear-gradient(90deg, rgba(250, 142, 170, 0.15) 0%, transparent 100%);
}

.modern-1b thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 8px;
    color: #cd083b;
    font-weight: 700;
}

.modern-1b thead th:last-child {
    text-align: right;
}

.modern-1b tbody td {
    padding: 12px 8px;
    border-bottom: 1px solid #e5e5ea;
    font-size: 12px;
    color: #1d1d1f;
}

.modern-1b tbody td:last-child {
    text-align: right;
    font-weight: 600;
}

.modern-1b .item-description {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 2px;
}

.modern-1b .totals {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.modern-1b .totals-inner {
    width: 220px;
}

.modern-1b .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #6e6e73;
}

.modern-1b .total-row.final {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(90deg, #fa8eaa 0%, transparent 100%);
    border-radius: 6px;
    margin-top: 8px;
    color: #1d1d1f;
}

.modern-1b .total-row.final .amount {
    color: #eb0a44;
}

.modern-1b .pay-button-wrap {
    margin-top: 16px;
    text-align: center;
}

.modern-1b .pay-now-button {
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: #eb0a44;
    color: #ffffff;
}

.modern-1b .pay-now-button:hover {
    opacity: 0.9;
}

.modern-1b .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #6e6e73;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #e5e5ea;
}

.modern-1b .invoice-footer a {
    color: #ef0a45;
    text-decoration: none;
}


/* === modern2.css === */
/* Template: modern2 (Deep Purple #1 - Gold Accent)
   Single source of truth for gallery + PDF rendering. */

/* ================================================
   MODERN 2: Deep Purple #1 - Gold Accent
   Systematically converted from React artifact
   ================================================ */

.modern-2 .invoice {
    background: #ffffff;
    overflow: hidden;
    position: relative;
    width: 595px;
    height: 842px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
}

.modern-2 .top-strip {
    height: 6px;
    background: #E3B34C;
}

.modern-2 .invoice-content {
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 6px);
    box-sizing: border-box;
}

.modern-2 .header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.modern-2 .company-card {
    background: linear-gradient(135deg, #4A154B 0%, #300d33 100%);
    padding: 16px;
    border-radius: 12px;
    color: #ffffff;
    min-width: 200px;
}

.modern-2 .logo-placeholder {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 600;
    margin-bottom: 12px;
}

.modern-2 .company-name {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
}

.modern-2 .company-details {
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.9;
}

.modern-2 .invoice-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
}

.modern-2 .invoice-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #4A154B;
    font-weight: 700;
    margin-bottom: 4px;
}

.modern-2 .invoice-number {
    font-size: 24px;
    font-weight: 900;
    color: #CE375C !important;
    margin-bottom: 10px;
    margin-top: -4px;
    line-height: 1;
}

.modern-2 .date-info {
    font-size: 12px;
    color: #6e6e73;
    line-height: 1.4;
}

.modern-2 .date-info strong {
    color: #1d1d1f;
}

.modern-2 .date-info .due-date {
    color: #eb0a44;
}

.modern-2 .client-section {
    background: linear-gradient(90deg, #f0e6f1 0%, #f5f5f7 100%);
    padding: 16px;
    border-radius: 10px;
    border-left: 4px solid #4A154B;
    margin-bottom: 20px;
}

.modern-2 .section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #4A154B;
    font-weight: 700;
    margin-bottom: 6px;
}

.modern-2 .client-info {
    font-size: 13px;
    color: #1d1d1f;
    line-height: 1.2;
}

.modern-2 .client-info strong {
    display: block;
    margin-bottom: 2px;
}

.modern-2 .client-info .client-address {
    color: #6e6e73;
    display: block;
}

.modern-2 table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.modern-2 thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 8px;
    border-bottom: 2px solid #976199;
    color: #4A154B;
    font-weight: 700;
}

.modern-2 thead th:nth-child(2) {
    text-align: center;
}

.modern-2 thead th:nth-child(3),
.modern-2 thead th:nth-child(4) {
    text-align: right;
}

.modern-2 tbody td {
    padding: 12px 8px;
    border-bottom: 1px solid #e5e5ea;
    font-size: 12px;
    color: #1d1d1f;
}

.modern-2 tbody td:nth-child(2) {
    text-align: center;
}

.modern-2 tbody td:nth-child(3) {
    text-align: right;
}

.modern-2 tbody td:last-child {
    text-align: right;
    font-weight: 600;
}

.modern-2 .item-description {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 2px;
}

.modern-2 .totals {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.modern-2 .totals-inner {
    width: 220px;
}

.modern-2 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #6e6e73;
}

.modern-2 .total-row.final {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(135deg, #4A154B 0%, #300d33 100%);
    border-radius: 8px;
    margin-top: 8px;
    color: #ffffff;
}

.modern-2 .pay-button-wrap {
    margin-top: 16px;
    text-align: center;
}

.modern-2 .pay-now-button {
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: #CE375C;
    color: #ffffff;
}

.modern-2 .pay-now-button:hover {
    opacity: 0.9;
}

.modern-2 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #6e6e73;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #e5e5ea;
}

.modern-2 .invoice-footer a {
    color: #4A154B;
    text-decoration: none;
}


/* === modern2b.css === */
/* Template: modern2b (Deep Purple #2 - Sidebar)
   Single source of truth for gallery + PDF rendering. */

.modern-2b .invoice {
    background: #ffffff;
    overflow: hidden;
    position: relative;
    width: 595px;
    height: 842px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    box-sizing: border-box;
}

.modern-2b .sidebar {
    width: 60px !important;
    background: linear-gradient(180deg, #976199 0%, #4A154B 30%, #300d33 100%) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    position: relative !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    border-right: none !important;
}

.modern-2b .sidebar .logo-placeholder {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 8px;
    font-weight: 600;
    margin-bottom: 20px;
}

.modern-2b .sidebar-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.15);
    font-size: 18px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 900;
    text-shadow: 
        0 1px 0 rgba(255, 255, 255, 0.3),
        0 -1px 0 rgba(0, 0, 0, 0.2);
    -webkit-background-clip: text;
    background-clip: text;
}

.modern-2b .color-dots {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modern-2b .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.modern-2b .dot-red {
    background: #eb0a44;
}

.modern-2b .dot-orange {
    background: #f2643d;
}

.modern-2b .dot-yellow {
    background: #f2a73d;
}

.modern-2b .dot-green {
    background: #a0e8b7;
}

.modern-2b .invoice-content {
    flex: 1;
    padding: 28px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.modern-2b .header-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.modern-2b .company-info h3 {
    font-size: 14px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 4px;
    margin-top: 0;
}

.modern-2b .company-info p {
    font-size: 11px;
    color: #6e6e73;
    line-height: 1.4;
}

.modern-2b .invoice-meta {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.modern-2b .invoice-number {
    font-size: 32px !important;
    font-weight: 900;
    background: linear-gradient(135deg, #4A154B 0%, #3d1140 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    letter-spacing: -1px;
    margin-bottom: 8px;
    margin-top: -6px;
    color: transparent !important;
    line-height: 1;
}

.modern-2b .date-box {
    display: inline-flex;
    gap: 12px;
    background: #f5f5f7;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 11px;
}

.modern-2b .date-box span {
    color: #6e6e73;
}

.modern-2b .date-box strong {
    color: #1d1d1f;
}

.modern-2b .date-box .due-date {
    color: #eb0a44;
}

.modern-2b .client-section {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 0;
    border-top: 1px solid #e5e5ea;
    border-bottom: 1px solid #e5e5ea;
}

.modern-2b .accent-bar {
    width: 3px;
    align-self: stretch;
    background: linear-gradient(180deg, #976199 0%, #3d1140 100%);
    border-radius: 2px;
}

.modern-2b .section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #4A154B;
    font-weight: 700;
    margin-bottom: 4px;
}

.modern-2b .client-info {
    font-size: 13px;
    color: #1d1d1f;
    line-height: 1.2;
}

.modern-2b .client-info strong {
    display: block;
    margin-bottom: 2px;
}

.modern-2b .client-info .client-address {
    color: #6e6e73;
    display: block;
}

.modern-2b table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.modern-2b thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 0;
    border-bottom: 2px solid #4A154B;
    color: #4A154B;
    font-weight: 700;
}

.modern-2b thead th:nth-child(2) {
    text-align: center;
}

.modern-2b thead th:nth-child(3),
.modern-2b thead th:nth-child(4) {
    text-align: right;
}

.modern-2b tbody td {
    padding: 12px 0;
    border-bottom: 1px solid #e5e5ea;
    font-size: 12px;
    color: #1d1d1f;
}

.modern-2b tbody td:nth-child(2) {
    text-align: center;
}

.modern-2b tbody td:nth-child(3) {
    text-align: right;
}

.modern-2b tbody td:last-child {
    text-align: right;
    font-weight: 600;
}

.modern-2b .item-description {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 2px;
}

.modern-2b .totals {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.modern-2b .totals-inner {
    width: 200px;
}

.modern-2b .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #6e6e73;
}

.modern-2b .total-row.final {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 700;
    background: linear-gradient(90deg, #f0e6f1 0%, transparent 100%);
    border-radius: 6px;
    margin-top: 8px;
    color: #1d1d1f;
}

.modern-2b .total-row.final .amount {
    color: #4A154B;
}

.modern-2b .pay-button-wrap {
    margin-top: 16px;
    text-align: center;
}

.modern-2b .pay-now-button {
    display: block;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    border-radius: 0;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    background: linear-gradient(135deg, #4A154B 0%, #3d1140 100%);
    color: #ffffff;
}

.modern-2b .pay-now-button:hover {
    opacity: 0.9;
}

.modern-2b .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #6e6e73;
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #e5e5ea;
}

.modern-2b .invoice-footer a {
    color: #4A154B;
    text-decoration: none;
}


/* === modern3.css === */
/* Template: modern3 (Coral Wave #1 - Glass Morphism)
   Single source of truth for gallery + PDF rendering. */

/* Modern 3: Coral Wave #1 - Glass Morphism */
.modern-3 .invoice {
    padding: 0;
    position: relative;
    width: 595px;
    height: 842px;
    background: linear-gradient(180deg, rgba(247, 167, 145, 0.13) 0%, #ffffff 40%), #ffffff;
    overflow: hidden;
    box-sizing: border-box;
}

.modern-3 .blur-circle-1 {
    position: absolute;
    top: 80px;
    right: 40px;
    width: 150px;
    height: 150px;
    background: #f3714e;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.25;
}

.modern-3 .blur-circle-2 {
    position: absolute;
    top: 200px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: #ea3e0f;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.2;
}

.modern-3 .content-wrapper {
    position: relative;
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.modern-3 .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.modern-3 .logo-section {
    display: flex;
    gap: 12px;
    align-items: center;
}

.modern-3 .logo-placeholder {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f0562c, #c8350d);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
}

.modern-3 .company-title {
    font-size: 14px;
    font-weight: 700;
    color: #ea3e0f;
}

.modern-3 .company-address {
    font-size: 11px;
    color: #1d1d1f;
    margin-top: 2px;
}

.modern-3 .invoice-box {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 12px;
    padding: 14px 20px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
}

.modern-3 .invoice-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ea3e0f;
    margin-bottom: 4px;
}

.modern-3 .invoice-number {
    font-size: 22px;
    font-weight: 800;
    color: #1d1d1f !important;
    margin-top: -4px;
    line-height: 1;
}

.modern-3 .info-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.modern-3 .glass-card {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.modern-3 .card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #c8350d;
    margin-bottom: 6px;
}

.modern-3 .client-name {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f !important;
    margin-bottom: 2px;
}

.modern-3 .client-address {
    font-size: 12px;
    color: #1d1d1f !important;
    line-height: 1.3;
}

.modern-3 .dates-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modern-3 .date-card {
    background: rgba(247, 167, 145, 0.20);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(245, 140, 111, 0.30);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modern-3 .date-card-due {
    background: rgba(234, 62, 15, 0.12);
    border: 1px solid rgba(234, 62, 15, 0.25);
}

.modern-3 .date-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #852308;
    margin-bottom: 4px;
}

.modern-3 .date-value {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}

.modern-3 .date-value-due {
    font-weight: 700;
    color: #852308;
}

.modern-3 .table-container {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.6);
}

.modern-3 table {
    width: 100%;
    border-collapse: collapse;
}

.modern-3 thead th {
    padding: 10px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #c8350d;
    border-bottom: 1px solid rgba(245, 140, 111, 0.25);
}

.modern-3 thead th:nth-child(2) { text-align: center; width: 50px; }
.modern-3 thead th:nth-child(3),
.modern-3 thead th:nth-child(4) { text-align: right; width: 80px; }

.modern-3 tbody td {
    padding: 12px 14px;
    font-size: 12px;
}

.modern-3 tbody td:nth-child(2) { text-align: center; color: #6e6e73; }
.modern-3 tbody td:nth-child(3) { text-align: right; color: #6e6e73; }
.modern-3 tbody td:nth-child(4) { text-align: right; font-weight: 600; color: #1d1d1f; }

.modern-3 tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgba(229, 229, 234, 0.31);
}

.modern-3 .item-name {
    font-weight: 500;
    color: #1d1d1f;
}

.modern-3 .item-description {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 2px;
}

.modern-3 .totals-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.modern-3 .totals {
    width: 220px;
}

.modern-3 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: #6e6e73;
    font-size: 12px;
}

.modern-3 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    margin-top: 8px;
    background: linear-gradient(135deg, #ea3e0f, #f0562c);
    border-radius: 10px;
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(234, 62, 15, 0.25);
}

.modern-3 .total-final-label {
    font-weight: 600;
    font-size: 13px;
}

.modern-3 .total-final-value {
    font-weight: 700;
    font-size: 16px;
}

.modern-3 .pay-now-button {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px 20px;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(12px);
    border: 2px solid #ea3e0f;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #c8350d;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.modern-3 .pay-now-button:hover {
    background: #ea3e0f;
    color: #ffffff;
}

.modern-3 .invoice-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 10px;
    color: #8e8e93;
}

.modern-3 .invoice-footer a {
    color: #ea3e0f;
    text-decoration: none;
}


/* === modern3b.css === */
/* Template: modern3b (Coral Wave #2 - Warm Gradient Header)
   Single source of truth for gallery + PDF rendering. */

/* Modern 3B: Coral Wave #2 - Warm Gradient Header */
.modern-3b .invoice {
    padding: 0;
    position: relative;
    width: 595px;
    height: 842px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.modern-3b .gradient-header {
    background: linear-gradient(135deg, #ea3e0f 0%, #f0562c 50%, #f09f2c 100%);
    padding: 24px 32px;
    position: relative;
}

.modern-3b .header-shine {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
}

.modern-3b .header-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.modern-3b .logo-section {
    display: flex;
    gap: 12px;
    align-items: center;
}

.modern-3b .logo-placeholder {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #c8350d;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.modern-3b .company-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}

.modern-3b .company-address {
    font-size: 11px;
    color: rgba(255,255,255,0.8);
    margin-top: 2px;
}

.modern-3b .invoice-info {
    text-align: right;
}

.modern-3b .invoice-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2px;
}

.modern-3b .invoice-number {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff !important;
    letter-spacing: -1px;
    margin-top: -4px;
    line-height: 1;
}

.modern-3b .invoice-body {
    padding: 24px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.modern-3b .info-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.modern-3b .info-card {
    padding: 14px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.modern-3b .info-card-bill {
    border-left: 3px solid #f0562c;
}

.modern-3b .card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #c8350d;
    margin-bottom: 6px;
}

.modern-3b .card-label-gray {
    color: #48484a;
}

.modern-3b .client-name {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f !important;
    margin-bottom: 2px;
}

.modern-3b .client-address {
    font-size: 12px;
    color: #1d1d1f !important;
    line-height: 1.3;
}

.modern-3b .date-value {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f !important;
}

.modern-3b .info-card-due {
    background: rgba(247, 167, 145, 0.15);
}

.modern-3b .card-label-due {
    color: #a72c0b;
}

.modern-3b .date-value-due {
    font-weight: 700;
    color: #c8350d;
}

.modern-3b table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.modern-3b thead th {
    padding: 10px 0;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #c8350d;
    border-bottom: 2px solid #f3714e;
}

.modern-3b thead th:nth-child(2) { text-align: center; width: 50px; }
.modern-3b thead th:nth-child(3),
.modern-3b thead th:nth-child(4) { text-align: right; width: 80px; }

.modern-3b tbody td {
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f7;
    font-size: 12px;
}

.modern-3b tbody td:nth-child(2) { text-align: center; color: #6e6e73; }
.modern-3b tbody td:nth-child(3) { text-align: right; color: #6e6e73; }
.modern-3b tbody td:nth-child(4) { text-align: right; font-weight: 600; color: #1d1d1f; }

.modern-3b .item-name {
    font-weight: 500;
    color: #1d1d1f;
}

.modern-3b .item-description {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 2px;
}

.modern-3b .totals-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.modern-3b .totals {
    width: 220px;
}

.modern-3b .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: #6e6e73;
    font-size: 12px;
}

.modern-3b .total-row-border {
    border-bottom: 1px solid #e5e5ea;
}

.modern-3b .total-final-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    align-items: center;
}

.modern-3b .total-final-label {
    font-weight: 600;
    font-size: 14px;
    color: #1d1d1f;
}

.modern-3b .total-final-value {
    font-weight: 800;
    font-size: 20px;
    color: #ea3e0f;
}

.modern-3b .pay-now-button {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ea3e0f, #f09f2c);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(234, 62, 15, 0.21);
    transition: all 0.2s;
}

.modern-3b .pay-now-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(234, 62, 15, 0.3);
}

.modern-3b .invoice-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 10px;
    color: #8e8e93;
}

.modern-3b .invoice-footer a {
    color: #ea3e0f;
    text-decoration: none;
}


/* === modern4.css === */
/* Template: modern4 (Mint Fresh #1 - Mint + Peach Harmony)
   Single source of truth for gallery + PDF rendering. */

/* Modern 4: Mint Fresh #1 - Mint + Peach Harmony */
.modern-4 .invoice {
    padding: 0;
    position: relative;
    width: 595px;
    height: 842px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.modern-4 .header {
    background: linear-gradient(135deg, #6fbfb3 0%, #9fd5c8 100%);
    padding: 24px 32px;
}

.modern-4 .header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.modern-4 .logo-section {
    display: flex;
    gap: 12px;
    align-items: center;
}

.modern-4 .logo-placeholder {
    width: 48px;
    height: 48px;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #2d6a6a;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.modern-4 .company-title {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff !important;
}

.modern-4 .company-address {
    font-size: 11px;
    color: rgba(255,255,255,0.85) !important;
    margin-top: 2px;
}

.modern-4 .invoice-info {
    text-align: right;
}

.modern-4 .invoice-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.8);
    margin-bottom: 2px;
}

.modern-4 .invoice-number {
    font-size: 22px;
    font-weight: 800;
    color: #ffffff !important;
    margin-top: -4px;
    line-height: 1;
}

.modern-4 .invoice-body {
    padding: 24px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.modern-4 .info-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.modern-4 .info-card {
    padding: 14px;
    background: #fde8dc;
    border-radius: 10px;
}

.modern-4 .info-card-bill {
    background: #d5f0ea;
    border-left: 3px solid #6fbfb3;
}

.modern-4 .card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2d6a6a;
    margin-bottom: 6px;
}

.modern-4 .card-label-peach {
    color: #b87a4a;
}

.modern-4 .client-name {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f !important;
    margin-bottom: 2px;
}

.modern-4 .client-address {
    font-size: 12px;
    color: #1d1d1f !important;
    line-height: 1.3;
}

.modern-4 .date-value {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f !important;
}

.modern-4 .info-card-due {
    background: #f8d4b0;
}

.modern-4 .card-label-due {
    color: #9a5c2e;
}

.modern-4 .date-value-due {
    font-weight: 700;
    color: #9a5c2e !important;
}

.modern-4 table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.modern-4 thead th {
    padding: 10px 0;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2d6a6a;
    border-bottom: 2px solid #6fbfb3;
}

.modern-4 thead th:nth-child(2) { text-align: center; width: 50px; }
.modern-4 thead th:nth-child(3),
.modern-4 thead th:nth-child(4) { text-align: right; width: 80px; }

.modern-4 tbody td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
}

.modern-4 tbody td:nth-child(2) { text-align: center; color: #6e6e73; }
.modern-4 tbody td:nth-child(3) { text-align: right; color: #6e6e73; }
.modern-4 tbody td:nth-child(4) { text-align: right; font-weight: 600; color: #1d1d1f; }

.modern-4 .item-name {
    font-weight: 500;
    color: #1d1d1f;
}

.modern-4 .item-description {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 2px;
}

.modern-4 .totals-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.modern-4 .totals {
    width: 220px;
}

.modern-4 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: #6e6e73;
    font-size: 12px;
}

.modern-4 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    margin-top: 8px;
    background: linear-gradient(135deg, #6fbfb3, #9fd5c8);
    border-radius: 10px;
    color: #ffffff;
}

.modern-4 .total-final-label {
    font-weight: 600;
    font-size: 13px;
}

.modern-4 .total-final-value {
    font-weight: 700;
    font-size: 16px;
}

.modern-4 .pay-now-button {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 20px;
    background: #f8d4b0;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.modern-4 .pay-now-button:hover {
    background: #f5c89d;
}

.modern-4 .invoice-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 10px;
    color: #8e8e93;
}

.modern-4 .invoice-footer a {
    color: #6fbfb3;
    text-decoration: none;
}


/* === modern4b.css === */
/* Template: modern4b (Mint Fresh #2 - Mint + Purple Elegance)
   Single source of truth for gallery + PDF rendering. */

/* Modern 4B: Mint Fresh #2 - Mint + Purple Elegance */
.modern-4b .invoice {
    padding: 0;
    position: relative;
    width: 595px;
    height: 842px;
    background: #ffffff;
    box-sizing: border-box;
}

.modern-4b .side-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, #9fd5c8 0%, #6fbfb3 50%, #3d2852 100%);
}

.modern-4b .content-wrapper {
    padding: 32px 32px 32px 38px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.modern-4b .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.modern-4b .logo-section {
    display: flex;
    gap: 12px;
    align-items: center;
}

.modern-4b .logo-placeholder {
    width: 48px;
    height: 48px;
    background: #3d2852;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
}

.modern-4b .company-title {
    font-size: 14px;
    font-weight: 700;
    color: #3d2852 !important;
}

.modern-4b .company-address {
    font-size: 11px;
    color: #6e6e73 !important;
    margin-top: 2px;
}

.modern-4b .invoice-info {
    text-align: right;
}

.modern-4b .invoice-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #6fbfb3;
    margin-bottom: 2px;
}

.modern-4b .invoice-number {
    font-size: 24px;
    font-weight: 800;
    color: #3d2852 !important;
    margin-top: -4px;
    line-height: 1;
}

.modern-4b .invoice-dates {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 6px;
    line-height: 1.4;
}

.modern-4b .invoice-dates strong {
    color: #1d1d1f;
}

.modern-4b .invoice-dates .due {
    color: #6fbfb3;
    font-weight: 600;
}

.modern-4b .client-section {
    background: #d5f0ea;
    padding: 16px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.modern-4b .section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2d6a6a;
    margin-bottom: 6px;
}

.modern-4b .client-name {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f !important;
    margin-bottom: 2px;
}

.modern-4b .client-address {
    font-size: 12px;
    color: #1d1d1f !important;
    line-height: 1.3;
}

.modern-4b table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.modern-4b thead th {
    padding: 10px 0;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #3d2852;
    border-bottom: 2px solid #3d2852;
}

.modern-4b thead th:nth-child(2) { text-align: center; width: 50px; }
.modern-4b thead th:nth-child(3),
.modern-4b thead th:nth-child(4) { text-align: right; width: 80px; }

.modern-4b tbody td {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 12px;
}

.modern-4b tbody td:nth-child(2) { text-align: center; color: #6e6e73; }
.modern-4b tbody td:nth-child(3) { text-align: right; color: #6e6e73; }
.modern-4b tbody td:nth-child(4) { text-align: right; font-weight: 600; color: #1d1d1f; }

.modern-4b .item-name {
    font-weight: 500;
    color: #1d1d1f;
}

.modern-4b .item-description {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 2px;
}

.modern-4b .totals-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.modern-4b .totals {
    width: 220px;
}

.modern-4b .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: #6e6e73;
    font-size: 12px;
}

.modern-4b .total-final {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    margin-top: 8px;
    background: #3d2852;
    border-radius: 10px;
    color: #ffffff;
}

.modern-4b .total-final-label {
    font-weight: 600;
    font-size: 13px;
}

.modern-4b .total-final-value {
    font-weight: 700;
    font-size: 16px;
    color: #9fd5c8;
}

.modern-4b .pay-now-button {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #6fbfb3, #9fd5c8);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.modern-4b .pay-now-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(111, 191, 179, 0.3);
}

.modern-4b .invoice-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 10px;
    color: #8e8e93;
}

.modern-4b .invoice-footer a {
    color: #6fbfb3;
    text-decoration: none;
}


/* === modern4c.css === */
/* Template: modern4c (Mint Fresh #3 - Mint + Pink Soft)
   Single source of truth for gallery + PDF rendering. */

/* Modern 4C: Mint Fresh #3 - Mint + Pink Soft */
.modern-4c .invoice {
    padding: 0;
    position: relative;
    width: 595px;
    height: 842px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
}

.modern-4c .decorative-corner {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #f8d0d5 0%, #fde8dc 100%);
    border-radius: 50%;
    opacity: 0.6;
}

.modern-4c .content-wrapper {
    position: relative;
    padding: 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.modern-4c .header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #d5f0ea;
}

.modern-4c .logo-section {
    display: flex;
    gap: 12px;
    align-items: center;
}

.modern-4c .logo-placeholder {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #9fd5c8, #6fbfb3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #ffffff;
}

.modern-4c .company-title {
    font-size: 14px;
    font-weight: 700;
    color: #2d6a6a !important;
}

.modern-4c .company-address {
    font-size: 11px;
    color: #6e6e73 !important;
    margin-top: 2px;
}

.modern-4c .invoice-box {
    background: #d5f0ea;
    border-radius: 12px;
    padding: 14px 20px;
    text-align: center;
}

.modern-4c .invoice-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #6fbfb3;
    margin-bottom: 4px;
}

.modern-4c .invoice-number {
    font-size: 20px;
    font-weight: 800;
    color: #2d6a6a !important;
    margin-top: -4px;
    line-height: 1;
}

.modern-4c .info-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.modern-4c .info-card {
    padding: 14px;
    background: #fde8dc;
    border-radius: 12px;
}

.modern-4c .card-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2d6a6a;
    margin-bottom: 6px;
}

.modern-4c .client-name {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f !important;
    margin-bottom: 2px;
}

.modern-4c .client-address {
    font-size: 12px;
    color: #1d1d1f !important;
    line-height: 1.3;
}

.modern-4c .dates-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modern-4c .date-card {
    background: #b8e8dc;
    border-radius: 12px;
    padding: 12px 16px;
}

.modern-4c .date-card-due {
    background: #f8d0d5;
}

.modern-4c .date-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #2d6a6a;
    margin-bottom: 2px;
}

.modern-4c .date-label-pink {
    color: #9a5a6a;
}

.modern-4c .date-value {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f !important;
}

.modern-4c .date-value-due {
    color: #9a5a6a !important;
    font-weight: 700;
}

.modern-4c table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.modern-4c thead th {
    padding: 10px 0;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #6fbfb3;
    border-bottom: 2px solid #9fd5c8;
}

.modern-4c thead th:nth-child(2) { text-align: center; width: 50px; }
.modern-4c thead th:nth-child(3),
.modern-4c thead th:nth-child(4) { text-align: right; width: 80px; }

.modern-4c tbody td {
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    font-size: 12px;
}

.modern-4c tbody td:nth-child(2) { text-align: center; color: #6e6e73; }
.modern-4c tbody td:nth-child(3) { text-align: right; color: #6e6e73; }
.modern-4c tbody td:nth-child(4) { text-align: right; font-weight: 600; color: #1d1d1f; }

.modern-4c .item-name {
    font-weight: 500;
    color: #1d1d1f;
}

.modern-4c .item-description {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 2px;
}

.modern-4c .totals-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.modern-4c .totals {
    width: 220px;
}

.modern-4c .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    color: #6e6e73;
    font-size: 12px;
}

.modern-4c .total-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    margin-top: 8px;
    border-top: 2px solid #2d6a6a;
}

.modern-4c .total-final-label {
    font-weight: 600;
    font-size: 14px;
    color: #1d1d1f;
}

.modern-4c .total-final-value {
    font-weight: 800;
    font-size: 20px;
    color: #6fbfb3;
}

.modern-4c .pay-now-button {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #f8d0d5, #fde8dc);
    border: 2px solid #f8d0d5;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.modern-4c .pay-now-button:hover {
    background: #f8d0d5;
}

.modern-4c .invoice-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 10px;
    color: #8e8e93;
}

.modern-4c .invoice-footer a {
    color: #6fbfb3;
    text-decoration: none;
}


/* === mono.css === */
/* Template: Mono — Single source of truth for gallery + PDF rendering */

.invoice-template-mono {
    background: #ffffff;
    width: 595px;
    height: 842px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.invoice-template-mono .mono-header {
    padding: 40px 48px;
    border-bottom: 1px solid #e5e5e7;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.invoice-template-mono .mono-logo {
    width: 40px;
    height: 40px;
    border: 1px solid #1d1d1f;
    border-radius: 8px;
    margin-bottom: 16px;
}

.invoice-template-mono .mono-company {
    font-size: 15px;
    font-weight: 700;
    color: #1d1d1f;
}

.invoice-template-mono .mono-address {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
    line-height: 1.6;
}

.invoice-template-mono .mono-invoice-label {
    font-size: 12px;
    color: #1d1d1f;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-align: right;
}

.invoice-template-mono .mono-invoice-number {
    font-size: 26px;
    font-weight: 800;
    color: #1d1d1f;
    letter-spacing: -1px;
    text-align: right;
}

.invoice-template-mono .mono-body {
    padding: 32px 48px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.invoice-template-mono .mono-info-row {
    display: flex;
    gap: 48px;
    margin-bottom: 36px;
}

.invoice-template-mono .mono-billto {
    flex: 1;
}

.invoice-template-mono .mono-label {
    font-size: 9px;
    letter-spacing: 2px;
    color: #1d1d1f;
    font-weight: 600;
    margin-bottom: 10px;
}

.invoice-template-mono .mono-label-muted {
    font-size: 9px;
    letter-spacing: 2px;
    color: #6e6e73;
    font-weight: 600;
    margin-bottom: 10px;
}

.invoice-template-mono .mono-client {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-template-mono .mono-client-address {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
    line-height: 1.6;
}

.invoice-template-mono .mono-date {
    font-size: 13px;
    color: #1d1d1f;
}

.invoice-template-mono .mono-date-bold {
    font-size: 13px;
    color: #1d1d1f;
    font-weight: 600;
}

.invoice-template-mono table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
}

.invoice-template-mono th {
    text-align: left;
    padding: 12px 0;
    font-size: 9px;
    letter-spacing: 1px;
    color: #6e6e73;
    font-weight: 600;
    border-top: 1px solid #1d1d1f;
    border-bottom: 1px solid #e5e5e7;
}

.invoice-template-mono th.qty { text-align: center; width: 50px; }
.invoice-template-mono th.rate { text-align: right; width: 100px; }
.invoice-template-mono th.amount { text-align: right; width: 80px; }

.invoice-template-mono td {
    padding: 14px 0;
    font-size: 13px;
    color: #1d1d1f;
    border-bottom: 1px solid #f0f0f0;
}

.invoice-template-mono td.qty { text-align: center; color: #6e6e73; }
.invoice-template-mono td.rate { text-align: right; color: #6e6e73; }
.invoice-template-mono td.amount { text-align: right; font-weight: 600; }

.invoice-template-mono tr:last-child td {
    border-bottom: none;
}

.invoice-template-mono .mono-totals-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.invoice-template-mono .mono-totals-box {
    width: 240px;
}

.invoice-template-mono .mono-totals-inner {
    border: 1px solid #1d1d1f;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}

.invoice-template-mono .mono-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #6e6e73;
}

.invoice-template-mono .mono-total-row .value {
    color: #1d1d1f;
}

.invoice-template-mono .mono-total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin-top: 8px;
    border-top: 1px solid #e5e5e7;
}

.invoice-template-mono .mono-total-final .label {
    font-size: 13px;
    color: #1d1d1f;
    font-weight: 600;
}

.invoice-template-mono .mono-total-final .value {
    font-size: 18px;
    font-weight: 700;
    color: #1d1d1f;
}

.invoice-template-mono .mono-disclaimer {
    font-size: 9px;
    color: #a1a1a6;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.invoice-template-mono .mono-paynow {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 10px 0;
    background: #1d1d1f;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.invoice-template-mono .mono-paynow:hover {
    opacity: 0.9;
}

.invoice-template-mono .mono-footer {
    text-align: center;
    font-size: 10px;
    color: #a1a1a6;
    margin-top: 16px;
}


/* === papertrail1.css === */
/* Template: Papertrail 1 — Single source of truth for gallery + PDF rendering. */

/* Paper Trail 1: Pink Ledger */
.papertrail-1 .invoice {
    width: 595px;
    height: 842px;
    background: #fef9f7;
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    box-sizing: border-box;
}

.papertrail-1 .aged-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(250, 142, 170, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(247, 107, 28, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.papertrail-1 .content {
    position: relative;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.papertrail-1 .header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 3px double #d4727a;
}

.papertrail-1 .company-name {
    font-size: 28px;
    font-weight: 700;
    color: #c4545e;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.papertrail-1 .company-tagline {
    font-size: 10px;
    letter-spacing: 3px;
    color: #8e6e73;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.papertrail-1 .company-address {
    font-size: 11px;
    color: #6e5a5e;
    font-style: italic;
}

.papertrail-1 .invoice-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #e8d0d3;
}

.papertrail-1 .meta-left {
    font-size: 11px;
    color: #6e5a5e;
}

.papertrail-1 .meta-left strong {
    color: #1d1d1f;
    display: block;
    font-size: 13px;
    margin-top: 4px;
}

.papertrail-1 .meta-right {
    text-align: right;
}

.papertrail-1 .invoice-number {
    font-size: 20px;
    font-weight: 700;
    color: #c4545e;
    font-family: 'Courier New', monospace;
}

.papertrail-1 .invoice-date {
    font-size: 10px;
    color: #8e6e73;
    margin-top: 4px;
}

.papertrail-1 .ledger-table {
    flex: 1;
    margin-bottom: 20px;
}

.papertrail-1 .ledger-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    background: linear-gradient(180deg, #fce8eb 0%, #f8d4d8 100%);
    border-top: 2px solid #d4727a;
    border-bottom: 2px solid #d4727a;
}

.papertrail-1 .ledger-header span {
    padding: 10px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8e4a52;
    border-right: 1px solid #e8b8be;
}

.papertrail-1 .ledger-header span:last-child {
    border-right: none;
}

.papertrail-1 .ledger-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    border-bottom: 1px solid #f0d8db;
}

.papertrail-1 .ledger-row:nth-child(odd) {
    background: rgba(252, 232, 235, 0.3);
}

.papertrail-1 .ledger-row span {
    padding: 12px 8px;
    font-size: 12px;
    color: #1d1d1f;
    border-right: 1px solid #f0d8db;
}

.papertrail-1 .ledger-row span:last-child {
    border-right: none;
    font-weight: 600;
}

.papertrail-1 .item-description {
    font-size: 10px;
    color: #8e8e93;
    margin-top: 2px;
}

.papertrail-1 .totals {
    margin-left: auto;
    width: 200px;
    border-top: 2px solid #d4727a;
    padding-top: 12px;
}

.papertrail-1 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #6e5a5e;
}

.papertrail-1 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin-top: 8px;
    border-top: 3px double #d4727a;
    font-size: 15px;
    font-weight: 700;
    color: #c4545e;
}

.papertrail-1 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #8e6e73;
    font-style: italic;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #e8d0d3;
}

.papertrail-1 .invoice-footer a {
    color: #c4545e;
    text-decoration: none;
}

.papertrail-1 .pay-now-btn {
    display: block;
    border: 2px solid #c4545e;
    color: #c4545e;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}


/* === papertrail2.css === */
/* Template: Papertrail 2 — Single source of truth for gallery + PDF rendering. */

/* Paper Trail 2: Coral Vintage */
.papertrail-2 .invoice {
    width: 595px;
    height: 842px;
    background: linear-gradient(180deg, #fef8f6 0%, #ffffff 30%);
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    box-sizing: border-box;
}

.papertrail-2 .decorative-border {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border: 1px solid #f0a891;
    pointer-events: none;
}

.papertrail-2 .decorative-border::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid #f5c4b5;
}

.papertrail-2 .content {
    position: relative;
    padding: 32px 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.papertrail-2 .header {
    text-align: center;
    margin-bottom: 24px;
}

.papertrail-2 .logo-placeholder {
    width: 64px;
    height: 64px;
    border: 2px solid #ea3e0f;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #ea3e0f;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.papertrail-2 .company-name {
    font-size: 32px;
    font-weight: 700;
    color: #c8350d;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.papertrail-2 .company-details {
    font-size: 10px;
    letter-spacing: 2px;
    color: #9a5c2e;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.papertrail-2 .header-line {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #ea3e0f 20%, #f09f2c 80%, transparent 100%);
    margin: 0 32px;
}

.papertrail-2 .info-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 16px 0;
}

.papertrail-2 .bill-to {
    flex: 1;
}

.papertrail-2 .section-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: #ea3e0f;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
}

.papertrail-2 .client-name {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.papertrail-2 .client-address {
    font-size: 11px;
    color: #6e6e73;
    line-height: 1.4;
}

.papertrail-2 .invoice-details {
    text-align: right;
}

.papertrail-2 .invoice-number {
    font-size: 22px;
    font-weight: 700;
    color: #c8350d;
    font-family: 'Courier New', monospace;
    margin-bottom: 6px;
}

.papertrail-2 .invoice-dates {
    font-size: 11px;
    color: #6e6e73;
    line-height: 1.5;
}

.papertrail-2 .invoice-dates strong {
    color: #1d1d1f;
}

.papertrail-2 .table-container {
    flex: 1;
    margin-bottom: 16px;
}

.papertrail-2 .table-header {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    border-top: 2px solid #ea3e0f;
    border-bottom: 2px solid #ea3e0f;
    background: linear-gradient(180deg, #fff5f2 0%, #fef0eb 100%);
}

.papertrail-2 .table-header span {
    padding: 10px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #c8350d;
}

.papertrail-2 .table-row {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    border-bottom: 1px solid #f5d5c8;
}

.papertrail-2 .table-row span {
    padding: 12px 8px;
    font-size: 12px;
    color: #1d1d1f;
}

.papertrail-2 .table-row span:last-child {
    font-weight: 600;
}

.papertrail-2 .item-description {
    font-size: 10px;
    color: #8e8e93;
    margin-top: 2px;
}

.papertrail-2 .totals {
    margin-left: auto;
    width: 200px;
}

.papertrail-2 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #6e6e73;
}

.papertrail-2 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    margin-top: 8px;
    border-top: 2px solid #ea3e0f;
    border-bottom: 2px solid #ea3e0f;
    color: #c8350d;
    font-size: 14px;
    font-weight: 700;
}

.papertrail-2 .pay-now-btn {
    display: block;
    border: 2px solid #ea3e0f;
    color: #ea3e0f;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.papertrail-2 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #9a5c2e;
    font-style: italic;
    margin-top: auto;
}

.papertrail-2 .invoice-footer a {
    color: #ea3e0f;
    text-decoration: none;
}


/* === papertrail3.css === */
/* Template: Papertrail 3 — Single source of truth for gallery + PDF rendering. */

/* Paper Trail 3: Mint Ledger */
.papertrail-3 .invoice {
    width: 595px;
    height: 842px;
    background: #fdfdf9;
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    box-sizing: border-box;
}

.papertrail-3 .paper-lines {
    position: absolute;
    top: 180px;
    left: 32px;
    right: 32px;
    bottom: 80px;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 24px,
        #d5f0ea 24px,
        #d5f0ea 25px
    );
    pointer-events: none;
}

.papertrail-3 .margin-line {
    position: absolute;
    top: 180px;
    left: 72px;
    bottom: 80px;
    width: 1px;
    background: #f8d4b0;
    pointer-events: none;
}

.papertrail-3 .content {
    position: relative;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.papertrail-3 .header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 2px solid #6fbfb3;
}

.papertrail-3 .logo-placeholder {
    width: 64px;
    height: 64px;
    border: 2px solid #6fbfb3;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #6fbfb3;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.papertrail-3 .company-name {
    font-size: 26px;
    font-weight: 700;
    color: #2d6a6a;
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.papertrail-3 .company-address {
    font-size: 11px;
    color: #6e6e73;
    font-style: italic;
}

.papertrail-3 .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 14px;
    background: #f8f8f5;
    border-left: 4px solid #6fbfb3;
}

.papertrail-3 .client-info .label,
.papertrail-3 .invoice-info .label {
    font-size: 10px;
    letter-spacing: 1px;
    color: #6fbfb3;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}

.papertrail-3 .client-info .name {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 2px;
}

.papertrail-3 .client-info .address {
    font-size: 11px;
    color: #6e6e73;
}

.papertrail-3 .invoice-info {
    text-align: right;
}

.papertrail-3 .invoice-info .number {
    font-size: 18px;
    font-weight: 700;
    color: #2d6a6a;
    font-family: 'Courier New', monospace;
}

.papertrail-3 .invoice-info .dates {
    font-size: 10px;
    color: #6e6e73;
    margin-top: 4px;
}

.papertrail-3 .ledger {
    flex: 1;
    margin-bottom: 16px;
}

.papertrail-3 .ledger-head {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    background: #2d6a6a;
    color: #ffffff;
}

.papertrail-3 .ledger-head span {
    padding: 10px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.papertrail-3 .ledger-row {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
}

.papertrail-3 .ledger-row span {
    padding: 11px 8px 13px;
    font-size: 12px;
    color: #1d1d1f;
}

.papertrail-3 .ledger-row span:last-child {
    font-weight: 600;
}

.papertrail-3 .item-description {
    font-size: 10px;
    color: #8e8e93;
    margin-top: 2px;
}

.papertrail-3 .totals {
    margin-left: auto;
    width: 200px;
}

.papertrail-3 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #6e6e73;
}

.papertrail-3 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    margin-top: 8px;
    border-top: 2px solid #f8d4b0;
    border-bottom: 2px solid #f8d4b0;
    color: #9a5c2e;
    font-size: 14px;
    font-weight: 700;
}

.papertrail-3 .pay-now-btn {
    display: block;
    border: 2px solid #f8d4b0;
    color: #9a5c2e;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.papertrail-3 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #6e6e73;
    font-style: italic;
    margin-top: auto;
}

.papertrail-3 .invoice-footer a {
    color: #6fbfb3;
    text-decoration: none;
}


/* === papertrail4.css === */
/* Template: Papertrail 4 — Single source of truth for gallery + PDF rendering. */

/* Paper Trail 4: Pink Ruled */
.papertrail-4 .invoice {
    width: 595px;
    height: 842px;
    background: #fffbf9;
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    box-sizing: border-box;
}

.papertrail-4 .ruled-area {
    position: absolute;
    top: 310px;
    left: 0;
    right: 0;
    bottom: 160px;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 23px,
        #fce8eb 23px,
        #fce8eb 24px
    );
    pointer-events: none;
}

.papertrail-4 .pink-header-line {
    position: absolute;
    top: 310px;
    left: 0;
    right: 0;
    height: 2px;
    background: #d4727a;
}

.papertrail-4 .vertical-lines {
    position: absolute;
    top: 310px;
    left: 40px;
    right: 40px;
    bottom: 160px;
    background: 
        linear-gradient(90deg, transparent 242px, #fce8eb 242px, #fce8eb 243px, transparent 243px),
        linear-gradient(90deg, transparent 320px, #fce8eb 320px, #fce8eb 321px, transparent 321px),
        linear-gradient(90deg, transparent 417px, #fce8eb 417px, #fce8eb 418px, transparent 418px);
    pointer-events: none;
}

.papertrail-4 .content {
    position: relative;
    padding: 32px 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.papertrail-4 .invoice-badge {
    position: absolute;
    top: 32px;
    right: 40px;
    text-align: right;
}

.papertrail-4 .invoice-badge .label {
    font-size: 10px;
    letter-spacing: 1px;
    color: #c4545e;
    text-transform: uppercase;
    font-family: 'Courier New', monospace;
}

.papertrail-4 .invoice-badge .number {
    font-size: 16px;
    font-weight: 700;
    color: #c4545e;
    font-family: 'Courier New', monospace;
    margin-bottom: 4px;
}

.papertrail-4 .invoice-badge .dates {
    font-size: 9px;
    color: #6e6e73;
    font-family: 'Courier New', monospace;
    line-height: 1.4;
}

.papertrail-4 .header {
    margin-bottom: 20px;
}

.papertrail-4 .header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.papertrail-4 .company-block {
    flex: 1;
}

.papertrail-4 .logo-placeholder {
    width: 64px;
    height: 64px;
    border: 2px solid #c4545e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #c4545e;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.papertrail-4 .company-name {
    font-size: 26px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.papertrail-4 .company-subtitle {
    font-size: 11px;
    color: #8e6e73;
    font-style: italic;
    letter-spacing: 1px;
}

.papertrail-4 .company-address {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 6px;
}

.papertrail-4 .date-block {
    text-align: right;
    font-size: 12px;
    color: #1d1d1f;
}

.papertrail-4 .date-block .city {
    font-style: italic;
    color: #6e6e73;
}

.papertrail-4 .client-line {
    font-size: 13px;
    color: #1d1d1f;
    padding: 10px 0;
    border-bottom: 1px solid #d4727a;
}

.papertrail-4 .client-line .label {
    font-size: 10px;
    letter-spacing: 1px;
    color: #c4545e;
    text-transform: uppercase;
    font-weight: 600;
}

.papertrail-4 .client-line strong {
    font-weight: 600;
}

.papertrail-4 .items-header {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    padding: 10px 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #c4545e;
}

.papertrail-4 .items-area {
    flex: 1;
}

.papertrail-4 .item-row {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    padding: 10px 0;
    font-size: 12px;
    color: #1d1d1f;
}

.papertrail-4 .item-row span:last-child {
    font-weight: 600;
}

.papertrail-4 .item-description {
    font-size: 10px;
    color: #8e8e93;
    margin-top: 2px;
}

.papertrail-4 .totals {
    margin-left: auto;
    width: 160px;
    margin-top: auto;
    padding-bottom: 32px;
}

.papertrail-4 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 11px;
    color: #6e6e73;
}

.papertrail-4 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    margin-top: 6px;
    border-top: 2px solid #c4545e;
    border-bottom: 2px solid #c4545e;
    font-size: 14px;
    font-weight: 700;
    color: #c4545e;
}

.papertrail-4 .pay-now-btn {
    display: block;
    border: 2px solid #c4545e;
    color: #c4545e;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.papertrail-4 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #8e6e73;
    margin-top: auto;
}

.papertrail-4 .invoice-footer a {
    color: #c4545e;
    text-decoration: none;
}


/* === papertrail5.css === */
/* Template: Papertrail 5 — Single source of truth for gallery + PDF rendering. */

/* Paper Trail 5: Teal Certificate */
.papertrail-5 .invoice {
    width: 595px;
    height: 842px;
    background: #ffffff;
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    box-sizing: border-box;
}

.papertrail-5 .border-frame {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid #4ecdc4;
    pointer-events: none;
}

.papertrail-5 .corner-ornament {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid #4ecdc4;
}

.papertrail-5 .corner-ornament.top-left {
    top: 16px;
    left: 16px;
    border-right: none;
    border-bottom: none;
}

.papertrail-5 .corner-ornament.top-right {
    top: 16px;
    right: 16px;
    border-left: none;
    border-bottom: none;
}

.papertrail-5 .corner-ornament.bottom-left {
    bottom: 16px;
    left: 16px;
    border-right: none;
    border-top: none;
}

.papertrail-5 .corner-ornament.bottom-right {
    bottom: 16px;
    right: 16px;
    border-left: none;
    border-top: none;
}

.papertrail-5 .content {
    position: relative;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.papertrail-5 .header {
    text-align: center;
    margin-bottom: 24px;
}

.papertrail-5 .logo-placeholder {
    width: 64px;
    height: 64px;
    border: 2px solid #4ecdc4;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #4ecdc4;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.papertrail-5 .company-name {
    font-size: 24px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.papertrail-5 .company-tagline {
    font-size: 10px;
    letter-spacing: 3px;
    color: #4ecdc4;
    text-transform: uppercase;
}

.papertrail-5 .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #4ecdc4, transparent);
    margin: 20px 32px;
}

.papertrail-5 .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.papertrail-5 .info-box {
    padding: 14px;
    border: 1px solid #e0f5f3;
    background: #f8fffe;
}

.papertrail-5 .info-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: #4ecdc4;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
}

.papertrail-5 .info-value {
    font-size: 13px;
    color: #1d1d1f;
    font-weight: 600;
}

.papertrail-5 .info-subvalue {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 4px;
}

.papertrail-5 .table-section {
    flex: 1;
    margin-bottom: 16px;
}

.papertrail-5 .table-head {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    border-top: 2px solid #4ecdc4;
    border-bottom: 2px solid #4ecdc4;
    background: #f0faf9;
}

.papertrail-5 .table-head span {
    padding: 10px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #2d8a84;
}

.papertrail-5 .table-row {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    border-bottom: 1px solid #e0f5f3;
}

.papertrail-5 .table-row span {
    padding: 12px 8px;
    font-size: 12px;
    color: #1d1d1f;
}

.papertrail-5 .table-row span:last-child {
    font-weight: 600;
}

.papertrail-5 .item-description {
    font-size: 10px;
    color: #8e8e93;
    margin-top: 2px;
}

.papertrail-5 .totals {
    margin-left: auto;
    width: 200px;
}

.papertrail-5 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #6e6e73;
}

.papertrail-5 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    margin-top: 8px;
    background: linear-gradient(135deg, #4ecdc4, #45b7aa);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
}

.papertrail-5 .pay-now-btn {
    display: block;
    border: 2px solid #4ecdc4;
    color: #4ecdc4;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.papertrail-5 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #6e6e73;
    margin-top: auto;
}

.papertrail-5 .invoice-footer a {
    color: #4ecdc4;
    text-decoration: none;
}


/* === papertrail6.css === */
/* Template: Papertrail 6 — Single source of truth for gallery + PDF rendering. */

/* Paper Trail 6: Neutral Merchant */
.papertrail-6 .invoice {
    width: 595px;
    height: 842px;
    background: #f8f7f4;
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    box-sizing: border-box;
}

.papertrail-6 .header-band {
    background: #52503c;
    padding: 24px 32px;
    text-align: center;
}

.papertrail-6 .company-name {
    font-size: 26px;
    font-weight: 700;
    color: #cdcbbb;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.papertrail-6 .company-tagline {
    font-size: 10px;
    letter-spacing: 3px;
    color: #9f9c7d;
    text-transform: uppercase;
}

.papertrail-6 .content {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 90px);
    box-sizing: border-box;
}

.papertrail-6 .invoice-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #cdcbbb;
    margin-bottom: 20px;
}

.papertrail-6 .invoice-label {
    font-size: 10px;
    letter-spacing: 2px;
    color: #52503c;
    text-transform: uppercase;
    font-weight: 600;
}

.papertrail-6 .invoice-number {
    font-size: 18px;
    font-weight: 700;
    color: #3d3c2d;
    font-family: 'Courier New', monospace;
}

.papertrail-6 .info-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #cdcbbb;
}

.papertrail-6 .section-label {
    font-size: 10px;
    letter-spacing: 1px;
    color: #7b785a;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
}

.papertrail-6 .client-name {
    font-size: 13px;
    font-weight: 600;
    color: #3d3c2d;
    margin-bottom: 4px;
}

.papertrail-6 .client-address {
    font-size: 11px;
    color: #66644b;
    line-height: 1.4;
}

.papertrail-6 .dates {
    text-align: right;
    font-size: 11px;
    color: #66644b;
    line-height: 1.5;
}

.papertrail-6 .dates strong {
    color: #3d3c2d;
}

.papertrail-6 .table-area {
    flex: 1;
    margin-bottom: 16px;
}

.papertrail-6 .table-header {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    background: #7b785a;
    color: #f8f7f4;
}

.papertrail-6 .table-header span {
    padding: 10px 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.papertrail-6 .table-row {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    border-bottom: 1px solid #cdcbbb;
}

.papertrail-6 .table-row:nth-child(odd) {
    background: rgba(205, 203, 187, 0.2);
}

.papertrail-6 .table-row span {
    padding: 12px;
    font-size: 12px;
    color: #3d3c2d;
}

.papertrail-6 .table-row span:last-child {
    font-weight: 600;
}

.papertrail-6 .item-description {
    font-size: 10px;
    color: #8f8c6a;
    margin-top: 2px;
}

.papertrail-6 .totals {
    margin-left: auto;
    width: 200px;
}

.papertrail-6 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #66644b;
}

.papertrail-6 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    margin-top: 8px;
    background: #52503c;
    color: #cdcbbb;
    font-size: 14px;
    font-weight: 700;
}

.papertrail-6 .pay-now-btn {
    display: block;
    border: 2px solid #52503c;
    color: #52503c;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.papertrail-6 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #8f8c6a;
    margin-top: auto;
}

.papertrail-6 .invoice-footer a {
    color: #7b785a;
    text-decoration: none;
}


/* === papertrail7.css === */
/* Template: Papertrail 7 — Single source of truth for gallery + PDF rendering. */

/* Paper Trail 7: Peach Soft */
.papertrail-7 .invoice {
    width: 595px;
    height: 842px;
    background: linear-gradient(180deg, #fdf5f0 0%, #ffffff 50%);
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    box-sizing: border-box;
}

.papertrail-7 .peach-border {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    bottom: 16px;
    border: 2px solid #f5cbb7;
    pointer-events: none;
}

.papertrail-7 .content {
    position: relative;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.papertrail-7 .header {
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f5cbb7;
}

.papertrail-7 .company-name {
    font-size: 28px;
    font-weight: 700;
    color: #c4856c;
    letter-spacing: 3px;
    margin-bottom: 6px;
}

.papertrail-7 .company-tagline {
    font-size: 10px;
    letter-spacing: 3px;
    color: #d4a088;
    text-transform: uppercase;
}

.papertrail-7 .invoice-deco {
    display: inline-block;
    margin-top: 14px;
    position: relative;
    padding: 10px 28px;
    border: 2px solid #f5cbb7;
}

.papertrail-7 .invoice-deco::before,
.papertrail-7 .invoice-deco::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #f5cbb7;
}

.papertrail-7 .invoice-deco::before {
    top: -5px;
    left: -5px;
    border-right: none;
    border-bottom: none;
}

.papertrail-7 .invoice-deco::after {
    top: -5px;
    right: -5px;
    border-left: none;
    border-bottom: none;
}

.papertrail-7 .invoice-deco-inner::before,
.papertrail-7 .invoice-deco-inner::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 2px solid #f5cbb7;
}

.papertrail-7 .invoice-deco-inner::before {
    bottom: -5px;
    left: -5px;
    border-right: none;
    border-top: none;
}

.papertrail-7 .invoice-deco-inner::after {
    bottom: -5px;
    right: -5px;
    border-left: none;
    border-top: none;
}

.papertrail-7 .invoice-deco span {
    font-size: 11px;
    font-weight: 600;
    color: #8b5a42;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.papertrail-7 .info-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.papertrail-7 .info-card {
    background: #fef8f4;
    padding: 14px;
    border-left: 3px solid #f5cbb7;
}

.papertrail-7 .card-label {
    font-size: 10px;
    letter-spacing: 1px;
    color: #c4856c;
    text-transform: uppercase;
    margin-bottom: 6px;
    font-weight: 600;
}

.papertrail-7 .client-name {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.papertrail-7 .client-address {
    font-size: 11px;
    color: #6e6e73;
    line-height: 1.4;
}

.papertrail-7 .date-value {
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
}

.papertrail-7 .table-container {
    flex: 1;
    margin-bottom: 16px;
}

.papertrail-7 .table-header {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    border-top: 2px solid #c4856c;
    border-bottom: 2px solid #c4856c;
    background: #fef5f0;
}

.papertrail-7 .table-header span {
    padding: 10px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8b5a42;
}

.papertrail-7 .table-row {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    border-bottom: 1px solid #f5e0d5;
}

.papertrail-7 .table-row span {
    padding: 12px 8px;
    font-size: 12px;
    color: #1d1d1f;
}

.papertrail-7 .table-row span:last-child {
    font-weight: 600;
}

.papertrail-7 .item-description {
    font-size: 10px;
    color: #8e8e93;
    margin-top: 2px;
}

.papertrail-7 .totals {
    margin-left: auto;
    width: 200px;
}

.papertrail-7 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #6e6e73;
}

.papertrail-7 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    margin-top: 8px;
    background: linear-gradient(135deg, #f5cbb7, #f8d8c8);
    color: #8b5a42;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
}

.papertrail-7 .pay-now-btn {
    display: block;
    border: 2px solid #c4856c;
    color: #c4856c;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.papertrail-7 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #c4856c;
    font-style: italic;
    margin-top: auto;
}

.papertrail-7 .invoice-footer a {
    color: #c4856c;
    text-decoration: none;
}


/* === papertrail8.css === */
/* Template: Papertrail 8 — Single source of truth for gallery + PDF rendering. */

/* Paper Trail 8: Olive Ledger */
.papertrail-8 .invoice {
    width: 595px;
    height: 842px;
    background: #fdfcf8;
    position: relative;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: hidden;
    box-sizing: border-box;
}

.papertrail-8 .ruled-lines {
    position: absolute;
    top: 280px;
    left: 32px;
    right: 32px;
    bottom: 160px;
    background: repeating-linear-gradient(
        180deg,
        transparent 0px,
        transparent 25px,
        #cdcbbb 25px,
        #cdcbbb 26px
    );
    pointer-events: none;
}

.papertrail-8 .margin-line {
    position: absolute;
    top: 280px;
    left: 80px;
    bottom: 160px;
    width: 1px;
    background: #bebba6;
    pointer-events: none;
}

.papertrail-8 .content {
    position: relative;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.papertrail-8 .header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 3px double #7b785a;
}

.papertrail-8 .logo-placeholder {
    width: 64px;
    height: 64px;
    border: 2px solid #7b785a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #7b785a;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.papertrail-8 .company-info {
    flex: 1;
}

.papertrail-8 .company-name {
    font-size: 24px;
    font-weight: 700;
    color: #3d3c2d;
    letter-spacing: 2px;
    margin-bottom: 4px;
}

.papertrail-8 .company-address {
    font-size: 11px;
    color: #66644b;
    font-style: italic;
}

.papertrail-8 .info-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 14px;
    background: rgba(205, 203, 187, 0.3);
    border-left: 4px solid #7b785a;
}

.papertrail-8 .bill-to .label {
    font-size: 10px;
    letter-spacing: 1px;
    color: #7b785a;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}

.papertrail-8 .bill-to .name {
    font-size: 13px;
    font-weight: 600;
    color: #3d3c2d;
    margin-bottom: 2px;
}

.papertrail-8 .bill-to .address {
    font-size: 11px;
    color: #66644b;
}

.papertrail-8 .invoice-info {
    text-align: right;
}

.papertrail-8 .invoice-info .label {
    font-size: 10px;
    letter-spacing: 1px;
    color: #7b785a;
    text-transform: uppercase;
    margin-bottom: 4px;
    font-weight: 600;
}

.papertrail-8 .invoice-info .number {
    font-size: 18px;
    font-weight: 700;
    color: #52503c;
    font-family: 'Courier New', monospace;
}

.papertrail-8 .invoice-info .dates {
    font-size: 10px;
    color: #66644b;
    margin-top: 4px;
}

.papertrail-8 .ledger {
    flex: 1;
    margin-bottom: 16px;
}

.papertrail-8 .ledger-head {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
    background: #66644b;
    color: #f8f7f4;
}

.papertrail-8 .ledger-head span {
    padding: 10px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.papertrail-8 .ledger-row {
    display: grid;
    grid-template-columns: 2.5fr 0.8fr 1fr 1fr;
}

.papertrail-8 .ledger-row span {
    padding: 12px 8px;
    font-size: 12px;
    color: #3d3c2d;
}

.papertrail-8 .ledger-row span:last-child {
    font-weight: 600;
}

.papertrail-8 .item-description {
    font-size: 10px;
    color: #8f8c6a;
    margin-top: 2px;
}

.papertrail-8 .totals {
    margin-left: auto;
    width: 200px;
}

.papertrail-8 .total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 12px;
    color: #66644b;
}

.papertrail-8 .total-final {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    margin-top: 8px;
    border-top: 2px solid #52503c;
    border-bottom: 2px solid #52503c;
    font-size: 14px;
    font-weight: 700;
    color: #3d3c2d;
}

.papertrail-8 .pay-now-btn {
    display: block;
    border: 2px solid #7b785a;
    color: #7b785a;
    padding: 8px 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    font-style: normal;
    margin-top: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.papertrail-8 .invoice-footer {
    text-align: center;
    font-size: 10px;
    color: #8f8c6a;
    margin-top: auto;
}

.papertrail-8 .invoice-footer a {
    color: #7b785a;
    text-decoration: none;
}


/* === split.css === */
/* Template: Split — Single source of truth for gallery + PDF rendering */

.invoice-template-split {
    background: #ffffff;
    width: 595px;
    height: 842px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.invoice-template-split .split-header {
    display: flex;
}

.invoice-template-split .split-sidebar {
    width: 38%;
    background: #aeac92;
    padding: 40px 28px;
    min-height: 260px;
}

.invoice-template-split .split-invoice-label {
    font-size: 10px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 12px;
}

.invoice-template-split .split-invoice-number {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -1px;
    margin-bottom: 20px;
    line-height: 1.1;
}

.invoice-template-split .split-date {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 4px;
}

.invoice-template-split .split-due {
    font-size: 12px;
    color: #ffffff;
    font-weight: 600;
}

.invoice-template-split .split-right {
    flex: 1;
    padding: 40px 36px 40px 28px;
}

.invoice-template-split .split-company {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
}

.invoice-template-split .split-address {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
}

.invoice-template-split .split-billto {
    padding-top: 20px;
    margin-top: 24px;
    border-top: 1px solid #f0f0f0;
}

.invoice-template-split .split-label {
    font-size: 9px;
    letter-spacing: 2px;
    color: #aeac92;
    font-weight: 600;
    margin-bottom: 8px;
}

.invoice-template-split .split-client {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-template-split .split-client-address {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
}

.invoice-template-split .split-body {
    padding: 32px 36px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.invoice-template-split table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 28px;
}

.invoice-template-split th {
    text-align: left;
    padding: 12px 0;
    font-size: 9px;
    letter-spacing: 1px;
    color: #aeac92;
    font-weight: 600;
    border-bottom: 2px solid #aeac92;
}

.invoice-template-split th.qty { text-align: center; width: 50px; }
.invoice-template-split th.rate { text-align: right; width: 100px; }
.invoice-template-split th.amount { text-align: right; width: 80px; }

.invoice-template-split td {
    padding: 14px 0;
    font-size: 13px;
    color: #1d1d1f;
    border-bottom: 1px solid #f0f0f0;
}

.invoice-template-split td.qty { text-align: center; color: #6e6e73; }
.invoice-template-split td.rate { text-align: right; color: #6e6e73; }
.invoice-template-split td.amount { text-align: right; font-weight: 600; }

.invoice-template-split tr:last-child td {
    border-bottom: none;
}

.invoice-template-split .split-totals-wrapper {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
}

.invoice-template-split .split-totals-box {
    width: 240px;
}

.invoice-template-split .split-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 13px;
    color: #6e6e73;
}

.invoice-template-split .split-total-final {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    margin-top: 10px;
    background: #aeac92;
    border-radius: 8px;
}

.invoice-template-split .split-total-final .label {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.invoice-template-split .split-total-final .value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
}

.invoice-template-split .split-paynow {
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    background: #aeac92;
    border: 2px solid #aeac92;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
}

.invoice-template-split .split-disclaimer {
    font-size: 9px;
    color: #a1a1a6;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.invoice-template-split .split-footer {
    text-align: center;
    font-size: 10px;
    color: #a1a1a6;
    margin-top: 16px;
}


/* === stark.css === */
/* Template: Stark — Single source of truth for gallery + PDF rendering */

.invoice-template-stark {
    background: #ffffff;
    width: 595px;
    height: 842px;
    padding: 48px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.invoice-template-stark .stark-topline {
    width: 100%;
    height: 3px;
    background: #26251c;
    margin-bottom: 48px;
}

.invoice-template-stark .stark-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 56px;
}

.invoice-template-stark .stark-from-label {
    font-size: 10px;
    letter-spacing: 3px;
    color: #26251c;
    font-weight: 600;
    margin-bottom: 12px;
}

.invoice-template-stark .stark-company {
    font-size: 14px;
    color: #26251c;
    font-weight: 600;
}

.invoice-template-stark .stark-address {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
    line-height: 1.6;
}

.invoice-template-stark .stark-invoice-title {
    font-size: 40px;
    font-weight: 200;
    color: #26251c;
    letter-spacing: -2px;
    line-height: 1;
    text-align: right;
}

.invoice-template-stark .stark-invoice-meta {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 10px;
    text-align: right;
}

.invoice-template-stark .stark-billto {
    margin-bottom: 48px;
}

.invoice-template-stark .stark-billto-label {
    font-size: 10px;
    letter-spacing: 3px;
    color: #26251c;
    font-weight: 600;
    margin-bottom: 12px;
}

.invoice-template-stark .stark-client {
    font-size: 14px;
    color: #26251c;
    font-weight: 600;
}

.invoice-template-stark .stark-client-address {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 4px;
}

.invoice-template-stark table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
}

.invoice-template-stark th {
    text-align: left;
    padding: 12px 0;
    font-size: 10px;
    letter-spacing: 2px;
    color: #26251c;
    font-weight: 600;
    border-bottom: 1px solid #26251c;
}

.invoice-template-stark th.qty { text-align: center; width: 50px; }
.invoice-template-stark th.rate { text-align: right; width: 100px; }
.invoice-template-stark th.amount { text-align: right; width: 80px; }

.invoice-template-stark td {
    padding: 14px 0;
    font-size: 13px;
    color: #26251c;
}

.invoice-template-stark td.qty { text-align: center; color: #6e6e73; }
.invoice-template-stark td.rate { text-align: right; color: #6e6e73; }
.invoice-template-stark td.amount { text-align: right; font-weight: 500; }

.invoice-template-stark tr:last-child td {
    border-bottom: 1px solid #e5e5e7;
}

.invoice-template-stark .stark-totals-wrapper {
    margin-top: auto;
}

.invoice-template-stark .stark-totals {
    display: flex;
    justify-content: flex-end;
}

.invoice-template-stark .stark-totals-box {
    width: 220px;
}

.invoice-template-stark .stark-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #6e6e73;
}

.invoice-template-stark .stark-total-final {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    margin-top: 8px;
    border-top: 3px solid #26251c;
}

.invoice-template-stark .stark-total-final .label {
    font-size: 13px;
    font-weight: 600;
    color: #26251c;
}

.invoice-template-stark .stark-total-final .value {
    font-size: 20px;
    font-weight: 700;
    color: #26251c;
}

.invoice-template-stark .stark-paynow {
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    background: #ffffff;
    border: 2px solid #26251c;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #26251c;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
}

.invoice-template-stark .stark-disclaimer {
    font-size: 9px;
    color: #a1a1a6;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.invoice-template-stark .stark-footer {
    text-align: center;
    font-size: 10px;
    color: #a1a1a6;
    margin-top: 16px;
}


/* === type.css === */
/* Template: Type — Single source of truth for gallery + PDF rendering */

.invoice-template-type {
    background: #ffffff;
    width: 595px;
    height: 842px;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
    min-height: 100%;
}

.invoice-template-type .type-main {
    flex: 1;
    padding: 48px 48px 32px;
    display: flex;
    flex-direction: column;
}

.invoice-template-type .type-header {
    margin-bottom: 48px;
}

.invoice-template-type .type-invoice-number {
    font-size: 56px;
    font-weight: 800;
    color: #66ccbe;
    letter-spacing: -3px;
    line-height: 1;
}

.invoice-template-type .type-invoice-meta {
    font-size: 11px;
    letter-spacing: 3px;
    color: #6e6e73;
    font-weight: 500;
    margin-top: 10px;
}

.invoice-template-type .type-invoice-meta .separator {
    margin: 0 8px;
    color: #d1d1d6;
}

.invoice-template-type .type-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.invoice-template-type .type-label {
    font-size: 9px;
    letter-spacing: 3px;
    color: #66ccbe;
    font-weight: 600;
    margin-bottom: 10px;
}

.invoice-template-type .type-label-muted {
    font-size: 9px;
    letter-spacing: 3px;
    color: #6e6e73;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: right;
}

.invoice-template-type .type-client {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.invoice-template-type .type-client-address {
    font-size: 13px;
    color: #6e6e73;
    line-height: 1.6;
}

.invoice-template-type .type-due {
    font-size: 16px;
    font-weight: 700;
    color: #1d1d1f;
    text-align: right;
}

.invoice-template-type .type-items {
    border-top: 1px solid #e5e5e7;
    padding-top: 20px;
    margin-bottom: 32px;
}

.invoice-template-type .type-item {
    display: flex;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f0;
}

.invoice-template-type .type-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-template-type .type-item-detail {
    font-size: 12px;
    color: #6e6e73;
    margin-top: 2px;
}

.invoice-template-type .type-item-amount {
    font-size: 15px;
    font-weight: 700;
    color: #1d1d1f;
}

.invoice-template-type .type-totals-wrapper {
    margin-top: auto;
}

.invoice-template-type .type-totals-wrapper .invoice-bottom-row {
    width: 100%;
}

.invoice-template-type .type-totals-wrapper .invoice-bottom-right {
    display: flex;
    justify-content: flex-end;
}

.invoice-template-type .type-totals-box {
    width: 260px;
}

.invoice-template-type .type-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #6e6e73;
}

.invoice-template-type .type-total-row .value {
    color: #1d1d1f;
}

.invoice-template-type .type-total-final {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    margin-top: 8px;
    border-top: 2px solid #1d1d1f;
}

.invoice-template-type .type-total-final .label {
    font-size: 13px;
    color: #1d1d1f;
    font-weight: 600;
}

.invoice-template-type .type-total-final .value {
    font-size: 28px;
    font-weight: 800;
    color: #66ccbe;
    letter-spacing: -1px;
}

.invoice-template-type .type-paynow {
    width: 100%;
    margin-top: 12px;
    padding: 12px 20px;
    background: #66ccbe;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
}

.invoice-template-type .type-disclaimer {
    font-size: 9px;
    color: #a1a1a6;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.invoice-template-type .type-footer-bar {
    border-top: 1px solid #e5e5e7;
    padding: 20px 48px;
    background: #fafafa;
}

.invoice-template-type .type-footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-template-type .type-footer-company {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-template-type .type-footer-address {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 2px;
}

.invoice-template-type .type-footer-contact {
    text-align: right;
    font-size: 11px;
    color: #6e6e73;
}

.invoice-template-type .type-footer-contact div {
    margin-top: 2px;
}

.invoice-template-type .type-footer {
    text-align: center;
    font-size: 10px;
    color: #a1a1a6;
    margin-top: 12px;
}


/* === wire.css === */
/* Template: Wire — Single source of truth for gallery + PDF rendering */

.invoice-template-wire {
    background: #ffffff;
    width: 595px;
    height: 842px;
    padding: 40px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
    min-height: 100%;
}

.invoice-template-wire .wire-frame {
    border: 1px solid #c97100;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 40px;
}

.invoice-template-wire .wire-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e5e5e7;
}

.invoice-template-wire .wire-logo {
    width: 40px;
    height: 40px;
    border: 2px solid #c97100;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.invoice-template-wire .wire-logo-inner {
    width: 20px;
    height: 20px;
    background: #c97100;
}

.invoice-template-wire .wire-company {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-template-wire .wire-address {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 4px;
}

.invoice-template-wire .wire-invoice-label {
    font-size: 10px;
    letter-spacing: 4px;
    color: #c97100;
    font-weight: 500;
    margin-bottom: 6px;
    text-align: right;
}

.invoice-template-wire .wire-invoice-number {
    font-size: 28px;
    font-weight: 300;
    color: #1d1d1f;
    letter-spacing: -1px;
    text-align: right;
}

.invoice-template-wire .wire-invoice-date {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 6px;
    text-align: right;
}

.invoice-template-wire .wire-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 28px;
}

.invoice-template-wire .wire-label {
    font-size: 9px;
    letter-spacing: 3px;
    color: #c97100;
    font-weight: 500;
    margin-bottom: 10px;
}

.invoice-template-wire .wire-label-muted {
    font-size: 9px;
    letter-spacing: 3px;
    color: #6e6e73;
    font-weight: 500;
    margin-bottom: 10px;
    text-align: right;
}

.invoice-template-wire .wire-client {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-template-wire .wire-client-address {
    font-size: 11px;
    color: #6e6e73;
    margin-top: 4px;
    line-height: 1.6;
}

.invoice-template-wire .wire-due {
    font-size: 14px;
    font-weight: 600;
    color: #c97100;
    text-align: right;
}

.invoice-template-wire table {
    width: 100%;
    border-collapse: collapse;
}

.invoice-template-wire th {
    text-align: left;
    padding: 10px 0;
    font-size: 9px;
    letter-spacing: 2px;
    color: #6e6e73;
    font-weight: 500;
    border-top: 1px solid #c97100;
    border-bottom: 1px solid #c97100;
}

.invoice-template-wire th.qty { text-align: center; width: 50px; }
.invoice-template-wire th.rate { text-align: right; width: 100px; }
.invoice-template-wire th.amount { text-align: right; width: 80px; }

.invoice-template-wire td {
    padding: 12px 0;
    font-size: 13px;
    color: #1d1d1f;
}

.invoice-template-wire td.qty { text-align: center; color: #6e6e73; }
.invoice-template-wire td.rate { text-align: right; color: #6e6e73; }
.invoice-template-wire td.amount { text-align: right; font-weight: 500; }

.invoice-template-wire .wire-spacer {
    flex: 1;
}

.invoice-template-wire .wire-totals-wrapper {
    display: flex;
    justify-content: flex-end;
}

.invoice-template-wire .wire-totals-box {
    width: 220px;
}

.invoice-template-wire .wire-total-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: #6e6e73;
}

.invoice-template-wire .wire-total-final {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    margin-top: 10px;
    border-top: 2px solid #c97100;
    border-bottom: 2px solid #c97100;
}

.invoice-template-wire .wire-total-final .label {
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
}

.invoice-template-wire .wire-total-final .value {
    font-size: 18px;
    font-weight: 600;
    color: #c97100;
}

.invoice-template-wire .wire-paynow {
    width: 100%;
    margin-top: 14px;
    padding: 12px 20px;
    background: #ffffff;
    border: 2px solid #c97100;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    color: #c97100;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
}

.invoice-template-wire .wire-disclaimer {
    font-size: 9px;
    color: #a1a1a6;
    margin-top: 8px;
    text-align: center;
    line-height: 1.4;
}

.invoice-template-wire .wire-footer {
    text-align: center;
    font-size: 10px;
    color: #a1a1a6;
    margin-top: 16px;
}