Update

frontend/app/globals.css

@@ -325,118 +325,6 @@
   }
 }
 
-/* --- Stats ---------------------------------------------------------------- */
-
-.stats {
-  display: flex;
-  width: 100%;
-  overflow-x: auto;
-  border: 1px solid var(--color-border);
-  border-radius: 0.75rem;
-  background-color: var(--color-muted);
-}
-
-.stat {
-  display: inline-flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 1rem;
-  border-inline-start: 1px solid var(--color-border);
-}
-
-.stat:first-child {
-  border-inline-start-width: 0;
-}
-
-.stat-title {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--color-brand-offwhite-muted);
-  line-height: 1.3;
-}
-
-.stat-value {
-  font-size: 1.375rem;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  line-height: 1.1;
-  color: var(--color-brand-offwhite);
-}
-
-.stat-desc {
-  font-size: 0.75rem;
-  color: var(--color-brand-offwhite-muted);
-}
-
-.stat-figure {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-@media (max-width: 640px) {
-  .stats {
-    flex-direction: column;
-  }
-  .stat {
-    border-inline-start-width: 0;
-    border-top: 1px solid var(--color-border);
-  }
-  .stat:first-child {
-    border-top-width: 0;
-  }
-}
-
-/* --- Radial progress ------------------------------------------------------ */
-
-.radial-progress {
-  position: relative;
-  display: inline-grid;
-  place-content: center;
-  width: var(--size, 5rem);
-  height: var(--size, 5rem);
-  border-radius: 9999px;
-  background:
-    radial-gradient(
-      farthest-side,
-      var(--color-brand-charcoal-panel) calc(100% - var(--thickness, 0.5rem) - 1px),
-      transparent calc(100% - var(--thickness, 0.5rem))
-    ),
-    conic-gradient(
-      currentColor calc(var(--value, 0) * 1%),
-      rgba(255, 255, 255, 0.08) 0
-    );
-  color: var(--color-brand-offwhite);
-}
-
-/* --- Divider --------------------------------------------------------------- */
-
-.divider {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin: 0.75rem 0;
-  font-size: 0.625rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--color-brand-offwhite-muted);
-}
-
-.divider::before,
-.divider::after {
-  content: "";
-  flex: 1 1 0;
-  height: 1px;
-  background-color: var(--color-border);
-}
-
-.divider-start::before { display: none; }
-.divider-end::after { display: none; }
-
 /* --- Window mockup --------------------------------------------------------- */
 
 .mockup-window {

frontend/components/best-practices/AnalysisApproach.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import { renderMarkdown } from "@/lib/markdown";
-import { AnalysisSection } from "./AnalysisSection";
+import { AnalysisLabel } from "./AnalysisLabel";
 
 export function AnalysisApproach({ approach }: { approach: string }) {
   return (
-    <AnalysisSection label="Approach">
+    <div>
+      <AnalysisLabel>Approach</AnalysisLabel>
       <div
         className="text-sm leading-relaxed text-brand-offwhite/90"
         dangerouslySetInnerHTML={{ __html: renderMarkdown(approach) }}
       />
-    </AnalysisSection>
+    </div>
   );
-}
+}

frontend/components/best-practices/AnalysisComplexity.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { ComplexityBadge } from "./ComplexityBadge";
-import { ComplexityScale } from "./ComplexityScale";
 
 export function AnalysisComplexity({
   time,
@@ -11,12 +10,9 @@ export function AnalysisComplexity({
   space: string;
 }) {
   return (
-    <div className="space-y-3">
-      <div className="flex flex-wrap gap-2">
-        <ComplexityBadge label="Time" value={time} />
-        <ComplexityBadge label="Space" value={space} />
-      </div>
-      <ComplexityScale />
+    <div className="flex flex-wrap gap-2">
+      <ComplexityBadge label="Time" value={time} />
+      <ComplexityBadge label="Space" value={space} />
     </div>
   );
-}
+}

frontend/components/best-practices/AnalysisHydration.tsx

@@ -5,6 +5,7 @@ import type { SolutionExplanation } from "@/lib/types";
 import { AnalysisSummary } from "./AnalysisSummary";
 import { AnalysisApproach } from "./AnalysisApproach";
 import { AnalysisScorecard } from "./AnalysisScorecard";
+import { AnalysisComplexity } from "./AnalysisComplexity";
 
 function Shimmer({ className }: { className?: string }) {
   return <div className={`animate-pulse rounded-md bg-muted/40 ${className ?? ""}`} />;
@@ -16,7 +17,7 @@ export function AnalysisHydration({
   partial: Partial<SolutionExplanation> | null;
 }) {
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       <div className="flex items-center gap-2 text-sm font-semibold text-foreground">
         <Loader2 size={15} className="animate-spin text-purple-300" />
         Generating analysis
@@ -32,7 +33,7 @@ export function AnalysisHydration({
         <AnalysisSummary summary={partial.summary} />
       ) : (
         <div className="space-y-2">
-          <Shimmer className="h-3 w-20" />
+          <Shimmer className="h-3 w-16" />
           <Shimmer className="h-3 w-full" />
           <Shimmer className="h-3 w-5/6" />
         </div>
@@ -41,27 +42,27 @@ export function AnalysisHydration({
       {partial?.quality_score != null ? (
         <AnalysisScorecard explanation={partial as SolutionExplanation} />
       ) : (
-        <div className="grid gap-3 sm:grid-cols-[220px_1fr]">
-          <div className="flex flex-col items-center gap-3 rounded-lg border border-border/60 bg-muted/40 p-3">
-            <Shimmer className="h-28 w-28 rounded-full" />
-            <Shimmer className="h-3 w-24" />
-          </div>
-          <div className="flex flex-col items-center justify-center gap-2 rounded-lg border border-border/60 bg-muted/40 p-3">
-            <Shimmer className="h-28 w-44" />
-            <Shimmer className="h-3 w-20" />
-          </div>
-        </div>
+        <Shimmer className="h-16 w-full" />
       )}
 
       {partial?.approach ? (
         <AnalysisApproach approach={partial.approach} />
       ) : (
         <div className="space-y-2">
-          <Shimmer className="h-3 w-24" />
+          <Shimmer className="h-3 w-14" />
           <Shimmer className="h-3 w-full" />
           <Shimmer className="h-3 w-2/3" />
         </div>
       )}
+
+      {partial?.time_complexity && partial?.space_complexity ? (
+        <AnalysisComplexity
+          time={partial.time_complexity}
+          space={partial.space_complexity}
+        />
+      ) : (
+        <Shimmer className="h-7 w-52" />
+      )}
     </div>
   );
-}
+}

frontend/components/best-practices/AnalysisLabel.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export function AnalysisLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="mb-1.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+      {children}
+    </div>
+  );
+}

frontend/components/best-practices/AnalysisPoints.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AnalysisSection } from "./AnalysisSection";
+import { AnalysisLabel } from "./AnalysisLabel";
 
 export function AnalysisPoints({
   strengths,
@@ -11,37 +11,33 @@ export function AnalysisPoints({
 }) {
   if (!strengths.length && !improvements.length) return null;
   return (
-    <div className="grid gap-4 sm:grid-cols-2">
+    <div className="space-y-1.5">
       {strengths.length > 0 && (
-        <AnalysisSection label="Strengths">
-          <ul className="space-y-1.5">
+        <div>
+          <AnalysisLabel>Strengths</AnalysisLabel>
+          <p className="text-[13px] leading-relaxed text-brand-offwhite/80">
             {strengths.map((s, i) => (
-              <li
-                key={i}
-                className="flex gap-2 text-[13px] leading-relaxed text-brand-offwhite/80"
-              >
-                <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-emerald-400" />
-                {s}
-              </li>
+              <span key={i} className="me-2 inline-flex items-start gap-1.5">
+                <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-400" />
+                <span>{s}</span>
+              </span>
             ))}
-          </ul>
-        </AnalysisSection>
+          </p>
+        </div>
       )}
       {improvements.length > 0 && (
-        <AnalysisSection label="Improvements">
-          <ul className="space-y-1.5">
+        <div>
+          <AnalysisLabel>Improvements</AnalysisLabel>
+          <p className="text-[13px] leading-relaxed text-brand-offwhite/80">
             {improvements.map((s, i) => (
-              <li
-                key={i}
-                className="flex gap-2 text-[13px] leading-relaxed text-brand-offwhite/80"
-              >
-                <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-purple-300" />
-                {s}
-              </li>
+              <span key={i} className="me-2 inline-flex items-start gap-1.5">
+                <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-purple-300" />
+                <span>{s}</span>
+              </span>
             ))}
-          </ul>
-        </AnalysisSection>
+          </p>
+        </div>
       )}
     </div>
   );
-}
+}