feat(export): redesign PDF view for formal publication styling without colors or watermarks

apps/web/app/globals.css

@@ -382,7 +382,7 @@ body {
 @media print {
   @page {
     size: A4 portrait;
-    margin: 15mm 15mm 15mm 15mm;
+    margin: 18mm 15mm 18mm 15mm;
   }
 
   /* Force exact background colors and graphics */
@@ -395,7 +395,8 @@ body {
   html, body {
     background-color: #ffffff !important;
     color: #0f172a !important;
-    font-size: 10.5pt !important;
+    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+    font-size: 10pt !important;
     line-height: 1.5 !important;
     margin: 0 !important;
     padding: 0 !important;
@@ -421,6 +422,7 @@ body {
     padding: 0 !important;
     border: none !important;
     box-shadow: none !important;
+    background: transparent !important;
   }
 
   /* Page break rules */
@@ -442,12 +444,19 @@ body {
   .challenge-header-card,
   .badge-container,
   table,
+  tr,
+  img,
   pre,
   blockquote {
     break-inside: avoid !important;
     page-break-inside: avoid !important;
   }
 
+  img {
+    max-width: 100% !important;
+    height: auto !important;
+  }
+
   /* Code block wrapping and styling in print */
   pre,
   pre code,
@@ -455,30 +464,48 @@ body {
     white-space: pre-wrap !important;
     word-break: break-all !important;
     overflow-wrap: anywhere !important;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
     font-size: 8.5pt !important;
     line-height: 1.4 !important;
   }
 
+  code {
+    background-color: #f1f5f9 !important;
+    color: #0f172a !important;
+    padding: 1pt 3pt !important;
+    border-radius: 3px !important;
+    border: 1px solid #e2e8f0 !important;
+  }
+
   pre {
     background-color: #f8fafc !important;
     color: #0f172a !important;
     border: 1px solid #cbd5e1 !important;
-    border-radius: 6px !important;
+    border-radius: 4px !important;
     padding: 8pt 10pt !important;
-    margin: 10pt 0 !important;
+    margin: 8pt 0 !important;
   }
 
-  /* Typography tweaks for high-contrast print */
+  pre code {
+    background-color: transparent !important;
+    border: none !important;
+    padding: 0 !important;
+  }
+
+  /* Typography tweaks for formal print */
   .prose {
-    color: #1e293b !important;
-    font-size: 10.5pt !important;
+    color: #0f172a !important;
+    font-size: 10pt !important;
   }
 
   .prose h1,
   .prose h2,
   .prose h3,
-  .prose h4 {
-    color: #0f172a !important;
+  .prose h4,
+  .prose h5,
+  .prose h6 {
+    color: #020617 !important;
+    font-weight: 700 !important;
     page-break-after: avoid !important;
     break-after: avoid !important;
   }
@@ -489,30 +516,35 @@ body {
   }
 
   .prose a {
-    color: #312e81 !important;
+    color: #0f172a !important;
     text-decoration: underline !important;
   }
 
-  /* Links display clean href only if needed or retain normal link text */
   .prose blockquote {
-    background-color: #f1f5f9 !important;
-    border-left: 3.5pt solid #4f46e5 !important;
+    background-color: #f8fafc !important;
+    border-left: 3pt solid #334155 !important;
     color: #334155 !important;
     padding: 6pt 10pt !important;
+    margin: 8pt 0 !important;
   }
 
   .prose table {
     border: 1px solid #cbd5e1 !important;
     font-size: 9pt !important;
+    width: 100% !important;
+    border-collapse: collapse !important;
   }
 
   .prose th {
     background-color: #f1f5f9 !important;
     color: #0f172a !important;
+    font-weight: 600 !important;
     border-bottom: 1.5px solid #94a3b8 !important;
+    padding: 4pt 6pt !important;
   }
 
   .prose td {
     border-bottom: 1px solid #e2e8f0 !important;
+    padding: 4pt 6pt !important;
   }
 }