/* invoice-generator styles */

    :root {
      /* App Theme */
      --bg: #081324;
      --bg-soft: #0d1d36;
      --panel: rgba(11, 26, 48, 0.95);
      --line: rgba(255, 255, 255, 0.1);
      --text: #f3f7fb;
      --brand: #00d084;
      --brand-hover: #18e19a;
      
      /* Premium Invoice Typography & Colors */
      --paper: #ffffff;
      --ink-dark: #0f172a;    /* Headings, totals, bold values */
      --ink: #334155;         /* Normal body text */
      --ink-muted: #64748b;   /* Descriptions, secondary notes */
      --ink-light: #94a3b8;   /* Small uppercase labels */
      --paper-border: #e2e8f0; /* Crisp, thin dividing lines */
      --paper-border-light: #f1f5f9;
      --input-hover: #f8fafc;
      --focus-ring: rgba(0, 208, 132, 0.15);
      
      --radius-lg: 16px;
      --radius-md: 8px;
      --muted: #9fb1c9;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
    html { scroll-behavior: smooth; }

    body {
      background: radial-gradient(circle at 0% 0%, rgba(0, 208, 132, 0.1), transparent 20%),
                  linear-gradient(180deg, var(--bg-soft), var(--bg));
      color: var(--text);
      min-height: 100vh;
      overflow-x: hidden;
      padding-bottom: 80px;
    }

    /* --- Top App Bar --- */
    .app-header {
      position: sticky; top: 0; z-index: 100;
      background: rgba(8, 19, 36, 0.85); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
    }
    .top-bar {
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 24px; max-width: 1400px; margin: 0 auto;
    }
    .brand { font-weight: 900; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
    .brand span { color: var(--brand); }
    
    .nav-actions { display: flex; gap: 10px; flex-wrap: wrap; }
    .btn {
      padding: 10px 16px; border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 600;
      cursor: pointer; border: 1px solid transparent; transition: all 0.2s ease;
      display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    }
    .btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-hover)); color: #081324; box-shadow: 0 4px 14px rgba(0, 208, 132, 0.2); }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 208, 132, 0.3); }
    .btn-secondary { background: rgba(255, 255, 255, 0.05); color: var(--text); border-color: var(--line); }
    .btn-secondary:hover, .btn-secondary.active { background: rgba(255, 255, 255, 0.1); border-color: var(--brand); }
    .btn-danger { background: rgba(255, 123, 123, 0.1); color: #ff7b7b; border-color: rgba(255, 123, 123, 0.2); }

    /* --- Hidden Mega Menus --- */
    .mega-menu { display: none; position: fixed; top: 78px; right: 16px; width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 96px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); z-index: 120; }
    .mega-menu.active { display: block; animation: slideDown 0.2s ease; }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    
    .menu-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
    .menu-section h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand); margin-bottom: 16px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
    .menu-section p { color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin-bottom: 12px; }
    
    .menu-control { margin-bottom: 12px; }
    .menu-control label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; color: var(--muted); transition: 0.2s; }
    .menu-control label:hover { color: var(--text); }
    
    .custom-input, .custom-select { width: 100%; min-height: 48px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(0,0,0,0.2); color: var(--text); font-size: 0.95rem; margin-top: 4px; }
    .custom-select option, .custom-select optgroup { background: #0b1a30; color: var(--text); }
    textarea.custom-input { min-height: 118px; resize: vertical; }
    .stack-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .menu-buttons { display: grid; gap: 10px; }
    .custom-input:focus, .custom-select:focus { outline: none; border-color: var(--brand); }

    .library-list { max-height: 200px; overflow-y: auto; background: rgba(0,0,0,0.2); border-radius: 6px; padding: 4px; }
    .library-item { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); }
    .library-item:last-child { border-bottom: none; }
    .lib-text { font-size: 0.9rem; font-weight: 600; color: var(--text); }
    .lib-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
    
    .editor-container.drawer-open { padding-right: 470px; transition: padding-right 0.22s ease; }
    .drawer-field { margin-bottom: 14px; }
    .drawer-field label { display: block; margin-bottom: 6px; color: var(--text); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

    /* --- The WYSIWYG Invoice Paper --- */
    .editor-container { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; }
    .invoice-paper {
      width: 100%; max-width: 850px; background: var(--paper); color: var(--ink);
      border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.2);
      padding: var(--page-pad, 55px); position: relative; overflow: hidden;
      line-height: 1.4;
    }
    
    .theme-classic .accent-bar { background: #102240 !important; }
    .theme-modern .accent-bar { background: var(--brand) !important; }
    .theme-minimal { box-shadow: 0 18px 42px rgba(0,0,0,0.12); }
    .theme-minimal .accent-bar { background: #d1d5db !important; }
    .theme-bold .accent-bar { background: linear-gradient(90deg, #081324, #00d084, #2563eb) !important; }
    .theme-compact { --page-pad: 40px; }

    .accent-bar { position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--brand); }

    /* Seamless Inputs - Tighter Padding for Clean Alignment */
    .seamless-input {
      width: 100%; border: 1px solid transparent; background: transparent; color: inherit;
      font-size: inherit; font-weight: inherit; padding: 2px 4px; border-radius: 4px;
      transition: all 0.2s; resize: none; outline: none; font-family: inherit; line-height: inherit;
      margin-left: -4px; /* Pull back to align raw text with bounding boxes */
    }
    textarea.seamless-input { overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; min-height: 1.4em; }
    textarea.seamless-input::-webkit-scrollbar { display: none; }
    .seamless-input:hover { background: var(--input-hover); border-color: var(--paper-border); }
    .seamless-input:focus { background: white; border-color: var(--brand); box-shadow: 0 0 0 3px var(--focus-ring); z-index: 10; position: relative; margin-left: 0; padding: 2px 8px; }

    /* --- PROFESSIONAL HIERARCHY GRIDS --- */
    
    /* Header Block */
    .inv-header { display: grid; grid-template-columns: 1fr max-content; gap: var(--header-gap, 20px); margin-bottom: var(--header-mb, 25px); align-items: start; }
    
    .logo-box { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; min-width: 0; }
    .logo-media { margin-bottom: 8px; }
    .logo-preview { max-width: 140px; max-height: 70px; object-fit: contain; cursor: pointer; border-radius: 4px; }
    .logo-upload-btn { background: var(--input-hover); color: var(--ink-muted); font-size: 0.8rem; font-weight: 600; padding: 8px 12px; border-radius: 6px; border: 1px dashed var(--paper-border); cursor: pointer; }
    .logo-upload-btn input { display: none; }
    
    /* Document Meta Info */
    .inv-title-box { display: flex; flex-direction: column; align-items: flex-end; }
    .badge-container { margin-bottom: 12px; }
    .status-badge { display: inline-block; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
    .status-draft { background: var(--input-hover); color: var(--ink-muted); border: 1px solid var(--paper-border); }
    .status-sent { background: #dbeafe; color: #1d4ed8; }
    .status-unpaid { background: #fee2e2; color: #b91c1c; }
    .status-partial { background: #fef3c7; color: #b45309; }
    .status-paid { background: #dcfce7; color: #15803d; }
    .status-overdue { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
    .status-credit { background: #e0e7ff; color: #4338ca; }

    /* Title & Meta Grid */
    #docType { font-size: 2.2rem; font-weight: 900; text-align: right; text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink-dark); margin-bottom: 6px; }
    .meta-grid { display: grid; grid-template-columns: max-content 120px; gap: 2px 12px; align-items: center; justify-content: end; }
    .meta-grid label { text-align: right; font-size: 0.7rem; color: var(--ink-light); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
    .meta-grid .seamless-input { text-align: right; font-size: 0.85rem; font-weight: 600; color: var(--ink-dark); }

    /* Company & Customer Details */
    #compName { font-size: 1.25rem; font-weight: 800; color: var(--ink-dark); margin-bottom: 2px; }
    #compDetails, #compTax { font-size: var(--body-copy-size, 0.85rem); color: var(--ink-muted); }
    
    .billing-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--billing-gap, 30px); margin-bottom: var(--billing-mb, 25px); align-items: start; }
    .bill-box { min-width: 0; min-height: 112px; }
    .bill-box h3 { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--bill-heading, var(--brand)); letter-spacing: 0.06em; border-bottom: 1px solid var(--bill-heading-border, rgba(0, 208, 132, 0.22)); margin-bottom: 8px; padding-bottom: 6px; }
    #custName { font-size: 1rem; font-weight: 700; color: var(--ink-dark); margin-bottom: 2px; }
    #custDetails, #shipDetails { font-size: var(--body-copy-size, 0.85rem); color: var(--ink-muted); }
    
    .preview-lines { display: grid; gap: 2px; padding-top: 4px; }
    .preview-line { font-size: var(--body-copy-size, 0.85rem); color: var(--ink-muted); }
    .preview-line:first-child { font-size: 1rem; font-weight: 700; color: var(--ink-dark); margin-bottom: 2px; }

    /* Line Items Table */
    .items-header {
      display: grid; grid-template-columns: 3fr 1fr 1fr 60px 60px 1fr 20px; gap: 10px;
      padding: 0 4px 6px 4px; border-bottom: 2px solid var(--paper-border);
      color: var(--ink-light); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px;
    }
    .item-row {
      display: grid; grid-template-columns: 3fr 1fr 1fr 60px 60px 1fr 20px; gap: 10px;
      align-items: center; border-bottom: 1px solid var(--paper-border-light); padding: var(--item-row-py, 8px) 4px;
    }
    /* Value targeting for items done in JS renderItems */
    .item-name { font-size: var(--item-name-size, 0.95rem); }
    .item-desc { font-size: var(--item-desc-size, 0.85rem); }
    
    .amount-cell { display: flex; align-items: center; justify-content: flex-end; font-size: 0.95rem; font-weight: 700; color: var(--ink-dark); }
    .row-del-btn { background: transparent; border: none; color: var(--ink-light); cursor: pointer; height: 24px; width: 24px; display: flex; align-items: center; justify-content: center; border-radius: 4px; }
    .row-del-btn:hover { background: #fee2e2; color: var(--danger); }
    .add-row-btn { width: 100%; margin-top: 12px; padding: 10px; background: transparent; border: 1px dashed var(--paper-border); color: var(--ink-muted); font-size: 0.85rem; font-weight: 600; border-radius: 6px; cursor: pointer; transition: 0.2s; }
    .add-row-btn:hover { background: var(--input-hover); color: var(--brand); border-color: var(--brand); }

    /* Totals Structure */
    .totals-wrapper { display: flex; justify-content: flex-end; margin-top: var(--totals-mt, 16px); }
    .totals-box { width: min(420px, 48%); min-width: 340px; display: flex; flex-direction: column; gap: 4px; }
    .total-line { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; flex-wrap: wrap; gap: 4px 8px; }
    .total-line label { color: var(--ink-muted); font-size: 0.8rem; font-weight: 500; display: flex; align-items: center; gap: 8px; }
    .total-line div, .total-line input { font-size: 0.9rem; font-weight: 600; color: var(--ink-dark); text-align: right; }
    .total-inline-readout { font-size: 0.75rem !important; font-weight: 600 !important; color: var(--ink-muted) !important; min-width: 4.5rem; }
    
    .total-line.grand-total { border-top: 2px solid var(--ink-dark); margin-top: 4px; padding-top: 10px; }
    .total-line.grand-total label { color: var(--ink-dark); font-size: 0.9rem; font-weight: 700; }
    .total-line.grand-total div { font-size: 1.15rem; font-weight: 800; color: var(--ink-dark); }
    
    #paid-row-bal { background: var(--input-hover); border-radius: 6px; padding: 10px 12px; margin-top: 6px; }
    #paid-row-bal label strong { color: var(--ink-dark); font-size: 0.85rem; }
    #paid-row-bal div { font-size: 1.1rem; font-weight: 800; color: var(--ink-dark); }

    /* Footer / Secondary Info */
    .inv-footer { margin-top: var(--footer-mt, 40px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--footer-gap, 30px); }
    #notes, #paymentInfo, #termsInfo { font-size: var(--footer-copy-size, 0.8rem); color: var(--ink-muted); line-height: 1.5; }
    
    .signature-box { border-top: 1px solid var(--paper-border); padding-top: 10px; text-align: center; margin-top: var(--signature-mt, 30px); width: 200px; float: right; }
    #sigName { font-size: 0.85rem; font-weight: 600; color: var(--ink-dark); text-align: center; }

    /* Live invoice is fully editable. (Older builds used .paper-preview here with pointer-events:none, which made the canvas feel "dead".) */

    .hide-section { display: none !important; }

    /* Full-width promo below the invoice (not beside it) */
    .tool-promo-section {
      max-width: 1200px;
      margin: 0 auto 8px;
      padding: 0 24px 48px;
    }
    .tool-promo-inner {
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.03);
      padding: 28px 32px;
      text-align: center;
    }
    .tool-promo-title {
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #fff;
      margin-bottom: 14px;
    }
    .tool-promo-inner p {
      color: var(--muted);
      font-size: 0.95rem;
      line-height: 1.65;
      max-width: 640px;
      margin: 0 auto 12px;
    }
    .tool-promo-inner p:last-of-type { margin-bottom: 0; }
    .tool-promo-links {
      margin-top: 18px !important;
      margin-bottom: 0 !important;
      font-weight: 600;
    }
    .tool-promo-links a {
      color: var(--brand);
      text-decoration: none;
    }
    .tool-promo-links a:hover { text-decoration: underline; }
    .tool-promo-sep { color: var(--muted); padding: 0 6px; }

    /* --- SEO Section --- */
    .seo-section { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
    .seo-hero { text-align: center; margin-bottom: 50px; }
    .seo-hero h1 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 16px; letter-spacing: -0.03em; }
    .seo-hero p { color: var(--muted); font-size: 1.05rem; max-width: 700px; margin: 0 auto; line-height: 1.6; }
    .seo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
    .seo-card { padding: 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.03); border: 1px solid var(--line); }
    .seo-card h3 { margin-bottom: 12px; color: #fff; font-size: 1.1rem; }
    .seo-card p { color: var(--muted); line-height: 1.6; font-size: 0.95rem; }

    /* --- PDF Export Engine --- */
    .pdf-export-host { position: absolute; left: 0; top: 0; width: 800px; z-index: -9999; pointer-events: none; }
    .pdf-export-clone {
      width: 800px !important; padding: var(--pdf-pad-y, 40px) var(--pdf-pad-x, 44px) !important; margin: 0 !important; position: relative !important;
      box-sizing: border-box !important; max-width: none !important; border-radius: 0 !important; box-shadow: none !important;
      background: #ffffff !important; color: var(--ink) !important;
      font-size: 13.5px !important; line-height: 1.4 !important; overflow: hidden !important;
    }
    .pdf-export-clone .hide-on-pdf { display: none !important; }
    .pdf-static-text { white-space: pre-wrap !important; word-wrap: break-word !important; height: auto !important; min-height: 1.2em !important; border: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; display: block !important; font-family: inherit; line-height: 1.4 !important; }
    .pdf-export-clone .inv-header { margin-bottom: var(--pdf-header-mb, 32px) !important; }
    .pdf-export-clone .billing-row { margin-bottom: var(--pdf-billing-mb, 22px) !important; gap: var(--pdf-billing-gap, 26px) !important; }
    .pdf-export-clone .items-header { margin-bottom: 4px !important; padding-bottom: 5px !important; }
    .pdf-export-clone .item-row { padding-top: var(--pdf-item-row-py, 7px) !important; padding-bottom: var(--pdf-item-row-py, 7px) !important; }
    .pdf-export-clone .totals-wrapper { margin-top: var(--pdf-totals-mt, 14px) !important; }
    .pdf-export-clone .totals-box { width: 320px !important; min-width: 0 !important; }
    .pdf-export-clone .total-line { padding-top: 4px !important; padding-bottom: 4px !important; }
    .pdf-export-clone .inv-footer { margin-top: var(--pdf-footer-mt, 30px) !important; gap: var(--pdf-footer-gap, 26px) !important; }
    .pdf-export-clone .signature-box { margin-top: var(--pdf-signature-mt, 24px) !important; }

    /* Safe PDF Break Handling */
    .pdf-export-clone .item-row,
    .pdf-export-clone .totals-wrapper,
    .pdf-export-clone .inv-footer { page-break-inside: avoid !important; break-inside: avoid !important; }
    
    @media print {
      body { background: #ffffff !important; padding-bottom: 0 !important; }
      body > *:not(.pdf-export-host) { display: none !important; }
      .pdf-export-host { position: static !important; left: auto !important; width: 100% !important; visibility: visible !important; }
      .pdf-export-clone { width: 100% !important; padding: 0 !important; }
      @page { size: A4 portrait; margin: 15mm; }
    }
    
    /* --- Mobile --- */
    @media (max-width: 850px) {
      .mega-menu { top: 116px; left: 10px; right: 10px; width: auto; max-height: calc(100vh - 132px); }
      .editor-container.drawer-open { padding-right: 10px; }
      .top-bar { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px 8px; }
      .brand { font-size: 0.98rem; min-width: 0; gap: 6px; }
      .brand svg { width: 18px; height: 18px; flex: 0 0 18px; }
      .nav-actions {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
        padding-bottom: 0;
      }
      .nav-actions .btn {
        min-width: 0;
        white-space: nowrap;
        padding: 8px 6px;
        font-size: 0.72rem;
        gap: 4px;
      }
      .nav-actions .btn svg { width: 12px; height: 12px; }
      .stack-2 { grid-template-columns: 1fr; }
      .editor-container { padding: 16px 8px 24px; }

      .invoice-paper:not(.pdf-export-clone) { padding: 18px 14px; border-radius: var(--radius-md); }
      .invoice-paper:not(.pdf-export-clone) .inv-header { grid-template-columns: 1fr !important; gap: 20px !important; }
      .invoice-paper:not(.pdf-export-clone) .inv-title-box { align-items: flex-start; }
      .invoice-paper:not(.pdf-export-clone) .badge-container { justify-content: flex-start; }
      .invoice-paper:not(.pdf-export-clone) #docType { text-align: left; font-size: 1.7rem; line-height: 1.05; }
      .invoice-paper:not(.pdf-export-clone) .meta-grid { justify-content: start; grid-template-columns: 82px minmax(0, 1fr); gap: 4px 10px; }
      .invoice-paper:not(.pdf-export-clone) .meta-grid label, .invoice-paper:not(.pdf-export-clone) .meta-grid .seamless-input { text-align: left; }
      .invoice-paper:not(.pdf-export-clone) .billing-row { grid-template-columns: 1fr !important; gap: 25px !important; margin-bottom: 25px; }
      .invoice-paper:not(.pdf-export-clone) .bill-box { min-height: 0; }
      .invoice-paper:not(.pdf-export-clone) .inv-footer { grid-template-columns: 1fr !important; gap: 20px; }
      .invoice-paper:not(.pdf-export-clone) .totals-box { min-width: 0; }
      .invoice-paper:not(.pdf-export-clone) .logo-upload-btn { padding: 8px 10px; font-size: 0.78rem; }
      
      .invoice-paper:not(.pdf-export-clone) .items-header { display: none; }
      .invoice-paper:not(.pdf-export-clone) .item-row { grid-template-columns: 1fr 1fr; grid-template-areas: "desc desc" "qty price" "tax disc" "total delete"; gap: 8px; background: #f8fafc; border: 1px solid var(--paper-border); border-radius: 8px; padding: 12px; margin-bottom: 12px; align-items: end; }
      .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(1) { grid-area: desc; }
      .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(2) { grid-area: qty; } .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(2)::before { content: "Qty"; font-size: 0.7rem; color: var(--ink-light); display: block; margin-bottom: 2px; }
      .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(3) { grid-area: price; } .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(3)::before { content: "Price"; font-size: 0.7rem; color: var(--ink-light); display: block; margin-bottom: 2px; }
      .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(4) { grid-area: tax; } .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(4)::before { content: "Tax %"; font-size: 0.7rem; color: var(--ink-light); display: block; margin-bottom: 2px; }
      .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(5) { grid-area: disc; } .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(5)::before { content: "Disc %"; font-size: 0.7rem; color: var(--ink-light); display: block; margin-bottom: 2px; }
      .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(6) { grid-area: total; justify-content: flex-start; font-size: 1.05rem; }
      .invoice-paper:not(.pdf-export-clone) .item-row > div:nth-child(7) { grid-area: delete; justify-content: flex-end; }
      
      .invoice-paper:not(.pdf-export-clone) .totals-wrapper { justify-content: stretch; }
      .invoice-paper:not(.pdf-export-clone) .totals-box { width: 100%; }

      .tool-promo-section { padding: 0 12px 28px; margin-bottom: 0; }
      .tool-promo-inner { padding: 20px 16px; }
      .tool-promo-title { font-size: 1.05rem; }

      .seo-section { padding: 26px 12px; }
      .seo-hero { margin-bottom: 28px; }
      .seo-hero h1 { font-size: 1.55rem; }
      .seo-hero p { font-size: 0.92rem; line-height: 1.55; }
      .seo-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
      .seo-card { padding: 18px 16px; }
      .seo-card h3 { font-size: 1rem; }
      .seo-card p { font-size: 0.9rem; line-height: 1.55; }

      .mobile-action-bar { display: none; }
    }
    @media (min-width: 851px) { .mobile-action-bar { display: none; } }

    .whatsapp-support-fab {
      position: fixed;
      left: 16px;
      bottom: 16px;
      z-index: 180;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-radius: 999px;
      background: #25D366;
      color: #ffffff;
      font-size: 0.9rem;
      font-weight: 800;
      text-decoration: none;
      box-shadow: 0 18px 36px rgba(37, 211, 102, 0.35);
      transition: transform 0.2s ease, background 0.2s ease;
    }
    .whatsapp-support-fab:hover { transform: translateY(-1px); background: #1ebe5b; }
    @media (max-width: 850px) {
      .whatsapp-support-fab { left: 10px; bottom: 10px; padding: 12px; }
      .whatsapp-support-fab span { display: none; }
    }

    #toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--brand); color: #000; padding: 12px 24px; border-radius: 30px; font-weight: 700; opacity: 0; transition: all 0.3s ease; z-index: 1000; box-shadow: 0 10px 30px rgba(0,208,132,0.3); }
    #toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }