@vibecheckai/cli 3.1.2 → 3.1.4

package/bin/runners/lib/report-html.js

@@ -1,1499 +1,1230 @@
 /**
- * @deprecated Use html-report.js instead. This module is kept for backward compatibility.
- * Import from report.js for the unified API.
- */
-
-/**
- * World-Class HTML Report Templates
+ * World-Class Enterprise HTML Report Generator
  * 
  * Features:
- * - Modern glass-morphism design
- * - Animated Chart.js visualizations
- * - Interactive findings explorer
- * - Dark/light mode toggle
- * - Print-optimized CSS
- * - Responsive mobile layout
+ * - Animated score ring with gradient
+ * - Interactive severity donut chart (pure CSS)
+ * - Reality Mode broken flow visualization
+ * - Dark/light theme toggle with persistence
+ * - Print-optimized layout
+ * - White-label customization
+ * - Responsive design
  * - Accessibility compliant
+ * - Zero external dependencies (all inline)
  */
 
-const { formatCategoryName } = require("./report-engine");
-
-// ============================================================================
-// CSS DESIGN SYSTEM
-// ============================================================================
-
-function getDesignSystem() {
-  return `
-:root {
-  /* Colors */
-  --color-bg: #0f172a;
-  --color-bg-card: rgba(30, 41, 59, 0.8);
-  --color-bg-elevated: rgba(51, 65, 85, 0.6);
-  --color-text: #f8fafc;
-  --color-text-muted: #94a3b8;
-  --color-text-dim: #64748b;
-  --color-border: rgba(148, 163, 184, 0.2);
-  
-  /* Brand */
-  --color-primary: #3b82f6;
-  --color-primary-glow: rgba(59, 130, 246, 0.4);
-  
-  /* Status */
-  --color-ship: #22c55e;
-  --color-ship-bg: rgba(34, 197, 94, 0.15);
-  --color-warn: #f59e0b;
-  --color-warn-bg: rgba(245, 158, 11, 0.15);
-  --color-block: #ef4444;
-  --color-block-bg: rgba(239, 68, 68, 0.15);
-  
-  /* Severity */
-  --color-critical: #ef4444;
-  --color-high: #f97316;
-  --color-medium: #eab308;
-  --color-low: #6b7280;
-  
-  /* Spacing */
-  --space-xs: 4px;
-  --space-sm: 8px;
-  --space-md: 16px;
-  --space-lg: 24px;
-  --space-xl: 32px;
-  --space-2xl: 48px;
-  --space-3xl: 64px;
-  
-  /* Radius */
-  --radius-sm: 6px;
-  --radius-md: 12px;
-  --radius-lg: 20px;
-  --radius-xl: 28px;
-  --radius-full: 9999px;
-  
-  /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
-  --shadow-glow: 0 0 40px var(--color-primary-glow);
-  
-  /* Typography */
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
-  
-  /* Transitions */
-  --transition-fast: 150ms ease;
-  --transition-normal: 250ms ease;
-  --transition-slow: 400ms ease;
-}
-
-/* Light mode */
-[data-theme="light"] {
-  --color-bg: #f8fafc;
-  --color-bg-card: rgba(255, 255, 255, 0.9);
-  --color-bg-elevated: rgba(241, 245, 249, 0.9);
-  --color-text: #0f172a;
-  --color-text-muted: #475569;
-  --color-text-dim: #94a3b8;
-  --color-border: rgba(148, 163, 184, 0.3);
-  --color-ship-bg: rgba(34, 197, 94, 0.1);
-  --color-warn-bg: rgba(245, 158, 11, 0.1);
-  --color-block-bg: rgba(239, 68, 68, 0.1);
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--color-bg);
-  color: var(--color-text);
-  line-height: 1.6;
-  min-height: 100vh;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* Background pattern */
-body::before {
-  content: '';
-  position: fixed;
-  inset: 0;
-  background: 
-    radial-gradient(circle at 20% 20%, var(--color-primary-glow), transparent 40%),
-    radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.2), transparent 40%);
-  pointer-events: none;
-  z-index: -1;
-}
-
-/* ============================================================================
-   LAYOUT
-   ============================================================================ */
-
-.report {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: var(--space-xl);
-}
-
-@media (max-width: 768px) {
-  .report {
-    padding: var(--space-md);
-  }
-}
-
-/* ============================================================================
-   HEADER
-   ============================================================================ */
-
-.report-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: var(--space-2xl);
-  padding-bottom: var(--space-xl);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.report-title {
-  font-size: 2rem;
-  font-weight: 700;
-  letter-spacing: -0.025em;
-  margin-bottom: var(--space-sm);
-}
-
-.report-meta {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-}
-
-.report-meta span {
-  display: block;
-}
-
-.report-actions {
-  display: flex;
-  gap: var(--space-sm);
-}
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-md);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  border: 1px solid var(--color-border);
-  background: var(--color-bg-card);
-  color: var(--color-text);
-}
-
-.btn:hover {
-  background: var(--color-bg-elevated);
-  transform: translateY(-1px);
-}
-
-.btn-icon {
-  padding: var(--space-sm);
-}
-
-/* ============================================================================
-   HERO SECTION (Score + Verdict)
-   ============================================================================ */
-
-.hero-section {
-  display: grid;
-  grid-template-columns: 1fr 1.5fr;
-  gap: var(--space-xl);
-  margin-bottom: var(--space-2xl);
-}
-
-@media (max-width: 768px) {
-  .hero-section {
-    grid-template-columns: 1fr;
-  }
-}
-
-.score-card {
-  background: var(--color-bg-card);
-  backdrop-filter: blur(20px);
-  border-radius: var(--radius-xl);
-  padding: var(--space-2xl);
-  border: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-}
-
-.score-card::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.05));
-  pointer-events: none;
-}
-
-.score-ring {
-  position: relative;
-  width: 200px;
-  height: 200px;
-  margin-bottom: var(--space-lg);
-}
-
-.score-ring svg {
-  transform: rotate(-90deg);
-}
-
-.score-ring-bg {
-  fill: none;
-  stroke: var(--color-border);
-  stroke-width: 12;
-}
-
-.score-ring-progress {
-  fill: none;
-  stroke-width: 12;
-  stroke-linecap: round;
-  transition: stroke-dasharray 1s ease-out;
-}
-
-.score-ring-progress.ship { stroke: var(--color-ship); }
-.score-ring-progress.warn { stroke: var(--color-warn); }
-.score-ring-progress.block { stroke: var(--color-block); }
-
-.score-value {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 3.5rem;
-  font-weight: 800;
-  letter-spacing: -0.05em;
-}
-
-.score-label {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-}
-
-.verdict-card {
-  background: var(--color-bg-card);
-  backdrop-filter: blur(20px);
-  border-radius: var(--radius-xl);
-  padding: var(--space-2xl);
-  border: 1px solid var(--color-border);
-}
-
-.verdict-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-md) var(--space-xl);
-  border-radius: var(--radius-full);
-  font-size: 1.25rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: var(--space-lg);
-}
-
-.verdict-badge.ship {
-  background: var(--color-ship-bg);
-  color: var(--color-ship);
-  box-shadow: 0 0 30px rgba(34, 197, 94, 0.3);
-}
-
-.verdict-badge.warn {
-  background: var(--color-warn-bg);
-  color: var(--color-warn);
-  box-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
-}
-
-.verdict-badge.block {
-  background: var(--color-block-bg);
-  color: var(--color-block);
-  box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
-}
-
-.verdict-message {
-  font-size: 1.125rem;
-  margin-bottom: var(--space-xl);
-  color: var(--color-text-muted);
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--space-md);
-}
-
-.stat-item {
-  text-align: center;
-  padding: var(--space-md);
-  background: var(--color-bg-elevated);
-  border-radius: var(--radius-md);
-}
-
-.stat-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  display: block;
-}
-
-.stat-label {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* ============================================================================
-   SECTIONS
-   ============================================================================ */
-
-.section {
-  margin-bottom: var(--space-2xl);
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  margin-bottom: var(--space-lg);
-}
-
-.section-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--radius-md);
-  background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  box-shadow: var(--shadow-glow);
-}
-
-.section-title {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.section-subtitle {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-}
-
-/* ============================================================================
-   CARDS
-   ============================================================================ */
-
-.card {
-  background: var(--color-bg-card);
-  backdrop-filter: blur(20px);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  padding: var(--space-xl);
-  transition: all var(--transition-normal);
-}
-
-.card:hover {
-  border-color: var(--color-primary);
-  box-shadow: var(--shadow-lg);
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: var(--space-lg);
-}
-
-/* ============================================================================
-   CATEGORY BARS
-   ============================================================================ */
-
-.category-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
-.category-item {
-  background: var(--color-bg-elevated);
-  border-radius: var(--radius-md);
-  padding: var(--space-md) var(--space-lg);
-}
-
-.category-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-sm);
-}
-
-.category-name {
-  font-weight: 500;
-}
-
-.category-score {
-  font-weight: 700;
-  font-size: 1.125rem;
-}
-
-.category-score.good { color: var(--color-ship); }
-.category-score.ok { color: var(--color-warn); }
-.category-score.bad { color: var(--color-block); }
-
-.category-bar {
-  height: 8px;
-  background: var(--color-border);
-  border-radius: var(--radius-full);
-  overflow: hidden;
-}
-
-.category-bar-fill {
-  height: 100%;
-  border-radius: var(--radius-full);
-  transition: width 0.8s ease-out;
-}
-
-.category-bar-fill.good { background: linear-gradient(90deg, var(--color-ship), #4ade80); }
-.category-bar-fill.ok { background: linear-gradient(90deg, var(--color-warn), #fbbf24); }
-.category-bar-fill.bad { background: linear-gradient(90deg, var(--color-block), #f87171); }
-
-/* ============================================================================
-   SEVERITY CHART
-   ============================================================================ */
-
-.severity-chart {
-  display: flex;
-  gap: var(--space-lg);
-  align-items: center;
-}
-
-.severity-donut {
-  flex-shrink: 0;
-}
-
-.severity-legend {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: var(--space-sm) var(--space-xl);
-  flex: 1;
-}
-
-.severity-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.severity-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: var(--radius-full);
-}
-
-.severity-dot.critical { background: var(--color-critical); }
-.severity-dot.high { background: var(--color-high); }
-.severity-dot.medium { background: var(--color-medium); }
-.severity-dot.low { background: var(--color-low); }
-
-.severity-label {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-}
-
-.severity-count {
-  font-weight: 700;
-  margin-left: auto;
-}
-
-/* ============================================================================
-   FINDINGS
-   ============================================================================ */
-
-.findings-tabs {
-  display: flex;
-  gap: var(--space-sm);
-  margin-bottom: var(--space-lg);
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: var(--space-md);
-}
-
-.findings-tab {
-  padding: var(--space-sm) var(--space-md);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-  background: transparent;
-  border: none;
-  color: var(--color-text-muted);
-}
-
-.findings-tab:hover {
-  color: var(--color-text);
-  background: var(--color-bg-elevated);
-}
-
-.findings-tab.active {
-  color: var(--color-primary);
-  background: rgba(59, 130, 246, 0.1);
-}
-
-.findings-tab .count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 20px;
-  height: 20px;
-  border-radius: var(--radius-full);
-  background: var(--color-bg-elevated);
-  font-size: 0.75rem;
-  margin-left: var(--space-xs);
-}
-
-.findings-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
-.finding-card {
-  background: var(--color-bg-elevated);
-  border-radius: var(--radius-md);
-  padding: var(--space-lg);
-  border-left: 4px solid;
-  transition: all var(--transition-fast);
-}
-
-.finding-card:hover {
-  transform: translateX(4px);
-}
-
-.finding-card.critical { border-left-color: var(--color-critical); }
-.finding-card.high { border-left-color: var(--color-high); }
-.finding-card.medium { border-left-color: var(--color-medium); }
-.finding-card.low { border-left-color: var(--color-low); }
-
-.finding-header {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--space-md);
-  margin-bottom: var(--space-sm);
-}
-
-.finding-severity {
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-  font-size: 0.625rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: white;
-}
-
-.finding-severity.critical { background: var(--color-critical); }
-.finding-severity.high { background: var(--color-high); }
-.finding-severity.medium { background: var(--color-medium); }
-.finding-severity.low { background: var(--color-low); }
-
-.finding-id {
-  color: var(--color-text-dim);
-  font-size: 0.75rem;
-  font-family: var(--font-mono);
-}
-
-.finding-title {
-  font-weight: 600;
-  flex: 1;
-}
-
-.finding-meta {
-  display: flex;
-  gap: var(--space-lg);
-  margin-top: var(--space-sm);
-  font-size: 0.875rem;
-  color: var(--color-text-muted);
-}
-
-.finding-file {
-  font-family: var(--font-mono);
-  background: var(--color-bg-card);
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-  font-size: 0.75rem;
-}
-
-.finding-fix {
-  margin-top: var(--space-md);
-  padding: var(--space-md);
-  background: rgba(34, 197, 94, 0.1);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  color: var(--color-ship);
-}
-
-.finding-fix::before {
-  content: '💡 ';
-}
-
-/* ============================================================================
-   FIX ESTIMATES
-   ============================================================================ */
-
-.fix-estimate-card {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xl);
-  background: linear-gradient(135deg, var(--color-bg-card), var(--color-bg-elevated));
-  border-radius: var(--radius-xl);
-  padding: var(--space-2xl);
-  border: 1px solid var(--color-border);
-}
-
-.fix-estimate-total {
-  text-align: center;
-}
-
-.fix-estimate-value {
-  font-size: 3rem;
-  font-weight: 800;
-  background: linear-gradient(135deg, var(--color-primary), #8b5cf6);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.fix-estimate-label {
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.fix-estimate-breakdown {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: var(--space-md);
-  flex: 1;
-}
-
-.fix-item {
-  text-align: center;
-  padding: var(--space-md);
-  background: var(--color-bg-card);
-  border-radius: var(--radius-md);
-}
-
-.fix-item-count {
-  font-size: 1.5rem;
-  font-weight: 700;
-}
-
-.fix-item-time {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-}
-
-/* ============================================================================
-   FOOTER
-   ============================================================================ */
-
-.report-footer {
-  margin-top: var(--space-3xl);
-  padding-top: var(--space-xl);
-  border-top: 1px solid var(--color-border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: var(--color-text-muted);
-  font-size: 0.875rem;
-}
-
-.footer-brand {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-/* ============================================================================
-   COVERAGE METRICS
-   ============================================================================ */
-
-.coverage-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: var(--space-xl);
-  text-align: center;
-}
-
-@media (max-width: 768px) {
-  .coverage-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-.coverage-ring-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--space-sm);
-  position: relative;
-}
-
-.coverage-ring {
-  display: block;
-}
-
-.coverage-ring-value {
-  position: absolute;
-  top: 35px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 1.25rem;
-  font-weight: 700;
-}
-
-.coverage-ring-label {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-/* ============================================================================
-   CHARTS
-   ============================================================================ */
-
-.bar-chart-container,
-.sparkline-container {
-  padding: var(--space-md);
-}
-
-.bar-chart-header,
-.sparkline-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-md);
-}
-
-.bar-chart-label,
-.sparkline-label {
-  font-weight: 600;
-  font-size: 0.875rem;
-}
-
-.bar-chart-value,
-.sparkline-value {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  background: var(--color-bg-elevated);
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-}
-
-.bar-chart {
-  display: flex;
-  align-items: flex-end;
-  gap: 6px;
-  height: 80px;
-  padding: var(--space-sm) 0;
-}
-
-.bar-chart .bar {
-  background: linear-gradient(180deg, var(--color-primary), rgba(59, 130, 246, 0.3));
-  border-radius: 4px 4px 0 0;
-  transition: height 0.3s ease;
-}
-
-.bar-chart .bar.spike {
-  background: linear-gradient(180deg, var(--color-warn), rgba(245, 158, 11, 0.3));
-}
-
-.bar-chart-hint,
-.sparkline-hint {
-  font-size: 0.625rem;
-  color: var(--color-text-dim);
-  margin-top: var(--space-sm);
-}
-
-.sparkline {
-  display: block;
-  width: 100%;
-}
-
-/* ============================================================================
-   BROKEN FLOWS
-   ============================================================================ */
-
-.broken-flows {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-}
-
-.flow-card {
-  background: var(--color-bg-card);
-  border-radius: var(--radius-lg);
-  padding: var(--space-xl);
-  border: 1px solid var(--color-border);
-}
-
-.flow-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: var(--space-lg);
-}
-
-.flow-title {
-  font-weight: 600;
-  font-size: 1rem;
-}
-
-.flow-severity {
-  padding: var(--space-xs) var(--space-md);
-  border-radius: var(--radius-full);
-  font-size: 0.625rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-.flow-severity.blocker {
-  background: var(--color-block-bg);
-  color: var(--color-block);
-}
-
-.flow-severity.warning {
-  background: var(--color-warn-bg);
-  color: var(--color-warn);
-}
-
-.flow-steps {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.flow-step {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-xs);
-  padding: var(--space-sm) var(--space-md);
-  border-radius: var(--radius-md);
-  font-size: 0.75rem;
-  background: var(--color-bg-elevated);
-}
-
-.flow-step.ui {
-  border-left: 3px solid var(--color-primary);
-}
-
-.flow-step.api {
-  border-left: 3px solid #8b5cf6;
-}
-
-.flow-step.form {
-  border-left: 3px solid var(--color-warn);
-}
-
-.flow-step.error {
-  border-left: 3px solid var(--color-block);
-  background: var(--color-block-bg);
-}
-
-.step-type {
-  font-weight: 600;
-  font-size: 0.625rem;
-  color: var(--color-text-dim);
-  text-transform: uppercase;
-}
-
-.step-label {
-  color: var(--color-text);
-}
-
-.step-arrow {
-  color: var(--color-text-dim);
-  font-size: 0.875rem;
-}
-
-/* ============================================================================
-   PRINT STYLES
-   ============================================================================ */
-
-@media print {
-  body {
-    background: white !important;
-    color: black !important;
-  }
+function generateWorldClassHTML(reportData, opts = {}) {
+  const { meta, summary, findings, reality, fixEstimates, truthpack } = reportData;
+  const theme = opts.theme || "dark";
+  const company = opts.company || "";
+  const logo = opts.logo || "";
+  const redactPaths = opts.redactPaths || false;
   
-  body::before {
-    display: none;
-  }
+  // Calculate metrics
+  const criticalCount = summary.severityCounts?.critical || findings.filter(f => f.severity === "BLOCK" || f.severity === "critical").length;
+  const highCount = summary.severityCounts?.high || findings.filter(f => f.severity === "high").length;
+  const mediumCount = summary.severityCounts?.medium || findings.filter(f => f.severity === "WARN" || f.severity === "medium").length;
+  const lowCount = summary.severityCounts?.low || findings.filter(f => f.severity === "INFO" || f.severity === "low").length;
+  const totalFindings = criticalCount + highCount + mediumCount + lowCount;
   
-  .report {
-    max-width: none;
-    padding: 0;
-  }
-  
-  .card, .score-card, .verdict-card {
-    background: white !important;
-    border: 1px solid #e5e5e5 !important;
-    box-shadow: none !important;
-  }
-  
-  .btn, .report-actions, .findings-tabs {
-    display: none !important;
-  }
-  
-  .section {
-    page-break-inside: avoid;
-  }
-}
-`;
-}
-
-// ============================================================================
-// COMPONENTS
-// ============================================================================
-
-function generateScoreRing(score, verdict) {
-  const radius = 85;
-  const circumference = 2 * Math.PI * radius;
-  const progress = (score / 100) * circumference;
-  const verdictClass = verdict.toLowerCase();
-  
-  return `
-    <div class="score-ring">
-      <svg width="200" height="200" viewBox="0 0 200 200">
-        <circle class="score-ring-bg" cx="100" cy="100" r="${radius}"/>
-        <circle 
-          class="score-ring-progress ${verdictClass}" 
-          cx="100" cy="100" r="${radius}"
-          stroke-dasharray="${progress} ${circumference - progress}"
-        />
-      </svg>
-      <div class="score-value">${score}</div>
-    </div>
-  `;
-}
-
-function generateCategoryBars(categoryScores) {
-  return `
-    <div class="category-list">
-      ${Object.entries(categoryScores).map(([cat, score]) => {
-        const cls = score >= 80 ? "good" : score >= 50 ? "ok" : "bad";
-        return `
-          <div class="category-item">
-            <div class="category-header">
-              <span class="category-name">${formatCategoryName(cat)}</span>
-              <span class="category-score ${cls}">${score}%</span>
-            </div>
-            <div class="category-bar">
-              <div class="category-bar-fill ${cls}" style="width: ${score}%"></div>
-            </div>
-          </div>
-        `;
-      }).join("")}
-    </div>
-  `;
-}
-
-function generateSeverityDonut(severityCounts) {
-  const total = Object.values(severityCounts).reduce((a, b) => a + b, 0);
-  if (total === 0) {
-    return `<div style="text-align: center; color: var(--color-ship); font-size: 1.25rem; padding: 40px;">✅ No issues found!</div>`;
-  }
-  
-  const colors = {
-    critical: "#ef4444",
-    high: "#f97316",
-    medium: "#eab308",
-    low: "#6b7280",
+  // Verdict styling
+  const verdictConfig = {
+    SHIP: { color: "#10b981", bg: "rgba(16,185,129,0.15)", icon: "✓", text: "READY TO SHIP" },
+    WARN: { color: "#f59e0b", bg: "rgba(245,158,11,0.15)", icon: "!", text: "NEEDS ATTENTION" },
+    BLOCK: { color: "#ef4444", bg: "rgba(239,68,68,0.15)", icon: "✕", text: "BLOCKED" },
   };
+  const verdict = verdictConfig[summary.verdict] || verdictConfig.WARN;
   
-  // SVG donut chart
-  let cumulativePercent = 0;
-  const segments = [];
+  // Score color gradient
+  const scoreColor = summary.score >= 80 ? "#10b981" : summary.score >= 60 ? "#f59e0b" : "#ef4444";
   
-  for (const [sev, count] of Object.entries(severityCounts)) {
-    if (count === 0) continue;
-    const percent = (count / total) * 100;
-    const dashArray = `${percent} ${100 - percent}`;
-    const dashOffset = -cumulativePercent;
-    segments.push(`
-      <circle
-        r="15.9155"
-        cx="50%" cy="50%"
-        fill="transparent"
-        stroke="${colors[sev]}"
-        stroke-width="6"
-        stroke-dasharray="${dashArray}"
-        stroke-dashoffset="${dashOffset}"
-      />
-    `);
-    cumulativePercent += percent;
-  }
+  // Category scores for radar/bars
+  const categoryScores = summary.categoryScores || {};
+  const categories = Object.entries(categoryScores);
   
-  return `
-    <div class="severity-chart">
-      <svg class="severity-donut" width="120" height="120" viewBox="0 0 42 42">
-        <circle r="15.9155" cx="50%" cy="50%" fill="transparent" stroke="var(--color-border)" stroke-width="6"/>
-        ${segments.join("")}
-        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="var(--color-text)" font-size="8" font-weight="700">${total}</text>
-      </svg>
-      <div class="severity-legend">
-        ${Object.entries(severityCounts).map(([sev, count]) => `
-          <div class="severity-item">
-            <span class="severity-dot ${sev}"></span>
-            <span class="severity-label">${sev.charAt(0).toUpperCase() + sev.slice(1)}</span>
-            <span class="severity-count">${count}</span>
-          </div>
-        `).join("")}
-      </div>
-    </div>
-  `;
-}
-
-function generateFindingsList(findings, limit = 20) {
-  if (findings.length === 0) {
-    return `<div style="text-align: center; color: var(--color-text-muted); padding: 40px;">No findings to display</div>`;
-  }
+  // Reality data
+  const hasReality = reality && (reality.coverage || reality.brokenFlows?.length > 0);
+  const coverage = reality?.coverage || {};
+  const brokenFlows = reality?.brokenFlows || [];
   
-  const displayed = findings.slice(0, limit);
-  
-  return `
-    <div class="findings-list">
-      ${displayed.map(f => `
-        <div class="finding-card ${f.severity}">
-          <div class="finding-header">
-            <span class="finding-severity ${f.severity}">${f.severity}</span>
-            <span class="finding-id">${f.id}</span>
-            <span class="finding-title">${escapeHtml(f.title)}</span>
-          </div>
-          <div class="finding-meta">
-            ${f.file ? `<span class="finding-file">${escapeHtml(f.file)}${f.line ? `:${f.line}` : ""}</span>` : ""}
-            ${f.category ? `<span>Category: ${formatCategoryName(f.category)}</span>` : ""}
-            ${f.fixTime ? `<span>~${f.fixTime} min to fix</span>` : ""}
-          </div>
-          ${f.fix ? `<div class="finding-fix">${escapeHtml(f.fix)}</div>` : ""}
+  return `<!DOCTYPE html>
+<html lang="en" data-theme="${theme}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="dark light">
+  <title>VibeCheck Report — ${meta.projectName}</title>
+  <style>
+    /* ========================================
+       CSS VARIABLES & THEMING
+       ======================================== */
+    :root {
+      --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+      
+      /* Spacing scale */
+      --space-1: 4px;
+      --space-2: 8px;
+      --space-3: 12px;
+      --space-4: 16px;
+      --space-5: 24px;
+      --space-6: 32px;
+      --space-7: 48px;
+      --space-8: 64px;
+      
+      /* Border radius */
+      --radius-sm: 6px;
+      --radius-md: 10px;
+      --radius-lg: 16px;
+      --radius-xl: 24px;
+      --radius-full: 9999px;
+      
+      /* Transitions */
+      --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+      --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+      
+      /* Severity colors */
+      --color-critical: #ef4444;
+      --color-high: #f97316;
+      --color-medium: #f59e0b;
+      --color-low: #3b82f6;
+      --color-info: #6b7280;
+      --color-success: #10b981;
+    }
+    
+    [data-theme="dark"] {
+      --bg-primary: #0a0a0f;
+      --bg-secondary: #111118;
+      --bg-tertiary: #1a1a24;
+      --bg-elevated: #22222e;
+      --bg-hover: #2a2a38;
+      --border-primary: rgba(255,255,255,0.08);
+      --border-secondary: rgba(255,255,255,0.12);
+      --text-primary: #fafafa;
+      --text-secondary: #a1a1aa;
+      --text-tertiary: #71717a;
+      --text-muted: #52525b;
+      --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+      --glow-color: rgba(139, 92, 246, 0.15);
+    }
+    
+    [data-theme="light"] {
+      --bg-primary: #ffffff;
+      --bg-secondary: #f9fafb;
+      --bg-tertiary: #f3f4f6;
+      --bg-elevated: #ffffff;
+      --bg-hover: #e5e7eb;
+      --border-primary: rgba(0,0,0,0.08);
+      --border-secondary: rgba(0,0,0,0.12);
+      --text-primary: #111827;
+      --text-secondary: #4b5563;
+      --text-tertiary: #6b7280;
+      --text-muted: #9ca3af;
+      --accent-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
+      --glow-color: rgba(79, 70, 229, 0.1);
+    }
+    
+    /* ========================================
+       RESET & BASE
+       ======================================== */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    
+    html {
+      font-size: 16px;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      scroll-behavior: smooth;
+    }
+    
+    body {
+      font-family: var(--font-sans);
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      line-height: 1.6;
+      min-height: 100vh;
+    }
+    
+    /* ========================================
+       LAYOUT
+       ======================================== */
+    .report-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: var(--space-6);
+    }
+    
+    /* ========================================
+       HEADER
+       ======================================== */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding-bottom: var(--space-6);
+      border-bottom: 1px solid var(--border-primary);
+      margin-bottom: var(--space-7);
+    }
+    
+    .header-left { display: flex; flex-direction: column; gap: var(--space-2); }
+    
+    .logo-container {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3);
+      margin-bottom: var(--space-2);
+    }
+    
+    .logo {
+      height: 32px;
+      width: auto;
+    }
+    
+    .brand {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      color: var(--text-tertiary);
+    }
+    
+    .header h1 {
+      font-size: 1.75rem;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      background: var(--accent-gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .header-meta {
+      display: flex;
+      gap: var(--space-5);
+      color: var(--text-tertiary);
+      font-size: 0.875rem;
+    }
+    
+    .header-meta span { display: flex; align-items: center; gap: var(--space-2); }
+    
+    .header-right { display: flex; align-items: center; gap: var(--space-4); }
+    
+    /* Theme Toggle */
+    .theme-toggle {
+      width: 44px;
+      height: 24px;
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-secondary);
+      border-radius: var(--radius-full);
+      cursor: pointer;
+      position: relative;
+      transition: var(--transition-base);
+    }
+    
+    .theme-toggle::after {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 18px;
+      height: 18px;
+      background: var(--text-primary);
+      border-radius: 50%;
+      transition: var(--transition-base);
+    }
+    
+    [data-theme="light"] .theme-toggle::after {
+      transform: translateX(20px);
+    }
+    
+    .theme-toggle:hover { background: var(--bg-hover); }
+    
+    /* Print Button */
+    .print-btn {
+      padding: var(--space-2) var(--space-4);
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-secondary);
+      border-radius: var(--radius-md);
+      color: var(--text-secondary);
+      font-size: 0.875rem;
+      font-weight: 500;
+      cursor: pointer;
+      transition: var(--transition-fast);
+    }
+    
+    .print-btn:hover {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+    
+    /* ========================================
+       HERO SECTION - Score + Verdict
+       ======================================== */
+    .hero {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: var(--space-6);
+      margin-bottom: var(--space-7);
+    }
+    
+    .score-card {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: var(--radius-xl);
+      padding: var(--space-7);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      overflow: hidden;
+    }
+    
+    .score-card::before {
+      content: '';
+      position: absolute;
+      top: -50%;
+      left: -50%;
+      width: 200%;
+      height: 200%;
+      background: radial-gradient(circle at center, var(--glow-color) 0%, transparent 50%);
+      opacity: 0.5;
+    }
+    
+    .score-ring {
+      position: relative;
+      width: 200px;
+      height: 200px;
+      margin-bottom: var(--space-5);
+    }
+    
+    .score-ring svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
+    }
+    
+    .score-ring-bg {
+      fill: none;
+      stroke: var(--bg-tertiary);
+      stroke-width: 12;
+    }
+    
+    .score-ring-progress {
+      fill: none;
+      stroke: url(#scoreGradient);
+      stroke-width: 12;
+      stroke-linecap: round;
+      stroke-dasharray: 565;
+      stroke-dashoffset: 565;
+      animation: scoreReveal 1.5s ease-out forwards;
+      animation-delay: 0.3s;
+    }
+    
+    @keyframes scoreReveal {
+      to { stroke-dashoffset: ${565 - (565 * summary.score / 100)}; }
+    }
+    
+    .score-value {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 3.5rem;
+      font-weight: 800;
+      letter-spacing: -0.02em;
+      color: ${scoreColor};
+    }
+    
+    .score-label {
+      font-size: 0.875rem;
+      color: var(--text-tertiary);
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+    }
+    
+    .verdict-card {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: var(--radius-xl);
+      padding: var(--space-7);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+    
+    .verdict-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--space-3);
+      padding: var(--space-3) var(--space-5);
+      background: ${verdict.bg};
+      border-radius: var(--radius-full);
+      width: fit-content;
+      margin-bottom: var(--space-5);
+    }
+    
+    .verdict-icon {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: ${verdict.color};
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 0.875rem;
+    }
+    
+    .verdict-text {
+      font-size: 1rem;
+      font-weight: 700;
+      color: ${verdict.color};
+      letter-spacing: 0.05em;
+    }
+    
+    .verdict-summary {
+      font-size: 1rem;
+      color: var(--text-secondary);
+      line-height: 1.7;
+      margin-bottom: var(--space-5);
+    }
+    
+    .verdict-stats {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: var(--space-3);
+    }
+    
+    .stat-item {
+      text-align: center;
+      padding: var(--space-3);
+      background: var(--bg-tertiary);
+      border-radius: var(--radius-md);
+    }
+    
+    .stat-value {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: var(--text-primary);
+    }
+    
+    .stat-value.critical { color: var(--color-critical); }
+    .stat-value.high { color: var(--color-high); }
+    .stat-value.medium { color: var(--color-medium); }
+    .stat-value.low { color: var(--color-low); }
+    
+    .stat-label {
+      font-size: 0.75rem;
+      color: var(--text-tertiary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    
+    /* ========================================
+       CATEGORY SCORES
+       ======================================== */
+    .section {
+      margin-bottom: var(--space-7);
+    }
+    
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--space-5);
+    }
+    
+    .section-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    
+    .section-badge {
+      font-size: 0.75rem;
+      padding: var(--space-1) var(--space-3);
+      background: var(--bg-tertiary);
+      border-radius: var(--radius-full);
+      color: var(--text-secondary);
+    }
+    
+    .categories-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: var(--space-4);
+    }
+    
+    .category-card {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: var(--radius-lg);
+      padding: var(--space-5);
+      transition: var(--transition-fast);
+    }
+    
+    .category-card:hover {
+      border-color: var(--border-secondary);
+      transform: translateY(-2px);
+    }
+    
+    .category-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--space-3);
+    }
+    
+    .category-name {
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: var(--text-secondary);
+    }
+    
+    .category-score {
+      font-size: 1.25rem;
+      font-weight: 700;
+    }
+    
+    .category-bar {
+      height: 6px;
+      background: var(--bg-tertiary);
+      border-radius: var(--radius-full);
+      overflow: hidden;
+    }
+    
+    .category-bar-fill {
+      height: 100%;
+      border-radius: var(--radius-full);
+      transition: width 1s ease-out;
+    }
+    
+    /* ========================================
+       REALITY MODE SECTION
+       ======================================== */
+    .reality-section {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: var(--radius-xl);
+      padding: var(--space-6);
+      margin-bottom: var(--space-7);
+    }
+    
+    .reality-header {
+      display: flex;
+      align-items: center;
+      gap: var(--space-3);
+      margin-bottom: var(--space-5);
+    }
+    
+    .reality-icon {
+      width: 40px;
+      height: 40px;
+      background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
+      border-radius: var(--radius-md);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.25rem;
+    }
+    
+    .reality-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+    }
+    
+    .reality-subtitle {
+      font-size: 0.875rem;
+      color: var(--text-tertiary);
+    }
+    
+    .coverage-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: var(--space-4);
+      margin-bottom: var(--space-6);
+    }
+    
+    .coverage-item {
+      text-align: center;
+      padding: var(--space-4);
+      background: var(--bg-tertiary);
+      border-radius: var(--radius-lg);
+    }
+    
+    .coverage-value {
+      font-size: 2rem;
+      font-weight: 700;
+      background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .coverage-label {
+      font-size: 0.75rem;
+      color: var(--text-tertiary);
+      margin-top: var(--space-1);
+    }
+    
+    /* Broken Flows */
+    .broken-flows { margin-top: var(--space-6); }
+    
+    .flow-card {
+      background: var(--bg-tertiary);
+      border: 1px solid var(--border-primary);
+      border-radius: var(--radius-lg);
+      padding: var(--space-5);
+      margin-bottom: var(--space-4);
+    }
+    
+    .flow-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--space-4);
+    }
+    
+    .flow-title {
+      font-size: 1rem;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    
+    .flow-severity {
+      padding: var(--space-1) var(--space-3);
+      border-radius: var(--radius-full);
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+    
+    .flow-severity.block {
+      background: rgba(239,68,68,0.15);
+      color: var(--color-critical);
+    }
+    
+    .flow-steps {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      flex-wrap: wrap;
+    }
+    
+    .flow-step {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+      padding: var(--space-2) var(--space-3);
+      background: var(--bg-secondary);
+      border-radius: var(--radius-md);
+      font-size: 0.8125rem;
+    }
+    
+    .flow-step.error {
+      background: rgba(239,68,68,0.15);
+      color: var(--color-critical);
+    }
+    
+    .flow-step-icon {
+      width: 16px;
+      height: 16px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 0.625rem;
+    }
+    
+    .flow-step-icon.ui { background: #3b82f6; color: white; }
+    .flow-step-icon.api { background: #10b981; color: white; }
+    .flow-step-icon.form { background: #8b5cf6; color: white; }
+    .flow-step-icon.error { background: #ef4444; color: white; }
+    
+    .flow-arrow {
+      color: var(--text-muted);
+      font-size: 0.75rem;
+    }
+    
+    /* ========================================
+       FINDINGS TABLE
+       ======================================== */
+    .findings-section {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: var(--radius-xl);
+      overflow: hidden;
+      margin-bottom: var(--space-7);
+    }
+    
+    .findings-header {
+      padding: var(--space-5) var(--space-6);
+      border-bottom: 1px solid var(--border-primary);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .findings-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+    }
+    
+    .findings-count {
+      font-size: 0.875rem;
+      color: var(--text-tertiary);
+    }
+    
+    .findings-filters {
+      display: flex;
+      gap: var(--space-2);
+      padding: var(--space-4) var(--space-6);
+      border-bottom: 1px solid var(--border-primary);
+      background: var(--bg-tertiary);
+    }
+    
+    .filter-btn {
+      padding: var(--space-2) var(--space-4);
+      background: transparent;
+      border: 1px solid var(--border-secondary);
+      border-radius: var(--radius-full);
+      font-size: 0.8125rem;
+      color: var(--text-secondary);
+      cursor: pointer;
+      transition: var(--transition-fast);
+    }
+    
+    .filter-btn:hover, .filter-btn.active {
+      background: var(--bg-hover);
+      color: var(--text-primary);
+    }
+    
+    .filter-btn.active {
+      border-color: var(--text-primary);
+    }
+    
+    .findings-list { max-height: 600px; overflow-y: auto; }
+    
+    .finding-item {
+      display: grid;
+      grid-template-columns: 80px 1fr auto;
+      gap: var(--space-4);
+      padding: var(--space-4) var(--space-6);
+      border-bottom: 1px solid var(--border-primary);
+      transition: var(--transition-fast);
+    }
+    
+    .finding-item:hover { background: var(--bg-hover); }
+    
+    .finding-severity {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    
+    .severity-badge {
+      padding: var(--space-1) var(--space-3);
+      border-radius: var(--radius-full);
+      font-size: 0.6875rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    
+    .severity-badge.critical { background: rgba(239,68,68,0.15); color: var(--color-critical); }
+    .severity-badge.high { background: rgba(249,115,22,0.15); color: var(--color-high); }
+    .severity-badge.medium, .severity-badge.warn { background: rgba(245,158,11,0.15); color: var(--color-medium); }
+    .severity-badge.low, .severity-badge.info { background: rgba(59,130,246,0.15); color: var(--color-low); }
+    
+    .finding-content { min-width: 0; }
+    
+    .finding-title {
+      font-size: 0.9375rem;
+      font-weight: 500;
+      color: var(--text-primary);
+      margin-bottom: var(--space-1);
+    }
+    
+    .finding-file {
+      font-family: var(--font-mono);
+      font-size: 0.8125rem;
+      color: var(--text-tertiary);
+    }
+    
+    .finding-fix {
+      font-size: 0.8125rem;
+      color: var(--text-secondary);
+      max-width: 300px;
+      text-align: right;
+    }
+    
+    /* ========================================
+       FIX ESTIMATES
+       ======================================== */
+    .estimates-section {
+      background: var(--bg-secondary);
+      border: 1px solid var(--border-primary);
+      border-radius: var(--radius-xl);
+      padding: var(--space-6);
+      margin-bottom: var(--space-7);
+    }
+    
+    .estimates-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--space-5);
+    }
+    
+    .estimate-card {
+      text-align: center;
+      padding: var(--space-5);
+      background: var(--bg-tertiary);
+      border-radius: var(--radius-lg);
+    }
+    
+    .estimate-value {
+      font-size: 2rem;
+      font-weight: 700;
+      background: var(--accent-gradient);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+    
+    .estimate-label {
+      font-size: 0.875rem;
+      color: var(--text-tertiary);
+      margin-top: var(--space-1);
+    }
+    
+    /* ========================================
+       FOOTER
+       ======================================== */
+    .footer {
+      text-align: center;
+      padding: var(--space-6) 0;
+      border-top: 1px solid var(--border-primary);
+      color: var(--text-tertiary);
+      font-size: 0.875rem;
+    }
+    
+    .footer-brand {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--space-2);
+      margin-bottom: var(--space-2);
+    }
+    
+    .footer-brand svg {
+      width: 20px;
+      height: 20px;
+    }
+    
+    .footer a {
+      color: var(--text-secondary);
+      text-decoration: none;
+      transition: var(--transition-fast);
+    }
+    
+    .footer a:hover { color: var(--text-primary); }
+    
+    /* ========================================
+       RESPONSIVE
+       ======================================== */
+    @media (max-width: 768px) {
+      .hero { grid-template-columns: 1fr; }
+      .coverage-grid { grid-template-columns: repeat(2, 1fr); }
+      .verdict-stats { grid-template-columns: repeat(2, 1fr); }
+      .estimates-grid { grid-template-columns: 1fr; }
+      .finding-item { grid-template-columns: 1fr; gap: var(--space-2); }
+      .finding-fix { text-align: left; max-width: none; }
+    }
+    
+    /* ========================================
+       PRINT STYLES
+       ======================================== */
+    @media print {
+      body { background: white; color: black; }
+      .report-container { max-width: none; padding: 20px; }
+      .theme-toggle, .print-btn { display: none; }
+      .score-ring-progress { animation: none; stroke-dashoffset: ${565 - (565 * summary.score / 100)}; }
+      .findings-list { max-height: none; overflow: visible; }
+      .section, .hero, .reality-section, .findings-section, .estimates-section {
+        break-inside: avoid;
+        page-break-inside: avoid;
+      }
+      [data-theme="dark"] {
+        --bg-primary: white;
+        --bg-secondary: #f9fafb;
+        --bg-tertiary: #f3f4f6;
+        --text-primary: #111827;
+        --text-secondary: #4b5563;
+        --text-tertiary: #6b7280;
+        --border-primary: #e5e7eb;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="report-container">
+    <!-- HEADER -->
+    <header class="header">
+      <div class="header-left">
+        <div class="logo-container">
+          ${logo ? `<img src="${logo}" alt="Logo" class="logo">` : ''}
+          <span class="brand">${company || 'VibeCheck'}</span>
         </div>
-      `).join("")}
-      ${findings.length > limit ? `
-        <div style="text-align: center; color: var(--color-text-muted); padding: var(--space-lg);">
-          + ${findings.length - limit} more findings
+        <h1>Ship Readiness Report</h1>
+        <div class="header-meta">
+          <span>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/>
+            </svg>
+            ${meta.projectName}
+          </span>
+          <span>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
+            </svg>
+            ${new Date(meta.generatedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+          </span>
+          <span>
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/>
+            </svg>
+            ${meta.reportId || 'VC-' + Date.now().toString(36).toUpperCase()}
+          </span>
         </div>
-      ` : ""}
-    </div>
-  `;
-}
-
-function generateFixEstimates(fixEstimates) {
-  const { bySeverity, humanReadable } = fixEstimates;
-  
-  return `
-    <div class="fix-estimate-card">
-      <div class="fix-estimate-total">
-        <div class="fix-estimate-value">${humanReadable}</div>
-        <div class="fix-estimate-label">Total Fix Time</div>
       </div>
-      <div class="fix-estimate-breakdown">
-        ${Object.entries(bySeverity).map(([sev, data]) => `
-          <div class="fix-item">
-            <div class="fix-item-count" style="color: var(--color-${sev})">${data.count}</div>
-            <div class="fix-item-time">${formatDuration(data.totalMinutes)}</div>
-            <div style="font-size: 0.75rem; color: var(--color-text-dim)">${sev}</div>
-          </div>
-        `).join("")}
+      <div class="header-right">
+        <button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme"></button>
+        <button class="print-btn" onclick="window.print()">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;">
+            <polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/><rect x="6" y="14" width="12" height="8"/>
+          </svg>
+          Print
+        </button>
       </div>
-    </div>
-  `;
-}
-
-function generateCoverageRing(percent, label, color) {
-  const radius = 40;
-  const circumference = 2 * Math.PI * radius;
-  const progress = (percent / 100) * circumference;
-  const colorVar = color || (percent >= 80 ? "var(--color-ship)" : percent >= 50 ? "var(--color-warn)" : "var(--color-block)");
-  
-  return `
-    <div class="coverage-ring-container">
-      <svg class="coverage-ring" width="100" height="100" viewBox="0 0 100 100">
-        <circle cx="50" cy="50" r="${radius}" fill="none" stroke="var(--color-border)" stroke-width="8"/>
-        <circle cx="50" cy="50" r="${radius}" fill="none" stroke="${colorVar}" stroke-width="8" 
-          stroke-linecap="round" stroke-dasharray="${progress} ${circumference - progress}" 
-          transform="rotate(-90 50 50)" style="transition: stroke-dasharray 1s ease-out;"/>
-      </svg>
-      <div class="coverage-ring-value">${percent}%</div>
-      <div class="coverage-ring-label">${label}</div>
-    </div>
-  `;
-}
+    </header>
 
-function generateCoverageMetrics(reality) {
-  if (!reality || !reality.coverage) return "";
-  
-  const { clientCallsMapped, runtimeRequests, uiActionsVerified, authRoutes } = reality.coverage;
-  
-  return `
-    <section class="section">
-      <div class="section-header">
-        <div class="section-icon">📊</div>
-        <div>
-          <h2 class="section-title">Coverage Metrics</h2>
-          <p class="section-subtitle">Runtime verification results</p>
+    <!-- HERO: SCORE + VERDICT -->
+    <section class="hero">
+      <div class="score-card">
+        <div class="score-ring">
+          <svg viewBox="0 0 200 200">
+            <defs>
+              <linearGradient id="scoreGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                <stop offset="0%" stop-color="${summary.score >= 80 ? '#10b981' : summary.score >= 60 ? '#f59e0b' : '#ef4444'}"/>
+                <stop offset="100%" stop-color="${summary.score >= 80 ? '#3b82f6' : summary.score >= 60 ? '#f97316' : '#dc2626'}"/>
+              </linearGradient>
+            </defs>
+            <circle class="score-ring-bg" cx="100" cy="100" r="90"/>
+            <circle class="score-ring-progress" cx="100" cy="100" r="90"/>
+          </svg>
+          <div class="score-value">${summary.score}</div>
         </div>
+        <div class="score-label">Overall Score</div>
       </div>
-      <div class="card">
-        <div class="coverage-grid">
-          ${generateCoverageRing(clientCallsMapped || 0, "Client Calls Mapped", "var(--color-warn)")}
-          ${generateCoverageRing(runtimeRequests || 0, "Runtime Requests", "var(--color-warn)")}
-          ${generateCoverageRing(uiActionsVerified || 0, "UI Actions Verified", "var(--color-ship)")}
-          ${generateCoverageRing(authRoutes || 0, "Auth Routes", "var(--color-ship)")}
+      
+      <div class="verdict-card">
+        <div class="verdict-badge">
+          <span class="verdict-icon">${verdict.icon}</span>
+          <span class="verdict-text">${verdict.text}</span>
         </div>
-      </div>
-    </section>
-  `;
-}
-
-function generateSparklineChart(data, label, maxLabel) {
-  if (!data || data.length === 0) return "";
-  
-  const max = Math.max(...data);
-  const width = 300;
-  const height = 60;
-  const padding = 5;
-  const stepX = (width - padding * 2) / (data.length - 1);
-  
-  const points = data.map((v, i) => {
-    const x = padding + i * stepX;
-    const y = height - padding - ((v / max) * (height - padding * 2));
-    return `${x},${y}`;
-  }).join(" ");
-  
-  return `
-    <div class="sparkline-container">
-      <div class="sparkline-header">
-        <span class="sparkline-label">${label}</span>
-        <span class="sparkline-value">${maxLabel}</span>
-      </div>
-      <svg class="sparkline" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
-        <polyline fill="none" stroke="var(--color-primary)" stroke-width="2" points="${points}"/>
-        <circle cx="${padding + (data.length - 1) * stepX}" cy="${height - padding - ((data[data.length - 1] / max) * (height - padding * 2))}" r="4" fill="var(--color-primary)"/>
-      </svg>
-      <div class="sparkline-hint">smooth = stable · sharp peaks = slow endpoints</div>
-    </div>
-  `;
-}
-
-function generateBarChart(data, label, totalLabel) {
-  if (!data || data.length === 0) return "";
-  
-  const max = Math.max(...data);
-  const barWidth = 20;
-  const gap = 8;
-  const height = 80;
-  
-  return `
-    <div class="bar-chart-container">
-      <div class="bar-chart-header">
-        <span class="bar-chart-label">${label}</span>
-        <span class="bar-chart-value">${data.reduce((a, b) => a + b, 0)} ${totalLabel}</span>
-      </div>
-      <div class="bar-chart">
-        ${data.map((v, i) => {
-          const barHeight = max > 0 ? (v / max) * (height - 10) : 0;
-          const isSpike = v > (max * 0.7);
-          return `<div class="bar ${isSpike ? 'spike' : ''}" style="height: ${barHeight}px; width: ${barWidth}px;"></div>`;
-        }).join("")}
-      </div>
-      <div class="bar-chart-hint">last ${data.length} steps · spikes = unmapped</div>
-    </div>
-  `;
-}
-
-function generateRuntimeCharts(reality) {
-  if (!reality) return "";
-  
-  const hasCharts = reality.requestsOverTime || reality.latencySparkline;
-  if (!hasCharts) return "";
-  
-  return `
-    <section class="section">
-      <div class="card-grid" style="grid-template-columns: 1fr 1fr;">
-        ${reality.requestsOverTime ? `
-          <div class="card">
-            ${generateBarChart(reality.requestsOverTime, "Requests Over Time", "total")}
+        <p class="verdict-summary">${getVerdictSummary(summary.verdict, criticalCount, highCount, mediumCount)}</p>
+        <div class="verdict-stats">
+          <div class="stat-item">
+            <div class="stat-value critical">${criticalCount}</div>
+            <div class="stat-label">Critical</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value high">${highCount}</div>
+            <div class="stat-label">High</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-value medium">${mediumCount}</div>
+            <div class="stat-label">Medium</div>
           </div>
-        ` : ""}
-        ${reality.latencySparkline ? `
-          <div class="card">
-            ${generateSparklineChart(reality.latencySparkline, "Latency Sparkline", (reality.latencyP95 || 0) + "ms p95")}
+          <div class="stat-item">
+            <div class="stat-value low">${lowCount}</div>
+            <div class="stat-label">Low</div>
           </div>
-        ` : ""}
+        </div>
       </div>
     </section>
-  `;
-}
 
-function generateBrokenFlows(reality) {
-  if (!reality || !reality.brokenFlows || reality.brokenFlows.length === 0) return "";
-  
-  const criticalCount = reality.brokenFlows.filter(f => f.severity === "BLOCK").length;
-  
-  return `
+    ${categories.length > 0 ? `
+    <!-- CATEGORY SCORES -->
     <section class="section">
       <div class="section-header">
-        <div class="section-icon">🔗</div>
-        <div>
-          <h2 class="section-title">Broken User Flows</h2>
-          <p class="section-subtitle">${criticalCount} critical flows detected</p>
-        </div>
+        <h2 class="section-title">Category Breakdown</h2>
+        <span class="section-badge">${categories.length} categories</span>
       </div>
-      <div class="broken-flows">
-        ${reality.brokenFlows.map(flow => `
-          <div class="flow-card">
-            <div class="flow-header">
-              <span class="flow-title">${escapeHtml(flow.title)}</span>
-              <span class="flow-severity ${flow.severity === 'BLOCK' ? 'blocker' : 'warning'}">${flow.severity === 'BLOCK' ? 'BLOCKER' : 'WARNING'}</span>
+      <div class="categories-grid">
+        ${categories.map(([name, score]) => {
+          const color = score >= 80 ? 'var(--color-success)' : score >= 60 ? 'var(--color-medium)' : 'var(--color-critical)';
+          return `
+          <div class="category-card">
+            <div class="category-header">
+              <span class="category-name">${formatCategoryName(name)}</span>
+              <span class="category-score" style="color: ${color}">${score}%</span>
             </div>
-            <div class="flow-steps">
-              ${flow.steps.map((step, i) => `
-                <div class="flow-step ${step.type}">
-                  <span class="step-type">${step.type.toUpperCase()}</span>
-                  <span class="step-label">${escapeHtml(step.label)}</span>
-                </div>
-                ${i < flow.steps.length - 1 ? '<span class="step-arrow">→</span>' : ''}
-              `).join("")}
+            <div class="category-bar">
+              <div class="category-bar-fill" style="width: ${score}%; background: ${color}"></div>
             </div>
           </div>
-        `).join("")}
+          `;
+        }).join('')}
       </div>
     </section>
-  `;
-}
-
-function formatDuration(mins) {
-  if (mins === 0) return "0m";
-  if (mins < 60) return `${mins}m`;
-  const h = Math.floor(mins / 60);
-  const m = mins % 60;
-  return m > 0 ? `${h}h ${m}m` : `${h}h`;
-}
-
-function escapeHtml(str) {
-  if (!str) return "";
-  return String(str)
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;");
-}
+    ` : ''}
 
-// ============================================================================
-// MAIN TEMPLATE
-// ============================================================================
-
-function generateWorldClassHTML(reportData, options = {}) {
-  const { meta, summary, findings, fixEstimates, coverage, truthpack, reality } = reportData;
-  const verdictClass = summary.verdict.toLowerCase();
-  
-  const verdictMessages = {
-    ship: "All systems go. This application is production-ready.",
-    warn: "Minor issues detected. Review recommended before deployment.",
-    block: "Critical issues found. Immediate remediation required.",
-  };
-  
-  const verdictIcons = { ship: "✅", warn: "⚠️", block: "🚫" };
-  
-  return `<!DOCTYPE html>
-<html lang="en" data-theme="${options.theme || "dark"}">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Vibecheck Report - ${escapeHtml(meta.projectName)}</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
-  <style>${getDesignSystem()}</style>
-</head>
-<body>
-  <div class="report">
-    <!-- Header -->
-    <header class="report-header">
-      <div>
-        <h1 class="report-title">Ship Readiness Report</h1>
-        <div class="report-meta">
-          <span><strong>Project:</strong> ${escapeHtml(meta.projectName)}</span>
-          <span><strong>Generated:</strong> ${new Date(meta.generatedAt).toLocaleString()}</span>
-          <span><strong>Report ID:</strong> ${meta.reportId}</span>
+    ${hasReality ? `
+    <!-- REALITY MODE -->
+    <section class="reality-section">
+      <div class="reality-header">
+        <div class="reality-icon">🔬</div>
+        <div>
+          <h2 class="reality-title">Reality Mode</h2>
+          <p class="reality-subtitle">Runtime validation results from Playwright testing</p>
         </div>
       </div>
-      <div class="report-actions">
-        <button class="btn btn-icon" onclick="toggleTheme()" title="Toggle theme">🌓</button>
-        <button class="btn" onclick="window.print()">🖨️ Print</button>
-      </div>
-    </header>
-
-    <!-- Hero Section -->
-    <section class="hero-section">
-      <div class="score-card">
-        ${generateScoreRing(summary.score, summary.verdict)}
-        <div class="score-label">Vibe Score</div>
-      </div>
       
-      <div class="verdict-card">
-        <div class="verdict-badge ${verdictClass}">
-          ${verdictIcons[verdictClass]} ${summary.verdict}
+      ${Object.keys(coverage).length > 0 ? `
+      <div class="coverage-grid">
+        ${coverage.clientCallsMapped !== undefined ? `
+        <div class="coverage-item">
+          <div class="coverage-value">${coverage.clientCallsMapped}%</div>
+          <div class="coverage-label">API Coverage</div>
         </div>
-        <p class="verdict-message">${verdictMessages[verdictClass]}</p>
-        
-        <div class="stats-grid">
-          <div class="stat-item">
-            <span class="stat-value">${summary.totalFindings}</span>
-            <span class="stat-label">Findings</span>
-          </div>
-          <div class="stat-item">
-            <span class="stat-value">${truthpack.routes}</span>
-            <span class="stat-label">Routes</span>
+        ` : ''}
+        ${coverage.uiActionsVerified !== undefined ? `
+        <div class="coverage-item">
+          <div class="coverage-value">${coverage.uiActionsVerified}%</div>
+          <div class="coverage-label">UI Actions Verified</div>
+        </div>
+        ` : ''}
+        ${coverage.authRoutes !== undefined ? `
+        <div class="coverage-item">
+          <div class="coverage-value">${coverage.authRoutes}%</div>
+          <div class="coverage-label">Auth Routes</div>
+        </div>
+        ` : ''}
+        ${reality.latencyP95 !== undefined ? `
+        <div class="coverage-item">
+          <div class="coverage-value">${reality.latencyP95}ms</div>
+          <div class="coverage-label">P95 Latency</div>
+        </div>
+        ` : ''}
+      </div>
+      ` : ''}
+      
+      ${brokenFlows.length > 0 ? `
+      <div class="broken-flows">
+        <h3 style="font-size: 1rem; font-weight: 600; margin-bottom: var(--space-4); color: var(--color-critical);">
+          🚨 Broken Flows Detected (${brokenFlows.length})
+        </h3>
+        ${brokenFlows.slice(0, 5).map(flow => `
+        <div class="flow-card">
+          <div class="flow-header">
+            <span class="flow-title">${flow.title}</span>
+            <span class="flow-severity ${(flow.severity || 'block').toLowerCase()}">${flow.severity || 'BLOCK'}</span>
           </div>
-          <div class="stat-item">
-            <span class="stat-value">${fixEstimates.humanReadable}</span>
-            <span class="stat-label">Fix Time</span>
+          <div class="flow-steps">
+            ${(flow.steps || []).map((step, i) => `
+              ${i > 0 ? '<span class="flow-arrow">→</span>' : ''}
+              <div class="flow-step ${step.type === 'error' ? 'error' : ''}">
+                <span class="flow-step-icon ${step.type}">${getStepIcon(step.type)}</span>
+                <span>${step.label}</span>
+              </div>
+            `).join('')}
           </div>
         </div>
+        `).join('')}
       </div>
+      ` : ''}
     </section>
+    ` : ''}
 
-    <!-- Coverage Metrics (if reality data available) -->
-    ${generateCoverageMetrics(reality)}
-
-    <!-- Runtime Charts (if reality data available) -->
-    ${generateRuntimeCharts(reality)}
-
-    <!-- Category Breakdown -->
-    <section class="section">
-      <div class="section-header">
-        <div class="section-icon">📊</div>
-        <div>
-          <h2 class="section-title">Category Breakdown</h2>
-          <p class="section-subtitle">Score analysis by domain</p>
-        </div>
-      </div>
-      <div class="card">
-        ${generateCategoryBars(summary.categoryScores)}
+    <!-- FINDINGS -->
+    <section class="findings-section">
+      <div class="findings-header">
+        <h2 class="findings-title">Security Findings</h2>
+        <span class="findings-count">${totalFindings} total findings</span>
       </div>
-    </section>
-
-    <!-- Broken User Flows (if reality data available) -->
-    ${generateBrokenFlows(reality)}
-
-    <!-- Severity Distribution -->
-    <section class="section">
-      <div class="section-header">
-        <div class="section-icon">🎯</div>
-        <div>
-          <h2 class="section-title">Severity Distribution</h2>
-          <p class="section-subtitle">Issues breakdown by priority</p>
-        </div>
+      <div class="findings-filters">
+        <button class="filter-btn active" data-filter="all">All</button>
+        <button class="filter-btn" data-filter="critical">Critical (${criticalCount})</button>
+        <button class="filter-btn" data-filter="high">High (${highCount})</button>
+        <button class="filter-btn" data-filter="medium">Medium (${mediumCount})</button>
+        <button class="filter-btn" data-filter="low">Low (${lowCount})</button>
       </div>
-      <div class="card">
-        ${generateSeverityDonut(summary.severityCounts)}
+      <div class="findings-list">
+        ${findings.slice(0, opts.maxFindings || 50).map(f => {
+          const sev = normalizeSeverity(f.severity);
+          const file = redactPaths && f.file ? redactPath(f.file) : f.file;
+          return `
+          <div class="finding-item" data-severity="${sev}">
+            <div class="finding-severity">
+              <span class="severity-badge ${sev}">${sev}</span>
+            </div>
+            <div class="finding-content">
+              <div class="finding-title">${escapeHtml(f.title || f.message || 'Unknown finding')}</div>
+              ${file ? `<div class="finding-file">${escapeHtml(file)}${f.line ? `:${f.line}` : ''}</div>` : ''}
+            </div>
+            ${f.fix ? `<div class="finding-fix">${escapeHtml(f.fix)}</div>` : ''}
+          </div>
+          `;
+        }).join('')}
       </div>
     </section>
 
-    <!-- Fix Estimates -->
-    <section class="section">
+    <!-- FIX ESTIMATES -->
+    <section class="estimates-section">
       <div class="section-header">
-        <div class="section-icon">⏱️</div>
-        <div>
-          <h2 class="section-title">Fix Time Estimates</h2>
-          <p class="section-subtitle">Estimated remediation effort</p>
-        </div>
+        <h2 class="section-title">Remediation Estimate</h2>
       </div>
-      ${generateFixEstimates(fixEstimates)}
-    </section>
-
-    <!-- Findings -->
-    ${findings.length > 0 ? `
-    <section class="section">
-      <div class="section-header">
-        <div class="section-icon">🔍</div>
-        <div>
-          <h2 class="section-title">Findings</h2>
-          <p class="section-subtitle">${summary.totalFindings} issues identified</p>
+      <div class="estimates-grid">
+        <div class="estimate-card">
+          <div class="estimate-value">${fixEstimates?.humanReadable || calculateFixTime(findings)}</div>
+          <div class="estimate-label">Estimated Fix Time</div>
+        </div>
+        <div class="estimate-card">
+          <div class="estimate-value">${criticalCount + highCount}</div>
+          <div class="estimate-label">Priority Items</div>
+        </div>
+        <div class="estimate-card">
+          <div class="estimate-value">${Math.round(summary.score * 1.1)}%</div>
+          <div class="estimate-label">Projected Score After Fix</div>
         </div>
-      </div>
-      <div class="card">
-        ${generateFindingsList(findings, options.maxFindings || 20)}
       </div>
     </section>
-    ` : ""}
 
-    <!-- Footer -->
-    <footer class="report-footer">
+    <!-- FOOTER -->
+    <footer class="footer">
       <div class="footer-brand">
-        <span>⚡</span>
-        <span>Vibecheck</span>
-      </div>
-      <div>
-        ${meta.reportId} · <a href="https://vibecheck.dev" style="color: var(--color-primary)">vibecheck.dev</a>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <span>Generated by <strong>VibeCheck</strong></span>
       </div>
+      <p>
+        <a href="https://vibecheck.dev">vibecheck.dev</a> · 
+        Report ID: ${meta.reportId || 'VC-' + Date.now().toString(36).toUpperCase()}
+      </p>
     </footer>
   </div>
 
   <script>
+    // Theme Toggle
     function toggleTheme() {
       const html = document.documentElement;
-      const current = html.getAttribute('data-theme');
-      html.setAttribute('data-theme', current === 'dark' ? 'light' : 'dark');
+      const newTheme = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+      html.setAttribute('data-theme', newTheme);
+      try { localStorage.setItem('vibecheck-theme', newTheme); } catch(e) {}
     }
     
-    // Animate score ring on load
-    document.addEventListener('DOMContentLoaded', () => {
-      const ring = document.querySelector('.score-ring-progress');
-      if (ring) {
-        const dashArray = ring.getAttribute('stroke-dasharray');
-        ring.setAttribute('stroke-dasharray', '0 1000');
-        setTimeout(() => ring.setAttribute('stroke-dasharray', dashArray), 100);
-      }
+    // Restore theme
+    try {
+      const saved = localStorage.getItem('vibecheck-theme');
+      if (saved) document.documentElement.setAttribute('data-theme', saved);
+    } catch(e) {}
+    
+    // Filter functionality
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        
+        const filter = btn.dataset.filter;
+        document.querySelectorAll('.finding-item').forEach(item => {
+          if (filter === 'all' || item.dataset.severity === filter) {
+            item.style.display = '';
+          } else {
+            item.style.display = 'none';
+          }
+        });
+      });
     });
   </script>
 </body>
 </html>`;
 }
 
-// ============================================================================
-// EXPORTS
-// ============================================================================
+// Helper functions
+function getVerdictSummary(verdict, critical, high, medium) {
+  if (verdict === "SHIP") {
+    return "Your application has passed all critical checks and is ready for production deployment. No blocking issues were identified during the security scan.";
+  } else if (verdict === "WARN") {
+    const issues = [];
+    if (critical > 0) issues.push(`${critical} critical`);
+    if (high > 0) issues.push(`${high} high priority`);
+    if (medium > 0) issues.push(`${medium} medium priority`);
+    return `Your application has ${issues.join(', ')} issue${critical + high + medium > 1 ? 's' : ''} that should be addressed before deployment. Review the findings below and prioritize fixes based on severity.`;
+  } else {
+    return `Your application has ${critical} critical issue${critical !== 1 ? 's' : ''} that must be resolved before deployment. These represent potential security vulnerabilities or broken functionality that would impact production users.`;
+  }
+}
+
+function formatCategoryName(cat) {
+  const names = {
+    security: "Security",
+    auth: "Authentication",
+    billing: "Billing & Payments",
+    routes: "Route Integrity",
+    env: "Environment Config",
+    quality: "Code Quality",
+    mock: "Mock Data",
+    error: "Error Handling",
+  };
+  return names[cat] || cat.charAt(0).toUpperCase() + cat.slice(1).replace(/_/g, " ");
+}
+
+function normalizeSeverity(sev) {
+  const s = (sev || '').toLowerCase();
+  if (s === 'block' || s === 'critical') return 'critical';
+  if (s === 'high') return 'high';
+  if (s === 'warn' || s === 'medium' || s === 'warning') return 'medium';
+  return 'low';
+}
+
+function getStepIcon(type) {
+  const icons = { ui: '🖱', api: '⚡', form: '📝', error: '❌' };
+  return icons[type] || '•';
+}
+
+function redactPath(path) {
+  if (!path) return path;
+  const parts = path.split('/');
+  if (parts.length <= 2) return path;
+  return '.../' + parts.slice(-2).join('/');
+}
+
+function escapeHtml(str) {
+  if (!str) return '';
+  return String(str)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function calculateFixTime(findings) {
+  if (!findings || findings.length === 0) return '0h';
+  
+  const minutes = findings.reduce((total, f) => {
+    const sev = normalizeSeverity(f.severity);
+    const time = { critical: 60, high: 45, medium: 20, low: 10 };
+    return total + (time[sev] || 15);
+  }, 0);
+  
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.round(minutes / 60 * 10) / 10;
+  return hours > 8 ? `${Math.ceil(hours / 8)}d` : `${hours}h`;
+}
 
 module.exports = {
   generateWorldClassHTML,
-  getDesignSystem,
-  generateScoreRing,
-  generateCategoryBars,
-  generateSeverityDonut,
-  generateFindingsList,
-  generateFixEstimates,
 };