openreport 0.1.0

package/src/report/html-styles.ts

@@ -0,0 +1,1127 @@
+export const STYLES = `
+/* ================================================================
+   OPENREPORT - Retro-Tech Theme
+   A modern retro-futuristic design system
+   ================================================================ */
+
+/* -- CSS Variables / Dark Theme (default) -- */
+:root {
+  --bg: #0a0e1a;
+  --bg-surface: #0f1628;
+  --bg-surface2: #161d33;
+  --bg-surface3: #1c2541;
+  --bg-surface-hover: #1a2340;
+  --text: #e0e6f0;
+  --text-dim: #7a85a0;
+  --text-muted: #4a5470;
+  --border: #1e2a4a;
+  --border-subtle: #151d35;
+  --accent: #818cf8;
+  --accent-dim: rgba(129, 140, 248, 0.15);
+  --accent-glow: rgba(129, 140, 248, 0.3);
+  --neon-green: #00ff88;
+  --neon-cyan: #22d3ee;
+  --neon-purple: #a78bfa;
+  --critical: #ff3366;
+  --critical-bg: rgba(255, 51, 102, 0.08);
+  --critical-border: rgba(255, 51, 102, 0.25);
+  --critical-glow: rgba(255, 51, 102, 0.15);
+  --warning: #fbbf24;
+  --warning-bg: rgba(251, 191, 36, 0.08);
+  --warning-border: rgba(251, 191, 36, 0.25);
+  --warning-glow: rgba(251, 191, 36, 0.15);
+  --info: #38bdf8;
+  --info-bg: rgba(56, 189, 248, 0.08);
+  --info-border: rgba(56, 189, 248, 0.25);
+  --info-glow: rgba(56, 189, 248, 0.15);
+  --suggestion: #a78bfa;
+  --suggestion-bg: rgba(167, 139, 250, 0.08);
+  --suggestion-border: rgba(167, 139, 250, 0.25);
+  --suggestion-glow: rgba(167, 139, 250, 0.15);
+  --sidebar-w: 280px;
+  --radius: 8px;
+  --radius-lg: 12px;
+  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --font-mono: "Geist Mono", "JetBrains Mono", "Fira Code", "SF Mono", "Cascadia Code", "Consolas", monospace;
+  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  --shadow-glow: 0 0 30px rgba(129, 140, 248, 0.06);
+  --grid-color: rgba(129, 140, 248, 0.03);
+}
+
+/* -- Light Theme -- */
+.light-theme {
+  --bg: #f8f9fc;
+  --bg-surface: #ffffff;
+  --bg-surface2: #f1f3f8;
+  --bg-surface3: #e8ecf4;
+  --bg-surface-hover: #eef1f8;
+  --text: #1a1f36;
+  --text-dim: #5a6178;
+  --text-muted: #9ca3b8;
+  --border: #e2e6f0;
+  --border-subtle: #edf0f7;
+  --accent: #6366f1;
+  --accent-dim: rgba(99, 102, 241, 0.08);
+  --accent-glow: rgba(99, 102, 241, 0.15);
+  --neon-green: #059669;
+  --neon-cyan: #0891b2;
+  --neon-purple: #7c3aed;
+  --critical: #dc2626;
+  --critical-bg: rgba(220, 38, 38, 0.05);
+  --critical-border: rgba(220, 38, 38, 0.2);
+  --critical-glow: transparent;
+  --warning: #d97706;
+  --warning-bg: rgba(217, 119, 6, 0.05);
+  --warning-border: rgba(217, 119, 6, 0.2);
+  --warning-glow: transparent;
+  --info: #0284c7;
+  --info-bg: rgba(2, 132, 199, 0.05);
+  --info-border: rgba(2, 132, 199, 0.2);
+  --info-glow: transparent;
+  --suggestion: #7c3aed;
+  --suggestion-bg: rgba(124, 58, 237, 0.05);
+  --suggestion-border: rgba(124, 58, 237, 0.2);
+  --suggestion-glow: transparent;
+  --shadow-glow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --grid-color: transparent;
+}
+
+/* -- Reset -- */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
+
+body {
+  font-family: var(--font-sans);
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.7;
+  font-size: 15px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+/* Subtle background grid (dark only) */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--grid-color) 1px, transparent 1px),
+    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
+  background-size: 60px 60px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Scanline overlay - very subtle CRT effect (dark only) */
+.scanline-overlay {
+  position: fixed;
+  inset: 0;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.015) 2px,
+    rgba(0, 0, 0, 0.015) 4px
+  );
+  pointer-events: none;
+  z-index: 9999;
+}
+.light-theme .scanline-overlay { display: none; }
+.light-theme body::before { display: none; }
+
+/* -- Links -- */
+a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
+a:hover { color: var(--neon-cyan); text-decoration: underline; text-underline-offset: 2px; }
+
+/* ================================================================
+   SIDEBAR
+   ================================================================ */
+.sidebar {
+  position: fixed; left: 0; top: 0; bottom: 0;
+  width: var(--sidebar-w);
+  background: var(--bg-surface);
+  border-right: 1px solid var(--border);
+  display: flex; flex-direction: column;
+  overflow-y: auto;
+  z-index: 100;
+}
+
+.sidebar-header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 1.25rem 1.25rem 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.brand {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  font-size: 0.85rem;
+  letter-spacing: 0.1em;
+  color: var(--text);
+  user-select: none;
+}
+.brand-bracket {
+  color: var(--text-muted);
+  font-weight: 400;
+}
+.brand-accent {
+  color: var(--accent);
+  text-shadow: 0 0 20px var(--accent-glow);
+}
+.light-theme .brand-accent {
+  text-shadow: none;
+}
+
+.theme-toggle {
+  background: var(--bg-surface2);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  border-radius: var(--radius);
+  padding: 0.4rem;
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  transition: all var(--transition);
+  line-height: 1;
+}
+.theme-toggle:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: var(--accent-dim);
+}
+.theme-icon--light { display: none; }
+.light-theme .theme-icon--dark { display: none; }
+.light-theme .theme-icon--light { display: block; }
+
+.sidebar-project {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+  display: flex; flex-direction: column; gap: 0.25rem;
+}
+.sidebar-project-label {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  color: var(--text-muted);
+  text-transform: uppercase;
+}
+.sidebar-project-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.toc-label {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  color: var(--text-muted);
+  padding: 1rem 1.25rem 0.5rem;
+  text-transform: uppercase;
+}
+
+.toc { list-style: none; flex: 1; padding: 0 0 0.5rem; }
+.toc li a {
+  display: flex; align-items: center; gap: 0.75rem;
+  padding: 0.5rem 1.25rem;
+  font-size: 0.82rem;
+  color: var(--text-dim);
+  transition: all var(--transition);
+  border-left: 2px solid transparent;
+  text-decoration: none;
+}
+.toc-index {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  min-width: 1.25rem;
+  transition: color var(--transition);
+}
+.toc li a:hover,
+.toc li a.active {
+  color: var(--text);
+  background: var(--bg-surface2);
+  border-left-color: var(--accent);
+  text-decoration: none;
+}
+.toc li a:hover .toc-index,
+.toc li a.active .toc-index {
+  color: var(--accent);
+}
+
+.sidebar-footer {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--border);
+  display: flex; flex-direction: column; gap: 0.5rem;
+}
+.sidebar-footer-row {
+  display: flex; justify-content: space-between; align-items: center;
+}
+.meta-label {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  color: var(--text-muted);
+  text-transform: uppercase;
+}
+.meta-value {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+}
+
+.menu-toggle {
+  display: none;
+  position: fixed; top: 1rem; left: 1rem; z-index: 200;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 0.5rem;
+  border-radius: var(--radius);
+  cursor: pointer;
+  line-height: 1;
+  transition: all var(--transition);
+}
+.menu-toggle:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* ================================================================
+   MAIN CONTENT
+   ================================================================ */
+main {
+  position: relative;
+  z-index: 1;
+  margin-left: var(--sidebar-w);
+  padding: 2.5rem 4rem 5rem;
+}
+
+/* ================================================================
+   HEADER
+   ================================================================ */
+header {
+  margin-bottom: 3rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.header-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.report-title {
+  display: flex;
+  align-items: baseline;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+.report-title h1 {
+  font-family: var(--font-mono);
+  font-size: 2rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  background: linear-gradient(135deg, var(--text) 0%, var(--text-dim) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+.light-theme .report-title h1 {
+  background: none;
+  -webkit-background-clip: unset;
+  background-clip: unset;
+  color: var(--text);
+}
+.report-type {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--accent);
+  background: var(--accent-dim);
+  padding: 0.25rem 0.75rem;
+  border-radius: 100px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  border: 1px solid rgba(129, 140, 248, 0.15);
+  white-space: nowrap;
+}
+
+/* Grade Badge */
+.header-badges { display: flex; }
+.grade-badge {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: var(--radius-lg);
+  background: var(--bg-surface2);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+.grade-glow {
+  position: absolute;
+  inset: 0;
+  opacity: 0.12;
+  filter: blur(12px);
+  border-radius: inherit;
+  z-index: 0;
+}
+.light-theme .grade-glow { opacity: 0.08; }
+.grade-letter {
+  position: relative;
+  z-index: 1;
+  font-family: var(--font-mono);
+  font-weight: 800;
+  font-size: 1.75rem;
+  line-height: 1;
+  color: var(--grade-color);
+  text-shadow: 0 0 20px color-mix(in srgb, var(--grade-color) 40%, transparent);
+}
+.light-theme .grade-letter { text-shadow: none; }
+.grade-label {
+  position: relative;
+  z-index: 1;
+  font-family: var(--font-mono);
+  font-size: 0.55rem;
+  font-weight: 600;
+  letter-spacing: 0.15em;
+  color: var(--text-muted);
+  margin-top: 0.15rem;
+}
+
+/* Header Meta Chips */
+.header-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin-top: 1.25rem;
+}
+.meta-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: 100px;
+  padding: 0.35rem 0.85rem;
+  transition: all var(--transition);
+}
+.meta-chip svg { color: var(--text-muted); flex-shrink: 0; }
+.meta-chip:hover { border-color: var(--accent); color: var(--text); }
+.meta-chip:hover svg { color: var(--accent); }
+
+/* ================================================================
+   SECTIONS
+   ================================================================ */
+section { margin-bottom: 3.5rem; }
+
+h2 {
+  font-family: var(--font-mono);
+  font-size: 1.35rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin-bottom: 1.25rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+.section-index {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--accent);
+  opacity: 0.6;
+  letter-spacing: 0.05em;
+  min-width: 1.5rem;
+}
+
+h3 {
+  font-family: var(--font-sans);
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 1.75rem 0 0.75rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.h3-marker {
+  font-family: var(--font-mono);
+  color: var(--accent);
+  opacity: 0.4;
+  font-weight: 400;
+  font-size: 0.85em;
+}
+
+h4, h5, h6 {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  margin: 1.25rem 0 0.5rem;
+}
+h4 { font-size: 1rem; }
+h5 { font-size: 0.9rem; }
+h6 { font-size: 0.85rem; color: var(--text-dim); }
+
+p { margin-bottom: 0.75rem; }
+ul, ol { margin: 0.5rem 0 1rem 1.5rem; }
+li { margin-bottom: 0.35rem; }
+li::marker { color: var(--text-muted); }
+strong { font-weight: 600; }
+em { color: var(--text-dim); }
+
+/* ================================================================
+   SEVERITY CARDS
+   ================================================================ */
+.severity-cards {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0.75rem;
+}
+
+.severity-card {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 0;
+  text-align: center;
+  transition: all var(--transition);
+  overflow: hidden;
+  position: relative;
+}
+.severity-card::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+}
+.severity-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-glow);
+}
+.severity-card-inner {
+  padding: 1.25rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.severity-icon { color: var(--text-muted); line-height: 1; }
+
+.severity-card.critical::before { background: var(--critical); box-shadow: 0 0 12px var(--critical-glow); }
+.severity-card.critical { border-color: var(--critical-border); background: var(--critical-bg); }
+.severity-card.critical .severity-icon { color: var(--critical); }
+
+.severity-card.warning::before { background: var(--warning); box-shadow: 0 0 12px var(--warning-glow); }
+.severity-card.warning { border-color: var(--warning-border); background: var(--warning-bg); }
+.severity-card.warning .severity-icon { color: var(--warning); }
+
+.severity-card.info::before { background: var(--info); box-shadow: 0 0 12px var(--info-glow); }
+.severity-card.info { border-color: var(--info-border); background: var(--info-bg); }
+.severity-card.info .severity-icon { color: var(--info); }
+
+.severity-card.suggestion::before { background: var(--suggestion); box-shadow: 0 0 12px var(--suggestion-glow); }
+.severity-card.suggestion { border-color: var(--suggestion-border); background: var(--suggestion-bg); }
+.severity-card.suggestion .severity-icon { color: var(--suggestion); }
+
+.severity-card.total::before { background: var(--accent); }
+.severity-card.total .severity-icon { color: var(--accent); }
+
+.severity-count {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 2rem;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+.severity-card.critical .severity-count { color: var(--critical); text-shadow: 0 0 20px var(--critical-glow); }
+.severity-card.warning .severity-count { color: var(--warning); text-shadow: 0 0 20px var(--warning-glow); }
+.severity-card.info .severity-count { color: var(--info); text-shadow: 0 0 20px var(--info-glow); }
+.severity-card.suggestion .severity-count { color: var(--suggestion); text-shadow: 0 0 20px var(--suggestion-glow); }
+.severity-card.total .severity-count { color: var(--accent); }
+.light-theme .severity-count { text-shadow: none; }
+
+.severity-label {
+  font-family: var(--font-mono);
+  font-size: 0.65rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+/* ================================================================
+   SUB-REPORTS
+   ================================================================ */
+.sub-summary {
+  color: var(--text-dim);
+  font-size: 0.95rem;
+  margin-bottom: 1.75rem;
+  padding-left: 1rem;
+  border-left: 2px solid var(--border);
+  font-style: italic;
+}
+.report-section { margin-bottom: 1.75rem; }
+.summary-text { line-height: 1.8; }
+
+/* ================================================================
+   CODE BLOCKS
+   ================================================================ */
+pre {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1rem 1.25rem;
+  overflow-x: auto;
+  font-size: 0.82rem;
+  margin: 1rem 0 1.25rem;
+  position: relative;
+  line-height: 1.6;
+}
+/* Terminal top bar decoration */
+pre::before {
+  content: "";
+  display: block;
+  height: 3px;
+  margin: -1rem -1.25rem 0.75rem;
+  background: linear-gradient(90deg,
+    var(--critical) 0%, var(--critical) 20%,
+    var(--warning) 20%, var(--warning) 40%,
+    var(--neon-green) 40%, var(--neon-green) 60%,
+    var(--info) 60%, var(--info) 80%,
+    var(--accent) 80%, var(--accent) 100%
+  );
+  border-radius: var(--radius) var(--radius) 0 0;
+  opacity: 0.5;
+}
+.light-theme pre::before { opacity: 0.35; }
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+}
+code.inline {
+  background: var(--bg-surface2);
+  padding: 0.15rem 0.45rem;
+  border-radius: 4px;
+  font-size: 0.83em;
+  border: 1px solid var(--border-subtle);
+  color: var(--neon-cyan);
+}
+.light-theme code.inline { color: var(--accent); }
+
+/* ================================================================
+   TABLES
+   ================================================================ */
+.table-wrap {
+  overflow-x: auto;
+  margin: 1rem 0;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+th, td {
+  padding: 0.6rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--border-subtle);
+}
+th {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 0.7rem;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--bg-surface);
+  border-bottom-color: var(--border);
+}
+tr:last-child td { border-bottom: none; }
+tr:hover td { background: var(--bg-surface-hover); }
+
+/* ================================================================
+   FINDINGS
+   ================================================================ */
+.findings-section { margin-top: 2rem; }
+.findings-count {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--bg-surface2);
+  padding: 0.1rem 0.5rem;
+  border-radius: 100px;
+  margin-left: 0.25rem;
+}
+
+.finding {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 0.6rem;
+  transition: all var(--transition);
+  overflow: hidden;
+}
+.finding:hover { border-color: color-mix(in srgb, var(--border) 50%, var(--text-muted)); }
+
+.finding summary {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.65rem;
+  list-style: none;
+  font-weight: 500;
+  font-size: 0.92rem;
+  user-select: none;
+  transition: background var(--transition);
+}
+.finding summary:hover { background: var(--bg-surface-hover); }
+.finding summary::-webkit-details-marker { display: none; }
+.finding summary::marker { content: ""; }
+
+.finding-chevron {
+  color: var(--text-muted);
+  transition: transform var(--transition);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.finding[open] .finding-chevron { transform: rotate(90deg); }
+
+.finding-title { flex: 1; }
+
+.finding-body {
+  padding: 0 1rem 1.25rem;
+  padding-left: 1rem;
+  animation: fadeIn 0.2s ease;
+}
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.finding-body p {
+  color: var(--text-dim);
+  font-size: 0.9rem;
+  line-height: 1.7;
+}
+.finding-files {
+  margin: 0.75rem 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+}
+.finding-files-label {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--text-muted);
+  margin-right: 0.25rem;
+}
+.finding-files code.inline { font-size: 0.78em; }
+
+.finding-recommendation {
+  margin-top: 0.75rem;
+  padding: 0.85rem 1rem;
+  background: var(--bg-surface2);
+  border-radius: var(--radius);
+  font-size: 0.88rem;
+  line-height: 1.65;
+  border: 1px solid var(--border-subtle);
+}
+.finding-rec-label {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: var(--accent);
+  margin-bottom: 0.35rem;
+}
+
+/* Finding severity left border */
+.finding-critical { border-left: 3px solid var(--critical); }
+.finding-warning { border-left: 3px solid var(--warning); }
+.finding-info { border-left: 3px solid var(--info); }
+.finding-suggestion { border-left: 3px solid var(--suggestion); }
+
+/* ================================================================
+   BADGES
+   ================================================================ */
+.badge {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 0.2rem 0.55rem;
+  border-radius: 4px;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.badge-critical {
+  background: var(--critical-bg);
+  color: var(--critical);
+  border: 1px solid var(--critical-border);
+}
+.badge-warning {
+  background: var(--warning-bg);
+  color: var(--warning);
+  border: 1px solid var(--warning-border);
+}
+.badge-info {
+  background: var(--info-bg);
+  color: var(--info);
+  border: 1px solid var(--info-border);
+}
+.badge-suggestion {
+  background: var(--suggestion-bg);
+  color: var(--suggestion);
+  border: 1px solid var(--suggestion-border);
+}
+
+.effort {
+  font-family: var(--font-mono);
+  font-size: 0.6rem;
+  font-weight: 600;
+  padding: 0.15rem 0.5rem;
+  border-radius: 100px;
+  margin-left: auto;
+  background: var(--bg-surface2);
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.effort-dot {
+  display: inline-block;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+.effort-low .effort-dot { background: var(--neon-green); }
+.effort-medium .effort-dot { background: var(--warning); }
+.effort-high .effort-dot { background: var(--critical); }
+
+/* ================================================================
+   CHECKLISTS (Todo)
+   ================================================================ */
+.checklist {
+  list-style: none;
+  margin: 0.75rem 0 1rem 0;
+  padding: 0;
+}
+.checklist-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+  padding: 0.55rem 0.85rem;
+  margin-bottom: 0.25rem;
+  border-radius: var(--radius);
+  font-size: 0.9rem;
+  line-height: 1.6;
+  cursor: pointer;
+  user-select: none;
+  transition: all var(--transition);
+  border: 1px solid transparent;
+}
+.checklist-item:hover {
+  background: var(--bg-surface-hover);
+  border-color: var(--border-subtle);
+}
+.checklist-item.checked .checklist-text {
+  color: var(--text-muted);
+  text-decoration: line-through;
+  text-decoration-color: var(--text-muted);
+}
+.checklist-text {
+  flex: 1;
+  min-width: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+.checklist-text code.inline {
+  word-break: break-all;
+}
+
+.checkbox {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-top: 0.2rem;
+  border: 2px solid var(--text-muted);
+  border-radius: 4px;
+  font-size: 0.7rem;
+  color: transparent;
+  background: transparent;
+  transition: all var(--transition);
+}
+.checkbox-checked {
+  background: var(--neon-green);
+  border-color: var(--neon-green);
+  color: #000;
+}
+.light-theme .checkbox-checked { background: #059669; border-color: #059669; color: #fff; }
+
+/* ================================================================
+   TODO SECTION
+   ================================================================ */
+.todo-section {
+  position: relative;
+}
+.todo-section::before {
+  content: "";
+  position: absolute;
+  top: 0; left: -1rem; bottom: 0;
+  width: 3px;
+  border-radius: 2px;
+  background: linear-gradient(180deg, var(--critical) 0%, var(--warning) 35%, var(--info) 70%, var(--suggestion) 100%);
+  opacity: 0.5;
+}
+
+.todo-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.todo-copy-btn {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--accent);
+  background: var(--accent-dim);
+  border: 1px solid rgba(129, 140, 248, 0.2);
+  border-radius: 100px;
+  padding: 0.35rem 0.9rem;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  transition: all var(--transition);
+  text-transform: uppercase;
+}
+.todo-copy-btn:hover {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+.todo-priority-group {
+  margin-bottom: 1.75rem;
+}
+.todo-priority-label {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  padding: 0.35rem 0.75rem;
+  border-radius: var(--radius);
+  margin-bottom: 0.6rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.todo-priority-label.priority-critical {
+  color: var(--critical);
+  background: var(--critical-bg);
+  border: 1px solid var(--critical-border);
+}
+.todo-priority-label.priority-quickwins {
+  color: var(--warning);
+  background: var(--warning-bg);
+  border: 1px solid var(--warning-border);
+}
+.todo-priority-label.priority-planned {
+  color: var(--info);
+  background: var(--info-bg);
+  border: 1px solid var(--info-border);
+}
+.todo-priority-label.priority-nicetohave {
+  color: var(--suggestion);
+  background: var(--suggestion-bg);
+  border: 1px solid var(--suggestion-border);
+}
+
+/* ================================================================
+   RESPONSIVE
+   ================================================================ */
+@media (max-width: 1024px) {
+  .severity-cards { grid-template-columns: repeat(3, 1fr); }
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .sidebar.open {
+    transform: translateX(0);
+    box-shadow: 4px 0 40px rgba(0, 0, 0, 0.4);
+  }
+  .menu-toggle { display: flex; align-items: center; justify-content: center; }
+  main { margin-left: 0; padding: 1.5rem 1.25rem 3rem; }
+  .header-top { flex-direction: column; gap: 1rem; }
+  .report-title h1 { font-size: 1.5rem; }
+  .severity-cards {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.5rem;
+  }
+  .severity-card-inner { padding: 1rem 0.5rem; }
+  .severity-count { font-size: 1.5rem; }
+  .header-meta { flex-direction: column; gap: 0.35rem; }
+  .meta-chip { font-size: 0.7rem; }
+  .grade-badge { width: 3.5rem; height: 3.5rem; }
+  .grade-letter { font-size: 1.35rem; }
+}
+
+@media (max-width: 480px) {
+  .severity-cards { grid-template-columns: repeat(2, 1fr); }
+  .severity-card:last-child { grid-column: 1 / -1; }
+}
+
+/* ================================================================
+   PRINT STYLES
+   ================================================================ */
+@media print {
+  .sidebar, .menu-toggle, .theme-toggle, .scanline-overlay { display: none !important; }
+  body::before { display: none !important; }
+  main { margin-left: 0; padding: 0; }
+  body {
+    background: #fff;
+    color: #1a1a1a;
+    font-size: 11pt;
+    line-height: 1.5;
+  }
+  a { color: #1a1a1a; }
+
+  h1, h2, h3 { font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+  h2 { font-size: 14pt; border-bottom: 1px solid #ddd; }
+
+  .report-title h1 {
+    background: none;
+    -webkit-background-clip: unset;
+    background-clip: unset;
+    color: #1a1a1a;
+  }
+
+  .severity-cards { gap: 0.5rem; }
+  .severity-card {
+    border: 1px solid #ddd;
+    background: #f9f9f9;
+    break-inside: avoid;
+  }
+  .severity-card::before { display: none; }
+  .severity-count { text-shadow: none; }
+
+  .finding { break-inside: avoid; border: 1px solid #ddd; }
+  .finding-critical { border-left: 3px solid #dc2626; }
+  .finding-warning { border-left: 3px solid #d97706; }
+  .finding-info { border-left: 3px solid #0284c7; }
+  .finding-suggestion { border-left: 3px solid #7c3aed; }
+  details { open: true; }
+  details[open] > summary { font-weight: 700; }
+  details > .finding-body { display: block !important; }
+  .finding-body { animation: none !important; }
+  .finding-chevron { display: none; }
+
+  pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    border: 1px solid #ddd;
+    background: #f5f5f5;
+  }
+  pre::before { display: none; }
+  code.inline { border: 1px solid #ddd; background: #f0f0f0; color: #1a1a1a; }
+
+  .grade-badge {
+    border: 2px solid currentColor;
+  }
+  .grade-glow { display: none; }
+  .grade-letter { text-shadow: none; }
+
+  .badge, .severity-card, .grade-badge {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+
+  .meta-chip { border: 1px solid #ddd; background: #f9f9f9; }
+  .meta-chip svg { display: none; }
+
+  .report-type { border: 1px solid #ddd; background: #f0f0f0; color: #333; }
+  .section-index, .toc-index, .h3-marker { color: #999; }
+
+  .sub-summary { border-left-color: #ccc; color: #555; }
+  .todo-copy-btn { display: none; }
+  .todo-section::before { background: #999; }
+  .checkbox { border-color: #999; }
+  .checkbox-checked { background: #059669; border-color: #059669; color: #fff; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
+
+  .finding-recommendation { border: 1px solid #ddd; background: #fafafa; }
+  .finding-rec-label { color: #333; }
+}
+
+/* ================================================================
+   SCROLLBAR (Webkit)
+   ================================================================ */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
+
+/* ================================================================
+   SELECTION
+   ================================================================ */
+::selection {
+  background: var(--accent);
+  color: #fff;
+}
+
+/* ================================================================
+   FOCUS VISIBLE
+   ================================================================ */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+`;
+
+export function getStyles(): string { return STYLES; }