diff --git a/app/index.html b/app/index.html
index 80121eb..02baae5 100644
--- a/app/index.html
+++ b/app/index.html
@@ -3,251 +3,401 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="format-detection" content="telephone=no">
   <title>Invoice</title>
+  <script>
+    /* Restore persisted theme before first paint */
+    (function(){var t=localStorage.getItem("kb-theme");if(t)document.documentElement.setAttribute("data-theme",t);})();
+  </script>
   <style>
-    /* ── Variables ──────────────────────────────────────────────────────────── */
-    :root {
-      --navy:        #1e2d45;
-      --slate:       #64748b;
-      --border:      #d1d5db;
-      --border-light:#e5e7eb;
-      --bg:          #f3f4f6;
-      --white:       #ffffff;
-      --accent:      #1d4ed8;
-      --accent-hover:#1e40af;
-      --text:        #111827;
-      --text-muted:  #6b7280;
-      --danger:      #dc2626;
-      --success:     #15803d;
-      --radius:      4px;
+    /* ── Fonts (Bunny CDN — privacy-respecting, offline-graceful) ──────────── */
+    @font-face {
+      font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 800;
+      font-display: swap;
+      src: local("Schibsted Grotesk"),
+           url("https://fonts.bunny.net/schibsted-grotesk/files/schibsted-grotesk-latin-400-normal.woff2") format("woff2");
+    }
+    @font-face {
+      font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600;
+      font-display: swap;
+      src: local("JetBrains Mono"),
+           url("https://fonts.bunny.net/jetbrains-mono/files/jetbrains-mono-latin-500-normal.woff2") format("woff2");
     }
 
-    /* ── Reset / Base ───────────────────────────────────────────────────────── */
+    /* ── kBenestad design tokens — light ───────────────────────────────────── */
+    :root {
+      --font-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+      --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      --font-scale: 1;
+      --fs-base:  calc(15px * var(--font-scale));
+      --fs-input: calc(15px * var(--font-scale));
+      --fs-label: calc(12px * var(--font-scale));
+      --fs-title: calc(13px * var(--font-scale));
+      --fs-small: calc(12.5px * var(--font-scale));
+      --fs-h1:    calc(22px * var(--font-scale));
+
+      --accent:        #2F6FED;
+      --accent-hover:  #1F57CF;
+      --accent-soft:   #EEF3FE;
+      --accent-border: #C7D9FB;
+      --on-accent:     #FFFFFF;
+
+      --bg:           #F4F6F9;
+      --surface:      #FFFFFF;
+      --surface-2:    #F8F9FB;
+      --surface-3:    #F1F3F6;
+      --border:       #E3E7EE;
+      --border-strong:#D3D9E2;
+      --text:         #14181E;
+      --text-soft:    #3A434F;
+      --text-muted:   #5F6975;
+      --placeholder:  #9AA3AF;
+
+      --danger:  #D64545; --danger-soft:  #FBEAEA; --danger-border:  #F0C9C9;
+      --warning: #C9851F; --warning-soft: #FBF1DD; --warning-border: #EED9AD;
+      --success: #1F9D5F; --success-soft: #E2F3EA; --success-border: #BFE3CF;
+      --info:    #2F6FED; --info-soft:    #EEF3FE; --info-border:    #C7D9FB;
+
+      --radius:    8px;
+      --radius-sm: 6px;
+      --radius-pill: 999px;
+      --shadow-sm: 0 1px 2px rgba(20,24,30,.05);
+      --shadow:    0 6px 22px rgba(20,24,30,.08);
+      --ring:      0 0 0 3px rgba(47,111,237,.20);
+      color-scheme: light;
+    }
+
+    /* ── Dark mode — auto (OS) or forced via [data-theme="dark"] ───────────── */
+    @media (prefers-color-scheme: dark) {
+      :root:not([data-theme="light"]) {
+        --accent:#5685E9; --accent-hover:#6C98EF; --accent-soft:#16233F; --accent-border:#21386A;
+        --bg:#0D1117; --surface:#161B22; --surface-2:#1C232C; --surface-3:#1C232C;
+        --border:#232A33; --border-strong:#2D3641;
+        --text:#EEF1F5; --text-soft:#C2CAD3; --text-muted:#8B95A1; --placeholder:#6F7986;
+        --danger:#E06464; --danger-soft:#341819; --danger-border:#5A2A2A;
+        --warning:#D99A3A; --warning-soft:#33270F; --warning-border:#574017;
+        --success:#3BB97A; --success-soft:#13301F; --success-border:#1F4D33;
+        --info:#88ABF2; --info-soft:#16233F; --info-border:#21386A;
+        --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 8px 28px rgba(0,0,0,.5);
+        --ring:0 0 0 3px rgba(86,133,233,.32);
+        color-scheme: dark;
+      }
+    }
+    :root[data-theme="dark"] {
+      --accent:#5685E9; --accent-hover:#6C98EF; --accent-soft:#16233F; --accent-border:#21386A;
+      --bg:#0D1117; --surface:#161B22; --surface-2:#1C232C; --surface-3:#1C232C;
+      --border:#232A33; --border-strong:#2D3641;
+      --text:#EEF1F5; --text-soft:#C2CAD3; --text-muted:#8B95A1; --placeholder:#6F7986;
+      --danger:#E06464; --danger-soft:#341819; --danger-border:#5A2A2A;
+      --warning:#D99A3A; --warning-soft:#33270F; --warning-border:#574017;
+      --success:#3BB97A; --success-soft:#13301F; --success-border:#1F4D33;
+      --info:#88ABF2; --info-soft:#16233F; --info-border:#21386A;
+      --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 8px 28px rgba(0,0,0,.5);
+      --ring:0 0 0 3px rgba(86,133,233,.32);
+      color-scheme: dark;
+    }
+
+    /* ── Reset / base ───────────────────────────────────────────────────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-                   "Helvetica Neue", Arial, sans-serif;
-      font-size: 14px;
+      font-family: var(--font-sans);
+      font-size: var(--fs-base);
+      line-height: 1.55;
       color: var(--text);
       background: var(--bg);
-      line-height: 1.5;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      letter-spacing: -0.006em;
     }
-
     input, select, textarea, button { font-family: inherit; }
 
-    input, select {
-      font-size: 13px;
-      color: var(--text);
+    .kb-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+    /* ── Page shell ─────────────────────────────────────────────────────────── */
+    .kb-wrap { max-width: 960px; margin: 0 auto; padding: 22px 20px 56px; }
+
+    /* ── Toolbar ────────────────────────────────────────────────────────────── */
+    .kb-toolbar {
+      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+      margin-bottom: 18px;
+    }
+    .kb-toolbar .spacer { flex: 1; }
+    .kb-seg {
+      display: inline-flex; align-items: center; gap: 2px;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); padding: 3px;
+    }
+    .kb-seg button {
+      font: 600 var(--fs-small)/1 var(--font-sans);
+      color: var(--text-muted); background: transparent; border: 0;
+      white-space: nowrap; padding: 5px 10px; border-radius: 4px; cursor: pointer;
+    }
+    .kb-seg button.is-active { background: var(--accent-soft); color: var(--accent); }
+    .kb-seg button:hover:not(.is-active):not(:disabled) { color: var(--text); }
+    .kb-seg button:disabled { opacity: .4; cursor: not-allowed; }
+    .kb-iconbtn {
+      display: inline-grid; place-items: center; width: 32px; height: 32px;
+      background: var(--surface); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer;
+    }
+    .kb-iconbtn:hover { color: var(--accent); border-color: var(--accent-border); }
+
+    /* ── Document header ────────────────────────────────────────────────────── */
+    .kb-header {
+      display: flex; justify-content: space-between; align-items: flex-start;
+      gap: 24px; padding-bottom: 20px; margin-bottom: 22px;
+      border-bottom: 1px solid var(--border);
+    }
+    .kb-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
+    .kb-brand .logo {
+      height: 42px; width: 42px; flex: 0 0 42px; border-radius: 10px;
+      display: grid; place-items: center;
+      background: var(--accent-soft); color: var(--accent); overflow: hidden;
+    }
+    .kb-brand .logo svg { width: 20px; height: 20px; }
+    .kb-brand .org { font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
+    .kb-brand .org small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
+    .kb-doctitle { text-align: right; }
+    .kb-doctitle h1 { margin: 0; font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
+
+    /* ── Cards ──────────────────────────────────────────────────────────────── */
+    .kb-card {
+      background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      padding: 5px 8px;
-      background: var(--white);
-      width: 100%;
-      outline: none;
-      transition: border-color .15s;
-    }
-    input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px #dbeafe; }
-    input[type="number"] { text-align: right; }
-    input:disabled, select:disabled {
-      background: #f8f9fa; color: var(--text-muted);
-      border-color: var(--border-light); cursor: not-allowed;
-    }
-
-    button { cursor: pointer; border: none; border-radius: var(--radius); font-size: 13px; }
-
-    /* ── Layout ─────────────────────────────────────────────────────────────── */
-    .wrap { max-width: 920px; margin: 0 auto; padding: 20px 16px 48px; }
-
-    /* ── Language bar ───────────────────────────────────────────────────────── */
-    #lang-bar {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 12px;
-      padding: 7px 12px;
-      background: var(--white);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-    }
-    #lang-bar label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
-    #lang-bar select { width: auto; }
-    #lang-bar .lang-part { display: flex; align-items: center; gap: 8px; }
-    .sz-btn {
-      background: var(--white); border: 1px solid var(--border); border-radius: 4px;
-      color: var(--text); font-size: 13px; font-weight: 600; padding: 2px 8px;
-      line-height: 1.4; cursor: pointer;
-    }
-    .sz-btn:hover { background: var(--surface); }
-    #sz-label { font-size: 11px; color: var(--text-muted); min-width: 28px; text-align: center; }
-
-    /* ── Invoice banner ─────────────────────────────────────────────────────── */
-    #inv-banner {
-      background: var(--navy);
-      color: var(--white);
-      padding: 18px 24px;
-      border-radius: var(--radius);
+      box-shadow: var(--shadow-sm);
+      padding: 18px 20px;
       margin-bottom: 14px;
     }
-    #inv-banner h1 { font-size: 26px; font-weight: 800; letter-spacing: 5px; line-height: 1; }
-
-    /* ── Card ───────────────────────────────────────────────────────────────── */
-    .card {
-      background: var(--white);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      padding: 16px 20px;
-      margin-bottom: 12px;
+    .kb-card__title {
+      display: flex; align-items: center; gap: 9px;
+      font-size: var(--fs-title); font-weight: 700; letter-spacing: -0.005em;
+      color: var(--text-soft); margin: 0 0 14px;
     }
-    .card-title {
-      font-size: 10px;
-      font-weight: 700;
-      text-transform: uppercase;
-      letter-spacing: 1.2px;
-      color: var(--slate);
-      margin-bottom: 12px;
-      padding-bottom: 8px;
-      border-bottom: 1px solid var(--border-light);
+    .kb-card__title::before {
+      content: ""; display: block; width: 3px; height: 14px;
+      border-radius: 2px; background: var(--accent); flex-shrink: 0;
+    }
+    .kb-card--flex { display: flex; flex-direction: column; }
+    .kb-card--flex .kb-totals { margin-top: auto; }
+
+    /* ── Form grids ─────────────────────────────────────────────────────────── */
+    .kb-grid { display: grid; gap: 12px 14px; }
+    .kb-grid.cols-2 { grid-template-columns: 1fr 1fr; }
+    .kb-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
+    .kb-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+    .kb-label {
+      font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.03em;
+      text-transform: uppercase; color: var(--text-muted); display: block;
     }
 
-    /* ── Two-column grid ────────────────────────────────────────────────────── */
-    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-    @media (max-width: 640px) { .two-col { grid-template-columns: 1fr; } }
-
-    /* ── Form groups ────────────────────────────────────────────────────────── */
-    .fg { margin-bottom: 8px; }
-    .fg label { display: block; font-size: 11px; color: var(--text-muted); font-weight: 500; margin-bottom: 3px; }
-    .fi { display: grid; grid-template-columns: 80px 1fr; gap: 8px; align-items: center; margin-bottom: 8px; }
-    .fi label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
-
-    /* ── Line items table ───────────────────────────────────────────────────── */
-    #lines-card {
-      background: var(--white);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      margin-bottom: 12px;
-      overflow: hidden;
+    /* ── Inputs / selects ───────────────────────────────────────────────────── */
+    .kb-input, .kb-select, .kb-textarea {
+      width: 100%; font: 400 var(--fs-input)/1.4 var(--font-sans);
+      color: var(--text); background: var(--surface);
+      border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
+      padding: 8px 10px; outline: none;
+      transition: border-color .14s, box-shadow .14s;
     }
-    #lines-card .card-title { padding: 11px 16px; margin: 0; border-bottom: 1px solid var(--border); }
-
-    .line-tbl { width: 100%; border-collapse: collapse; }
-    .line-tbl thead th {
-      background: #f8f9fb;
-      padding: 7px 10px;
-      font-size: 10px; font-weight: 700;
-      text-transform: uppercase; letter-spacing: .5px;
-      color: var(--slate);
-      border-bottom: 1px solid var(--border);
-      text-align: left;
+    .kb-input::placeholder, .kb-textarea::placeholder { color: var(--placeholder); }
+    .kb-input:focus, .kb-select:focus, .kb-textarea:focus {
+      border-color: var(--accent); box-shadow: var(--ring);
     }
-    .line-tbl thead th.r { text-align: right; }
-
-    .line-tbl .lr td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
-    .line-tbl .lr.open td { border-bottom: none; }
-    .line-tbl .fx td { padding: 4px 10px 10px; border-bottom: 1px solid var(--border-light); background: #f9fafb; }
-    .line-tbl .al td { padding: 10px; }
-
-    .col-qty { width: 96px; } .col-uom { width: 100px; }
-    .col-price { width: 110px; } .col-tot { width: 110px; } .col-act { width: 36px; }
-
-    .line-total-val { font-size: 13px; font-weight: 600; text-align: right; padding-top: 6px; }
-
-    .fx-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 6px; }
-    .fx-label { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
-    .fx-note  { font-size: 11px; color: var(--text-muted); }
-    .fx-note strong { color: var(--text); }
-
-    .btn-remove { background: none; color: var(--danger); font-size: 18px; line-height: 1; padding: 2px 5px; border-radius: 3px; }
-    .btn-remove:hover { background: #fef2f2; }
-    .btn-add-line { background: none; color: var(--accent); font-size: 13px; font-weight: 500; padding: 5px 10px; border: 1px dashed var(--accent); border-radius: var(--radius); }
-    .btn-add-line:hover { background: #eff6ff; }
-    #btn-reset-lines { background: none; border: 1px solid var(--border); color: var(--text-muted); font-size: 11px; padding: 3px 10px; border-radius: 3px; }
-    #btn-reset-lines:hover { background: #fee2e2; border-color: var(--danger); color: var(--danger); }
-
-    /* ── Totals ─────────────────────────────────────────────────────────────── */
-    #totals-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; }
-    .tot-tbl { width: 100%; border-collapse: collapse; }
-    .tot-tbl td { padding: 8px 16px; }
-    .tot-tbl tr:not(:last-child) td { border-bottom: 1px solid var(--border-light); }
-    .tot-tbl .lbl { text-align: right; color: var(--text-muted); font-size: 13px; }
-    .tot-tbl .val { text-align: right; width: 150px; font-size: 13px; font-weight: 600; }
-    .tot-tbl .final td { background: var(--navy); color: var(--white); font-size: 15px; font-weight: 700; }
-    .tot-tbl .final .lbl { color: rgba(255,255,255,.75); }
-    .paid-inp { width: 120px !important; text-align: right; }
-    .tax-inputs { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
-    .tax-inputs input[type="number"] { width: 68px; }
-    .tax-inputs select { width: auto; }
-    .btn-rm-tax { background: none; color: var(--danger); font-size: 16px; line-height: 1; padding: 1px 4px; border-radius: 3px; }
-    .btn-rm-tax:hover { background: #fef2f2; }
-    .tax-add-cell { text-align: right; padding: 5px 16px !important; }
-    .btn-add-tax { background: none; color: var(--accent); font-size: 12px; font-weight: 500; padding: 3px 8px; border: 1px dashed var(--accent); border-radius: var(--radius); }
-    .btn-add-tax:hover { background: #eff6ff; }
-
-    /* ── Generate button ────────────────────────────────────────────────────── */
-    #btn-generate {
-      display: block; width: 100%;
-      padding: 14px;
-      background: var(--accent); color: var(--white);
-      font-size: 15px; font-weight: 700; letter-spacing: 1px;
-      border-radius: var(--radius);
-      margin-bottom: 20px;
-      transition: background .15s;
+    .kb-input:disabled, .kb-select:disabled, .kb-input[readonly] {
+      background: var(--surface-3); color: var(--text-muted); cursor: not-allowed;
+    }
+    .kb-input.num {
+      font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums;
+    }
+    .kb-select {
+      appearance: none;
+      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235F6975' stroke-width='1.6'><path d='M4 6l4 4 4-4'/></svg>");
+      background-repeat: no-repeat; background-position: right 8px center;
+      padding-right: 28px;
     }
-    #btn-generate:hover { background: var(--accent-hover); }
 
+    /* ── Buttons ────────────────────────────────────────────────────────────── */
+    .kb-btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: 7px;
+      white-space: nowrap;
+      font: 600 var(--fs-input)/1 var(--font-sans);
+      padding: 9px 16px; border-radius: var(--radius-sm);
+      border: 1px solid transparent; cursor: pointer;
+      transition: background .14s, border-color .14s, color .14s;
+    }
+    .kb-btn svg { width: 16px; height: 16px; }
+    .kb-btn--primary { background: var(--accent); color: var(--on-accent); }
+    .kb-btn--primary:hover { background: var(--accent-hover); }
+    .kb-btn--primary:disabled { opacity: .5; cursor: not-allowed; }
+    .kb-btn--ghost { background: var(--surface); color: var(--text-soft); border-color: var(--border-strong); }
+    .kb-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
+    .kb-btn--dashed { background: transparent; color: var(--accent); border: 1px dashed var(--accent-border); }
+    .kb-btn--dashed:hover { background: var(--accent-soft); border-color: var(--accent); }
+    .kb-btn--lg { padding: 13px 26px; }
+    .kb-btn--sm { padding: 5px 10px; font-size: var(--fs-small); }
+    .kb-btn--block { width: 100%; }
 
-    /* ── Payment card form fields ────────────────────────────────────────────── */
-    .pay-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--navy); margin-bottom: 10px; }
-    .pay-terms-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
-    .pay-terms-row label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
-    .pay-terms-row input { width: 64px; }
-    .pay-terms-row span { font-size: 12px; color: var(--text-muted); }
-    .pay-by-row { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
-    .pay-by-row label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
-    #paybydisp { font-size: 13px; font-weight: 600; color: var(--text); }
+    /* round ＋ / − buttons for rows */
+    .kb-circbtn {
+      width: 24px; height: 24px; border-radius: 50%;
+      display: inline-grid; place-items: center;
+      font-size: 15px; line-height: 1; font-weight: 700;
+      cursor: pointer; padding: 0; flex-shrink: 0;
+      background: var(--surface); border: 1px solid var(--accent); color: var(--accent);
+    }
+    .kb-circbtn:hover { background: var(--accent); color: var(--on-accent); }
+    .kb-circbtn--rm { border-color: var(--danger); color: var(--danger); }
+    .kb-circbtn--rm:hover { background: var(--danger); color: #fff; }
 
-    /* ── Locked charge-to fields ─────────────────────────────────────────────── */
-    #ct-fields.locked input,
-    #ct-fields.locked select {
-      background: #f8f9fa;
-      color: var(--text-muted);
-      border-color: var(--border-light);
-      pointer-events: none;
+    /* ── Row grids (line items / tax rows) ──────────────────────────────────── */
+    .kb-rowhead, .kb-row { display: grid; align-items: center; gap: 8px; }
+    .kb-rowhead {
+      padding: 0 4px 8px;
+      font-size: var(--fs-label); font-weight: 700;
+      text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
+    }
+    .kb-rowhead .r { text-align: right; }
+    .kb-row {
+      padding: 6px 4px; border-radius: var(--radius-sm);
+      border-left: 3px solid transparent;
+    }
+    .kb-row:hover { background: var(--surface-2); }
+    .kb-row .r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
+
+    /* Invoice-specific column grids */
+    .inv-lines-head { grid-template-columns: 78px 88px 1fr 108px 108px 34px; }
+    .inv-line       { grid-template-columns: 78px 88px 1fr 108px 108px 34px; }
+    .inv-tax-head   { grid-template-columns: 1fr 100px 34px; }
+    .inv-tax        { grid-template-columns: 1fr 100px 34px; }
+
+    /* ── Totals panel ───────────────────────────────────────────────────────── */
+    .kb-totals { width: 100%; }
+    .kb-totals .row {
+      display: flex; justify-content: space-between; gap: 16px;
+      padding: 6px 0; font-size: var(--fs-base);
+    }
+    .kb-totals .row .lab { color: var(--text-muted); }
+    .kb-totals .row .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
+    .kb-totals .grand {
+      margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border-strong);
+      display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
+    }
+    .kb-totals .grand .lab { font-weight: 700; color: var(--text); }
+    .kb-totals .grand .val {
+      font-family: var(--font-mono); font-weight: 700;
+      font-size: calc(20px * var(--font-scale));
+      color: var(--accent); font-variant-numeric: tabular-nums;
+    }
+
+    /* ── FX expansion block ─────────────────────────────────────────────────── */
+    .fx-block {
+      background: var(--surface-2); border: 1px solid var(--border);
+      border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 6px;
+    }
+    .fx-note { font-size: var(--fs-small); color: var(--text-muted); margin-top: 8px; }
+    .fx-note strong { color: var(--text); font-family: var(--font-mono); }
+
+    /* ── Charge-to locked state ─────────────────────────────────────────────── */
+    #ct-fields.locked .kb-input,
+    #ct-fields.locked .kb-select {
+      background: var(--surface-3) !important;
+      color: var(--text-muted) !important;
       cursor: not-allowed;
+      pointer-events: none;
     }
 
-    /* ── Error / loading ────────────────────────────────────────────────────── */
-    #loading { padding: 48px; text-align: center; color: var(--text-muted); font-size: 14px; }
-    .error-box { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; padding: 16px 20px; border-radius: var(--radius); margin: 20px 0; font-size: 13px; }
+    /* ── Payment section ────────────────────────────────────────────────────── */
+    .pay-terms-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
+    .pay-by-row { display: flex; align-items: center; gap: 8px; }
+    #paybydisp { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
+
+    /* ── Loading / error ────────────────────────────────────────────────────── */
+    #loading { padding: 48px; text-align: center; color: var(--text-muted); }
+    .error-box {
+      background: var(--danger-soft); border: 1px solid var(--danger-border);
+      color: var(--danger); padding: 16px 20px; border-radius: var(--radius);
+      font-size: var(--fs-small); line-height: 1.7; margin: 20px 0;
+    }
+    .error-box code { font-family: var(--font-mono); font-size: 12px; }
+
+    /* ── Footer ─────────────────────────────────────────────────────────────── */
+    .kb-footer {
+      max-width: 960px; margin: 0 auto; padding: 16px 20px 12px;
+      font-size: var(--fs-small); color: var(--text-muted);
+      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+      border-top: 1px solid var(--border);
+    }
+    .kb-footer a { color: var(--text-muted); text-decoration: none; }
+    .kb-footer a:hover { color: var(--accent); text-decoration: underline; }
+    .kb-footer .sep { opacity: .4; }
+
+    /* ── Responsive ─────────────────────────────────────────────────────────── */
+    @media (max-width: 680px) {
+      .kb-grid.cols-2, .kb-grid.cols-3 { grid-template-columns: 1fr; }
+      .kb-header { flex-direction: column; gap: 14px; }
+      .kb-doctitle { text-align: left; }
+      .inv-lines-head { display: none; }
+      .inv-line { grid-template-columns: 1fr 1fr; gap: 6px 8px; }
+      .inv-tax  { grid-template-columns: 1fr 80px 34px; }
+    }
   </style>
 </head>
 <body>
-<div class="wrap">
+<div class="kb-wrap">
 
-  <!-- Language / accessibility bar -->
-  <div id="lang-bar">
-    <button class="sz-btn" id="sz-down" onclick="bumpZoom(-1)" title="Decrease text size">A−</button>
-    <span id="sz-label">100%</span>
-    <button class="sz-btn" id="sz-up" onclick="bumpZoom(1)" title="Increase text size">A+</button>
-    <div id="lang-part" class="lang-part" style="display:none">
-      <span style="margin-left:6px">&#127760;</span>
-      <label id="lbl-language" for="lang-sel">Language</label>
-      <select id="lang-sel"></select>
+  <!-- Utility toolbar -->
+  <div class="kb-toolbar" id="lang-bar">
+    <div class="kb-seg" role="group" aria-label="Text size">
+      <button id="sz-down" onclick="bumpZoom(-1)" aria-label="Smaller text">A−</button>
+      <button id="sz-up"   onclick="bumpZoom(1)"  aria-label="Larger text">A+</button>
     </div>
+    <span id="sz-label" style="font-size:12px;color:var(--text-muted);font-family:var(--font-mono)">100%</span>
+    <div class="spacer"></div>
+    <div id="lang-part" class="kb-seg" role="group" aria-label="Language" style="display:none">
+      <label id="lbl-language" for="lang-sel" style="padding:5px 10px;font-size:var(--fs-small);font-weight:600;color:var(--text-muted)">Language</label>
+      <select id="lang-sel" class="kb-select" style="width:auto;border:0;box-shadow:none;background:transparent;padding:5px 24px 5px 4px"></select>
+    </div>
+    <button class="kb-iconbtn" id="btn-theme" onclick="toggleTheme()" title="Toggle light/dark" aria-label="Toggle dark mode">
+      <svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor">
+        <path d="M8 1.5a6.5 6.5 0 1 0 0 13A6.5 6.5 0 0 0 8 1.5zM0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8z"/>
+        <path d="M8 1.5V14.5A6.5 6.5 0 0 1 8 1.5z"/>
+      </svg>
+    </button>
   </div>
 
-  <!-- Banner -->
-  <div id="inv-banner"><h1 id="inv-title">INVOICE</h1></div>
+  <!-- Document header -->
+  <header class="kb-header">
+    <div class="kb-brand">
+      <span class="logo">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+             stroke-linecap="round" stroke-linejoin="round">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+        </svg>
+      </span>
+      <span class="org">kBenestad<small>Freelance invoicing</small></span>
+    </div>
+    <div class="kb-doctitle">
+      <h1 id="inv-title">Invoice</h1>
+    </div>
+  </header>
 
   <!-- Loading / error placeholder -->
   <div id="loading">Loading configuration&#8230;</div>
 
-  <!-- Main form (injected by JS) -->
+  <!-- Main form (injected by JS after config loads) -->
   <div id="form-root"></div>
 
-</div><!-- /.wrap -->
+</div><!-- /.kb-wrap -->
 
+<footer class="kb-footer">
+  <span>&#169; 2026 kBenestad</span>
+  <span class="sep">&#183;</span>
+  <a href="https://github.com/kbenestad/invoice">kbenestad/invoice</a>
+</footer>
 
 <!-- js-yaml -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"
@@ -397,6 +547,16 @@ function countryOpts(sel) {
   ).join("");
 }
 
+// ── Theme toggle ──────────────────────────────────────────────────────────────
+function toggleTheme() {
+  const cur = document.documentElement.getAttribute("data-theme");
+  const isDark = cur === "dark" ||
+    (!cur && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  const next = isDark ? "light" : "dark";
+  document.documentElement.setAttribute("data-theme", next);
+  localStorage.setItem("kb-theme", next);
+}
+
 // ── Load config ───────────────────────────────────────────────────────────────
 async function loadCfg() {
   try {
@@ -476,154 +636,252 @@ function buildForm() {
 
   document.getElementById("form-root").innerHTML = `
 <form id="the-form" novalidate>
-  <div class="two-col">
-    <div class="card">
-      <div class="card-title" id="sec-sender">${t("sender-section")}</div>
-      <div class="fg"><label id="lbl-sn" for="sn">${t("sender-name")}</label>
-        <input id="sn" type="text" data-ls="sn" autocomplete="name"></div>
-      <div class="fg"><label id="lbl-sa1" for="sa1">${t("sender-address1")}</label>
-        <input id="sa1" type="text" data-ls="sa1" autocomplete="address-line1"></div>
-      <div class="fg"><label id="lbl-sa2" for="sa2">${t("sender-address2")}</label>
-        <input id="sa2" type="text" data-ls="sa2" autocomplete="address-line2"></div>
-      <div class="fg"><label id="lbl-sa3" for="sa3">${t("sender-address3")}</label>
-        <input id="sa3" type="text" data-ls="sa3"></div>
-      <div class="fg"><label id="lbl-sa4" for="sa4">${t("sender-address4")}</label>
-        <input id="sa4" type="text" data-ls="sa4"></div>
-      <div class="fg"><label id="lbl-sc" for="sc">${t("sender-country")}</label>
-        <select id="sc" data-ls="sc">${countryOpts("")}</select></div>
-      <div class="fi"><label id="lbl-sp">${t("sender-phone")}:</label>
-        <input id="sp" type="tel" data-ls="sp" autocomplete="tel"></div>
-      <div class="fi"><label id="lbl-se">${t("sender-email")}:</label>
-        <input id="se" type="email" data-ls="se" autocomplete="email"></div>
-      <div class="fi"><label id="lbl-stax">${t("vat-id")}:</label>
-        <input id="stax" type="text" data-ls="stax"></div>
-    </div>
-    <div class="card">
-      <div class="card-title" id="sec-invdet">${t("invoice-details-section")}</div>
-      <div class="fg"><label id="lbl-idate" for="idate">${t("invoice-date")}</label>
-        <input id="idate" type="date" value="${dateDef}"></div>
-      <div class="fg"><label id="lbl-icur" for="icur">${t("invoice-currency")}</label>
-        <select id="icur" data-ls="icur">${curOpts}</select></div>
-      <div class="fg"><label id="lbl-pcode" for="pcode">${t("project-code")}</label>
-        <select id="pcode" data-ls="pcode">
-          <option value="">${t("select")}</option>
-          ${pcOpts}
-          <option value="__other__">${t("other")}</option>
-        </select></div>
-      <div class="fg" id="pcode-other-wrap" style="display:none">
-        <label id="lbl-pcode-other" for="pcode-other">${t("project-code")} (${t("other")})</label>
-        <input id="pcode-other" type="text" data-ls="pcode-other">
-      </div>
-      <div class="fg"><label id="lbl-ino" for="ino">${t("invoice-no")}</label>
-        <input id="ino" type="text" data-ls="ino"></div>
-    </div>
-    <div class="card">
-      <div class="card-title" style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
-        <span id="sec-ct">${t("charge-to")}:</span>
-        <select id="ct-pick" style="width:auto;font-size:12px">
-          <option value="">${t("select")}</option>
-          ${ctOpts}
-          <option value="__other__">${t("other")}</option>
-        </select>
-      </div>
-      <div id="ct-fields" class="locked">
-        <div class="fg"><label id="lbl-ctn" for="ctn">${t("charge-to-name")}</label>
-          <input id="ctn" type="text"></div>
-        <div class="fg"><label id="lbl-ca1" for="ca1">${t("charge-to-address1")}</label>
-          <input id="ca1" type="text"></div>
-        <div class="fg"><label id="lbl-ca2" for="ca2">${t("charge-to-address2")}</label>
-          <input id="ca2" type="text"></div>
-        <div class="fg"><label id="lbl-ca3" for="ca3">${t("charge-to-address3")}</label>
-          <input id="ca3" type="text"></div>
-        <div class="fg"><label id="lbl-ca4" for="ca4">${t("charge-to-address4")}</label>
-          <input id="ca4" type="text"></div>
-        <div class="fg"><label id="lbl-cc" for="cc">${t("charge-to-country")}</label>
-          <select id="cc">${countryOpts("")}</select></div>
-        <div class="fi"><label id="lbl-cph">${t("charge-to-phone")}:</label>
-          <input id="cph" type="tel"></div>
-        <div class="fi"><label id="lbl-cem">${t("charge-to-email")}:</label>
-          <input id="cem" type="email"></div>
-        <div class="fi"><label id="lbl-cvat">${t("vat-id")}:</label>
-          <input id="cvat" type="text"></div>
-        <div class="fi"><label id="lbl-creg">${t("registration-no")}:</label>
-          <input id="creg" type="text"></div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-title" id="lbl-pay-sec">${t("payment")}</div>
-      <div class="pay-terms-row">
-        <label id="lbl-pterm">${t("payment-terms")}:</label>
-        <input id="pterm" type="number" min="0" value="7" oninput="calcPayBy()" data-ls="pterm">
-        <span id="lbl-days">${t("payment-days")}</span>
-      </div>
-      <div class="pay-by-row">
-        <label id="lbl-paybyl">${t("pay-by")}:</label>
-        <span id="paybydisp"></span>
-      </div>
-      <div id="bank-section" style="display:none">
-        <div class="fg"><label id="lbl-pacct">${t("account-holder")}</label>
-          <input id="pacct" type="text" data-ls="pacct"></div>
-        <div class="fg"><label id="lbl-piban">${t("account-no")}</label>
-          <input id="piban" type="text" data-ls="piban"></div>
-        <div class="fg"><label id="lbl-pbic">${t("bank-bic")}</label>
-          <input id="pbic" type="text" data-ls="pbic"></div>
-        <div class="fg"><label id="lbl-pbadr">${t("bank-address")}</label>
-          <input id="pbadr1" type="text" data-ls="pbadr1">
-          <input id="pbadr2" type="text" style="margin-top:6px" data-ls="pbadr2"></div>
-        <div class="fg"><label id="lbl-pref">${t("payment-ref")}</label>
-          <input id="pref" type="text" data-ls="pref"></div>
+
+  <!-- Row 1: Sender + Invoice details -->
+  <div class="kb-grid cols-2" style="margin-bottom:14px;align-items:start">
+    <section class="kb-card" style="margin:0">
+      <h2 class="kb-card__title" id="sec-sender">${t("sender-section")}</h2>
+      <div class="kb-grid">
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-sn" for="sn">${t("sender-name")}</label>
+          <input id="sn" type="text" class="kb-input" data-ls="sn" autocomplete="name">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-sa1" for="sa1">${t("sender-address1")}</label>
+          <input id="sa1" type="text" class="kb-input" data-ls="sa1" autocomplete="address-line1">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-sa2" for="sa2">${t("sender-address2")}</label>
+          <input id="sa2" type="text" class="kb-input" data-ls="sa2" autocomplete="address-line2">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-sa3" for="sa3">${t("sender-address3")}</label>
+          <input id="sa3" type="text" class="kb-input" data-ls="sa3">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-sa4" for="sa4">${t("sender-address4")}</label>
+          <input id="sa4" type="text" class="kb-input" data-ls="sa4">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-sc" for="sc">${t("sender-country")}</label>
+          <select id="sc" class="kb-select" data-ls="sc">${countryOpts("")}</select>
+        </div>
+        <div class="kb-grid cols-2">
+          <div class="kb-field">
+            <label class="kb-label" id="lbl-sp" for="sp">${t("sender-phone")}</label>
+            <input id="sp" type="tel" class="kb-input" data-ls="sp" autocomplete="tel">
+          </div>
+          <div class="kb-field">
+            <label class="kb-label" id="lbl-se" for="se">${t("sender-email")}</label>
+            <input id="se" type="email" class="kb-input" data-ls="se" autocomplete="email">
+          </div>
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-stax" for="stax">${t("vat-id")}</label>
+          <input id="stax" type="text" class="kb-input" data-ls="stax">
+        </div>
       </div>
+    </section>
+
+    <div>
+      <section class="kb-card">
+        <h2 class="kb-card__title" id="sec-invdet">${t("invoice-details-section")}</h2>
+        <div class="kb-grid cols-2">
+          <div class="kb-field">
+            <label class="kb-label" id="lbl-idate" for="idate">${t("invoice-date")}</label>
+            <input id="idate" type="date" class="kb-input" value="${dateDef}">
+          </div>
+          <div class="kb-field">
+            <label class="kb-label" id="lbl-ino" for="ino">${t("invoice-no")}</label>
+            <input id="ino" type="text" class="kb-input" data-ls="ino">
+          </div>
+          <div class="kb-field">
+            <label class="kb-label" id="lbl-icur" for="icur">${t("invoice-currency")}</label>
+            <select id="icur" class="kb-select" data-ls="icur">${curOpts}</select>
+          </div>
+          <div class="kb-field">
+            <label class="kb-label" id="lbl-pcode" for="pcode">${t("project-code")}</label>
+            <select id="pcode" class="kb-select" data-ls="pcode">
+              <option value="">${t("select")}</option>
+              ${pcOpts}
+              <option value="__other__">${t("other")}</option>
+            </select>
+          </div>
+        </div>
+        <div class="kb-field" id="pcode-other-wrap" style="display:none;margin-top:12px">
+          <label class="kb-label" id="lbl-pcode-other" for="pcode-other">${t("project-code")} (${t("other")})</label>
+          <input id="pcode-other" type="text" class="kb-input" data-ls="pcode-other">
+        </div>
+      </section>
+
+      <section class="kb-card" style="margin-bottom:0">
+        <h2 class="kb-card__title" id="lbl-pay-sec">${t("payment")}</h2>
+        <div class="pay-terms-row">
+          <label class="kb-label" id="lbl-pterm">${t("payment-terms")}</label>
+          <input id="pterm" type="number" min="0" value="7" class="kb-input" style="width:64px"
+                 oninput="calcPayBy()" data-ls="pterm">
+          <span id="lbl-days" style="font-size:var(--fs-small);color:var(--text-muted)">${t("payment-days")}</span>
+        </div>
+        <div class="pay-by-row">
+          <span style="font-size:var(--fs-small);color:var(--text-muted)" id="lbl-paybyl">${t("pay-by")}:</span>
+          <span id="paybydisp"></span>
+        </div>
+        <div id="bank-section" style="display:none;margin-top:14px">
+          <div class="kb-grid">
+            <div class="kb-field">
+              <label class="kb-label" id="lbl-pacct" for="pacct">${t("account-holder")}</label>
+              <input id="pacct" type="text" class="kb-input" data-ls="pacct">
+            </div>
+            <div class="kb-grid cols-2">
+              <div class="kb-field">
+                <label class="kb-label" id="lbl-piban" for="piban">${t("account-no")}</label>
+                <input id="piban" type="text" class="kb-input kb-mono" data-ls="piban">
+              </div>
+              <div class="kb-field">
+                <label class="kb-label" id="lbl-pbic" for="pbic">${t("bank-bic")}</label>
+                <input id="pbic" type="text" class="kb-input kb-mono" data-ls="pbic">
+              </div>
+            </div>
+            <div class="kb-field">
+              <label class="kb-label" id="lbl-pbadr">${t("bank-address")}</label>
+              <input id="pbadr1" type="text" class="kb-input" data-ls="pbadr1">
+              <input id="pbadr2" type="text" class="kb-input" style="margin-top:6px" data-ls="pbadr2">
+            </div>
+            <div class="kb-field">
+              <label class="kb-label" id="lbl-pref" for="pref">${t("payment-ref")}</label>
+              <input id="pref" type="text" class="kb-input" data-ls="pref">
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   </div>
 
-  <div id="lines-card">
-    <div class="card-title" style="display:flex;align-items:center;justify-content:space-between">
+  <!-- Row 2: Bill-to -->
+  <section class="kb-card">
+    <h2 class="kb-card__title">
+      <span id="sec-ct">${t("charge-to")}</span>
+      <select id="ct-pick" class="kb-select"
+              style="width:auto;font-size:var(--fs-small);margin-left:8px;padding:4px 28px 4px 8px">
+        <option value="">${t("select")}</option>
+        ${ctOpts}
+        <option value="__other__">${t("other")}</option>
+      </select>
+    </h2>
+    <div id="ct-fields" class="locked">
+      <div class="kb-grid cols-2">
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-ctn" for="ctn">${t("charge-to-name")}</label>
+          <input id="ctn" type="text" class="kb-input">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-ca1" for="ca1">${t("charge-to-address1")}</label>
+          <input id="ca1" type="text" class="kb-input">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-ca2" for="ca2">${t("charge-to-address2")}</label>
+          <input id="ca2" type="text" class="kb-input">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-ca3" for="ca3">${t("charge-to-address3")}</label>
+          <input id="ca3" type="text" class="kb-input">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-ca4" for="ca4">${t("charge-to-address4")}</label>
+          <input id="ca4" type="text" class="kb-input">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-cc" for="cc">${t("charge-to-country")}</label>
+          <select id="cc" class="kb-select">${countryOpts("")}</select>
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-cph" for="cph">${t("charge-to-phone")}</label>
+          <input id="cph" type="tel" class="kb-input">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-cem" for="cem">${t("charge-to-email")}</label>
+          <input id="cem" type="email" class="kb-input">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-cvat" for="cvat">${t("vat-id")}</label>
+          <input id="cvat" type="text" class="kb-input">
+        </div>
+        <div class="kb-field">
+          <label class="kb-label" id="lbl-creg" for="creg">${t("registration-no")}</label>
+          <input id="creg" type="text" class="kb-input">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Row 3: Line items -->
+  <section class="kb-card">
+    <h2 class="kb-card__title">
       <span id="sec-lines">${t("invoice-lines")}</span>
-      <button type="button" id="btn-reset-lines" onclick="resetLines()">${t("reset-lines")}</button>
+      <button type="button" id="btn-reset-lines" class="kb-btn kb-btn--ghost kb-btn--sm"
+              style="margin-left:auto" onclick="resetLines()">${t("reset-lines")}</button>
+    </h2>
+    <div class="kb-rowhead kb-row inv-lines-head">
+      <span id="th-qty">${t("qty")}</span>
+      <span id="th-uom">${t("uom")}</span>
+      <span id="th-desc">${t("description")}</span>
+      <span class="r" id="th-price">${t("price")}</span>
+      <span class="r" id="th-tot">${t("line-total")}</span>
+      <span></span>
     </div>
-    <table class="line-tbl">
-      <thead>
-        <tr>
-          <th class="col-qty"   id="th-qty">${t("qty")}</th>
-          <th class="col-uom"   id="th-uom">${t("uom")}</th>
-          <th class="col-desc"  id="th-desc">${t("description")}</th>
-          <th class="col-price r" id="th-price">${t("price")}</th>
-          <th class="col-tot r"   id="th-tot">${t("line-total")}</th>
-          <th class="col-act"></th>
-        </tr>
-      </thead>
-      <tbody id="tbody"></tbody>
-    </table>
+    <div id="tbody"></div>
+  </section>
+
+  <!-- Row 4: Tax + Summary -->
+  <div class="kb-grid cols-2" style="align-items:start;margin-bottom:14px">
+    <section class="kb-card" style="margin:0">
+      <h2 class="kb-card__title">Tax</h2>
+      <div class="kb-rowhead kb-row inv-tax-head">
+        <span>Rate &amp; type</span>
+        <span class="r">Amount</span>
+        <span></span>
+      </div>
+      <div id="tax-tbody"></div>
+      <div style="margin-top:10px">
+        <button type="button" class="kb-btn kb-btn--dashed" id="btn-add-tax"
+                onclick="addTaxLine()">${t("add-tax")}</button>
+      </div>
+    </section>
+
+    <section class="kb-card kb-card--flex" style="margin:0">
+      <h2 class="kb-card__title">Summary</h2>
+      <div class="kb-totals">
+        <div id="tot-pre">
+          <div class="row">
+            <span class="lab" id="lbl-sub">${t("subtotal")}</span>
+            <span class="val" id="v-sub">0.00</span>
+          </div>
+        </div>
+        <div id="tot-post">
+          <div class="row">
+            <span class="lab" id="lbl-paid">${t("paid")}</span>
+            <span class="val">
+              <input id="paid-inp" type="number" value="0" min="0" step="0.01"
+                     class="kb-input num" style="width:110px;padding:5px 8px">
+            </span>
+          </div>
+          <div class="grand">
+            <span class="lab" id="lbl-topay">${t("to-pay")}</span>
+            <span class="val" id="v-topay">0.00</span>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 
-  <div id="totals-card">
-    <table class="tot-tbl">
-      <tbody id="tot-pre">
-        <tr>
-          <td class="lbl" id="lbl-sub">${t("subtotal")}</td>
-          <td class="val" id="v-sub">0.00</td>
-        </tr>
-      </tbody>
-      <tbody id="tax-tbody"></tbody>
-      <tbody id="tot-post">
-        <tr>
-          <td colspan="2" class="tax-add-cell">
-            <button type="button" class="btn-add-tax" id="btn-add-tax" onclick="addTaxLine()">${t("add-tax")}</button>
-          </td>
-        </tr>
-        <tr>
-          <td class="lbl" id="lbl-paid">${t("paid")}</td>
-          <td class="val"><input id="paid-inp" class="paid-inp" type="number" value="0" min="0" step="0.01"></td>
-        </tr>
-        <tr class="final">
-          <td class="lbl" id="lbl-topay">${t("to-pay")}</td>
-          <td class="val" id="v-topay">0.00</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-
-  <button type="submit" id="btn-generate">${t("generate-invoice")}</button>
+  <!-- Generate -->
+  <button type="submit" id="btn-generate" class="kb-btn kb-btn--primary kb-btn--lg kb-btn--block">
+    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"
+         stroke-linecap="round" stroke-linejoin="round" width="16" height="16">
+      <path d="M8 2v9m0 0 4-4M8 11 4 7"/><line x1="2" y1="14" x2="14" y2="14"/>
+    </svg>
+    ${t("generate-invoice")}
+  </button>
 </form>`;
 
   document.getElementById("pcode").addEventListener("change", function () {
@@ -639,7 +897,7 @@ function buildForm() {
       if (document.getElementById(`frate-lbl-${k}`)) updateFxLabels(+k);
     });
   });
-  calcPayBy();  // compute initial pay-by from default 7-day term
+  calcPayBy();
 }
 
 // ── Project-code dropdown ─────────────────────────────────────────────────────
@@ -667,12 +925,12 @@ function fillChargeTo(v) {
   if (v === "") {
     ["ctn","ca1","ca2","ca3","ca4","cc","cph","cem","cvat","creg"].forEach(id => f(id, ""));
     fields?.classList.add("locked");
-    updateProjectCodes(null);   // restore global project codes
+    updateProjectCodes(null);
     return;
   }
   if (v === "__other__") {
     fields?.classList.remove("locked");
-    updateProjectCodes(null);   // restore global project codes
+    updateProjectCodes(null);
     return;
   }
   const ct = (cfg["charge-to"] || [])[+v];
@@ -683,11 +941,7 @@ function fillChargeTo(v) {
   f("cph",  ct.phone);      f("cem",  ct.email);
   f("cvat", ct["vat-id"]);  f("creg", ct["reg-no"]);
   fields?.classList.add("locked");
-
-  // Swap project codes to this recipient's list (falls back to global if none defined)
   updateProjectCodes(ct["project-codes"] || null);
-
-  // Auto-set invoice currency from recipient config
   if (ct.currency) {
     const icurEl = document.getElementById("icur");
     if (icurEl) { icurEl.value = ct.currency; saveStorage(); }
@@ -733,25 +987,24 @@ function addTaxLine() {
   const tbody = document.getElementById("tax-tbody");
   const defaultKey = (cfg["tax-types"]||[])[0]?.key || "";
 
-  const tr = document.createElement("tr");
-  tr.className = "tax-row"; tr.id = `tlr-${i}`;
-  tr.innerHTML = `
-    <td class="lbl">
-      <div class="tax-inputs">
-        <input type="number" id="tv-${i}" value="" placeholder="0" min="0" step="any"
-               oninput="calcTotals()" style="width:68px">
-        <select id="tt-${i}" style="width:auto" onchange="calcTotals()">
-          <option value="pct">${t("tax-pct")}</option>
-          <option value="amt">${t("tax-amount")}</option>
-        </select>
-        <select id="tk-${i}" style="width:auto" onchange="calcTotals()">
-          ${getTaxTypeOpts(defaultKey)}
-        </select>
-        <button type="button" class="btn-rm-tax" onclick="removeTaxLine(${i})">&#x00D7;</button>
-      </div>
-    </td>
-    <td class="val" id="ta-${i}">0.00</td>`;
-  tbody.appendChild(tr);
+  const div = document.createElement("div");
+  div.className = "kb-row inv-tax"; div.id = `tlr-${i}`;
+  div.innerHTML = `
+    <div style="display:flex;align-items:center;gap:5px;flex-wrap:wrap">
+      <input type="number" id="tv-${i}" class="kb-input num" value="" placeholder="0"
+             min="0" step="any" oninput="calcTotals()" style="width:60px">
+      <select id="tt-${i}" class="kb-select" style="width:auto" onchange="calcTotals()">
+        <option value="pct">${t("tax-pct")}</option>
+        <option value="amt">${t("tax-amount")}</option>
+      </select>
+      <select id="tk-${i}" class="kb-select" style="width:auto" onchange="calcTotals()">
+        ${getTaxTypeOpts(defaultKey)}
+      </select>
+    </div>
+    <span class="r kb-mono" id="ta-${i}">0.00</span>
+    <button type="button" class="kb-circbtn kb-circbtn--rm" onclick="removeTaxLine(${i})"
+            aria-label="Remove">&#x2212;</button>`;
+  tbody.appendChild(div);
   calcTotals();
 }
 
@@ -769,35 +1022,42 @@ function addLine() {
   const alRow = document.getElementById("al-row");
   if (alRow) alRow.remove();
 
-  const tr = document.createElement("tr");
-  tr.className = "lr"; tr.id = `lr-${i}`;
-  tr.innerHTML = `
-    <td class="col-qty"><input type="number" id="qty-${i}" value="" min="0" step="0.01"
-        placeholder="0.00" oninput="calcLine(${i});saveLines()" disabled></td>
-    <td class="col-uom"><select id="uom-${i}" onchange="calcLine(${i});saveLines()" disabled>${uomOpts("")}</select></td>
-    <td class="col-desc">
-      <select id="dsel-${i}" onchange="pickProduct(${i})">${prodOpts("")}</select>
-      <input type="text" id="dtxt-${i}" placeholder="${h(t("description"))}"
-             style="margin-top:4px;display:none" oninput="calcLine(${i});saveLines()">
-      <div style="display:flex;align-items:center;gap:6px;margin-top:5px">
-        <label style="font-size:11px;color:var(--text-muted);white-space:nowrap"
+  const div = document.createElement("div");
+  div.className = "kb-row inv-line"; div.id = `lr-${i}`;
+  div.innerHTML = `
+    <input type="number" id="qty-${i}" class="kb-input num" value="" min="0" step="0.01"
+           placeholder="0.00" oninput="calcLine(${i});saveLines()" disabled>
+    <select id="uom-${i}" class="kb-select" onchange="calcLine(${i});saveLines()" disabled>
+      ${uomOpts("")}
+    </select>
+    <div>
+      <select id="dsel-${i}" class="kb-select" onchange="pickProduct(${i})">
+        ${prodOpts("")}
+      </select>
+      <input type="text" id="dtxt-${i}" class="kb-input" placeholder="${h(t("description"))}"
+             style="margin-top:5px;display:none" oninput="calcLine(${i});saveLines()">
+      <div style="display:flex;align-items:center;gap:6px;margin-top:6px">
+        <label style="font-size:var(--fs-label);font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--text-muted);white-space:nowrap"
                id="lbl-fx-${i}">${t("foreign-currency")}:</label>
-        <select id="fx-${i}" style="width:auto" onchange="toggleFx(${i})">
+        <select id="fx-${i}" class="kb-select" style="width:auto" onchange="toggleFx(${i})">
           <option value="no">${t("no-option")}</option>
           <option value="yes">${t("yes")}</option>
         </select>
       </div>
-    </td>
-    <td class="col-price"><input type="number" id="price-${i}" value="" min="0" step="any" oninput="calcLine(${i});saveLines()" disabled></td>
-    <td class="col-tot"><div class="line-total-val" id="ltv-${i}">0.00</div></td>
-    <td class="col-act"><button type="button" class="btn-remove" onclick="removeLine(${i})">&#x00D7;</button></td>`;
-  tbody.appendChild(tr);
+    </div>
+    <input type="number" id="price-${i}" class="kb-input num" value="" min="0" step="any"
+           oninput="calcLine(${i});saveLines()" disabled>
+    <span class="r kb-mono" id="ltv-${i}"
+          style="font-size:var(--fs-base);font-weight:600;align-self:center">0.00</span>
+    <button type="button" class="kb-circbtn kb-circbtn--rm" onclick="removeLine(${i})"
+            aria-label="Remove">&#x2212;</button>`;
+  tbody.appendChild(div);
 
-  const alNew = document.createElement("tr");
-  alNew.id = "al-row"; alNew.className = "al";
-  alNew.innerHTML = `<td colspan="6">
-    <button type="button" class="btn-add-line" id="btn-al" onclick="addLine()">${t("add-line")}</button>
-  </td>`;
+  const alNew = document.createElement("div");
+  alNew.id = "al-row";
+  alNew.style.cssText = "padding:10px 4px 4px";
+  alNew.innerHTML = `<button type="button" class="kb-btn kb-btn--dashed" id="btn-al"
+    onclick="addLine()">${t("add-line")}</button>`;
   tbody.appendChild(alNew);
   calcTotals();
   return i;
@@ -822,17 +1082,14 @@ function pickProduct(i) {
   txt.style.display = v === "__other__" ? "block" : "none";
 
   if (v === "") {
-    // Nothing selected — lock all three
     if (qtyEl)   { qtyEl.disabled   = true;  qtyEl.value   = ""; }
     if (uomEl)   { uomEl.disabled   = true;  uomEl.value   = ""; }
     if (priceEl) { priceEl.disabled = true;  priceEl.value = ""; }
   } else if (v === "__other__") {
-    // Free text — unlock all three (price stays locked if FX is on)
     if (qtyEl)   qtyEl.disabled   = false;
     if (uomEl)   uomEl.disabled   = false;
     if (!fxOn && priceEl) priceEl.disabled = false;
   } else {
-    // Predefined — fill UOM + price (+ optional qty) from config; lock UOM, unlock qty + price
     const p = (cfg.products || [])[+v];
     if (p) {
       if (uomEl   && p.uom)           uomEl.value   = p.uom;
@@ -840,7 +1097,7 @@ function pickProduct(i) {
       if (qtyEl   && p.qty   != null) qtyEl.value   = p.qty;
     }
     if (qtyEl)   qtyEl.disabled   = false;
-    if (uomEl)   uomEl.disabled   = true;   // UOM locked for predefined items
+    if (uomEl)   uomEl.disabled   = true;
     if (!fxOn && priceEl) priceEl.disabled = false;
   }
   calcLine(i);
@@ -856,7 +1113,6 @@ function toggleFx(i) {
 
   if (!on) {
     lr?.classList.remove("open");
-    // Re-enable price if a description is selected
     const dv = document.getElementById(`dsel-${i}`)?.value;
     if (dv && dv !== "" && priceEl) priceEl.disabled = false;
     calcTotals();
@@ -864,34 +1120,36 @@ function toggleFx(i) {
     return;
   }
 
-  // Lock unit price — it will only be set by calcFxFromPer
   if (priceEl) { priceEl.disabled = true; priceEl.value = ""; }
   lr?.classList.add("open");
 
   const lcy = document.getElementById("icur")?.value || "";
   const defaultFcy = (cfg.currencies || ["USD"])[0] || "USD";
 
-  const fxTr = document.createElement("tr");
-  fxTr.className = "fx"; fxTr.id = `fx-row-${i}`;
-  fxTr.innerHTML = `
-    <td colspan="6">
-      <div class="fx-grid">
-        <div>
-          <div class="fx-label">${t("currency-code")}</div>
-          <select id="fcur-${i}" onchange="updateFxLabels(${i});calcLine(${i});saveLines()">${currOpts(defaultFcy)}</select>
-        </div>
-        <div>
-          <div class="fx-label" id="frate-lbl-${i}">Exchange rate (X ${h(defaultFcy)} = 1 ${h(lcy)})</div>
-          <input type="number" id="frate-${i}" value="" min="0" step="any" oninput="calcFxFromPer(${i})">
-        </div>
-        <div>
-          <div class="fx-label" id="fper-lbl-${i}">Price per item in ${h(defaultFcy)}</div>
-          <input type="number" id="fper-${i}" value="" min="0" step="any" oninput="calcFxFromPer(${i})">
-        </div>
+  const fxDiv = document.createElement("div");
+  fxDiv.className = "fx-block"; fxDiv.id = `fx-row-${i}`;
+  fxDiv.innerHTML = `
+    <div class="kb-grid cols-3">
+      <div class="kb-field">
+        <span class="kb-label">${t("currency-code")}</span>
+        <select id="fcur-${i}" class="kb-select"
+                onchange="updateFxLabels(${i});calcLine(${i});saveLines()">
+          ${currOpts(defaultFcy)}
+        </select>
       </div>
-      <div class="fx-note">${t("total-foreign")}: <strong id="fltot-${i}">0.00</strong></div>
-    </td>`;
-  lr?.insertAdjacentElement("afterend", fxTr);
+      <div class="kb-field">
+        <span class="kb-label" id="frate-lbl-${i}">Exchange rate (X ${h(defaultFcy)} = 1 ${h(lcy)})</span>
+        <input type="number" id="frate-${i}" class="kb-input num" value="" min="0" step="any"
+               oninput="calcFxFromPer(${i})">
+      </div>
+      <div class="kb-field">
+        <span class="kb-label" id="fper-lbl-${i}">Price per item in ${h(defaultFcy)}</span>
+        <input type="number" id="fper-${i}" class="kb-input num" value="" min="0" step="any"
+               oninput="calcFxFromPer(${i})">
+      </div>
+    </div>
+    <div class="fx-note">${t("total-foreign")}: <strong id="fltot-${i}">0.00</strong></div>`;
+  lr?.insertAdjacentElement("afterend", fxDiv);
   calcLine(i);
   saveLines();
 }
@@ -915,7 +1173,6 @@ function calcLine(i) {
   if (document.getElementById(`fx-${i}`)?.value === "yes") {
     const per  = pn(document.getElementById(`fper-${i}`)?.value);
     const ltot = document.getElementById(`fltot-${i}`);
-    // Show foreign-currency line total (per * qty, still in foreign currency)
     if (ltot) ltot.textContent = fmt(per * qty);
   }
   calcTotals();
@@ -983,7 +1240,6 @@ function restoreStorage() {
       if (el) el.value = v;
     });
 
-    // Restore "Other" project-code visibility
     if (d.pcode === "__other__") {
       const w = document.getElementById("pcode-other-wrap");
       if (w) w.style.display = "block";
@@ -1013,20 +1269,24 @@ function relabel() {
     "lbl-sn":"sender-name","lbl-sa1":"sender-address1","lbl-sa2":"sender-address2",
     "lbl-sa3":"sender-address3","lbl-sa4":"sender-address4","lbl-sc":"sender-country",
     "lbl-sp":"sender-phone","lbl-se":"sender-email","lbl-stax":"vat-id",
-    "lbl-idate":"invoice-date","lbl-icur":"invoice-currency","lbl-pcode":"project-code","lbl-ino":"invoice-no",
+    "lbl-idate":"invoice-date","lbl-icur":"invoice-currency",
+    "lbl-pcode":"project-code","lbl-ino":"invoice-no",
     "lbl-ctn":"charge-to-name","lbl-ca1":"charge-to-address1","lbl-ca2":"charge-to-address2",
     "lbl-ca3":"charge-to-address3","lbl-ca4":"charge-to-address4","lbl-cc":"charge-to-country",
-    "lbl-cph":"charge-to-phone","lbl-cem":"charge-to-email","lbl-cvat":"vat-id","lbl-creg":"registration-no",
-    "lbl-pay-sec":"payment","lbl-pterm":"payment-terms","lbl-days":"payment-days","lbl-paybyl":"pay-by",
-    "lbl-pacct":"account-holder","lbl-piban":"account-no","lbl-pbic":"bank-bic","lbl-pbadr":"bank-address","lbl-pref":"payment-ref",
-    "th-qty":"qty","th-uom":"uom","th-desc":"description","th-price":"price","th-tot":"line-total",
+    "lbl-cph":"charge-to-phone","lbl-cem":"charge-to-email",
+    "lbl-cvat":"vat-id","lbl-creg":"registration-no",
+    "lbl-pay-sec":"payment","lbl-pterm":"payment-terms",
+    "lbl-days":"payment-days","lbl-paybyl":"pay-by",
+    "lbl-pacct":"account-holder","lbl-piban":"account-no","lbl-pbic":"bank-bic",
+    "lbl-pbadr":"bank-address","lbl-pref":"payment-ref",
+    "th-qty":"qty","th-uom":"uom","th-desc":"description",
+    "th-price":"price","th-tot":"line-total",
     "lbl-sub":"subtotal","lbl-paid":"paid","lbl-topay":"to-pay",
   };
   Object.entries(lm).forEach(([id, key]) => {
     const el = document.getElementById(id);
     if (el) el.textContent = t(key);
   });
-  document.getElementById("inv-banner").querySelector("h1").textContent = t("invoice");
 
   Object.keys(lines).forEach(i => {
     const fl = document.getElementById(`lbl-fx-${i}`);
@@ -1050,7 +1310,6 @@ function relabel() {
   const genBtn = document.getElementById("btn-generate");
   if (genBtn) genBtn.textContent = t("generate-invoice");
 
-  // Rebuild dynamic tax line dropdowns
   Object.keys(tLines).forEach(i => {
     const ttEl = document.getElementById(`tt-${i}`);
     if (ttEl) {
@@ -1075,7 +1334,6 @@ function relabel() {
     ctPick.innerHTML = `<option value="">${t("select")}</option>${ctOpts}<option value="__other__">${t("other")}</option>`;
     ctPick.value = cur;
   }
-
 }
 
 // ── Generate invoice ──────────────────────────────────────────────────────────
@@ -1147,7 +1405,7 @@ function gatherData(renderLang) {
       const cur        = document.getElementById(`fcur-${i}`)?.value || "";
       const rate       = pn(document.getElementById(`frate-${i}`)?.value) || 1;
       const per        = pn(document.getElementById(`fper-${i}`)?.value);
-      const foreignTot = per * qty;   // line total in foreign currency
+      const foreignTot = per * qty;
       fxNote = { cur, rate, per, foreignTot, td };
     }
     rows.push({ qty, uomLbl, desc, price, tot, fxNote });
@@ -1176,7 +1434,6 @@ function gatherData(renderLang) {
            rows, sub, taxes, totalTax, paid, toPay };
 }
 
-// ── Build HTML preview ────────────────────────────────────────────────────────
 // ── Build PDF with jsPDF + Helvetica ─────────────────────────────────────────
 function buildPDF() {
   if (!window.jspdf) { alert("PDF library not loaded — check your internet connection."); return; }
@@ -1185,14 +1442,12 @@ function buildPDF() {
   const paperFmt = (cfg["paper-format"] || "a4").toLowerCase();
   const doc = new jsPDF({ unit: "mm", format: paperFmt });
 
-  // Page geometry
   const PW = paperFmt === "letter" ? 215.9 : 210;
   const PH = paperFmt === "letter" ? 279.4 : 297;
   const ML = 15, MR = 15, MT = 15;
-  const CW = PW - ML - MR;   // 180mm content width
-  const XR = PW - MR;        // 195mm right edge
+  const CW = PW - ML - MR;
+  const XR = PW - MR;
 
-  // Color helpers
   const fc = (r,g,b) => doc.setFillColor(r,g,b);
   const dc = (r,g,b) => doc.setDrawColor(r,g,b);
   const tc = (r,g,b) => doc.setTextColor(r,g,b);
@@ -1211,13 +1466,12 @@ function buildPDF() {
 
   // ── 2×2 HEADER ───────────────────────────────────────────────────────────
   const GAP  = 8;
-  const LW   = (CW - GAP) / 2;   // ~86mm each column
-  const XM_L = ML + LW + GAP;    // left edge of right column
+  const LW   = (CW - GAP) / 2;
+  const XM_L = ML + LW + GAP;
 
   let y = MT;
-  let ly = y, ry = y;  // row-1 bottom trackers (left / right)
+  let ly = y, ry = y;
 
-  // ── Row 1 left: Sender ──
   if (sName) { fb(13); tc(30,45,69); tL(sName, ML, ly); ly += 6; }
   fn(8.5); tc(75,85,99);
   [...sAddr, sCntry].filter(Boolean).forEach(l => { tL(l, ML, ly); ly += 4.5; });
@@ -1229,7 +1483,6 @@ function buildPDF() {
     fn(8); tc(107,114,128); tL(parts.join("   "), ML, ly); ly += 5;
   }
 
-  // ── Row 1 right: INVOICE + meta ──
   fb(24); tc(30,45,69); tR(td("invoice"), XR, ry); ry += 10;
   const metaRows = [
     iNo   ? [td("invoice-no"),       iNo]            : null,
@@ -1243,12 +1496,10 @@ function buildPDF() {
     ry += 5;
   });
 
-  // Row 1 divider
   const row1Y = Math.max(ly, ry) + 4;
   dc(209,213,219); doc.setLineWidth(0.3);
   doc.line(ML, row1Y, XR, row1Y);
 
-  // ── Row 2 left: Charge-to ──
   let ly2 = row1Y + 5, ry2 = row1Y + 5;
   fb(7); tc(107,114,128); tL(td("charge-to").toUpperCase(), ML, ly2); ly2 += 5;
   if (ctName) {
@@ -1263,7 +1514,6 @@ function buildPDF() {
     if (ctParts.length) { fn(8); tc(107,114,128); tL(ctParts.join("   "), ML, ly2); ly2 += 5; }
   }
 
-  // ── Row 2 right: Payment ──
   if (pTerm > 0 || showBank) {
     fb(7); tc(107,114,128); tL(td("payment").toUpperCase(), XM_L, ry2); ry2 += 5;
     if (pTerm > 0) {
@@ -1294,17 +1544,14 @@ function buildPDF() {
 
   y = Math.max(ly2, ry2) + 5;
 
-  // Navy rule
   dc(30,45,69); doc.setLineWidth(0.6);
   doc.line(ML, y, XR, y); y += 6;
 
   // ── LINE ITEMS TABLE ──────────────────────────────────────────────────────
-  // Column widths: QTY=18, UOM=18, DESC=flex, PRICE=28, TOTAL=34
   const CQ=18, CU=18, CP=28, CT=34;
-  const CD = CW - CQ - CU - CP - CT;    // ~82mm
+  const CD = CW - CQ - CU - CP - CT;
   const xQ=ML, xU=xQ+CQ, xD=xU+CU, xP=xD+CD, xT=xP+CP;
-
-  const TH = 7; // table header height
+  const TH = 7;
 
   if (y + TH > PH - 40) { doc.addPage(); y = MT; }
 
@@ -1321,7 +1568,6 @@ function buildPDF() {
   const ROW_H = 7.5;
 
   rows.forEach((row, idx) => {
-    // Calculate row height (description and fx note may wrap)
     const dLines  = sp(row.desc, CD - 4);
     const descH   = Math.max(0, (dLines.length - 1) * 3.8);
     let   fxH     = 0;
@@ -1335,13 +1581,11 @@ function buildPDF() {
 
     if (y + rh > PH - 30) { doc.addPage(); y = MT; }
 
-    // Alternating row background
     if (idx % 2 === 1) {
       fc(249,250,251); dc(255,255,255); doc.setLineWidth(0);
       doc.rect(ML, y, CW, rh, "F");
     }
 
-    // Bottom border
     dc(209,213,219); doc.setLineWidth(0.1);
     doc.line(ML, y+rh, XR, y+rh);
 
@@ -1351,10 +1595,7 @@ function buildPDF() {
     fn(8.5); tc(17,24,39);
     tL(qStr,       xQ+2, yt);
     tL(row.uomLbl, xU+2, yt);
-
-    // Description (possibly multi-line)
     dLines.forEach((dline, li) => tL(dline, xD+2, yt + li*3.8));
-
     fn(8.5); tc(17,24,39);   tR(fmt(row.price), xP+CP-2, yt);
     fb(8.5); tc(17,24,39);   tR(fmt(row.tot),   XR-2,    yt);
 
@@ -1372,10 +1613,10 @@ function buildPDF() {
   y += 4;
 
   // ── TOTALS ────────────────────────────────────────────────────────────────
-  const TW   = 78;         // totals block width
-  const TX   = XR - TW;   // totals block left edge
-  const TRH  = 6.5;        // row height
-  const TLBX = XR - 40;   // label right-align x
+  const TW   = 78;
+  const TX   = XR - TW;
+  const TRH  = 6.5;
+  const TLBX = XR - 40;
 
   const totRows = [
     [td("subtotal"), fmt(sub)],
@@ -1392,7 +1633,6 @@ function buildPDF() {
     y += TRH;
   });
 
-  // To Pay (navy bar)
   if (y + 9 > PH - 10) { doc.addPage(); y = MT; }
   fc(30,45,69); dc(255,255,255); doc.setLineWidth(0);
   doc.rect(TX, y, TW, 9, "F");
@@ -1400,7 +1640,6 @@ function buildPDF() {
   fb(11); tc(255,255,255); tR(fmt(toPay),   XR-2, y+5.8);
   y += 9;
 
-  // ── Save ──────────────────────────────────────────────────────────────────
   doc.save(iNo ? `invoice-${iNo}.pdf` : "invoice.pdf");
 }
 
@@ -1444,7 +1683,6 @@ function loadLines() {
     const data = JSON.parse(raw);
     if (!Array.isArray(data) || data.length === 0) return false;
 
-    // Remove the default first empty line added by boot()
     const firstKey = Object.keys(lines)[0];
     if (firstKey !== undefined) {
       document.getElementById(`lr-${firstKey}`)?.remove();
@@ -1456,12 +1694,11 @@ function loadLines() {
     data.forEach(ld => {
       const i = addLine();
 
-      // Restore description selection
       if (ld.dsel) {
         const dsel = document.getElementById(`dsel-${i}`);
         if (dsel) {
           dsel.value = ld.dsel;
-          pickProduct(i); // enables/disables fields, fills UOM+price from config
+          pickProduct(i);
           if (ld.dsel === "__other__" && ld.dtxt) {
             const dtxt = document.getElementById(`dtxt-${i}`);
             if (dtxt) dtxt.value = ld.dtxt;
@@ -1469,16 +1706,14 @@ function loadLines() {
         }
       }
 
-      // Restore UOM (covers "Other" lines where user picked their own)
       if (ld.uom) { const el = document.getElementById(`uom-${i}`); if (el) el.value = ld.uom; }
-      // Restore qty
       if (ld.qty) { const el = document.getElementById(`qty-${i}`); if (el) el.value = ld.qty; }
 
       if (ld.fx === "yes") {
         const fxEl = document.getElementById(`fx-${i}`);
         if (fxEl) {
           fxEl.value = "yes";
-          toggleFx(i); // creates FX row and locks price
+          toggleFx(i);
           if (ld.fcur) {
             const el = document.getElementById(`fcur-${i}`);
             if (el) { el.value = ld.fcur; updateFxLabels(i); }
