redesign(pagespeed): full page redesign inspired by pagespeed.web.dev

- Hero card: large performance gauge + compact inline scores + screenshot
- Single metrics card with 2x3 grid and colored status dots
- Flat diagnostics list sorted by impact with severity indicators
- ScoreGauge accepts size prop for flexible gauge sizing
- Unicode severity markers (triangle/square/circle) per audit

components/pagespeed/ScoreGauge.tsx

@@ -3,6 +3,7 @@
 interface ScoreGaugeProps {
   score: number | null
   label: string
+  size?: number
 }
 
 const RADIUS = 44
@@ -14,15 +15,17 @@ function getColor(score: number): string {
   return '#ff4e42'
 }
 
-export default function ScoreGauge({ score, label }: ScoreGaugeProps) {
+export default function ScoreGauge({ score, label, size = 120 }: ScoreGaugeProps) {
   const hasScore = score !== null && score !== undefined
   const displayScore = hasScore ? Math.round(score) : null
   const offset = hasScore ? CIRCUMFERENCE * (1 - score / 100) : CIRCUMFERENCE
   const color = hasScore ? getColor(score) : '#6b7280'
 
+  const fontSize = size >= 160 ? 'text-4xl' : 'text-2xl'
+
   return (
     <div className="flex flex-col items-center gap-2">
-      <div className="relative w-[120px] h-[120px]">
+      <div className="relative" style={{ width: size, height: size }}>
         <svg
           className="w-full h-full -rotate-90"
           viewBox="0 0 100 100"
@@ -54,7 +57,7 @@ export default function ScoreGauge({ score, label }: ScoreGaugeProps) {
         {/* Score text */}
         <div className="absolute inset-0 flex items-center justify-center">
           <span
-            className="text-2xl font-bold"
+            className={`${fontSize} font-bold`}
             style={{ color: hasScore ? color : undefined }}
           >
             {displayScore !== null ? displayScore : (