ui: enlarge confidence and delta metric displays in HTML report

Why:
Subjectivity and polarity deltas were too small to notice in rendered
reports. Confidence meter was visually underemphasized compared to
other metrics, reducing clarity.

What:
- Increase font size of subjectivity and polarity delta values to 2rem
- Enlarge confidence label and numeric value
- Increase meter bar height from 5px to 10px
- Adjust container width to 400px for consistent scaling

Author: doguabaris

src/lib/html-renderer.ts

@@ -196,11 +196,11 @@ export const renderBiasPanel = (analysis: StructuredAnalysisReport): string => {
   <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem;">
     <div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 0.75rem; border-radius: 6px; text-align: center;">
       <p style="font-size: 0.65rem; color: #6c757d; margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.05em;">Subjectivity</p>
-      <strong style="display: block; font-size: 1.25rem; color: #221C46;">${metrics.subjectivity_delta.toFixed(3)}</strong>
+      <strong style="display: block; font-size: 2rem; color: #221C46;">${metrics.subjectivity_delta.toFixed(3)}</strong>
     </div>
     <div style="background: #f8f9fa; border: 1px solid #e9ecef; padding: 0.75rem; border-radius: 6px; text-align: center;">
       <p style="font-size: 0.65rem; color: #6c757d; margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.05em;">Polarity</p>
-      <strong style="display: block; font-size: 1.25rem; color: #221C46;">${metrics.polarity_delta.toFixed(3)}</strong>
+      <strong style="display: block; font-size: 2rem; color: #221C46;">${metrics.polarity_delta.toFixed(3)}</strong>
     </div>
   </div>
   ${grokTerms ? `<div style="margin-bottom: 0.5rem;"><p style="font-size: 0.65rem; color: #6c757d; margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.05em;">Grokipedia Terms</p><div>${grokTerms}</div></div>` : ''}
@@ -403,12 +403,12 @@ export const renderHtmlReport = (
     meterColor = '#fd7e14';
   }
 
-  const confidenceMeter = `<div style="margin: 1rem 0; padding: 1.25rem;">
+  const confidenceMeter = `<div style="padding: 1.25rem;width: 400px;">
     <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
-      <span style="font-size: 0.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.05em;">Confidence</span>
-      <span style="font-size: 1.25rem; font-weight: 700; color: ${meterColor};">${actualValue.toFixed(0)}%</span>
+      <span style="font-size: 1.75rem; font-weight: 600; color: #6c757d; text-transform: uppercase; letter-spacing: 0.05em;">Confidence</span>
+      <span style="font-size: 2rem; font-weight: 700; color: ${meterColor};">${actualValue.toFixed(0)}%</span>
     </div>
-    <div style="position: relative; height: 5px; background: linear-gradient(to right, #dc3545 0%, #dc3545 20%, #fd7e14 20%, #fd7e14 50%, #ffc107 50%, #ffc107 70%, #00EB5E 70%, #00EB5E 90%, #28a745 90%, #28a745 100%); overflow: visible;">
+    <div style="position: relative; height: 10px; background: linear-gradient(to right, #dc3545 0%, #dc3545 20%, #fd7e14 20%, #fd7e14 50%, #ffc107 50%, #ffc107 70%, #00EB5E 70%, #00EB5E 90%, #28a745 90%, #28a745 100%); overflow: visible;">
       <div style="position: absolute; left: ${actualValue}%; top: 50%; transform: translate(-50%, -50%); width: 3px; height: 15px; background: #221C46; z-index: 2;"></div>
       <div style="position: absolute; left: ${actualValue}%; top: -6px; transform: translateX(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #221C46; z-index: 3;"></div>
     </div>