feat(report): add browser-rendered report and PDF print

frontend/src/app/globals.css

@@ -1787,3 +1787,55 @@ input:disabled, select:disabled { color: var(--color-ink-tertiary); background:
 .payment-qr-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; }
 .payment-qr-badge { position: absolute; top: 50%; left: 50%; display: grid; width: 44px; height: 44px; padding: 4px; transform: translate(-50%, -50%); border: 4px solid #fff; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / 18%); }
 .payment-qr-badge svg { display: block; width: 100%; height: 100%; }
+
+/* ============================================================
+   personal-report: unique block — report reader + A4 print
+   Owned by the report UI worker. Only used by /reports/[reportId].
+   Screen layout uses Tailwind utilities; this block only adds
+   print-critical and report-specific rules.
+   ============================================================ */
+@page {
+  size: A4;
+  margin: 14mm 12mm;
+}
+
+/* Small cards / short tables / charts avoid page breaks; long themes
+   (personal-report-theme) intentionally paginate. */
+.personal-report-avoid-break {
+  break-inside: avoid-page;
+}
+
+.personal-report-avoid-break-row {
+  break-inside: avoid;
+}
+
+@media print {
+  html,
+  body {
+    background: #fff !important;
+  }
+
+  * {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+
+  /* Navigation, disclosure toggle and other screen-only chrome. */
+  .personal-report-screen-only {
+    display: none !important;
+  }
+
+  /* Collapsed appendix is printed in full (product decision). */
+  .personal-report-print-always {
+    display: block !important;
+  }
+
+  .personal-report-document {
+    max-width: none !important;
+    padding: 0 !important;
+  }
+
+  .personal-report-chart-svg {
+    max-width: 120mm;
+  }
+}