diff --git a/app/(dashboard)/career-goals/page.tsx b/app/(dashboard)/career-goals/page.tsx
index f85a143..d680340 100644
--- a/app/(dashboard)/career-goals/page.tsx
+++ b/app/(dashboard)/career-goals/page.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { useState, useEffect, useCallback, useRef, useMemo } from "react"
 import { Button } from "@/components/ui/button"
@@ -64,7 +64,6 @@ interface Goal {
   category: string
   categoryId: string
   status: "Not started" | "In progress" | "Completed"
-  /** ISO date string (YYYY-MM-DD) of last update — used for staleness badge */
   updatedAt: string
 }
 
@@ -78,140 +77,208 @@ interface AchievementRow {
 
 const goalStatuses = ["Not started", "In progress", "Completed"]
 
+function calculateGoalDistribution(goals: Goal[], categories: string[]): { [key: string]: number } {
+  const distribution: { [key: string]: number } = {}
+  categories.forEach(cat => { distribution[cat] = 0 })
+  goals.forEach(goal => { distribution[goal.category] = (distribution[goal.category] || 0) + 1 })
+  return distribution
+}
+
+function GoalsTable({ goals, setter, categories, updateGoal, deleteGoal, stalenessBadge }: {
+  goals: Goal[]
+  term: 'short_term' | 'mid_term' | 'long_term'
+  setter: React.Dispatch<React.SetStateAction<Goal[]>>
+  categories: string[]
+  updateGoal: (setter: React.Dispatch<React.SetStateAction<Goal[]>>, goals: Goal[], id: string, field: keyof Goal, value: string) => void
+  deleteGoal: (setter: React.Dispatch<React.SetStateAction<Goal[]>>, goals: Goal[], id: string) => void
+  stalenessBadge: (updatedAt: string, status: Goal['status']) => React.ReactNode
+}) {
+  return (
+    <div className="cg-table-wrap">
+      <table className="cg-table">
+        <thead>
+          <tr className="cg-table-head-row">
+            <th className="col-header" style={{ padding: "8px 12px", width: "45%" }}>Goal</th>
+            <th className="col-header" style={{ padding: "8px 12px", width: "12%" }}>Type</th>
+            <th className="col-header" style={{ padding: "8px 12px", width: "18%" }}>Category</th>
+            <th className="col-header" style={{ padding: "8px 12px", width: "15%" }}>Status</th>
+            <th style={{ padding: "8px 12px", width: "40px" }}></th>
+          </tr>
+        </thead>
+        <tbody>
+          {goals.map((goal) => (
+            <tr key={goal.id} className="cg-table-body-row">
+              <td className="p-2">
+                <Textarea value={goal.goal} onChange={(e) => updateGoal(setter, goals, goal.id, "goal", e.target.value)} placeholder="Goal description..." className="text-sm min-h-[60px]" rows={2} autoResize />
+                {stalenessBadge(goal.updatedAt, goal.status)}
+              </td>
+              <td className="p-2">
+                <BadgeSelect value={goal.type} onValueChange={(value) => updateGoal(setter, goals, goal.id, "type", value)}
+                  options={[
+                    { value: "Core", label: "Core", className: "", style: { background: "#0d1420", color: "#818cf8", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" } },
+                    { value: "Stretch", label: "Stretch", className: "", style: { background: "#1a0d0d", color: "#f87171", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" } },
+                  ]}
+                />
+              </td>
+              <td className="p-2">
+                <BadgeSelect value={goal.category} onValueChange={(value) => updateGoal(setter, goals, goal.id, "category", value)}
+                  options={categories.map((cat) => ({
+                    value: cat,
+                    label: cat.length > 20 ? cat.substring(0, 20) + "..." : cat,
+                    className: "",
+                    style: { background: "var(--surf-3)", color: "var(--text-2)", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" },
+                  }))}
+                />
+              </td>
+              <td className="p-2">
+                <BadgeSelect value={goal.status} onValueChange={(value) => updateGoal(setter, goals, goal.id, "status", value)}
+                  options={goalStatuses.map((status) => ({
+                    value: status,
+                    label: status,
+                    className: "",
+                    style: {
+                      background: status === "Completed" ? "#0d2015" : status === "In progress" ? "#0c1a3d" : "#1a1a22",
+                      color: status === "Completed" ? "#4ade80" : status === "In progress" ? "#60a5fa" : "#6b7280",
+                      fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px",
+                    },
+                  }))}
+                />
+              </td>
+              <td className="p-2">
+                <button onClick={() => deleteGoal(setter, goals, goal.id)} className="cg-goal-delete-btn">
+                  <Trash2 />
+                </button>
+              </td>
+            </tr>
+          ))}
+          {goals.length === 0 && (
+            <tr>
+              <td colSpan={5} className="cg-goals-empty-td">No goals yet. Click &quot;Add Goal&quot; to create one.</td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+function FocusTable({ focus, term, setter, updateFocusDistribution }: {
+  focus: FocusDistribution[]
+  term: 'short_term' | 'mid_term' | 'long_term'
+  setter: React.Dispatch<React.SetStateAction<FocusDistribution[]>>
+  updateFocusDistribution: (timePeriod: 'short_term' | 'mid_term' | 'long_term', setter: React.Dispatch<React.SetStateAction<FocusDistribution[]>>, category: string, field: keyof FocusDistribution, value: string | number) => void
+}) {
+  const total = focus.reduce((sum, item) => sum + item.focusPercent, 0)
+  return (
+    <div>
+      <div className="form-section-header">Desired Focus Distribution</div>
+      <div className="cg-focus-table-wrap">
+        <table className="cg-table">
+          <thead>
+            <tr className="cg-table-head-row">
+              <th className="col-header" style={{ padding: "8px 12px", width: "30%" }}>Category</th>
+              <th className="col-header" style={{ padding: "8px 12px", width: "10%" }}>Focus %</th>
+              <th className="col-header" style={{ padding: "8px 12px", width: "60%" }}>Why</th>
+            </tr>
+          </thead>
+          <tbody>
+            {focus.map((item) => (
+              <tr key={item.category} className="cg-table-body-row">
+                <td className="cg-focus-td-name" title={item.category}>{item.category}</td>
+                <td className="p-3">
+                  <Input type="number" value={item.focusPercent === 0 ? "" : item.focusPercent}
+                    onChange={(e) => updateFocusDistribution(term, setter, item.category, "focusPercent", e.target.value === "" ? 0 : parseInt(e.target.value) || 0)}
+                    onBlur={(e) => { if (e.target.value === "") updateFocusDistribution(term, setter, item.category, "focusPercent", 0) }}
+                    className="text-sm w-24" min="0" max="100" />
+                </td>
+                <td className="p-3">
+                  <Input value={item.why} onChange={(e) => updateFocusDistribution(term, setter, item.category, "why", e.target.value)} placeholder="Why this focus percentage..." className="text-sm" />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      {total !== 100 && total > 0 && (
+        <div className="cg-warning-box">Warning: Total focus percentage is {total}%. It should equal 100%.</div>
+      )}
+    </div>
+  )
+}
+
+function MismatchBox({ focus, goals, categories }: { focus: FocusDistribution[], goals: Goal[], categories: string[] }) {
+  const currentDist = calculateGoalDistribution(goals, categories)
+  const mismatches: string[] = []
+  focus.forEach((desired) => {
+    const currentCount = currentDist[desired.category] || 0
+    const currentPercent = goals.length > 0 ? Math.round((currentCount / goals.length) * 100) : 0
+    if (desired.focusPercent > 0 && currentPercent !== desired.focusPercent) {
+      mismatches.push(`${desired.category}: ${currentPercent}% (target: ${desired.focusPercent}%)`)
+    }
+  })
+  if (mismatches.length === 0) return null
+  return (
+    <div className="cg-mismatch-box">
+      Note: Current focus differs from desired:
+      <ul className="cg-mismatch-list">
+        {mismatches.map((msg, i) => <li key={i}>{msg}</li>)}
+      </ul>
+    </div>
+  )
+}
+
 export default function CareerGoalsPage() {
   const focusDebounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  // Starting Point & Destination
   const [whereYouAre, setWhereYouAre] = useState("")
   const [whereYouWantToGo, setWhereYouWantToGo] = useState("")
 
-  // Gap Analysis
   const [gapAnalysis, setGapAnalysis] = useState<GapAnalysisRow[]>([])
   const [isGapDialogOpen, setIsGapDialogOpen] = useState(false)
   const [editingGap, setEditingGap] = useState<GapAnalysisRow | null>(null)
-  const [gapFormData, setGapFormData] = useState({
-    category: "",
-    currentState: "",
-    desiredState: "",
-  })
+  const [gapFormData, setGapFormData] = useState({ category: "", currentState: "", desiredState: "" })
 
-  // Derive categories from gap analysis
   const categories = useMemo(() => gapAnalysis.map(row => row.category), [gapAnalysis])
   const categoryMap = useMemo(() => new Map(gapAnalysis.map(row => [row.category, row.id])), [gapAnalysis])
 
-  // Short-term (0-4 months)
   const [shortTermFocus, setShortTermFocus] = useState<FocusDistribution[]>([])
   const [shortTermGoals, setShortTermGoals] = useState<Goal[]>([])
-
-  // Mid-term (4-8 months)
   const [midTermFocus, setMidTermFocus] = useState<FocusDistribution[]>([])
   const [midTermGoals, setMidTermGoals] = useState<Goal[]>([])
-
-  // Long-term (8-12 months)
   const [longTermFocus, setLongTermFocus] = useState<FocusDistribution[]>([])
   const [longTermGoals, setLongTermGoals] = useState<Goal[]>([])
 
-  // Achievements
   const [achievements, setAchievements] = useState<AchievementRow[]>([])
-
-  // Loading state
   const [isLoading, setIsLoading] = useState(true)
 
-  // Load all data on mount
-  useEffect(() => {
-    loadAllData()
-  }, [])
+  useEffect(() => { loadAllData() }, [])
 
   const loadAllData = async () => {
     try {
       setIsLoading(true)
-
-      // Load profile
       const profile = await getCareerGoalsProfile()
-      if (profile) {
-        setWhereYouAre(profile.whereYouAre)
-        setWhereYouWantToGo(profile.whereYouWantToGo)
-      }
+      if (profile) { setWhereYouAre(profile.whereYouAre); setWhereYouWantToGo(profile.whereYouWantToGo) }
 
-      // Load gap analysis categories
       const categories = await getGapAnalysisCategories()
-      setGapAnalysis(categories.map(cat => ({
-        id: cat.id,
-        category: cat.category,
-        currentState: cat.currentState,
-        desiredState: cat.desiredState,
-      })))
+      setGapAnalysis(categories.map(cat => ({ id: cat.id, category: cat.category, currentState: cat.currentState, desiredState: cat.desiredState })))
 
-      // Load focus distributions for all periods
       const [shortFocus, midFocus, longFocus] = await Promise.all([
-        getFocusDistributions('short_term'),
-        getFocusDistributions('mid_term'),
-        getFocusDistributions('long_term'),
+        getFocusDistributions('short_term'), getFocusDistributions('mid_term'), getFocusDistributions('long_term'),
       ])
+      setShortTermFocus(shortFocus.map(f => ({ category: f.category, categoryId: f.categoryId, focusPercent: f.focusPercent, why: f.why })))
+      setMidTermFocus(midFocus.map(f => ({ category: f.category, categoryId: f.categoryId, focusPercent: f.focusPercent, why: f.why })))
+      setLongTermFocus(longFocus.map(f => ({ category: f.category, categoryId: f.categoryId, focusPercent: f.focusPercent, why: f.why })))
 
-      setShortTermFocus(shortFocus.map(f => ({
-        category: f.category,
-        categoryId: f.categoryId,
-        focusPercent: f.focusPercent,
-        why: f.why,
-      })))
-      setMidTermFocus(midFocus.map(f => ({
-        category: f.category,
-        categoryId: f.categoryId,
-        focusPercent: f.focusPercent,
-        why: f.why,
-      })))
-      setLongTermFocus(longFocus.map(f => ({
-        category: f.category,
-        categoryId: f.categoryId,
-        focusPercent: f.focusPercent,
-        why: f.why,
-      })))
-
-      // Load goals for all periods
       const [shortGoals, midGoals, longGoals] = await Promise.all([
-        getCareerGoals('short_term'),
-        getCareerGoals('mid_term'),
-        getCareerGoals('long_term'),
+        getCareerGoals('short_term'), getCareerGoals('mid_term'), getCareerGoals('long_term'),
       ])
+      const mapGoal = (g: any) => ({ id: g.id, goal: g.goal, type: g.type, category: g.category, categoryId: g.categoryId, status: g.status, updatedAt: g.updatedAt.split('T')[0] })
+      setShortTermGoals(shortGoals.map(mapGoal))
+      setMidTermGoals(midGoals.map(mapGoal))
+      setLongTermGoals(longGoals.map(mapGoal))
 
-      setShortTermGoals(shortGoals.map(g => ({
-        id: g.id,
-        goal: g.goal,
-        type: g.type,
-        category: g.category,
-        categoryId: g.categoryId,
-        status: g.status,
-        updatedAt: g.updatedAt.split('T')[0],
-      })))
-      setMidTermGoals(midGoals.map(g => ({
-        id: g.id,
-        goal: g.goal,
-        type: g.type,
-        category: g.category,
-        categoryId: g.categoryId,
-        status: g.status,
-        updatedAt: g.updatedAt.split('T')[0],
-      })))
-      setLongTermGoals(longGoals.map(g => ({
-        id: g.id,
-        goal: g.goal,
-        type: g.type,
-        category: g.category,
-        categoryId: g.categoryId,
-        status: g.status,
-        updatedAt: g.updatedAt.split('T')[0],
-      })))
-
-      // Load achievements
       const achievementsData = await getAchievements()
-      setAchievements(achievementsData.map(a => ({
-        id: a.id,
-        type: a.type,
-        description: a.description,
-        date: a.achievementDate,
-        keyTakeaway: a.keyTakeaway,
-      })))
+      setAchievements(achievementsData.map(a => ({ id: a.id, type: a.type, description: a.description, date: a.achievementDate, keyTakeaway: a.keyTakeaway })))
     } catch (error) {
       console.error('Failed to load career goals data:', error)
       toast.error('Failed to load career goals data')
@@ -220,38 +287,22 @@ export default function CareerGoalsPage() {
     }
   }
 
-  // Debounced profile update
   const handleProfileUpdate = useCallback(async () => {
-    try {
-      await upsertCareerGoalsProfile({
-        whereYouAre,
-        whereYouWantToGo,
-      })
-    } catch (error) {
-      console.error('Failed to update profile:', error)
-      toast.error('Failed to save profile')
-    }
+    try { await upsertCareerGoalsProfile({ whereYouAre, whereYouWantToGo }) }
+    catch (error) { console.error('Failed to update profile:', error); toast.error('Failed to save profile') }
   }, [whereYouAre, whereYouWantToGo])
 
-  // Debounce profile updates (update database 1 second after user stops typing)
   useEffect(() => {
     if (!isLoading && (whereYouAre || whereYouWantToGo)) {
-      const timer = setTimeout(() => {
-        handleProfileUpdate()
-      }, 1000)
+      const timer = setTimeout(() => { handleProfileUpdate() }, 1000)
       return () => clearTimeout(timer)
     }
     return undefined
   }, [whereYouAre, whereYouWantToGo, isLoading, handleProfileUpdate])
 
-  // Sync focus distributions when gap analysis changes
   useEffect(() => {
     if (isLoading) return
-
-    const updateFocusDistributions = (
-      currentFocus: FocusDistribution[],
-      setter: React.Dispatch<React.SetStateAction<FocusDistribution[]>>
-    ) => {
+    const updateFocusDistributions = (currentFocus: FocusDistribution[], setter: React.Dispatch<React.SetStateAction<FocusDistribution[]>>) => {
       const updatedFocus = categories.map(category => {
         const categoryId = categoryMap.get(category) || ''
         const existing = currentFocus.find(f => f.category === category)
@@ -259,66 +310,36 @@ export default function CareerGoalsPage() {
       })
       setter(updatedFocus)
     }
-
     updateFocusDistributions(shortTermFocus, setShortTermFocus)
     updateFocusDistributions(midTermFocus, setMidTermFocus)
     updateFocusDistributions(longTermFocus, setLongTermFocus)
   }, [gapAnalysis, categories, categoryMap, shortTermFocus, midTermFocus, longTermFocus, isLoading])
 
-  // Gap Analysis Functions
   const openAddGapDialog = () => {
-    setGapFormData({
-      category: "",
-      currentState: "",
-      desiredState: "",
-    })
+    setGapFormData({ category: "", currentState: "", desiredState: "" })
     setEditingGap(null)
     setIsGapDialogOpen(true)
   }
 
   const openEditGapDialog = (gap: GapAnalysisRow) => {
-    setGapFormData({
-      category: gap.category,
-      currentState: gap.currentState,
-      desiredState: gap.desiredState,
-    })
+    setGapFormData({ category: gap.category, currentState: gap.currentState, desiredState: gap.desiredState })
     setEditingGap(gap)
     setIsGapDialogOpen(true)
   }
 
   const handleSaveGap = async () => {
     if (!gapFormData.category.trim()) return
-
     try {
-      if (editingGap) {
-        // Update existing
-        await updateGapAnalysisCategory(editingGap.id, gapFormData)
-      } else {
-        // Add new
-        await createGapAnalysisCategory({
-          ...gapFormData,
-          displayOrder: gapAnalysis.length,
-        })
-      }
-
-      // Reload all data to get updated categories and related data
+      if (editingGap) await updateGapAnalysisCategory(editingGap.id, gapFormData)
+      else await createGapAnalysisCategory({ ...gapFormData, displayOrder: gapAnalysis.length })
       await loadAllData()
       setIsGapDialogOpen(false)
-    } catch (error) {
-      console.error('Failed to save gap category:', error)
-      toast.error('Failed to save gap category')
-    }
+    } catch (error) { console.error('Failed to save gap category:', error); toast.error('Failed to save gap category') }
   }
 
   const handleDeleteGap = async (id: string) => {
-    try {
-      await deleteGapAnalysisCategory(id)
-      // Reload data to update UI
-      await loadAllData()
-    } catch (error) {
-      console.error('Failed to delete gap category:', error)
-      toast.error('Failed to delete gap category')
-    }
+    try { await deleteGapAnalysisCategory(id); await loadAllData() }
+    catch (error) { console.error('Failed to delete gap category:', error); toast.error('Failed to delete gap category') }
   }
 
   const updateFocusDistribution = (
@@ -328,182 +349,76 @@ export default function CareerGoalsPage() {
     field: keyof FocusDistribution,
     value: string | number
   ) => {
-    // Update local state immediately for a responsive UI
-    setter(prev => prev.map(item =>
-      item.category === category ? { ...item, [field]: value } : item
-    ))
-
-    // Debounce the database write — cancel any pending write for this session
+    setter(prev => prev.map(item => item.category === category ? { ...item, [field]: value } : item))
     if (focusDebounceRef.current) clearTimeout(focusDebounceRef.current)
-
     const categoryId = categoryMap.get(category)
     if (!categoryId) return
-
-    const focusItem = (timePeriod === 'short_term' ? shortTermFocus :
-                       timePeriod === 'mid_term' ? midTermFocus : longTermFocus)
-                      .find(f => f.category === category)
-
+    const focusItem = (timePeriod === 'short_term' ? shortTermFocus : timePeriod === 'mid_term' ? midTermFocus : longTermFocus).find(f => f.category === category)
     if (focusItem) {
       focusDebounceRef.current = setTimeout(async () => {
         try {
           await upsertFocusDistribution({
-            timePeriod,
-            categoryId,
+            timePeriod, categoryId,
             focusPercent: field === 'focusPercent' ? Number(value) : focusItem.focusPercent,
             why: field === 'why' ? String(value) : focusItem.why,
           })
-        } catch (error) {
-          console.error('Failed to update focus distribution:', error)
-          toast.error('Failed to save focus distribution')
-        }
+        } catch (error) { console.error('Failed to update focus distribution:', error); toast.error('Failed to save focus distribution') }
       }, 400)
     }
   }
 
-  const addGoal = async (
-    timePeriod: 'short_term' | 'mid_term' | 'long_term',
-    setter: React.Dispatch<React.SetStateAction<Goal[]>>,
-    goals: Goal[]
-  ) => {
-    if (categories.length === 0) {
-      alert("Please add at least one category in the Gap Analysis section first.")
-      return
-    }
-
+  const addGoal = async (timePeriod: 'short_term' | 'mid_term' | 'long_term', setter: React.Dispatch<React.SetStateAction<Goal[]>>, goals: Goal[]) => {
+    if (categories.length === 0) { alert("Please add at least one category in the Gap Analysis section first."); return }
     const categoryId = categoryMap.get(categories[0])
     if (!categoryId) return
-
     try {
-      const newGoal = await createCareerGoal({
-        timePeriod,
-        goal: "",
-        type: "Core",
-        categoryId,
-        status: "Not started",
-        displayOrder: goals.length,
-      })
-
-      setter([...goals, {
-        id: newGoal.id,
-        goal: newGoal.goal,
-        type: newGoal.type,
-        category: newGoal.category,
-        categoryId: newGoal.categoryId,
-        status: newGoal.status,
-        updatedAt: newGoal.updatedAt.split('T')[0],
-      }])
-    } catch (error) {
-      console.error('Failed to create goal:', error)
-      toast.error('Failed to create goal')
-    }
+      const newGoal = await createCareerGoal({ timePeriod, goal: "", type: "Core", categoryId, status: "Not started", displayOrder: goals.length })
+      setter([...goals, { id: newGoal.id, goal: newGoal.goal, type: newGoal.type, category: newGoal.category, categoryId: newGoal.categoryId, status: newGoal.status, updatedAt: newGoal.updatedAt.split('T')[0] }])
+    } catch (error) { console.error('Failed to create goal:', error); toast.error('Failed to create goal') }
   }
 
-  const updateGoal = async (
-    setter: React.Dispatch<React.SetStateAction<Goal[]>>,
-    goals: Goal[],
-    id: string,
-    field: keyof Goal,
-    value: string
-  ) => {
-    // Update local state immediately (also bump updatedAt so staleness badge refreshes)
+  const updateGoal = async (setter: React.Dispatch<React.SetStateAction<Goal[]>>, goals: Goal[], id: string, field: keyof Goal, value: string) => {
     const todayISO = new Date().toISOString().split('T')[0]
-    setter(goals.map(goal =>
-      goal.id === id ? { ...goal, [field]: value, updatedAt: todayISO } : goal
-    ))
-
-    // Update database
+    setter(goals.map(goal => goal.id === id ? { ...goal, [field]: value, updatedAt: todayISO } : goal))
     try {
       const updates: any = {}
       if (field === 'goal') updates.goal = value
       if (field === 'type') updates.type = value as 'Core' | 'Stretch'
       if (field === 'status') updates.status = value as 'Not started' | 'In progress' | 'Completed'
-      if (field === 'category') {
-        const categoryId = categoryMap.get(value)
-        if (categoryId) updates.categoryId = categoryId
-      }
-
+      if (field === 'category') { const categoryId = categoryMap.get(value); if (categoryId) updates.categoryId = categoryId }
       await updateCareerGoal(id, updates)
-    } catch (error) {
-      console.error('Failed to update goal:', error)
-      toast.error('Failed to update goal')
-    }
+    } catch (error) { console.error('Failed to update goal:', error); toast.error('Failed to update goal') }
   }
 
   const deleteGoal = async (setter: React.Dispatch<React.SetStateAction<Goal[]>>, goals: Goal[], id: string) => {
-    try {
-      await deleteCareerGoal(id)
-      setter(goals.filter(goal => goal.id !== id))
-    } catch (error) {
-      console.error('Failed to delete goal:', error)
-      toast.error('Failed to delete goal')
-    }
+    try { await deleteCareerGoal(id); setter(goals.filter(goal => goal.id !== id)) }
+    catch (error) { console.error('Failed to delete goal:', error); toast.error('Failed to delete goal') }
   }
 
   const addAchievement = async () => {
     try {
-      const newAchievement = await createAchievement({
-        type: "Book",
-        description: "",
-        achievementDate: new Date().toISOString().split('T')[0],
-        keyTakeaway: "",
-      })
-
-      setAchievements([...achievements, {
-        id: newAchievement.id,
-        type: newAchievement.type,
-        description: newAchievement.description,
-        date: newAchievement.achievementDate,
-        keyTakeaway: newAchievement.keyTakeaway,
-      }])
-    } catch (error) {
-      console.error('Failed to create achievement:', error)
-      toast.error('Failed to create achievement')
-    }
+      const newAchievement = await createAchievement({ type: "Book", description: "", achievementDate: new Date().toISOString().split('T')[0], keyTakeaway: "" })
+      setAchievements([...achievements, { id: newAchievement.id, type: newAchievement.type, description: newAchievement.description, date: newAchievement.achievementDate, keyTakeaway: newAchievement.keyTakeaway }])
+    } catch (error) { console.error('Failed to create achievement:', error); toast.error('Failed to create achievement') }
   }
 
   const updateAchievementField = async (id: string, field: keyof AchievementRow, value: string) => {
-    // Update local state immediately
-    setAchievements(achievements.map(achievement =>
-      achievement.id === id ? { ...achievement, [field]: value } : achievement
-    ))
-
-    // Update database
+    setAchievements(achievements.map(a => a.id === id ? { ...a, [field]: value } : a))
     try {
       const updates: any = {}
       if (field === 'type') updates.type = value as AchievementRow['type']
       if (field === 'description') updates.description = value
       if (field === 'date') updates.achievementDate = value
       if (field === 'keyTakeaway') updates.keyTakeaway = value
-
       await updateAchievement(id, updates)
-    } catch (error) {
-      console.error('Failed to update achievement:', error)
-      toast.error('Failed to update achievement')
-    }
+    } catch (error) { console.error('Failed to update achievement:', error); toast.error('Failed to update achievement') }
   }
 
   const deleteAchievementById = async (id: string) => {
-    try {
-      await deleteAchievement(id)
-      setAchievements(achievements.filter(achievement => achievement.id !== id))
-    } catch (error) {
-      console.error('Failed to delete achievement:', error)
-      toast.error('Failed to delete achievement')
-    }
+    try { await deleteAchievement(id); setAchievements(achievements.filter(a => a.id !== id)) }
+    catch (error) { console.error('Failed to delete achievement:', error); toast.error('Failed to delete achievement') }
   }
 
-  const calculateGoalDistribution = (goals: Goal[]) => {
-    const distribution: { [key: string]: number } = {}
-    categories.forEach(cat => distribution[cat] = 0)
-
-    goals.forEach(goal => {
-      distribution[goal.category] = (distribution[goal.category] || 0) + 1
-    })
-
-    return distribution
-  }
-
-  /** Returns staleness info for a goal: days since last update, and severity if stale. */
   const getGoalStaleness = (updatedAt: string): { daysSince: number; severity: 'info' | 'warning' | 'critical' } | null => {
     const today = new Date()
     const last = new Date(updatedAt + 'T00:00:00')
@@ -513,7 +428,6 @@ export default function CareerGoalsPage() {
     return { daysSince, severity }
   }
 
-  /** Renders a small staleness badge for stale goals. */
   const stalenessBadge = (updatedAt: string, status: Goal['status']) => {
     if (status === 'Completed') return null
     const staleness = getGoalStaleness(updatedAt)
@@ -522,12 +436,7 @@ export default function CareerGoalsPage() {
     const bg = severity === 'critical' ? '#2a0a0a' : severity === 'warning' ? '#2a1a08' : '#0c1a3d'
     const color = severity === 'critical' ? '#f87171' : severity === 'warning' ? '#f97316' : '#60a5fa'
     return (
-      <span title={`No activity in ${daysSince} days`} style={{
-        display: 'inline-flex', alignItems: 'center', gap: '3px',
-        background: bg, color, fontSize: '10px', fontFamily: 'var(--font-mono)',
-        fontWeight: 500, borderRadius: '3px', padding: '1px 5px',
-        marginLeft: '4px', verticalAlign: 'middle', cursor: 'default',
-      }}>
+      <span title={`No activity in ${daysSince} days`} className="cg-staleness-badge" style={{ background: bg, color }}>
         {daysSince}d stale
       </span>
     )
@@ -540,16 +449,9 @@ export default function CareerGoalsPage() {
   }
 
   const renderPieChart = (goals: Goal[]) => {
-    const distribution = calculateGoalDistribution(goals)
+    const distribution = calculateGoalDistribution(goals, categories)
     const total = goals.length
-
-    if (total === 0) {
-      return (
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "160px", fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-          No goals yet
-        </div>
-      )
-    }
+    if (total === 0) return <div className="cg-pie-empty">No goals yet</div>
 
     let startAngle = 0
     const radius = 100
@@ -557,72 +459,38 @@ export default function CareerGoalsPage() {
     const centerY = 120
 
     return (
-      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" }}>
+      <div className="cg-pie-wrap">
         <svg width="240" height="240" viewBox="0 0 240 240">
           {categories.map((category) => {
             const count = distribution[category] || 0
             if (count === 0) return null
-
             const percentage = (count / total) * 100
             const angle = (percentage / 100) * 360
             const endAngle = startAngle + angle
-
             const x1 = centerX + radius * Math.cos((Math.PI * startAngle) / 180)
             const y1 = centerY + radius * Math.sin((Math.PI * startAngle) / 180)
             const x2 = centerX + radius * Math.cos((Math.PI * endAngle) / 180)
             const y2 = centerY + radius * Math.sin((Math.PI * endAngle) / 180)
-
             const largeArc = angle > 180 ? 1 : 0
-
             const path = `M ${centerX} ${centerY} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`
-
-            const slice = (
-              <path
-                key={category}
-                d={path}
-                fill={getCategoryColor(category)}
-                stroke="white"
-                strokeWidth="2"
-              />
-            )
-
+            const slice = <path key={category} d={path} fill={getCategoryColor(category)} stroke="white" strokeWidth="2" />
             startAngle = endAngle
             return slice
           })}
           <circle cx={centerX} cy={centerY} r="40" fill="var(--surf)" />
-          <text
-            x={centerX}
-            y={centerY}
-            textAnchor="middle"
-            dominantBaseline="middle"
-            style={{ fontSize: "20px", fontWeight: 700, fill: "#f0f0f0" }}
-          >
-            {total}
-          </text>
-          <text
-            x={centerX}
-            y={centerY + 25}
-            textAnchor="middle"
-            dominantBaseline="middle"
-            style={{ fontSize: "var(--text-caption)", fill: "#555555" }}
-          >
-            Total
-          </text>
+          <text x={centerX} y={centerY} textAnchor="middle" dominantBaseline="middle" style={{ fontSize: "20px", fontWeight: 700, fill: "#f0f0f0" }}>{total}</text>
+          <text x={centerX} y={centerY + 25} textAnchor="middle" dominantBaseline="middle" style={{ fontSize: "var(--text-caption)", fill: "#555555" }}>Total</text>
         </svg>
-
-        <div style={{ display: "flex", flexWrap: "wrap", gap: "6px", justifyContent: "center", maxWidth: "300px" }}>
+        <div className="cg-pie-legend">
           {categories.map((category) => {
             const count = distribution[category] || 0
             const percentage = total > 0 ? ((count / total) * 100).toFixed(1) : "0.0"
             const truncatedCategory = category.length > 30 ? category.substring(0, 30) + "..." : category
-
             return (
-              <div key={category} style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "var(--text-overline)" }} title={category}>
-                <div
-                  style={{ width: "10px", height: "10px", borderRadius: "2px", flexShrink: 0, backgroundColor: getCategoryColor(category) }}
-                />
-                <span style={{ color: "var(--text-2)" }}>{truncatedCategory}</span>
-                <span style={{ color: "var(--text-3)" }}>({percentage}%)</span>
+              <div key={category} className="cg-pie-legend-item" title={category}>
+                <div className="cg-pie-legend-dot" style={{ backgroundColor: getCategoryColor(category) }} />
+                <span className="cg-pie-legend-label">{truncatedCategory}</span>
+                <span className="cg-pie-legend-pct">({percentage}%)</span>
               </div>
             )
           })}
@@ -633,799 +501,186 @@ export default function CareerGoalsPage() {
 
   return (
     <>
-      {/* Top bar */}
-      <div style={{
-        height: "40px",
-        padding: "0 16px",
-        borderBottom: "1px solid var(--border-1)",
-        background: "var(--surf)",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flexShrink: 0,
-        position: "sticky",
-        top: 0,
-        zIndex: 10,
-      }}>
-        <span style={{ fontSize: "var(--text-label)", fontWeight: 500, color: "var(--text-1)", fontFamily: "var(--font-sans)" }}>
-          Career Goals
-        </span>
+      <div className="page-topbar">
+        <span className="page-topbar-title">Career Goals</span>
       </div>
 
-    <div style={{ display: "flex", flexDirection: "column", gap: "16px", padding: "16px" }}>
+      <div className="cg-page">
 
-      {/* Starting Point & Destination */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "6px", overflow: "hidden" }}>
-        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-1)" }}>
-          <div style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)" }}>
-            <Target style={{ width: "13px", height: "13px" }} />
-            Starting Point & Destination
-          </div>
-          <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginTop: "4px", lineHeight: 1.5 }}>
-            Reflect on your current role, responsibilities, and capabilities.
-            Be honest about your strengths, areas for improvement, and what motivates you at work.
-            Describe your long-term aspiration or next career milestone.
-          </p>
-        </div>
-        <div style={{ padding: "16px" }}>
-          <div className="grid grid-cols-2 gap-6">
-            <div className="grid gap-2">
-              <Label>Where you are now</Label>
-              <MarkdownTextarea
-                value={whereYouAre}
-                onValueChange={setWhereYouAre}
-                placeholder="Example: I am currently a Lead / Engineering Manager, responsible for delivery, technical direction, and people management. I am effective at keeping work moving and resolving issues as they come up, but I am still too involved in day-to-day execution. I often step in to unblock or make decisions myself, which limits how much space I create for others to lead and reduces my time for more strategic work."
-                rows={8}
-                className="text-sm"
-              />
+        {/* Starting Point & Destination */}
+        <div className="cg-section-card">
+          <div className="cg-section-header">
+            <div className="cg-section-title-row">
+              <Target />
+              Starting Point & Destination
             </div>
-
-            <div className="grid gap-2">
-              <Label>Where you want to go</Label>
-              <MarkdownTextarea
-                value={whereYouWantToGo}
-                onValueChange={setWhereYouWantToGo}
-                placeholder="Example: My goal in 12 months is to move into a more senior leadership role where my impact comes from setting direction rather than solving every problem myself. I aim to delegate more effectively and focus on longer-term technical and organisational decisions."
-                rows={8}
-                className="text-sm"
-              />
+            <p className="cg-section-desc">
+              Reflect on your current role, responsibilities, and capabilities.
+              Be honest about your strengths, areas for improvement, and what motivates you at work.
+              Describe your long-term aspiration or next career milestone.
+            </p>
+          </div>
+          <div className="cg-section-body">
+            <div className="grid grid-cols-2 gap-6">
+              <div className="grid gap-2">
+                <Label>Where you are now</Label>
+                <MarkdownTextarea value={whereYouAre} onValueChange={setWhereYouAre} placeholder="Example: I am currently a Lead / Engineering Manager, responsible for delivery, technical direction, and people management. I am effective at keeping work moving and resolving issues as they come up, but I am still too involved in day-to-day execution. I often step in to unblock or make decisions myself, which limits how much space I create for others to lead and reduces my time for more strategic work." rows={8} className="text-sm" />
+              </div>
+              <div className="grid gap-2">
+                <Label>Where you want to go</Label>
+                <MarkdownTextarea value={whereYouWantToGo} onValueChange={setWhereYouWantToGo} placeholder="Example: My goal in 12 months is to move into a more senior leadership role where my impact comes from setting direction rather than solving every problem myself. I aim to delegate more effectively and focus on longer-term technical and organisational decisions." rows={8} className="text-sm" />
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Gap Analysis */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "6px", overflow: "hidden" }}>
-        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-1)", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "16px" }}>
-          <div style={{ flex: 1 }}>
-            <div style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)" }}>
-              <TrendingUp style={{ width: "13px", height: "13px" }} />
-              Gap Analysis
+        {/* Gap Analysis */}
+        <div className="cg-section-card">
+          <div className="cg-section-header cg-section-header--between">
+            <div style={{ flex: 1 }}>
+              <div className="cg-section-title-row">
+                <TrendingUp />
+                Gap Analysis
+              </div>
+              <p className="cg-section-desc">Identify the gaps between your current position and your desired destination. These could be technical, behavioural, or contextual.</p>
             </div>
-            <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginTop: "4px", lineHeight: 1.5 }}>
-              Identify the gaps between your current position and your desired destination.
-              These could be technical, behavioural, or contextual.
-            </p>
+            <button onClick={openAddGapDialog} className="cg-add-btn">+ Add Category</button>
           </div>
-          <button
-            onClick={openAddGapDialog}
-            style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)", border: "none", color: "#0a1a0a", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-sans)", flexShrink: 0 }}
-          >
-            + Add Category
-          </button>
-        </div>
-        <div style={{ padding: "16px" }}>
-          {gapAnalysis.length === 0 ? (
-            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "48px 0", textAlign: "center", border: "1px solid var(--border-1)", borderRadius: "6px", background: "var(--surf-2)" }}>
-              <TrendingUp style={{ width: "32px", height: "32px", color: "var(--text-3)", marginBottom: "12px" }} />
-              <div style={{ fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)", marginBottom: "4px" }}>No categories yet</div>
-              <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginBottom: "12px" }}>
-                Add your first category to start your gap analysis
-              </p>
-              <button
-                onClick={openAddGapDialog}
-                style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)", border: "none", color: "#0a1a0a", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, cursor: "pointer" }}
-              >
-                + Add First Category
-              </button>
-            </div>
-          ) : (
-            <div style={{ overflowX: "auto" }}>
-              <table className="w-full border-collapse table-fixed" style={{ borderRadius: "6px", overflow: "hidden", border: "1px solid var(--border-1)" }}>
-                <thead>
-                  <tr style={{ borderBottom: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
-                    <th className="col-header" style={{ padding: "8px 12px", width: "20%" }}>Category</th>
-                    <th className="col-header" style={{ padding: "8px 12px", width: "35%" }}>Current State</th>
-                    <th className="col-header" style={{ padding: "8px 12px", width: "35%" }}>Desired State</th>
-                    <th className="col-header" style={{ padding: "8px 12px", width: "10%" }}>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {gapAnalysis.map((row) => (
-                    <tr key={row.id} style={{ borderBottom: "1px solid var(--border-1)" }}
-                      onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-2)")}
-                      onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
-                    >
-                      <td style={{ padding: "10px 12px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)", wordBreak: "break-word" }}>{row.category}</td>
-                      <td style={{ padding: "10px 12px", fontSize: "var(--text-meta)", color: "var(--text-2)", wordBreak: "break-word" }}>{row.currentState}</td>
-                      <td style={{ padding: "10px 12px", fontSize: "var(--text-meta)", color: "var(--text-2)", wordBreak: "break-word" }}>{row.desiredState}</td>
-                      <td style={{ padding: "10px 12px" }}>
-                        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "4px" }}>
-                          <button
-                            onClick={() => openEditGapDialog(row)}
-                            style={{ background: "none", border: "1px solid var(--border-2)", color: "var(--text-3)", borderRadius: "3px", padding: "2px 6px", cursor: "pointer" }}
-                            onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-                            onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
-                          >
-                            <Pencil style={{ width: "11px", height: "11px" }} />
-                          </button>
-                          <button
-                            onClick={() => handleDeleteGap(row.id)}
-                            style={{ background: "none", border: "1px solid var(--border-2)", color: "#f87171", borderRadius: "3px", padding: "2px 6px", cursor: "pointer" }}
-                            onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3)")}
-                            onMouseLeave={e => (e.currentTarget.style.background = "none")}
-                          >
-                            <Trash2 style={{ width: "11px", height: "11px" }} />
-                          </button>
-                        </div>
-                      </td>
+          <div className="cg-section-body">
+            {gapAnalysis.length === 0 ? (
+              <div className="cg-gap-empty">
+                <TrendingUp />
+                <div className="cg-gap-empty-title">No categories yet</div>
+                <p className="cg-gap-empty-desc">Add your first category to start your gap analysis</p>
+                <button onClick={openAddGapDialog} className="cg-add-btn">+ Add First Category</button>
+              </div>
+            ) : (
+              <div style={{ overflowX: "auto" }}>
+                <table className="w-full border-collapse table-fixed" style={{ borderRadius: "6px", overflow: "hidden", border: "1px solid var(--border-1)" }}>
+                  <thead>
+                    <tr className="cg-table-head-row">
+                      <th className="col-header" style={{ padding: "8px 12px", width: "20%" }}>Category</th>
+                      <th className="col-header" style={{ padding: "8px 12px", width: "35%" }}>Current State</th>
+                      <th className="col-header" style={{ padding: "8px 12px", width: "35%" }}>Desired State</th>
+                      <th className="col-header" style={{ padding: "8px 12px", width: "10%" }}>Actions</th>
                     </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Short-term Goals (0-4 months) */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "6px", overflow: "hidden" }}>
-        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-1)" }}>
-          <div style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)" }}>
-            <Zap style={{ width: "13px", height: "13px" }} />
-            Short-term (0-4 months)
-          </div>
-          <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginTop: "4px", lineHeight: 1.5 }}>
-            Focus on quick wins and foundational improvements you can achieve in the next few months.
-          </p>
-        </div>
-        <div style={{ padding: "16px" }}>
-          <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-            {/* Desired Focus Distribution */}
-            {categories.length > 0 && (
-              <div>
-                <div className="form-section-header">Desired Focus Distribution</div>
-                <div style={{ overflowX: "auto", border: "1px solid var(--border-1)", borderRadius: "6px" }}>
-                  <table className="w-full border-collapse table-fixed">
-                    <thead>
-                      <tr style={{ borderBottom: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "30%" }}>Category</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "10%" }}>Focus %</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "60%" }}>Why</th>
+                  </thead>
+                  <tbody>
+                    {gapAnalysis.map((row) => (
+                      <tr key={row.id} className="cg-table-body-row">
+                        <td className="cg-td cg-td--name">{row.category}</td>
+                        <td className="cg-td">{row.currentState}</td>
+                        <td className="cg-td">{row.desiredState}</td>
+                        <td className="cg-td-actions">
+                          <div className="cg-td-actions-inner">
+                            <button onClick={() => openEditGapDialog(row)} className="cg-edit-btn"><Pencil /></button>
+                            <button onClick={() => handleDeleteGap(row.id)} className="cg-delete-btn"><Trash2 /></button>
+                          </div>
+                        </td>
                       </tr>
-                    </thead>
-                    <tbody>
-                      {shortTermFocus.map((item) => (
-                        <tr key={item.category} style={{ borderBottom: "1px solid var(--border-1)" }}
-                          onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-2)")}
-                          onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
-                        >
-                          <td style={{ padding: "8px 12px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "300px" }} title={item.category}>{item.category}</td>
-                          <td className="p-3">
-                            <Input
-                              type="number"
-                              value={item.focusPercent === 0 ? "" : item.focusPercent}
-                              onChange={(e) => updateFocusDistribution('short_term', setShortTermFocus, item.category, "focusPercent", e.target.value === "" ? 0 : parseInt(e.target.value) || 0)}
-                              onBlur={(e) => {
-                                if (e.target.value === "") {
-                                  updateFocusDistribution('short_term', setShortTermFocus, item.category, "focusPercent", 0)
-                                }
-                              }}
-                              className="text-sm w-24"
-                              min="0"
-                              max="100"
-                            />
-                          </td>
-                          <td className="p-3">
-                            <Input
-                              value={item.why}
-                              onChange={(e) => updateFocusDistribution('short_term', setShortTermFocus, item.category, "why", e.target.value)}
-                              placeholder="Why this focus percentage..."
-                              className="text-sm"
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-                {(() => {
-                  const total = shortTermFocus.reduce((sum, item) => sum + item.focusPercent, 0)
-                  if (total !== 100 && total > 0) {
-                    return (
-                      <div style={{ marginTop: "6px", padding: "8px 12px", background: "#1a1200", border: "1px solid #6b4c00", borderRadius: "4px", fontSize: "var(--text-caption)", color: "#c9a227" }}>
-                        Warning: Total focus percentage is {total}%. It should equal 100%.
-                      </div>
-                    )
-                  }
-                  return null
-                })()}
+                    ))}
+                  </tbody>
+                </table>
               </div>
             )}
+          </div>
+        </div>
 
-            {/* Goals Table and Chart */}
-            <div className="grid grid-cols-[60%_40%] gap-6">
-              <div>
-                <div className="flex items-center justify-between mb-3">
-                  <span className="form-section-header">Goals</span>
-                  <button onClick={() => addGoal('short_term', setShortTermGoals, shortTermGoals)} style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "transparent", border: "1px solid var(--border-2)", color: "var(--text-2)", padding: "3px 8px", borderRadius: "4px", fontSize: "var(--text-caption)", cursor: "pointer" }}
-                    onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-                    onMouseLeave={e => (e.currentTarget.style.color = "var(--text-2)")}
-                  >+ Add Goal</button>
+        {/* Short-term Goals */}
+        <div className="cg-section-card">
+          <div className="cg-section-header">
+            <div className="cg-section-title-row"><Zap />Short-term (0-4 months)</div>
+            <p className="cg-section-desc">Focus on quick wins and foundational improvements you can achieve in the next few months.</p>
+          </div>
+          <div className="cg-section-body">
+            <div className="cg-goals-section">
+              {categories.length > 0 && <FocusTable focus={shortTermFocus} term="short_term" setter={setShortTermFocus} updateFocusDistribution={updateFocusDistribution} />}
+              <div className="grid grid-cols-[60%_40%] gap-6">
+                <div>
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="form-section-header">Goals</span>
+                    <button onClick={() => addGoal('short_term', setShortTermGoals, shortTermGoals)} className="cg-add-goal-btn">+ Add Goal</button>
+                  </div>
+                  <GoalsTable goals={shortTermGoals} term="short_term" setter={setShortTermGoals} categories={categories} updateGoal={updateGoal} deleteGoal={deleteGoal} stalenessBadge={stalenessBadge} />
                 </div>
-                <div style={{ overflowX: "auto", border: "1px solid var(--border-1)", borderRadius: "6px" }}>
-                  <table className="w-full border-collapse">
-                    <thead>
-                      <tr style={{ borderBottom: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "45%" }}>Goal</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "12%" }}>Type</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "18%" }}>Category</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "15%" }}>Status</th>
-                        <th style={{ padding: "8px 12px", width: "40px" }}></th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {shortTermGoals.map((goal) => (
-                        <tr key={goal.id} style={{ borderBottom: "1px solid var(--border-1)" }}>
-                          <td className="p-2">
-                            <Textarea
-                              value={goal.goal}
-                              onChange={(e) => updateGoal(setShortTermGoals, shortTermGoals, goal.id, "goal", e.target.value)}
-                              placeholder="Goal description..."
-                              className="text-sm min-h-[60px]"
-                              rows={2}
-                              autoResize
-                            />
-                            {stalenessBadge(goal.updatedAt, goal.status)}
-                          </td>
-                          <td className="p-2">
-                            <BadgeSelect
-                              value={goal.type}
-                              onValueChange={(value) => updateGoal(setShortTermGoals, shortTermGoals, goal.id, "type", value)}
-                              options={[
-                                { value: "Core", label: "Core", className: "", style: { background: "#0d1420", color: "#818cf8", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" } },
-                                { value: "Stretch", label: "Stretch", className: "", style: { background: "#1a0d0d", color: "#f87171", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" } },
-                              ]}
-                            />
-                          </td>
-                          <td className="p-2">
-                            <BadgeSelect
-                              value={goal.category}
-                              onValueChange={(value) => updateGoal(setShortTermGoals, shortTermGoals, goal.id, "category", value)}
-                              options={categories.map((cat) => ({
-                                value: cat,
-                                label: cat.length > 20 ? cat.substring(0, 20) + "..." : cat,
-                                className: "",
-                                style: { background: "var(--surf-3)", color: "var(--text-2)", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" },
-                              }))}
-                            />
-                          </td>
-                          <td className="p-2">
-                            <BadgeSelect
-                              value={goal.status}
-                              onValueChange={(value) => updateGoal(setShortTermGoals, shortTermGoals, goal.id, "status", value)}
-                              options={goalStatuses.map((status) => ({
-                                value: status,
-                                label: status,
-                                className: "",
-                                style: {
-                                  background: status === "Completed" ? "#0d2015" : status === "In progress" ? "#0c1a3d" : "#1a1a22",
-                                  color: status === "Completed" ? "#4ade80" : status === "In progress" ? "#60a5fa" : "#6b7280",
-                                  fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px",
-                                },
-                              }))}
-                            />
-                          </td>
-                          <td className="p-2">
-                            <button
-                              onClick={() => deleteGoal(setShortTermGoals, shortTermGoals, goal.id)}
-                              style={{ background: "none", border: "none", color: "#f87171", cursor: "pointer", padding: "2px" }}
-                              onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3)")}
-                              onMouseLeave={e => (e.currentTarget.style.background = "none")}
-                            >
-                              <Trash2 style={{ width: "11px", height: "11px" }} />
-                            </button>
-                          </td>
-                        </tr>
-                      ))}
-                      {shortTermGoals.length === 0 && (
-                        <tr>
-                          <td colSpan={5} style={{ padding: "12px", fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-                            No goals yet. Click &quot;Add Goal&quot; to create one.
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                  </table>
+                <div>
+                  <div className="form-section-header">Current Focus Distribution</div>
+                  {renderPieChart(shortTermGoals)}
+                  <MismatchBox focus={shortTermFocus} goals={shortTermGoals} categories={categories} />
                 </div>
               </div>
-
-              <div>
-                <div className="form-section-header">Current Focus Distribution</div>
-                {renderPieChart(shortTermGoals)}
-                {(() => {
-                  const currentDist = calculateGoalDistribution(shortTermGoals)
-                  const mismatches: string[] = []
-
-                  shortTermFocus.forEach((desired) => {
-                    const currentCount = currentDist[desired.category] || 0
-                    const currentPercent = shortTermGoals.length > 0
-                      ? Math.round((currentCount / shortTermGoals.length) * 100)
-                      : 0
-
-                    if (desired.focusPercent > 0 && currentPercent !== desired.focusPercent) {
-                      mismatches.push(`${desired.category}: ${currentPercent}% (target: ${desired.focusPercent}%)`)
-                    }
-                  })
-
-                  if (mismatches.length > 0) {
-                    return (
-                      <div style={{ marginTop: "8px", padding: "8px 12px", background: "#1a1200", border: "1px solid #6b4c00", borderRadius: "4px", fontSize: "var(--text-caption)", color: "#c9a227" }}>
-                        Note: Current focus differs from desired:
-                        <ul style={{ marginTop: "4px", marginLeft: "16px", listStyleType: "disc" }}>
-                          {mismatches.map((msg, i) => <li key={i}>{msg}</li>)}
-                        </ul>
-                      </div>
-                    )
-                  }
-                  return null
-                })()}
-              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Mid-term Goals (4-8 months) */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "6px", overflow: "hidden" }}>
-        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-1)" }}>
-          <div style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)" }}>
-            <TrendingUp style={{ width: "13px", height: "13px" }} />
-            Mid-term (4-8 months)
+        {/* Mid-term Goals */}
+        <div className="cg-section-card">
+          <div className="cg-section-header">
+            <div className="cg-section-title-row"><TrendingUp />Mid-term (4-8 months)</div>
+            <p className="cg-section-desc">Focus on goals that show deeper growth and sustained progress. Build consistency and demonstrate broader impact.</p>
           </div>
-          <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginTop: "4px", lineHeight: 1.5 }}>
-            Focus on goals that show deeper growth and sustained progress. Build consistency and demonstrate broader impact.
-          </p>
-        </div>
-        <div style={{ padding: "16px" }}>
-          <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-            {/* Desired Focus Distribution */}
-            {categories.length > 0 && (
-              <div>
-                <div className="form-section-header">Desired Focus Distribution</div>
-                <div style={{ overflowX: "auto", border: "1px solid var(--border-1)", borderRadius: "6px" }}>
-                  <table className="w-full border-collapse table-fixed">
-                    <thead>
-                      <tr style={{ borderBottom: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "30%" }}>Category</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "10%" }}>Focus %</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "60%" }}>Why</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {midTermFocus.map((item) => (
-                        <tr key={item.category} style={{ borderBottom: "1px solid var(--border-1)" }}
-                          onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-2)")}
-                          onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
-                        >
-                          <td style={{ padding: "8px 12px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "300px" }} title={item.category}>{item.category}</td>
-                          <td className="p-3">
-                            <Input
-                              type="number"
-                              value={item.focusPercent === 0 ? "" : item.focusPercent}
-                              onChange={(e) => updateFocusDistribution('mid_term', setMidTermFocus, item.category, "focusPercent", e.target.value === "" ? 0 : parseInt(e.target.value) || 0)}
-                              onBlur={(e) => {
-                                if (e.target.value === "") {
-                                  updateFocusDistribution('mid_term', setMidTermFocus, item.category, "focusPercent", 0)
-                                }
-                              }}
-                              className="text-sm w-24"
-                              min="0"
-                              max="100"
-                            />
-                          </td>
-                          <td className="p-3">
-                            <Input
-                              value={item.why}
-                              onChange={(e) => updateFocusDistribution('mid_term', setMidTermFocus, item.category, "why", e.target.value)}
-                              placeholder="Why this focus percentage..."
-                              className="text-sm"
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
+          <div className="cg-section-body">
+            <div className="cg-goals-section">
+              {categories.length > 0 && <FocusTable focus={midTermFocus} term="mid_term" setter={setMidTermFocus} updateFocusDistribution={updateFocusDistribution} />}
+              <div className="grid grid-cols-2 gap-6">
+                <div>
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="form-section-header">Goals</span>
+                    <button onClick={() => addGoal('mid_term', setMidTermGoals, midTermGoals)} className="cg-add-goal-btn">+ Add Goal</button>
+                  </div>
+                  <GoalsTable goals={midTermGoals} term="mid_term" setter={setMidTermGoals} categories={categories} updateGoal={updateGoal} deleteGoal={deleteGoal} stalenessBadge={stalenessBadge} />
                 </div>
-                {(() => {
-                  const total = midTermFocus.reduce((sum, item) => sum + item.focusPercent, 0)
-                  if (total !== 100 && total > 0) {
-                    return (
-                      <div style={{ marginTop: "6px", padding: "8px 12px", background: "#1a1200", border: "1px solid #6b4c00", borderRadius: "4px", fontSize: "var(--text-caption)", color: "#c9a227" }}>
-                        Warning: Total focus percentage is {total}%. It should equal 100%.
-                      </div>
-                    )
-                  }
-                  return null
-                })()}
-              </div>
-            )}
-
-            {/* Goals Table and Chart */}
-            <div className="grid grid-cols-2 gap-6">
-              <div>
-                <div className="flex items-center justify-between mb-3">
-                  <span className="form-section-header">Goals</span>
-                  <button onClick={() => addGoal('mid_term', setMidTermGoals, midTermGoals)} style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "transparent", border: "1px solid var(--border-2)", color: "var(--text-2)", padding: "3px 8px", borderRadius: "4px", fontSize: "var(--text-caption)", cursor: "pointer" }}
-                    onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-                    onMouseLeave={e => (e.currentTarget.style.color = "var(--text-2)")}
-                  >+ Add Goal</button>
+                <div>
+                  <div className="form-section-header">Current Focus Distribution</div>
+                  {renderPieChart(midTermGoals)}
+                  <MismatchBox focus={midTermFocus} goals={midTermGoals} categories={categories} />
                 </div>
-                <div style={{ overflowX: "auto", border: "1px solid var(--border-1)", borderRadius: "6px" }}>
-                  <table className="w-full border-collapse">
-                    <thead>
-                      <tr style={{ borderBottom: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "45%" }}>Goal</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "12%" }}>Type</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "18%" }}>Category</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "15%" }}>Status</th>
-                        <th style={{ padding: "8px 12px", width: "40px" }}></th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {midTermGoals.map((goal) => (
-                        <tr key={goal.id} style={{ borderBottom: "1px solid var(--border-1)" }}>
-                          <td className="p-2">
-                            <Textarea
-                              value={goal.goal}
-                              onChange={(e) => updateGoal(setMidTermGoals, midTermGoals, goal.id, "goal", e.target.value)}
-                              placeholder="Goal description..."
-                              className="text-sm min-h-[60px]"
-                              rows={2}
-                              autoResize
-                            />
-                            {stalenessBadge(goal.updatedAt, goal.status)}
-                          </td>
-                          <td className="p-2">
-                            <BadgeSelect
-                              value={goal.type}
-                              onValueChange={(value) => updateGoal(setMidTermGoals, midTermGoals, goal.id, "type", value)}
-                              options={[
-                                { value: "Core", label: "Core", className: "", style: { background: "#0d1420", color: "#818cf8", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" } },
-                                { value: "Stretch", label: "Stretch", className: "", style: { background: "#1a0d0d", color: "#f87171", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" } },
-                              ]}
-                            />
-                          </td>
-                          <td className="p-2">
-                            <BadgeSelect
-                              value={goal.category}
-                              onValueChange={(value) => updateGoal(setMidTermGoals, midTermGoals, goal.id, "category", value)}
-                              options={categories.map((cat) => ({
-                                value: cat,
-                                label: cat.length > 30 ? cat.substring(0, 30) + "..." : cat,
-                                className: "",
-                                style: { background: "var(--surf-3)", color: "var(--text-2)", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" },
-                              }))}
-                            />
-                          </td>
-                          <td className="p-2">
-                            <BadgeSelect
-                              value={goal.status}
-                              onValueChange={(value) => updateGoal(setMidTermGoals, midTermGoals, goal.id, "status", value)}
-                              options={goalStatuses.map((status) => ({
-                                value: status,
-                                label: status,
-                                className: "",
-                                style: {
-                                  background: status === "Completed" ? "#0d2015" : status === "In progress" ? "#0c1a3d" : "#1a1a22",
-                                  color: status === "Completed" ? "#4ade80" : status === "In progress" ? "#60a5fa" : "#6b7280",
-                                  fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px",
-                                },
-                              }))}
-                            />
-                          </td>
-                          <td className="p-2">
-                            <button
-                              onClick={() => deleteGoal(setMidTermGoals, midTermGoals, goal.id)}
-                              style={{ background: "none", border: "none", color: "#f87171", cursor: "pointer", padding: "2px" }}
-                              onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3)")}
-                              onMouseLeave={e => (e.currentTarget.style.background = "none")}
-                            >
-                              <Trash2 style={{ width: "11px", height: "11px" }} />
-                            </button>
-                          </td>
-                        </tr>
-                      ))}
-                      {midTermGoals.length === 0 && (
-                        <tr>
-                          <td colSpan={5} style={{ padding: "12px", fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-                            No goals yet. Click &quot;Add Goal&quot; to create one.
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-
-              <div>
-                <div className="form-section-header">Current Focus Distribution</div>
-                {renderPieChart(midTermGoals)}
-                {(() => {
-                  const currentDist = calculateGoalDistribution(midTermGoals)
-                  const mismatches: string[] = []
-
-                  midTermFocus.forEach((desired) => {
-                    const currentCount = currentDist[desired.category] || 0
-                    const currentPercent = midTermGoals.length > 0
-                      ? Math.round((currentCount / midTermGoals.length) * 100)
-                      : 0
-
-                    if (desired.focusPercent > 0 && currentPercent !== desired.focusPercent) {
-                      mismatches.push(`${desired.category}: ${currentPercent}% (target: ${desired.focusPercent}%)`)
-                    }
-                  })
-
-                  if (mismatches.length > 0) {
-                    return (
-                      <div style={{ marginTop: "8px", padding: "8px 12px", background: "#1a1200", border: "1px solid #6b4c00", borderRadius: "4px", fontSize: "var(--text-caption)", color: "#c9a227" }}>
-                        Note: Current focus differs from desired:
-                        <ul style={{ marginTop: "4px", marginLeft: "16px", listStyleType: "disc" }}>
-                          {mismatches.map((msg, i) => <li key={i}>{msg}</li>)}
-                        </ul>
-                      </div>
-                    )
-                  }
-                  return null
-                })()}
               </div>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Long-term Goals (8-12 months) */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "6px", overflow: "hidden" }}>
-        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-1)" }}>
-          <div style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)" }}>
-            <Award style={{ width: "13px", height: "13px" }} />
-            Long-term (8-12 months)
+        {/* Long-term Goals */}
+        <div className="cg-section-card">
+          <div className="cg-section-header">
+            <div className="cg-section-title-row"><Award />Long-term (8-12 months)</div>
+            <p className="cg-section-desc">Focus on demonstrating autonomy, technical depth, and influence across teams. Shape technical direction, mentor others, and drive lasting improvements.</p>
           </div>
-          <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginTop: "4px", lineHeight: 1.5 }}>
-            Focus on demonstrating autonomy, technical depth, and influence across teams. Shape technical direction, mentor others, and drive lasting improvements.
-          </p>
-        </div>
-        <div style={{ padding: "16px" }}>
-          <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
-            {/* Desired Focus Distribution */}
-            {categories.length > 0 && (
-              <div>
-                <div className="form-section-header">Desired Focus Distribution</div>
-                <div style={{ overflowX: "auto", border: "1px solid var(--border-1)", borderRadius: "6px" }}>
-                  <table className="w-full border-collapse table-fixed">
-                    <thead>
-                      <tr style={{ borderBottom: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "30%" }}>Category</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "10%" }}>Focus %</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "60%" }}>Why</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {longTermFocus.map((item) => (
-                        <tr key={item.category} style={{ borderBottom: "1px solid var(--border-1)" }}
-                          onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-2)")}
-                          onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
-                        >
-                          <td style={{ padding: "8px 12px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "300px" }} title={item.category}>{item.category}</td>
-                          <td className="p-3">
-                            <Input
-                              type="number"
-                              value={item.focusPercent === 0 ? "" : item.focusPercent}
-                              onChange={(e) => updateFocusDistribution('long_term', setLongTermFocus, item.category, "focusPercent", e.target.value === "" ? 0 : parseInt(e.target.value) || 0)}
-                              onBlur={(e) => {
-                                if (e.target.value === "") {
-                                  updateFocusDistribution('long_term', setLongTermFocus, item.category, "focusPercent", 0)
-                                }
-                              }}
-                              className="text-sm w-24"
-                              min="0"
-                              max="100"
-                            />
-                          </td>
-                          <td className="p-3">
-                            <Input
-                              value={item.why}
-                              onChange={(e) => updateFocusDistribution('long_term', setLongTermFocus, item.category, "why", e.target.value)}
-                              placeholder="Why this focus percentage..."
-                              className="text-sm"
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-                {(() => {
-                  const total = longTermFocus.reduce((sum, item) => sum + item.focusPercent, 0)
-                  if (total !== 100 && total > 0) {
-                    return (
-                      <div style={{ marginTop: "6px", padding: "8px 12px", background: "#1a1200", border: "1px solid #6b4c00", borderRadius: "4px", fontSize: "var(--text-caption)", color: "#c9a227" }}>
-                        Warning: Total focus percentage is {total}%. It should equal 100%.
-                      </div>
-                    )
-                  }
-                  return null
-                })()}
-              </div>
-            )}
-
-            {/* Goals Table and Chart */}
-            <div className="grid grid-cols-[60%_40%] gap-6">
-              <div>
-                <div className="flex items-center justify-between mb-3">
-                  <span className="form-section-header">Goals</span>
-                  <button onClick={() => addGoal('long_term', setLongTermGoals, longTermGoals)} style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "transparent", border: "1px solid var(--border-2)", color: "var(--text-2)", padding: "3px 8px", borderRadius: "4px", fontSize: "var(--text-caption)", cursor: "pointer" }}
-                    onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-                    onMouseLeave={e => (e.currentTarget.style.color = "var(--text-2)")}
-                  >+ Add Goal</button>
+          <div className="cg-section-body">
+            <div className="cg-goals-section">
+              {categories.length > 0 && <FocusTable focus={longTermFocus} term="long_term" setter={setLongTermFocus} updateFocusDistribution={updateFocusDistribution} />}
+              <div className="grid grid-cols-[60%_40%] gap-6">
+                <div>
+                  <div className="flex items-center justify-between mb-3">
+                    <span className="form-section-header">Goals</span>
+                    <button onClick={() => addGoal('long_term', setLongTermGoals, longTermGoals)} className="cg-add-goal-btn">+ Add Goal</button>
+                  </div>
+                  <GoalsTable goals={longTermGoals} term="long_term" setter={setLongTermGoals} categories={categories} updateGoal={updateGoal} deleteGoal={deleteGoal} stalenessBadge={stalenessBadge} />
                 </div>
-                <div style={{ overflowX: "auto", border: "1px solid var(--border-1)", borderRadius: "6px" }}>
-                  <table className="w-full border-collapse">
-                    <thead>
-                      <tr style={{ borderBottom: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "45%" }}>Goal</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "12%" }}>Type</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "18%" }}>Category</th>
-                        <th className="col-header" style={{ padding: "8px 12px", width: "15%" }}>Status</th>
-                        <th style={{ padding: "8px 12px", width: "40px" }}></th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {longTermGoals.map((goal) => (
-                        <tr key={goal.id} style={{ borderBottom: "1px solid var(--border-1)" }}>
-                          <td className="p-2">
-                            <Textarea
-                              value={goal.goal}
-                              onChange={(e) => updateGoal(setLongTermGoals, longTermGoals, goal.id, "goal", e.target.value)}
-                              placeholder="Goal description..."
-                              className="text-sm min-h-[60px]"
-                              rows={2}
-                              autoResize
-                            />
-                            {stalenessBadge(goal.updatedAt, goal.status)}
-                          </td>
-                          <td className="p-2">
-                            <BadgeSelect
-                              value={goal.type}
-                              onValueChange={(value) => updateGoal(setLongTermGoals, longTermGoals, goal.id, "type", value)}
-                              options={[
-                                { value: "Core", label: "Core", className: "", style: { background: "#0d1420", color: "#818cf8", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" } },
-                                { value: "Stretch", label: "Stretch", className: "", style: { background: "#1a0d0d", color: "#f87171", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" } },
-                              ]}
-                            />
-                          </td>
-                          <td className="p-2">
-                            <BadgeSelect
-                              value={goal.category}
-                              onValueChange={(value) => updateGoal(setLongTermGoals, longTermGoals, goal.id, "category", value)}
-                              options={categories.map((cat) => ({
-                                value: cat,
-                                label: cat.length > 30 ? cat.substring(0, 30) + "..." : cat,
-                                className: "",
-                                style: { background: "var(--surf-3)", color: "var(--text-2)", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px" },
-                              }))}
-                            />
-                          </td>
-                          <td className="p-2">
-                            <BadgeSelect
-                              value={goal.status}
-                              onValueChange={(value) => updateGoal(setLongTermGoals, longTermGoals, goal.id, "status", value)}
-                              options={goalStatuses.map((status) => ({
-                                value: status,
-                                label: status,
-                                className: "",
-                                style: {
-                                  background: status === "Completed" ? "#0d2015" : status === "In progress" ? "#0c1a3d" : "#1a1a22",
-                                  color: status === "Completed" ? "#4ade80" : status === "In progress" ? "#60a5fa" : "#6b7280",
-                                  fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)", fontWeight: 500, borderRadius: "3px", padding: "2px 7px",
-                                },
-                              }))}
-                            />
-                          </td>
-                          <td className="p-2">
-                            <button
-                              onClick={() => deleteGoal(setLongTermGoals, longTermGoals, goal.id)}
-                              style={{ background: "none", border: "none", color: "#f87171", cursor: "pointer", padding: "2px" }}
-                              onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3)")}
-                              onMouseLeave={e => (e.currentTarget.style.background = "none")}
-                            >
-                              <Trash2 style={{ width: "11px", height: "11px" }} />
-                            </button>
-                          </td>
-                        </tr>
-                      ))}
-                      {longTermGoals.length === 0 && (
-                        <tr>
-                          <td colSpan={5} style={{ padding: "12px", fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-                            No goals yet. Click &quot;Add Goal&quot; to create one.
-                          </td>
-                        </tr>
-                      )}
-                    </tbody>
-                  </table>
+                <div>
+                  <div className="form-section-header">Current Focus Distribution</div>
+                  {renderPieChart(longTermGoals)}
+                  <MismatchBox focus={longTermFocus} goals={longTermGoals} categories={categories} />
                 </div>
               </div>
-
-              <div>
-                <div className="form-section-header">Current Focus Distribution</div>
-                {renderPieChart(longTermGoals)}
-                {(() => {
-                  const currentDist = calculateGoalDistribution(longTermGoals)
-                  const mismatches: string[] = []
-
-                  longTermFocus.forEach((desired) => {
-                    const currentCount = currentDist[desired.category] || 0
-                    const currentPercent = longTermGoals.length > 0
-                      ? Math.round((currentCount / longTermGoals.length) * 100)
-                      : 0
-
-                    if (desired.focusPercent > 0 && currentPercent !== desired.focusPercent) {
-                      mismatches.push(`${desired.category}: ${currentPercent}% (target: ${desired.focusPercent}%)`)
-                    }
-                  })
-
-                  if (mismatches.length > 0) {
-                    return (
-                      <div style={{ marginTop: "8px", padding: "8px 12px", background: "#1a1200", border: "1px solid #6b4c00", borderRadius: "4px", fontSize: "var(--text-caption)", color: "#c9a227" }}>
-                        Note: Current focus differs from desired:
-                        <ul style={{ marginTop: "4px", marginLeft: "16px", listStyleType: "disc" }}>
-                          {mismatches.map((msg, i) => <li key={i}>{msg}</li>)}
-                        </ul>
-                      </div>
-                    )
-                  }
-                  return null
-                })()}
-              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      {/* Extra Achievements & Learning */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "6px", overflow: "hidden" }}>
-        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border-1)", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "16px" }}>
-          <div style={{ flex: 1 }}>
-            <div style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)" }}>
-              <Award style={{ width: "13px", height: "13px" }} />
-              Extra Achievements & Learning
+        {/* Achievements */}
+        <div className="cg-section-card">
+          <div className="cg-section-header cg-section-header--between">
+            <div style={{ flex: 1 }}>
+              <div className="cg-section-title-row"><Award />Extra Achievements & Learning</div>
+              <p className="cg-section-desc">Record additional accomplishments, learning experiences, or initiatives outside your planned goals — certifications, courses, conferences, books, talks, or mentoring.</p>
             </div>
-            <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginTop: "4px", lineHeight: 1.5 }}>
-              Record additional accomplishments, learning experiences, or initiatives outside your planned goals — certifications, courses, conferences, books, talks, or mentoring.
-            </p>
+            <button onClick={addAchievement} className="cg-add-btn">+ Add Achievement</button>
           </div>
-          <button
-            onClick={addAchievement}
-            style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)", border: "none", color: "#0a1a0a", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-sans)", flexShrink: 0 }}
-          >
-            + Add Achievement
-          </button>
-        </div>
-        <div style={{ padding: "16px" }}>
-            <div style={{ overflowX: "auto", border: "1px solid var(--border-1)", borderRadius: "6px" }}>
-              <table className="w-full border-collapse">
+          <div className="cg-section-body">
+            <div className="cg-table-wrap">
+              <table className="cg-table">
                 <thead>
-                  <tr style={{ borderBottom: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
+                  <tr className="cg-table-head-row">
                     <th className="col-header" style={{ padding: "8px 12px" }}>Type</th>
                     <th className="col-header" style={{ padding: "8px 12px" }}>Description</th>
                     <th className="col-header" style={{ padding: "8px 12px" }}>Date</th>
@@ -1435,15 +690,10 @@ export default function CareerGoalsPage() {
                 </thead>
                 <tbody>
                   {achievements.map((achievement) => (
-                    <tr key={achievement.id} style={{ borderBottom: "1px solid var(--border-1)" }}>
+                    <tr key={achievement.id} className="cg-table-body-row">
                       <td className="p-3">
-                        <Select
-                          value={achievement.type}
-                          onValueChange={(value) => updateAchievementField(achievement.id, "type", value)}
-                        >
-                          <SelectTrigger className="text-sm">
-                            <SelectValue />
-                          </SelectTrigger>
+                        <Select value={achievement.type} onValueChange={(value) => updateAchievementField(achievement.id, "type", value)}>
+                          <SelectTrigger className="text-sm"><SelectValue /></SelectTrigger>
                           <SelectContent>
                             <SelectItem value="Book">Book</SelectItem>
                             <SelectItem value="Course">Course</SelectItem>
@@ -1455,112 +705,58 @@ export default function CareerGoalsPage() {
                         </Select>
                       </td>
                       <td className="p-3">
-                        <Input
-                          value={achievement.description}
-                          onChange={(e) => updateAchievementField(achievement.id, "description", e.target.value)}
-                          placeholder="e.g., Designing Data-Intensive Applications by Martin Kleppmann"
-                          className="text-sm"
-                        />
+                        <Input value={achievement.description} onChange={(e) => updateAchievementField(achievement.id, "description", e.target.value)} placeholder="e.g., Designing Data-Intensive Applications by Martin Kleppmann" className="text-sm" />
                       </td>
                       <td className="p-3">
-                        <Input
-                          type="date"
-                          value={achievement.date}
-                          onChange={(e) => updateAchievementField(achievement.id, "date", e.target.value)}
-                          className="text-sm"
-                        />
+                        <Input type="date" value={achievement.date} onChange={(e) => updateAchievementField(achievement.id, "date", e.target.value)} className="text-sm" />
                       </td>
                       <td className="p-3">
-                        <Input
-                          value={achievement.keyTakeaway}
-                          onChange={(e) => updateAchievementField(achievement.id, "keyTakeaway", e.target.value)}
-                          placeholder="What did you learn or achieve?"
-                          className="text-sm"
-                        />
+                        <Input value={achievement.keyTakeaway} onChange={(e) => updateAchievementField(achievement.id, "keyTakeaway", e.target.value)} placeholder="What did you learn or achieve?" className="text-sm" />
                       </td>
                       <td className="p-3">
-                        <button
-                          onClick={() => deleteAchievementById(achievement.id)}
-                          style={{ background: "none", border: "none", color: "#f87171", cursor: "pointer", padding: "2px" }}
-                          onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3)")}
-                          onMouseLeave={e => (e.currentTarget.style.background = "none")}
-                        >
-                          <Trash2 style={{ width: "11px", height: "11px" }} />
-                        </button>
+                        <button onClick={() => deleteAchievementById(achievement.id)} className="cg-goal-delete-btn"><Trash2 /></button>
                       </td>
                     </tr>
                   ))}
                   {achievements.length === 0 && (
-                    <tr>
-                      <td colSpan={5} style={{ padding: "12px", fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-                        No achievements yet. Click &quot;Add Achievement&quot; to create one.
-                      </td>
-                    </tr>
+                    <tr><td colSpan={5} className="cg-goals-empty-td">No achievements yet. Click &quot;Add Achievement&quot; to create one.</td></tr>
                   )}
                 </tbody>
               </table>
             </div>
+          </div>
         </div>
-      </div>
 
-      {/* Gap Analysis Dialog */}
-      <Dialog open={isGapDialogOpen} onOpenChange={setIsGapDialogOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>{editingGap ? "Edit Category" : "Add Category"}</DialogTitle>
-            <DialogDescription>
-              {editingGap
-                ? "Update the category details below."
-                : "Create a new category to identify gaps between your current position and desired destination."
-              }
-            </DialogDescription>
-          </DialogHeader>
-          <div className="grid gap-4 py-4">
-            <div className="grid gap-2">
-              <Label htmlFor="category">Category Name *</Label>
-              <Input
-                id="category"
-                value={gapFormData.category}
-                onChange={(e) => setGapFormData({ ...gapFormData, category: e.target.value })}
-                placeholder="e.g., Technical Mastery & Delivery"
-                required
-              />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="currentState">Current State</Label>
-              <Textarea
-                id="currentState"
-                value={gapFormData.currentState}
-                onChange={(e) => setGapFormData({ ...gapFormData, currentState: e.target.value })}
-                placeholder="Describe your current state in this area..."
-                rows={3}
-                className="text-sm"
-              />
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="desiredState">Desired State</Label>
-              <Textarea
-                id="desiredState"
-                value={gapFormData.desiredState}
-                onChange={(e) => setGapFormData({ ...gapFormData, desiredState: e.target.value })}
-                placeholder="Describe your desired state in this area..."
-                rows={3}
-                className="text-sm"
-              />
+        {/* Gap Analysis Dialog */}
+        <Dialog open={isGapDialogOpen} onOpenChange={setIsGapDialogOpen}>
+          <DialogContent className="max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>{editingGap ? "Edit Category" : "Add Category"}</DialogTitle>
+              <DialogDescription>
+                {editingGap ? "Update the category details below." : "Create a new category to identify gaps between your current position and desired destination."}
+              </DialogDescription>
+            </DialogHeader>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <Label htmlFor="category">Category Name *</Label>
+                <Input id="category" value={gapFormData.category} onChange={(e) => setGapFormData({ ...gapFormData, category: e.target.value })} placeholder="e.g., Technical Mastery & Delivery" required />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="currentState">Current State</Label>
+                <Textarea id="currentState" value={gapFormData.currentState} onChange={(e) => setGapFormData({ ...gapFormData, currentState: e.target.value })} placeholder="Describe your current state in this area..." rows={3} className="text-sm" />
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="desiredState">Desired State</Label>
+                <Textarea id="desiredState" value={gapFormData.desiredState} onChange={(e) => setGapFormData({ ...gapFormData, desiredState: e.target.value })} placeholder="Describe your desired state in this area..." rows={3} className="text-sm" />
+              </div>
             </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setIsGapDialogOpen(false)}>
-              Cancel
-            </Button>
-            <Button onClick={handleSaveGap} disabled={!gapFormData.category.trim()}>
-              {editingGap ? "Save Changes" : "Add Category"}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setIsGapDialogOpen(false)}>Cancel</Button>
+              <Button onClick={handleSaveGap} disabled={!gapFormData.category.trim()}>{editingGap ? "Save Changes" : "Add Category"}</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
     </>
   )
 }
-
diff --git a/app/(dashboard)/dashboard/page.tsx b/app/(dashboard)/dashboard/page.tsx
index 8a246f4..8b434aa 100644
--- a/app/(dashboard)/dashboard/page.tsx
+++ b/app/(dashboard)/dashboard/page.tsx
@@ -50,7 +50,7 @@ export default async function DashboardPage() {
       {/* Header */}
       <div>
         <h1>Dashboard</h1>
-        <p style={{ marginTop: "4px" }}>{label}</p>
+        <p className="mt-1">{label}</p>
       </div>
 
       {/* Weekly Review prompt */}
@@ -68,7 +68,7 @@ export default async function DashboardPage() {
         <div className="bg-[#1c1c1c] border border-[#383838] rounded-xl p-5">
           <div className="mb-4">
             <h2>Priority Breakdown</h2>
-            <p style={{ marginTop: "2px" }}>Tasks by priority</p>
+            <p className="mt-0.5">Tasks by priority</p>
           </div>
           <TaskPriorityChart />
         </div>
diff --git a/app/(dashboard)/evidence/page.tsx b/app/(dashboard)/evidence/page.tsx
index db0c6d0..da0e8ff 100644
--- a/app/(dashboard)/evidence/page.tsx
+++ b/app/(dashboard)/evidence/page.tsx
@@ -187,224 +187,221 @@ export default function EvidencePage() {
       </div>
       <div className="page-content">
 
-      {/* Stats bar */}
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: "12px", marginBottom: "24px" }}>
-        {[
-          { label: "Total Entries", value: totalEntries },
-          { label: "This Month", value: entriesThisMonth },
-          ...CATEGORIES.filter(c => categoryCounts[c]).map(c => ({
-            label: CATEGORY_LABELS[c],
-            value: categoryCounts[c] ?? 0,
-            color: CATEGORY_COLORS[c].color,
-          })),
-        ].map((stat, i) => (
-          <div key={i} style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "16px 20px" }}>
-            <span className="form-label" style={{ display: "block" }}>{stat.label}</span>
-            <p style={{ fontSize: "24px", fontWeight: 700, color: ("color" in stat && stat.color) ? stat.color : "var(--text-1)", marginTop: "4px" }}>{stat.value}</p>
-          </div>
-        ))}
-      </div>
-
-      {/* Quick-add form */}
-      {showForm && (
-        <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "20px 24px", marginBottom: "20px" }}>
-          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "16px" }}>
-            <h2>New Evidence Entry</h2>
-            <button onClick={() => { setShowForm(false); setForm(emptyForm()) }} style={{ background: "none", border: "none", color: "var(--text-3)", cursor: "pointer", padding: "4px" }}>
-              <X style={{ width: "16px", height: "16px" }} />
-            </button>
-          </div>
-          <div style={{ display: "grid", gap: "14px" }}>
-            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 180px", gap: "12px" }}>
-              <div style={{ display: "grid", gap: "4px" }}>
-                <label className="form-label">Person *</label>
-                <select
-                  value={form.personId}
-                  onChange={e => setForm({ ...form, personId: e.target.value })}
-                  style={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", color: form.personId ? "var(--text-1)" : "var(--text-3)", padding: "6px 10px", fontSize: "var(--text-label)", cursor: "pointer" }}
-                >
-                  <option value="">Select person...</option>
-                  {people.filter(p => p.status === "active").map(p => (
-                    <option key={p.id} value={p.id}>{p.name}</option>
-                  ))}
-                </select>
-              </div>
-              <div style={{ display: "grid", gap: "4px" }}>
-                <label className="form-label">Category</label>
-                <select
-                  value={form.category}
-                  onChange={e => setForm({ ...form, category: e.target.value as EvidenceCategory })}
-                  style={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", color: "var(--text-1)", padding: "6px 10px", fontSize: "var(--text-label)", cursor: "pointer" }}
-                >
-                  {CATEGORIES.map(c => <option key={c} value={c}>{CATEGORY_LABELS[c]}</option>)}
-                </select>
-              </div>
-              <div style={{ display: "grid", gap: "4px" }}>
-                <label className="form-label">Date</label>
-                <Input type="date" value={form.occurredAt} onChange={e => setForm({ ...form, occurredAt: e.target.value })} />
-              </div>
+        {/* Stats bar */}
+        <div className="ev-stats-grid">
+          {[
+            { label: "Total Entries", value: totalEntries },
+            { label: "This Month", value: entriesThisMonth },
+            ...CATEGORIES.filter(c => categoryCounts[c]).map(c => ({
+              label: CATEGORY_LABELS[c],
+              value: categoryCounts[c] ?? 0,
+              color: CATEGORY_COLORS[c].color,
+            })),
+          ].map((stat, i) => (
+            <div key={i} className="ev-stat-card">
+              <span className="form-label" style={{ display: "block" }}>{stat.label}</span>
+              <p className="ev-stat-value" style={{ color: ("color" in stat && stat.color) ? stat.color : "var(--text-1)" }}>{stat.value}</p>
             </div>
+          ))}
+        </div>
 
-            <div style={{ display: "grid", gap: "4px" }}>
-              <label className="form-label">Title *</label>
-              <Input
-                value={form.title}
-                onChange={e => setForm({ ...form, title: e.target.value })}
-                placeholder="Brief description of the evidence..."
-              />
+        {/* Quick-add form */}
+        {showForm && (
+          <div className="ev-form-card">
+            <div className="ev-form-header">
+              <h2>New Evidence Entry</h2>
+              <button className="ev-form-close-btn" onClick={() => { setShowForm(false); setForm(emptyForm()) }}>
+                <X />
+              </button>
             </div>
+            <div className="ev-form-grid">
+              <div className="ev-form-row-3">
+                <div className="ev-form-field">
+                  <label className="form-label">Person *</label>
+                  <select
+                    value={form.personId}
+                    onChange={e => setForm({ ...form, personId: e.target.value })}
+                    className="ev-form-select"
+                    style={{ color: form.personId ? "var(--text-1)" : "var(--text-3)" }}
+                  >
+                    <option value="">Select person...</option>
+                    {people.filter(p => p.status === "active").map(p => (
+                      <option key={p.id} value={p.id}>{p.name}</option>
+                    ))}
+                  </select>
+                </div>
+                <div className="ev-form-field">
+                  <label className="form-label">Category</label>
+                  <select
+                    value={form.category}
+                    onChange={e => setForm({ ...form, category: e.target.value as EvidenceCategory })}
+                    className="ev-form-select"
+                  >
+                    {CATEGORIES.map(c => <option key={c} value={c}>{CATEGORY_LABELS[c]}</option>)}
+                  </select>
+                </div>
+                <div className="ev-form-field">
+                  <label className="form-label">Date</label>
+                  <Input type="date" value={form.occurredAt} onChange={e => setForm({ ...form, occurredAt: e.target.value })} />
+                </div>
+              </div>
 
-            <div style={{ display: "grid", gap: "4px" }}>
-              <label className="form-label">Notes (optional)</label>
-              <MarkdownTextarea value={form.content} onValueChange={v => setForm({ ...form, content: v })} placeholder="Add context, specifics, or quotes..." rows={3} />
-            </div>
+              <div className="ev-form-field">
+                <label className="form-label">Title *</label>
+                <Input
+                  value={form.title}
+                  onChange={e => setForm({ ...form, title: e.target.value })}
+                  placeholder="Brief description of the evidence..."
+                />
+              </div>
 
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }}>
-              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                <label className="form-label" style={{ margin: 0 }}>Sentiment</label>
-                <div style={{ display: "flex", gap: "4px" }}>
-                  {SENTIMENTS.map(s => {
-                    const cfg = SENTIMENT_CONFIG[s]
-                    const active = form.sentiment === s
-                    return (
-                      <button key={s} type="button" onClick={() => setForm({ ...form, sentiment: s })}
-                        style={{ padding: "3px 10px", borderRadius: "4px", fontSize: "var(--text-label)", fontWeight: 500, cursor: "pointer", border: `1px solid ${active ? cfg.color + "60" : "var(--border-2)"}`, background: active ? cfg.color + "15" : "var(--surf-2)", color: active ? cfg.color : "var(--text-3)" }}>
-                        {cfg.symbol} {cfg.label}
-                      </button>
-                    )
-                  })}
-                </div>
+              <div className="ev-form-field">
+                <label className="form-label">Notes (optional)</label>
+                <MarkdownTextarea value={form.content} onValueChange={v => setForm({ ...form, content: v })} placeholder="Add context, specifics, or quotes..." rows={3} />
               </div>
-              <div style={{ display: "flex", gap: "8px" }}>
-                <Button variant="outline" onClick={() => { setShowForm(false); setForm(emptyForm()) }}>Cancel</Button>
-                <Button onClick={handleSubmit} disabled={!form.title.trim() || !form.personId || saving}>
-                  {saving ? "Saving..." : "Save Evidence"}
-                </Button>
+
+              <div className="ev-form-footer">
+                <div className="ev-form-sentiment-row">
+                  <label className="form-label" style={{ margin: 0 }}>Sentiment</label>
+                  <div className="ev-form-sentiment-btns">
+                    {SENTIMENTS.map(s => {
+                      const cfg = SENTIMENT_CONFIG[s]
+                      const active = form.sentiment === s
+                      return (
+                        <button key={s} type="button" onClick={() => setForm({ ...form, sentiment: s })}
+                          style={{ padding: "3px 10px", borderRadius: "4px", fontSize: "var(--text-label)", fontWeight: 500, cursor: "pointer", border: `1px solid ${active ? cfg.color + "60" : "var(--border-2)"}`, background: active ? cfg.color + "15" : "var(--surf-2)", color: active ? cfg.color : "var(--text-3)" }}>
+                          {cfg.symbol} {cfg.label}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
+                <div className="ev-form-actions">
+                  <Button variant="outline" onClick={() => { setShowForm(false); setForm(emptyForm()) }}>Cancel</Button>
+                  <Button onClick={handleSubmit} disabled={!form.title.trim() || !form.personId || saving}>
+                    {saving ? "Saving..." : "Save Evidence"}
+                  </Button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
-
-      {/* Filters */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "16px 20px", marginBottom: "16px" }}>
-        <div style={{ display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }}>
-          <span className="form-label" style={{ margin: 0, flexShrink: 0 }}>Filter</span>
-
-          <select value={filterPerson} onChange={e => setFilterPerson(e.target.value)}
-            style={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", color: filterPerson ? "var(--text-1)" : "var(--text-3)", padding: "4px 8px", fontSize: "var(--text-label)", cursor: "pointer" }}>
-            <option value="">All people</option>
-            {people.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
-          </select>
-
-          <select value={filterCategory} onChange={e => setFilterCategory(e.target.value as EvidenceCategory | "")}
-            style={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", color: filterCategory ? "var(--text-1)" : "var(--text-3)", padding: "4px 8px", fontSize: "var(--text-label)", cursor: "pointer" }}>
-            <option value="">All categories</option>
-            {CATEGORIES.map(c => <option key={c} value={c}>{CATEGORY_LABELS[c]}</option>)}
-          </select>
-
-          <select value={filterSentiment} onChange={e => setFilterSentiment(e.target.value as EvidenceSentiment | "")}
-            style={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", color: filterSentiment ? "var(--text-1)" : "var(--text-3)", padding: "4px 8px", fontSize: "var(--text-label)", cursor: "pointer" }}>
-            <option value="">All sentiments</option>
-            {SENTIMENTS.map(s => <option key={s} value={s}>{SENTIMENT_CONFIG[s].label}</option>)}
-          </select>
-
-          <div style={{ width: "160px", flexShrink: 0 }}>
-            <Input type="date" value={filterFrom} onChange={e => setFilterFrom(e.target.value)} />
-          </div>
-          <span style={{ color: "var(--text-3)", fontSize: "var(--text-caption)", flexShrink: 0 }}>to</span>
-          <div style={{ width: "160px", flexShrink: 0 }}>
-            <Input type="date" value={filterTo} onChange={e => setFilterTo(e.target.value)} />
-          </div>
+        )}
 
-          {activeFilters > 0 && (
-            <button onClick={clearFilters} style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "none", border: "none", color: "var(--text-3)", cursor: "pointer", fontSize: "var(--text-caption)" }}>
-              <X style={{ width: "12px", height: "12px" }} /> Clear ({activeFilters})
-            </button>
-          )}
-        </div>
-      </div>
+        {/* Filters */}
+        <div className="ev-filter-card">
+          <div className="ev-filter-row">
+            <span className="form-label ev-filter-label">Filter</span>
+
+            <select value={filterPerson} onChange={e => setFilterPerson(e.target.value)}
+              className="ev-filter-select"
+              style={{ color: filterPerson ? "var(--text-1)" : "var(--text-3)" }}>
+              <option value="">All people</option>
+              {people.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+            </select>
+
+            <select value={filterCategory} onChange={e => setFilterCategory(e.target.value as EvidenceCategory | "")}
+              className="ev-filter-select"
+              style={{ color: filterCategory ? "var(--text-1)" : "var(--text-3)" }}>
+              <option value="">All categories</option>
+              {CATEGORIES.map(c => <option key={c} value={c}>{CATEGORY_LABELS[c]}</option>)}
+            </select>
+
+            <select value={filterSentiment} onChange={e => setFilterSentiment(e.target.value as EvidenceSentiment | "")}
+              className="ev-filter-select"
+              style={{ color: filterSentiment ? "var(--text-1)" : "var(--text-3)" }}>
+              <option value="">All sentiments</option>
+              {SENTIMENTS.map(s => <option key={s} value={s}>{SENTIMENT_CONFIG[s].label}</option>)}
+            </select>
+
+            <div className="ev-filter-date-wrap">
+              <Input type="date" value={filterFrom} onChange={e => setFilterFrom(e.target.value)} />
+            </div>
+            <span className="ev-filter-sep">to</span>
+            <div className="ev-filter-date-wrap">
+              <Input type="date" value={filterTo} onChange={e => setFilterTo(e.target.value)} />
+            </div>
 
-      {/* Evidence list */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", overflow: "hidden" }}>
-        {filtered.length === 0 ? (
-          <div style={{ padding: "48px 24px", textAlign: "center" }}>
-            <p style={{ color: "var(--text-3)", marginBottom: "12px" }}>
-              {activeFilters > 0 ? "No entries match the current filters." : "No evidence logged yet. Start capturing achievements and observations."}
-            </p>
-            {activeFilters === 0 && (
-              <Button onClick={() => setShowForm(true)}>
-                <Plus style={{ width: "14px", height: "14px" }} /> Add First Entry
-              </Button>
+            {activeFilters > 0 && (
+              <button onClick={clearFilters} className="ev-filter-clear-btn">
+                <X /> Clear ({activeFilters})
+              </button>
             )}
           </div>
-        ) : (
-          <>
-            <div style={{ padding: "10px 20px", borderBottom: "1px solid var(--border-1)", display: "flex", gap: "12px" }}>
-              <span className="col-header" style={{ flex: "0 0 160px" }}>Category</span>
-              <span className="col-header" style={{ flex: "0 0 160px" }}>Person</span>
-              <span className="col-header" style={{ flex: 1 }}>Evidence</span>
-              <span className="col-header" style={{ flex: "0 0 90px" }}>Sentiment</span>
-              <span className="col-header" style={{ flex: "0 0 100px", textAlign: "right" }}>Date</span>
-              <span className="col-header" style={{ flex: "0 0 60px" }}></span>
+        </div>
+
+        {/* Evidence list */}
+        <div className="ev-list-card">
+          {filtered.length === 0 ? (
+            <div className="ev-list-empty">
+              <p className="ev-list-empty-text">
+                {activeFilters > 0 ? "No entries match the current filters." : "No evidence logged yet. Start capturing achievements and observations."}
+              </p>
+              {activeFilters === 0 && (
+                <Button onClick={() => setShowForm(true)}>
+                  <Plus style={{ width: "14px", height: "14px" }} /> Add First Entry
+                </Button>
+              )}
             </div>
-            {filtered.map(entry => {
-              const cat = CATEGORY_COLORS[entry.category]
-              const sent = entry.sentiment ? SENTIMENT_CONFIG[entry.sentiment] : null
-              return (
-                <div key={entry.id}
-                  style={{ padding: "10px 20px", borderBottom: "1px solid var(--border-1)", display: "flex", gap: "12px", alignItems: "center" }}
-                  onMouseEnter={e => (e.currentTarget.style.background = "#292929")}
-                  onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
-                >
-                  <div style={{ flex: "0 0 160px" }}>
-                    <span style={{ padding: "2px 7px", borderRadius: "3px", fontSize: "var(--text-caption)", fontWeight: 600, background: cat.bg, color: cat.color }}>
-                      {CATEGORY_LABELS[entry.category]}
-                    </span>
-                  </div>
-                  <div style={{ flex: "0 0 160px" }}>
-                    {entry.personName ? (
-                      <a href={`/people/${entry.personId}`} style={{ fontSize: "var(--text-label)", color: "var(--text-2)", textDecoration: "none" }}
-                        onMouseEnter={e => ((e.target as HTMLElement).style.color = "var(--text-1)")}
-                        onMouseLeave={e => ((e.target as HTMLElement).style.color = "var(--text-2)")}
-                      >{entry.personName}</a>
-                    ) : (
-                      <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>{personMap[entry.personId] ?? "Unknown"}</span>
-                    )}
-                  </div>
-                  <div style={{ flex: 1, overflow: "hidden" }}>
-                    <p style={{ fontSize: "var(--text-label)", color: "var(--text-1)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", marginBottom: entry.content ? "2px" : 0 }}>{entry.title}</p>
-                    {entry.content && (
-                      <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{entry.content}</p>
-                    )}
-                  </div>
-                  <div style={{ flex: "0 0 90px" }}>
-                    {sent && (
-                      <span style={{ fontSize: "var(--text-caption)", color: sent.color }}>{sent.symbol} {sent.label}</span>
-                    )}
-                  </div>
-                  <div style={{ flex: "0 0 100px", textAlign: "right" }}>
-                    <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>{formatDate(entry.occurredAt)}</span>
-                  </div>
-                  <div style={{ flex: "0 0 60px", display: "flex", justifyContent: "flex-end" }}>
-                    <button onClick={() => handleDelete(entry.id)} disabled={deletingId === entry.id}
-                      style={{ background: "none", border: "none", color: "var(--text-3)", cursor: deletingId === entry.id ? "not-allowed" : "pointer", padding: "4px", borderRadius: "4px", opacity: deletingId === entry.id ? 0.5 : 1 }}
-                      title="Delete entry"
-                    >
-                      <X style={{ width: "14px", height: "14px" }} />
-                    </button>
+          ) : (
+            <>
+              <div className="ev-list-header-row">
+                <span className="col-header ev-list-col-category">Category</span>
+                <span className="col-header ev-list-col-person">Person</span>
+                <span className="col-header ev-list-col-evidence">Evidence</span>
+                <span className="col-header ev-list-col-sentiment">Sentiment</span>
+                <span className="col-header ev-list-col-date">Date</span>
+                <span className="col-header ev-list-col-actions"></span>
+              </div>
+              {filtered.map(entry => {
+                const cat = CATEGORY_COLORS[entry.category]
+                const sent = entry.sentiment ? SENTIMENT_CONFIG[entry.sentiment] : null
+                return (
+                  <div key={entry.id} className="ev-list-row">
+                    <div className="ev-list-col-category">
+                      <span className="ev-cat-badge" style={{ background: cat.bg, color: cat.color }}>
+                        {CATEGORY_LABELS[entry.category]}
+                      </span>
+                    </div>
+                    <div className="ev-list-col-person">
+                      {entry.personName ? (
+                        <a href={`/people/${entry.personId}`} className="ev-person-link">{entry.personName}</a>
+                      ) : (
+                        <span className="ev-person-unknown">{personMap[entry.personId] ?? "Unknown"}</span>
+                      )}
+                    </div>
+                    <div className="ev-entry-col">
+                      <p className="ev-entry-title" style={{ marginBottom: entry.content ? "2px" : 0 }}>{entry.title}</p>
+                      {entry.content && (
+                        <p className="ev-entry-content">{entry.content}</p>
+                      )}
+                    </div>
+                    <div className="ev-list-col-sentiment">
+                      {sent && (
+                        <span className="ev-sentiment" style={{ color: sent.color }}>{sent.symbol} {sent.label}</span>
+                      )}
+                    </div>
+                    <div className="ev-list-col-date">
+                      <span className="ev-date">{formatDate(entry.occurredAt)}</span>
+                    </div>
+                    <div className="ev-list-col-actions" style={{ display: "flex", justifyContent: "flex-end" }}>
+                      <button onClick={() => handleDelete(entry.id)} disabled={deletingId === entry.id}
+                        className="ev-delete-btn"
+                        title="Delete entry"
+                      >
+                        <X />
+                      </button>
+                    </div>
                   </div>
-                </div>
-              )
-            })}
-            <div style={{ padding: "10px 20px", borderTop: "1px solid var(--border-1)" }}>
-              <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-                Showing {filtered.length} of {totalEntries} {totalEntries === 1 ? "entry" : "entries"}
-              </span>
-            </div>
-          </>
-        )}
-      </div>
+                )
+              })}
+              <div className="ev-footer">
+                <span className="ev-footer-text">
+                  Showing {filtered.length} of {totalEntries} {totalEntries === 1 ? "entry" : "entries"}
+                </span>
+              </div>
+            </>
+          )}
+        </div>
       </div>
     </>
   )
diff --git a/app/(dashboard)/follow-ups/page.tsx b/app/(dashboard)/follow-ups/page.tsx
index 57c5dbc..0f20939 100644
--- a/app/(dashboard)/follow-ups/page.tsx
+++ b/app/(dashboard)/follow-ups/page.tsx
@@ -26,10 +26,10 @@ function formatDate(dateStr: string): string {
 }
 
 function StatusBadge({ fu }: { fu: FollowUp }) {
-  if (fu.status === 'completed') return <span style={{ fontSize: 'var(--text-caption)', fontWeight: 600, color: '#00f058', background: '#0d1f14', border: '1px solid #1a3a25', borderRadius: '4px', padding: '2px 6px' }}>Done</span>
-  if (fu.status === 'cancelled') return <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', background: 'var(--surf-3)', border: '1px solid var(--border-2)', borderRadius: '4px', padding: '2px 6px' }}>Cancelled</span>
-  if (isOverdue(fu)) return <span style={{ fontSize: 'var(--text-caption)', fontWeight: 600, color: '#ff6b6b', background: '#2a0a0a', border: '1px solid #5a2020', borderRadius: '4px', padding: '2px 6px' }}>Overdue</span>
-  return <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-2)', background: 'var(--surf-3)', border: '1px solid var(--border-2)', borderRadius: '4px', padding: '2px 6px' }}>Open</span>
+  if (fu.status === 'completed') return <span className="fu-badge fu-badge--done">Done</span>
+  if (fu.status === 'cancelled') return <span className="fu-badge fu-badge--cancelled">Cancelled</span>
+  if (isOverdue(fu)) return <span className="fu-badge fu-badge--overdue">Overdue</span>
+  return <span className="fu-badge fu-badge--open">Open</span>
 }
 
 export default function FollowUpsPage() {
@@ -80,7 +80,6 @@ export default function FollowUpsPage() {
     ? Math.round(resolutionTimes.reduce((a, b) => a + b, 0) / resolutionTimes.length)
     : null
 
-
   return (
     <>
       <div className="page-topbar">
@@ -91,185 +90,156 @@ export default function FollowUpsPage() {
       </div>
       <div className="page-content">
 
-      {/* Stats bar */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '10px', marginBottom: '20px' }}>
-        {[
-          { label: 'Open', value: openCount, color: 'var(--text-1)' },
-          { label: 'Overdue', value: overdueCount, color: overdueCount > 0 ? '#ff6b6b' : 'var(--text-1)' },
-          { label: 'Done this month', value: completedThisMonth, color: '#00f058' },
-          { label: 'Avg resolution', value: avgResolution !== null ? `${avgResolution}d` : '—', color: 'var(--text-2)' },
-        ].map(stat => (
-          <div key={stat.label} style={{ background: 'var(--surf)', border: '1px solid var(--border-1)', borderRadius: '6px', padding: '12px 14px' }}>
-            <div className="form-label">{stat.label}</div>
-            <div style={{ fontSize: 'var(--text-section)', fontWeight: 700, color: stat.color }}>{stat.value}</div>
-          </div>
-        ))}
-      </div>
-
-      {/* View + filters */}
-      <div style={{ display: 'flex', gap: '8px', marginBottom: '16px', flexWrap: 'wrap', alignItems: 'center' }}>
-        {(['active', 'completed', 'all'] as ViewMode[]).map(v => (
-          <button
-            key={v}
-            onClick={() => setViewMode(v)}
-            style={{
-              background: viewMode === v ? 'var(--surf-3)' : 'var(--surf-2)',
-              border: `1px solid ${viewMode === v ? 'var(--border-3)' : 'var(--border-1)'}`,
-              borderRadius: '4px',
-              color: viewMode === v ? 'var(--text-1)' : 'var(--text-3)',
-              fontSize: 'var(--text-meta)',
-              padding: '5px 12px',
-              cursor: 'pointer',
-              fontFamily: 'var(--font-sans)',
-              textTransform: 'capitalize',
-            }}
-          >
-            {v}
-          </button>
-        ))}
-
-        <select
-          value={personFilter}
-          onChange={e => setPersonFilter(e.target.value)}
-          style={{
-            background: 'var(--surf-2)',
-            border: '1px solid var(--border-1)',
-            borderRadius: '4px',
-            color: 'var(--text-2)',
-            fontSize: 'var(--text-meta)',
-            padding: '5px 10px',
-            cursor: 'pointer',
-            fontFamily: 'var(--font-sans)',
-          }}
-        >
-          <option value="all">All people</option>
-          {people.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
-        </select>
-
-        {viewMode === 'active' && (
-          <label style={{ display: 'flex', alignItems: 'center', gap: '6px', fontSize: 'var(--text-meta)', color: 'var(--text-2)', cursor: 'pointer' }}>
-            <input
-              type="checkbox"
-              checked={showOverdueOnly}
-              onChange={e => setShowOverdueOnly(e.target.checked)}
-            />
-            Overdue only
-          </label>
-        )}
-      </div>
-
-      {/* Follow-up rows */}
-      {loading ? (
-        <p style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)' }}>Loading...</p>
-      ) : visible.length === 0 ? (
-        <div style={{ padding: '32px 0', textAlign: 'center' }}>
-          <p style={{ color: 'var(--text-3)', fontSize: 'var(--text-meta)' }}>
-            {viewMode === 'active' ? 'No open follow-ups. Nice work.' : 'Nothing to show.'}
-          </p>
+        {/* Stats bar */}
+        <div className="fu-stats-grid">
+          {[
+            { label: 'Open', value: openCount, color: 'var(--text-1)' },
+            { label: 'Overdue', value: overdueCount, color: overdueCount > 0 ? '#ff6b6b' : 'var(--text-1)' },
+            { label: 'Done this month', value: completedThisMonth, color: '#00f058' },
+            { label: 'Avg resolution', value: avgResolution !== null ? `${avgResolution}d` : '—', color: 'var(--text-2)' },
+          ].map(stat => (
+            <div key={stat.label} className="fu-stat-card">
+              <div className="form-label">{stat.label}</div>
+              <div className="fu-stat-value" style={{ color: stat.color }}>{stat.value}</div>
+            </div>
+          ))}
         </div>
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
-          {/* Column headers */}
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 140px 120px 100px 120px', gap: '12px', padding: '6px 12px' }}>
-            <span className="col-header">Title</span>
-            <span className="col-header">Person</span>
-            <span className="col-header">Due / Age</span>
-            <span className="col-header">Status</span>
-            <span className="col-header">Source</span>
-          </div>
 
-          {visible.map(fu => (
-            <div
-              key={fu.id}
+        {/* View + filters */}
+        <div className="fu-filters-row">
+          {(['active', 'completed', 'all'] as ViewMode[]).map(v => (
+            <button
+              key={v}
+              onClick={() => setViewMode(v)}
+              className="fu-view-btn"
               style={{
-                display: 'grid',
-                gridTemplateColumns: '1fr 140px 120px 100px 120px',
-                gap: '12px',
-                alignItems: 'center',
-                padding: '10px 12px',
-                background: isOverdue(fu) ? '#1a0a0a' : 'var(--surf)',
-                border: `1px solid ${isOverdue(fu) ? '#3a1515' : 'var(--border-1)'}`,
-                borderRadius: '5px',
+                background: viewMode === v ? 'var(--surf-3)' : 'var(--surf-2)',
+                border: `1px solid ${viewMode === v ? 'var(--border-3)' : 'var(--border-1)'}`,
+                color: viewMode === v ? 'var(--text-1)' : 'var(--text-3)',
               }}
             >
-              <div style={{ minWidth: 0 }}>
-                <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-1)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {fu.title}
+              {v}
+            </button>
+          ))}
+
+          <select
+            value={personFilter}
+            onChange={e => setPersonFilter(e.target.value)}
+            className="fu-filter-select"
+          >
+            <option value="all">All people</option>
+            {people.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+          </select>
+
+          {viewMode === 'active' && (
+            <label className="fu-overdue-label">
+              <input
+                type="checkbox"
+                checked={showOverdueOnly}
+                onChange={e => setShowOverdueOnly(e.target.checked)}
+              />
+              Overdue only
+            </label>
+          )}
+        </div>
+
+        {/* Follow-up rows */}
+        {loading ? (
+          <p className="fu-loading">Loading...</p>
+        ) : visible.length === 0 ? (
+          <div className="fu-empty">
+            <p className="fu-empty-text">
+              {viewMode === 'active' ? 'No open follow-ups. Nice work.' : 'Nothing to show.'}
+            </p>
+          </div>
+        ) : (
+          <div className="fu-list">
+            {/* Column headers */}
+            <div className="fu-col-headers">
+              <span className="col-header">Title</span>
+              <span className="col-header">Person</span>
+              <span className="col-header">Due / Age</span>
+              <span className="col-header">Status</span>
+              <span className="col-header">Source</span>
+            </div>
+
+            {visible.map(fu => (
+              <div
+                key={fu.id}
+                className="fu-row"
+                style={{
+                  background: isOverdue(fu) ? '#1a0a0a' : 'var(--surf)',
+                  border: `1px solid ${isOverdue(fu) ? '#3a1515' : 'var(--border-1)'}`,
+                }}
+              >
+                <div className="fu-row-title">
+                  <div className="fu-title-text">{fu.title}</div>
+                  {fu.description && (
+                    <div className="fu-desc-text">{fu.description}</div>
+                  )}
                 </div>
-                {fu.description && (
-                  <div style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginTop: '2px' }}>
-                    {fu.description}
-                  </div>
-                )}
-              </div>
 
-              <div>
-                {fu.personName ? (
-                  <Link href={`/people/${fu.personId}`} style={{ fontSize: 'var(--text-meta)', color: 'var(--text-2)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '3px' }}>
-                    {fu.personName} <ExternalLink style={{ width: '9px', height: '9px' }} />
-                  </Link>
-                ) : (
-                  <span style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)' }}>—</span>
-                )}
-              </div>
+                <div>
+                  {fu.personName ? (
+                    <Link href={`/people/${fu.personId}`} className="fu-person-link">
+                      {fu.personName} <ExternalLink />
+                    </Link>
+                  ) : (
+                    <span className="fu-person-none">—</span>
+                  )}
+                </div>
 
-              <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)' }}>
-                {fu.dueDate ? formatDate(fu.dueDate) : `${ageDays(fu.createdAt)}d old`}
-              </div>
+                <div className="fu-date-cell">
+                  {fu.dueDate ? formatDate(fu.dueDate) : `${ageDays(fu.createdAt)}d old`}
+                </div>
 
-              <div><StatusBadge fu={fu} /></div>
+                <div><StatusBadge fu={fu} /></div>
 
-              <div style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                {fu.sourceName ?? (fu.sourceType ?? '—')}
+                <div className="fu-source-cell">
+                  {fu.sourceName ?? (fu.sourceType ?? '—')}
+                </div>
               </div>
-            </div>
-          ))}
-        </div>
-      )}
+            ))}
+          </div>
+        )}
 
-      {/* Person picker for new follow-up */}
-      {showPersonPicker && (
-        <div
-          style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.6)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000 }}
-          onClick={() => setShowPersonPicker(false)}
-        >
-          <div
-            style={{ background: 'var(--surf-2)', border: '1px solid var(--border-2)', borderRadius: '8px', padding: '20px', width: '320px', display: 'flex', flexDirection: 'column', gap: '12px' }}
-            onClick={e => e.stopPropagation()}
-          >
-            <div>
-              <span style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-1)' }}>Who is this follow-up for?</span>
-              <p style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)', marginTop: '4px' }}>Select a person to continue</p>
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', maxHeight: '300px', overflowY: 'auto' }}>
-              {loading ? (
-                <p style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)', padding: '8px 0' }}>Loading...</p>
-              ) : people.length === 0 ? (
-                <p style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)', padding: '8px 0' }}>No active people found.</p>
-              ) : people.map(p => (
-                <button
-                  key={p.id}
-                  onClick={() => { setAddingFor(p); setShowPersonPicker(false) }}
-                  style={{ background: 'var(--surf-3)', border: '1px solid var(--border-2)', borderRadius: '4px', color: 'var(--text-1)', fontSize: 'var(--text-meta)', padding: '8px 12px', cursor: 'pointer', textAlign: 'left', fontFamily: 'var(--font-sans)' }}
-                >
-                  {p.name} {p.role && <span style={{ color: 'var(--text-3)' }}>· {p.role}</span>}
-                </button>
-              ))}
+        {/* Person picker for new follow-up */}
+        {showPersonPicker && (
+          <div className="fu-picker-overlay" onClick={() => setShowPersonPicker(false)}>
+            <div className="fu-picker-card" onClick={e => e.stopPropagation()}>
+              <div>
+                <span className="fu-picker-title">Who is this follow-up for?</span>
+                <p className="fu-picker-sub">Select a person to continue</p>
+              </div>
+              <div className="fu-picker-list">
+                {loading ? (
+                  <p className="fu-picker-loading">Loading...</p>
+                ) : people.length === 0 ? (
+                  <p className="fu-picker-empty">No active people found.</p>
+                ) : people.map(p => (
+                  <button
+                    key={p.id}
+                    onClick={() => { setAddingFor(p); setShowPersonPicker(false) }}
+                    className="fu-picker-btn"
+                  >
+                    {p.name} {p.role && <span className="fu-picker-btn-role">· {p.role}</span>}
+                  </button>
+                ))}
+              </div>
             </div>
           </div>
-        </div>
-      )}
+        )}
 
-      {addingFor && (
-        <FollowUpForm
-          personId={addingFor.id}
-          personName={addingFor.name}
-          sourceType="manual"
-          onSaved={() => { setAddingFor(null); load() }}
-          onCancel={() => setAddingFor(null)}
-        />
-      )}
-    </div>
+        {addingFor && (
+          <FollowUpForm
+            personId={addingFor.id}
+            personName={addingFor.name}
+            sourceType="manual"
+            onSaved={() => { setAddingFor(null); load() }}
+            onCancel={() => setAddingFor(null)}
+          />
+        )}
+      </div>
     </>
   )
 }
diff --git a/app/(dashboard)/framework/page.tsx b/app/(dashboard)/framework/page.tsx
index 85165c9..88e2bd7 100644
--- a/app/(dashboard)/framework/page.tsx
+++ b/app/(dashboard)/framework/page.tsx
@@ -49,7 +49,7 @@ function SortableArea({
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } =
     useSortable({ id: area.id })
 
-  const style = {
+  const dndStyle = {
     transform: CSS.Transform.toString(transform),
     transition,
     opacity: isDragging ? 0.5 : 1,
@@ -58,27 +58,18 @@ function SortableArea({
   const levelMap = Object.fromEntries(levels.map(l => [l.level, l.expectations]))
 
   return (
-    <div
-      ref={setNodeRef}
-      style={{
-        ...style,
-        background: "var(--surf)",
-        border: "1px solid var(--border-1)",
-        borderRadius: "6px",
-        marginBottom: "8px",
-      }}
-    >
+    <div ref={setNodeRef} style={dndStyle} className="fw-area-card">
       {/* Area header row */}
-      <div style={{ display: "flex", alignItems: "center", gap: "8px", padding: "10px 12px" }}>
+      <div className="fw-area-header">
         <button
           {...attributes}
           {...listeners}
-          style={{ background: "none", border: "none", cursor: "grab", color: "var(--text-3)", padding: "2px", flexShrink: 0 }}
+          className="fw-drag-btn"
           aria-label="Drag to reorder"
         >
           <GripVertical style={{ width: "14px", height: "14px" }} />
         </button>
-        <button onClick={onToggle} style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-3)", padding: "2px", flexShrink: 0 }}>
+        <button onClick={onToggle} className="fw-toggle-btn">
           {expanded
             ? <ChevronDown style={{ width: "14px", height: "14px" }} />
             : <ChevronRight style={{ width: "14px", height: "14px" }} />}
@@ -87,16 +78,12 @@ function SortableArea({
           value={area.name}
           onChange={e => onNameChange(e.target.value)}
           onBlur={onNameBlur}
-          style={{
-            flex: 1, background: "none", border: "none", outline: "none",
-            fontSize: "var(--text-body)", fontWeight: 500, color: "var(--text-1)",
-            fontFamily: "var(--font-sans)",
-          }}
+          className="fw-area-name-input"
           placeholder="Area name"
         />
         <button
           onClick={onDelete}
-          style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-3)", padding: "4px", flexShrink: 0 }}
+          className="fw-delete-btn"
           onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = "#f87171")}
           onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-3)")}
           aria-label="Delete area"
@@ -107,9 +94,9 @@ function SortableArea({
 
       {/* Expanded body */}
       {expanded && (
-        <div style={{ padding: "0 12px 16px 40px", borderTop: "1px solid var(--border-1)" }}>
+        <div className="fw-area-body">
           {/* Description */}
-          <div style={{ paddingTop: "12px", marginBottom: "16px" }}>
+          <div className="fw-area-desc-wrap">
             <Label style={{ marginBottom: "4px", display: "block" }}>Description</Label>
             <Input
               value={area.description ?? ""}
@@ -120,11 +107,11 @@ function SortableArea({
           </div>
 
           {/* Level expectations grid */}
-          <div style={{ display: "grid", gap: "12px" }}>
+          <div className="fw-area-levels">
             <Label>Level Expectations</Label>
             {LEVELS.map(level => (
-              <div key={level} style={{ display: "grid", gap: "4px" }}>
-                <label style={{ fontSize: "var(--text-label)", color: "var(--text-3)", fontWeight: 500 }}>
+              <div key={level} className="fw-area-level-field">
+                <label className="fw-area-level-label">
                   {level}
                 </label>
                 <div onBlur={() => onLevelBlur(level)}>
@@ -292,16 +279,16 @@ export default function FrameworkPage() {
   // ─────────────────────────────────────────────────────────────────────────
 
   if (loading) {
-    return <div style={{ padding: "32px" }}><p style={{ color: "var(--text-3)" }}>Loading…</p></div>
+    return <div className="fw-loading"><p>Loading…</p></div>
   }
 
   if (setupMode) {
     return (
-      <div style={{ padding: "32px", maxWidth: "720px" }}>
+      <div className="fw-setup">
         <h1 style={{ marginBottom: "4px" }}>Career Framework</h1>
         <p style={{ marginBottom: "32px" }}>Define what "good" looks like at each level. Use a template to get started, or build from scratch.</p>
 
-        <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "24px", marginBottom: "24px" }}>
+        <div className="fw-setup-card">
           <Label style={{ display: "block", marginBottom: "8px" }}>Framework name</Label>
           <Input
             value={newFrameworkName}
@@ -310,22 +297,18 @@ export default function FrameworkPage() {
             style={{ maxWidth: "360px", marginBottom: "20px" }}
           />
 
-          <p style={{ fontSize: "var(--text-label)", color: "var(--text-3)", marginBottom: "12px" }}>Start from a template:</p>
-          <div style={{ display: "grid", gap: "8px", marginBottom: "20px" }}>
+          <p className="fw-setup-templates-label">Start from a template:</p>
+          <div className="fw-setup-templates">
             {FRAMEWORK_TEMPLATES.map((t, i) => (
               <button
                 key={i}
                 onClick={() => handleApplyTemplate(i)}
-                style={{
-                  display: "flex", flexDirection: "column", alignItems: "flex-start",
-                  padding: "12px 16px", border: "1px solid var(--border-2)", borderRadius: "6px",
-                  background: "var(--surf-2)", cursor: "pointer", textAlign: "left",
-                }}
+                className="fw-template-btn"
                 onMouseEnter={e => ((e.currentTarget as HTMLElement).style.borderColor = "#00f05860")}
                 onMouseLeave={e => ((e.currentTarget as HTMLElement).style.borderColor = "var(--border-2)")}
               >
-                <span style={{ fontWeight: 600, color: "var(--text-1)", fontSize: "var(--text-body)" }}>{t.name}</span>
-                <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginTop: "2px" }}>
+                <span className="fw-template-name">{t.name}</span>
+                <span className="fw-template-count">
                   {t.areas.length} competency areas
                 </span>
               </button>
@@ -335,13 +318,8 @@ export default function FrameworkPage() {
           <button
             onClick={handleCreateBlank}
             disabled={!newFrameworkName.trim()}
-            style={{
-              background: "none", border: "1px solid var(--border-2)", borderRadius: "4px",
-              color: "var(--text-2)", fontSize: "var(--text-label)", padding: "6px 14px",
-              cursor: newFrameworkName.trim() ? "pointer" : "not-allowed",
-              opacity: newFrameworkName.trim() ? 1 : 0.4,
-              fontFamily: "var(--font-sans)",
-            }}
+            className="fw-blank-btn"
+            style={{ opacity: newFrameworkName.trim() ? 1 : 0.4, cursor: newFrameworkName.trim() ? "pointer" : "not-allowed" }}
           >
             Start blank
           </button>
@@ -349,17 +327,12 @@ export default function FrameworkPage() {
 
         {allFrameworks.filter(f => f.status === 'archived').length > 0 && (
           <div>
-            <p style={{ fontSize: "var(--text-label)", color: "var(--text-3)", marginBottom: "8px" }}>Archived frameworks:</p>
+            <p className="fw-archived-label">Archived frameworks:</p>
             {allFrameworks.filter(f => f.status === 'archived').map(f => (
               <button
                 key={f.id}
                 onClick={async () => { await updateFramework(f.id, { status: 'active' }); await loadFramework() }}
-                style={{
-                  display: "flex", alignItems: "center", gap: "6px",
-                  background: "none", border: "1px solid var(--border-2)", borderRadius: "4px",
-                  color: "var(--text-2)", fontSize: "var(--text-label)", padding: "5px 10px",
-                  cursor: "pointer", fontFamily: "var(--font-sans)",
-                }}
+                className="fw-restore-btn"
               >
                 <RotateCcw style={{ width: "11px", height: "11px" }} /> Restore "{f.name}"
               </button>
@@ -373,42 +346,33 @@ export default function FrameworkPage() {
   if (!framework) return null
 
   return (
-    <div style={{ padding: "32px", maxWidth: "860px" }}>
+    <div className="fw-page">
       {/* Header */}
-      <div style={{ marginBottom: "28px" }}>
-        <div style={{ display: "flex", alignItems: "center", gap: "12px", marginBottom: "4px", flexWrap: "wrap" }}>
+      <div className="fw-header">
+        <div className="fw-header-row">
           <input
             value={framework.name}
             onChange={e => setFramework({ ...framework, name: e.target.value })}
             onBlur={handleFrameworkNameBlur}
-            style={{
-              fontSize: "var(--text-h1)", fontWeight: 700, background: "none", border: "none",
-              outline: "none", color: "var(--text-1)", fontFamily: "var(--font-sans)", flex: 1, minWidth: "200px",
-            }}
+            className="fw-name-input"
           />
-          <span style={{
-            padding: "2px 8px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600,
-            background: framework.status === 'active' ? "#0d2015" : "#222",
-            color: framework.status === 'active' ? "#4ade80" : "#888",
-            border: `1px solid ${framework.status === 'active' ? "#4ade8040" : "#44444440"}`,
-          }}>
-            {framework.status === 'active' ? 'Active' : 'Archived'}
-          </span>
-          <button
-            onClick={handleArchive}
+          <span
+            className="fw-status-badge"
             style={{
-              display: "flex", alignItems: "center", gap: "5px", background: "none",
-              border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-3)",
-              fontSize: "var(--text-label)", padding: "4px 10px", cursor: "pointer",
-              fontFamily: "var(--font-sans)",
+              background: framework.status === 'active' ? "#0d2015" : "#222",
+              color: framework.status === 'active' ? "#4ade80" : "#888",
+              border: `1px solid ${framework.status === 'active' ? "#4ade8040" : "#44444440"}`,
             }}
           >
+            {framework.status === 'active' ? 'Active' : 'Archived'}
+          </span>
+          <button onClick={handleArchive} className="fw-archive-btn">
             {framework.status === 'active'
               ? <><Archive style={{ width: "11px", height: "11px" }} /> Archive</>
               : <><RotateCcw style={{ width: "11px", height: "11px" }} /> Restore</>}
           </button>
         </div>
-        <p style={{ color: "var(--text-3)", fontSize: "var(--text-caption)" }}>
+        <p className="fw-header-sub">
           {areas.length} competency area{areas.length !== 1 ? 's' : ''}. Changes auto-save on blur.
         </p>
       </div>
@@ -443,23 +407,18 @@ export default function FrameworkPage() {
       </DndContext>
 
       {areas.length === 0 && (
-        <div style={{ textAlign: "center", padding: "48px 24px", border: "1px dashed var(--border-2)", borderRadius: "8px", marginBottom: "16px" }}>
-          <p style={{ color: "var(--text-3)", marginBottom: "12px" }}>No competency areas yet.</p>
+        <div className="fw-empty">
+          <p>No competency areas yet.</p>
         </div>
       )}
 
       {Object.values(saving).some(Boolean) && (
-        <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginBottom: "8px" }}>Saving…</p>
+        <p className="fw-saving">Saving…</p>
       )}
 
       <button
         onClick={handleAddArea}
-        style={{
-          display: "flex", alignItems: "center", gap: "5px",
-          background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px",
-          color: "var(--text-2)", fontSize: "var(--text-label)", padding: "6px 14px",
-          cursor: "pointer", fontFamily: "var(--font-sans)",
-        }}
+        className="fw-add-area-btn"
         onMouseEnter={e => ((e.currentTarget as HTMLElement).style.borderColor = "#00f05860")}
         onMouseLeave={e => ((e.currentTarget as HTMLElement).style.borderColor = "var(--border-2)")}
       >
diff --git a/app/(dashboard)/loading.tsx b/app/(dashboard)/loading.tsx
index 097cc8c..494ed5e 100644
--- a/app/(dashboard)/loading.tsx
+++ b/app/(dashboard)/loading.tsx
@@ -1,8 +1,7 @@
 export default function DashboardLoading() {
   return (
     <div className="flex items-center justify-center min-h-[60vh]">
-      <div className="h-8 w-8 rounded-full border-2 border-t-transparent animate-spin"
-           style={{ borderColor: 'rgb(0,255,229)', borderTopColor: 'transparent' }} />
+      <div className="h-8 w-8 rounded-full border-2 animate-spin spinner-brand" />
     </div>
   )
 }
diff --git a/app/(dashboard)/meetings/page.tsx b/app/(dashboard)/meetings/page.tsx
index 231834d..c859c38 100644
--- a/app/(dashboard)/meetings/page.tsx
+++ b/app/(dashboard)/meetings/page.tsx
@@ -117,7 +117,6 @@ export default function MeetingsPage() {
 
         if (uiMeetings.length > 0) setSelectedMeeting(uiMeetings[0])
 
-        // Open new meeting dialog if navigated with ?new=1
         if (!searchParamsHandled.current && searchParams.get('new') === '1') {
           searchParamsHandled.current = true
           const type = searchParams.get('type') || undefined
@@ -244,7 +243,6 @@ export default function MeetingsPage() {
       setMeetings([uiMeeting, ...meetings])
       setSelectedMeeting(uiMeeting)
 
-      // Offer AI follow-up draft if AI is configured and meeting has notes or action items
       if (aiConfig.configured && (uiMeeting.notes || uiMeeting.actionItems)) {
         setFollowUpDraftMeeting(uiMeeting)
         setShowFollowUpBanner(true)
@@ -403,7 +401,7 @@ export default function MeetingsPage() {
   }, [isResizing])
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+    <div className="mtg-page">
       {/* Top bar */}
       <div className="page-topbar">
         <span className="page-topbar-title">Meetings</span>
@@ -413,69 +411,30 @@ export default function MeetingsPage() {
       </div>
 
       {/* Split panel */}
-      <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
+      <div className="mtg-split">
         {/* Left panel */}
-        <div style={{
-          width: `${leftPanelWidth}px`,
-          background: "var(--surf)",
-          borderRight: "1px solid var(--border-1)",
-          overflowY: "auto",
-          display: "flex",
-          flexDirection: "column",
-          flexShrink: 0,
-        }}>
+        <div className="mtg-left" style={{ width: `${leftPanelWidth}px` }}>
           {/* Panel header */}
-          <div style={{
-            padding: "10px 12px",
-            borderBottom: "1px solid var(--border-1)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}>
-            <span style={{ fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)" }}>All meetings</span>
-            <div style={{ display: "flex", gap: "2px" }}>
-              <button
-                onClick={expandAll}
-                title="Expand all"
-                style={{ background: "none", border: "none", color: "var(--text-3)", cursor: "pointer", padding: "2px" }}
-                onMouseEnter={e => (e.currentTarget.style.color = "var(--text-2)")}
-                onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
-              >
+          <div className="mtg-left-header">
+            <span className="mtg-left-header-title">All meetings</span>
+            <div className="mtg-left-header-btns">
+              <button onClick={expandAll} title="Expand all" className="mtg-expand-btn">
                 <ChevronsDown style={{ width: "11px", height: "11px" }} />
               </button>
-              <button
-                onClick={collapseAll}
-                title="Collapse all"
-                style={{ background: "none", border: "none", color: "var(--text-3)", cursor: "pointer", padding: "2px" }}
-                onMouseEnter={e => (e.currentTarget.style.color = "var(--text-2)")}
-                onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
-              >
+              <button onClick={collapseAll} title="Collapse all" className="mtg-expand-btn">
                 <ChevronsRight style={{ width: "11px", height: "11px" }} />
               </button>
             </div>
           </div>
 
           {/* Tree */}
-          <div style={{ padding: "4px 0" }}>
+          <div className="mtg-tree">
             {Object.entries(tree).map(([type, node]) => (
               <div key={type}>
-                {/* Group header */}
+                {/* L1 — meeting type */}
                 <button
                   onClick={() => toggleType(type)}
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "5px",
-                    padding: "6px 12px",
-                    fontSize: "var(--tree-l1-size)",
-                    fontWeight: "var(--tree-l1-weight)" as React.CSSProperties["fontWeight"],
-                    color: "var(--tree-l1-color)",
-                    background: "none",
-                    border: "none",
-                    cursor: "pointer",
-                    width: "100%",
-                    textAlign: "left",
-                  }}
+                  className="mtg-tree-l1-btn"
                   onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = "var(--surf-2)")}
                   onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = "none")}
                 >
@@ -493,20 +452,7 @@ export default function MeetingsPage() {
                       <div key={personName}>
                         <button
                           onClick={() => togglePerson(personName)}
-                          style={{
-                            padding: "4px 12px 2px 24px",
-                            fontSize: "var(--tree-l2-size)",
-                            color: "var(--tree-l2-color)",
-                            fontWeight: "var(--tree-l2-weight)" as React.CSSProperties["fontWeight"],
-                            background: "none",
-                            border: "none",
-                            cursor: "pointer",
-                            width: "100%",
-                            textAlign: "left",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "4px",
-                          }}
+                          className="mtg-tree-l2-btn"
                           onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = "var(--surf-2)")}
                           onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = "none")}
                         >
@@ -522,30 +468,19 @@ export default function MeetingsPage() {
                             <button
                               key={meeting.id}
                               onClick={() => setSelectedMeeting(meeting)}
+                              className="mtg-tree-l3-btn"
                               style={{
-                                padding: "5px 12px 5px 32px",
-                                cursor: "pointer",
-                                display: "flex",
-                                flexDirection: "column",
-                                gap: "1px",
                                 background: isActive ? "var(--surf-3)" : "none",
-                                borderTop: "none",
-                                borderRight: "none",
-                                borderBottom: "none",
                                 borderLeft: `2px solid ${isActive ? "#00f058" : "transparent"}`,
-                                width: "100%",
-                                textAlign: "left",
-                              } as React.CSSProperties}
+                              }}
                               onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "var(--surf-2)" }}
                               onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "none" }}
                             >
-                              <span style={{ fontSize: "var(--tree-l3-size)", fontWeight: 500, color: isActive ? "#00f058" : "var(--tree-l2-color)" }}>
+                              <span className="mtg-tree-l3-date" style={{ color: isActive ? "#00f058" : "var(--tree-l2-color)" }}>
                                 {formatDate(meeting.date)}
                               </span>
                               {meeting.title && (
-                                <span style={{ fontSize: "var(--tree-l3-size)", color: "var(--tree-l3-color)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" }}>
-                                  {meeting.title}
-                                </span>
+                                <span className="mtg-tree-l3-title">{meeting.title}</span>
                               )}
                             </button>
                           )
@@ -558,20 +493,7 @@ export default function MeetingsPage() {
                       <div key={teamName}>
                         <button
                           onClick={() => toggleTeam(teamName)}
-                          style={{
-                            padding: "4px 12px 2px 24px",
-                            fontSize: "var(--tree-l2-size)",
-                            color: "var(--tree-l2-color)",
-                            fontWeight: "var(--tree-l2-weight)" as React.CSSProperties["fontWeight"],
-                            background: "none",
-                            border: "none",
-                            cursor: "pointer",
-                            width: "100%",
-                            textAlign: "left",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "4px",
-                          }}
+                          className="mtg-tree-l2-btn"
                           onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = "var(--surf-2)")}
                           onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = "none")}
                         >
@@ -587,30 +509,19 @@ export default function MeetingsPage() {
                             <button
                               key={meeting.id}
                               onClick={() => setSelectedMeeting(meeting)}
+                              className="mtg-tree-l3-btn"
                               style={{
-                                padding: "5px 12px 5px 32px",
-                                cursor: "pointer",
-                                display: "flex",
-                                flexDirection: "column",
-                                gap: "1px",
                                 background: isActive ? "var(--surf-3)" : "none",
-                                borderTop: "none",
-                                borderRight: "none",
-                                borderBottom: "none",
                                 borderLeft: `2px solid ${isActive ? "#00f058" : "transparent"}`,
-                                width: "100%",
-                                textAlign: "left",
-                              } as React.CSSProperties}
+                              }}
                               onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "var(--surf-2)" }}
                               onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "none" }}
                             >
-                              <span style={{ fontSize: "var(--tree-l3-size)", fontWeight: 500, color: isActive ? "#00f058" : "var(--tree-l2-color)" }}>
+                              <span className="mtg-tree-l3-date" style={{ color: isActive ? "#00f058" : "var(--tree-l2-color)" }}>
                                 {formatDate(meeting.date)}
                               </span>
                               {meeting.title && (
-                                <span style={{ fontSize: "var(--tree-l3-size)", color: "var(--tree-l3-color)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" }}>
-                                  {meeting.title}
-                                </span>
+                                <span className="mtg-tree-l3-title">{meeting.title}</span>
                               )}
                             </button>
                           )
@@ -625,30 +536,19 @@ export default function MeetingsPage() {
                         <button
                           key={meeting.id}
                           onClick={() => setSelectedMeeting(meeting)}
+                          className="mtg-tree-flat-btn"
                           style={{
-                            padding: "5px 12px 5px 24px",
-                            cursor: "pointer",
-                            display: "flex",
-                            flexDirection: "column",
-                            gap: "1px",
                             background: isActive ? "var(--surf-3)" : "none",
-                            borderTop: "none",
-                            borderRight: "none",
-                            borderBottom: "none",
                             borderLeft: `2px solid ${isActive ? "#00f058" : "transparent"}`,
-                            width: "100%",
-                            textAlign: "left",
-                          } as React.CSSProperties}
+                          }}
                           onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "var(--surf-2)" }}
                           onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "none" }}
                         >
-                          <span style={{ fontSize: "var(--text-meta)", color: isActive ? "#00f058" : "var(--text-2)" }}>
+                          <span className="mtg-tree-flat-date" style={{ color: isActive ? "#00f058" : "var(--text-2)" }}>
                             {formatDate(meeting.date)}
                           </span>
                           {meeting.title && (
-                            <span style={{ fontSize: "var(--text-meta)", color: "var(--text-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100%" }}>
-                              {meeting.title}
-                            </span>
+                            <span className="mtg-tree-flat-title">{meeting.title}</span>
                           )}
                         </button>
                       )
@@ -662,44 +562,26 @@ export default function MeetingsPage() {
 
         {/* Resizable divider */}
         <div
-          style={{
-            width: "4px",
-            background: isResizing ? "var(--accent)" : "var(--border-1)",
-            cursor: "col-resize",
-            flexShrink: 0,
-            transition: "background 150ms",
-          }}
+          className="mtg-divider"
+          style={{ background: isResizing ? "var(--accent)" : undefined }}
           onMouseDown={handleMouseDown}
           onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = "var(--border-2)")}
           onMouseLeave={e => { if (!isResizing) (e.currentTarget as HTMLElement).style.background = "var(--border-1)" }}
         />
 
         {/* Right panel — meeting detail */}
-        <div style={{ flex: 1, overflowY: "auto", padding: "22px 24px" }}>
+        <div className="mtg-right">
           {selectedMeeting ? (
             <div>
-              {/* Follow-up draft banner — shown after a new meeting is saved with AI configured */}
+              {/* Follow-up draft banner */}
               {showFollowUpBanner && followUpDraftMeeting?.id === selectedMeeting.id && (
-                <div style={{
-                  display: "flex", alignItems: "center", justifyContent: "space-between",
-                  gap: "12px", padding: "10px 14px", marginBottom: "16px",
-                  borderRadius: "6px", border: "1px solid var(--border-2)",
-                  background: "var(--surf-2)",
-                }}>
-                  <p style={{ fontSize: "var(--text-label)", color: "var(--text-2)", margin: 0 }}>
-                    Meeting saved. Draft a follow-up message?
-                  </p>
-                  <div style={{ display: "flex", gap: "6px", flexShrink: 0 }}>
-                    <button
-                      onClick={() => setFollowUpDraftOpen(true)}
-                      style={{ padding: "4px 12px", borderRadius: "4px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)", cursor: "pointer", background: "var(--surf-3)", color: "var(--text-1)", border: "1px solid var(--border-3)", fontWeight: 600 }}
-                    >
+                <div className="mtg-fu-banner">
+                  <p className="mtg-fu-banner-text">Meeting saved. Draft a follow-up message?</p>
+                  <div className="mtg-fu-banner-btns">
+                    <button onClick={() => setFollowUpDraftOpen(true)} className="mtg-fu-draft-btn">
                       Draft message
                     </button>
-                    <button
-                      onClick={() => setShowFollowUpBanner(false)}
-                      style={{ padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)", cursor: "pointer", background: "transparent", color: "var(--text-3)", border: "1px solid var(--border-2)" }}
-                    >
+                    <button onClick={() => setShowFollowUpBanner(false)} className="mtg-fu-dismiss-btn">
                       Dismiss
                     </button>
                   </div>
@@ -707,21 +589,20 @@ export default function MeetingsPage() {
               )}
 
               {/* Title */}
-              <h1 style={{ marginBottom: "4px" }}>
-                {selectedMeeting.title}
-              </h1>
+              <h1 className="mtg-title-mb">{selectedMeeting.title}</h1>
+
               {/* Meta line */}
-              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px", marginBottom: "16px" }}>
+              <div className="mtg-meta-row">
                 <p>
                   {formatDate(selectedMeeting.date)}
                   {selectedMeeting.nextMeetingDate && ` · next ${formatDate(selectedMeeting.nextMeetingDate)}`}
                   {selectedMeeting.attendees.length > 0 && ` · ${selectedMeeting.attendees.join(", ")}`}
                 </p>
                 {selectedMeeting.personId && (
-                  <div style={{ display: "flex", gap: "6px", flexShrink: 0 }}>
+                  <div className="mtg-meta-btns">
                     <button
                       onClick={() => setLogEvidenceOpen(true)}
-                      style={{ display: "inline-flex", alignItems: "center", gap: "4px", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, color: "var(--text-2)", border: "1px solid var(--border-2)", background: "var(--surf-2)", cursor: "pointer", fontFamily: "var(--font-sans)" }}
+                      className="mtg-action-btn"
                       onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-1)")}
                       onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-2)")}
                     >
@@ -729,7 +610,7 @@ export default function MeetingsPage() {
                     </button>
                     <button
                       onClick={() => setTrackFollowUpOpen(true)}
-                      style={{ display: "inline-flex", alignItems: "center", gap: "4px", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, color: "var(--text-2)", border: "1px solid var(--border-2)", background: "var(--surf-2)", cursor: "pointer", fontFamily: "var(--font-sans)" }}
+                      className="mtg-action-btn"
                       onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-1)")}
                       onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-2)")}
                     >
@@ -739,64 +620,54 @@ export default function MeetingsPage() {
                 )}
               </div>
 
-              {/* TL;DR — shown in list view when available */}
+              {/* TL;DR */}
               {selectedMeeting.tldr && (
-                <div style={{
-                  padding: "10px 14px",
-                  marginBottom: "16px",
-                  borderRadius: "6px",
-                  background: "var(--surf-2)",
-                  border: "1px solid var(--border-2)",
-                }}>
-                  <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", fontWeight: 600, display: "block", marginBottom: "4px" }}>
-                    AI Summary
-                  </span>
-                  <p style={{ fontSize: "var(--text-label)", color: "var(--text-2)", lineHeight: 1.5, margin: 0 }}>
-                    {selectedMeeting.tldr}
-                  </p>
+                <div className="mtg-tldr-box">
+                  <span className="mtg-tldr-label">AI Summary</span>
+                  <p className="mtg-tldr-text">{selectedMeeting.tldr}</p>
                 </div>
               )}
 
               {/* Meta fields grid */}
-              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "8px", marginBottom: "16px" }}>
+              <div className="mtg-meta-grid">
                 <div>
                   <div className="form-label">Date</div>
-                  <div style={{ background: "var(--surf-2)", border: "1px solid var(--border-1)", borderRadius: "5px", overflow: "hidden" }}>
+                  <div className="mtg-field-input-wrap">
                     <Input
                       type="date"
                       value={selectedMeeting.date}
                       onChange={(e) => handleUpdateMeeting({ ...selectedMeeting, date: e.target.value })}
-                      style={{ fontSize: "var(--text-meta)", color: "var(--text-1)", background: "transparent", border: "none", padding: "6px 9px" }}
+                      className="mtg-field-input"
                     />
                   </div>
                 </div>
                 {selectedMeeting.type === "1:1" && selectedMeeting.recurrence && selectedMeeting.recurrence !== "none" && selectedMeeting.nextMeetingDate && (
                   <div>
                     <div className="form-label">Next Meeting</div>
-                    <div style={{ background: "var(--surf-2)", border: "1px solid var(--border-1)", borderRadius: "5px", overflow: "hidden" }}>
+                    <div className="mtg-field-input-wrap">
                       <Input
                         type="date"
                         value={selectedMeeting.nextMeetingDate}
                         onChange={(e) => handleUpdateMeeting({ ...selectedMeeting, nextMeetingDate: e.target.value })}
-                        style={{ fontSize: "var(--text-meta)", color: "var(--text-1)", background: "transparent", border: "none", padding: "6px 9px" }}
+                        className="mtg-field-input"
                       />
                     </div>
                   </div>
                 )}
                 <div>
                   <div className="form-label">Title</div>
-                  <div style={{ background: "var(--surf-2)", border: "1px solid var(--border-1)", borderRadius: "5px", overflow: "hidden" }}>
+                  <div className="mtg-field-input-wrap">
                     <Input
                       value={selectedMeeting.title}
                       onChange={(e) => handleUpdateMeeting({ ...selectedMeeting, title: e.target.value })}
                       placeholder="Meeting title"
-                      style={{ fontSize: "var(--text-meta)", color: "var(--text-1)", background: "transparent", border: "none", padding: "6px 9px" }}
+                      className="mtg-field-input"
                     />
                   </div>
                 </div>
                 <div>
                   <div className="form-label">Attendees</div>
-                  <div style={{ background: "var(--surf-2)", border: "1px solid var(--border-1)", borderRadius: "5px", overflow: "hidden" }}>
+                  <div className="mtg-field-input-wrap">
                     <Input
                       value={selectedMeeting.attendees.join(", ")}
                       onChange={(e) => handleUpdateMeeting({
@@ -804,15 +675,15 @@ export default function MeetingsPage() {
                         attendees: e.target.value.split(",").map(a => a.trim()).filter(a => a.length > 0)
                       })}
                       placeholder="Names separated by commas"
-                      style={{ fontSize: "var(--text-meta)", color: "var(--text-1)", background: "transparent", border: "none", padding: "6px 9px" }}
+                      className="mtg-field-input"
                     />
                   </div>
                 </div>
               </div>
 
               {/* Action items */}
-              <div style={{ marginBottom: "16px" }}>
-                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }}>
+              <div className="mtg-actions-section">
+                <div className="mtg-actions-header">
                   <div className="form-section-header" style={{ marginBottom: 0 }}>Action items</div>
                   <AIButton
                     configured={aiConfig.configured}
@@ -824,34 +695,17 @@ export default function MeetingsPage() {
                     showSetupLink={false}
                   />
                 </div>
-                <div style={{
-                  background: "var(--surf-2)",
-                  border: "1px solid var(--border-1)",
-                  borderRadius: "6px",
-                  overflow: "hidden",
-                }}>
+                <div className="mtg-actions-list">
                   {parseActionItems(selectedMeeting.actionItems || "").length > 0 ? (
-                    parseActionItems(selectedMeeting.actionItems || "").map((item, idx, arr) => (
-                      <div key={idx} style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "8px",
-                        padding: "7px 12px",
-                        borderBottom: idx < arr.length - 1 ? "1px solid var(--border-1)" : "none",
-                      }}>
-                        <div style={{
-                          width: "13px",
-                          height: "13px",
-                          borderRadius: "50%",
-                          border: "1.5px solid var(--border-3)",
-                          flexShrink: 0,
-                        }} />
-                        <span style={{ fontSize: "var(--text-label)", color: "var(--text-2)" }}>{item}</span>
+                    parseActionItems(selectedMeeting.actionItems || "").map((item, idx) => (
+                      <div key={idx} className="mtg-action-item">
+                        <div className="mtg-action-item-dot" />
+                        <span className="mtg-action-item-text">{item}</span>
                       </div>
                     ))
                   ) : (
-                    <div style={{ padding: "7px 12px" }}>
-                      <span style={{ fontSize: "var(--text-meta)", color: "var(--text-3)" }}>No action items</span>
+                    <div className="mtg-actions-empty">
+                      <span className="mtg-actions-empty-text">No action items</span>
                     </div>
                   )}
                 </div>
@@ -860,25 +714,11 @@ export default function MeetingsPage() {
               {/* Meeting notes */}
               <div>
                 <div className="form-section-header">Meeting notes</div>
-                <div style={{
-                  background: "var(--surf-2)",
-                  border: "1px solid var(--border-1)",
-                  borderRadius: "6px",
-                  overflow: "hidden",
-                }}>
+                <div className="mtg-notes-editor">
                   {/* Toolbar */}
-                  <div style={{ display: "flex", gap: "2px", padding: "6px 8px", borderBottom: "1px solid var(--border-1)" }}>
+                  <div className="mtg-notes-toolbar">
                     {["B", "I", "H1", "H2", "H3", "≡", "</>", "⊞"].map((label) => (
-                      <button key={label} style={{
-                        background: "transparent",
-                        border: "1px solid var(--border-2)",
-                        color: "var(--text-3)",
-                        borderRadius: "3px",
-                        padding: "2px 7px",
-                        fontSize: "var(--text-caption)",
-                        cursor: "pointer",
-                        fontFamily: "var(--font-sans)",
-                      }}
+                      <button key={label} className="mtg-notes-toolbar-btn"
                         onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
                         onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
                       >
@@ -887,19 +727,19 @@ export default function MeetingsPage() {
                     ))}
                   </div>
                   {/* Body */}
-                  <div style={{ padding: "12px 14px", fontSize: "var(--text-label)", color: "var(--text-2)", lineHeight: 1.75 }}>
+                  <div className="mtg-notes-body">
                     {selectedMeeting.notes ? (
                       <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(selectedMeeting.notes) }} />
                     ) : (
-                      <span style={{ color: "var(--text-3)" }}>Meeting notes, discussion points, decisions...</span>
+                      <span className="mtg-notes-empty">Meeting notes, discussion points, decisions...</span>
                     )}
                   </div>
                 </div>
               </div>
             </div>
           ) : (
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
-              <p style={{ color: "var(--text-3)" }}>Select a meeting to view details</p>
+            <div className="mtg-right-empty">
+              <p className="mtg-right-empty-text">Select a meeting to view details</p>
             </div>
           )}
         </div>
diff --git a/app/(dashboard)/people/[id]/page.tsx b/app/(dashboard)/people/[id]/page.tsx
index dfedd3d..6281a31 100644
--- a/app/(dashboard)/people/[id]/page.tsx
+++ b/app/(dashboard)/people/[id]/page.tsx
@@ -74,7 +74,7 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
   const [showPrepBadge, setShowPrepBadge] = useState(false)
   const aiConfig = useAIConfig()
 
-  const { signals, score, loading: signalsLoading } = usePersonSignals(personId ?? '')
+  const { signals, score } = usePersonSignals(personId ?? '')
 
   useEffect(() => {
     params.then(({ id }) => setPersonId(id))
@@ -144,7 +144,7 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
 
   if (!formData) {
     return (
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
+      <div className="person-not-found">
         <p>Person not found</p>
       </div>
     )
@@ -276,29 +276,21 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
     }
   }
 
-  const dualListStyle = { border: "1px solid var(--border-2)", borderRadius: "4px", height: "192px", overflowY: "auto" as const, background: "var(--surf-2)" }
-  const dualLabelStyle = { fontSize: "var(--text-label)", color: "var(--text-3)", display: "block", marginBottom: "4px" }
-
   return (
-    <div style={{ padding: "32px" }}>
+    <div className="person-page">
       {/* Header */}
-      <div style={{ marginBottom: "24px" }}>
-        <button
-          onClick={handleCancel}
-          style={{ display: "inline-flex", alignItems: "center", gap: "6px", background: "none", border: "none", color: "var(--text-2)", cursor: "pointer", fontSize: "var(--text-label)", marginBottom: "16px", padding: "4px 0" }}
-          onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-          onMouseLeave={e => (e.currentTarget.style.color = "var(--text-2)")}
-        >
-          <ArrowLeft style={{ width: "14px", height: "14px" }} /> Back to People
+      <div className="person-header">
+        <button className="person-back-btn" onClick={handleCancel}>
+          <ArrowLeft /> Back to People
         </button>
-        <div style={{ display: "flex", alignItems: "flex-start", gap: "14px", flexWrap: "wrap" }}>
+        <div className="person-title-row">
           <div>
             <h1>{formData.name}</h1>
-            <p style={{ marginTop: "2px" }}>{formData.role}</p>
+            <p className="person-role-sub">{formData.role}</p>
           </div>
           {/* Attention indicator */}
-          {!signalsLoading && score > 0 && (
-            <div style={{ marginTop: "4px", display: "flex", flexDirection: "column", gap: "4px" }}>
+          {signals.length > 0 && (
+            <div className="person-signals-col">
               <span style={{
                 fontSize: "var(--text-caption)",
                 fontWeight: 600,
@@ -309,27 +301,22 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
                 padding: "3px 8px",
                 whiteSpace: "nowrap",
               }}>
-                Needs attention ({score})
+                {signals.length} thing{signals.length === 1 ? '' : 's'} to action
               </span>
-              {signals.slice(0, 3).map((s, i) => (
-                <div key={i} style={{ display: "flex", alignItems: "center", gap: "5px" }}>
+              {signals.map((s, i) => (
+                <div key={i} className="person-signal-row">
                   {s.severity === "critical"
-                    ? <AlertCircle style={{ width: "11px", height: "11px", color: "#ff6b6b", flexShrink: 0 }} />
+                    ? <AlertCircle className="person-signal-icon" style={{ color: "#ff6b6b" }} />
                     : s.severity === "warning"
-                    ? <AlertTriangle style={{ width: "11px", height: "11px", color: "#ffa94d", flexShrink: 0 }} />
-                    : <Info style={{ width: "11px", height: "11px", color: "var(--text-3)", flexShrink: 0 }} />
+                    ? <AlertTriangle className="person-signal-icon" style={{ color: "#ffa94d" }} />
+                    : <Info className="person-signal-icon" style={{ color: "var(--text-3)" }} />
                   }
-                  <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>{s.message}</span>
+                  <span className="person-signal-msg">{s.message}</span>
                   {s.meta?.isNewHire === true && (
-                    <span style={{ fontSize: "10px", fontWeight: 600, padding: "1px 5px", borderRadius: "3px", background: "rgba(0,240,88,0.12)", color: "#00f058", border: "1px solid rgba(0,240,88,0.3)", whiteSpace: "nowrap", flexShrink: 0 }}>
-                      New hire
-                    </span>
+                    <span className="person-newhire-badge">New hire</span>
                   )}
                 </div>
               ))}
-              {signals.length > 3 && (
-                <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>+{signals.length - 3} more</span>
-              )}
             </div>
           )}
           {/* Onboarding progress bar — visible for first 90 days */}
@@ -337,13 +324,13 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
             const daysIn = daysBetween(new Date(formData.startDate + 'T00:00:00'), new Date())
             const pct = Math.min(100, Math.round((daysIn / NEW_HIRE_WINDOW_DAYS) * 100))
             return (
-              <div style={{ marginTop: "8px", minWidth: "160px" }}>
-                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }}>
-                  <span style={{ fontSize: "10px", fontWeight: 600, color: "#00f058", textTransform: "uppercase", letterSpacing: "0.04em" }}>Onboarding</span>
-                  <span style={{ fontSize: "10px", color: "var(--text-3)" }}>Day {daysIn} / {NEW_HIRE_WINDOW_DAYS}</span>
+              <div className="person-onboarding-wrap">
+                <div className="person-onboarding-header">
+                  <span className="person-onboarding-label">Onboarding</span>
+                  <span className="person-onboarding-days">Day {daysIn} / {NEW_HIRE_WINDOW_DAYS}</span>
                 </div>
-                <div style={{ height: "4px", borderRadius: "2px", background: "var(--border-1)", overflow: "hidden" }}>
-                  <div style={{ height: "100%", width: `${pct}%`, borderRadius: "2px", background: "linear-gradient(90deg, hsl(174,100%,50%), hsl(142,100%,47%))", transition: "width 0.3s ease" }} />
+                <div className="person-onboarding-bar-track">
+                  <div className="person-onboarding-bar-fill" style={{ width: `${pct}%` }} />
                 </div>
               </div>
             )
@@ -352,21 +339,21 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
       </div>
 
       {/* Profile card */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "24px", marginBottom: "24px" }}>
-        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "24px" }}>
+      <div className="person-profile-card">
+        <div className="person-profile-grid">
           {/* Left column */}
-          <div style={{ display: "grid", gap: "16px" }}>
-            <div style={{ display: "grid", gap: "6px" }}>
+          <div className="person-profile-left">
+            <div className="person-profile-field">
               <Label htmlFor="name">Name *</Label>
               <Input id="name" value={formData.name} onChange={(e) => setFormData({ ...formData, name: e.target.value })} placeholder="e.g. Sarah Miller" required />
             </div>
-            <div style={{ display: "grid", gap: "6px" }}>
+            <div className="person-profile-field">
               <Label htmlFor="role">Role *</Label>
               <Input id="role" value={formData.role ?? ''} onChange={(e) => setFormData({ ...formData, role: e.target.value })} placeholder="e.g. Senior Software Engineer" required />
             </div>
-            <div style={{ display: "grid", gap: "6px" }}>
+            <div className="person-profile-field">
               <Label>Seniority Level</Label>
-              <div style={{ display: "flex", flexWrap: "wrap", gap: "6px" }}>
+              <div className="person-level-btns">
                 {(Object.keys(LEVEL_BADGE) as Array<keyof typeof LEVEL_BADGE>).map((label) => {
                   const { bg, color } = LEVEL_BADGE[label]
                   const isOther = label === "Other"
@@ -390,48 +377,60 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
               </div>
               <Input id="level" value={formData.level ?? ''} onChange={(e) => setFormData({ ...formData, level: e.target.value })} placeholder="Or type custom level" />
             </div>
-            <div style={{ display: "grid", gap: "6px" }}>
+            <div className="person-profile-field">
               <Label htmlFor="startDate">Start Date</Label>
               <Input id="startDate" type="date" value={formData.startDate ?? ''} onChange={(e) => setFormData({ ...formData, startDate: e.target.value })} />
             </div>
 
             {/* Teams dual-list */}
-            <div style={{ display: "grid", gap: "6px" }}>
+            <div className="person-profile-field">
               <Label>Teams</Label>
-              <div style={{ display: "flex", gap: "12px", alignItems: "center" }}>
-                <div style={{ flex: 1 }}>
-                  <label style={dualLabelStyle}>Available Teams</label>
-                  <div style={dualListStyle}>
+              <div className="dual-list-row">
+                <div className="dual-list-col">
+                  <label className="dual-list-label">Available Teams</label>
+                  <div className="dual-list-box">
                     {availableTeamsList.length > 0 ? availableTeamsList.map((team) => (
-                      <div key={team.id} onClick={() => toggleAvailableSelection(team.id!)} onDoubleClick={() => handleDoubleClickAvailable(team.id!)} className="dual-list-item"
-                        style={{ padding: "6px 12px", fontSize: "var(--text-label)", cursor: "pointer", userSelect: "none", color: selectedAvailable.includes(team.id!) ? "#111" : "var(--text-2)", borderLeft: selectedAvailable.includes(team.id!) ? "2px solid #00f058" : "2px solid transparent" }}>
+                      <div key={team.id}
+                        onClick={() => toggleAvailableSelection(team.id!)}
+                        onDoubleClick={() => handleDoubleClickAvailable(team.id!)}
+                        className="dual-list-item"
+                        style={{
+                          color: selectedAvailable.includes(team.id!) ? "#111" : "var(--text-2)",
+                          borderLeft: selectedAvailable.includes(team.id!) ? "2px solid #00f058" : "2px solid transparent",
+                        }}
+                      >
                         {team.name}
                       </div>
                     )) : (
-                      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontSize: "var(--text-label)", color: "var(--text-3)" }}>All teams assigned</div>
+                      <div className="dual-list-empty">All teams assigned</div>
                     )}
                   </div>
                 </div>
-                <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-                  <button type="button" onClick={handleAddToTeams} disabled={selectedAvailable.length === 0}
-                    style={{ width: "32px", height: "32px", borderRadius: "4px", border: "1px solid var(--border-2)", background: "var(--surf-2)", color: "var(--text-2)", cursor: selectedAvailable.length === 0 ? "not-allowed" : "pointer", opacity: selectedAvailable.length === 0 ? 0.4 : 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                    <ChevronRight style={{ width: "16px", height: "16px" }} />
+                <div className="dual-list-arrows">
+                  <button type="button" onClick={handleAddToTeams} disabled={selectedAvailable.length === 0} className="dual-list-arrow-btn">
+                    <ChevronRight />
                   </button>
-                  <button type="button" onClick={handleRemoveFromTeams} disabled={selectedTeamMembers.length === 0}
-                    style={{ width: "32px", height: "32px", borderRadius: "4px", border: "1px solid var(--border-2)", background: "var(--surf-2)", color: "var(--text-2)", cursor: selectedTeamMembers.length === 0 ? "not-allowed" : "pointer", opacity: selectedTeamMembers.length === 0 ? 0.4 : 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
-                    <ChevronLeft style={{ width: "16px", height: "16px" }} />
+                  <button type="button" onClick={handleRemoveFromTeams} disabled={selectedTeamMembers.length === 0} className="dual-list-arrow-btn">
+                    <ChevronLeft />
                   </button>
                 </div>
-                <div style={{ flex: 1 }}>
-                  <label style={dualLabelStyle}>Assigned Teams ({assignedTeamsList.length})</label>
-                  <div style={dualListStyle}>
+                <div className="dual-list-col">
+                  <label className="dual-list-label">Assigned Teams ({assignedTeamsList.length})</label>
+                  <div className="dual-list-box">
                     {assignedTeamsList.length > 0 ? assignedTeamsList.map((team) => (
-                      <div key={team.id} onClick={() => toggleTeamMemberSelection(team.id!)} onDoubleClick={() => handleDoubleClickTeamMember(team.id!)} className="dual-list-item"
-                        style={{ padding: "6px 12px", fontSize: "var(--text-label)", cursor: "pointer", userSelect: "none", color: selectedTeamMembers.includes(team.id!) ? "#111" : "var(--text-2)", borderLeft: selectedTeamMembers.includes(team.id!) ? "2px solid #00f058" : "2px solid transparent" }}>
+                      <div key={team.id}
+                        onClick={() => toggleTeamMemberSelection(team.id!)}
+                        onDoubleClick={() => handleDoubleClickTeamMember(team.id!)}
+                        className="dual-list-item"
+                        style={{
+                          color: selectedTeamMembers.includes(team.id!) ? "#111" : "var(--text-2)",
+                          borderLeft: selectedTeamMembers.includes(team.id!) ? "2px solid #00f058" : "2px solid transparent",
+                        }}
+                      >
                         {team.name}
                       </div>
                     )) : (
-                      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontSize: "var(--text-label)", color: "var(--text-3)" }}>No teams assigned</div>
+                      <div className="dual-list-empty">No teams assigned</div>
                     )}
                   </div>
                 </div>
@@ -440,7 +439,7 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
           </div>
 
           {/* Right column — notes */}
-          <div style={{ display: "flex", flexDirection: "column" }}>
+          <div className="person-profile-right">
             <Label style={{ marginBottom: "8px" }}>Notes</Label>
             <div style={{ flex: 1 }}>
               <MarkdownTextarea value={formData.notes || ""} onValueChange={(value) => setFormData({ ...formData, notes: value })} placeholder="Any additional notes about this person..." className="h-full resize-none" />
@@ -448,57 +447,54 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
           </div>
         </div>
 
-        <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "24px" }}>
+        <div className="person-profile-actions">
           <Button type="button" variant="outline" onClick={handleCancel}>Cancel</Button>
           <Button onClick={handleSave}>Save Changes</Button>
         </div>
       </div>
 
       {/* Meetings section */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", overflow: "hidden" }}>
-        <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-1)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+      <div className="person-meetings-card">
+        <div className="person-meetings-header">
           <div>
             <h2>Meetings</h2>
-            <p style={{ marginTop: "2px" }}>All meetings involving {formData.name}</p>
+            <p className="person-meetings-title-sub">All meetings involving {formData.name}</p>
           </div>
-          <button
-            onClick={() => setIsAddMeetingDialogOpen(true)}
-            style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)", border: "none", color: "#0a1a0a", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-sans)" }}
-          >
-            <Plus style={{ width: "11px", height: "11px" }} /> Log meeting
+          <button className="person-meetings-log-btn" onClick={() => setIsAddMeetingDialogOpen(true)}>
+            <Plus /> Log meeting
           </button>
         </div>
 
-        <div id="meetings-section" style={{ display: "flex", height: "900px", overflow: "hidden" }}>
+        <div id="meetings-section" className="person-meetings-body">
           {/* Left panel */}
-          <div style={{ width: `${leftPanelWidth}px`, flexShrink: 0, background: "var(--surf-2)", borderRight: "1px solid var(--border-1)", overflowY: "auto" }}>
-            <div style={{ padding: "8px 0" }}>
+          <div className="person-meetings-left" style={{ width: `${leftPanelWidth}px` }}>
+            <div className="person-meetings-left-inner">
               {Object.keys(tree).length === 0 ? (
-                <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "32px 16px", textAlign: "center" }}>
+                <div className="person-meetings-left-empty">
                   <p style={{ marginBottom: "16px" }}>No meetings logged yet</p>
-                  <button onClick={() => setIsAddMeetingDialogOpen(true)}
-                    style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)", border: "none", color: "#0a1a0a", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, cursor: "pointer" }}>
-                    <Plus style={{ width: "11px", height: "11px" }} /> Log First Meeting
+                  <button onClick={() => setIsAddMeetingDialogOpen(true)} className="person-meetings-left-empty-btn">
+                    <Plus /> Log First Meeting
                   </button>
                 </div>
               ) : (
                 Object.entries(tree).map(([type, node]) => (
                   <div key={type}>
-                    <button onClick={() => toggleType(type)}
-                      style={{ display: "flex", alignItems: "center", gap: "6px", width: "100%", padding: "6px 12px", background: "none", border: "none", cursor: "pointer", fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-2)", textAlign: "left" }}
-                      onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = "var(--surf-3)")}
-                      onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = "none")}
-                    >
-                      {expandedTypes.has(type) ? <ChevronDown style={{ width: "12px", height: "12px" }} /> : <ChevronRight style={{ width: "12px", height: "12px" }} />}
+                    <button onClick={() => toggleType(type)} className="person-tree-type-btn">
+                      {expandedTypes.has(type) ? <ChevronDown /> : <ChevronRight />}
                       {type} ({node.meetings.length})
                     </button>
                     {expandedTypes.has(type) && (
-                      <div style={{ paddingLeft: "20px" }}>
+                      <div className="person-tree-meetings">
                         {node.meetings.map((meeting) => {
                           const isActive = selectedMeeting?.id === meeting.id
                           return (
                             <button key={meeting.id} onClick={() => setSelectedMeeting(meeting)}
-                              style={{ display: "block", width: "100%", padding: "5px 12px", background: isActive ? "var(--surf-3)" : "none", borderTop: "none", borderRight: "none", borderBottom: "none", borderLeft: `2px solid ${isActive ? "#00f058" : "transparent"}`, cursor: "pointer", fontSize: "var(--text-caption)", color: isActive ? "#00f058" : "var(--text-3)", textAlign: "left" }}
+                              className="person-tree-meeting-btn"
+                              style={{
+                                background: isActive ? "var(--surf-3)" : "none",
+                                borderLeft: `2px solid ${isActive ? "#00f058" : "transparent"}`,
+                                color: isActive ? "#00f058" : "var(--text-3)",
+                              }}
                               onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "var(--surf-3)" }}
                               onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "none" }}
                             >
@@ -515,22 +511,21 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
           </div>
 
           {/* Resizable divider */}
-          <div style={{ width: "4px", background: "var(--border-1)", cursor: "col-resize", flexShrink: 0 }}
+          <div
+            className="person-meetings-divider"
             onMouseDown={(e) => { e.preventDefault(); setIsResizing(true) }}
-            onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = "var(--border-2)")}
-            onMouseLeave={e => { if (!isResizing) (e.currentTarget as HTMLElement).style.background = "var(--border-1)" }}
           />
 
           {/* Right panel */}
-          <div style={{ flex: 1, overflowY: "auto", padding: "20px 24px" }}>
+          <div className="person-meetings-right">
             {selectedMeeting ? (
-              <div style={{ display: "grid", gap: "16px" }}>
+              <div className="person-meeting-detail">
                 {/* 1:1 Prep Brief */}
                 {selectedMeeting.type === "1:1" && (
-                  <div style={{ background: "var(--surf-2)", border: "1px solid var(--border-1)", borderRadius: "6px", padding: "12px 16px" }}>
-                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: prepBrief ? "12px" : 0 }}>
-                      <span style={{ fontSize: "var(--text-label)", fontWeight: 600, color: "var(--text-2)" }}>1:1 Prep</span>
-                      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                  <div className="person-prep-box">
+                    <div className="person-prep-header" style={{ marginBottom: prepBrief ? "12px" : 0 }}>
+                      <span className="person-prep-label">1:1 Prep</span>
+                      <div className="person-prep-actions">
                         {showPrepBadge && prepBrief && <AIGeneratedBadge onDismiss={() => setShowPrepBadge(false)} />}
                         <AIButton
                           configured={aiConfig.configured}
@@ -544,45 +539,43 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
                       </div>
                     </div>
                     {prepBrief && (
-                      <div style={{ fontSize: "var(--text-label)", color: "var(--text-2)", whiteSpace: "pre-wrap", lineHeight: 1.7 }}>
-                        {prepBrief}
-                      </div>
+                      <div className="person-prep-content">{prepBrief}</div>
                     )}
                   </div>
                 )}
-                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
-                  <div style={{ display: "grid", gap: "4px" }}>
+                <div className="person-meeting-2col">
+                  <div className="person-meeting-field">
                     <Label>Date</Label>
                     <Input type="date" value={selectedMeeting.date} onChange={(e) => handleUpdateMeeting({ ...selectedMeeting, date: e.target.value })} />
                   </div>
                   {selectedMeeting.type === "1:1" && selectedMeeting.recurrence && selectedMeeting.recurrence !== "none" && selectedMeeting.nextMeetingDate && (
-                    <div style={{ display: "grid", gap: "4px" }}>
+                    <div className="person-meeting-field">
                       <Label>Next Meeting</Label>
                       <Input type="date" value={selectedMeeting.nextMeetingDate} onChange={(e) => handleUpdateMeeting({ ...selectedMeeting, nextMeetingDate: e.target.value })} />
                     </div>
                   )}
                 </div>
-                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
-                  <div style={{ display: "grid", gap: "4px" }}>
+                <div className="person-meeting-2col">
+                  <div className="person-meeting-field">
                     <Label>Title</Label>
                     <Input value={selectedMeeting.title} onChange={(e) => handleUpdateMeeting({ ...selectedMeeting, title: e.target.value })} placeholder="Meeting title" />
                   </div>
-                  <div style={{ display: "grid", gap: "4px" }}>
+                  <div className="person-meeting-field">
                     <Label>Attendees</Label>
                     <Input value={selectedMeeting.attendees.join(", ")} onChange={(e) => handleUpdateMeeting({ ...selectedMeeting, attendees: e.target.value.split(",").map(a => a.trim()).filter(a => a.length > 0) })} placeholder="Names separated by commas" />
                   </div>
                 </div>
-                <div style={{ display: "grid", gap: "4px" }}>
+                <div className="person-meeting-field">
                   <Label>Action Items</Label>
                   <MarkdownTextarea value={selectedMeeting.actionItems || ""} onValueChange={(value) => handleUpdateMeeting({ ...selectedMeeting, actionItems: value })} placeholder={"- Action item 1\n- Action item 2"} rows={4} />
                 </div>
-                <div style={{ display: "grid", gap: "4px" }}>
+                <div className="person-meeting-field">
                   <Label>Meeting Notes</Label>
                   <MarkdownTextarea value={selectedMeeting.notes || ""} onValueChange={(value) => handleUpdateMeeting({ ...selectedMeeting, notes: value })} placeholder="Meeting notes, discussion points, decisions..." rows={8} />
                 </div>
               </div>
             ) : (
-              <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", textAlign: "center" }}>
+              <div className="person-meetings-right-empty">
                 <p>Select a meeting to view details</p>
               </div>
             )}
@@ -591,26 +584,11 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
       </div>
 
       {/* Follow-ups section */}
-      <div style={{ marginTop: "24px", background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "20px" }}>
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "14px" }}>
-          <h2 style={{ margin: 0 }}>Follow-ups</h2>
-          <button
-            onClick={() => setAddingFollowUp(true)}
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: "5px",
-              background: "var(--surf-3)",
-              border: "1px solid var(--border-2)",
-              borderRadius: "4px",
-              color: "var(--text-2)",
-              fontSize: "var(--text-meta)",
-              padding: "5px 10px",
-              cursor: "pointer",
-              fontFamily: "var(--font-sans)",
-            }}
-          >
-            <PlusIcon style={{ width: "11px", height: "11px" }} /> Add follow-up
+      <div className="person-followups-card">
+        <div className="person-followups-header">
+          <h2 className="person-followups-title">Follow-ups</h2>
+          <button className="person-followup-add-btn" onClick={() => setAddingFollowUp(true)}>
+            <PlusIcon /> Add follow-up
           </button>
         </div>
         <FollowUpList
@@ -620,12 +598,12 @@ export default function PersonDetailPage({ params }: { params: Promise<{ id: str
       </div>
 
       {/* Sentiment Trend */}
-      <div style={{ marginTop: "24px" }}>
+      <div className="person-section-mt">
         <SentimentTrendChart personId={personId!} days={60} />
       </div>
 
       {/* Evidence section */}
-      <div style={{ marginTop: "24px" }}>
+      <div className="person-section-mt">
         <EvidenceSection personId={personId!} personName={formData.name} allPeople={allPeopleWithIds} />
       </div>
 
diff --git a/app/(dashboard)/people/[id]/review/page.tsx b/app/(dashboard)/people/[id]/review/page.tsx
index 9ef7212..4c9fcce 100644
--- a/app/(dashboard)/people/[id]/review/page.tsx
+++ b/app/(dashboard)/people/[id]/review/page.tsx
@@ -116,7 +116,6 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
     }).catch(console.error)
   }, [personId, periodStart, periodEnd])
 
-  // When a review cycle is selected, sync date range
   useEffect(() => {
     if (selectedCycleId === "custom") return
     const cycle = reviewCycles.find(c => c.id === selectedCycleId)
@@ -229,14 +228,12 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
     setCollapsedSections(s)
   }
 
-  // Period-filtered meetings
   const periodMeetings = useMemo(() =>
     meetings.filter(m => m.meetingDate >= periodStart && m.meetingDate <= periodEnd)
       .sort((a, b) => new Date(b.meetingDate).getTime() - new Date(a.meetingDate).getTime()),
     [meetings, periodStart, periodEnd]
   )
 
-  // Evidence grouped by section
   const impactEntries = useMemo(() =>
     evidence.filter(e => ["achievement", "delivery"].includes(e.category) && e.includedInReview),
     [evidence])
@@ -272,30 +269,25 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
 
   if (!person) {
     return (
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%" }}>
+      <div className="person-not-found">
         <p>Loading...</p>
       </div>
     )
   }
 
   return (
-    <div style={{ padding: "32px", maxWidth: "900px" }} className="review-prep-page">
+    <div className="review-page review-prep-page">
       {/* Header */}
-      <div style={{ marginBottom: "24px" }}>
-        <button
-          onClick={() => router.push(`/people/${personId}`)}
-          style={{ display: "inline-flex", alignItems: "center", gap: "6px", background: "none", border: "none", color: "var(--text-2)", cursor: "pointer", fontSize: "var(--text-label)", marginBottom: "16px", padding: "4px 0" }}
-          onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-          onMouseLeave={e => (e.currentTarget.style.color = "var(--text-2)")}
-        >
-          <ArrowLeft style={{ width: "14px", height: "14px" }} /> Back to {person.name}
+      <div className="review-header">
+        <button className="review-back-btn" onClick={() => router.push(`/people/${personId}`)}>
+          <ArrowLeft /> Back to {person.name}
         </button>
-        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
+        <div className="review-header-row">
           <div>
             <h1>Review Prep — {person.name}</h1>
-            <p style={{ marginTop: "4px" }}>{person.role}</p>
+            <p className="review-sub">{person.role}</p>
           </div>
-          <div style={{ display: "flex", gap: "8px" }}>
+          <div className="review-header-actions">
             <Button variant="outline" onClick={handlePrint}>
               <Printer style={{ width: "14px", height: "14px" }} /> Export
             </Button>
@@ -304,36 +296,35 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
       </div>
 
       {/* Period selector */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "16px 20px", marginBottom: "20px" }}>
-        <div style={{ display: "flex", alignItems: "center", gap: "16px", flexWrap: "wrap" }}>
-          <div style={{ display: "grid", gap: "4px" }}>
+      <div className="review-period-card">
+        <div className="review-period-row">
+          <div className="review-period-field">
             <label className="form-label">Review Cycle</label>
             <select value={selectedCycleId} onChange={e => handleCycleChange(e.target.value)}
-              style={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", color: "var(--text-1)", padding: "6px 10px", fontSize: "var(--text-label)", cursor: "pointer" }}>
+              className="review-period-select">
               <option value="custom">Custom range</option>
               {reviewCycles.map(c => (
                 <option key={c.id} value={c.id}>{c.name} ({formatDate(c.startDate)} – {formatDate(c.endDate)})</option>
               ))}
             </select>
           </div>
-          <div style={{ display: "grid", gap: "4px" }}>
+          <div className="review-period-field">
             <label className="form-label">From</label>
             <Input type="date" value={periodStart} onChange={e => { setPeriodStart(e.target.value); setSelectedCycleId("custom") }} style={{ width: "150px" }} />
           </div>
-          <div style={{ display: "grid", gap: "4px" }}>
+          <div className="review-period-field">
             <label className="form-label">To</label>
             <Input type="date" value={periodEnd} onChange={e => { setPeriodEnd(e.target.value); setSelectedCycleId("custom") }} style={{ width: "150px" }} />
           </div>
-          <div style={{ paddingTop: "18px" }}>
-            <button onClick={() => setShowNewCycleForm(!showNewCycleForm)}
-              style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "none", border: "1px solid var(--border-2)", color: "var(--text-2)", padding: "6px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", cursor: "pointer" }}>
-              <Plus style={{ width: "12px", height: "12px" }} /> Save as cycle
+          <div className="review-period-padtop">
+            <button onClick={() => setShowNewCycleForm(!showNewCycleForm)} className="review-period-save-btn">
+              <Plus /> Save as cycle
             </button>
           </div>
         </div>
         {showNewCycleForm && (
-          <div style={{ display: "flex", gap: "8px", alignItems: "flex-end", marginTop: "12px", paddingTop: "12px", borderTop: "1px solid var(--border-1)" }}>
-            <div style={{ display: "grid", gap: "4px", flex: 1 }}>
+          <div className="review-new-cycle-form">
+            <div className="review-new-cycle-field">
               <label className="form-label">Cycle name</label>
               <Input value={newCycleName} onChange={e => setNewCycleName(e.target.value)} placeholder="e.g. H1 2026, Annual 2025" />
             </div>
@@ -343,11 +334,11 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
             <Button variant="outline" onClick={() => setShowNewCycleForm(false)}>Cancel</Button>
           </div>
         )}
-        <div style={{ marginTop: "12px", paddingTop: "12px", borderTop: "1px solid var(--border-1)", display: "flex", gap: "24px" }}>
-          <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
+        <div className="review-period-stats">
+          <span className="review-period-stat">
             {evidence.length} evidence {evidence.length === 1 ? "entry" : "entries"} in period
           </span>
-          <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
+          <span className="review-period-stat">
             {periodMeetings.length} {periodMeetings.length === 1 ? "meeting" : "meetings"} in period
           </span>
         </div>
@@ -364,12 +355,7 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
         headerExtra={
           <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
             {generatingDraft && draftAbort && (
-              <button
-                onClick={() => draftAbort.abort()}
-                style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", background: "none", border: "none", cursor: "pointer", padding: "2px 6px" }}
-              >
-                Cancel
-              </button>
+              <button className="review-cancel-btn" onClick={() => draftAbort.abort()}>Cancel</button>
             )}
             <AIButton
               configured={aiConfig.configured}
@@ -384,7 +370,7 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
         }
       >
         {showAIBadge && (
-          <div style={{ marginBottom: "10px" }}>
+          <div className="review-ai-badge-wrap">
             <AIGeneratedBadge onDismiss={() => setShowAIBadge(false)} />
           </div>
         )}
@@ -452,7 +438,7 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
         ))}
       </ReviewSection>
 
-      {/* Promotion Evidence — only show if entries exist */}
+      {/* Promotion Evidence */}
       {promotionEntries.length > 0 && (
         <ReviewSection
           title="Promotion Evidence"
@@ -492,25 +478,21 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
         emptyMessage="No meetings found in this period."
       >
         {periodMeetings.map(m => (
-          <div key={m.id} style={{ padding: "12px 16px", border: "1px solid var(--border-1)", borderRadius: "6px", marginBottom: "8px", background: "var(--surf-2)" }}>
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }}>
+          <div key={m.id} className="review-meeting-item">
+            <div className="review-meeting-item-row">
               <div>
-                <p style={{ fontSize: "var(--text-label)", color: "var(--text-1)", fontWeight: 500 }}>{m.title}</p>
-                <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginTop: "2px" }}>
-                  {m.meetingType} · {formatDate(m.meetingDate)}
-                </p>
+                <p className="review-meeting-title">{m.title}</p>
+                <p className="review-meeting-meta">{m.meetingType} · {formatDate(m.meetingDate)}</p>
                 {m.notes && (
-                  <p style={{ fontSize: "var(--text-caption)", color: "var(--text-2)", marginTop: "6px", overflow: "hidden", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical" }}>
-                    {m.notes.replace(/<[^>]*>/g, "")}
-                  </p>
+                  <p className="review-meeting-notes">{m.notes.replace(/<[^>]*>/g, "")}</p>
                 )}
               </div>
               <button
                 onClick={() => handleSaveAsEvidence(m)}
                 disabled={savingEvidenceId === m.id}
-                style={{ flexShrink: 0, display: "inline-flex", alignItems: "center", gap: "4px", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", border: "1px solid var(--border-2)", background: "var(--surf)", color: "var(--text-2)", cursor: savingEvidenceId === m.id ? "not-allowed" : "pointer", opacity: savingEvidenceId === m.id ? 0.6 : 1 }}
+                className="review-save-as-evidence-btn"
               >
-                <Plus style={{ width: "11px", height: "11px" }} />
+                <Plus />
                 {savingEvidenceId === m.id ? "Saving..." : "Save as evidence"}
               </button>
             </div>
@@ -536,7 +518,7 @@ export default function ReviewPrepPage({ params }: { params: Promise<{ id: strin
       </ReviewSection>
 
       {/* Save notes */}
-      <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px", marginTop: "24px", paddingTop: "16px", borderTop: "1px solid var(--border-1)" }}>
+      <div className="review-save-footer">
         <Button onClick={handleSaveNotes} disabled={savingNotes}>
           <Save style={{ width: "14px", height: "14px" }} />
           {savingNotes ? "Saving..." : "Save Notes"}
@@ -571,30 +553,23 @@ function ReviewSection({
   children?: React.ReactNode
 }) {
   return (
-    <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", overflow: "hidden", marginBottom: "12px" }}>
-      <div style={{ display: "flex", alignItems: "center" }}>
-        <button
-          onClick={onToggle}
-          style={{ flex: 1, padding: "14px 20px", display: "flex", alignItems: "center", gap: "8px", background: "none", border: "none", cursor: "pointer", textAlign: "left" }}
-          onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = "var(--surf-2)")}
-          onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = "none")}
-        >
-          {collapsed
-            ? <ChevronRight style={{ width: "14px", height: "14px", color: "var(--text-3)", flexShrink: 0 }} />
-            : <ChevronDown style={{ width: "14px", height: "14px", color: "var(--text-3)", flexShrink: 0 }} />}
-          <h2 style={{ flex: 1 }}>{title}</h2>
-          <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>{count} {count === 1 ? "entry" : "entries"}</span>
+    <div className="review-section-card">
+      <div className="review-section-header-row">
+        <button className="review-section-toggle-btn" onClick={onToggle}>
+          {collapsed ? <ChevronRight /> : <ChevronDown />}
+          <h2 className="review-section-title">{title}</h2>
+          <span className="review-section-count">{count} {count === 1 ? "entry" : "entries"}</span>
         </button>
         {headerExtra && (
-          <div style={{ padding: "0 16px" }} onClick={e => e.stopPropagation()}>
+          <div className="review-section-extra" onClick={e => e.stopPropagation()}>
             {headerExtra}
           </div>
         )}
       </div>
       {!collapsed && (
-        <div style={{ padding: "4px 20px 20px" }}>
+        <div className="review-section-body">
           {count === 0 && emptyMessage ? (
-            <p style={{ fontSize: "var(--text-label)", color: "var(--text-3)", fontStyle: "italic", paddingTop: "8px" }}>{emptyMessage}</p>
+            <p className="review-section-empty">{emptyMessage}</p>
           ) : children}
         </div>
       )}
@@ -607,26 +582,24 @@ function EvidenceCard({ entry, formatDate }: { entry: EvidenceEntry; formatDate:
   const sent = entry.sentiment ? SENTIMENT_CONFIG[entry.sentiment] : null
 
   return (
-    <div style={{ padding: "12px 16px", border: "1px solid var(--border-1)", borderRadius: "6px", marginBottom: "8px", background: "var(--surf-2)" }}>
-      <div style={{ display: "flex", alignItems: "flex-start", gap: "10px" }}>
-        <span style={{ padding: "2px 7px", borderRadius: "3px", fontSize: "var(--text-caption)", fontWeight: 600, background: cat.bg, color: cat.color, flexShrink: 0, marginTop: "2px" }}>
+    <div className="review-ev-card">
+      <div className="review-ev-card-inner">
+        <span className="review-ev-cat-badge" style={{ background: cat.bg, color: cat.color }}>
           {CATEGORY_LABELS[entry.category]}
         </span>
-        <div style={{ flex: 1 }}>
-          <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: entry.content ? "6px" : 0 }}>
-            <p style={{ fontSize: "var(--text-label)", color: "var(--text-1)", fontWeight: 500, flex: 1 }}>{entry.title}</p>
+        <div className="review-ev-body">
+          <div className="review-ev-header" style={{ marginBottom: entry.content ? "6px" : 0 }}>
+            <p className="review-ev-title">{entry.title}</p>
             {sent && (
-              <span style={{ fontSize: "var(--text-caption)", color: sent.color, flexShrink: 0 }}>{sent.symbol} {sent.label}</span>
+              <span className="review-ev-sentiment" style={{ color: sent.color }}>{sent.symbol} {sent.label}</span>
             )}
-            <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", flexShrink: 0 }}>{formatDate(entry.occurredAt)}</span>
+            <span className="review-ev-date">{formatDate(entry.occurredAt)}</span>
           </div>
           {entry.content && (
-            <p style={{ fontSize: "var(--text-caption)", color: "var(--text-2)", whiteSpace: "pre-wrap" }}>{entry.content}</p>
+            <p className="review-ev-content">{entry.content}</p>
           )}
           {entry.meetingTitle && (
-            <p style={{ fontSize: "var(--text-caption)", color: "#60a5fa", marginTop: "4px" }}>
-              Meeting: {entry.meetingTitle}
-            </p>
+            <p className="review-ev-meeting">Meeting: {entry.meetingTitle}</p>
           )}
         </div>
       </div>
diff --git a/app/(dashboard)/people/page.tsx b/app/(dashboard)/people/page.tsx
index 4f32289..cb8f4b7 100644
--- a/app/(dashboard)/people/page.tsx
+++ b/app/(dashboard)/people/page.tsx
@@ -122,27 +122,18 @@ export default function PeoplePage() {
         </button>
       </div>
 
-      <div style={{ padding: "16px" }}>
+      <div className="page-content">
         {/* Stat cards */}
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "7px", marginBottom: "14px" }}>
+        <div className="stat-grid">
           {[
             { label: "Active people", value: activePeople.length, sub: `${people.filter(p => p.status === "inactive").length} inactive` },
             { label: "Recent hires", value: getRecentHires(), sub: "In the last 30 days" },
             { label: "Teams", value: activeTeams.length, sub: "Active teams" },
           ].map(({ label, value, sub }) => (
-            <div key={label} style={{
-              background: "var(--surf)",
-              border: "1px solid var(--border-1)",
-              borderRadius: "6px",
-              padding: "10px 12px",
-            }}>
+            <div key={label} className="stat-card">
               <div className="form-label">{label}</div>
-              <div style={{ fontSize: "20px", fontWeight: 500, color: "var(--text-1)", fontFamily: "var(--font-mono)" }}>
-                {value}
-              </div>
-              <div style={{ fontSize: "var(--text-overline)", color: "var(--text-3)", marginTop: "2px" }}>
-                {sub}
-              </div>
+              <div className="stat-card-value">{value}</div>
+              <div className="stat-card-sub">{sub}</div>
             </div>
           ))}
         </div>
diff --git a/app/(dashboard)/radar/page.tsx b/app/(dashboard)/radar/page.tsx
index e62b718..59c3435 100644
--- a/app/(dashboard)/radar/page.tsx
+++ b/app/(dashboard)/radar/page.tsx
@@ -76,7 +76,6 @@ function PersonCard({
     try {
       const data = await getFollowUpsForPerson(pa.personId)
       setFollowUps(data)
-      // Mark any open follow-ups as surfaced
       const open = data.filter(f => f.status === 'open')
       if (open.length > 0) {
         await markFollowUpsSurfaced(open.map(f => ({ id: f.id, timesSurfaced: f.timesSurfaced })))
@@ -97,69 +96,42 @@ function PersonCard({
   }
 
   return (
-    <div style={{
-      background: 'var(--surf)',
-      border: '1px solid var(--border-1)',
-      borderRadius: '8px',
-      overflow: 'hidden',
-    }}>
+    <div className="rdr-card">
       {/* Card header */}
-      <div style={{
-        display: 'flex',
-        alignItems: 'flex-start',
-        gap: '12px',
-        padding: '14px 16px',
-        background: 'var(--surf-2)',
-        borderBottom: '1px solid var(--border-1)',
-      }}>
-        <div style={{
-          width: '32px',
-          height: '32px',
-          borderRadius: '50%',
-          background: 'var(--surf-3)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          fontSize: 'var(--text-meta)',
-          fontWeight: 600,
-          color: 'var(--text-2)',
-          flexShrink: 0,
-        }}>
+      <div className="rdr-card-header">
+        <div className="rdr-avatar">
           {pa.personName.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
         </div>
 
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            <Link
-              href={`/people/${pa.personId}`}
-              style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-1)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px' }}
-            >
+        <div className="rdr-card-info">
+          <div className="rdr-card-name-row">
+            <Link href={`/people/${pa.personId}`} className="rdr-card-name">
               {pa.personName}
               <ExternalLink style={{ width: '10px', height: '10px', color: 'var(--text-3)' }} />
             </Link>
             <ScoreBadge score={pa.score} />
           </div>
           {pa.personRole && (
-            <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-2)', marginTop: '2px' }}>{pa.personRole}</div>
+            <div className="rdr-card-role">{pa.personRole}</div>
           )}
         </div>
 
-        <div style={{ display: 'flex', gap: '6px', flexShrink: 0 }}>
+        <div className="rdr-card-btns">
           <button
             onClick={() => router.push(`/meetings?new=1&type=1:1&personId=${pa.personId}`)}
-            style={{ background: 'var(--surf-3)', border: '1px solid var(--border-2)', borderRadius: '4px', color: 'var(--text-2)', fontSize: 'var(--text-caption)', padding: '4px 8px', cursor: 'pointer', whiteSpace: 'nowrap', fontFamily: 'var(--font-sans)' }}
+            className="rdr-card-btn"
           >
             Schedule 1:1
           </button>
           <button
             onClick={() => router.push(`/evidence?new=1&personId=${pa.personId}`)}
-            style={{ background: 'var(--surf-3)', border: '1px solid var(--border-2)', borderRadius: '4px', color: 'var(--text-2)', fontSize: 'var(--text-caption)', padding: '4px 8px', cursor: 'pointer', whiteSpace: 'nowrap', fontFamily: 'var(--font-sans)' }}
+            className="rdr-card-btn"
           >
             Log evidence
           </button>
           <button
             onClick={() => setAddingFollowUp(true)}
-            style={{ background: 'var(--surf-3)', border: '1px solid var(--border-2)', borderRadius: '4px', color: 'var(--text-2)', fontSize: 'var(--text-caption)', padding: '4px 8px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '3px', fontFamily: 'var(--font-sans)' }}
+            className="rdr-card-btn rdr-card-btn-plus"
           >
             <Plus style={{ width: '10px', height: '10px' }} /> Follow-up
           </button>
@@ -170,37 +142,21 @@ function PersonCard({
       {pa.signals.length > 0 && (
         <div>
           {pa.signals.map((signal, i) => (
-            <div
-              key={i}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '8px',
-                padding: '8px 16px',
-                borderBottom: '1px solid var(--border-1)',
-                fontSize: 'var(--text-meta)',
-              }}
-            >
+            <div key={i} className="rdr-signal-row">
               <SeverityIcon severity={signal.severity} />
-              <span style={{ flex: 1, color: 'var(--text-2)' }}>{signal.message}</span>
+              <span className="rdr-signal-msg">{signal.message}</span>
               {signal.meta?.isNewHire === true && (
-                <span style={{ fontSize: '10px', fontWeight: 600, padding: '2px 6px', borderRadius: '4px', background: 'rgba(0,240,88,0.12)', color: '#00f058', border: '1px solid rgba(0,240,88,0.3)', whiteSpace: 'nowrap', flexShrink: 0 }}>
-                  New hire
-                </span>
+                <span className="rdr-new-hire-badge">New hire</span>
               )}
-              {/* Quick actions per signal type */}
               {signal.type === 'overdue_task' && (
-                <button
-                  onClick={() => handleMarkTaskDone(signal.entityId)}
-                  style={{ background: 'none', border: '1px solid var(--border-2)', borderRadius: '4px', color: 'var(--text-3)', fontSize: 'var(--text-caption)', padding: '2px 8px', cursor: 'pointer', whiteSpace: 'nowrap' }}
-                >
+                <button onClick={() => handleMarkTaskDone(signal.entityId)} className="rdr-signal-action-btn">
                   Mark done
                 </button>
               )}
               {(signal.type === 'overdue_follow_up' || signal.type === 'ageing_follow_up' || signal.type === 'surfaced_follow_up') && (
                 <button
                   onClick={async () => { await completeFollowUp(signal.entityId); onRefresh() }}
-                  style={{ background: 'none', border: '1px solid var(--border-2)', borderRadius: '4px', color: '#00f058', fontSize: 'var(--text-caption)', padding: '2px 8px', cursor: 'pointer', whiteSpace: 'nowrap' }}
+                  className="rdr-signal-complete-btn"
                 >
                   Complete
                 </button>
@@ -213,32 +169,15 @@ function PersonCard({
       {/* Follow-ups section */}
       {pa.openFollowUpCount > 0 && (
         <div style={{ borderTop: pa.signals.length > 0 ? 'none' : '1px solid var(--border-1)' }}>
-          <button
-            onClick={toggleFollowUps}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '6px',
-              width: '100%',
-              padding: '8px 16px',
-              background: 'none',
-              border: 'none',
-              borderTop: '1px solid var(--border-1)',
-              color: 'var(--text-3)',
-              fontSize: 'var(--text-caption)',
-              cursor: 'pointer',
-              fontFamily: 'var(--font-sans)',
-              textAlign: 'left',
-            }}
-          >
+          <button onClick={toggleFollowUps} className="rdr-followups-toggle">
             {showFollowUps ? <ChevronDown style={{ width: '11px', height: '11px' }} /> : <ChevronRight style={{ width: '11px', height: '11px' }} />}
             {pa.openFollowUpCount} open follow-up{pa.openFollowUpCount !== 1 ? 's' : ''}
           </button>
 
           {showFollowUps && (
-            <div style={{ padding: '4px 16px 12px' }}>
+            <div className="rdr-followups-body">
               {loadingFollowUps ? (
-                <p style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)' }}>Loading...</p>
+                <p className="rdr-followups-loading">Loading...</p>
               ) : (
                 <FollowUpList followUps={followUps} onChanged={() => { loadFollowUps(); onRefresh() }} />
               )}
@@ -326,17 +265,13 @@ export default function RadarPage() {
   const criticalCount = people.filter(p => p.signals.some(s => s.severity === 'critical')).length
 
   if (loading) {
-    return (
-      <div style={{ padding: '32px', color: 'var(--text-2)', fontSize: 'var(--text-meta)' }}>
-        Computing attention signals...
-      </div>
-    )
+    return <div className="rdr-loading">Computing attention signals...</div>
   }
 
   if (error) {
     return (
-      <div style={{ padding: '32px' }}>
-        <p style={{ color: '#ff6b6b', fontSize: 'var(--text-meta)' }}>{error}</p>
+      <div className="rdr-error">
+        <p className="rdr-error-text">{error}</p>
       </div>
     )
   }
@@ -347,168 +282,142 @@ export default function RadarPage() {
         <span className="page-topbar-title">People Radar</span>
       </div>
       <div className="page-content">
-      {/* Header subtitle */}
-      <div style={{ marginBottom: '20px' }}>
-        <p>
-          {needsAttention.length > 0
-            ? `${needsAttention.length} person${needsAttention.length !== 1 ? 's' : ''} need${needsAttention.length === 1 ? 's' : ''} attention`
-            : 'All clear — everyone is on track'}
-        </p>
-      </div>
+        {/* Header subtitle */}
+        <div className="rdr-subtitle">
+          <p>
+            {needsAttention.length > 0
+              ? `${needsAttention.length} person${needsAttention.length !== 1 ? 's' : ''} need${needsAttention.length === 1 ? 's' : ''} attention`
+              : 'All clear — everyone is on track'}
+          </p>
+        </div>
 
-      {/* Quick stats */}
-      {needsAttention.length > 0 && (
-        <div style={{ display: 'flex', gap: '12px', marginBottom: '20px', flexWrap: 'wrap' }}>
-          <div style={{ background: '#2a0a0a', border: '1px solid #5a2020', borderRadius: '6px', padding: '10px 16px', minWidth: '100px' }}>
-            <div style={{ fontSize: 'var(--text-overline)', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '2px' }}>Critical</div>
-            <div style={{ fontSize: 'var(--text-section)', fontWeight: 700, color: '#ff6b6b' }}>{criticalCount}</div>
+        {/* Quick stats */}
+        {needsAttention.length > 0 && (
+          <div className="rdr-stats">
+            <div className="rdr-stat-critical">
+              <div className="rdr-stat-label">Critical</div>
+              <div className="rdr-stat-val" style={{ color: '#ff6b6b' }}>{criticalCount}</div>
+            </div>
+            <div className="rdr-stat-attention">
+              <div className="rdr-stat-label">Needs attention</div>
+              <div className="rdr-stat-val" style={{ color: 'var(--text-1)' }}>{needsAttention.length}</div>
+            </div>
+            <div className="rdr-stat-clear">
+              <div className="rdr-stat-label">All clear</div>
+              <div className="rdr-stat-val" style={{ color: '#00f058' }}>{allClear.length}</div>
+            </div>
           </div>
-          <div style={{ background: 'var(--surf)', border: '1px solid var(--border-1)', borderRadius: '6px', padding: '10px 16px', minWidth: '100px' }}>
-            <div style={{ fontSize: 'var(--text-overline)', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '2px' }}>Needs attention</div>
-            <div style={{ fontSize: 'var(--text-section)', fontWeight: 700, color: 'var(--text-1)' }}>{needsAttention.length}</div>
+        )}
+
+        {/* Filters */}
+        {needsAttention.length > 0 && (
+          <div className="rdr-filters">
+            {(['all', 'critical', 'warning'] as SeverityFilter[]).map(f => (
+              <button
+                key={f}
+                onClick={() => setSeverityFilter(f)}
+                className="rdr-filter-btn"
+                style={{
+                  background: severityFilter === f ? 'var(--surf-3)' : 'var(--surf-2)',
+                  border: `1px solid ${severityFilter === f ? 'var(--border-3)' : 'var(--border-1)'}`,
+                  color: severityFilter === f ? 'var(--text-1)' : 'var(--text-3)',
+                }}
+              >
+                {f === 'all' ? 'All signals' : f}
+              </button>
+            ))}
           </div>
-          <div style={{ background: '#0d1f14', border: '1px solid #1a3a25', borderRadius: '6px', padding: '10px 16px', minWidth: '100px' }}>
-            <div style={{ fontSize: 'var(--text-overline)', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '2px' }}>All clear</div>
-            <div style={{ fontSize: 'var(--text-section)', fontWeight: 700, color: '#00f058' }}>{allClear.length}</div>
+        )}
+
+        {/* Person cards */}
+        {filtered.length === 0 && needsAttention.length > 0 && (
+          <p className="rdr-no-match">No people match this filter.</p>
+        )}
+
+        {people.length === 0 && (
+          <div className="rdr-empty">
+            <p className="rdr-empty-text">No active team members yet.</p>
+            <Link href="/people" className="rdr-empty-link">Add your team →</Link>
           </div>
-        </div>
-      )}
+        )}
 
-      {/* Filters */}
-      {needsAttention.length > 0 && (
-        <div style={{ display: 'flex', gap: '8px', marginBottom: '20px', flexWrap: 'wrap' }}>
-          {(['all', 'critical', 'warning'] as SeverityFilter[]).map(f => (
-            <button
-              key={f}
-              onClick={() => setSeverityFilter(f)}
-              style={{
-                background: severityFilter === f ? 'var(--surf-3)' : 'var(--surf-2)',
-                border: `1px solid ${severityFilter === f ? 'var(--border-3)' : 'var(--border-1)'}`,
-                borderRadius: '4px',
-                color: severityFilter === f ? 'var(--text-1)' : 'var(--text-3)',
-                fontSize: 'var(--text-meta)',
-                padding: '5px 12px',
-                cursor: 'pointer',
-                fontFamily: 'var(--font-sans)',
-                textTransform: 'capitalize',
-              }}
-            >
-              {f === 'all' ? 'All signals' : f}
-            </button>
+        <div className="rdr-cards">
+          {filtered.map(pa => (
+            <PersonCard key={pa.personId} pa={pa} onRefresh={refetch} />
           ))}
         </div>
-      )}
 
-      {/* Person cards */}
-      {filtered.length === 0 && needsAttention.length > 0 && (
-        <p style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)' }}>No people match this filter.</p>
-      )}
+        {/* All clear section */}
+        {allClear.length > 0 && (
+          <div className="rdr-allclear">
+            <button onClick={() => setShowAllClear(s => !s)} className="rdr-allclear-toggle">
+              {showAllClear
+                ? <ChevronDown style={{ width: '13px', height: '13px' }} />
+                : <ChevronRight style={{ width: '13px', height: '13px' }} />}
+              <CheckCircle style={{ width: '13px', height: '13px', color: '#00f058' }} />
+              People with no signals ({allClear.length})
+            </button>
 
-      {people.length === 0 && (
-        <div style={{ textAlign: 'center', padding: '48px 0' }}>
-          <p style={{ color: 'var(--text-2)', marginBottom: '12px' }}>No active team members yet.</p>
-          <Link href="/people" style={{ color: '#00f058', fontSize: 'var(--text-meta)', textDecoration: 'none' }}>
-            Add your team →
-          </Link>
-        </div>
-      )}
+            {showAllClear && (
+              <div className="rdr-allclear-list">
+                {allClear.map(pa => (
+                  <div key={pa.personId} className="rdr-allclear-item">
+                    <div className="rdr-allclear-dot" />
+                    <Link href={`/people/${pa.personId}`} className="rdr-allclear-name">
+                      {pa.personName}
+                    </Link>
+                    {pa.personRole && (
+                      <span className="rdr-allclear-role">{pa.personRole}</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
 
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        {filtered.map(pa => (
-          <PersonCard key={pa.personId} pa={pa} onRefresh={refetch} />
-        ))}
-      </div>
+        {/* Recurring Topics */}
+        <div className="rdr-topics">
+          <div className="rdr-topics-header">
+            <div>
+              <h2 style={{ margin: 0 }}>Recurring Topics</h2>
+              <p className="rdr-topics-sub">Topics that surface across 3+ meeting notes</p>
+            </div>
+            <AIButton
+              configured={aiConfig.configured}
+              loading={aiConfig.loading}
+              generating={detectingTopics}
+              onClick={handleDetectRecurringTopics}
+              label={topicsDetected ? "Re-analyse" : "Detect recurring topics"}
+              tooltip={aiConfig.tooltip}
+              showSetupLink={true}
+            />
+          </div>
 
-      {/* All clear section */}
-      {allClear.length > 0 && (
-        <div style={{ marginTop: '20px', borderTop: '1px solid var(--border-1)', paddingTop: '16px' }}>
-          <button
-            onClick={() => setShowAllClear(s => !s)}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '6px',
-              background: 'none',
-              border: 'none',
-              color: 'var(--text-3)',
-              fontSize: 'var(--text-meta)',
-              cursor: 'pointer',
-              fontFamily: 'var(--font-sans)',
-              padding: 0,
-              marginBottom: '10px',
-            }}
-          >
-            {showAllClear ? <ChevronDown style={{ width: '13px', height: '13px' }} /> : <ChevronRight style={{ width: '13px', height: '13px' }} />}
-            <CheckCircle style={{ width: '13px', height: '13px', color: '#00f058' }} />
-            People with no signals ({allClear.length})
-          </button>
+          {topicsDetected && recurringTopics.length === 0 && (
+            <p className="rdr-topics-empty">No recurring topics found in recent meeting notes.</p>
+          )}
 
-          {showAllClear && (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-              {allClear.map(pa => (
-                <div key={pa.personId} style={{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 10px', background: 'var(--surf-2)', borderRadius: '5px' }}>
-                  <div style={{ width: '6px', height: '6px', borderRadius: '50%', background: '#00f058', flexShrink: 0 }} />
-                  <Link href={`/people/${pa.personId}`} style={{ fontSize: 'var(--text-meta)', color: 'var(--text-2)', textDecoration: 'none' }}>
-                    {pa.personName}
-                  </Link>
-                  {pa.personRole && (
-                    <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)' }}>{pa.personRole}</span>
-                  )}
+          {recurringTopics.length > 0 && (
+            <div className="rdr-topics-list">
+              {recurringTopics.map((t, i) => (
+                <div key={i} className="rdr-topic-card" style={{ border: `1px solid ${t.escalating ? '#f87171' : 'var(--border-1)'}` }}>
+                  <div style={{ flex: 1 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+                      <span className="rdr-topic-name">{t.topic}</span>
+                      {t.escalating && (
+                        <span className="rdr-topic-escalating">Escalating</span>
+                      )}
+                    </div>
+                    <span className="rdr-topic-meta">
+                      {t.frequency} meeting{t.frequency !== 1 ? 's' : ''} · first {t.first_seen} · latest {t.latest}
+                    </span>
+                  </div>
                 </div>
               ))}
             </div>
           )}
         </div>
-      )}
-
-      {/* Recurring Topics */}
-      <div style={{ marginTop: '28px', borderTop: '1px solid var(--border-1)', paddingTop: '20px' }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '12px' }}>
-          <div>
-            <h2 style={{ margin: 0 }}>Recurring Topics</h2>
-            <p style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', marginTop: '2px' }}>
-              Topics that surface across 3+ meeting notes
-            </p>
-          </div>
-          <AIButton
-            configured={aiConfig.configured}
-            loading={aiConfig.loading}
-            generating={detectingTopics}
-            onClick={handleDetectRecurringTopics}
-            label={topicsDetected ? "Re-analyse" : "Detect recurring topics"}
-            tooltip={aiConfig.tooltip}
-            showSetupLink={true}
-          />
-        </div>
-
-        {topicsDetected && recurringTopics.length === 0 && (
-          <p style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)' }}>No recurring topics found in recent meeting notes.</p>
-        )}
-
-        {recurringTopics.length > 0 && (
-          <div style={{ display: 'grid', gap: '8px' }}>
-            {recurringTopics.map((t, i) => (
-              <div key={i} style={{
-                display: 'flex', alignItems: 'flex-start', gap: '12px',
-                padding: '12px 16px', background: 'var(--surf)', border: `1px solid ${t.escalating ? '#f87171' : 'var(--border-1)'}`,
-                borderRadius: '6px',
-              }}>
-                <div style={{ flex: 1 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
-                    <span style={{ fontWeight: 600, color: 'var(--text-1)', fontSize: 'var(--text-body)' }}>{t.topic}</span>
-                    {t.escalating && (
-                      <span style={{ fontSize: 'var(--text-caption)', color: '#f87171', background: '#2a0a0a', border: '1px solid #f8717140', borderRadius: '3px', padding: '1px 6px' }}>Escalating</span>
-                    )}
-                  </div>
-                  <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)' }}>
-                    {t.frequency} meeting{t.frequency !== 1 ? 's' : ''} · first {t.first_seen} · latest {t.latest}
-                  </span>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
       </div>
     </>
   )
diff --git a/app/(dashboard)/review/page.tsx b/app/(dashboard)/review/page.tsx
index 5121715..d68873e 100644
--- a/app/(dashboard)/review/page.tsx
+++ b/app/(dashboard)/review/page.tsx
@@ -34,10 +34,10 @@ import { REFLECTION_PROMPTS_SYSTEM } from '@/lib/ai/prompts'
 function severityDot(severity: SignalSeverity) {
   const color = severity === 'critical' ? '#f87171' : severity === 'warning' ? '#f97316' : '#60a5fa'
   return (
-    <span style={{
-      width: '7px', height: '7px', borderRadius: '50%',
-      background: color, flexShrink: 0, display: 'inline-block', marginTop: '5px',
-    }} />
+    <span
+      className="wr-severity-dot"
+      style={{ width: '7px', height: '7px', background: color }}
+    />
   )
 }
 
@@ -51,11 +51,7 @@ function priorityBadge(priority: string | undefined | null) {
   }
   const s = styles[priority] ?? styles['Medium']
   return (
-    <span style={{
-      fontSize: '9px', padding: '1px 5px', borderRadius: '3px',
-      background: s.bg, color: s.color, fontFamily: 'var(--font-mono)',
-      flexShrink: 0,
-    }}>
+    <span className="wr-priority-badge" style={{ background: s.bg, color: s.color }}>
       {priority}
     </span>
   )
@@ -88,7 +84,7 @@ function Btn({
 
   let style: React.CSSProperties = { ...base }
   if (variant === 'primary') {
-    style = { ...base, border: `1px solid ${hovered ? '#00f058' : '#00f058'}`, color: '#00f058', background: hovered ? '#0a1e0a' : 'transparent' }
+    style = { ...base, border: `1px solid #00f058`, color: '#00f058', background: hovered ? '#0a1e0a' : 'transparent' }
   } else if (variant === 'dismiss') {
     style = { ...base, border: '1px solid transparent', color: hovered ? 'var(--text-2)' : 'var(--text-3)' }
   } else {
@@ -120,30 +116,23 @@ function SignalRow({
 }) {
   return (
     <div
-      style={{
-        display: 'flex', alignItems: 'flex-start', gap: '10px',
-        padding: '10px 16px', borderBottom: '1px solid var(--border-1)',
-      }}
+      className="wr-signal-row"
       onMouseEnter={e => (e.currentTarget.style.background = 'var(--surf-2)')}
       onMouseLeave={e => (e.currentTarget.style.background = '')}
     >
       {severityDot(signal.severity)}
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap' }}>
-          <span style={{ fontSize: '12px', color: 'var(--text-1)' }}>{signal.message}</span>
+      <div className="wr-signal-content">
+        <div className="wr-signal-msg-row">
+          <span className="wr-signal-msg">{signal.message}</span>
           {signal.meta?.isNewHire === true && (
-            <span style={{ fontSize: '10px', fontWeight: 600, padding: '1px 5px', borderRadius: '3px', background: 'rgba(0,240,88,0.12)', color: '#00f058', border: '1px solid rgba(0,240,88,0.3)', whiteSpace: 'nowrap' }}>
-              New hire
-            </span>
+            <span className="wr-signal-new-hire">New hire</span>
           )}
         </div>
         {typeof signal.meta?.subtitle === 'string' && signal.meta.subtitle && (
-          <div style={{ fontSize: '11px', color: 'var(--text-3)', marginTop: '1px' }}>
-            {signal.meta.subtitle}
-          </div>
+          <div className="wr-signal-subtitle">{signal.meta.subtitle}</div>
         )}
       </div>
-      <div style={{ display: 'flex', gap: '4px', flexShrink: 0, alignItems: 'flex-start' }}>
+      <div className="wr-signal-btns">
         {actions}
         <Btn variant="dismiss" onClick={() => onDismiss(signal)}>Dismiss</Btn>
       </div>
@@ -390,7 +379,6 @@ export default function WeeklyReviewPage() {
   const upcomingSignals = taskSignals.filter(s => s.type === 'upcoming_deadline')
   const goalSignals = signals.filter(s => s.type === 'stale_goal')
 
-  // Sections auto-check when all their signals are cleared
   const effectiveSectionState = {
     people:     peopleSignals.length === 0 || sectionState.people,
     actions:    actionSignals.length === 0  || sectionState.actions,
@@ -400,7 +388,6 @@ export default function WeeklyReviewPage() {
     reflection: sectionState.reflection,
   }
 
-  // Progress = completed sections / 5 (week excluded — no action items)
   const PROGRESS_SECTIONS = ['people', 'actions', 'tasks', 'goals', 'reflection'] as const
   const reviewedCount = PROGRESS_SECTIONS.filter(k => effectiveSectionState[k]).length
   const progressPct = Math.round((reviewedCount / PROGRESS_SECTIONS.length) * 100)
@@ -411,23 +398,8 @@ export default function WeeklyReviewPage() {
   const warnCount = signals.filter(s => s.severity === 'critical' || s.severity === 'warning').length
 
   const topbar = (
-    /* Sticky topbar — title only, status badge on right */
-    <div style={{
-      background: 'var(--surf)',
-      borderBottom: '1px solid var(--border-1)',
-      height: '40px',
-      padding: '0 16px',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      position: 'sticky',
-      top: 0,
-      zIndex: 10,
-      flexShrink: 0,
-    }}>
-      <span style={{ fontSize: 'var(--text-label)', fontWeight: 500, color: 'var(--text-1)', fontFamily: 'var(--font-sans)' }}>
-        Weekly Review
-      </span>
+    <div className="wr-topbar">
+      <span className="wr-topbar-title">Weekly Review</span>
     </div>
   )
 
@@ -435,9 +407,7 @@ export default function WeeklyReviewPage() {
     return (
       <>
         {topbar}
-        <div style={{ padding: '32px', color: 'var(--text-2)', fontSize: '12px' }}>
-          Loading weekly review...
-        </div>
+        <div className="wr-loading">Loading weekly review...</div>
       </>
     )
   }
@@ -445,584 +415,492 @@ export default function WeeklyReviewPage() {
   return (
     <>
       {topbar}
-      <div style={{ padding: '16px' }}>
-
-      {/* h1 + week nav */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '6px' }}>
-        <h1 style={{ fontSize: '22px', fontWeight: 500, margin: 0, color: 'var(--text-1)' }}>Weekly Review</h1>
-        <div style={{ display: 'flex', gap: '4px' }}>
-          <button
-            onClick={goToPrevWeek}
-            style={{ width: '26px', height: '26px', background: 'transparent', border: '1px solid var(--border-2)', color: 'var(--text-2)', borderRadius: '4px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-3)'; e.currentTarget.style.color = 'var(--text-1)' }}
-            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-2)'; e.currentTarget.style.color = 'var(--text-2)' }}
-          >
-            <ChevronLeft style={{ width: '13px', height: '13px' }} />
-          </button>
-          {!isCurrentWeek && (
-            <button
-              onClick={goToCurrentWeek}
-              style={{ height: '26px', padding: '0 8px', background: 'transparent', border: '1px solid var(--border-2)', color: 'var(--text-2)', borderRadius: '4px', cursor: 'pointer', fontSize: '11px', fontFamily: 'var(--font-sans)' }}
-              onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-3)'; e.currentTarget.style.color = 'var(--text-1)' }}
-              onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-2)'; e.currentTarget.style.color = 'var(--text-2)' }}
-            >
-              This week
+      <div className="wr-content">
+
+        {/* h1 + week nav */}
+        <div className="wr-title-row">
+          <h1 className="wr-title">Weekly Review</h1>
+          <div className="wr-nav-btns">
+            <button onClick={goToPrevWeek} className="wr-nav-btn">
+              <ChevronLeft style={{ width: '13px', height: '13px' }} />
             </button>
-          )}
-          <button
-            onClick={goToNextWeek}
-            style={{ width: '26px', height: '26px', background: 'transparent', border: '1px solid var(--border-2)', color: 'var(--text-2)', borderRadius: '4px', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
-            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--border-3)'; e.currentTarget.style.color = 'var(--text-1)' }}
-            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-2)'; e.currentTarget.style.color = 'var(--text-2)' }}
-          >
-            <ChevronRight style={{ width: '13px', height: '13px' }} />
-          </button>
+            {!isCurrentWeek && (
+              <button onClick={goToCurrentWeek} className="wr-nav-btn-week">
+                This week
+              </button>
+            )}
+            <button onClick={goToNextWeek} className="wr-nav-btn">
+              <ChevronRight style={{ width: '13px', height: '13px' }} />
+            </button>
+          </div>
         </div>
-      </div>
 
-      {/* Date range + status badge */}
-      <div style={{ fontSize: '12px', color: 'var(--text-3)', marginBottom: '20px', display: 'flex', alignItems: 'center' }}>
-        {formatWeekRange(weekStart)}
-        <span style={{
-          display: 'inline-flex', alignItems: 'center', gap: '4px',
-          fontSize: '10px', padding: '2px 8px', borderRadius: '10px',
-          marginLeft: '10px', fontFamily: 'var(--font-mono)',
-          ...(isCompleted ? { background: '#0a1e0a', color: '#00f058' } : { background: '#0a1e28', color: '#60a5fa' }),
-        }}>
-          {isCompleted ? '✓ Completed' : '◎ In Progress'}
-        </span>
-        {isCompleted && review?.completedAt && (
-          <span style={{ marginLeft: '12px', fontSize: '11px', color: 'var(--text-3)' }}>
-            {new Date(review.completedAt).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
+        {/* Date range + status badge */}
+        <div className="wr-meta-row">
+          {formatWeekRange(weekStart)}
+          <span className={`wr-status-badge ${isCompleted ? 'wr-status-completed' : 'wr-status-progress'}`}>
+            {isCompleted ? '✓ Completed' : '◎ In Progress'}
           </span>
-        )}
-      </div>
-
-      {/* Progress bar */}
-      {isCurrentWeek && (
-        <div style={{ height: '3px', background: 'var(--border-1)', borderRadius: '2px', marginBottom: '24px', overflow: 'hidden' }}>
-          <div style={{ height: '100%', width: `${progressPct}%`, background: 'linear-gradient(90deg, #00ffe5, #00f058)', borderRadius: '2px', transition: 'width 0.4s ease' }} />
+          {isCompleted && review?.completedAt && (
+            <span className="wr-completed-at">
+              {new Date(review.completedAt).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
+            </span>
+          )}
         </div>
-      )}
 
-      {/* Past week — no review */}
-      {!isCurrentWeek && !review && (
-        <p style={{ fontSize: '12px', color: 'var(--text-3)' }}>
-          No review was recorded for this week.
-        </p>
-      )}
+        {/* Progress bar */}
+        {isCurrentWeek && (
+          <div className="wr-progress-bar">
+            <div className="wr-progress-fill" style={{ width: `${progressPct}%` }} />
+          </div>
+        )}
+
+        {/* Past week — no review */}
+        {!isCurrentWeek && !review && (
+          <p className="wr-no-review">No review was recorded for this week.</p>
+        )}
 
-      {/* Snapshot for past completed reviews */}
-      {isReadOnly && review?.snapshot && (
-        <div style={{
-          background: 'var(--surf)', border: '1px solid var(--border-1)',
-          borderRadius: '8px', padding: '16px', marginBottom: '20px',
-          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '12px',
-        }}>
-          {[
-            { label: 'Overdue tasks', value: review.snapshot.overdueTasks },
-            { label: 'No recent 1:1', value: review.snapshot.noRecent1on1 },
-            { label: 'Unresolved actions', value: review.snapshot.unresolvedActions },
-            { label: 'No evidence', value: review.snapshot.noEvidence },
-            { label: 'Upcoming deadlines', value: review.snapshot.upcomingDeadlines },
-            { label: 'Missing notes', value: review.snapshot.missingNotes },
-          ].map(stat => (
-            <div key={stat.label}>
-              <div style={{ fontSize: '10px', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '2px' }}>
-                {stat.label}
+        {/* Snapshot for past completed reviews */}
+        {isReadOnly && review?.snapshot && (
+          <div className="wr-snapshot">
+            {[
+              { label: 'Overdue tasks', value: review.snapshot.overdueTasks },
+              { label: 'No recent 1:1', value: review.snapshot.noRecent1on1 },
+              { label: 'Unresolved actions', value: review.snapshot.unresolvedActions },
+              { label: 'No evidence', value: review.snapshot.noEvidence },
+              { label: 'Upcoming deadlines', value: review.snapshot.upcomingDeadlines },
+              { label: 'Missing notes', value: review.snapshot.missingNotes },
+            ].map(stat => (
+              <div key={stat.label}>
+                <div className="wr-snapshot-stat-label">{stat.label}</div>
+                <div className="wr-snapshot-stat-val">{stat.value}</div>
               </div>
-              <div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text-1)' }}>{stat.value}</div>
-            </div>
-          ))}
-        </div>
-      )}
+            ))}
+          </div>
+        )}
 
-      {(review || isCurrentWeek) && (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        {(review || isCurrentWeek) && (
+          <div className="wr-sections">
 
-          {/* Section 1: People Check */}
-          <ReviewSection
-            title="People Check"
-            icon={ICON_PEOPLE}
-            signalCount={isReadOnly ? 0 : peopleSignals.length}
-            criticalCount={isReadOnly ? 0 : peopleSignals.filter(s => s.severity === 'critical').length}
-            warningCount={isReadOnly ? 0 : peopleSignals.filter(s => s.severity === 'warning').length}
-            infoCount={isReadOnly ? 0 : peopleSignals.filter(s => s.severity === 'info').length}
-            isReviewed={effectiveSectionState.people}
-            onMarkReviewed={() => toggleSection('people')}
-            emptyMessage="All clear — everyone has been seen recently"
-          >
-            {!isReadOnly ? (() => {
-              const byPerson: Record<string, { name: string; id: string; signals: ReviewSignal[] }> = {}
-              for (const s of peopleSignals) {
-                if (!s.personId) continue
-                if (!byPerson[s.personId]) byPerson[s.personId] = { name: s.personName ?? s.personId, id: s.personId, signals: [] }
-                byPerson[s.personId].signals.push(s)
-              }
-              return (
-                <>
-                  {Object.entries(byPerson).map(([personId, { name, signals: pSignals }]) => (
-                    <div key={personId}>
-                      {/* Person sub-header */}
-                      <div style={{
-                        display: 'flex', alignItems: 'center', gap: '8px',
-                        padding: '7px 16px', background: 'var(--surf-2)',
-                        borderBottom: '1px solid var(--border-1)',
-                      }}>
-                        <User style={{ width: '11px', height: '11px', color: 'var(--text-3)', flexShrink: 0 }} />
-                        <Link
-                          href={`/people/${personId}`}
-                          style={{ fontSize: '12px', fontWeight: 600, color: 'var(--text-1)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px' }}
-                        >
-                          {name}
-                          <ExternalLink style={{ width: '9px', height: '9px', color: 'var(--text-3)' }} />
-                        </Link>
-                      </div>
-                      {/* Per-signal rows with own actions */}
-                      {pSignals.map((s, i) => {
-                        const lastDate = s.meta?.lastDate ? formatDate(s.meta.lastDate as string) : null
-                        const subtitle = s.type === 'no_recent_1on1'
-                          ? [lastDate ? `Last 1:1: ${lastDate}` : 'No 1:1 on record'].filter(Boolean).join(' · ')
-                          : s.type === 'no_evidence'
-                          ? 'No evidence in 90 days'
-                          : s.type === 'missing_notes'
-                          ? 'No meeting notes in 21 days'
-                          : null
-                        const signalWithSubtitle = subtitle ? { ...s, meta: { ...s.meta, subtitle } } : s
-                        return (
-                          <SignalRow
-                            key={i}
-                            signal={signalWithSubtitle}
-                            onDismiss={setDismissTarget}
-                            actions={
-                              <div style={{ display: 'flex', gap: '4px' }}>
-                                {(s.type === 'no_recent_1on1') && (
-                                  <>
-                                    <Btn variant="primary" onClick={() => router.push(`/meetings?new=1&type=1:1&personId=${personId}`)}>
-                                      Schedule 1:1
+            {/* Section 1: People Check */}
+            <ReviewSection
+              title="People Check"
+              icon={ICON_PEOPLE}
+              signalCount={isReadOnly ? 0 : peopleSignals.length}
+              criticalCount={isReadOnly ? 0 : peopleSignals.filter(s => s.severity === 'critical').length}
+              warningCount={isReadOnly ? 0 : peopleSignals.filter(s => s.severity === 'warning').length}
+              infoCount={isReadOnly ? 0 : peopleSignals.filter(s => s.severity === 'info').length}
+              isReviewed={effectiveSectionState.people}
+              onMarkReviewed={() => toggleSection('people')}
+              emptyMessage="All clear — everyone has been seen recently"
+            >
+              {!isReadOnly ? (() => {
+                const byPerson: Record<string, { name: string; id: string; signals: ReviewSignal[] }> = {}
+                for (const s of peopleSignals) {
+                  if (!s.personId) continue
+                  if (!byPerson[s.personId]) byPerson[s.personId] = { name: s.personName ?? s.personId, id: s.personId, signals: [] }
+                  byPerson[s.personId].signals.push(s)
+                }
+                return (
+                  <>
+                    {Object.entries(byPerson).map(([personId, { name, signals: pSignals }]) => (
+                      <div key={personId}>
+                        <div className="wr-person-subheader">
+                          <User style={{ width: '11px', height: '11px', color: 'var(--text-3)', flexShrink: 0 }} />
+                          <Link href={`/people/${personId}`} className="wr-person-link">
+                            {name}
+                            <ExternalLink style={{ width: '9px', height: '9px', color: 'var(--text-3)' }} />
+                          </Link>
+                        </div>
+                        {pSignals.map((s, i) => {
+                          const lastDate = s.meta?.lastDate ? formatDate(s.meta.lastDate as string) : null
+                          const subtitle = s.type === 'no_recent_1on1'
+                            ? [lastDate ? `Last 1:1: ${lastDate}` : 'No 1:1 on record'].filter(Boolean).join(' · ')
+                            : s.type === 'no_evidence'
+                            ? 'No evidence in 90 days'
+                            : s.type === 'missing_notes'
+                            ? 'No meeting notes in 21 days'
+                            : null
+                          const signalWithSubtitle = subtitle ? { ...s, meta: { ...s.meta, subtitle } } : s
+                          return (
+                            <SignalRow
+                              key={i}
+                              signal={signalWithSubtitle}
+                              onDismiss={setDismissTarget}
+                              actions={
+                                <div className="wr-signal-actions">
+                                  {(s.type === 'no_recent_1on1') && (
+                                    <>
+                                      <Btn variant="primary" onClick={() => router.push(`/meetings?new=1&type=1:1&personId=${personId}`)}>
+                                        Schedule 1:1
+                                      </Btn>
+                                      <Btn onClick={() => router.push(`/evidence?new=1&personId=${personId}`)}>
+                                        Log note
+                                      </Btn>
+                                    </>
+                                  )}
+                                  {s.type === 'no_evidence' && (
+                                    <Btn variant="primary" onClick={() => router.push(`/evidence?new=1&personId=${personId}`)}>
+                                      Log evidence
                                     </Btn>
-                                    <Btn onClick={() => router.push(`/evidence?new=1&personId=${personId}`)}>
+                                  )}
+                                  {s.type === 'missing_notes' && (
+                                    <Btn variant="primary" onClick={() => router.push(`/evidence?new=1&personId=${personId}`)}>
                                       Log note
                                     </Btn>
-                                  </>
-                                )}
-                                {s.type === 'no_evidence' && (
-                                  <Btn variant="primary" onClick={() => router.push(`/evidence?new=1&personId=${personId}`)}>
-                                    Log evidence
-                                  </Btn>
-                                )}
-                                {s.type === 'missing_notes' && (
-                                  <Btn variant="primary" onClick={() => router.push(`/evidence?new=1&personId=${personId}`)}>
-                                    Log note
-                                  </Btn>
-                                )}
-                              </div>
-                            }
-                          />
-                        )
-                      })}
-                    </div>
-                  ))}
+                                  )}
+                                </div>
+                              }
+                            />
+                          )
+                        })}
+                      </div>
+                    ))}
+                  </>
+                )
+              })() : null}
+            </ReviewSection>
+
+            {/* Section 2: Action Items & Follow-ups */}
+            <ReviewSection
+              title="Action Items & Follow-ups"
+              icon={ICON_ACTIONS}
+              signalCount={isReadOnly ? 0 : actionSignals.length}
+              criticalCount={isReadOnly ? 0 : actionSignals.filter(s => s.severity === 'critical').length}
+              warningCount={isReadOnly ? 0 : actionSignals.filter(s => s.severity === 'warning').length}
+              infoCount={isReadOnly ? 0 : actionSignals.filter(s => s.severity === 'info').length}
+              isReviewed={effectiveSectionState.actions}
+              onMarkReviewed={() => toggleSection('actions')}
+              emptyMessage="All action items resolved"
+            >
+              {!isReadOnly ? (
+                <>
+                  {actionSignals.map((s, i) => {
+                    const daysAgo = s.meta?.daysAgo as number | undefined
+                    const meetingTitle = s.meta?.meetingTitle as string | undefined
+                    const subtitle = [
+                      meetingTitle ? `From: ${meetingTitle}` : null,
+                      daysAgo != null ? `${daysAgo} days ago` : null,
+                    ].filter(Boolean).join(' · ')
+                    const signalWithSubtitle = { ...s, meta: { ...s.meta, subtitle } }
+                    return (
+                      <SignalRow
+                        key={i}
+                        signal={signalWithSubtitle}
+                        onDismiss={setDismissTarget}
+                        actions={
+                          <div className="wr-signal-actions">
+                            {Boolean(s.meta?.taskId) && (
+                              <Btn variant="primary" onClick={() => handleMarkTaskDone(s.meta!.taskId as string)}>
+                                Mark done
+                              </Btn>
+                            )}
+                            <Link href={`/meetings/${s.entityId}`} style={{ textDecoration: 'none' }}>
+                              <Btn>View meeting</Btn>
+                            </Link>
+                          </div>
+                        }
+                      />
+                    )
+                  })}
                 </>
-              )
-            })() : null}
-          </ReviewSection>
+              ) : null}
+            </ReviewSection>
 
-          {/* Section 2: Action Items & Follow-ups */}
-          <ReviewSection
-            title="Action Items & Follow-ups"
-            icon={ICON_ACTIONS}
-            signalCount={isReadOnly ? 0 : actionSignals.length}
-            criticalCount={isReadOnly ? 0 : actionSignals.filter(s => s.severity === 'critical').length}
-            warningCount={isReadOnly ? 0 : actionSignals.filter(s => s.severity === 'warning').length}
-            infoCount={isReadOnly ? 0 : actionSignals.filter(s => s.severity === 'info').length}
-            isReviewed={effectiveSectionState.actions}
-            onMarkReviewed={() => toggleSection('actions')}
-            emptyMessage="All action items resolved"
-          >
-            {!isReadOnly ? (
-              <>
-                {actionSignals.map((s, i) => {
-                  const daysAgo = s.meta?.daysAgo as number | undefined
-                  const meetingTitle = s.meta?.meetingTitle as string | undefined
-                  const subtitle = [
-                    meetingTitle ? `From: ${meetingTitle}` : null,
-                    daysAgo != null ? `${daysAgo} days ago` : null,
-                  ].filter(Boolean).join(' · ')
-                  const signalWithSubtitle = { ...s, meta: { ...s.meta, subtitle } }
-                  return (
-                    <SignalRow
-                      key={i}
-                      signal={signalWithSubtitle}
-                      onDismiss={setDismissTarget}
-                      actions={
-                        <div style={{ display: 'flex', gap: '4px' }}>
-                          {Boolean(s.meta?.taskId) && (
-                            <Btn variant="primary" onClick={() => handleMarkTaskDone(s.meta!.taskId as string)}>
-                              Mark done
-                            </Btn>
-                          )}
-                          <Link href={`/meetings/${s.entityId}`} style={{ textDecoration: 'none' }}>
-                            <Btn>View meeting</Btn>
-                          </Link>
+            {/* Section 3: Tasks & Deadlines */}
+            <ReviewSection
+              title="Tasks & Deadlines"
+              icon={ICON_TASKS}
+              signalCount={isReadOnly ? 0 : taskSignals.length}
+              criticalCount={isReadOnly ? 0 : overdueSignals.filter(s => s.severity === 'critical').length}
+              warningCount={isReadOnly ? 0 : overdueSignals.filter(s => s.severity === 'warning').length}
+              infoCount={isReadOnly ? 0 : upcomingSignals.length}
+              isReviewed={effectiveSectionState.tasks}
+              onMarkReviewed={() => toggleSection('tasks')}
+              emptyMessage="No overdue tasks and no deadlines this week"
+            >
+              {!isReadOnly ? (
+                <>
+                  {overdueSignals.length > 0 && upcomingSignals.length > 0 && (
+                    <div className="wr-task-label">
+                      <span className="wr-task-label-text">Overdue</span>
+                    </div>
+                  )}
+                  {overdueSignals.map((s, i) => {
+                    const daysOverdue = s.meta?.daysOverdue as number | undefined
+                    const dueDate = s.meta?.dueDate as string | undefined
+                    const priority = s.meta?.priority as string | undefined
+                    const subtitle = [
+                      dueDate ? `Due ${formatDate(dueDate)}` : null,
+                      daysOverdue != null ? `${daysOverdue} day${daysOverdue === 1 ? '' : 's'} overdue` : null,
+                    ].filter(Boolean).join(' · ')
+                    const taskTitle = (s.meta?.title as string | undefined) ?? s.message.replace(/^"|".*$/g, '').trim()
+                    return (
+                      <div
+                        key={i}
+                        className="wr-task-row"
+                        onMouseEnter={e => (e.currentTarget.style.background = 'var(--surf-2)')}
+                        onMouseLeave={e => (e.currentTarget.style.background = '')}
+                      >
+                        {severityDot(s.severity)}
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div className="wr-task-title-row">
+                            {taskTitle}{priorityBadge(priority)}
+                          </div>
+                          <div className="wr-task-sub">{subtitle}</div>
                         </div>
-                      }
-                    />
-                  )
-                })}
-              </>
-            ) : null}
-          </ReviewSection>
-
-          {/* Section 3: Tasks & Deadlines */}
-          <ReviewSection
-            title="Tasks & Deadlines"
-            icon={ICON_TASKS}
-            signalCount={isReadOnly ? 0 : taskSignals.length}
-            criticalCount={isReadOnly ? 0 : overdueSignals.filter(s => s.severity === 'critical').length}
-            warningCount={isReadOnly ? 0 : overdueSignals.filter(s => s.severity === 'warning').length}
-            infoCount={isReadOnly ? 0 : upcomingSignals.length}
-            isReviewed={effectiveSectionState.tasks}
-            onMarkReviewed={() => toggleSection('tasks')}
-            emptyMessage="No overdue tasks and no deadlines this week"
-          >
-            {!isReadOnly ? (
-              <>
-                {/* Overdue label only when both groups exist */}
-                {overdueSignals.length > 0 && upcomingSignals.length > 0 && (
-                  <div style={{ padding: '8px 16px', borderBottom: '1px solid var(--border-1)' }}>
-                    <span style={{ fontSize: '10px', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-                      Overdue
-                    </span>
-                  </div>
-                )}
-                {overdueSignals.map((s, i) => {
-                  const daysOverdue = s.meta?.daysOverdue as number | undefined
-                  const dueDate = s.meta?.dueDate as string | undefined
-                  const priority = s.meta?.priority as string | undefined
-                  const subtitle = [
-                    dueDate ? `Due ${formatDate(dueDate)}` : null,
-                    daysOverdue != null ? `${daysOverdue} day${daysOverdue === 1 ? '' : 's'} overdue` : null,
-                  ].filter(Boolean).join(' · ')
-                  const taskTitle = (s.meta?.title as string | undefined) ?? s.message.replace(/^"|".*$/g, '').trim()
-                  return (
-                    <div
-                      key={i}
-                      style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', padding: '10px 16px', borderBottom: '1px solid var(--border-1)' }}
-                      onMouseEnter={e => (e.currentTarget.style.background = 'var(--surf-2)')}
-                      onMouseLeave={e => (e.currentTarget.style.background = '')}
-                    >
-                      {severityDot(s.severity)}
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <div style={{ fontSize: '12px', color: 'var(--text-1)', display: 'flex', alignItems: 'center', gap: '6px' }}>
-                          {taskTitle}{priorityBadge(priority)}
+                        <div className="wr-task-actions">
+                          <Btn variant="primary" onClick={() => handleMarkTaskDone(s.entityId)}>Mark done</Btn>
+                          <Btn onClick={() => handleMoveTaskNextWeek(s.entityId, s.meta?.dueDate as string)}>+7 days</Btn>
+                          <Btn variant="dismiss" onClick={() => setDismissTarget(s)}>Dismiss</Btn>
                         </div>
-                        <div style={{ fontSize: '11px', color: 'var(--text-3)', marginTop: '1px' }}>{subtitle}</div>
                       </div>
-                      <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
-                        <Btn variant="primary" onClick={() => handleMarkTaskDone(s.entityId)}>Mark done</Btn>
-                        <Btn onClick={() => handleMoveTaskNextWeek(s.entityId, s.meta?.dueDate as string)}>+7 days</Btn>
-                        <Btn variant="dismiss" onClick={() => setDismissTarget(s)}>Dismiss</Btn>
-                      </div>
-                    </div>
-                  )
-                })}
+                    )
+                  })}
 
-                {/* Due this week divider */}
-                {upcomingSignals.length > 0 && (
-                  <div style={{ padding: '8px 16px', borderBottom: '1px solid var(--border-1)' }}>
-                    <span style={{ fontSize: '10px', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
-                      Due this week
-                    </span>
-                  </div>
-                )}
-                {upcomingSignals.map((s, i) => {
-                  const dueDate = s.meta?.dueDate as string | undefined
-                  const priority = s.meta?.priority as string | undefined
-                  const subtitle = [
-                    dueDate ? `Due ${formatDate(dueDate)}` : null,
-                    dueDate ? formatDayName(dueDate) : null,
-                  ].filter(Boolean).join(' · ')
-                  const taskTitle = s.message.match(/"([^"]+)"/)?.[1] ?? s.message
-                  return (
-                    <div
-                      key={i}
-                      style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', padding: '10px 16px', borderBottom: i < upcomingSignals.length - 1 ? '1px solid var(--border-1)' : 'none' }}
-                      onMouseEnter={e => (e.currentTarget.style.background = 'var(--surf-2)')}
-                      onMouseLeave={e => (e.currentTarget.style.background = '')}
-                    >
-                      {severityDot('info')}
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <div style={{ fontSize: '12px', color: 'var(--text-1)', display: 'flex', alignItems: 'center', gap: '6px' }}>
-                          {taskTitle}{priorityBadge(priority)}
+                  {upcomingSignals.length > 0 && (
+                    <div className="wr-task-label">
+                      <span className="wr-task-label-text">Due this week</span>
+                    </div>
+                  )}
+                  {upcomingSignals.map((s, i) => {
+                    const dueDate = s.meta?.dueDate as string | undefined
+                    const priority = s.meta?.priority as string | undefined
+                    const subtitle = [
+                      dueDate ? `Due ${formatDate(dueDate)}` : null,
+                      dueDate ? formatDayName(dueDate) : null,
+                    ].filter(Boolean).join(' · ')
+                    const taskTitle = s.message.match(/"([^"]+)"/)?.[1] ?? s.message
+                    return (
+                      <div
+                        key={i}
+                        className="wr-task-row"
+                        style={{ borderBottom: i < upcomingSignals.length - 1 ? '1px solid var(--border-1)' : 'none' }}
+                        onMouseEnter={e => (e.currentTarget.style.background = 'var(--surf-2)')}
+                        onMouseLeave={e => (e.currentTarget.style.background = '')}
+                      >
+                        {severityDot('info')}
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div className="wr-task-title-row">
+                            {taskTitle}{priorityBadge(priority)}
+                          </div>
+                          <div className="wr-task-sub">{subtitle}</div>
+                        </div>
+                        <div className="wr-task-actions">
+                          <Btn variant="primary" onClick={() => handleMarkTaskDone(s.entityId)}>Mark done</Btn>
+                          <Btn variant="dismiss" onClick={() => setDismissTarget(s)}>Dismiss</Btn>
                         </div>
-                        <div style={{ fontSize: '11px', color: 'var(--text-3)', marginTop: '1px' }}>{subtitle}</div>
-                      </div>
-                      <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
-                        <Btn variant="primary" onClick={() => handleMarkTaskDone(s.entityId)}>Mark done</Btn>
-                        <Btn variant="dismiss" onClick={() => setDismissTarget(s)}>Dismiss</Btn>
                       </div>
-                    </div>
-                  )
-                })}
-              </>
-            ) : null}
-          </ReviewSection>
+                    )
+                  })}
+                </>
+              ) : null}
+            </ReviewSection>
 
-          {/* Section 4: Career Goal Staleness */}
-          <ReviewSection
-            title="Career Goal Staleness"
-            icon={ICON_GOALS}
-            signalCount={isReadOnly ? 0 : goalSignals.length}
-            criticalCount={isReadOnly ? 0 : goalSignals.filter(s => s.severity === 'critical').length}
-            warningCount={isReadOnly ? 0 : goalSignals.filter(s => s.severity === 'warning').length}
-            infoCount={isReadOnly ? 0 : goalSignals.filter(s => s.severity === 'info').length}
-            isReviewed={effectiveSectionState.goals}
-            onMarkReviewed={() => toggleSection('goals')}
-            emptyMessage="All career goals have recent activity"
-          >
-            {!isReadOnly && goalSignals.length > 0 ? (
-              <>
-                {goalSignals.map((s, i) => {
-                  const daysSince = s.meta?.daysSince as number | undefined
-                  const timePeriod = s.meta?.timePeriod as string | undefined
-                  const periodLabel =
-                    timePeriod === 'short_term' ? 'Short-term'
-                    : timePeriod === 'mid_term' ? 'Mid-term'
-                    : timePeriod === 'long_term' ? 'Long-term'
-                    : null
-                  const subtitle = [
-                    periodLabel,
-                    daysSince != null ? `No activity in ${daysSince} day${daysSince === 1 ? '' : 's'}` : null,
-                  ].filter(Boolean).join(' · ')
-                  const goalTitle = s.message.match(/"([^"]+)"/)?.[1] ?? s.message
-                  return (
-                    <div
-                      key={i}
-                      style={{ display: 'flex', alignItems: 'flex-start', gap: '10px', padding: '10px 16px', borderBottom: i < goalSignals.length - 1 ? '1px solid var(--border-1)' : 'none' }}
-                      onMouseEnter={e => (e.currentTarget.style.background = 'var(--surf-2)')}
-                      onMouseLeave={e => (e.currentTarget.style.background = '')}
-                    >
-                      {severityDot(s.severity)}
-                      <div style={{ flex: 1, minWidth: 0 }}>
-                        <div style={{ fontSize: '12px', color: 'var(--text-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                          {goalTitle}
+            {/* Section 4: Career Goal Staleness */}
+            <ReviewSection
+              title="Career Goal Staleness"
+              icon={ICON_GOALS}
+              signalCount={isReadOnly ? 0 : goalSignals.length}
+              criticalCount={isReadOnly ? 0 : goalSignals.filter(s => s.severity === 'critical').length}
+              warningCount={isReadOnly ? 0 : goalSignals.filter(s => s.severity === 'warning').length}
+              infoCount={isReadOnly ? 0 : goalSignals.filter(s => s.severity === 'info').length}
+              isReviewed={effectiveSectionState.goals}
+              onMarkReviewed={() => toggleSection('goals')}
+              emptyMessage="All career goals have recent activity"
+            >
+              {!isReadOnly && goalSignals.length > 0 ? (
+                <>
+                  {goalSignals.map((s, i) => {
+                    const daysSince = s.meta?.daysSince as number | undefined
+                    const timePeriod = s.meta?.timePeriod as string | undefined
+                    const periodLabel =
+                      timePeriod === 'short_term' ? 'Short-term'
+                      : timePeriod === 'mid_term' ? 'Mid-term'
+                      : timePeriod === 'long_term' ? 'Long-term'
+                      : null
+                    const subtitle = [
+                      periodLabel,
+                      daysSince != null ? `No activity in ${daysSince} day${daysSince === 1 ? '' : 's'}` : null,
+                    ].filter(Boolean).join(' · ')
+                    const goalTitle = s.message.match(/"([^"]+)"/)?.[1] ?? s.message
+                    return (
+                      <div
+                        key={i}
+                        className="wr-goal-row"
+                        style={{ borderBottom: i < goalSignals.length - 1 ? '1px solid var(--border-1)' : 'none' }}
+                        onMouseEnter={e => (e.currentTarget.style.background = 'var(--surf-2)')}
+                        onMouseLeave={e => (e.currentTarget.style.background = '')}
+                      >
+                        {severityDot(s.severity)}
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <div className="wr-goal-title">{goalTitle}</div>
+                          <div className="wr-goal-sub">{subtitle}</div>
+                        </div>
+                        <div className="wr-goal-actions">
+                          <Btn variant="primary" onClick={() => router.push('/career-goals')}>Update goal</Btn>
+                          <Btn variant="dismiss" onClick={() => setDismissTarget(s)}>Dismiss</Btn>
                         </div>
-                        <div style={{ fontSize: '11px', color: 'var(--text-3)', marginTop: '1px' }}>{subtitle}</div>
-                      </div>
-                      <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
-                        <Btn variant="primary" onClick={() => router.push('/career-goals')}>
-                          Update goal
-                        </Btn>
-                        <Btn variant="dismiss" onClick={() => setDismissTarget(s)}>Dismiss</Btn>
                       </div>
-                    </div>
-                  )
-                })}
-              </>
-            ) : null}
-          </ReviewSection>
+                    )
+                  })}
+                </>
+              ) : null}
+            </ReviewSection>
 
-          {/* Section 5: Week in Review */}
-          <ReviewSection
-            title="Week in Review"
-            icon={ICON_WEEK}
-            signalCount={1}
-            badgeLabel="Summary"
-            badgeVariant="info"
-            isReviewed={effectiveSectionState.week}
-            onMarkReviewed={() => toggleSection('week')}
-            defaultExpanded={false}
-          >
-            {activitySummary ? (
-              <div style={{
-                display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
-                gap: '1px', background: 'var(--border-1)',
-              }}>
-                {[
-                  { num: activitySummary.meetingsHeld.length, label: 'Meetings held' },
-                  { num: activitySummary.tasksCompleted.length, label: 'Tasks completed' },
-                  { num: activitySummary.evidenceLogged, label: 'Evidence logged' },
-                  { num: activitySummary.actionItemsCreated, label: 'Action items' },
-                ].map(cell => (
-                  <div key={cell.label} style={{ background: 'var(--surf)', padding: '14px 16px', textAlign: 'center' }}>
-                    <div style={{ fontSize: '22px', fontWeight: 500, fontFamily: 'var(--font-mono)', color: 'var(--text-1)' }}>
-                      {cell.num}
-                    </div>
-                    <div style={{ fontSize: '10px', color: 'var(--text-3)', marginTop: '2px', textTransform: 'uppercase', letterSpacing: '0.04em' }}>
-                      {cell.label}
+            {/* Section 5: Week in Review */}
+            <ReviewSection
+              title="Week in Review"
+              icon={ICON_WEEK}
+              signalCount={1}
+              badgeLabel="Summary"
+              badgeVariant="info"
+              isReviewed={effectiveSectionState.week}
+              onMarkReviewed={() => toggleSection('week')}
+              defaultExpanded={false}
+            >
+              {activitySummary ? (
+                <div className="wr-week-grid">
+                  {[
+                    { num: activitySummary.meetingsHeld.length, label: 'Meetings held' },
+                    { num: activitySummary.tasksCompleted.length, label: 'Tasks completed' },
+                    { num: activitySummary.evidenceLogged, label: 'Evidence logged' },
+                    { num: activitySummary.actionItemsCreated, label: 'Action items' },
+                  ].map(cell => (
+                    <div key={cell.label} className="wr-week-cell">
+                      <div className="wr-week-cell-num">{cell.num}</div>
+                      <div className="wr-week-cell-label">{cell.label}</div>
                     </div>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              <div style={{ padding: '16px', fontSize: '12px', color: 'var(--text-3)' }}>Loading…</div>
-            )}
-          </ReviewSection>
-
-          {/* Section 6: Reflection */}
-          <ReviewSection
-            title="Reflection"
-            icon={ICON_REFLECTION}
-            signalCount={1}
-            isReviewed={effectiveSectionState.reflection}
-            onMarkReviewed={() => toggleSection('reflection')}
-          >
-            <div style={{ padding: '16px' }}>
-              {/* AI reflection prompts */}
-              <div style={{ marginBottom: '12px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: reflectionPrompts.length > 0 ? '10px' : 0 }}>
-                  <AIButton
-                    configured={aiConfig.configured}
-                    loading={aiConfig.loading}
-                    generating={generatingPrompts}
-                    onClick={handleGenerateReflectionPrompts}
-                    label="Generate reflection prompts"
-                    tooltip={aiConfig.tooltip}
-                    showSetupLink={true}
-                    disabled={isReadOnly}
-                  />
-                  {reflectionPrompts.length > 0 && (
-                    <button
-                      onClick={() => setReflectionPrompts([])}
-                      style={{ fontSize: '11px', color: 'var(--text-3)', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
-                    >
-                      ✕ Clear
-                    </button>
-                  )}
+                  ))}
                 </div>
-                {reflectionPrompts.length > 0 && (
-                  <div style={{ display: 'grid', gap: '6px', marginBottom: '12px' }}>
-                    {reflectionPrompts.map((prompt, i) => (
-                      <div key={i} style={{
-                        display: 'flex', alignItems: 'flex-start', gap: '8px',
-                        padding: '8px 12px', background: 'var(--surf-2)',
-                        border: '1px solid var(--border-1)', borderRadius: '5px',
-                      }}>
-                        <span style={{ fontSize: '11px', color: '#00f058', flexShrink: 0, marginTop: '1px' }}>✦</span>
-                        <span style={{ fontSize: '12px', color: 'var(--text-2)', lineHeight: 1.5, fontStyle: 'italic' }}>{prompt}</span>
-                      </div>
-                    ))}
-                  </div>
-                )}
-                {reflectionPrompts.length === 0 && (
-                  <p style={{ fontSize: '11px', color: 'var(--text-3)', fontStyle: 'italic', marginBottom: '10px', lineHeight: 1.6 }}>
-                    "Take a moment to reflect on your week. What patterns are you noticing?"
-                  </p>
-                )}
-              </div>
-              <textarea
-                value={notes}
-                onChange={e => handleNotesChange(e.target.value)}
-                placeholder="What went well this week? What needs attention next week? Any concerns about the team?"
-                disabled={isReadOnly}
-                style={{
-                  width: '100%', minHeight: '100px',
-                  background: 'var(--surf-2)', border: '1px solid var(--border-2)',
-                  borderRadius: '6px', padding: '10px 12px',
-                  color: 'var(--text-1)', fontFamily: 'var(--font-sans)',
-                  fontSize: '12px', resize: 'vertical', outline: 'none', lineHeight: 1.6,
-                  boxSizing: 'border-box', opacity: isReadOnly ? 0.7 : 1,
-                }}
-                onFocus={e => { e.currentTarget.style.borderColor = 'var(--border-3)' }}
-                onBlur={e => { e.currentTarget.style.borderColor = 'var(--border-2)' }}
-              />
-              {!isReadOnly && (
-                <p style={{ fontSize: '11px', color: 'var(--text-3)', margin: '6px 0 0' }}>
-                  Auto-saves as you type
-                </p>
+              ) : (
+                <div className="wr-week-loading">Loading…</div>
               )}
-            </div>
-          </ReviewSection>
+            </ReviewSection>
 
-          {/* Section 7: Complete Review */}
-          {isCurrentWeek && (
+            {/* Section 6: Reflection */}
             <ReviewSection
-              title="Complete Review"
-              icon={ICON_COMPLETE}
+              title="Reflection"
+              icon={ICON_REFLECTION}
               signalCount={1}
-              isReviewed={false}
-              onMarkReviewed={() => {}}
-              showCheckbox={false}
-              nonInteractiveHeader={true}
+              isReviewed={effectiveSectionState.reflection}
+              onMarkReviewed={() => toggleSection('reflection')}
             >
-              <div style={{ padding: '16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px' }}>
-                <div>
-                  <div style={{ fontSize: '11px', color: 'var(--text-3)' }}>
-                    <strong style={{ color: 'var(--text-2)', fontWeight: 500 }}>{dismissed.length}</strong> dismissed
-                    {' · '}
-                    <strong style={{ color: signals.filter(s => s.severity === 'critical').length > 0 ? '#f87171' : 'var(--text-2)', fontWeight: 500 }}>
-                      {signals.filter(s => s.severity === 'critical').length}
-                    </strong> critical remaining
-                    {' · '}
-                    <strong style={{ color: 'var(--text-2)', fontWeight: 500 }}>{signals.length}</strong> total remaining
+              <div className="wr-reflection-body">
+                <div className="wr-reflection-ai-row">
+                  <div className="wr-reflection-ai-header">
+                    <AIButton
+                      configured={aiConfig.configured}
+                      loading={aiConfig.loading}
+                      generating={generatingPrompts}
+                      onClick={handleGenerateReflectionPrompts}
+                      label="Generate reflection prompts"
+                      tooltip={aiConfig.tooltip}
+                      showSetupLink={true}
+                      disabled={isReadOnly}
+                    />
+                    {reflectionPrompts.length > 0 && (
+                      <button onClick={() => setReflectionPrompts([])} className="wr-reflection-clear-btn">
+                        ✕ Clear
+                      </button>
+                    )}
                   </div>
-                  {!isCompleted && warnCount > 0 && (
-                    <div style={{ fontSize: '11px', color: '#f97316', marginTop: '4px' }}>
-                      ⚠ You have {warnCount} unresolved items. You can still complete the review or address them first.
+                  {reflectionPrompts.length > 0 && (
+                    <div className="wr-reflection-prompts">
+                      {reflectionPrompts.map((prompt, i) => (
+                        <div key={i} className="wr-reflection-prompt">
+                          <span className="wr-reflection-prompt-icon">✦</span>
+                          <span className="wr-reflection-prompt-text">{prompt}</span>
+                        </div>
+                      ))}
                     </div>
                   )}
+                  {reflectionPrompts.length === 0 && (
+                    <p className="wr-reflection-placeholder">
+                      "Take a moment to reflect on your week. What patterns are you noticing?"
+                    </p>
+                  )}
                 </div>
+                <textarea
+                  value={notes}
+                  onChange={e => handleNotesChange(e.target.value)}
+                  placeholder="What went well this week? What needs attention next week? Any concerns about the team?"
+                  disabled={isReadOnly}
+                  className="wr-reflection-textarea"
+                  style={{ opacity: isReadOnly ? 0.7 : 1 }}
+                  onFocus={e => { e.currentTarget.style.borderColor = 'var(--border-3)' }}
+                  onBlur={e => { e.currentTarget.style.borderColor = 'var(--border-2)' }}
+                />
+                {!isReadOnly && (
+                  <p className="wr-reflection-autosave">Auto-saves as you type</p>
+                )}
+              </div>
+            </ReviewSection>
 
-                {isCompleted ? (
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' }}>
-                    <span style={{ fontSize: '13px', color: '#00f058', fontWeight: 600, display: 'flex', alignItems: 'center', gap: '5px' }}>
-                      <CheckCircle style={{ width: '14px', height: '14px' }} />
-                      Week reviewed
-                    </span>
-                    <Link
-                      href={`/summary?week=${weekStart}`}
-                      style={{
-                        display: 'inline-flex', alignItems: 'center', gap: '5px',
-                        background: 'transparent', border: '1px solid var(--border-2)',
-                        borderRadius: '5px', color: 'var(--text-2)',
-                        fontSize: '11px', padding: '5px 10px',
-                        textDecoration: 'none', fontFamily: 'var(--font-sans)',
-                      }}
-                    >
-                      Generate weekly summary <ArrowRight style={{ width: '11px', height: '11px' }} />
-                    </Link>
+            {/* Section 7: Complete Review */}
+            {isCurrentWeek && (
+              <ReviewSection
+                title="Complete Review"
+                icon={ICON_COMPLETE}
+                signalCount={1}
+                isReviewed={false}
+                onMarkReviewed={() => {}}
+                showCheckbox={false}
+                nonInteractiveHeader={true}
+              >
+                <div className="wr-complete-body">
+                  <div>
+                    <div className="wr-complete-stats">
+                      <strong style={{ color: 'var(--text-2)', fontWeight: 500 }}>{dismissed.length}</strong> dismissed
+                      {' · '}
+                      <strong style={{ color: signals.filter(s => s.severity === 'critical').length > 0 ? '#f87171' : 'var(--text-2)', fontWeight: 500 }}>
+                        {signals.filter(s => s.severity === 'critical').length}
+                      </strong> critical remaining
+                      {' · '}
+                      <strong style={{ color: 'var(--text-2)', fontWeight: 500 }}>{signals.length}</strong> total remaining
+                    </div>
+                    {!isCompleted && warnCount > 0 && (
+                      <div className="wr-complete-warn">
+                        ⚠ You have {warnCount} unresolved items. You can still complete the review or address them first.
+                      </div>
+                    )}
+                  </div>
+
+                  {isCompleted ? (
+                    <div className="wr-completed-row">
+                      <span className="wr-completed-label">
+                        <CheckCircle style={{ width: '14px', height: '14px' }} />
+                        Week reviewed
+                      </span>
+                      <Link href={`/summary?week=${weekStart}`} className="wr-summary-link">
+                        Generate weekly summary <ArrowRight style={{ width: '11px', height: '11px' }} />
+                      </Link>
+                      <button onClick={handleReopen} className="wr-reopen-btn">Reopen</button>
+                    </div>
+                  ) : (
                     <button
-                      onClick={handleReopen}
-                      style={{
-                        background: 'transparent', border: '1px solid var(--border-2)',
-                        borderRadius: '5px', color: 'var(--text-3)',
-                        fontSize: '11px', padding: '5px 10px', cursor: 'pointer',
-                      }}
+                      onClick={handleComplete}
+                      disabled={completing}
+                      className="wr-complete-btn"
                     >
-                      Reopen
+                      {completing ? 'Saving…' : '✓ Mark Week as Reviewed'}
                     </button>
-                  </div>
-                ) : (
-                  <button
-                    onClick={handleComplete}
-                    disabled={completing}
-                    style={{
-                      background: 'linear-gradient(90deg, #00ffe5, #00f058)',
-                      border: 'none', borderRadius: '5px',
-                      color: '#0a1a0a', fontSize: '12px', fontWeight: 600,
-                      padding: '5px 13px', cursor: completing ? 'not-allowed' : 'pointer',
-                      opacity: completing ? 0.7 : 1, fontFamily: 'var(--font-sans)',
-                    }}
-                  >
-                    {completing ? 'Saving…' : '✓ Mark Week as Reviewed'}
-                  </button>
-                )}
-              </div>
-            </ReviewSection>
-          )}
+                  )}
+                </div>
+              </ReviewSection>
+            )}
 
-        </div>
-      )}
+          </div>
+        )}
 
-      {/* Dismiss dialog */}
-      {dismissTarget && (
-        <DismissDialog
-          onConfirm={(note) => handleDismiss(dismissTarget, note)}
-          onCancel={() => setDismissTarget(null)}
-        />
-      )}
-    </div>
+        {/* Dismiss dialog */}
+        {dismissTarget && (
+          <DismissDialog
+            onConfirm={(note) => handleDismiss(dismissTarget, note)}
+            onCancel={() => setDismissTarget(null)}
+          />
+        )}
+      </div>
     </>
   )
 }
diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
index 008d127..1f46fe4 100644
--- a/app/(dashboard)/settings/page.tsx
+++ b/app/(dashboard)/settings/page.tsx
@@ -1,19 +1,35 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
-import { User, Check, FileText, Plus, Trash2, ChevronDown, ChevronRight, RotateCcw } from "lucide-react"
+import { User, Check, FileText, Plus, Trash2, ChevronDown, ChevronRight, RotateCcw, Loader2 } from "lucide-react"
 import { useTemplates, type MeetingTemplate } from "@/lib/hooks/use-templates"
 import { AISettingsCard } from "@/components/settings/ai-settings-card"
+import { createClient } from "@/lib/supabase/client"
 
 export default function SettingsPage() {
-  const [preferredName, setPreferredName] = useState("User")
-  const [email] = useState("user@example.com")
+  const [preferredName, setPreferredName] = useState("")
+  const [email, setEmail] = useState("")
   const [saveSuccess, setSaveSuccess] = useState(false)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    const supabase = createClient()
+    supabase.auth.getUser().then(async ({ data }) => {
+      if (!data.user) return
+      if (data.user.email) setEmail(data.user.email)
+      const { data: profile } = await supabase
+        .from("user_profiles")
+        .select("name")
+        .eq("id", data.user.id)
+        .single()
+      if (profile?.name) setPreferredName(profile.name)
+    })
+  }, [])
 
   const { templates, deletedTemplates, addTemplate, updateTemplate, deleteTemplate, restoreTemplate } = useTemplates()
   const [expandedTemplate, setExpandedTemplate] = useState<string | null>(null)
@@ -22,9 +38,20 @@ export default function SettingsPage() {
   const [newName, setNewName] = useState("")
   const [newNotes, setNewNotes] = useState("")
 
-  const handleSave = () => {
-    setSaveSuccess(true)
-    setTimeout(() => setSaveSuccess(false), 3000)
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const supabase = createClient()
+      const { data: { user } } = await supabase.auth.getUser()
+      if (!user) return
+      await supabase
+        .from("user_profiles")
+        .upsert({ id: user.id, name: preferredName, email: user.email }, { onConflict: "id" })
+      setSaveSuccess(true)
+      setTimeout(() => setSaveSuccess(false), 3000)
+    } finally {
+      setSaving(false)
+    }
   }
 
   const handleStartEdit = (template: MeetingTemplate) => {
@@ -165,10 +192,10 @@ export default function SettingsPage() {
                       {template.name}
                     </div>
                     <div className="flex gap-2" onClick={(e) => e.stopPropagation()}>
-                      <Button variant="ghost" size="sm" className="h-7 px-2 text-xs" onClick={() => isEditing ? handleCancelEdit() : handleStartEdit(template)}>
+                      <Button variant="ghost" size="sm" className="h-7 px-2 text-[13px]" onClick={() => isEditing ? handleCancelEdit() : handleStartEdit(template)}>
                         {isEditing ? "Cancel" : "Edit"}
                       </Button>
-                      <Button variant="ghost" size="sm" className="h-7 px-2 text-xs text-red-400 hover:text-red-300" onClick={() => deleteTemplate(template.id)}>
+                      <Button variant="ghost" size="sm" className="h-7 px-2 text-[13px] text-red-400 hover:text-red-300" onClick={() => deleteTemplate(template.id)}>
                         <Trash2 className="h-3.5 w-3.5" />
                       </Button>
                     </div>
@@ -192,7 +219,7 @@ export default function SettingsPage() {
                               value={editingTemplate.notes}
                               onChange={(e) => setEditingTemplate({ ...editingTemplate, notes: e.target.value })}
                               rows={8}
-                              className="bg-[#262626] border-[#383838] text-gray-100 resize-none font-mono text-xs"
+                              className="bg-[#262626] border-[#383838] text-gray-100 resize-none font-mono text-[13px]"
                             />
                           </div>
                           <div className="flex gap-2 justify-end">
@@ -201,7 +228,7 @@ export default function SettingsPage() {
                           </div>
                         </>
                       ) : (
-                        <pre className="text-xs text-gray-400 whitespace-pre-wrap font-mono leading-relaxed">
+                        <pre className="text-[13px] text-gray-400 whitespace-pre-wrap font-mono leading-relaxed">
                           {template.notes || <span className="italic">No notes content</span>}
                         </pre>
                       )}
@@ -229,7 +256,7 @@ export default function SettingsPage() {
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="h-7 px-2 text-xs text-gray-400 hover:text-gray-200"
+                        className="h-7 px-2 text-[13px] text-gray-400 hover:text-gray-200"
                         onClick={() => restoreTemplate(template.id)}
                       >
                         <RotateCcw className="h-3.5 w-3.5 mr-1" />
@@ -248,12 +275,11 @@ export default function SettingsPage() {
 
         <div className="flex items-center justify-between">
           <p className="text-gray-400">Changes will be saved to your account</p>
-          <Button onClick={handleSave} className="min-w-[120px]">
-            {saveSuccess ? (
-              <>
-                <Check className="h-4 w-4 mr-2" />
-                Saved!
-              </>
+          <Button onClick={handleSave} disabled={saving} className="min-w-[120px]">
+            {saving ? (
+              <><Loader2 className="h-4 w-4 mr-2 animate-spin" />Saving…</>
+            ) : saveSuccess ? (
+              <><Check className="h-4 w-4 mr-2" />Saved!</>
             ) : (
               "Save Changes"
             )}
diff --git a/app/(dashboard)/summary/page.tsx b/app/(dashboard)/summary/page.tsx
index 5dc3b0e..1728b1a 100644
--- a/app/(dashboard)/summary/page.tsx
+++ b/app/(dashboard)/summary/page.tsx
@@ -46,35 +46,26 @@ function PreviewSection({ title, count, children }: { title: string; count: numb
   const [open, setOpen] = useState(false)
   if (count === 0) return null
   return (
-    <div style={{ borderBottom: '1px solid var(--border-1)' }}>
-      <button
-        onClick={() => setOpen(o => !o)}
-        style={{
-          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          padding: '8px 12px', background: 'none', border: 'none', cursor: 'pointer',
-          fontFamily: 'var(--font-sans)',
-        }}
-      >
-        <span style={{ fontSize: 'var(--text-meta)', color: 'var(--text-1)', fontWeight: 500 }}>{title}</span>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
-          <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', fontFamily: 'var(--font-mono)' }}>{count}</span>
-          {open
-            ? <ChevronDown style={{ width: '11px', height: '11px', color: 'var(--text-3)' }} />
-            : <ChevronRt style={{ width: '11px', height: '11px', color: 'var(--text-3)' }} />
-          }
+    <div className="sum-preview-section">
+      <button onClick={() => setOpen(o => !o)} className="sum-preview-toggle">
+        <span className="sum-preview-toggle-title">{title}</span>
+        <div className="sum-preview-toggle-right">
+          <span className="sum-preview-toggle-count">{count}</span>
+          <span className="sum-preview-toggle-icon">
+            {open
+              ? <ChevronDown style={{ width: '11px', height: '11px', color: 'var(--text-3)' }} />
+              : <ChevronRt style={{ width: '11px', height: '11px', color: 'var(--text-3)' }} />
+            }
+          </span>
         </div>
       </button>
-      {open && <div style={{ padding: '0 12px 10px' }}>{children}</div>}
+      {open && <div className="sum-preview-body">{children}</div>}
     </div>
   )
 }
 
 function PreviewItem({ children }: { children: React.ReactNode }) {
-  return (
-    <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-2)', padding: '3px 0', borderBottom: '1px solid var(--border-1)' }}>
-      {children}
-    </div>
-  )
+  return <div className="sum-preview-item">{children}</div>
 }
 
 // ── Export button ─────────────────────────────────────────────────────────────
@@ -85,16 +76,7 @@ function ExportBtn({
   return (
     <button
       onClick={onClick}
-      style={{
-        display: 'inline-flex', alignItems: 'center', gap: '5px',
-        padding: primary ? '5px 12px' : '5px 10px',
-        background: primary ? 'linear-gradient(90deg, #00ffe5 0%, #00f058 100%)' : 'none',
-        border: primary ? 'none' : '1px solid var(--border-2)',
-        color: primary ? '#0a1a0a' : 'var(--text-2)',
-        borderRadius: '4px', cursor: 'pointer',
-        fontSize: 'var(--text-caption)', fontWeight: primary ? 600 : 400,
-        fontFamily: 'var(--font-sans)',
-      }}
+      className={`sum-export-btn ${primary ? 'sum-export-btn--primary' : 'sum-export-btn--secondary'}`}
     >
       {icon} {label}
     </button>
@@ -121,7 +103,6 @@ export default function SummaryPage() {
 
   const { data, loading, error, refetch } = useWeeklySummaryData(weekStart)
 
-  // Load existing saved summary on week change
   useEffect(() => {
     setContent('')
     setIsEdited(false)
@@ -139,7 +120,6 @@ export default function SummaryPage() {
     })
   }, [weekStart])
 
-  // Auto-generate when data loads (initial) or after a forced regenerate
   useEffect(() => {
     if (!data || loading) return
     if (!pendingRegenerate.current && content) return
@@ -235,41 +215,31 @@ export default function SummaryPage() {
     <>
       {/* Top bar */}
       <div className="page-topbar">
-        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+        <div className="sum-topbar-left">
           <span className="page-topbar-title">Weekly Summary</span>
-          {saving && (
-            <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)' }}>saving…</span>
-          )}
+          {saving && <span className="sum-saving">saving…</span>}
         </div>
 
         {/* Week nav */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
-          <button onClick={prevWeek} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: '4px', display: 'flex', alignItems: 'center' }}>
+        <div className="sum-nav">
+          <button onClick={prevWeek} className="sum-nav-btn">
             <ChevronLeft style={{ width: '13px', height: '13px' }} />
           </button>
-          <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-2)', fontFamily: 'var(--font-sans)', minWidth: '140px', textAlign: 'center' }}>
-            {formatWeekRange(weekStart)}
-          </span>
-          <button onClick={nextWeek} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', padding: '4px', display: 'flex', alignItems: 'center' }}>
+          <span className="sum-nav-range">{formatWeekRange(weekStart)}</span>
+          <button onClick={nextWeek} className="sum-nav-btn">
             <ChevronRight style={{ width: '13px', height: '13px' }} />
           </button>
           {!isCurrentWeek && (
-            <button onClick={goToday} style={{ background: 'none', border: '1px solid var(--border-2)', borderRadius: '3px', cursor: 'pointer', color: 'var(--text-3)', padding: '2px 6px', fontSize: 'var(--text-caption)', fontFamily: 'var(--font-sans)' }}>
-              This week
-            </button>
+            <button onClick={goToday} className="sum-nav-today">This week</button>
           )}
         </div>
       </div>
 
-      <div style={{ display: 'flex', height: 'calc(100vh - 40px)', overflow: 'hidden' }}>
+      <div className="sum-layout">
         {/* Left pane — editable summary */}
-        <div style={{ flex: '0 0 60%', display: 'flex', flexDirection: 'column', borderRight: '1px solid var(--border-1)', overflow: 'hidden' }}>
+        <div className="sum-left">
           {/* Toolbar */}
-          <div style={{
-            padding: '8px 16px', borderBottom: '1px solid var(--border-1)',
-            display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0,
-            background: 'var(--surf)',
-          }}>
+          <div className="sum-toolbar">
             <ExportBtn
               label={copyState === 'copied' ? 'Copied ✓' : 'Copy markdown'}
               icon={<Copy style={{ width: '11px', height: '11px' }} />}
@@ -286,29 +256,23 @@ export default function SummaryPage() {
               icon={<Download style={{ width: '11px', height: '11px' }} />}
               onClick={downloadMd}
             />
-            <div style={{ flex: 1 }} />
+            <div className="sum-toolbar-spacer" />
             {generatedAt && (
-              <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)' }}>
+              <span className="sum-generated-at">
                 Generated at {fmtTime(generatedAt)}
-                {isEdited && <span style={{ color: '#ffd43b', marginLeft: '6px' }}>· edited</span>}
+                {isEdited && <span className="sum-edited-mark">· edited</span>}
               </span>
             )}
             <button
               onClick={handleRegenerate}
               disabled={regenerating || loading}
-              style={{
-                display: 'inline-flex', alignItems: 'center', gap: '4px',
-                background: 'none', border: '1px solid var(--border-2)', borderRadius: '4px',
-                color: 'var(--text-3)', cursor: 'pointer', padding: '3px 8px',
-                fontSize: 'var(--text-caption)', fontFamily: 'var(--font-sans)',
-                opacity: regenerating || loading ? 0.5 : 1,
-              }}
+              className="sum-regen-btn"
             >
               <RefreshCw style={{ width: '10px', height: '10px' }} />
               Regenerate
             </button>
             {/* AI rewrite menu */}
-            <div style={{ position: 'relative' }}>
+            <div className="sum-rewrite-wrap">
               <AIButton
                 configured={aiConfig.configured}
                 loading={aiConfig.loading}
@@ -319,36 +283,17 @@ export default function SummaryPage() {
                 showSetupLink={false}
               />
               {showRewriteMenu && aiConfig.configured && (
-                <div style={{
-                  position: 'absolute', top: 'calc(100% + 4px)', right: 0, zIndex: 50,
-                  background: 'var(--surf)', border: '1px solid var(--border-2)', borderRadius: '6px',
-                  minWidth: '160px', overflow: 'hidden',
-                }}>
+                <div className="sum-rewrite-menu">
                   {Object.keys(SUMMARY_REWRITE_PROMPTS).map(fmt => (
                     <button
                       key={fmt}
                       onClick={() => handleRewrite(fmt)}
-                      style={{
-                        display: 'block', width: '100%', padding: '8px 14px', textAlign: 'left',
-                        background: 'none', border: 'none', cursor: 'pointer',
-                        fontSize: 'var(--text-label)', color: 'var(--text-2)', fontFamily: 'var(--font-sans)',
-                      }}
-                      onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = 'var(--surf-2)')}
-                      onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = 'none')}
+                      className="sum-rewrite-item"
                     >
                       {SUMMARY_REWRITE_LABELS[fmt]}
                     </button>
                   ))}
-                  <button
-                    onClick={() => handleRewrite('custom')}
-                    style={{
-                      display: 'block', width: '100%', padding: '8px 14px', textAlign: 'left',
-                      background: 'none', borderTop: '1px solid var(--border-1)', borderRight: 'none', borderBottom: 'none', borderLeft: 'none',
-                      cursor: 'pointer', fontSize: 'var(--text-label)', color: 'var(--text-3)', fontFamily: 'var(--font-sans)',
-                    }}
-                    onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = 'var(--surf-2)')}
-                    onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = 'none')}
-                  >
+                  <button onClick={() => handleRewrite('custom')} className="sum-rewrite-custom">
                     {SUMMARY_REWRITE_LABELS['custom']}
                   </button>
                 </div>
@@ -358,24 +303,18 @@ export default function SummaryPage() {
 
           {/* Editor */}
           {loading ? (
-            <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-3)', fontSize: 'var(--text-meta)' }}>
-              Loading…
-            </div>
+            <div className="sum-editor-loading">Loading…</div>
           ) : error ? (
-            <div style={{ flex: 1, padding: '24px', color: '#ff6b6b', fontSize: 'var(--text-meta)', display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
+            <div className="sum-editor-error">
               <AlertCircle style={{ width: '14px', height: '14px', flexShrink: 0, marginTop: '2px' }} />
               {error}
             </div>
           ) : isEmpty && !content ? (
-            <div style={{ flex: 1, padding: '32px', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '12px' }}>
-              <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)', textAlign: 'center', maxWidth: '320px' }}>
+            <div className="sum-editor-empty">
+              <div className="sum-editor-empty-text">
                 Your weekly summary will appear here once you start tracking tasks and meetings in Caliber.
               </div>
-              <div style={{
-                background: 'var(--surf-2)', border: '1px solid var(--border-1)', borderRadius: '6px',
-                padding: '16px', fontSize: 'var(--text-caption)', color: 'var(--text-3)',
-                fontFamily: 'var(--font-mono)', maxWidth: '400px', whiteSpace: 'pre-wrap', lineHeight: 1.6,
-              }}>
+              <div className="sum-editor-sample">
                 {`# Week Summary — sample\n\n## Completed\n- Finish sprint planning ⚡\n- Review PR backlog\n\n## Meetings\n3 meetings (2 1:1s, 1 team)\n\n## People\n- 1:1s held with: Alice, Bob`}
               </div>
             </div>
@@ -384,22 +323,15 @@ export default function SummaryPage() {
               value={content}
               onChange={e => handleContentChange(e.target.value)}
               spellCheck={false}
-              style={{
-                flex: 1, padding: '20px 24px', background: 'var(--surf)',
-                color: 'var(--text-1)', border: 'none', outline: 'none',
-                fontFamily: 'var(--font-mono)', fontSize: '13px', lineHeight: 1.7,
-                resize: 'none', overflowY: 'auto',
-              }}
+              className="sum-textarea"
             />
           )}
         </div>
 
         {/* Right pane — data preview */}
-        <div style={{ flex: '0 0 40%', overflowY: 'auto', background: 'var(--surf-2)' }}>
-          <div style={{ padding: '10px 12px 6px', borderBottom: '1px solid var(--border-1)' }}>
-            <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', fontFamily: 'var(--font-sans)' }}>
-              Source data
-            </span>
+        <div className="sum-right">
+          <div className="sum-right-header">
+            <span className="sum-right-header-label">Source data</span>
           </div>
 
           {data && (
@@ -407,7 +339,7 @@ export default function SummaryPage() {
               <PreviewSection title="Completed tasks" count={data.completedTasks.length}>
                 {data.completedTasks.map(t => (
                   <PreviewItem key={t.id}>
-                    <Link href={`/tasks`} style={{ textDecoration: 'none', color: 'var(--text-2)' }}>
+                    <Link href="/tasks" className="sum-preview-item-link">
                       <span style={{ color: priorityColor(t.priority), marginRight: '5px', fontSize: '10px' }}>●</span>
                       {t.title}
                     </Link>
@@ -446,7 +378,7 @@ export default function SummaryPage() {
               <PreviewSection title="Meetings this week" count={data.meetings.length}>
                 {data.meetings.map(m => (
                   <PreviewItem key={m.id}>
-                    <Link href={`/meetings`} style={{ textDecoration: 'none', color: 'var(--text-2)' }}>
+                    <Link href="/meetings" className="sum-preview-item-link">
                       <span style={{ color: 'var(--text-3)', marginRight: '5px', fontSize: 'var(--text-caption)' }}>{m.type}</span>
                       {m.title}
                       {m.personName && <span style={{ color: 'var(--text-3)', marginLeft: '6px' }}>· {m.personName}</span>}
@@ -459,9 +391,7 @@ export default function SummaryPage() {
               <PreviewSection title="People seen this week" count={data.activePeople.filter(p => p.seenThisWeek).length}>
                 {data.activePeople.filter(p => p.seenThisWeek).map(p => (
                   <PreviewItem key={p.id}>
-                    <Link href={`/people/${p.id}`} style={{ textDecoration: 'none', color: 'var(--text-2)' }}>
-                      {p.name}
-                    </Link>
+                    <Link href={`/people/${p.id}`} className="sum-preview-item-link">{p.name}</Link>
                   </PreviewItem>
                 ))}
               </PreviewSection>
@@ -469,9 +399,7 @@ export default function SummaryPage() {
               <PreviewSection title="People not seen" count={data.activePeople.filter(p => !p.seenThisWeek).length}>
                 {data.activePeople.filter(p => !p.seenThisWeek).map(p => (
                   <PreviewItem key={p.id}>
-                    <Link href={`/people/${p.id}`} style={{ textDecoration: 'none', color: 'var(--text-3)' }}>
-                      {p.name}
-                    </Link>
+                    <Link href={`/people/${p.id}`} style={{ textDecoration: 'none', color: 'var(--text-3)' }}>{p.name}</Link>
                   </PreviewItem>
                 ))}
               </PreviewSection>
@@ -508,9 +436,7 @@ export default function SummaryPage() {
 
               {data.reflectionNotes && (
                 <PreviewSection title="Weekly review notes" count={1}>
-                  <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-2)', padding: '4px 0', lineHeight: 1.5, whiteSpace: 'pre-wrap' }}>
-                    {data.reflectionNotes}
-                  </div>
+                  <div className="sum-preview-notes">{data.reflectionNotes}</div>
                 </PreviewSection>
               )}
 
diff --git a/app/(dashboard)/tasks/page.tsx b/app/(dashboard)/tasks/page.tsx
index 665f670..ede2155 100644
--- a/app/(dashboard)/tasks/page.tsx
+++ b/app/(dashboard)/tasks/page.tsx
@@ -343,7 +343,7 @@ export default function TasksPage() {
         <div className="page-topbar">
           <span className="page-topbar-title">Tasks</span>
         </div>
-        <div style={{ fontSize: "var(--text-meta)", color: "var(--text-3)", padding: "48px 32px" }}>Loading...</div>
+        <div className="page-loading">Loading...</div>
       </>
     )
   }
@@ -359,7 +359,7 @@ export default function TasksPage() {
       {/* Top bar */}
       <div className="page-topbar">
         <span className="page-topbar-title">Tasks</span>
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <div className="page-actions-row">
           <NaturalLanguageTaskInput
             people={people}
             onConfirm={handleNaturalLanguageTask}
@@ -375,38 +375,10 @@ export default function TasksPage() {
         <div>
           {/* Section header */}
           <div className="flex items-center justify-between mb-3">
-            <span style={{
-              fontSize: "var(--text-overline)",
-              fontWeight: 500,
-              letterSpacing: "0.07em",
-              color: "var(--text-3)",
-              textTransform: "uppercase",
-            }}>This week</span>
-            <div style={{ display: "flex", gap: "6px" }}>
-              <button style={{
-                background: "transparent",
-                border: "1px solid var(--border-2)",
-                color: "var(--text-2)",
-                fontSize: "var(--text-caption)",
-                padding: "3px 8px",
-                borderRadius: "4px",
-                cursor: "pointer",
-              }}
-                onMouseEnter={e => { e.currentTarget.style.color = "var(--text-1)" }}
-                onMouseLeave={e => { e.currentTarget.style.color = "var(--text-2)" }}
-              >Filter</button>
-              <button style={{
-                background: "transparent",
-                border: "1px solid var(--border-2)",
-                color: "var(--text-2)",
-                fontSize: "var(--text-caption)",
-                padding: "3px 8px",
-                borderRadius: "4px",
-                cursor: "pointer",
-              }}
-                onMouseEnter={e => { e.currentTarget.style.color = "var(--text-1)" }}
-                onMouseLeave={e => { e.currentTarget.style.color = "var(--text-2)" }}
-              >Sort</button>
+            <span className="page-section-label">This week</span>
+            <div className="flex gap-1.5">
+              <button className="page-section-filter-btn">Filter</button>
+              <button className="page-section-filter-btn">Sort</button>
             </div>
           </div>
 
@@ -429,13 +401,7 @@ export default function TasksPage() {
         <div>
           {/* Section header */}
           <div className="flex items-center justify-between mb-3">
-            <span style={{
-              fontSize: "var(--text-overline)",
-              fontWeight: 500,
-              letterSpacing: "0.07em",
-              color: "var(--text-3)",
-              textTransform: "uppercase",
-            }}>Backlog</span>
+            <span className="page-section-label">Backlog</span>
           </div>
           <BacklogTable
             tasks={backlogTasks}
diff --git a/app/(dashboard)/team-health/page.tsx b/app/(dashboard)/team-health/page.tsx
index ee564c4..b601cf7 100644
--- a/app/(dashboard)/team-health/page.tsx
+++ b/app/(dashboard)/team-health/page.tsx
@@ -40,51 +40,32 @@ function GapBar({ areaName, pctBelowExpected, pctAtExpected, pctAboveExpected, t
   }
 
   return (
-    <div style={{ marginBottom: '10px' }}>
-      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '4px' }}>
-        <span style={{
-          fontSize: 'var(--text-label)',
-          color: 'var(--text-2)',
-          width: '200px',
-          flexShrink: 0,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}>
-          {areaName}
-        </span>
+    <div className="th-gapbar">
+      <div className="th-gapbar-row">
+        <span className="th-gapbar-name">{areaName}</span>
 
         {/* Stacked bar */}
-        <div style={{
-          flex: 1,
-          height: '14px',
-          borderRadius: '3px',
-          overflow: 'hidden',
-          background: 'var(--surf-3)',
-          display: 'flex',
-        }}>
+        <div className="th-gapbar-track">
           {pctBelow > 0 && (
-            <div style={{ width: `${pctBelow}%`, background: barColors.below, transition: 'width 0.3s' }} title={`${pctBelow}% below expected`} />
+            <div className="th-gapbar-segment" style={{ width: `${pctBelow}%`, background: barColors.below }} title={`${pctBelow}% below expected`} />
           )}
           {pctAt > 0 && (
-            <div style={{ width: `${pctAt}%`, background: barColors.at, transition: 'width 0.3s' }} title={`${pctAt}% at expected`} />
+            <div className="th-gapbar-segment" style={{ width: `${pctAt}%`, background: barColors.at }} title={`${pctAt}% at expected`} />
           )}
           {pctAbove > 0 && (
-            <div style={{ width: `${pctAbove}%`, background: barColors.above, transition: 'width 0.3s' }} title={`${pctAbove}% above expected`} />
+            <div className="th-gapbar-segment" style={{ width: `${pctAbove}%`, background: barColors.above }} title={`${pctAbove}% above expected`} />
           )}
         </div>
 
         {/* Labels */}
-        <div style={{ display: 'flex', gap: '8px', width: '200px', flexShrink: 0, justifyContent: 'flex-end' }}>
+        <div className="th-gapbar-labels">
           {pctBelow > 0 && (
-            <span style={{ fontSize: 'var(--text-caption)', color: barColors.below, fontVariantNumeric: 'tabular-nums' }}>
+            <span className="th-gapbar-pct" style={{ color: barColors.below }}>
               {pctBelow}% below ({belowExpected}/{totalAssessed})
             </span>
           )}
           {pctBelow === 0 && (
-            <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', fontVariantNumeric: 'tabular-nums' }}>
-              ✓ {totalAssessed} assessed
-            </span>
+            <span className="th-gapbar-ok">✓ {totalAssessed} assessed</span>
           )}
         </div>
       </div>
@@ -96,7 +77,7 @@ function GapBar({ areaName, pctBelowExpected, pctAtExpected, pctAboveExpected, t
 
 function ChartLegend() {
   return (
-    <div style={{ display: 'flex', gap: '16px', marginBottom: '16px', flexWrap: 'wrap' }}>
+    <div className="th-legend">
       {[
         { color: '#f87171', label: 'Below expected (≥60%)' },
         { color: '#fbbf24', label: 'Below expected (35–59%)' },
@@ -104,9 +85,9 @@ function ChartLegend() {
         { color: '#4ade80', label: 'At expected' },
         { color: '#34d399', label: 'Above expected' },
       ].map(({ color, label }) => (
-        <div key={label} style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-          <span style={{ width: '10px', height: '10px', borderRadius: '2px', background: color, display: 'inline-block', flexShrink: 0 }} />
-          <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)' }}>{label}</span>
+        <div key={label} className="th-legend-item">
+          <span className="th-legend-dot" style={{ background: color }} />
+          <span className="th-legend-label">{label}</span>
         </div>
       ))}
     </div>
@@ -117,13 +98,11 @@ function ChartLegend() {
 
 function AINarrative({ bullets }: { bullets: string[] }) {
   return (
-    <ul style={{ margin: 0, padding: '0 0 0 18px' }}>
-      {bullets.map((b, i) => (
-        <li key={i} style={{ fontSize: 'var(--text-label)', color: 'var(--text-2)', marginBottom: '6px', lineHeight: 1.5 }}>
-          {b}
-        </li>
-      ))}
-    </ul>
+    <div className="th-ai-narrative">
+      <ul>
+        {bullets.map((b, i) => <li key={i}>{b}</li>)}
+      </ul>
+    </div>
   )
 }
 
@@ -131,7 +110,7 @@ function AINarrative({ bullets }: { bullets: string[] }) {
 
 function EmptyState({ assessedPeople, totalPeople }: { assessedPeople: number; totalPeople: number }) {
   return (
-    <div style={{ textAlign: 'center', padding: '48px 24px', color: 'var(--text-3)' }}>
+    <div className="th-empty">
       <Activity style={{ width: '32px', height: '32px', margin: '0 auto 12px', opacity: 0.4 }} />
       {totalPeople === 0 ? (
         <p>No active team members found. Add people first.</p>
@@ -154,18 +133,14 @@ interface TeamFilterProps {
 
 function TeamFilter({ teams, selectedTeamId, onChange }: TeamFilterProps) {
   return (
-    <div style={{ display: 'flex', gap: '6px', flexWrap: 'wrap' }}>
+    <div className="th-filter-row">
       <button
         onClick={() => onChange(null)}
+        className="th-filter-btn"
         style={{
           background: selectedTeamId === null ? 'var(--surf-3)' : 'var(--surf-2)',
           border: `1px solid ${selectedTeamId === null ? 'var(--border-3)' : 'var(--border-1)'}`,
-          borderRadius: '4px',
           color: selectedTeamId === null ? 'var(--text-1)' : 'var(--text-3)',
-          fontSize: 'var(--text-meta)',
-          padding: '4px 10px',
-          cursor: 'pointer',
-          fontFamily: 'var(--font-sans)',
         }}
       >
         All teams
@@ -174,15 +149,11 @@ function TeamFilter({ teams, selectedTeamId, onChange }: TeamFilterProps) {
         <button
           key={t.id}
           onClick={() => onChange(t.id)}
+          className="th-filter-btn"
           style={{
             background: selectedTeamId === t.id ? 'var(--surf-3)' : 'var(--surf-2)',
             border: `1px solid ${selectedTeamId === t.id ? 'var(--border-3)' : 'var(--border-1)'}`,
-            borderRadius: '4px',
             color: selectedTeamId === t.id ? 'var(--text-1)' : 'var(--text-3)',
-            fontSize: 'var(--text-meta)',
-            padding: '4px 10px',
-            cursor: 'pointer',
-            fontFamily: 'var(--font-sans)',
           }}
         >
           {t.name}
@@ -201,28 +172,28 @@ function StatsStrip({ snapshot }: { snapshot: TeamCompetencySnapshot }) {
     : 0
 
   return (
-    <div style={{ display: 'flex', gap: '12px', marginBottom: '20px', flexWrap: 'wrap' }}>
-      <div style={{ background: 'var(--surf)', border: '1px solid var(--border-1)', borderRadius: '6px', padding: '10px 16px', minWidth: '120px' }}>
-        <div style={{ fontSize: 'var(--text-overline)', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '2px' }}>Assessed</div>
-        <div style={{ fontSize: 'var(--text-section)', fontWeight: 700, color: 'var(--text-1)' }}>
+    <div className="th-stats-strip">
+      <div className="th-stat-card">
+        <div className="th-stat-label">Assessed</div>
+        <div className="th-stat-val" style={{ color: 'var(--text-1)' }}>
           {snapshot.assessedPeople}/{snapshot.totalPeople}
         </div>
       </div>
-      <div style={{ background: 'var(--surf)', border: '1px solid var(--border-1)', borderRadius: '6px', padding: '10px 16px', minWidth: '120px' }}>
-        <div style={{ fontSize: 'var(--text-overline)', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '2px' }}>Areas tracked</div>
-        <div style={{ fontSize: 'var(--text-section)', fontWeight: 700, color: 'var(--text-1)' }}>{snapshot.areas.length}</div>
+      <div className="th-stat-card">
+        <div className="th-stat-label">Areas tracked</div>
+        <div className="th-stat-val" style={{ color: 'var(--text-1)' }}>{snapshot.areas.length}</div>
       </div>
-      <div style={{ background: 'var(--surf)', border: '1px solid var(--border-1)', borderRadius: '6px', padding: '10px 16px', minWidth: '160px' }}>
-        <div style={{ fontSize: 'var(--text-overline)', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '2px' }}>Avg % below expected</div>
-        <div style={{ fontSize: 'var(--text-section)', fontWeight: 700, color: avgPctBelow >= 50 ? '#f87171' : avgPctBelow >= 30 ? '#fbbf24' : '#4ade80' }}>
+      <div className="th-stat-card">
+        <div className="th-stat-label">Avg % below expected</div>
+        <div className="th-stat-val" style={{ color: avgPctBelow >= 50 ? '#f87171' : avgPctBelow >= 30 ? '#fbbf24' : '#4ade80' }}>
           {Math.round(avgPctBelow)}%
         </div>
       </div>
       {topGap && (
-        <div style={{ background: 'var(--surf)', border: '1px solid var(--border-1)', borderRadius: '6px', padding: '10px 16px', flex: 1, minWidth: '200px' }}>
-          <div style={{ fontSize: 'var(--text-overline)', color: 'var(--text-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: '2px' }}>Top gap area</div>
-          <div style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: '#f87171' }}>
-            {topGap.areaName} <span style={{ fontWeight: 400, color: 'var(--text-3)', fontSize: 'var(--text-meta)' }}>({Math.round(topGap.pctBelowExpected)}% below)</span>
+        <div className="th-stat-card th-stat-card--wide">
+          <div className="th-stat-label">Top gap area</div>
+          <div className="th-stat-top-name">
+            {topGap.areaName} <span className="th-stat-top-pct">({Math.round(topGap.pctBelowExpected)}% below)</span>
           </div>
         </div>
       )}
@@ -245,12 +216,10 @@ export default function TeamHealthPage() {
 
   const aiConfig = useAIConfig()
 
-  // Load teams once
   useEffect(() => {
     getTeams().then(ts => setTeams(ts.filter(t => t.status === 'active'))).catch(() => {})
   }, [])
 
-  // Reload snapshot when filter changes
   const loadSnapshot = useCallback(async (teamId: string | null) => {
     setLoadingData(true)
     setError(null)
@@ -280,17 +249,14 @@ export default function TeamHealthPage() {
     }
   }, [teams])
 
-  // Trigger load when teamId or teams list changes
   useEffect(() => {
-    if (teams.length >= 0) {  // always run, even with 0 teams
+    if (teams.length >= 0) {
       loadSnapshot(selectedTeamId)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedTeamId, teams])
 
-  const handleTeamChange = (id: string | null) => {
-    setSelectedTeamId(id)
-  }
+  const handleTeamChange = (id: string | null) => setSelectedTeamId(id)
 
   const handleGenerateSummary = async () => {
     if (!snapshot) return
@@ -298,25 +264,17 @@ export default function TeamHealthPage() {
     try {
       const selectedTeam = teams.find(t => t.id === selectedTeamId)
       const teamName = selectedTeam?.name ?? 'All Teams'
-
-      const userPrompt = buildTeamCompetencySummaryPromptFromSnapshot({
-        teamName,
-        snapshot,
-      })
-
+      const userPrompt = buildTeamCompetencySummaryPromptFromSnapshot({ teamName, snapshot })
       const result = await callAI({
         systemPrompt: TEAM_COMPETENCY_SUMMARY_SYSTEM,
         userPrompt,
         maxTokens: 500,
         temperature: 0.3,
       })
-
-      // Parse bullets from markdown list
       const bullets = result.content
         .split('\n')
         .map(l => l.replace(/^[\s-*•]+/, '').trim())
         .filter(l => l.length > 0)
-
       setNarrative(bullets)
       setNarrativeShown(true)
     } catch (err) {
@@ -336,57 +294,40 @@ export default function TeamHealthPage() {
 
       <div className="page-content">
         {/* Subtitle */}
-        <div style={{ marginBottom: '20px' }}>
-          <p style={{ color: 'var(--text-3)', fontSize: 'var(--text-label)' }}>
+        <div className="th-subtitle">
+          <p className="th-subtitle-text">
             Aggregate view of which competency areas have the most room for growth across your team.
           </p>
         </div>
 
         {/* Team filter */}
         {teams.length > 0 && (
-          <div style={{ marginBottom: '20px' }}>
-            <TeamFilter
-              teams={teams}
-              selectedTeamId={selectedTeamId}
-              onChange={handleTeamChange}
-            />
+          <div className="th-filter-wrap">
+            <TeamFilter teams={teams} selectedTeamId={selectedTeamId} onChange={handleTeamChange} />
           </div>
         )}
 
         {/* Error */}
-        {error && (
-          <div style={{ background: '#2a0a0a', border: '1px solid #5a2020', borderRadius: '6px', padding: '12px 16px', marginBottom: '16px', color: '#f87171', fontSize: 'var(--text-label)' }}>
-            {error}
-          </div>
-        )}
+        {error && <div className="th-error">{error}</div>}
 
         {/* Loading */}
-        {loadingData && (
-          <div style={{ padding: '32px', color: 'var(--text-3)', fontSize: 'var(--text-meta)' }}>
-            Loading competency data…
-          </div>
-        )}
+        {loadingData && <div className="th-loading">Loading competency data…</div>}
 
         {/* Content */}
         {!loadingData && snapshot && (
           <>
-            {/* Stats strip */}
-            {snapshot.assessedPeople > 0 && (
-              <StatsStrip snapshot={snapshot} />
-            )}
+            {snapshot.assessedPeople > 0 && <StatsStrip snapshot={snapshot} />}
 
-            {/* Empty state */}
             {snapshot.areas.length === 0 && (
               <EmptyState assessedPeople={snapshot.assessedPeople} totalPeople={snapshot.totalPeople} />
             )}
 
-            {/* Chart section */}
             {snapshot.areas.length > 0 && (
-              <div style={{ background: 'var(--surf)', border: '1px solid var(--border-1)', borderRadius: '8px', padding: '20px', marginBottom: '20px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '16px' }}>
+              <div className="th-chart-card">
+                <div className="th-chart-header">
                   <div>
                     <h2 style={{ margin: 0 }}>Areas ranked by gap severity</h2>
-                    <p style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', marginTop: '2px' }}>
+                    <p className="th-chart-sub">
                       {selectedTeamName} · {snapshot.assessedPeople} of {snapshot.totalPeople} people assessed
                     </p>
                   </div>
@@ -415,17 +356,14 @@ export default function TeamHealthPage() {
               </div>
             )}
 
-            {/* AI narrative section */}
             {snapshot.areas.length > 0 && (
-              <div style={{ background: 'var(--surf)', border: '1px solid var(--border-1)', borderRadius: '8px', padding: '20px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: narrativeShown ? '14px' : '0' }}>
+              <div className="th-ai-card">
+                <div className="th-ai-header" style={{ marginBottom: narrativeShown ? '14px' : 0 }}>
                   <div>
                     <h2 style={{ margin: 0 }}>AI Summary</h2>
-                    <p style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', marginTop: '2px' }}>
-                      Strategic narrative — skip-level ready
-                    </p>
+                    <p className="th-ai-sub">Strategic narrative — skip-level ready</p>
                   </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                  <div className="th-ai-header-actions">
                     {narrativeShown && (
                       <AIGeneratedBadge onDismiss={() => { setNarrative([]); setNarrativeShown(false) }} />
                     )}
@@ -441,18 +379,14 @@ export default function TeamHealthPage() {
                   </div>
                 </div>
 
-                {narrativeShown && narrative.length > 0 && (
-                  <AINarrative bullets={narrative} />
-                )}
+                {narrativeShown && narrative.length > 0 && <AINarrative bullets={narrative} />}
 
                 {narrativeShown && narrative.length === 0 && (
-                  <p style={{ fontSize: 'var(--text-label)', color: 'var(--text-3)', marginTop: '8px' }}>
-                    No summary generated. Try again.
-                  </p>
+                  <p className="th-ai-empty">No summary generated. Try again.</p>
                 )}
 
                 {!narrativeShown && !generating && (
-                  <p style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', marginTop: '8px' }}>
+                  <p className="th-ai-hint">
                     Generate an AI narrative identifying top gaps, patterns, and suggested focus areas.
                     No individual names are included.
                   </p>
diff --git a/app/(dashboard)/teams/[id]/page.tsx b/app/(dashboard)/teams/[id]/page.tsx
index c1a8b38..b480fc8 100644
--- a/app/(dashboard)/teams/[id]/page.tsx
+++ b/app/(dashboard)/teams/[id]/page.tsx
@@ -25,65 +25,62 @@ export default function TeamDetailPage({ params }: { params: Promise<{ id: strin
   }, [teamId])
 
   if (loading) return (
-    <div style={{ padding: "32px" }}>
+    <div className="page-content--lg">
       <p style={{ color: "var(--text-3)" }}>Loading…</p>
     </div>
   )
 
   if (!team) return (
-    <div style={{ padding: "32px" }}>
+    <div className="page-content--lg">
       <p>Team not found</p>
     </div>
   )
 
   return (
-    <div style={{ padding: "32px" }}>
+    <div className="page-content--lg">
       {/* Header */}
       <div style={{ marginBottom: "24px" }}>
-        <button
-          onClick={() => router.push("/teams")}
-          style={{ display: "inline-flex", alignItems: "center", gap: "6px", background: "none", border: "none", color: "var(--text-2)", cursor: "pointer", fontSize: "var(--text-label)", marginBottom: "16px", padding: "4px 0" }}
-          onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-1)")}
-          onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-2)")}
-        >
-          <ArrowLeft style={{ width: "14px", height: "14px" }} /> Back to Teams
+        <button onClick={() => router.push("/teams")} className="team-back-btn">
+          <ArrowLeft /> Back to Teams
         </button>
-        <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+        <div className="team-title-row">
           <div>
             <h1>{team.name}</h1>
-            {team.description && <p style={{ marginTop: "2px" }}>{team.description}</p>}
+            {team.description && <p className="mt-0.5">{team.description}</p>}
           </div>
-          <span style={{
-            padding: "2px 8px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600,
-            background: team.status === 'active' ? "#0d2015" : "#1a1a22",
-            color: team.status === 'active' ? "#4ade80" : "#6b7280",
-          }}>
+          <span
+            className="team-status-badge"
+            style={{
+              background: team.status === 'active' ? "#0d2015" : "#1a1a22",
+              color: team.status === 'active' ? "#4ade80" : "#6b7280",
+            }}
+          >
             {team.status}
           </span>
         </div>
       </div>
 
       {/* Team overview card */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "20px", marginBottom: "24px" }}>
-        <div style={{ display: "flex", gap: "32px" }}>
+      <div className="team-overview-card">
+        <div className="team-overview-body">
           <div>
-            <p style={{ fontSize: "var(--text-overline)", color: "var(--text-3)", fontWeight: 600, marginBottom: "2px" }}>MEMBERS</p>
-            <p style={{ fontSize: "var(--text-h2)", fontWeight: 700, color: "var(--text-1)" }}>{team.memberCount}</p>
+            <p className="team-overview-stat-label">MEMBERS</p>
+            <p className="team-overview-stat-value">{team.memberCount}</p>
           </div>
           {team.notes && (
             <div style={{ flex: 1 }}>
-              <p style={{ fontSize: "var(--text-overline)", color: "var(--text-3)", fontWeight: 600, marginBottom: "4px" }}>NOTES</p>
-              <p style={{ fontSize: "var(--text-label)", color: "var(--text-2)" }}>{team.notes}</p>
+              <p className="team-overview-notes-label">NOTES</p>
+              <p className="team-overview-notes-text">{team.notes}</p>
             </div>
           )}
         </div>
       </div>
 
       {/* Skills matrix */}
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "24px" }}>
-        <div style={{ marginBottom: "20px" }}>
-          <h2 style={{ margin: 0 }}>Skills Matrix</h2>
-          <p style={{ marginTop: "2px" }}>Competency assessment across all team members. Click a column header to sort.</p>
+      <div className="team-matrix-card">
+        <div className="team-matrix-header">
+          <h2 className="team-matrix-title">Skills Matrix</h2>
+          <p className="team-matrix-sub">Competency assessment across all team members. Click a column header to sort.</p>
         </div>
         <SkillsMatrix memberIds={team.memberIds ?? []} />
       </div>
diff --git a/app/(dashboard)/teams/page.tsx b/app/(dashboard)/teams/page.tsx
index e42bbb4..16a2380 100644
--- a/app/(dashboard)/teams/page.tsx
+++ b/app/(dashboard)/teams/page.tsx
@@ -99,27 +99,18 @@ export default function TeamsPage() {
         </button>
       </div>
 
-      <div style={{ padding: "16px" }}>
+      <div className="page-content">
         {/* Stat cards */}
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "7px", marginBottom: "14px" }}>
+        <div className="stat-grid">
           {[
             { label: "Active teams", value: activeTeams.length, sub: `${teams.filter(t => t.status === "inactive").length} inactive` },
             { label: "Total members", value: totalMembers, sub: "In active teams" },
             { label: "Avg team size", value: avgSize, sub: "Members per active team" },
           ].map(({ label, value, sub }) => (
-            <div key={label} style={{
-              background: "var(--surf)",
-              border: "1px solid var(--border-1)",
-              borderRadius: "6px",
-              padding: "10px 12px",
-            }}>
+            <div key={label} className="stat-card">
               <div className="form-label">{label}</div>
-              <div style={{ fontSize: "20px", fontWeight: 500, color: "var(--text-1)", fontFamily: "var(--font-mono)" }}>
-                {value}
-              </div>
-              <div style={{ fontSize: "var(--text-overline)", color: "var(--text-3)", marginTop: "2px" }}>
-                {sub}
-              </div>
+              <div className="stat-card-value">{value}</div>
+              <div className="stat-card-sub">{sub}</div>
             </div>
           ))}
         </div>
diff --git a/app/globals.css b/app/globals.css
index bf7efd6..c38e066 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -69,13 +69,13 @@
     --mono: var(--font-mono);
 
     /* ── Type scale ── */
-    --text-page-title:   24px;   /* h1: page headings */
-    --text-section:      14px;   /* h2: widget/section titles */
-    --text-body:         14px;   /* default body text */
-    --text-label:        14px;   /* secondary labels, captions */
-    --text-meta:         12px;   /* table cells, metadata */
-    --text-caption:      12px;   /* tags, badges, tiny labels */
-    --text-overline:     11px;   /* uppercase column/stat headers */
+    --text-page-title:   26px;   /* h1: page headings */
+    --text-section:      16px;   /* h2: widget/section titles */
+    --text-body:         16px;   /* default body text */
+    --text-label:        16px;   /* secondary labels, captions */
+    --text-meta:         14px;   /* table cells, metadata */
+    --text-caption:      14px;   /* tags, badges, tiny labels */
+    --text-overline:     13px;   /* uppercase column/stat headers */
 
     --weight-title:      700;
     --weight-section:    600;
@@ -143,6 +143,9 @@
   margin-bottom: 4px;
   display: block;
 }
+.form-label--no-margin { margin: 0; }
+.evidence-plus-icon { width: 14px; height: 14px; }
+.evidence-check-icon { width: 13px; height: 13px; }
 
 /* Section/block header inside a form or detail panel (e.g. "Action items") */
 .form-section-header {
@@ -245,7 +248,7 @@ label { font-size: var(--text-label); color: var(--text-2); }
 
 /* ── Page topbar (sticky header bar used across all pages) ── */
 .page-topbar {
-  height: 40px;
+  height: 55px;
   padding: 0 16px;
   background: var(--surf);
   border-bottom: 1px solid var(--border-1);
@@ -308,3 +311,3643 @@ label { font-size: var(--text-label); color: var(--text-2); }
   border-color: var(--border-3);
   color: var(--text-1);
 }
+
+/* ── AI button ── */
+.ai-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  border: 1px solid var(--border-2);
+  background: var(--surf-2);
+  color: var(--text-2);
+  transition: color 0.15s, border-color 0.15s;
+}
+.ai-btn:hover:not(:disabled) {
+  color: #00f058;
+  border-color: #00f05840;
+}
+.ai-btn--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.ai-btn--generating {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  font-family: var(--font-sans);
+  opacity: 0.7;
+  cursor: not-allowed;
+  color: #00f058;
+  border: 1px solid #00f05840;
+  background: #0d200f;
+}
+.ai-btn__icon {
+  width: 11px;
+  height: 11px;
+  flex-shrink: 0;
+}
+.ai-btn__icon--spin {
+  animation: spin 1s linear infinite;
+}
+.ai-setup-link {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  text-decoration: none;
+  transition: color 0.15s;
+}
+.ai-setup-link:hover { color: #00f058; }
+
+/* ── AI generated badge ── */
+.ai-generated-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  background: #0d200f;
+  border: 1px solid #00f05840;
+  font-size: var(--text-caption);
+  color: #00f058;
+}
+.ai-generated-badge__icon {
+  width: 11px;
+  height: 11px;
+  flex-shrink: 0;
+}
+.ai-generated-badge__dismiss {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #00f05880;
+  margin-left: 2px;
+  font-family: var(--font-sans);
+  font-size: var(--text-overline);
+  padding: 0 2px;
+}
+
+/* ── Layout utilities ── */
+.flex-col   { display: flex; flex-direction: column; }
+.flex-row   { display: flex; flex-direction: row; }
+.flex-center { display: flex; align-items: center; justify-content: center; }
+.flex-between { display: flex; align-items: center; justify-content: space-between; }
+.flex-align { display: flex; align-items: center; }
+.flex-start { display: flex; align-items: flex-start; }
+.flex-wrap  { flex-wrap: wrap; }
+.flex-1     { flex: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+
+/* ── Gap utilities ── */
+.gap-2  { gap: 2px; }
+.gap-4  { gap: 4px; }
+.gap-6  { gap: 6px; }
+.gap-8  { gap: 8px; }
+.gap-10 { gap: 10px; }
+.gap-12 { gap: 12px; }
+.gap-14 { gap: 14px; }
+.gap-16 { gap: 16px; }
+.gap-20 { gap: 20px; }
+.gap-24 { gap: 24px; }
+
+/* ── Card / surface ── */
+.card {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 8px;
+  padding: 16px;
+}
+.card-sm {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  padding: 12px;
+}
+.surf-2 { background: var(--surf-2); }
+.surf-3 { background: var(--surf-3); }
+
+/* ── Typography utilities ── */
+.text-1 { color: var(--text-1); }
+.text-2 { color: var(--text-2); }
+.text-3 { color: var(--text-3); }
+.text-accent { color: var(--accent); }
+.text-page-title { font-size: var(--text-page-title); font-weight: var(--weight-title); color: var(--text-1); }
+.text-section { font-size: var(--text-section); font-weight: var(--weight-section); color: var(--text-1); }
+.text-body    { font-size: var(--text-body); color: var(--text-2); }
+.text-label   { font-size: var(--text-label); color: var(--text-2); }
+.text-meta    { font-size: var(--text-meta); color: var(--text-2); }
+.text-caption { font-size: var(--text-caption); color: var(--text-3); }
+.text-overline { font-size: var(--text-overline); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
+.font-mono    { font-family: var(--font-mono); }
+.font-600     { font-weight: 600; }
+.font-700     { font-weight: 700; }
+.font-500     { font-weight: 500; }
+.italic       { font-style: italic; }
+.nowrap       { white-space: nowrap; }
+.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.line-height-15 { line-height: 1.5; }
+
+/* ── Spacing utilities ── */
+.mt-2  { margin-top: 2px; }
+.mt-4  { margin-top: 4px; }
+.mt-6  { margin-top: 6px; }
+.mt-8  { margin-top: 8px; }
+.mt-12 { margin-top: 12px; }
+.mt-16 { margin-top: 16px; }
+.mb-2  { margin-bottom: 2px; }
+.mb-4  { margin-bottom: 4px; }
+.mb-6  { margin-bottom: 6px; }
+.mb-8  { margin-bottom: 8px; }
+.mb-12 { margin-bottom: 12px; }
+.mb-16 { margin-bottom: 16px; }
+.p-4   { padding: 4px; }
+.p-8   { padding: 8px; }
+.p-12  { padding: 12px; }
+.p-16  { padding: 16px; }
+.px-8  { padding-left: 8px; padding-right: 8px; }
+.px-12 { padding-left: 12px; padding-right: 12px; }
+.py-4  { padding-top: 4px; padding-bottom: 4px; }
+.py-8  { padding-top: 8px; padding-bottom: 8px; }
+
+/* ── Border utilities ── */
+.border-1 { border: 1px solid var(--border-1); }
+.border-2 { border: 1px solid var(--border-2); }
+.border-3 { border: 1px solid var(--border-3); }
+.radius-4 { border-radius: 4px; }
+.radius-6 { border-radius: 6px; }
+.radius-8 { border-radius: 8px; }
+
+/* ── Icon button (no background, no border) ── */
+.icon-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: var(--text-3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.icon-btn:hover { color: var(--text-2); }
+
+/* ── Badge / pill ── */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* ── Section header row (title + action button) ── */
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.section-title {
+  font-size: var(--text-section);
+  font-weight: var(--weight-section);
+  color: var(--text-1);
+}
+
+/* ── Empty state ── */
+.empty-state {
+  padding: 24px;
+  text-align: center;
+  color: var(--text-3);
+  font-size: var(--text-body);
+}
+
+/* ── Divider ── */
+.divider {
+  border: none;
+  border-top: 1px solid var(--border-1);
+  margin: 12px 0;
+}
+
+/* ── Scrollable container ── */
+.scroll-y { overflow-y: auto; }
+.scroll-x { overflow-x: auto; }
+
+/* ── AI Settings Card ── */
+.ai-config-badge {
+  background: #0d2015;
+  border: 1px solid #4ade8040;
+  border-radius: 6px;
+  padding: 8px 14px;
+}
+.ai-config-badge__provider {
+  font-size: var(--text-caption);
+  color: #4ade80;
+  font-weight: 600;
+}
+.ai-config-badge__model {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  margin-left: 8px;
+}
+.ai-cache-stats {
+  display: flex;
+  gap: 12px;
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  padding: 6px 10px;
+  border-radius: 5px;
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+}
+.ai-status-ok {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #4ade80;
+  font-size: var(--text-caption);
+}
+.ai-status-ok svg { width: 12px; height: 12px; }
+.ai-status-fail {
+  color: #f87171;
+  font-size: var(--text-caption);
+}
+.ai-error-box {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  background: #2a0a0a;
+  border: 1px solid #f8717140;
+  color: #f87171;
+  font-size: var(--text-caption);
+}
+.ai-error-box svg { width: 12px; height: 12px; flex-shrink: 0; }
+.ai-provider-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+.ai-provider-btn {
+  padding: 10px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+}
+.ai-provider-btn__name {
+  font-size: var(--text-label);
+  font-weight: 600;
+  margin-bottom: 2px;
+}
+.ai-provider-btn__desc {
+  font-size: var(--text-overline);
+  color: var(--text-2);
+  line-height: 1.3;
+}
+.ai-model-select {
+  width: 100%;
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-2);
+  padding: 7px 10px;
+  font-size: var(--text-label);
+  font-family: var(--font-sans);
+}
+.ai-key-input { padding-right: 36px; }
+.ai-key-toggle {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-3);
+  padding: 0;
+}
+.ai-key-toggle svg { width: 14px; height: 14px; }
+.ai-key-hint {
+  font-size: var(--text-caption);
+  color: var(--text-2);
+  margin-top: 4px;
+}
+.ai-remove-btn {
+  color: #f87171;
+  border-color: #f8717140;
+}
+
+/* ── Width / height helpers ── */
+.w-full { width: 100%; }
+.h-full { height: 100%; }
+.min-w-0 { min-width: 0; }
+
+/* ── Cursor ── */
+.cursor-pointer { cursor: pointer; }
+.cursor-default { cursor: default; }
+
+/* ── Position ── */
+.relative { position: relative; }
+.absolute { position: absolute; }
+.sticky-top { position: sticky; top: 0; z-index: 10; }
+
+/* ── Background tokens ── */
+.bg-base { background: var(--bg-base); }
+
+/* ── Chart legend text ── */
+.chart-legend-label { color: #9ca3af; font-size: 13px; }
+
+/* ── Dual-list picker (person/team form dialogs) ── */
+.dual-list-col { flex: 1; }
+.dual-list-label {
+  font-size: var(--text-label);
+  color: var(--text-3);
+  display: block;
+  margin-bottom: 4px;
+}
+.dual-list-box {
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  overflow-y: auto;
+  background: var(--surf-2);
+}
+.dual-list-box--sm { height: 128px; }
+.dual-list-box--md { height: 192px; }
+.dual-list-item {
+  padding: 6px 12px;
+  font-size: var(--text-label);
+  cursor: pointer;
+  user-select: none;
+}
+.dual-list-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: var(--text-label);
+  color: var(--text-3);
+}
+.dual-list-arrows {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.dual-list-arrow-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  border: 1px solid var(--border-2);
+  background: var(--surf-2);
+  color: var(--text-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dual-list-arrow-btn:disabled { cursor: not-allowed; opacity: 0.4; }
+.dual-list-arrow-btn:not(:disabled) { cursor: pointer; }
+.dual-list-arrow-btn svg { width: 16px; height: 16px; }
+
+/* ── Level picker buttons ── */
+.level-btn {
+  padding: 3px 10px;
+  border-radius: 4px;
+  font-size: var(--text-label);
+  font-weight: 500;
+  font-family: var(--font-sans);
+  cursor: pointer;
+}
+.level-btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
+
+/* ── Table cell text helpers ── */
+.cell-link {
+  font-weight: 500;
+  color: var(--text-1);
+  font-size: var(--text-meta);
+  text-decoration: none;
+}
+.cell-link:hover { color: #00f058; }
+.cell-text { color: var(--text-2); font-size: var(--text-meta); }
+.cell-mono { font-family: var(--font-mono); font-size: var(--text-meta); color: var(--text-1); }
+.cell-date { color: var(--text-3); font-size: var(--text-overline); font-family: var(--font-mono); }
+
+/* ── Simple form overlay modal ── */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.modal-box {
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 8px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.modal-box--sm { width: 400px; }
+.modal-box--dismiss { width: 360px; gap: 12px; }
+.btn--padded { padding: 6px 12px; }
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.modal-title { font-size: var(--text-body); font-weight: 600; color: var(--text-1); }
+.modal-close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-3);
+  display: flex;
+}
+.modal-close-btn svg { width: 14px; height: 14px; }
+.modal-field { display: flex; flex-direction: column; gap: 4px; }
+.modal-input {
+  background: var(--surf-3);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-1);
+  font-size: var(--text-body);
+  padding: 7px 10px;
+  font-family: var(--font-sans);
+  outline: none;
+}
+.modal-input--sm { font-size: var(--text-meta); }
+.modal-input--date { font-size: var(--text-meta); padding: 6px 10px; }
+.modal-textarea {
+  background: var(--surf-3);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-1);
+  font-size: var(--text-meta);
+  padding: 7px 10px;
+  resize: none;
+  font-family: var(--font-sans);
+  outline: none;
+}
+.modal-error { font-size: var(--text-meta); color: #ff6b6b; margin: 0; }
+.modal-footer { display: flex; gap: 8px; justify-content: flex-end; }
+.modal-btn-cancel {
+  background: var(--surf-3);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-2);
+  font-size: var(--text-meta);
+  padding: 6px 14px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.modal-btn-primary {
+  background: #00f058;
+  border: 1px solid #00f058;
+  border-radius: 4px;
+  color: #000;
+  font-size: var(--text-meta);
+  font-weight: 600;
+  padding: 6px 14px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.modal-btn-primary:disabled { cursor: not-allowed; opacity: 0.7; }
+
+/* ── Follow-up list ── */
+.follow-up-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  border-radius: 5px;
+}
+.follow-up-row--open {
+  background: var(--surf-2);
+  border: 1px solid var(--border-1);
+}
+.follow-up-row--overdue {
+  background: #1a0a0a;
+  border: 1px solid #3a1515;
+}
+.follow-up-body { flex: 1; min-width: 0; }
+.follow-up-title {
+  font-size: var(--text-meta);
+  color: var(--text-1);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.follow-up-meta {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 2px;
+  flex-wrap: wrap;
+}
+.follow-up-meta-link {
+  font-size: var(--text-caption);
+  color: var(--text-2);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+.follow-up-meta-link svg { width: 9px; height: 9px; }
+.follow-up-meta-text { font-size: var(--text-caption); color: var(--text-3); }
+.follow-up-actions { display: flex; gap: 4px; flex-shrink: 0; }
+.follow-up-done-btn {
+  background: none;
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: #00f058;
+  cursor: pointer;
+  padding: 3px 6px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  font-size: var(--text-caption);
+}
+.follow-up-done-btn svg { width: 10px; height: 10px; }
+.follow-up-cancel-btn {
+  background: none;
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-3);
+  cursor: pointer;
+  padding: 3px 4px;
+  display: flex;
+  align-items: center;
+}
+.follow-up-cancel-btn svg { width: 10px; height: 10px; }
+.follow-up-toggle-btn {
+  background: none;
+  border: none;
+  color: var(--text-3);
+  font-size: var(--text-caption);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 0;
+  font-family: var(--font-sans);
+}
+.follow-up-toggle-btn svg { width: 11px; height: 11px; }
+.follow-up-closed-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 12px;
+  opacity: 0.6;
+}
+.follow-up-closed-title {
+  font-size: var(--text-meta);
+  color: var(--text-2);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.follow-up-completed-at { font-size: var(--text-caption); color: var(--text-3); }
+.status-chip {
+  font-size: var(--text-caption);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+.status-chip--done { font-weight: 600; color: #00f058; background: #0d1f14; border: 1px solid #1a3a25; }
+.status-chip--cancelled { color: var(--text-3); background: var(--surf-3); border: 1px solid var(--border-2); }
+.status-chip--overdue { font-weight: 600; color: #ff6b6b; background: #2a0a0a; border: 1px solid #5a2020; }
+.status-chip--open { color: var(--text-2); background: var(--surf-3); border: 1px solid var(--border-2); }
+
+/* ── Review section ── */
+.review-section {
+  background: var(--surf);
+  border-radius: 8px;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+.review-section--default { border: 1px solid var(--border-1); }
+.review-section--reviewed { border: 1px solid #1a3a25; }
+.review-section-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  user-select: none;
+}
+.review-section-header--interactive { cursor: pointer; }
+.review-section-header--interactive:hover { background: var(--surf-2); }
+.review-section-header--static { cursor: default; }
+.review-section-chevron {
+  color: var(--text-3);
+  flex-shrink: 0;
+  transition: transform 0.2s;
+}
+.review-section-icon { opacity: 0.6; flex-shrink: 0; display: flex; align-items: center; }
+.review-section-title { flex: 1; font-size: 13px; font-weight: 500; color: var(--text-1); }
+.review-section-badges { display: flex; gap: 6px; align-items: center; }
+.review-badge {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  padding: 1px 6px;
+  border-radius: 8px;
+}
+.review-badge--crit { background: #1a0a0a; color: #f87171; }
+.review-badge--warn { background: #1e0d00; color: #f97316; }
+.review-badge--info { background: #0a1e28; color: #60a5fa; }
+.review-badge--ok { background: #0a1e0a; color: #00f058; }
+.review-done-label { font-size: 11px; color: #00f058; font-family: var(--font-mono); }
+.review-checkbox {
+  width: 18px; height: 18px; border-radius: 4px;
+  cursor: pointer; flex-shrink: 0;
+  display: flex; align-items: center; justify-content: center;
+}
+.review-checkbox--checked { border: 1.5px solid #00f058; background: #00f058; }
+.review-checkbox--unchecked { border: 1.5px solid var(--border-3); background: transparent; }
+.review-section-body { border-top: 1px solid var(--border-1); }
+.review-section-body--empty { padding: 14px 16px; }
+.review-empty-state { display: flex; align-items: center; gap: 8px; color: #00f058; font-size: 12px; }
+
+/* ── Batch evidence import modal ── */
+.batch-input-area { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
+.batch-label-row { display: flex; justify-content: space-between; }
+.batch-char-count { font-size: var(--text-caption); }
+.batch-char-count--ok { color: var(--text-3); }
+.batch-char-count--over { color: #f87171; }
+.batch-textarea { margin-top: 6px; font-family: var(--font-mono); font-size: var(--text-caption); }
+.batch-context-hint { font-size: var(--text-label); color: var(--text-3); }
+.batch-extract-error { display: flex; align-items: center; gap: 6px; color: #f87171; font-size: var(--text-label); }
+.batch-preview-area { display: flex; flex-direction: column; gap: 12px; }
+.batch-toolbar { display: flex; align-items: center; justify-content: space-between; }
+.batch-toolbar-btns { display: flex; gap: 8px; align-items: center; }
+.batch-toolbar-btn {
+  font-size: var(--text-caption); color: var(--text-3);
+  background: none; border: none; cursor: pointer; padding: 2px 6px;
+}
+.batch-toolbar-count { font-size: var(--text-caption); color: var(--text-3); }
+.batch-table {
+  max-height: 420px;
+  overflow-y: auto;
+  border: 1px solid var(--border-2);
+  border-radius: 8px;
+}
+.batch-empty { padding: 24px; text-align: center; color: var(--text-3); }
+.batch-row { padding: 12px 14px; border-bottom: 1px solid var(--border-1); }
+.batch-row-inner { display: flex; align-items: flex-start; gap: 10px; }
+.batch-row-checkbox {
+  background: none; border: none; cursor: pointer; padding: 2px; flex-shrink: 0; margin-top: 2px;
+}
+.batch-row-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
+.batch-row-grid { display: grid; grid-template-columns: 1fr 1fr 140px 1fr; gap: 6px; }
+.batch-row-warn { font-size: var(--text-caption); color: #fbbf24; margin: 0; }
+.batch-row-err { font-size: var(--text-caption); color: #f87171; margin: 0; }
+.batch-context-name { color: var(--text-2); }
+.batch-row-title-input { font-size: var(--text-label); font-weight: 600; }
+.batch-row-select-trigger { font-size: var(--text-caption); }
+.batch-btn-icon { margin-right: 6px; }
+.batch-btn-spinner { margin-right: 6px; }
+
+/* ── Evidence section ── */
+.evidence-section {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.evidence-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border-1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.evidence-header-actions { display: flex; gap: 8px; align-items: center; }
+.evidence-header-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  color: var(--text-2);
+  border: 1px solid var(--border-2);
+  background: var(--surf-2);
+  text-decoration: none;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.evidence-header-btn svg { width: 11px; height: 11px; }
+.evidence-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%);
+  border: none;
+  color: #0a1a0a;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.evidence-add-btn svg { width: 11px; height: 11px; }
+.evidence-form {
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--border-1);
+  background: var(--surf-2);
+}
+.evidence-form-grid { display: grid; gap: 14px; }
+.evidence-form-row-2col { display: grid; grid-template-columns: 1fr 180px; gap: 12px; }
+.evidence-form-field { display: grid; gap: 4px; }
+.evidence-form-select {
+  background: var(--surf);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  color: var(--text-1);
+  padding: 6px 10px;
+  font-size: var(--text-label);
+  cursor: pointer;
+}
+.evidence-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.evidence-form-footer-left { display: flex; align-items: center; gap: 8px; }
+.evidence-form-footer-right { display: flex; gap: 8px; }
+.evidence-sentiment-btns { display: flex; gap: 4px; }
+.evidence-linked-meeting {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-caption);
+  color: #60a5fa;
+}
+.evidence-linked-meeting svg { width: 11px; height: 11px; }
+.evidence-timeline { padding: 12px 0; min-height: 120px; }
+.evidence-empty { padding: 40px 24px; text-align: center; }
+.evidence-empty p { color: var(--text-3); margin-bottom: 12px; }
+.evidence-entry { border-bottom: 1px solid var(--border-1); transition: background 0.1s; }
+.evidence-entry-row {
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+}
+.evidence-entry-row:hover { background: #292929; }
+.evidence-entry-chevron { width: 12px; height: 12px; color: var(--text-3); flex-shrink: 0; }
+.evidence-cat-badge {
+  padding: 2px 7px;
+  border-radius: 3px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.evidence-entry-title {
+  flex: 1;
+  font-size: var(--text-label);
+  color: var(--text-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.evidence-sentiment { font-size: var(--text-caption); flex-shrink: 0; }
+.evidence-date {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  flex-shrink: 0;
+  min-width: 90px;
+  text-align: right;
+}
+.evidence-meeting-link { color: #60a5fa; }
+.evidence-meeting-link svg { width: 12px; height: 12px; }
+.evidence-expanded {
+  padding: 12px 20px 16px 42px;
+  border-top: 1px solid var(--border-1);
+  background: var(--surf-2);
+}
+.evidence-content { font-size: var(--text-label); color: var(--text-2); white-space: pre-wrap; margin-bottom: 12px; }
+.evidence-no-notes { font-size: var(--text-caption); color: var(--text-3); font-style: italic; margin-bottom: 12px; }
+.evidence-meeting-ref { font-size: var(--text-caption); color: #60a5fa; margin-bottom: 12px; }
+.evidence-meeting-ref svg { width: 11px; height: 11px; display: inline; margin-right: 4px; }
+.evidence-row-actions { display: flex; gap: 8px; }
+.evidence-delete-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-label);
+  border: 1px solid #7f1d1d;
+  background: transparent;
+  color: #f87171;
+}
+.evidence-delete-btn:disabled { cursor: not-allowed; opacity: 0.6; }
+.evidence-delete-btn:not(:disabled) { cursor: pointer; }
+.evidence-delete-btn svg { width: 13px; height: 13px; }
+
+/* ── Log evidence modal ── */
+.log-evidence-dialog { max-width: 520px; }
+.log-evidence-person-name { color: var(--text-1); }
+.log-evidence-meeting-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 4px;
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  font-size: var(--text-caption);
+  color: #60a5fa;
+}
+.log-evidence-meeting-link svg { width: 12px; height: 12px; }
+.log-evidence-grid { display: grid; gap: 14px; padding-top: 4px; }
+.log-evidence-person-field { display: grid; gap: 4px; }
+.log-evidence-person-hint { font-size: var(--text-caption); color: var(--text-3); }
+.log-evidence-row-2col { display: grid; grid-template-columns: 1fr 160px; gap: 12px; }
+.log-evidence-cat-row { display: flex; align-items: center; gap: 8px; }
+.log-evidence-suggest-btn {
+  font-size: var(--text-caption);
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--font-sans);
+}
+.log-evidence-suggest-btn--active { color: #00f058; cursor: pointer; }
+.log-evidence-suggest-btn--loading { color: var(--text-3); cursor: not-allowed; }
+.log-evidence-field { display: grid; gap: 4px; }
+.log-evidence-sentiment-row { display: flex; align-items: center; gap: 8px; }
+.log-evidence-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
+
+/* ── Sentiment trend chart ── */
+.sentiment-chart {
+  background: var(--surf-2);
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  padding: 14px 16px;
+}
+.sentiment-chart-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.sentiment-chart-title { font-size: var(--text-label); font-weight: 600; color: var(--text-2); }
+.sentiment-chart-period { font-weight: 400; color: var(--text-3); margin-left: 6px; }
+.sentiment-chart-meta { display: flex; align-items: center; gap: 10px; }
+.sentiment-trend-indicator { display: flex; align-items: center; gap: 4px; }
+.sentiment-trend-label { font-size: var(--text-caption); font-weight: 600; }
+.sentiment-legend { display: flex; align-items: center; gap: 8px; }
+.sentiment-legend-item { display: flex; align-items: center; gap: 3px; }
+.sentiment-legend-dot { width: 8px; height: 8px; border-radius: 2px; }
+.sentiment-legend-text { font-size: 13px; color: var(--text-3); text-transform: capitalize; }
+.sentiment-chart-body { overflow-x: auto; }
+.sentiment-bars { display: flex; align-items: flex-end; min-width: fit-content; padding-bottom: 4px; }
+.sentiment-bar-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  border-radius: 3px;
+  overflow: hidden;
+}
+.sentiment-bar-empty {
+  height: 2px;
+  background: var(--border-2);
+  border-radius: 1px;
+  opacity: 0.4;
+}
+.sentiment-x-labels { display: flex; margin-top: 4px; }
+.sentiment-x-label {
+  font-size: 13px;
+  color: var(--text-3);
+  text-align: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.sentiment-chart-loading {
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sentiment-chart-error {
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sentiment-chart-error-text { font-size: var(--text-caption); color: #f87171; }
+.sentiment-stacked-bar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  cursor: default;
+}
+.sentiment-trend-icon { width: 12px; height: 12px; }
+.sentiment-chart-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sentiment-tooltip {
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--surf-3);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 13px;
+  color: var(--text-1);
+  white-space: nowrap;
+  z-index: 10;
+  pointer-events: none;
+  line-height: 1.5;
+}
+.sentiment-tooltip-week { font-weight: 600; margin-bottom: 2px; }
+.sentiment-tooltip-total { color: var(--text-3); margin-top: 2px; }
+
+/* ── Tone picker (follow-up draft modal) ── */
+.tone-btn {
+  padding: 4px 14px;
+  border-radius: 4px;
+  font-size: var(--text-label);
+  font-family: var(--font-sans);
+  cursor: pointer;
+  transition: background 0.1s;
+}
+.tone-btn--active {
+  background: var(--surf-3);
+  color: var(--text-1);
+  border: 1px solid var(--border-3);
+}
+.tone-btn--inactive {
+  background: var(--surf-2);
+  color: var(--text-2);
+  border: 1px solid var(--border-2);
+}
+
+/* ── People / Teams table cells ── */
+.avatar-chip {
+  width: 24px; height: 24px; border-radius: 50%;
+  background: var(--surf-3); color: var(--text-2);
+  font-size: var(--text-overline); font-weight: 500;
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+}
+.level-chip {
+  display: inline-flex; align-items: center;
+  padding: 2px 7px; border-radius: 3px;
+  font-size: var(--text-overline); font-weight: 500; font-family: var(--font-mono);
+}
+.attention-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.team-chip {
+  background: var(--surf-3); padding: 1px 5px; border-radius: 3px;
+  font-size: var(--text-overline); margin-right: 2px;
+}
+.status-badge { font-size: var(--text-caption); }
+.status-badge--active { color: #00f058; }
+.status-badge--inactive { color: var(--text-3); }
+.table-action-btn {
+  border: 1px solid var(--border-2); color: var(--text-3); border-radius: 4px;
+  padding: 2px 7px; font-size: var(--text-meta); background: none; cursor: pointer;
+  display: inline-flex; align-items: center; gap: 4px;
+}
+.table-action-btn:hover { color: var(--text-1); }
+.table-action-btn--danger:hover { color: #f87171; }
+.table-action-btn svg { width: 11px; height: 11px; }
+.table-name-row { display: flex; align-items: center; gap: 6px; }
+.table-name { font-weight: 500; font-size: var(--text-meta); }
+.table-name--active { color: var(--text-1); }
+.table-name--inactive { color: var(--text-3); }
+.table-role { font-size: var(--text-meta); }
+.table-role--active { color: var(--text-2); }
+.table-role--inactive { color: var(--text-3); }
+.table-teams { display: flex; flex-wrap: wrap; gap: 2px; }
+
+/* ── Spinner ── */
+.spinner-brand {
+  border-color: rgb(0,255,229);
+  border-top-color: transparent;
+}
+
+/* ── Sidebar ── */
+.sidebar {
+  background: var(--surf);
+  border-right: 1px solid var(--border-1);
+}
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  height: 72px;
+  padding: 12px 10px;
+  gap: 6px;
+}
+.sidebar-logo-link {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+.sidebar-logo {
+  height: 42px;
+  width: auto;
+}
+.sidebar-toggle {
+  background: none;
+  border: none;
+  color: var(--text-3);
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+.sidebar-toggle:hover { color: var(--text-1); }
+.sidebar-toggle svg { width: 12px; height: 12px; }
+.sidebar-nav {
+  flex: 1;
+  padding: 4px 10px;
+  display: flex;
+  flex-direction: column;
+}
+.sidebar-divider {
+  height: 1px;
+  background: var(--border-1);
+  margin: 4px 0;
+}
+.sidebar-section-label {
+  font-size: 13px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-3);
+  padding: 10px 4px 4px;
+  font-weight: 500;
+  user-select: none;
+}
+.sidebar-nav-icon { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.5; }
+.sidebar-nav-icon--active { opacity: 1; }
+.nav-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.nav-badge {
+  border-radius: 10px;
+  padding: 0 5px;
+  font-size: var(--text-overline);
+  font-weight: 600;
+  font-family: var(--font-mono);
+  line-height: 16px;
+  flex-shrink: 0;
+  min-width: 16px;
+  text-align: center;
+}
+.sidebar-user {
+  padding: 8px 10px;
+  position: relative;
+}
+.sidebar-menu {
+  position: absolute;
+  bottom: calc(100% + 4px);
+  left: 8px;
+  right: 8px;
+  background: var(--surf-2, #1e1e1e);
+  border: 1px solid var(--border-1);
+  border-radius: 8px;
+  overflow: hidden;
+  z-index: 200;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
+}
+.sidebar-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 12px;
+  font-size: var(--text-meta, 12px);
+  color: var(--text-2);
+  text-decoration: none;
+  transition: background 0.1s;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  width: 100%;
+  text-align: left;
+}
+.sidebar-menu-item:hover { background: var(--surf-3, #2a2a2a); }
+.sidebar-menu-item--danger { color: #e05555; }
+.sidebar-menu-item svg { width: 13px; height: 13px; flex-shrink: 0; }
+.sidebar-user-btn {
+  margin-bottom: 0;
+  width: 100%;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+}
+.sidebar-avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+.sidebar-avatar-initials {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--surf-3);
+  color: var(--text-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--text-overline);
+  font-weight: 500;
+  flex-shrink: 0;
+}
+.sidebar-username { overflow: hidden; flex: 1; }
+.sidebar-username__name {
+  font-size: var(--text-meta);
+  color: var(--text-1);
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sidebar-username__sub { font-size: var(--text-overline); color: var(--text-3); }
+
+/* ── Widget shared ── */
+.widget { display: flex; flex-direction: column; gap: 14px; }
+.widget-card {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 12px;
+  padding: 20px;
+}
+.widget-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+.widget-refresh-btn {
+  background: none;
+  border: none;
+  color: var(--text-3);
+  padding: 4px;
+}
+.widget-nav-btn {
+  padding: 4px;
+  border-radius: 4px;
+  background: none;
+  border: none;
+  color: var(--text-3);
+  cursor: pointer;
+}
+.widget-nav-btn:hover:not(:disabled) { background: var(--surf-3); color: var(--text-1); }
+.widget-nav-btn svg { width: 14px; height: 14px; }
+.widget-nav-btns { display: flex; align-items: center; gap: 4px; }
+.widget-loading {
+  height: 220px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.widget-loading-text { font-size: var(--text-caption); color: var(--text-3); }
+.widget-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin-top: 12px;
+}
+.widget-legend-item { display: flex; align-items: center; gap: 4px; }
+.widget-legend-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.widget-legend-label { font-size: var(--text-caption); color: var(--text-3); }
+
+/* ── Team health widget ── */
+.health-widget-card {
+  background: #1c1c1c;
+  border: 1px solid #383838;
+  border-radius: 12px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.health-skeleton { display: flex; flex-direction: column; gap: 8px; }
+.health-skeleton__bar {
+  border-radius: 6px;
+  background: var(--surf-2);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.health-skeleton__bar--h40 { height: 40px; }
+.health-skeleton__bar--h16 { height: 16px; width: 60%; }
+.health-label-badge {
+  display: inline-block;
+  margin-bottom: 8px;
+  padding: 2px 10px;
+  border-radius: 20px;
+  font-size: var(--text-label);
+  font-weight: 600;
+}
+.health-breakdown-badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  border: 1px solid var(--border-2);
+}
+.health-narrative-text { line-height: 1.5; }
+.health-score-row { display: flex; align-items: center; gap: 16px; }
+.health-score-ring {
+  position: relative;
+  width: 64px;
+  height: 64px;
+  flex-shrink: 0;
+}
+.health-score-ring__value {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 16px;
+  font-weight: 700;
+}
+.health-narrative {
+  border-radius: 6px;
+  padding: 10px 12px;
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+}
+.health-detail-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  text-decoration: none;
+}
+.health-detail-link:hover { color: var(--text-2); }
+
+/* ── Weekly review banner ── */
+.review-banner-done {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: #0d1f14;
+  border: 1px solid #1a3a25;
+  border-radius: 8px;
+  font-size: var(--text-meta);
+  color: #00c44a;
+}
+.review-banner-done svg { width: 13px; height: 13px; }
+.review-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  border-radius: 8px;
+  cursor: pointer;
+  text-decoration: none;
+}
+.review-banner--progress {
+  background: #1a1a2e;
+  border: 1px solid #2a2a4a;
+  transition: border-color 0.15s;
+}
+.review-banner--new {
+  background: linear-gradient(135deg, #0f1f15 0%, #1a1a2e 100%);
+  border: 1px solid #2a3a30;
+}
+.review-banner__body { flex: 1; }
+.review-banner__title {
+  font-size: var(--text-body);
+  font-weight: 600;
+  color: var(--text-1);
+  margin-bottom: 2px;
+}
+.review-banner__sub { font-size: var(--text-meta); color: var(--text-2); }
+.review-banner__arrow { width: 14px; height: 14px; color: var(--text-3); }
+
+/* ── Upcoming 1:1s widget ── */
+.one-on-ones-widget {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 12px;
+  padding: 20px;
+}
+.one-on-ones-header { margin-bottom: 14px; }
+.one-on-ones-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.one-on-ones-title svg { width: 15px; height: 15px; color: #a78bfa; }
+.one-on-ones-sub { margin-top: 2px; font-size: var(--text-meta); color: var(--text-3); }
+.prep-cards { display: flex; flex-direction: column; gap: 8px; }
+.prep-card {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.prep-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+}
+.date-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: var(--text-overline);
+  font-family: var(--font-mono);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.date-chip svg { width: 10px; height: 10px; }
+.prep-card-name-wrap { flex: 1; min-width: 0; }
+.prep-card-name {
+  font-size: var(--text-body);
+  font-weight: 600;
+  color: var(--text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.prep-card-subtitle {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.prep-card-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+.prep-card-person-link {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px;
+  border-radius: 4px;
+  color: var(--text-3);
+  text-decoration: none;
+}
+.prep-card-person-link:hover { color: var(--text-1); }
+.prep-card-person-link svg { width: 12px; height: 12px; }
+.prep-card-brief-area {
+  border-top: 1px solid var(--border-1);
+  padding: 14px 16px;
+  background: var(--surf-2);
+}
+.prep-card-brief-content {
+  font-size: var(--text-meta);
+  color: var(--text-2);
+  line-height: 1.6;
+  white-space: pre-wrap;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.prep-card-brief-footer {
+  margin-top: 10px;
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.prep-card-regen-btn {
+  background: none;
+  border: none;
+  color: var(--text-3);
+  font-size: var(--text-caption);
+  cursor: pointer;
+  padding: 0;
+}
+.prep-card-regen-btn:hover { color: var(--text-1); }
+
+/* ── Competency section ─────────────────────────────────────────────────────── */
+.competency-section { margin-top: 24px; }
+.competency-card-wrap {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 8px;
+  padding: 24px;
+}
+.competency-card-wrap--loading { padding: 24px; }
+.competency-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.competency-card-title { margin: 0; }
+.competency-card-subtitle { margin-top: 2px; }
+.competency-framework-link {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  text-decoration: none;
+}
+.competency-framework-link svg { width: 11px; height: 11px; }
+.competency-setup-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%);
+  border: none;
+  border-radius: 4px;
+  color: #0a1a0a;
+  font-size: var(--text-label);
+  font-weight: 600;
+  padding: 5px 12px;
+  text-decoration: none;
+}
+.competency-setup-link svg { width: 11px; height: 11px; }
+.competency-loading-text { color: var(--text-3); }
+.competency-no-areas { color: var(--text-3); margin-bottom: 24px; }
+.competency-radar-wrap { margin-bottom: 28px; }
+.competency-areas-wrap { margin-bottom: 28px; }
+
+/* Radar chart */
+.radar-empty {
+  height: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.radar-empty-text { color: var(--text-3); }
+.radar-wrap { height: 300px; }
+.radar-legend {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  margin-top: 4px;
+}
+.radar-legend-item {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.radar-legend-line {
+  display: inline-block;
+  width: 12px;
+  height: 2px;
+  border-radius: 2px;
+}
+
+/* Promotion banner */
+.promo-banner {
+  padding: 12px 16px;
+  border-radius: 6px;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.promo-banner-label { font-weight: 600; font-size: var(--text-body); }
+.promo-banner-sub { font-size: var(--text-caption); color: var(--text-3); margin-left: 10px; }
+.promo-banner-note { font-size: var(--text-caption); color: var(--text-3); }
+
+/* No-framework empty state */
+.competency-no-framework-title { margin-bottom: 8px; }
+.competency-no-framework-text { color: var(--text-3); margin-bottom: 12px; }
+.competency-promo-readiness { margin-bottom: 20px; }
+
+/* Promotion packet */
+.promo-packet-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.promo-packet-clear-btn {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.promo-packet-content {
+  background: var(--surf-2);
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  padding: 16px 20px;
+  font-size: var(--text-label);
+  color: var(--text-2);
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+/* Competency card (area) */
+.comp-card {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  margin-bottom: 12px;
+}
+.comp-card-header {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.comp-card-toggle-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-3);
+  padding: 2px;
+  flex-shrink: 0;
+}
+.comp-card-toggle-btn svg { width: 13px; height: 13px; }
+.comp-card-name { font-weight: 600; color: var(--text-1); flex: 1; font-size: var(--text-body); }
+.comp-level-btns { display: flex; gap: 4px; flex-wrap: wrap; }
+.comp-saved-flash {
+  font-size: var(--text-caption);
+  color: #4ade80;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.comp-saved-flash svg { width: 11px; height: 11px; }
+.comp-expected-level {
+  padding-left: 40px;
+  padding-bottom: 8px;
+  padding-right: 16px;
+  font-size: var(--text-caption);
+  color: var(--text-3);
+}
+.comp-card-body {
+  padding: 12px 16px 16px 40px;
+  border-top: 1px solid var(--border-1);
+}
+.comp-notes-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.comp-gen-reasoning-btn {
+  font-size: var(--text-caption);
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--font-sans);
+}
+.comp-notes-wrap { margin-bottom: 16px; }
+.comp-evidence-wrap { margin-bottom: 16px; }
+.comp-evidence-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+.comp-link-evidence-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-3);
+  font-size: var(--text-caption);
+  padding: 3px 8px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.comp-link-evidence-btn svg { width: 11px; height: 11px; }
+.comp-evidence-list { display: grid; gap: 4px; }
+.comp-evidence-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  background: var(--surf-2);
+  border-radius: 4px;
+}
+.comp-evidence-item-title { flex: 1; font-size: var(--text-caption); color: var(--text-2); }
+.comp-evidence-item-date { font-size: var(--text-overline); color: var(--text-3); }
+.comp-evidence-unlink-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-3);
+  padding: 2px;
+}
+.comp-evidence-unlink-btn svg { width: 11px; height: 11px; }
+.comp-evidence-empty { font-size: var(--text-caption); color: var(--text-3); }
+.comp-evidence-picker {
+  margin-top: 8px;
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  max-height: 180px;
+  overflow-y: auto;
+}
+.comp-evidence-picker-empty { padding: 12px 16px; font-size: var(--text-caption); color: var(--text-3); }
+.comp-evidence-picker-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+.comp-evidence-picker-item:hover { background: var(--surf-3); }
+.comp-evidence-picker-item-title { flex: 1; font-size: var(--text-caption); color: var(--text-2); }
+.comp-evidence-picker-item-date { font-size: var(--text-overline); color: var(--text-3); }
+.comp-evidence-picker-check { width: 11px; height: 11px; color: #4ade80; flex-shrink: 0; }
+.comp-history-wrap {}
+.comp-history-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+.comp-load-history-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--text-caption);
+  color: #00f058;
+  font-family: var(--font-sans);
+  padding: 0;
+}
+.comp-history-empty { font-size: var(--text-caption); color: var(--text-3); }
+.comp-history-list { display: grid; gap: 4px; }
+.comp-history-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background: var(--surf-2);
+  border-radius: 4px;
+}
+.comp-history-date { font-size: var(--text-overline); color: var(--text-3); flex-shrink: 0; }
+.comp-history-level { font-size: var(--text-caption); font-weight: 500; }
+.comp-history-notes {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Growth plan card */
+.growth-plan-card {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  margin-bottom: 8px;
+}
+.growth-plan-header {
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.growth-plan-toggle-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-3);
+  padding: 2px;
+  flex-shrink: 0;
+}
+.growth-plan-toggle-btn svg { width: 13px; height: 13px; }
+.growth-plan-title { flex: 1; font-weight: 600; color: var(--text-1); font-size: var(--text-body); }
+.growth-plan-area-chip {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  background: var(--surf-2);
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+.growth-plan-target-level { font-size: var(--text-caption); font-weight: 500; }
+.growth-plan-status-chip {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 500;
+}
+.growth-plan-complete-btn {
+  background: none;
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-3);
+  font-size: var(--text-caption);
+  padding: 3px 8px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.growth-plan-delete-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text-3);
+  padding: 4px;
+}
+.growth-plan-delete-btn svg { width: 12px; height: 12px; }
+.growth-plan-delete-btn:hover { color: #f87171; }
+.growth-plan-body {
+  padding: 12px 14px 16px 40px;
+  border-top: 1px solid var(--border-1);
+  display: grid;
+  gap: 12px;
+}
+.growth-plan-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.growth-plan-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
+.growth-plan-label { display: block; margin-bottom: 4px; }
+
+/* Growth plan section header */
+.growth-plans-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+.growth-plans-title { margin: 0; }
+.growth-plans-actions { display: flex; align-items: center; gap: 8px; }
+.growth-plan-add-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%);
+  border: none;
+  border-radius: 4px;
+  color: #0a1a0a;
+  font-size: var(--text-caption);
+  padding: 4px 10px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  font-weight: 600;
+}
+.growth-plan-add-btn svg { width: 11px; height: 11px; }
+.growth-plan-empty { font-size: var(--text-caption); color: var(--text-3); margin-bottom: 12px; }
+.growth-plan-archive { margin-top: 8px; }
+.growth-plan-archive-summary {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+
+/* Add growth plan form */
+.add-growth-plan-form {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  padding: 16px;
+  margin-bottom: 8px;
+}
+.add-growth-plan-grid { display: grid; gap: 10px; }
+.add-growth-plan-footer { display: flex; gap: 8px; justify-content: flex-end; }
+.add-growth-plan-cancel-btn {
+  background: none;
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-2);
+  font-size: var(--text-label);
+  padding: 5px 12px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.add-growth-plan-save-btn {
+  background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%);
+  border: none;
+  border-radius: 4px;
+  color: #0a1a0a;
+  font-size: var(--text-label);
+  font-weight: 600;
+  padding: 5px 14px;
+  font-family: var(--font-sans);
+}
+.add-growth-plan-save-btn:not(:disabled) { cursor: pointer; }
+.add-growth-plan-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ── Skills matrix ──────────────────────────────────────────────────────────── */
+.skills-matrix-loading { color: var(--text-3); padding: 16px; }
+.skills-matrix-no-fw { padding: 24px; }
+.skills-matrix-no-fw-text { color: var(--text-3); margin-bottom: 12px; }
+.skills-matrix-fw-link { color: #00f058; font-size: var(--text-label); }
+.skills-matrix-no-members { color: var(--text-3); padding: 16px; }
+.skills-matrix-table-wrap { overflow-x: auto; margin-bottom: 28px; }
+.skills-matrix-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-caption);
+}
+.skills-matrix-th-person {
+  padding: 8px 12px;
+  text-align: left;
+  font-weight: 600;
+  color: var(--text-2);
+  border-bottom: 1px solid var(--border-1);
+  white-space: nowrap;
+  background: var(--surf-2);
+}
+.skills-matrix-th-area {
+  padding: 8px 12px;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  background: var(--surf-2);
+  cursor: pointer;
+}
+.skills-matrix-row { border-bottom: 1px solid var(--border-1); }
+.skills-matrix-td-person { padding: 8px 12px; white-space: nowrap; }
+.skills-matrix-person-link {
+  color: var(--text-1);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: var(--text-label);
+}
+.skills-matrix-person-level { margin-left: 6px; font-size: var(--text-overline); font-weight: 500; }
+.skills-matrix-td-empty {
+  padding: 8px 12px;
+  text-align: center;
+  color: var(--text-3);
+  font-size: var(--text-caption);
+  background: var(--surf-2);
+}
+.skills-matrix-td {
+  padding: 8px 12px;
+  text-align: center;
+  font-size: var(--text-caption);
+}
+.skills-matrix-td-level { font-weight: 500; }
+.skills-matrix-td-indicator { color: var(--text-3); margin-left: 2px; }
+.skills-matrix-legend {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 24px;
+  flex-wrap: wrap;
+}
+.skills-matrix-legend-item {
+  font-size: var(--text-caption);
+  color: var(--text-3);
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.skills-matrix-legend-symbol { font-weight: 600; }
+.skills-matrix-gap-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+.skills-matrix-gap-card {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  padding: 14px;
+}
+.skills-matrix-gap-title {
+  font-weight: 600;
+  color: var(--text-2);
+  font-size: var(--text-label);
+  margin-bottom: 8px;
+}
+.skills-matrix-gap-empty { font-size: var(--text-caption); color: var(--text-3); }
+.skills-matrix-gap-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
+.skills-matrix-gap-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  font-size: var(--text-caption);
+}
+.skills-matrix-gap-bullet { flex-shrink: 0; margin-top: 1px; }
+.skills-matrix-gap-text { color: var(--text-2); }
+
+/* ── Task card ──────────────────────────────────────────────────────────────── */
+.task-card-menu-btn {
+  background: none;
+  border: none;
+  color: var(--text-3);
+  cursor: pointer;
+  padding: 2px;
+  border-radius: 4px;
+}
+.task-card-menu-dropdown {
+  position: absolute;
+  right: 0;
+  margin-top: 4px;
+  width: 128px;
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  z-index: 50;
+  overflow: hidden;
+}
+.task-card-menu-item {
+  width: 100%;
+  text-align: left;
+  padding: 8px 12px;
+  font-size: var(--text-label);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.task-card-menu-item:hover { background: var(--surf-3); }
+.task-card-menu-item--edit { color: var(--text-1); }
+.task-card-menu-item--delete { color: #f87171; }
+.task-priority-btn {
+  flex: 1;
+  padding: 4px 4px;
+  border-radius: 4px;
+  font-size: var(--text-overline);
+  font-weight: 500;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 120ms;
+}
+.task-title {
+  font-size: var(--text-meta);
+  font-weight: 400;
+  color: var(--text-1);
+  margin-bottom: 9px;
+  line-height: 1.4;
+  padding-right: 20px;
+}
+.task-meta-row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex-wrap: wrap;
+}
+.task-due-date {
+  font-size: var(--text-overline);
+  color: var(--text-3);
+  font-family: var(--font-mono);
+  margin-left: auto;
+}
+.priority-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 7px;
+  border-radius: 4px;
+  font-size: var(--text-overline);
+  font-weight: 500;
+  font-family: var(--font-mono);
+}
+.priority-pill-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+/* ── Board column ───────────────────────────────────────────────────────────── */
+.board-col-outer { background: var(--surf); border: 1px solid var(--border-1); }
+.board-col-body { padding: 10px; gap: 6px; display: flex; flex-direction: column; }
+.board-col-inner-list { display: flex; flex-direction: column; gap: 6px; min-height: 100px; }
+.board-col-header {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border-1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.board-col-header-left { display: flex; align-items: center; gap: 6px; }
+.board-col-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.board-col-name { font-size: var(--text-meta); font-weight: 500; color: var(--text-1); }
+.board-col-count {
+  background: var(--surf-3);
+  color: var(--text-3);
+  font-size: var(--text-overline);
+  border-radius: 3px;
+  padding: 1px 5px;
+  font-family: var(--font-mono);
+}
+.board-col-add-btn {
+  color: var(--text-3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  line-height: 1;
+}
+.board-col-add-btn:hover { color: #00f058; }
+.board-col-empty {
+  border: 1px dashed var(--border-1);
+  border-radius: 6px;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.board-col-empty-text { font-size: var(--text-caption); color: var(--text-3); }
+.board-col-drop-placeholder {
+  height: 60px;
+  border: 1px dashed var(--border-2);
+  border-radius: 6px;
+  background: var(--surf-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.board-col-add-task-btn {
+  padding: 7px 12px;
+  border-top: 1px solid var(--border-1);
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  color: var(--text-3);
+  font-size: var(--text-caption);
+  background: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+}
+.board-col-add-task-btn:hover { color: #00f058; }
+
+/* ── Backlog table ───────────────────────────────────────────────────────────── */
+.backlog-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.backlog-controls-left { display: flex; align-items: center; gap: 8px; }
+.backlog-search-wrap { position: relative; }
+.backlog-search-icon {
+  width: 14px;
+  height: 14px;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-3);
+  pointer-events: none;
+}
+.backlog-search-input {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  padding: 5px 10px 5px 30px;
+  font-size: var(--text-label);
+  color: var(--text-1);
+  width: 180px;
+  outline: none;
+}
+.backlog-filters-btn {
+  border: 1px solid var(--border-2);
+  color: var(--text-2);
+  font-size: var(--text-label);
+  padding: 5px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.backlog-filters-btn:hover { color: var(--text-1); }
+.backlog-controls-right { display: flex; align-items: center; gap: 8px; }
+.backlog-new-task-btn {
+  background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%);
+  color: #0a1a0a;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+.backlog-ai-banner {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: rgba(124,58,237,0.08);
+  border: 1px solid rgba(124,58,237,0.25);
+  border-radius: 6px;
+  margin-bottom: 12px;
+  font-size: var(--text-label);
+  color: #a78bfa;
+}
+.backlog-ai-banner svg { width: 13px; height: 13px; flex-shrink: 0; }
+.backlog-filter-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
+.backlog-filter-item { display: flex; align-items: center; gap: 6px; }
+.backlog-filter-label { font-size: var(--text-label); color: var(--text-2); font-weight: 500; }
+.backlog-filter-select {
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  padding: 3px 6px;
+  font-size: var(--text-label);
+  color: var(--text-1);
+  cursor: pointer;
+}
+.backlog-th { padding: 8px 12px; background: var(--surf); }
+.backlog-th-handle { padding: 8px 12px; background: var(--surf); }
+.backlog-th-rank { padding: 8px 6px; background: var(--surf); text-align: center; }
+.backlog-th-rank-label {
+  font-size: var(--text-overline);
+  color: #a78bfa;
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+.backlog-sort-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--text-3);
+  font-size: var(--text-label);
+  font-weight: 600;
+}
+.backlog-sort-btn:hover { color: var(--text-2); }
+.backlog-sort-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
+.backlog-td-handle { padding: 9px 12px; text-align: center; }
+.backlog-td-rank { padding: 9px 6px; text-align: center; }
+.backlog-rank-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  font-size: var(--text-overline);
+  font-family: var(--font-mono);
+  font-weight: 700;
+}
+.backlog-rank-unranked { color: var(--text-3); font-size: var(--text-overline); }
+.backlog-td-name {
+  padding: 9px 12px;
+  color: var(--text-1);
+  font-size: var(--text-meta);
+  overflow: hidden;
+}
+.backlog-td { padding: 9px 12px; }
+.backlog-td-date {
+  padding: 9px 12px;
+  font-size: var(--text-overline);
+  color: var(--text-3);
+  font-family: var(--font-mono);
+}
+.backlog-td-actions { padding: 9px 12px; text-align: center; }
+.backlog-action-btn {
+  border: 1px solid var(--border-2);
+  color: var(--text-3);
+  border-radius: 4px;
+  padding: 2px 7px;
+  font-size: var(--text-meta);
+  background: none;
+  cursor: pointer;
+}
+.backlog-action-btn:hover { color: var(--text-1); }
+.backlog-action-btn--danger:hover { color: #f87171; }
+.backlog-table-wrap {
+  background: var(--surf);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.backlog-thead-tr { border-bottom: 1px solid var(--border-1); }
+.backlog-grip-icon { width: 14px; height: 14px; color: var(--text-3); }
+.backlog-ai-banner strong { color: #c4b5fd; }
+
+/* ── Draggable placeholders ──────────────────────────────────────────────────── */
+.drag-placeholder-card {
+  height: 80px;
+  border: 1px dashed var(--border-2);
+  border-radius: 6px;
+  background: var(--surf-2);
+  opacity: 0.5;
+}
+.drag-placeholder-td { padding: 6px 12px; }
+.draggable-row { border-bottom: 1px solid var(--border-1); }
+.drag-placeholder-row {
+  height: 32px;
+  border: 1px dashed var(--border-2);
+  border-radius: 4px;
+  background: var(--surf-2);
+  opacity: 0.5;
+}
+
+/* ── Natural language task input ─────────────────────────────────────────────── */
+.nl-task-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: var(--surface-2);
+  border: 1px solid var(--border-2);
+  border-radius: 8px;
+  padding: 6px 8px;
+  max-width: 480px;
+  width: 100%;
+}
+.nl-task-icon { color: var(--text-3); flex-shrink: 0; }
+.nl-task-bare-input {
+  border: none;
+  background: transparent;
+  padding: 0;
+  height: auto;
+  font-size: var(--text-caption);
+  color: var(--text-1);
+  box-shadow: none;
+  outline: none;
+}
+.nl-dialog { max-width: 480px; }
+.nl-confidence-icon { flex-shrink: 0; }
+.nl-task-submit-btn {
+  background: none;
+  border: none;
+  padding: 2px 4px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+.nl-task-enter { font-size: var(--text-meta); }
+.nl-preview-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.nl-preview-confidence-label { font-size: var(--text-meta); }
+.nl-preview-raw { color: var(--text-3); font-size: var(--text-meta); }
+.nl-preview-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding-top: 8px;
+}
+.nl-preview-field { display: flex; flex-direction: column; gap: 4px; }
+.nl-preview-2col {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.nl-assignee-display {
+  font-size: var(--text-caption);
+  color: var(--text-2);
+  background: var(--surface-2);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  padding: 6px 10px;
+}
+.nl-preview-footer { margin-top: 8px; }
+
+/* ── Meeting form dialog ─────────────────────────────────────────────────────── */
+.meeting-suggestion-dropdown {
+  position: absolute;
+  z-index: 50;
+  width: 100%;
+  margin-top: 4px;
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
+  max-height: 192px;
+  overflow-y: auto;
+}
+.meeting-suggestion-item {
+  padding: 6px 12px;
+  font-size: var(--text-label);
+  cursor: pointer;
+  color: var(--text-2);
+}
+.meeting-suggestion-item:hover { background: var(--surf-3); }
+.meeting-new-person-badge {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.meeting-new-person-label {
+  font-size: var(--text-overline);
+  background: var(--surf-3);
+  color: var(--text-2);
+  border: 1px solid var(--border-2);
+  border-radius: 3px;
+  padding: 2px 6px;
+}
+.meeting-template-btn {
+  padding: 3px 10px;
+  border-radius: 4px;
+  font-size: var(--text-label);
+  font-family: var(--font-sans);
+  cursor: pointer;
+}
+.meeting-tldr-box {
+  border-radius: 8px;
+  padding: 10px 12px;
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+}
+.meeting-tldr-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+.meeting-tldr-title { font-size: var(--text-label); color: var(--text-2); font-weight: 600; }
+.meeting-tldr-regen-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--text-label);
+  color: var(--text-3);
+  background: none;
+  border: none;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.meeting-tldr-regen-btn:not(:disabled) { cursor: pointer; }
+.meeting-tldr-regen-btn:disabled { cursor: not-allowed; }
+.meeting-tldr-text { font-size: var(--text-body); color: var(--text-2); line-height: 1.5; }
+.meeting-tldr-pending { font-size: var(--text-body); color: var(--text-3); font-style: italic; }
+
+/* ── Data table ──────────────────────────────────────────────────────────────── */
+.data-table-wrap { display: flex; flex-direction: column; gap: 0; }
+.data-table-controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.data-table-controls-left { display: flex; align-items: center; gap: 8px; }
+.data-table-search-wrap { position: relative; }
+.data-table-search-icon {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-3);
+  pointer-events: none;
+}
+.data-table-search-input {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 6px;
+  padding: 5px 10px 5px 30px;
+  font-size: var(--text-label);
+  color: var(--text-1);
+  width: 180px;
+  outline: none;
+  font-family: var(--font-sans);
+}
+.data-table-filters-btn {
+  border: 1px solid var(--border-2);
+  color: var(--text-2);
+  font-size: var(--text-label);
+  padding: 5px 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.data-table-filters-btn:hover { color: var(--text-1); }
+.data-table-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%);
+  border: none;
+  color: #0a1a0a;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.data-table-filter-panel {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 8px;
+  margin-bottom: 12px;
+}
+.data-table-filter-item { display: flex; align-items: center; gap: 6px; }
+.data-table-filter-label { font-size: var(--text-label); color: var(--text-2); font-weight: 500; font-family: var(--font-sans); }
+.data-table-filter-select {
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  padding: 3px 6px;
+  font-size: var(--text-label);
+  color: var(--text-1);
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.data-table-box {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.data-table { width: 100%; border-collapse: collapse; }
+.data-table-head-row { border-bottom: 1px solid var(--border-1); }
+.data-table-th { padding: 8px 12px; background: var(--surf); }
+.data-table-sort-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  font-family: var(--font-sans);
+  color: var(--text-3);
+  font-size: var(--text-label);
+  font-weight: 600;
+}
+.data-table-sort-btn:hover { color: var(--text-2); }
+.data-table-sort-btn svg { width: 11px; height: 11px; flex-shrink: 0; }
+.data-table-td { padding: 9px 12px; font-size: var(--text-meta); color: var(--text-1); }
+.data-table-empty-td { padding: 0; }
+.data-table-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  text-align: center;
+}
+.data-table-empty-text { font-size: var(--text-meta); color: var(--text-3); }
+
+/* ── Page shared ─────────────────────────────────────────────────────────────── */
+.page-content { padding: 16px; }
+.page-content--lg { padding: 32px; }
+.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 14px; }
+.stat-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 6px; padding: 10px 12px; }
+.stat-card-label {} /* uses .form-label */
+.stat-card-value { font-size: 20px; font-weight: 500; color: var(--text-1); font-family: var(--font-mono); }
+.stat-card-sub { font-size: var(--text-overline); color: var(--text-3); margin-top: 2px; }
+.page-section-label {
+  font-size: var(--text-overline);
+  font-weight: 500;
+  letter-spacing: 0.07em;
+  color: var(--text-3);
+  text-transform: uppercase;
+}
+.page-section-filter-btn {
+  background: transparent;
+  border: 1px solid var(--border-2);
+  color: var(--text-2);
+  font-size: var(--text-caption);
+  padding: 3px 8px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.page-section-filter-btn:hover { color: var(--text-1); }
+.page-actions-row { display: flex; align-items: center; gap: 8px; }
+.page-loading { font-size: var(--text-meta); color: var(--text-3); padding: 48px 32px; }
+
+/* ── Team detail page ────────────────────────────────────────────────────────── */
+.team-back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: var(--text-2);
+  cursor: pointer;
+  font-size: var(--text-label);
+  margin-bottom: 16px;
+  padding: 4px 0;
+}
+.team-back-btn:hover { color: var(--text-1); }
+.team-back-btn svg { width: 14px; height: 14px; }
+.team-title-row { display: flex; align-items: center; gap: 12px; }
+.team-status-badge {
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+}
+.team-overview-card {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 8px;
+  padding: 20px;
+  margin-bottom: 24px;
+}
+.team-overview-body { display: flex; gap: 32px; }
+.team-overview-stat-label { font-size: var(--text-overline); color: var(--text-3); font-weight: 600; margin-bottom: 2px; }
+.team-overview-stat-value { font-size: var(--text-h2); font-weight: 700; color: var(--text-1); }
+.team-overview-notes-label { font-size: var(--text-overline); color: var(--text-3); font-weight: 600; margin-bottom: 4px; }
+.team-overview-notes-text { font-size: var(--text-label); color: var(--text-2); }
+.team-matrix-card {
+  background: var(--surf);
+  border: 1px solid var(--border-1);
+  border-radius: 8px;
+  padding: 24px;
+}
+.team-matrix-header { margin-bottom: 20px; }
+.team-matrix-title { margin: 0; }
+.team-matrix-sub { margin-top: 2px; }
+
+/* ── Follow-ups page ─────────────────────────────────────────────────────────── */
+.fu-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
+.fu-stat-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 6px; padding: 12px 14px; }
+.fu-stat-value { font-size: var(--text-section); font-weight: 700; }
+.fu-filters-row { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
+.fu-view-btn {
+  border-radius: 4px;
+  font-size: var(--text-meta);
+  padding: 5px 12px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  text-transform: capitalize;
+}
+.fu-filter-select {
+  background: var(--surf-2);
+  border: 1px solid var(--border-1);
+  border-radius: 4px;
+  color: var(--text-2);
+  font-size: var(--text-meta);
+  padding: 5px 10px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.fu-overdue-label { display: flex; align-items: center; gap: 6px; font-size: var(--text-meta); color: var(--text-2); cursor: pointer; }
+.fu-loading { font-size: var(--text-meta); color: var(--text-3); }
+.fu-empty { padding: 32px 0; text-align: center; }
+.fu-empty-text { color: var(--text-3); font-size: var(--text-meta); }
+.fu-list { display: flex; flex-direction: column; gap: 2px; }
+.fu-col-headers {
+  display: grid;
+  grid-template-columns: 1fr 140px 120px 100px 120px;
+  gap: 12px;
+  padding: 6px 12px;
+}
+.fu-row {
+  display: grid;
+  grid-template-columns: 1fr 140px 120px 100px 120px;
+  gap: 12px;
+  align-items: center;
+  padding: 10px 12px;
+  border-radius: 5px;
+}
+.fu-row-title { min-width: 0; }
+.fu-title-text { font-size: var(--text-meta); color: var(--text-1); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fu-desc-text { font-size: var(--text-caption); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
+.fu-person-link { font-size: var(--text-meta); color: var(--text-2); text-decoration: none; display: flex; align-items: center; gap: 3px; }
+.fu-person-link svg { width: 9px; height: 9px; }
+.fu-person-none { font-size: var(--text-meta); color: var(--text-3); }
+.fu-date-cell { font-size: var(--text-meta); color: var(--text-3); }
+.fu-source-cell { font-size: var(--text-caption); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.fu-badge { font-size: var(--text-caption); border-radius: 4px; padding: 2px 6px; }
+.fu-badge--done { color: #00f058; background: #0d1f14; border: 1px solid #1a3a25; font-weight: 600; }
+.fu-badge--cancelled { color: var(--text-3); background: var(--surf-3); border: 1px solid var(--border-2); }
+.fu-badge--overdue { color: #ff6b6b; background: #2a0a0a; border: 1px solid #5a2020; font-weight: 600; }
+.fu-badge--open { color: var(--text-2); background: var(--surf-3); border: 1px solid var(--border-2); }
+.fu-picker-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.fu-picker-card {
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 8px;
+  padding: 20px;
+  width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.fu-picker-title { font-size: var(--text-body); font-weight: 600; color: var(--text-1); }
+.fu-picker-sub { font-size: var(--text-meta); color: var(--text-3); margin-top: 4px; }
+.fu-picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow-y: auto; }
+.fu-picker-loading { font-size: var(--text-meta); color: var(--text-3); padding: 8px 0; }
+.fu-picker-empty { font-size: var(--text-meta); color: var(--text-3); padding: 8px 0; }
+.fu-picker-btn {
+  background: var(--surf-3);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-1);
+  font-size: var(--text-meta);
+  padding: 8px 12px;
+  cursor: pointer;
+  text-align: left;
+  font-family: var(--font-sans);
+}
+.fu-picker-btn-role { color: var(--text-3); }
+
+/* ── Evidence page ───────────────────────────────────────────────────────────── */
+.ev-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
+.ev-stat-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 16px 20px; }
+.ev-stat-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
+.ev-form-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 20px 24px; margin-bottom: 20px; }
+.ev-form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+.ev-form-close-btn { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px; }
+.ev-form-close-btn svg { width: 16px; height: 16px; }
+.ev-form-grid { display: grid; gap: 14px; }
+.ev-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 180px; gap: 12px; }
+.ev-form-field { display: grid; gap: 4px; }
+.ev-form-select {
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  color: var(--text-1);
+  padding: 6px 10px;
+  font-size: var(--text-label);
+  cursor: pointer;
+}
+.ev-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.ev-form-sentiment-row { display: flex; align-items: center; gap: 8px; }
+.ev-form-sentiment-btns { display: flex; gap: 4px; }
+.ev-form-actions { display: flex; gap: 8px; }
+.ev-filter-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 16px 20px; margin-bottom: 16px; }
+.ev-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.ev-filter-label { flex-shrink: 0; margin: 0; }
+.ev-filter-select {
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  color: var(--text-3);
+  padding: 4px 8px;
+  font-size: var(--text-label);
+  cursor: pointer;
+}
+.ev-filter-date-wrap { width: 160px; flex-shrink: 0; }
+.ev-filter-sep { color: var(--text-3); font-size: var(--text-caption); flex-shrink: 0; }
+.ev-filter-clear-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text-3); cursor: pointer; font-size: var(--text-caption); }
+.ev-filter-clear-btn svg { width: 12px; height: 12px; }
+.ev-list-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; overflow: hidden; }
+.ev-list-empty { padding: 48px 24px; text-align: center; }
+.ev-list-empty-text { color: var(--text-3); margin-bottom: 12px; }
+.ev-list-header-row { padding: 10px 20px; border-bottom: 1px solid var(--border-1); display: flex; gap: 12px; }
+.ev-list-col-category { flex: 0 0 160px; }
+.ev-list-col-person { flex: 0 0 160px; }
+.ev-list-col-evidence { flex: 1; }
+.ev-list-col-sentiment { flex: 0 0 90px; }
+.ev-list-col-date { flex: 0 0 100px; text-align: right; }
+.ev-list-col-actions { flex: 0 0 60px; }
+.ev-list-row { padding: 10px 20px; border-bottom: 1px solid var(--border-1); display: flex; gap: 12px; align-items: center; }
+.ev-list-row:hover { background: #292929; }
+.ev-cat-badge { padding: 2px 7px; border-radius: 3px; font-size: var(--text-caption); font-weight: 600; }
+.ev-person-link { font-size: var(--text-label); color: var(--text-2); text-decoration: none; }
+.ev-person-link:hover { color: var(--text-1); }
+.ev-person-unknown { font-size: var(--text-caption); color: var(--text-3); }
+.ev-entry-col { flex: 1; overflow: hidden; }
+.ev-entry-title { font-size: var(--text-label); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ev-entry-content { font-size: var(--text-caption); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ev-sentiment { font-size: var(--text-caption); }
+.ev-date { font-size: var(--text-caption); color: var(--text-3); }
+.ev-delete-btn { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 4px; }
+.ev-delete-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.ev-delete-btn svg { width: 14px; height: 14px; }
+.ev-footer { padding: 10px 20px; border-top: 1px solid var(--border-1); }
+.ev-footer-text { font-size: var(--text-caption); color: var(--text-3); }
+
+/* ── Person detail page ──────────────────────────────────────────────────────── */
+.person-page { padding: 32px; }
+.person-header { margin-bottom: 24px; }
+.person-back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: var(--text-2);
+  cursor: pointer;
+  font-size: var(--text-label);
+  margin-bottom: 16px;
+  padding: 4px 0;
+}
+.person-back-btn:hover { color: var(--text-1); }
+.person-back-btn svg { width: 14px; height: 14px; }
+.person-title-row { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
+.person-role-sub { margin-top: 2px; }
+.person-signals-col { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
+.person-signal-row { display: flex; align-items: flex-start; gap: 5px; }
+.person-signal-msg { font-size: var(--text-caption); color: var(--text-3); }
+.person-signal-icon { flex-shrink: 0; margin-top: 2px; width: 11px; height: 11px; }
+.person-newhire-badge {
+  font-size: 13px;
+  font-weight: 600;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: rgba(0,240,88,0.12);
+  color: #00f058;
+  border: 1px solid rgba(0,240,88,0.3);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.person-onboarding-wrap { margin-top: 8px; min-width: 160px; }
+.person-onboarding-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
+.person-onboarding-label { font-size: 13px; font-weight: 600; color: #00f058; text-transform: uppercase; letter-spacing: 0.04em; }
+.person-onboarding-days { font-size: 13px; color: var(--text-3); }
+.person-onboarding-bar-track { height: 4px; border-radius: 2px; background: var(--border-1); overflow: hidden; }
+.person-onboarding-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, hsl(174,100%,50%), hsl(142,100%,47%)); transition: width 0.3s ease; }
+/* Profile card */
+.person-profile-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 24px; margin-bottom: 24px; }
+.person-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+.person-profile-left { display: grid; gap: 16px; }
+.person-profile-field { display: grid; gap: 6px; }
+.person-level-btns { display: flex; flex-wrap: wrap; gap: 6px; }
+.person-profile-right { display: flex; flex-direction: column; }
+.person-profile-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
+/* Dual list */
+.dual-list-box { border: 1px solid var(--border-2); border-radius: 4px; height: 192px; overflow-y: auto; background: var(--surf-2); }
+.dual-list-label { font-size: var(--text-label); color: var(--text-3); display: block; margin-bottom: 4px; }
+.dual-list-row { display: flex; gap: 12px; align-items: center; }
+.dual-list-col { flex: 1; }
+.dual-list-arrows { display: flex; flex-direction: column; gap: 8px; }
+.dual-list-arrow-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  border: 1px solid var(--border-2);
+  background: var(--surf-2);
+  color: var(--text-2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dual-list-arrow-btn:not(:disabled) { cursor: pointer; }
+.dual-list-arrow-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.dual-list-arrow-btn svg { width: 16px; height: 16px; }
+.dual-list-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--text-label); color: var(--text-3); }
+.dual-list-item { padding: 6px 12px; font-size: var(--text-label); cursor: pointer; user-select: none; }
+/* Meetings section */
+.person-meetings-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; overflow: hidden; }
+.person-meetings-header { padding: 16px 20px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; justify-content: space-between; }
+.person-meetings-title-sub { margin-top: 2px; }
+.person-meetings-log-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%);
+  border: none;
+  color: #0a1a0a;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.person-meetings-log-btn svg { width: 11px; height: 11px; }
+.person-meetings-body { display: flex; height: 900px; overflow: hidden; }
+.person-meetings-left { flex-shrink: 0; background: var(--surf-2); border-right: 1px solid var(--border-1); overflow-y: auto; }
+.person-meetings-left-inner { padding: 8px 0; }
+.person-meetings-left-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; text-align: center; }
+.person-meetings-left-empty-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%);
+  border: none;
+  color: #0a1a0a;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  cursor: pointer;
+}
+.person-meetings-left-empty-btn svg { width: 11px; height: 11px; }
+.person-tree-type-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: var(--text-meta);
+  font-weight: 500;
+  color: var(--text-2);
+  text-align: left;
+}
+.person-tree-type-btn:hover { background: var(--surf-3); }
+.person-tree-type-btn svg { width: 12px; height: 12px; }
+.person-tree-meetings { padding-left: 20px; }
+.person-tree-meeting-btn {
+  display: block;
+  width: 100%;
+  padding: 5px 12px;
+  background: none;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  cursor: pointer;
+  font-size: var(--text-caption);
+  text-align: left;
+}
+.person-meetings-divider { width: 4px; background: var(--border-1); cursor: col-resize; flex-shrink: 0; }
+.person-meetings-divider:hover { background: var(--border-2); }
+.person-meetings-right { flex: 1; overflow-y: auto; padding: 20px 24px; }
+.person-meetings-right-empty { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; }
+.person-meeting-detail { display: grid; gap: 16px; }
+.person-prep-box { background: var(--surf-2); border: 1px solid var(--border-1); border-radius: 6px; padding: 12px 16px; }
+.person-prep-header { display: flex; align-items: center; justify-content: space-between; }
+.person-prep-label { font-size: var(--text-label); font-weight: 600; color: var(--text-2); }
+.person-prep-actions { display: flex; align-items: center; gap: 8px; }
+.person-prep-content { font-size: var(--text-label); color: var(--text-2); white-space: pre-wrap; line-height: 1.7; margin-top: 12px; }
+.person-meeting-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.person-meeting-field { display: grid; gap: 4px; }
+/* Follow-ups section */
+.person-followups-card { margin-top: 24px; background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 20px; }
+.person-followups-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
+.person-followups-title { margin: 0; }
+.person-followup-add-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: var(--surf-3);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-2);
+  font-size: var(--text-meta);
+  padding: 5px 10px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.person-followup-add-btn svg { width: 11px; height: 11px; }
+.person-section-mt { margin-top: 24px; }
+/* not-found state */
+.person-not-found { display: flex; align-items: center; justify-content: center; height: 100%; }
+
+/* ── Review prep page ────────────────────────────────────────────────────────── */
+.review-page { padding: 32px; max-width: 900px; }
+.review-header { margin-bottom: 24px; }
+.review-back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: none;
+  color: var(--text-2);
+  cursor: pointer;
+  font-size: var(--text-label);
+  margin-bottom: 16px;
+  padding: 4px 0;
+}
+.review-back-btn:hover { color: var(--text-1); }
+.review-back-btn svg { width: 14px; height: 14px; }
+.review-header-row { display: flex; align-items: flex-start; justify-content: space-between; }
+.review-header-actions { display: flex; gap: 8px; }
+.review-sub { margin-top: 4px; }
+.review-period-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; }
+.review-period-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
+.review-period-field { display: grid; gap: 4px; }
+.review-period-select {
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  color: var(--text-1);
+  padding: 6px 10px;
+  font-size: var(--text-label);
+  cursor: pointer;
+}
+.review-period-save-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: 1px solid var(--border-2);
+  color: var(--text-2);
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  cursor: pointer;
+}
+.review-period-save-btn svg { width: 12px; height: 12px; }
+.review-period-padtop { padding-top: 18px; }
+.review-new-cycle-form { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-1); }
+.review-new-cycle-field { display: grid; gap: 4px; flex: 1; }
+.review-period-stats { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-1); display: flex; gap: 24px; }
+.review-period-stat { font-size: var(--text-caption); color: var(--text-3); }
+/* Section card */
+.review-section-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
+.review-section-header-row { display: flex; align-items: center; }
+.review-section-toggle-btn {
+  flex: 1;
+  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+}
+.review-section-toggle-btn:hover { background: var(--surf-2); }
+.review-section-toggle-btn svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
+.review-section-title { flex: 1; }
+.review-section-count { font-size: var(--text-caption); color: var(--text-3); }
+.review-section-extra { padding: 0 16px; }
+.review-section-body { padding: 4px 20px 20px; }
+.review-section-empty { font-size: var(--text-label); color: var(--text-3); font-style: italic; padding-top: 8px; }
+/* AI badge in summary */
+.review-ai-badge-wrap { margin-bottom: 10px; }
+.review-cancel-btn { font-size: var(--text-caption); color: var(--text-3); background: none; border: none; cursor: pointer; padding: 2px 6px; }
+/* Meeting row in Meeting History section */
+.review-meeting-item { padding: 12px 16px; border: 1px solid var(--border-1); border-radius: 6px; margin-bottom: 8px; background: var(--surf-2); }
+.review-meeting-item-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+.review-meeting-title { font-size: var(--text-label); color: var(--text-1); font-weight: 500; }
+.review-meeting-meta { font-size: var(--text-caption); color: var(--text-3); margin-top: 2px; }
+.review-meeting-notes { font-size: var(--text-caption); color: var(--text-2); margin-top: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.review-save-as-evidence-btn {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  border: 1px solid var(--border-2);
+  background: var(--surf);
+  color: var(--text-2);
+  cursor: pointer;
+}
+.review-save-as-evidence-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.review-save-as-evidence-btn svg { width: 11px; height: 11px; }
+/* Evidence card */
+.review-ev-card { padding: 12px 16px; border: 1px solid var(--border-1); border-radius: 6px; margin-bottom: 8px; background: var(--surf-2); }
+.review-ev-card-inner { display: flex; align-items: flex-start; gap: 10px; }
+.review-ev-cat-badge { padding: 2px 7px; border-radius: 3px; font-size: var(--text-caption); font-weight: 600; flex-shrink: 0; margin-top: 2px; }
+.review-ev-body { flex: 1; }
+.review-ev-header { display: flex; align-items: center; gap: 8px; }
+.review-ev-title { font-size: var(--text-label); color: var(--text-1); font-weight: 500; flex: 1; }
+.review-ev-sentiment { font-size: var(--text-caption); flex-shrink: 0; }
+.review-ev-date { font-size: var(--text-caption); color: var(--text-3); flex-shrink: 0; }
+.review-ev-content { font-size: var(--text-caption); color: var(--text-2); white-space: pre-wrap; }
+.review-ev-meeting { font-size: var(--text-caption); color: #60a5fa; margin-top: 4px; }
+/* Save notes footer */
+.review-save-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-1); }
+
+/* ── Career Goals page ───────────────────────────────────────────────────────── */
+.cg-page { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
+.cg-section-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 6px; overflow: hidden; }
+.cg-section-header { padding: 12px 16px; border-bottom: 1px solid var(--border-1); }
+.cg-section-header--between { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
+.cg-section-title-row { display: flex; align-items: center; gap: 6px; font-size: var(--text-meta); font-weight: 500; color: var(--text-1); }
+.cg-section-title-row svg { width: 13px; height: 13px; }
+.cg-section-desc { font-size: var(--text-caption); color: var(--text-3); margin-top: 4px; line-height: 1.5; }
+.cg-section-body { padding: 16px; }
+.cg-add-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%);
+  border: none;
+  color: #0a1a0a;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  flex-shrink: 0;
+}
+.cg-gap-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; text-align: center; border: 1px solid var(--border-1); border-radius: 6px; background: var(--surf-2); }
+.cg-gap-empty svg { width: 32px; height: 32px; color: var(--text-3); margin-bottom: 12px; }
+.cg-gap-empty-title { font-size: var(--text-meta); font-weight: 500; color: var(--text-1); margin-bottom: 4px; }
+.cg-gap-empty-desc { font-size: var(--text-caption); color: var(--text-3); margin-bottom: 12px; }
+.cg-table-wrap { overflow-x: auto; border: 1px solid var(--border-1); border-radius: 6px; }
+.cg-table { width: 100%; border-collapse: collapse; }
+.cg-table-head-row { border-bottom: 1px solid var(--border-1); background: var(--surf-2); }
+.cg-table-body-row { border-bottom: 1px solid var(--border-1); }
+.cg-table-body-row:hover { background: var(--surf-2); }
+.cg-td { padding: 10px 12px; font-size: var(--text-meta); color: var(--text-2); word-break: break-word; }
+.cg-td--name { font-weight: 500; color: var(--text-1); }
+.cg-td-actions { padding: 10px 12px; }
+.cg-td-actions-inner { display: flex; align-items: center; justify-content: center; gap: 4px; }
+.cg-edit-btn { background: none; border: 1px solid var(--border-2); color: var(--text-3); border-radius: 3px; padding: 2px 6px; cursor: pointer; }
+.cg-edit-btn:hover { color: var(--text-1); }
+.cg-edit-btn svg { width: 11px; height: 11px; }
+.cg-delete-btn { background: none; border: 1px solid var(--border-2); color: #f87171; border-radius: 3px; padding: 2px 6px; cursor: pointer; }
+.cg-delete-btn:hover { background: var(--surf-3); }
+.cg-delete-btn svg { width: 11px; height: 11px; }
+.cg-goal-delete-btn { background: none; border: none; color: #f87171; cursor: pointer; padding: 2px; }
+.cg-goal-delete-btn:hover { background: var(--surf-3); }
+.cg-goal-delete-btn svg { width: 11px; height: 11px; }
+.cg-add-goal-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: transparent;
+  border: 1px solid var(--border-2);
+  color: var(--text-2);
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  cursor: pointer;
+}
+.cg-add-goal-btn:hover { color: var(--text-1); }
+.cg-goals-section { display: flex; flex-direction: column; gap: 16px; }
+.cg-focus-table-wrap { overflow-x: auto; border: 1px solid var(--border-1); border-radius: 6px; }
+.cg-focus-td-name { padding: 8px 12px; font-size: var(--text-meta); font-weight: 500; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
+.cg-warning-box { margin-top: 6px; padding: 8px 12px; background: #1a1200; border: 1px solid #6b4c00; border-radius: 4px; font-size: var(--text-caption); color: #c9a227; }
+.cg-mismatch-box { margin-top: 8px; padding: 8px 12px; background: #1a1200; border: 1px solid #6b4c00; border-radius: 4px; font-size: var(--text-caption); color: #c9a227; }
+.cg-mismatch-list { margin-top: 4px; margin-left: 16px; list-style-type: disc; }
+.cg-pie-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+.cg-pie-legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 300px; }
+.cg-pie-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-overline); }
+.cg-pie-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
+.cg-pie-legend-label { color: var(--text-2); }
+.cg-pie-legend-pct { color: var(--text-3); }
+.cg-pie-empty { display: flex; align-items: center; justify-content: center; height: 160px; font-size: var(--text-caption); color: var(--text-3); }
+.cg-goals-empty-td { padding: 12px; font-size: var(--text-caption); color: var(--text-3); }
+.cg-staleness-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  font-weight: 500;
+  border-radius: 3px;
+  padding: 1px 5px;
+  margin-left: 4px;
+  vertical-align: middle;
+  cursor: default;
+}
+
+/* ── Framework page ──────────────────────────────────────────────────────────── */
+.fw-page { padding: 32px; max-width: 860px; }
+.fw-loading { padding: 32px; }
+.fw-loading-text { color: var(--text-3); }
+.fw-setup { padding: 32px; max-width: 720px; }
+.fw-setup-sub { margin-bottom: 32px; }
+.fw-setup-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 24px; margin-bottom: 24px; }
+.fw-setup-name-input { max-width: 360px; margin-bottom: 20px; }
+.fw-setup-templates-label { font-size: var(--text-label); color: var(--text-3); margin-bottom: 12px; }
+.fw-setup-templates { display: grid; gap: 8px; margin-bottom: 20px; }
+.fw-template-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px 16px;
+  border: 1px solid var(--border-2);
+  border-radius: 6px;
+  background: var(--surf-2);
+  cursor: pointer;
+  text-align: left;
+}
+.fw-template-btn:hover { border-color: #00f05860; }
+.fw-template-name { font-weight: 600; color: var(--text-1); font-size: var(--text-body); }
+.fw-template-count { font-size: var(--text-caption); color: var(--text-3); margin-top: 2px; }
+.fw-blank-btn {
+  background: none;
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-2);
+  font-size: var(--text-label);
+  padding: 6px 14px;
+  font-family: var(--font-sans);
+}
+.fw-blank-btn:not(:disabled) { cursor: pointer; }
+.fw-blank-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.fw-archived-label { font-size: var(--text-label); color: var(--text-3); margin-bottom: 8px; }
+.fw-restore-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: none;
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-2);
+  font-size: var(--text-label);
+  padding: 5px 10px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.fw-restore-btn svg { width: 11px; height: 11px; }
+/* Framework main header */
+.fw-header { margin-bottom: 28px; }
+.fw-header-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
+.fw-name-input {
+  font-size: var(--text-h1);
+  font-weight: 700;
+  background: none;
+  border: none;
+  outline: none;
+  color: var(--text-1);
+  font-family: var(--font-sans);
+  flex: 1;
+  min-width: 200px;
+}
+.fw-status-badge { padding: 2px 8px; border-radius: 4px; font-size: var(--text-caption); font-weight: 600; }
+.fw-archive-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: none;
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-3);
+  font-size: var(--text-label);
+  padding: 4px 10px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.fw-archive-btn svg { width: 11px; height: 11px; }
+.fw-header-sub { color: var(--text-3); font-size: var(--text-caption); }
+/* Area card */
+.fw-area-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 6px; margin-bottom: 8px; }
+.fw-area-header { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
+.fw-drag-btn { background: none; border: none; cursor: grab; color: var(--text-3); padding: 2px; flex-shrink: 0; }
+.fw-drag-btn svg { width: 14px; height: 14px; }
+.fw-toggle-btn { background: none; border: none; cursor: pointer; color: var(--text-3); padding: 2px; flex-shrink: 0; }
+.fw-toggle-btn svg { width: 14px; height: 14px; }
+.fw-area-name-input {
+  flex: 1;
+  background: none;
+  border: none;
+  outline: none;
+  font-size: var(--text-body);
+  font-weight: 500;
+  color: var(--text-1);
+  font-family: var(--font-sans);
+}
+.fw-delete-btn { background: none; border: none; cursor: pointer; color: var(--text-3); padding: 4px; flex-shrink: 0; }
+.fw-delete-btn:hover { color: #f87171; }
+.fw-delete-btn svg { width: 13px; height: 13px; }
+.fw-area-body { padding: 0 12px 16px 40px; border-top: 1px solid var(--border-1); }
+.fw-area-desc-wrap { padding-top: 12px; margin-bottom: 16px; }
+.fw-area-desc-label { margin-bottom: 4px; display: block; }
+.fw-area-levels { display: grid; gap: 12px; }
+.fw-area-level-field { display: grid; gap: 4px; }
+.fw-area-level-label { font-size: var(--text-label); color: var(--text-3); font-weight: 500; }
+/* Empty / save / add area */
+.fw-empty { text-align: center; padding: 48px 24px; border: 1px dashed var(--border-2); border-radius: 8px; margin-bottom: 16px; }
+.fw-empty-text { color: var(--text-3); margin-bottom: 12px; }
+.fw-saving { font-size: var(--text-caption); color: var(--text-3); margin-bottom: 8px; }
+.fw-add-area-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: var(--surf-2);
+  border: 1px solid var(--border-2);
+  border-radius: 4px;
+  color: var(--text-2);
+  font-size: var(--text-label);
+  padding: 6px 14px;
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.fw-add-area-btn:hover { border-color: #00f05860; }
+.fw-add-area-btn svg { width: 13px; height: 13px; }
+
+/* ── Meetings page ───────────────────────────────────────────────────────────── */
+.mtg-page { display: flex; flex-direction: column; height: 100%; }
+.mtg-split { display: flex; flex: 1; overflow: hidden; }
+.mtg-left {
+  background: var(--surf);
+  border-right: 1px solid var(--border-1);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+.mtg-left-header {
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--border-1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.mtg-left-header-title { font-size: var(--text-meta); font-weight: 500; color: var(--text-1); }
+.mtg-left-header-btns { display: flex; gap: 2px; }
+.mtg-expand-btn { background: none; border: none; color: var(--text-3); cursor: pointer; padding: 2px; }
+.mtg-expand-btn:hover { color: var(--text-2); }
+.mtg-expand-btn svg { width: 11px; height: 11px; }
+.mtg-tree { padding: 4px 0; }
+.mtg-tree-l1-btn {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 6px 12px;
+  font-size: var(--tree-l1-size);
+  font-weight: var(--tree-l1-weight);
+  color: var(--tree-l1-color);
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+}
+.mtg-tree-l1-btn:hover { background: var(--surf-2); }
+.mtg-tree-l1-btn svg { width: 9px; height: 9px; }
+.mtg-tree-l2-btn {
+  padding: 4px 12px 2px 24px;
+  font-size: var(--tree-l2-size);
+  color: var(--tree-l2-color);
+  font-weight: var(--tree-l2-weight);
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.mtg-tree-l2-btn:hover { background: var(--surf-2); }
+.mtg-tree-l2-btn svg { width: 8px; height: 8px; }
+.mtg-tree-l3-btn {
+  padding: 5px 12px 5px 32px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  width: 100%;
+  text-align: left;
+}
+.mtg-tree-l3-date { font-size: var(--tree-l3-size); font-weight: 500; }
+.mtg-tree-l3-title { font-size: var(--tree-l3-size); color: var(--tree-l3-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+/* Flat list items (non-person/team) */
+.mtg-tree-flat-btn {
+  padding: 5px 12px 5px 24px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  border-top: none;
+  border-right: none;
+  border-bottom: none;
+  width: 100%;
+  text-align: left;
+}
+.mtg-tree-flat-date { font-size: var(--text-meta); }
+.mtg-tree-flat-title { font-size: var(--text-meta); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+/* Resizable divider */
+.mtg-divider { width: 4px; background: var(--border-1); cursor: col-resize; flex-shrink: 0; transition: background 150ms; }
+.mtg-divider:hover { background: var(--border-2); }
+/* Right panel */
+.mtg-right { flex: 1; overflow-y: auto; padding: 22px 24px; }
+.mtg-right-empty { display: flex; align-items: center; justify-content: center; height: 100%; }
+.mtg-right-empty-text { color: var(--text-3); }
+/* Follow-up banner */
+.mtg-fu-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  margin-bottom: 16px;
+  border-radius: 6px;
+  border: 1px solid var(--border-2);
+  background: var(--surf-2);
+}
+.mtg-fu-banner-text { font-size: var(--text-label); color: var(--text-2); margin: 0; }
+.mtg-fu-banner-btns { display: flex; gap: 6px; flex-shrink: 0; }
+.mtg-fu-draft-btn { padding: 4px 12px; border-radius: 4px; font-size: var(--text-label); font-family: var(--font-sans); cursor: pointer; background: var(--surf-3); color: var(--text-1); border: 1px solid var(--border-3); font-weight: 600; }
+.mtg-fu-dismiss-btn { padding: 4px 10px; border-radius: 4px; font-size: var(--text-label); font-family: var(--font-sans); cursor: pointer; background: transparent; color: var(--text-3); border: 1px solid var(--border-2); }
+/* Meta row */
+.mtg-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
+.mtg-meta-btns { display: flex; gap: 6px; flex-shrink: 0; }
+.mtg-action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: var(--text-caption);
+  font-weight: 600;
+  color: var(--text-2);
+  border: 1px solid var(--border-2);
+  background: var(--surf-2);
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.mtg-action-btn:hover { color: var(--text-1); }
+.mtg-action-btn svg { width: 11px; height: 11px; }
+/* TL;DR box */
+.mtg-tldr-box { padding: 10px 14px; margin-bottom: 16px; border-radius: 6px; background: var(--surf-2); border: 1px solid var(--border-2); }
+.mtg-tldr-label { font-size: var(--text-caption); color: var(--text-3); font-weight: 600; display: block; margin-bottom: 4px; }
+.mtg-tldr-text { font-size: var(--text-label); color: var(--text-2); line-height: 1.5; margin: 0; }
+/* Meta fields grid */
+.mtg-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
+.mtg-field-input-wrap { background: var(--surf-2); border: 1px solid var(--border-1); border-radius: 5px; overflow: hidden; }
+.mtg-field-input { font-size: var(--text-meta); color: var(--text-1); background: transparent; border: none; padding: 6px 9px; width: 100%; }
+/* Action items section */
+.mtg-actions-section { margin-bottom: 16px; }
+.mtg-actions-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
+.mtg-actions-list { background: var(--surf-2); border: 1px solid var(--border-1); border-radius: 6px; overflow: hidden; }
+.mtg-action-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px; }
+.mtg-action-item:not(:last-child) { border-bottom: 1px solid var(--border-1); }
+.mtg-action-item-dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--border-3); flex-shrink: 0; }
+.mtg-action-item-text { font-size: var(--text-label); color: var(--text-2); }
+.mtg-actions-empty { padding: 7px 12px; }
+.mtg-actions-empty-text { font-size: var(--text-meta); color: var(--text-3); }
+/* Notes section */
+.mtg-notes-editor { background: var(--surf-2); border: 1px solid var(--border-1); border-radius: 6px; overflow: hidden; }
+.mtg-notes-toolbar { display: flex; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--border-1); }
+.mtg-notes-toolbar-btn {
+  background: transparent;
+  border: 1px solid var(--border-2);
+  color: var(--text-3);
+  border-radius: 3px;
+  padding: 2px 7px;
+  font-size: var(--text-caption);
+  cursor: pointer;
+  font-family: var(--font-sans);
+}
+.mtg-notes-toolbar-btn:hover { color: var(--text-1); }
+.mtg-notes-body { padding: 12px 14px; font-size: var(--text-label); color: var(--text-2); line-height: 1.75; }
+.mtg-notes-empty { color: var(--text-3); }
+.mtg-title-mb { margin-bottom: 4px; }
+
+/* ─── Radar page ─────────────────────────────────────────── */
+.rdr-loading { padding: 32px; color: var(--text-2); font-size: var(--text-meta); }
+.rdr-error { padding: 32px; }
+.rdr-error-text { color: #ff6b6b; font-size: var(--text-meta); }
+.rdr-subtitle { margin-bottom: 20px; }
+.rdr-stats { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
+.rdr-stat-critical { background: #2a0a0a; border: 1px solid #5a2020; border-radius: 6px; padding: 10px 16px; min-width: 100px; }
+.rdr-stat-attention { background: var(--surf); border: 1px solid var(--border-1); border-radius: 6px; padding: 10px 16px; min-width: 100px; }
+.rdr-stat-clear { background: #0d1f14; border: 1px solid #1a3a25; border-radius: 6px; padding: 10px 16px; min-width: 100px; }
+.rdr-stat-label { font-size: var(--text-overline); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
+.rdr-stat-val { font-size: var(--text-section); font-weight: 700; }
+.rdr-filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
+.rdr-filter-btn { border-radius: 4px; font-size: var(--text-meta); padding: 5px 12px; cursor: pointer; font-family: var(--font-sans); text-transform: capitalize; }
+.rdr-no-match { font-size: var(--text-meta); color: var(--text-3); }
+.rdr-empty { text-align: center; padding: 48px 0; }
+.rdr-empty-text { color: var(--text-2); margin-bottom: 12px; }
+.rdr-empty-link { color: #00f058; font-size: var(--text-meta); text-decoration: none; }
+.rdr-cards { display: flex; flex-direction: column; gap: 10px; }
+.rdr-allclear { margin-top: 20px; border-top: 1px solid var(--border-1); padding-top: 16px; }
+.rdr-allclear-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-3); font-size: var(--text-meta); cursor: pointer; font-family: var(--font-sans); padding: 0; margin-bottom: 10px; }
+.rdr-allclear-toggle svg { width: 13px; height: 13px; }
+.rdr-allclear-list { display: flex; flex-direction: column; gap: 4px; }
+.rdr-allclear-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--surf-2); border-radius: 5px; }
+.rdr-allclear-dot { width: 6px; height: 6px; border-radius: 50%; background: #00f058; flex-shrink: 0; }
+.rdr-allclear-name { font-size: var(--text-meta); color: var(--text-2); text-decoration: none; }
+.rdr-allclear-role { font-size: var(--text-caption); color: var(--text-3); }
+.rdr-topics { margin-top: 28px; border-top: 1px solid var(--border-1); padding-top: 20px; }
+.rdr-topics-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.rdr-topics-sub { font-size: var(--text-caption); color: var(--text-3); margin-top: 2px; }
+.rdr-topics-empty { font-size: var(--text-meta); color: var(--text-3); }
+.rdr-topics-list { display: grid; gap: 8px; }
+.rdr-topic-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; background: var(--surf); border-radius: 6px; }
+.rdr-topic-name { font-weight: 600; color: var(--text-1); font-size: var(--text-body); }
+.rdr-topic-escalating { font-size: var(--text-caption); color: #f87171; background: #2a0a0a; border: 1px solid #f8717140; border-radius: 3px; padding: 1px 6px; }
+.rdr-topic-meta { font-size: var(--text-caption); color: var(--text-3); }
+/* PersonCard */
+.rdr-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; overflow: hidden; }
+.rdr-card-header { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--surf-2); border-bottom: 1px solid var(--border-1); }
+.rdr-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--surf-3); display: flex; align-items: center; justify-content: center; font-size: var(--text-meta); font-weight: 600; color: var(--text-2); flex-shrink: 0; }
+.rdr-card-info { flex: 1; min-width: 0; }
+.rdr-card-name-row { display: flex; align-items: center; gap: 8px; }
+.rdr-card-name { font-size: var(--text-body); font-weight: 600; color: var(--text-1); text-decoration: none; display: flex; align-items: center; gap: 4px; }
+.rdr-card-name svg { width: 10px; height: 10px; color: var(--text-3); }
+.rdr-card-role { font-size: var(--text-meta); color: var(--text-2); margin-top: 2px; }
+.rdr-card-btns { display: flex; gap: 6px; flex-shrink: 0; }
+.rdr-card-btn { background: var(--surf-3); border: 1px solid var(--border-2); border-radius: 4px; color: var(--text-2); font-size: var(--text-caption); padding: 4px 8px; cursor: pointer; white-space: nowrap; font-family: var(--font-sans); }
+.rdr-card-btn-plus { display: flex; align-items: center; gap: 3px; }
+.rdr-card-btn-plus svg { width: 10px; height: 10px; }
+.rdr-signal-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border-1); font-size: var(--text-meta); }
+.rdr-signal-msg { flex: 1; color: var(--text-2); }
+.rdr-new-hire-badge { font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(0,240,88,0.12); color: #00f058; border: 1px solid rgba(0,240,88,0.3); white-space: nowrap; flex-shrink: 0; }
+.rdr-signal-action-btn { background: none; border: 1px solid var(--border-2); border-radius: 4px; color: var(--text-3); font-size: var(--text-caption); padding: 2px 8px; cursor: pointer; white-space: nowrap; }
+.rdr-signal-complete-btn { background: none; border: 1px solid var(--border-2); border-radius: 4px; color: #00f058; font-size: var(--text-caption); padding: 2px 8px; cursor: pointer; white-space: nowrap; }
+.rdr-followups-toggle { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 16px; background: none; border: none; border-top: 1px solid var(--border-1); color: var(--text-3); font-size: var(--text-caption); cursor: pointer; font-family: var(--font-sans); text-align: left; }
+.rdr-followups-toggle svg { width: 11px; height: 11px; }
+.rdr-followups-body { padding: 4px 16px 12px; }
+.rdr-followups-loading { font-size: var(--text-meta); color: var(--text-3); }
+
+/* ─── Weekly Review page ─────────────────────────────────── */
+.wr-topbar { background: var(--surf); border-bottom: 1px solid var(--border-1); height: 40px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 10; flex-shrink: 0; }
+.wr-topbar-title { font-size: var(--text-label); font-weight: 500; color: var(--text-1); font-family: var(--font-sans); }
+.wr-loading { padding: 32px; color: var(--text-2); font-size: 12px; }
+.wr-content { padding: 16px; }
+.wr-title-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+.wr-title { font-size: 22px; font-weight: 500; margin: 0; color: var(--text-1); }
+.wr-nav-btns { display: flex; gap: 4px; }
+.wr-nav-btn { width: 26px; height: 26px; background: transparent; border: 1px solid var(--border-2); color: var(--text-2); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+.wr-nav-btn:hover { border-color: var(--border-3); color: var(--text-1); }
+.wr-nav-btn svg { width: 13px; height: 13px; }
+.wr-nav-btn-week { height: 26px; padding: 0 8px; background: transparent; border: 1px solid var(--border-2); color: var(--text-2); border-radius: 4px; cursor: pointer; font-size: 11px; font-family: var(--font-sans); }
+.wr-nav-btn-week:hover { border-color: var(--border-3); color: var(--text-1); }
+.wr-meta-row { font-size: 12px; color: var(--text-3); margin-bottom: 20px; display: flex; align-items: center; }
+.wr-status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; padding: 2px 8px; border-radius: 10px; margin-left: 10px; font-family: var(--font-mono); }
+.wr-status-completed { background: #0a1e0a; color: #00f058; }
+.wr-status-progress { background: #0a1e28; color: #60a5fa; }
+.wr-completed-at { margin-left: 12px; font-size: 11px; color: var(--text-3); }
+.wr-progress-bar { height: 3px; background: var(--border-1); border-radius: 2px; margin-bottom: 24px; overflow: hidden; }
+.wr-progress-fill { height: 100%; background: linear-gradient(90deg, #00ffe5, #00f058); border-radius: 2px; transition: width 0.4s ease; }
+.wr-no-review { font-size: 12px; color: var(--text-3); }
+.wr-snapshot { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 16px; margin-bottom: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+.wr-snapshot-stat-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
+.wr-snapshot-stat-val { font-size: 14px; font-weight: 600; color: var(--text-1); }
+.wr-sections { display: flex; flex-direction: column; gap: 12px; }
+/* Section children */
+.wr-person-subheader { display: flex; align-items: center; gap: 8px; padding: 7px 16px; background: var(--surf-2); border-bottom: 1px solid var(--border-1); }
+.wr-person-subheader svg { width: 11px; height: 11px; color: var(--text-3); flex-shrink: 0; }
+.wr-person-link { font-size: 12px; font-weight: 600; color: var(--text-1); text-decoration: none; display: flex; align-items: center; gap: 4px; }
+.wr-person-link svg { width: 9px; height: 9px; color: var(--text-3); }
+.wr-signal-actions { display: flex; gap: 4px; }
+.wr-task-label { padding: 8px 16px; border-bottom: 1px solid var(--border-1); }
+.wr-task-label-text { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
+.wr-task-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-1); }
+.wr-task-row:hover { background: var(--surf-2); }
+.wr-task-title-row { font-size: 12px; color: var(--text-1); display: flex; align-items: center; gap: 6px; }
+.wr-task-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }
+.wr-task-actions { display: flex; gap: 4px; flex-shrink: 0; }
+.wr-goal-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; }
+.wr-goal-row:hover { background: var(--surf-2); }
+.wr-goal-title { font-size: 12px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.wr-goal-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }
+.wr-goal-actions { display: flex; gap: 4px; flex-shrink: 0; }
+.wr-week-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-1); }
+.wr-week-cell { background: var(--surf); padding: 14px 16px; text-align: center; }
+.wr-week-cell-num { font-size: 22px; font-weight: 500; font-family: var(--font-mono); color: var(--text-1); }
+.wr-week-cell-label { font-size: 10px; color: var(--text-3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.04em; }
+.wr-week-loading { padding: 16px; font-size: 12px; color: var(--text-3); }
+.wr-reflection-body { padding: 16px; }
+.wr-reflection-ai-row { margin-bottom: 12px; }
+.wr-reflection-ai-header { display: flex; align-items: center; gap: 8px; }
+.wr-reflection-clear-btn { font-size: 11px; color: var(--text-3); background: none; border: none; cursor: pointer; padding: 0; }
+.wr-reflection-prompts { display: grid; gap: 6px; margin-bottom: 12px; }
+.wr-reflection-prompt { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; background: var(--surf-2); border: 1px solid var(--border-1); border-radius: 5px; }
+.wr-reflection-prompt-icon { font-size: 11px; color: #00f058; flex-shrink: 0; margin-top: 1px; }
+.wr-reflection-prompt-text { font-size: 12px; color: var(--text-2); line-height: 1.5; font-style: italic; }
+.wr-reflection-placeholder { font-size: 12px; color: var(--text-3); font-style: italic; margin-bottom: 10px; line-height: 1.6; }
+.wr-reflection-textarea { width: 100%; min-height: 100px; background: var(--surf-2); border: 1px solid var(--border-2); border-radius: 6px; padding: 10px 12px; color: var(--text-1); font-family: var(--font-sans); font-size: 12px; resize: vertical; outline: none; line-height: 1.6; box-sizing: border-box; }
+.wr-reflection-textarea:focus { border-color: var(--border-3); }
+.wr-reflection-autosave { font-size: 11px; color: var(--text-3); margin: 6px 0 0; }
+.wr-complete-body { padding: 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
+.wr-complete-stats { font-size: 11px; color: var(--text-3); }
+.wr-complete-warn { font-size: 11px; color: #f97316; margin-top: 4px; }
+.wr-completed-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.wr-completed-label { font-size: 13px; color: #00f058; font-weight: 600; display: flex; align-items: center; gap: 5px; }
+.wr-completed-label svg { width: 14px; height: 14px; }
+.wr-summary-link { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--border-2); border-radius: 5px; color: var(--text-2); font-size: 11px; padding: 5px 10px; text-decoration: none; font-family: var(--font-sans); }
+.wr-summary-link svg { width: 11px; height: 11px; }
+.wr-reopen-btn { background: transparent; border: 1px solid var(--border-2); border-radius: 5px; color: var(--text-3); font-size: 11px; padding: 5px 10px; cursor: pointer; }
+.wr-complete-btn { background: linear-gradient(90deg, #00ffe5, #00f058); border: none; border-radius: 5px; color: #0a1a0a; font-size: 12px; font-weight: 600; padding: 5px 13px; cursor: pointer; font-family: var(--font-sans); }
+.wr-complete-btn:disabled { opacity: 0.7; cursor: not-allowed; }
+/* SignalRow + Btn sub-components */
+.wr-severity-dot { border-radius: 50%; flex-shrink: 0; display: inline-block; margin-top: 5px; }
+.wr-signal-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border-1); }
+.wr-signal-row:hover { background: var(--surf-2); }
+.wr-signal-content { flex: 1; min-width: 0; }
+.wr-signal-msg-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
+.wr-signal-msg { font-size: 12px; color: var(--text-1); }
+.wr-signal-new-hire { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 3px; background: rgba(0,240,88,0.12); color: #00f058; border: 1px solid rgba(0,240,88,0.3); white-space: nowrap; }
+.wr-signal-subtitle { font-size: 11px; color: var(--text-3); margin-top: 1px; }
+.wr-signal-btns { display: flex; gap: 4px; flex-shrink: 0; align-items: flex-start; }
+.wr-priority-badge { font-size: 9px; padding: 1px 5px; border-radius: 3px; font-family: var(--font-mono); flex-shrink: 0; }
+
+/* ─── Summary page ───────────────────────────────────────── */
+.sum-topbar-left { display: flex; align-items: center; gap: 8px; }
+.sum-saving { font-size: var(--text-caption); color: var(--text-3); }
+.sum-nav { display: flex; align-items: center; gap: 4px; }
+.sum-nav-btn { background: none; border: none; cursor: pointer; color: var(--text-3); padding: 4px; display: flex; align-items: center; }
+.sum-nav-btn svg { width: 13px; height: 13px; }
+.sum-nav-range { font-size: var(--text-caption); color: var(--text-2); font-family: var(--font-sans); min-width: 140px; text-align: center; }
+.sum-nav-today { background: none; border: 1px solid var(--border-2); border-radius: 3px; cursor: pointer; color: var(--text-3); padding: 2px 6px; font-size: var(--text-caption); font-family: var(--font-sans); }
+.sum-layout { display: flex; height: calc(100vh - 40px); overflow: hidden; }
+.sum-left { flex: 0 0 60%; display: flex; flex-direction: column; border-right: 1px solid var(--border-1); overflow: hidden; }
+.sum-toolbar { padding: 8px 16px; border-bottom: 1px solid var(--border-1); display: flex; align-items: center; gap: 8px; flex-shrink: 0; background: var(--surf); }
+.sum-toolbar-spacer { flex: 1; }
+.sum-generated-at { font-size: var(--text-caption); color: var(--text-3); }
+.sum-edited-mark { color: #ffd43b; margin-left: 6px; }
+.sum-regen-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--border-2); border-radius: 4px; color: var(--text-3); cursor: pointer; padding: 3px 8px; font-size: var(--text-caption); font-family: var(--font-sans); }
+.sum-regen-btn:disabled { opacity: 0.5; }
+.sum-regen-btn svg { width: 10px; height: 10px; }
+.sum-rewrite-wrap { position: relative; }
+.sum-rewrite-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 50; background: var(--surf); border: 1px solid var(--border-2); border-radius: 6px; min-width: 160px; overflow: hidden; }
+.sum-rewrite-item { display: block; width: 100%; padding: 8px 14px; text-align: left; background: none; border: none; cursor: pointer; font-size: var(--text-label); color: var(--text-2); font-family: var(--font-sans); }
+.sum-rewrite-item:hover { background: var(--surf-2); }
+.sum-rewrite-custom { display: block; width: 100%; padding: 8px 14px; text-align: left; background: none; border-top: 1px solid var(--border-1); border-right: none; border-bottom: none; border-left: none; cursor: pointer; font-size: var(--text-label); color: var(--text-3); font-family: var(--font-sans); }
+.sum-rewrite-custom:hover { background: var(--surf-2); }
+.sum-editor-loading { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: var(--text-meta); }
+.sum-editor-error { flex: 1; padding: 24px; color: #ff6b6b; font-size: var(--text-meta); display: flex; align-items: flex-start; gap: 8px; }
+.sum-editor-error svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
+.sum-editor-empty { flex: 1; padding: 32px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
+.sum-editor-empty-text { font-size: var(--text-meta); color: var(--text-3); text-align: center; max-width: 320px; }
+.sum-editor-sample { background: var(--surf-2); border: 1px solid var(--border-1); border-radius: 6px; padding: 16px; font-size: var(--text-caption); color: var(--text-3); font-family: var(--font-mono); max-width: 400px; white-space: pre-wrap; line-height: 1.6; }
+.sum-textarea { flex: 1; padding: 20px 24px; background: var(--surf); color: var(--text-1); border: none; outline: none; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; resize: none; overflow-y: auto; }
+.sum-right { flex: 0 0 40%; overflow-y: auto; background: var(--surf-2); }
+.sum-right-header { padding: 10px 12px 6px; border-bottom: 1px solid var(--border-1); }
+.sum-right-header-label { font-size: var(--text-caption); color: var(--text-3); font-family: var(--font-sans); }
+/* PreviewSection / PreviewItem */
+.sum-preview-section { border-bottom: 1px solid var(--border-1); }
+.sum-preview-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: none; border: none; cursor: pointer; font-family: var(--font-sans); }
+.sum-preview-toggle-title { font-size: var(--text-meta); color: var(--text-1); font-weight: 500; }
+.sum-preview-toggle-right { display: flex; align-items: center; gap: 6px; }
+.sum-preview-toggle-count { font-size: var(--text-caption); color: var(--text-3); font-family: var(--font-mono); }
+.sum-preview-toggle-icon svg { width: 11px; height: 11px; color: var(--text-3); }
+.sum-preview-body { padding: 0 12px 10px; }
+.sum-preview-item { font-size: var(--text-meta); color: var(--text-2); padding: 3px 0; border-bottom: 1px solid var(--border-1); }
+.sum-preview-item-link { text-decoration: none; color: var(--text-2); }
+.sum-preview-notes { font-size: var(--text-meta); color: var(--text-2); padding: 4px 0; line-height: 1.5; white-space: pre-wrap; }
+/* ExportBtn */
+.sum-export-btn { display: inline-flex; align-items: center; gap: 5px; border-radius: 4px; cursor: pointer; font-family: var(--font-sans); }
+.sum-export-btn svg { width: 11px; height: 11px; }
+.sum-export-btn--primary { padding: 5px 12px; background: linear-gradient(90deg, #00ffe5 0%, #00f058 100%); border: none; color: #0a1a0a; font-size: var(--text-caption); font-weight: 600; }
+.sum-export-btn--secondary { padding: 5px 10px; background: none; border: 1px solid var(--border-2); color: var(--text-2); font-size: var(--text-caption); font-weight: 400; }
+
+/* ─── Team Health page ───────────────────────────────────── */
+.th-subtitle { margin-bottom: 20px; }
+.th-subtitle-text { color: var(--text-3); font-size: var(--text-label); }
+.th-filter-wrap { margin-bottom: 20px; }
+.th-filter-row { display: flex; gap: 6px; flex-wrap: wrap; }
+.th-filter-btn { border-radius: 4px; font-size: var(--text-meta); padding: 4px 10px; cursor: pointer; font-family: var(--font-sans); }
+.th-error { background: #2a0a0a; border: 1px solid #5a2020; border-radius: 6px; padding: 12px 16px; margin-bottom: 16px; color: #f87171; font-size: var(--text-label); }
+.th-loading { padding: 32px; color: var(--text-3); font-size: var(--text-meta); }
+.th-stats-strip { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
+.th-stat-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 6px; padding: 10px 16px; min-width: 120px; }
+.th-stat-card--wide { flex: 1; min-width: 200px; }
+.th-stat-label { font-size: var(--text-overline); color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
+.th-stat-val { font-size: var(--text-section); font-weight: 700; }
+.th-stat-top-name { font-size: var(--text-body); font-weight: 600; color: #f87171; }
+.th-stat-top-pct { font-weight: 400; color: var(--text-3); font-size: var(--text-meta); }
+.th-empty { text-align: center; padding: 48px 24px; color: var(--text-3); }
+.th-empty svg { width: 32px; height: 32px; margin: 0 auto 12px; opacity: 0.4; }
+.th-chart-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 20px; margin-bottom: 20px; }
+.th-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
+.th-chart-sub { font-size: var(--text-caption); color: var(--text-3); margin-top: 2px; }
+.th-legend { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
+.th-legend-item { display: flex; align-items: center; gap: 5px; }
+.th-legend-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex-shrink: 0; }
+.th-legend-label { font-size: var(--text-caption); color: var(--text-3); }
+.th-ai-card { background: var(--surf); border: 1px solid var(--border-1); border-radius: 8px; padding: 20px; }
+.th-ai-header { display: flex; align-items: center; justify-content: space-between; }
+.th-ai-header-actions { display: flex; align-items: center; gap: 10px; }
+.th-ai-sub { font-size: var(--text-caption); color: var(--text-3); margin-top: 2px; }
+.th-ai-empty { font-size: var(--text-label); color: var(--text-3); margin-top: 8px; }
+.th-ai-hint { font-size: var(--text-caption); color: var(--text-3); margin-top: 8px; }
+.th-ai-narrative ul { margin: 0; padding: 0 0 0 18px; }
+.th-ai-narrative li { font-size: var(--text-label); color: var(--text-2); margin-bottom: 6px; line-height: 1.5; }
+/* GapBar */
+.th-gapbar { margin-bottom: 10px; }
+.th-gapbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
+.th-gapbar-name { font-size: var(--text-label); color: var(--text-2); width: 200px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.th-gapbar-track { flex: 1; height: 14px; border-radius: 3px; overflow: hidden; background: var(--surf-3); display: flex; }
+.th-gapbar-segment { transition: width 0.3s; }
+.th-gapbar-labels { display: flex; gap: 8px; width: 200px; flex-shrink: 0; justify-content: flex-end; }
+.th-gapbar-pct { font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
+.th-gapbar-ok { font-size: var(--text-caption); color: var(--text-3); font-variant-numeric: tabular-nums; }
+
+/* ─── Legal pages (privacy / terms) ─────────────────────── */
+.legal-page { max-width: 720px; margin: 0 auto; padding: 80px 24px; font-family: system-ui, sans-serif; color: #f4f4f5; background: #0a0a0b; min-height: 100vh; }
+.legal-back { font-size: 13px; color: #a1a1aa; text-decoration: none; margin-bottom: 48px; display: inline-block; }
+.legal-title { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 8px; }
+.legal-date { color: #52525b; font-size: 14px; margin-bottom: 48px; }
+.legal-body { line-height: 1.75; font-size: 15px; color: #a1a1aa; }
+.legal-h2 { color: #f4f4f5; font-size: 20px; font-weight: 600; margin-top: 40px; margin-bottom: 12px; }
+.legal-footer { margin-top: 64px; padding-top: 32px; border-top: 1px solid #1e1e22; display: flex; gap: 24px; }
+.legal-footer-link { font-size: 13px; color: #52525b; text-decoration: none; }
+.legal-strong { color: #f4f4f5; }
diff --git a/app/page.tsx b/app/page.tsx
index 3d83a28..04cbd89 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -106,7 +106,7 @@ export default function LandingPage() {
           display:inline-flex;align-items:center;gap:6px;
           padding:5px 14px 5px 6px;border-radius:20px;
           background:rgba(0,240,88,0.06);border:1px solid rgba(0,240,88,0.12);
-          font-size:12px;font-weight:600;color:var(--green);
+          font-size:13px;font-weight:600;color:var(--green);
           margin-bottom:28px;
           animation:fadeInDown .8s ease;
         }
@@ -168,12 +168,12 @@ export default function LandingPage() {
         }
 
         .trust{padding:100px 0 60px;text-align:center}
-        .trust-label{font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:var(--t3);font-weight:600;margin-bottom:12px}
+        .trust-label{font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:var(--t3);font-weight:600;margin-bottom:12px}
         .trust-text{font-size:14px;color:var(--t3);max-width:500px;margin:0 auto}
 
         .section{padding:120px 0}
         .section-label{
-          font-size:12px;text-transform:uppercase;letter-spacing:0.1em;
+          font-size:13px;text-transform:uppercase;letter-spacing:0.1em;
           font-weight:600;margin-bottom:16px;
         }
         .section-label .grad{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@@ -212,7 +212,7 @@ export default function LandingPage() {
         .feature-content p{font-size:15px;color:var(--t2);line-height:1.7;margin-bottom:20px}
         .feature-tag{
           display:inline-flex;align-items:center;gap:6px;
-          font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;
+          font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;
           margin-bottom:16px;
         }
         .feature-tag .dot{width:5px;height:5px;border-radius:50%}
diff --git a/app/privacy/page.tsx b/app/privacy/page.tsx
index 540c462..684761b 100644
--- a/app/privacy/page.tsx
+++ b/app/privacy/page.tsx
@@ -7,43 +7,43 @@ export const metadata: Metadata = {
 
 export default function PrivacyPage() {
   return (
-    <div style={{ maxWidth: 720, margin: "0 auto", padding: "80px 24px", fontFamily: "system-ui, sans-serif", color: "#f4f4f5", background: "#0a0a0b", minHeight: "100vh" }}>
-      <Link href="/" style={{ fontSize: 13, color: "#a1a1aa", textDecoration: "none", marginBottom: 48, display: "inline-block" }}>← Back</Link>
+    <div className="legal-page">
+      <Link href="/" className="legal-back">← Back</Link>
 
-      <h1 style={{ fontSize: 36, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 8 }}>Privacy Policy</h1>
-      <p style={{ color: "#52525b", fontSize: 14, marginBottom: 48 }}>Last updated: May 2026</p>
+      <h1 className="legal-title">Privacy Policy</h1>
+      <p className="legal-date">Last updated: May 2026</p>
 
-      <div style={{ lineHeight: 1.75, fontSize: 15, color: "#a1a1aa" }}>
+      <div className="legal-body">
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>1. What we collect</h2>
+        <h2 className="legal-h2">1. What we collect</h2>
         <p>When you sign in with Google, we receive your email address and display name from Google. We store the data you enter into Caliber: people, teams, tasks, meetings, notes, career goals, and evidence entries. We do not collect analytics, tracking pixels, or behavioural data.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>2. How we use it</h2>
+        <h2 className="legal-h2">2. How we use it</h2>
         <p>Your data is used solely to provide the Caliber service to you. We do not sell, share, rent, or otherwise disclose your data to third parties.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>3. Data storage</h2>
+        <h2 className="legal-h2">3. Data storage</h2>
         <p>Data is stored in Supabase (PostgreSQL), hosted on AWS infrastructure. Authentication is handled by Supabase Auth with Google OAuth. Data is stored in the region configured for the Supabase project. Supabase&apos;s privacy policy applies to their role as a data processor.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>4. Data isolation</h2>
+        <h2 className="legal-h2">4. Data isolation</h2>
         <p>All data is isolated per user via Row Level Security (RLS) policies in the database. No user can access another user&apos;s data.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>5. Deleting your data</h2>
+        <h2 className="legal-h2">5. Deleting your data</h2>
         <p>You can delete individual records from within the app at any time. To delete your account and all associated data, contact us via the GitHub repository or submit an issue. We will process deletion requests promptly.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>6. Cookies and sessions</h2>
+        <h2 className="legal-h2">6. Cookies and sessions</h2>
         <p>We use cookies strictly for session management — to keep you signed in. No advertising or tracking cookies are used.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>7. Open source</h2>
+        <h2 className="legal-h2">7. Open source</h2>
         <p>Caliber is open source. If you self-host the project, you control all data storage and processing. This policy applies only to the hosted instance.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>8. Changes</h2>
+        <h2 className="legal-h2">8. Changes</h2>
         <p>This policy may be updated as the project evolves. Material changes will be noted in the GitHub repository changelog.</p>
 
       </div>
 
-      <div style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid #1e1e22", display: "flex", gap: 24 }}>
-        <Link href="/terms" style={{ fontSize: 13, color: "#52525b", textDecoration: "none" }}>Terms of Service</Link>
-        <Link href="/" style={{ fontSize: 13, color: "#52525b", textDecoration: "none" }}>Home</Link>
+      <div className="legal-footer">
+        <Link href="/terms" className="legal-footer-link">Terms of Service</Link>
+        <Link href="/" className="legal-footer-link">Home</Link>
       </div>
     </div>
   )
diff --git a/app/terms/page.tsx b/app/terms/page.tsx
index d904bf5..08df5ac 100644
--- a/app/terms/page.tsx
+++ b/app/terms/page.tsx
@@ -7,40 +7,40 @@ export const metadata: Metadata = {
 
 export default function TermsPage() {
   return (
-    <div style={{ maxWidth: 720, margin: "0 auto", padding: "80px 24px", fontFamily: "system-ui, sans-serif", color: "#f4f4f5", background: "#0a0a0b", minHeight: "100vh" }}>
-      <Link href="/" style={{ fontSize: 13, color: "#a1a1aa", textDecoration: "none", marginBottom: 48, display: "inline-block" }}>← Back</Link>
+    <div className="legal-page">
+      <Link href="/" className="legal-back">← Back</Link>
 
-      <h1 style={{ fontSize: 36, fontWeight: 700, letterSpacing: "-0.03em", marginBottom: 8 }}>Terms of Service</h1>
-      <p style={{ color: "#52525b", fontSize: 14, marginBottom: 48 }}>Last updated: May 2026</p>
+      <h1 className="legal-title">Terms of Service</h1>
+      <p className="legal-date">Last updated: May 2026</p>
 
-      <div style={{ lineHeight: 1.75, fontSize: 15, color: "#a1a1aa" }}>
+      <div className="legal-body">
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>1. What Caliber is</h2>
+        <h2 className="legal-h2">1. What Caliber is</h2>
         <p>Caliber is an open-source tool for engineering managers. The source code is publicly available. Anyone can self-host it. These terms apply to the hosted version at this domain.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>2. Your account</h2>
+        <h2 className="legal-h2">2. Your account</h2>
         <p>You sign in with Google. You are responsible for keeping your account secure. We reserve the right to suspend accounts that abuse the service or violate these terms.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>3. Your data</h2>
+        <h2 className="legal-h2">3. Your data</h2>
         <p>You own your data. Caliber stores the data you enter — people, tasks, meetings, notes — so you can use the product. We do not sell it, share it, or use it for any purpose other than running the service for you.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>4. No warranty</h2>
+        <h2 className="legal-h2">4. No warranty</h2>
         <p>Caliber is provided &ldquo;as is&rdquo;, without warranty of any kind. As an open-source project, there are no SLAs, uptime guarantees, or support commitments on the hosted version. Use it at your own risk.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>5. Limitation of liability</h2>
+        <h2 className="legal-h2">5. Limitation of liability</h2>
         <p>To the maximum extent permitted by law, the contributors to Caliber are not liable for any damages arising from your use of the service, including loss of data.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>6. Changes</h2>
+        <h2 className="legal-h2">6. Changes</h2>
         <p>These terms may change as the project evolves. Continued use of the service after changes constitutes acceptance.</p>
 
-        <h2 style={{ color: "#f4f4f5", fontSize: 20, fontWeight: 600, marginTop: 40, marginBottom: 12 }}>7. Open source</h2>
-        <p>The source code is available on GitHub under the <strong style={{ color: "#f4f4f5" }}>GNU Affero General Public License v3.0 (AGPL-3.0)</strong>. You are free to self-host, fork, and modify Caliber. However, if you deploy a modified version — including as a hosted service — you must release your modifications under the same AGPL-3.0 license and make the source code available to your users. Self-hosted instances are governed by the AGPL-3.0, not these terms.</p>
+        <h2 className="legal-h2">7. Open source</h2>
+        <p>The source code is available on GitHub under the <strong className="legal-strong">GNU Affero General Public License v3.0 (AGPL-3.0)</strong>. You are free to self-host, fork, and modify Caliber. However, if you deploy a modified version — including as a hosted service — you must release your modifications under the same AGPL-3.0 license and make the source code available to your users. Self-hosted instances are governed by the AGPL-3.0, not these terms.</p>
 
       </div>
 
-      <div style={{ marginTop: 64, paddingTop: 32, borderTop: "1px solid #1e1e22", display: "flex", gap: 24 }}>
-        <Link href="/privacy" style={{ fontSize: 13, color: "#52525b", textDecoration: "none" }}>Privacy Policy</Link>
-        <Link href="/" style={{ fontSize: 13, color: "#52525b", textDecoration: "none" }}>Home</Link>
+      <div className="legal-footer">
+        <Link href="/privacy" className="legal-footer-link">Privacy Policy</Link>
+        <Link href="/" className="legal-footer-link">Home</Link>
       </div>
     </div>
   )
diff --git a/components/competency/competency-section.tsx b/components/competency/competency-section.tsx
index 5dcdc36..08d4285 100644
--- a/components/competency/competency-section.tsx
+++ b/components/competency/competency-section.tsx
@@ -44,16 +44,16 @@ interface RadarData {
 
 function CompetencyRadar({ data }: { data: RadarData[] }) {
   if (data.length === 0) return (
-    <div style={{ height: "240px", display: "flex", alignItems: "center", justifyContent: "center" }}>
-      <p style={{ color: "var(--text-3)" }}>No assessments yet</p>
+    <div className="radar-empty">
+      <p className="radar-empty-text">No assessments yet</p>
     </div>
   )
   return (
-    <div style={{ height: "300px" }}>
+    <div className="radar-wrap">
       <ResponsiveContainer width="100%" height="100%">
         <RadarChart data={data}>
           <PolarGrid stroke="var(--border-2)" />
-          <PolarAngleAxis dataKey="area" tick={{ fill: "var(--text-3)", fontSize: 11 }} />
+          <PolarAngleAxis dataKey="area" tick={{ fill: "var(--text-3)", fontSize: 13 }} />
           <PolarRadiusAxis domain={[0, 5]} tick={false} axisLine={false} />
           <Radar
             name="Expected"
@@ -71,17 +71,17 @@ function CompetencyRadar({ data }: { data: RadarData[] }) {
             strokeWidth={2}
           />
           <Tooltip
-            contentStyle={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", fontSize: "11px" }}
+            contentStyle={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", fontSize: "13px" }}
             formatter={(value: number | undefined, name: string | undefined) => [value !== undefined ? LEVELS[value - 1] ?? value : value, name ?? ""]}
           />
         </RadarChart>
       </ResponsiveContainer>
-      <div style={{ display: "flex", gap: "16px", justifyContent: "center", marginTop: "4px" }}>
-        <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", display: "flex", alignItems: "center", gap: "5px" }}>
-          <span style={{ display: "inline-block", width: "12px", height: "2px", background: "#00ffe5", borderRadius: "2px" }} /> Assessed
+      <div className="radar-legend">
+        <span className="radar-legend-item">
+          <span className="radar-legend-line" style={{ background: "#00ffe5" }} /> Assessed
         </span>
-        <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", display: "flex", alignItems: "center", gap: "5px" }}>
-          <span style={{ display: "inline-block", width: "12px", height: "2px", background: "#00f058", borderRadius: "2px", opacity: 0.5 }} /> Expected
+        <span className="radar-legend-item">
+          <span className="radar-legend-line" style={{ background: "#00f058", opacity: 0.5 }} /> Expected
         </span>
       </div>
     </div>
@@ -98,20 +98,19 @@ function PromotionBanner({ readiness }: { readiness: PromotionReadiness }) {
     early:   { bg: "#1a1a22", color: "#6b7280", border: "#6b728040" },
   }[readiness.signal]
   return (
-    <div style={{
-      padding: "12px 16px", borderRadius: "6px", marginBottom: "20px",
-      background: colors.bg, border: `1px solid ${colors.border}`,
-      display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: "8px",
-    }}>
+    <div
+      className="promo-banner"
+      style={{ background: colors.bg, border: `1px solid ${colors.border}` }}
+    >
       <div>
-        <span style={{ fontWeight: 600, color: colors.color, fontSize: "var(--text-body)" }}>
+        <span className="promo-banner-label" style={{ color: colors.color }}>
           {readiness.label}
         </span>
-        <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginLeft: "10px" }}>
+        <span className="promo-banner-sub">
           {readiness.atNextLevel} of {readiness.total} areas at {readiness.nextLevel} level
         </span>
       </div>
-      <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
+      <span className="promo-banner-note">
         Based on your framework and assessments
       </span>
     </div>
@@ -221,29 +220,19 @@ function CompetencyCard({
   const linkedEvidence = allEvidence.filter(e => assessment?.evidenceIds?.includes(e.id))
 
   return (
-    <div style={{
-      background: "var(--surf)",
-      border: "1px solid var(--border-1)",
-      borderRadius: "6px",
-      marginBottom: "12px",
-    }}>
+    <div className="comp-card">
       {/* Card header */}
-      <div style={{ padding: "12px 16px", display: "flex", alignItems: "center", gap: "10px", flexWrap: "wrap" }}>
-        <button
-          onClick={() => setExpanded(e => !e)}
-          style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-3)", padding: "2px", flexShrink: 0 }}
-        >
+      <div className="comp-card-header">
+        <button className="comp-card-toggle-btn" onClick={() => setExpanded(e => !e)}>
           {expanded
-            ? <ChevronDown style={{ width: "13px", height: "13px" }} />
-            : <ChevronRight style={{ width: "13px", height: "13px" }} />}
+            ? <ChevronDown />
+            : <ChevronRight />}
         </button>
 
-        <span style={{ fontWeight: 600, color: "var(--text-1)", flex: 1, fontSize: "var(--text-body)" }}>
-          {area.name}
-        </span>
+        <span className="comp-card-name">{area.name}</span>
 
         {/* Level buttons */}
-        <div style={{ display: "flex", gap: "4px", flexWrap: "wrap" }}>
+        <div className="comp-level-btns">
           {LEVELS.map(level => {
             const isActive = assessment?.assessedLevel === level
             const { bg, color } = LEVEL_COLORS[level] ?? { bg: "#222", color: "#888" }
@@ -277,39 +266,38 @@ function CompetencyCard({
 
         {/* Saved flash */}
         {savedFlash && (
-          <span style={{ fontSize: "var(--text-caption)", color: "#4ade80", display: "flex", alignItems: "center", gap: "4px" }}>
-            <Check style={{ width: "11px", height: "11px" }} /> Saved
+          <span className="comp-saved-flash">
+            <Check /> Saved
           </span>
         )}
       </div>
 
       {/* Expected level for this person */}
       {personLevel && (
-        <div style={{ paddingLeft: "40px", paddingBottom: "8px", paddingRight: "16px" }}>
+        <div className="comp-expected-level">
           {expectedLevel ? (
-            <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
+            <span>
               Expected at {personLevel}: <span style={{ color: LEVEL_COLORS[expectedLevel]?.color ?? "var(--text-2)" }}>{expectedLevel}</span>
             </span>
           ) : (
-            <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-              No expectation defined for {personLevel}
-            </span>
+            <span>No expectation defined for {personLevel}</span>
           )}
         </div>
       )}
 
       {/* Expanded body */}
       {expanded && (
-        <div style={{ padding: "12px 16px 16px 40px", borderTop: "1px solid var(--border-1)" }}>
+        <div className="comp-card-body">
           {/* Notes */}
-          <div style={{ marginBottom: "16px" }}>
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "4px" }}>
+          <div className="comp-notes-wrap">
+            <div className="comp-notes-header">
               <Label>Assessment notes</Label>
               {aiConfigured && assessment && (
                 <button
                   onClick={handleGenerateReasoning}
                   disabled={generatingReasoning}
-                  style={{ fontSize: "var(--text-caption)", color: generatingReasoning ? "var(--text-3)" : "#00f058", background: "none", border: "none", cursor: generatingReasoning ? "not-allowed" : "pointer", padding: 0, fontFamily: "var(--font-sans)" }}
+                  className="comp-gen-reasoning-btn"
+                  style={{ color: generatingReasoning ? "var(--text-3)" : "#00f058", cursor: generatingReasoning ? "not-allowed" : "pointer" }}
                 >
                   {generatingReasoning ? "Generating…" : "✦ Generate reasoning"}
                 </button>
@@ -326,46 +314,38 @@ function CompetencyCard({
           </div>
 
           {/* Linked evidence */}
-          <div style={{ marginBottom: "16px" }}>
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "6px" }}>
+          <div className="comp-evidence-wrap">
+            <div className="comp-evidence-header">
               <Label>Linked evidence</Label>
               <button
                 onClick={() => setShowEvidencePicker(p => !p)}
-                style={{
-                  display: "flex", alignItems: "center", gap: "4px", background: "none",
-                  border: "1px solid var(--border-2)", borderRadius: "4px",
-                  color: "var(--text-3)", fontSize: "var(--text-caption)", padding: "3px 8px",
-                  cursor: "pointer", fontFamily: "var(--font-sans)",
-                }}
+                className="comp-link-evidence-btn"
               >
-                <Link2 style={{ width: "11px", height: "11px" }} /> Link evidence
+                <Link2 /> Link evidence
               </button>
             </div>
 
             {linkedEvidence.length > 0 ? (
-              <div style={{ display: "grid", gap: "4px" }}>
+              <div className="comp-evidence-list">
                 {linkedEvidence.map(e => (
-                  <div key={e.id} style={{ display: "flex", alignItems: "center", gap: "6px", padding: "4px 8px", background: "var(--surf-2)", borderRadius: "4px" }}>
-                    <span style={{ flex: 1, fontSize: "var(--text-caption)", color: "var(--text-2)" }}>{e.title}</span>
-                    <span style={{ fontSize: "var(--text-overline)", color: "var(--text-3)" }}>{e.occurredAt}</span>
-                    <button
-                      onClick={() => toggleEvidence(e.id)}
-                      style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-3)", padding: "2px" }}
-                    >
-                      <Trash2 style={{ width: "11px", height: "11px" }} />
+                  <div key={e.id} className="comp-evidence-item">
+                    <span className="comp-evidence-item-title">{e.title}</span>
+                    <span className="comp-evidence-item-date">{e.occurredAt}</span>
+                    <button className="comp-evidence-unlink-btn" onClick={() => toggleEvidence(e.id)}>
+                      <Trash2 />
                     </button>
                   </div>
                 ))}
               </div>
             ) : (
-              <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>No evidence linked.</p>
+              <p className="comp-evidence-empty">No evidence linked.</p>
             )}
 
             {/* Evidence picker */}
             {showEvidencePicker && (
-              <div style={{ marginTop: "8px", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", maxHeight: "180px", overflowY: "auto" }}>
+              <div className="comp-evidence-picker">
                 {allEvidence.length === 0 ? (
-                  <p style={{ padding: "12px 16px", fontSize: "var(--text-caption)", color: "var(--text-3)" }}>No evidence entries yet.</p>
+                  <p className="comp-evidence-picker-empty">No evidence entries yet.</p>
                 ) : (
                   allEvidence.map(e => {
                     const linked = assessment?.evidenceIds?.includes(e.id)
@@ -373,16 +353,12 @@ function CompetencyCard({
                       <div
                         key={e.id}
                         onClick={() => toggleEvidence(e.id)}
-                        style={{
-                          display: "flex", alignItems: "center", gap: "8px", padding: "6px 12px",
-                          cursor: "pointer", borderLeft: `2px solid ${linked ? "#00f058" : "transparent"}`,
-                        }}
-                        onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = "var(--surf-3)")}
-                        onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = "none")}
+                        className="comp-evidence-picker-item"
+                        style={{ borderLeft: `2px solid ${linked ? "#00f058" : "transparent"}` }}
                       >
-                        <span style={{ flex: 1, fontSize: "var(--text-caption)", color: "var(--text-2)" }}>{e.title}</span>
-                        <span style={{ fontSize: "var(--text-overline)", color: "var(--text-3)" }}>{e.occurredAt}</span>
-                        {linked && <Check style={{ width: "11px", height: "11px", color: "#4ade80", flexShrink: 0 }} />}
+                        <span className="comp-evidence-picker-item-title">{e.title}</span>
+                        <span className="comp-evidence-picker-item-date">{e.occurredAt}</span>
+                        {linked && <Check className="comp-evidence-picker-check" />}
                       </div>
                     )
                   })
@@ -392,31 +368,28 @@ function CompetencyCard({
           </div>
 
           {/* Assessment history */}
-          <div>
-            <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "6px" }}>
+          <div className="comp-history-wrap">
+            <div className="comp-history-header">
               <Label>Assessment history</Label>
               {!historyLoaded && (
-                <button
-                  onClick={onLoadHistory}
-                  style={{ background: "none", border: "none", cursor: "pointer", fontSize: "var(--text-caption)", color: "#00f058", fontFamily: "var(--font-sans)", padding: 0 }}
-                >
+                <button className="comp-load-history-btn" onClick={onLoadHistory}>
                   Load history
                 </button>
               )}
             </div>
             {historyLoaded && history.length === 0 && (
-              <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>No history yet.</p>
+              <p className="comp-history-empty">No history yet.</p>
             )}
             {historyLoaded && history.length > 0 && (
-              <div style={{ display: "grid", gap: "4px" }}>
+              <div className="comp-history-list">
                 {history.map(h => (
-                  <div key={h.id} style={{ display: "flex", alignItems: "center", gap: "8px", padding: "4px 8px", background: "var(--surf-2)", borderRadius: "4px" }}>
-                    <span style={{ fontSize: "var(--text-overline)", color: "var(--text-3)", flexShrink: 0 }}>{h.assessedAt}</span>
-                    <span style={{ fontSize: "var(--text-caption)", color: LEVEL_COLORS[h.assessedLevel]?.color ?? "var(--text-2)", fontWeight: 500 }}>
+                  <div key={h.id} className="comp-history-item">
+                    <span className="comp-history-date">{h.assessedAt}</span>
+                    <span className="comp-history-level" style={{ color: LEVEL_COLORS[h.assessedLevel]?.color ?? "var(--text-2)" }}>
                       {h.assessedLevel}
                     </span>
                     {h.notes && (
-                      <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      <span className="comp-history-notes">
                         {h.notes.slice(0, 60)}{h.notes.length > 60 ? "…" : ""}
                       </span>
                     )}
@@ -462,68 +435,55 @@ function GrowthPlanCard({ plan, areas, onUpdate, onDelete }: GrowthPlanCardProps
   }
 
   return (
-    <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "6px", marginBottom: "8px" }}>
-      <div style={{ padding: "10px 14px", display: "flex", alignItems: "center", gap: "10px" }}>
-        <button
-          onClick={() => setExpanded(e => !e)}
-          style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-3)", padding: "2px", flexShrink: 0 }}
-        >
-          {expanded ? <ChevronDown style={{ width: "13px", height: "13px" }} /> : <ChevronRight style={{ width: "13px", height: "13px" }} />}
+    <div className="growth-plan-card">
+      <div className="growth-plan-header">
+        <button className="growth-plan-toggle-btn" onClick={() => setExpanded(e => !e)}>
+          {expanded ? <ChevronDown /> : <ChevronRight />}
         </button>
-        <span style={{ flex: 1, fontWeight: 600, color: "var(--text-1)", fontSize: "var(--text-body)" }}>{plan.title}</span>
+        <span className="growth-plan-title">{plan.title}</span>
         {plan.areaName && (
-          <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", background: "var(--surf-2)", padding: "1px 6px", borderRadius: "4px" }}>
-            {plan.areaName}
-          </span>
+          <span className="growth-plan-area-chip">{plan.areaName}</span>
         )}
         {plan.targetLevel && (
-          <span style={{ fontSize: "var(--text-caption)", color: LEVEL_COLORS[plan.targetLevel]?.color ?? "var(--text-2)", fontWeight: 500 }}>
+          <span className="growth-plan-target-level" style={{ color: LEVEL_COLORS[plan.targetLevel]?.color ?? "var(--text-2)" }}>
             → {plan.targetLevel}
           </span>
         )}
-        <span style={{ padding: "2px 8px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 500, background: statusColors.bg, color: statusColors.color }}>
+        <span className="growth-plan-status-chip" style={{ background: statusColors.bg, color: statusColors.color }}>
           {plan.status}
         </span>
         {plan.status === 'active' && (
-          <button
-            onClick={() => save({ status: 'completed' })}
-            style={{ background: "none", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-3)", fontSize: "var(--text-caption)", padding: "3px 8px", cursor: "pointer", fontFamily: "var(--font-sans)" }}
-          >
+          <button className="growth-plan-complete-btn" onClick={() => save({ status: 'completed' })}>
             Complete
           </button>
         )}
-        <button
-          onClick={() => onDelete(plan.id)}
-          style={{ background: "none", border: "none", cursor: "pointer", color: "var(--text-3)", padding: "4px" }}
-          onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = "#f87171")}
-          onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-3)")}
-        >
-          <Trash2 style={{ width: "12px", height: "12px" }} />
+        <button className="growth-plan-delete-btn" onClick={() => onDelete(plan.id)}>
+          <Trash2 />
         </button>
       </div>
 
       {expanded && (
-        <div style={{ padding: "12px 14px 16px 40px", borderTop: "1px solid var(--border-1)", display: "grid", gap: "12px" }}>
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
+        <div className="growth-plan-body">
+          <div className="growth-plan-2col">
             <div>
-              <Label style={{ display: "block", marginBottom: "4px" }}>Target area</Label>
+              <Label className="growth-plan-label">Target area</Label>
               <select
                 value={plan.areaId ?? ""}
                 onChange={e => save({ areaId: e.target.value || null })}
                 disabled={saving}
-                style={{ width: "100%", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-2)", padding: "6px 8px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)" }}
+                className="evidence-form-select"
               >
                 <option value="">No area</option>
                 {areas.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
               </select>
             </div>
             <div>
-              <Label style={{ display: "block", marginBottom: "4px" }}>Target level</Label>
+              <Label className="growth-plan-label">Target level</Label>
               <select
                 value={plan.targetLevel ?? ""}
                 onChange={e => save({ targetLevel: e.target.value || null })}
                 disabled={saving}
-                style={{ width: "100%", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-2)", padding: "6px 8px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)" }}
+                className="evidence-form-select"
               >
                 <option value="">No target</option>
                 {LEVELS.map(l => <option key={l} value={l}>{l}</option>)}
@@ -531,32 +491,32 @@ function GrowthPlanCard({ plan, areas, onUpdate, onDelete }: GrowthPlanCardProps
             </div>
           </div>
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
+          <div className="growth-plan-2col">
             <div>
-              <Label style={{ display: "block", marginBottom: "4px" }}>Status</Label>
+              <Label className="growth-plan-label">Status</Label>
               <select
                 value={plan.status}
                 onChange={e => save({ status: e.target.value as GrowthPlan['status'] })}
                 disabled={saving}
-                style={{ width: "100%", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-2)", padding: "6px 8px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)" }}
+                className="evidence-form-select"
               >
                 {['active', 'paused', 'completed', 'cancelled'].map(s => <option key={s} value={s}>{s}</option>)}
               </select>
             </div>
             <div>
-              <Label style={{ display: "block", marginBottom: "4px" }}>Target date</Label>
+              <Label className="growth-plan-label">Target date</Label>
               <input
                 type="date"
                 value={plan.targetDate ?? ""}
                 onChange={e => save({ targetDate: e.target.value || null })}
                 disabled={saving}
-                style={{ width: "100%", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-2)", padding: "6px 8px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)" }}
+                className="evidence-form-select"
               />
             </div>
           </div>
 
           <div>
-            <Label style={{ display: "block", marginBottom: "4px" }}>Description</Label>
+            <Label className="growth-plan-label">Description</Label>
             <div onBlur={() => save({ description: descLocal })}>
               <MarkdownTextarea
                 value={descLocal}
@@ -568,7 +528,7 @@ function GrowthPlanCard({ plan, areas, onUpdate, onDelete }: GrowthPlanCardProps
           </div>
 
           <div>
-            <Label style={{ display: "block", marginBottom: "4px" }}>Progress notes</Label>
+            <Label className="growth-plan-label">Progress notes</Label>
             <div onBlur={() => save({ progressNotes: progressLocal })}>
               <MarkdownTextarea
                 value={progressLocal}
@@ -613,44 +573,38 @@ function AddGrowthPlanForm({ personId, areas, defaultAreaId, onSaved, onCancel }
   }
 
   return (
-    <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "6px", padding: "16px", marginBottom: "8px" }}>
-      <div style={{ display: "grid", gap: "10px" }}>
+    <div className="add-growth-plan-form">
+      <div className="add-growth-plan-grid">
         <div>
-          <Label style={{ display: "block", marginBottom: "4px" }}>Title *</Label>
+          <Label className="growth-plan-label">Title *</Label>
           <Input value={title} onChange={e => setTitle(e.target.value)} placeholder="e.g. Improve system design skills" />
         </div>
-        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "10px" }}>
+        <div className="growth-plan-3col">
           <div>
-            <Label style={{ display: "block", marginBottom: "4px" }}>Target area</Label>
-            <select value={areaId} onChange={e => setAreaId(e.target.value)} style={{ width: "100%", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-2)", padding: "6px 8px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)" }}>
+            <Label className="growth-plan-label">Target area</Label>
+            <select value={areaId} onChange={e => setAreaId(e.target.value)} className="evidence-form-select">
               <option value="">None</option>
               {areas.map(a => <option key={a.id} value={a.id}>{a.name}</option>)}
             </select>
           </div>
           <div>
-            <Label style={{ display: "block", marginBottom: "4px" }}>Target level</Label>
-            <select value={targetLevel} onChange={e => setTargetLevel(e.target.value)} style={{ width: "100%", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-2)", padding: "6px 8px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)" }}>
+            <Label className="growth-plan-label">Target level</Label>
+            <select value={targetLevel} onChange={e => setTargetLevel(e.target.value)} className="evidence-form-select">
               <option value="">None</option>
               {LEVELS.map(l => <option key={l} value={l}>{l}</option>)}
             </select>
           </div>
           <div>
-            <Label style={{ display: "block", marginBottom: "4px" }}>Target date</Label>
-            <input type="date" value={targetDate} onChange={e => setTargetDate(e.target.value)} style={{ width: "100%", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-2)", padding: "6px 8px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)" }} />
+            <Label className="growth-plan-label">Target date</Label>
+            <input type="date" value={targetDate} onChange={e => setTargetDate(e.target.value)} className="evidence-form-select" />
           </div>
         </div>
-        <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
-          <button onClick={onCancel} style={{ background: "none", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-2)", fontSize: "var(--text-label)", padding: "5px 12px", cursor: "pointer", fontFamily: "var(--font-sans)" }}>Cancel</button>
+        <div className="add-growth-plan-footer">
+          <button onClick={onCancel} className="add-growth-plan-cancel-btn">Cancel</button>
           <button
             onClick={handleSave}
             disabled={!title.trim() || saving}
-            style={{
-              background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)", border: "none", borderRadius: "4px",
-              color: "#0a1a0a", fontSize: "var(--text-label)", fontWeight: 600, padding: "5px 14px",
-              cursor: title.trim() && !saving ? "pointer" : "not-allowed",
-              opacity: title.trim() && !saving ? 1 : 0.5,
-              fontFamily: "var(--font-sans)",
-            }}
+            className="add-growth-plan-save-btn"
           >
             {saving ? "Saving…" : "Save plan"}
           </button>
@@ -854,48 +808,40 @@ export function CompetencySection({ personId, personLevel, personName = "this en
 
   if (loading) {
     return (
-      <div style={{ marginTop: "24px", background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "24px" }}>
-        <p style={{ color: "var(--text-3)" }}>Loading competency data…</p>
+      <div className="competency-section">
+        <div className="competency-card-wrap competency-card-wrap--loading">
+          <p className="competency-loading-text">Loading competency data…</p>
+        </div>
       </div>
     )
   }
 
   if (!framework) {
     return (
-      <div style={{ marginTop: "24px", background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "24px" }}>
-        <h2 style={{ marginBottom: "8px" }}>Competencies</h2>
-        <p style={{ color: "var(--text-3)", marginBottom: "12px" }}>
-          No career framework set up yet. Define competency areas and level expectations to start tracking.
-        </p>
-        <a
-          href="/framework"
-          style={{
-            display: "inline-flex", alignItems: "center", gap: "5px",
-            background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)",
-            border: "none", borderRadius: "4px", color: "#0a1a0a",
-            fontSize: "var(--text-label)", fontWeight: 600, padding: "5px 12px",
-            textDecoration: "none",
-          }}
-        >
-          <ExternalLink style={{ width: "11px", height: "11px" }} /> Set up Career Framework
-        </a>
+      <div className="competency-section">
+        <div className="competency-card-wrap">
+          <h2 className="competency-no-framework-title">Competencies</h2>
+          <p className="competency-no-framework-text">
+            No career framework set up yet. Define competency areas and level expectations to start tracking.
+          </p>
+          <a href="/framework" className="competency-setup-link">
+            <ExternalLink /> Set up Career Framework
+          </a>
+        </div>
       </div>
     )
   }
 
   return (
-    <div style={{ marginTop: "24px" }}>
-      <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", padding: "24px" }}>
-        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "20px", flexWrap: "wrap", gap: "8px" }}>
+    <div className="competency-section">
+      <div className="competency-card-wrap">
+        <div className="competency-card-header">
           <div>
-            <h2 style={{ margin: 0 }}>Competencies</h2>
-            <p style={{ marginTop: "2px" }}>{framework.name}</p>
+            <h2 className="competency-card-title">Competencies</h2>
+            <p className="competency-card-subtitle">{framework.name}</p>
           </div>
-          <a
-            href="/framework"
-            style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", display: "flex", alignItems: "center", gap: "4px", textDecoration: "none" }}
-          >
-            <ExternalLink style={{ width: "11px", height: "11px" }} /> Edit framework
+          <a href="/framework" className="competency-framework-link">
+            <ExternalLink /> Edit framework
           </a>
         </div>
 
@@ -904,8 +850,8 @@ export function CompetencySection({ personId, personLevel, personName = "this en
           <>
             <PromotionBanner readiness={readiness} />
             {readiness.nextLevel && (
-              <div style={{ marginBottom: "20px" }}>
-                <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: promotionPacket ? "12px" : 0 }}>
+              <div className="competency-promo-readiness">
+                <div className="promo-packet-row">
                   <AIButton
                     configured={aiConfig.configured}
                     loading={aiConfig.loading}
@@ -916,18 +862,13 @@ export function CompetencySection({ personId, personLevel, personName = "this en
                     showSetupLink={false}
                   />
                   {promotionPacket && (
-                    <button
-                      onClick={() => setPromotionPacket(null)}
-                      style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", background: "none", border: "none", cursor: "pointer", padding: 0 }}
-                    >
+                    <button className="promo-packet-clear-btn" onClick={() => setPromotionPacket(null)}>
                       ✕ Clear
                     </button>
                   )}
                 </div>
                 {promotionPacket && (
-                  <div style={{ background: "var(--surf-2)", border: "1px solid var(--border-1)", borderRadius: "6px", padding: "16px 20px", fontSize: "var(--text-label)", color: "var(--text-2)", lineHeight: 1.7, whiteSpace: "pre-wrap" }}>
-                    {promotionPacket}
-                  </div>
+                  <div className="promo-packet-content">{promotionPacket}</div>
                 )}
               </div>
             )}
@@ -936,16 +877,16 @@ export function CompetencySection({ personId, personLevel, personName = "this en
 
         {/* Radar chart */}
         {areas.length > 0 && (
-          <div style={{ marginBottom: "28px" }}>
+          <div className="competency-radar-wrap">
             <CompetencyRadar data={radarData} />
           </div>
         )}
 
         {/* Competency area cards */}
         {areas.length === 0 ? (
-          <p style={{ color: "var(--text-3)", marginBottom: "24px" }}>No competency areas defined in the framework.</p>
+          <p className="competency-no-areas">No competency areas defined in the framework.</p>
         ) : (
-          <div style={{ marginBottom: "28px" }}>
+          <div className="competency-areas-wrap">
             {areas.map(area => (
               <CompetencyCard
                 key={area.id}
@@ -966,9 +907,9 @@ export function CompetencySection({ personId, personLevel, personName = "this en
 
         {/* Growth plans */}
         <div>
-          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "12px" }}>
-            <h3 style={{ margin: 0 }}>Growth Plans</h3>
-            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <div className="growth-plans-header">
+            <h3 className="growth-plans-title">Growth Plans</h3>
+            <div className="growth-plans-actions">
               <AIButton
                 configured={aiConfig.configured}
                 loading={aiConfig.loading}
@@ -978,16 +919,8 @@ export function CompetencySection({ personId, personLevel, personName = "this en
                 tooltip={aiConfig.tooltip ?? "Suggests a plan for your biggest competency gap"}
                 showSetupLink={false}
               />
-              <button
-                onClick={() => setAddingPlan(true)}
-                style={{
-                  display: "flex", alignItems: "center", gap: "4px",
-                  background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px",
-                  color: "var(--text-2)", fontSize: "var(--text-label)", padding: "4px 10px",
-                  cursor: "pointer", fontFamily: "var(--font-sans)",
-                }}
-              >
-                <Plus style={{ width: "11px", height: "11px" }} /> Add plan
+              <button className="growth-plan-add-btn" onClick={() => setAddingPlan(true)}>
+                <Plus /> Add plan
               </button>
             </div>
           </div>
@@ -1002,7 +935,7 @@ export function CompetencySection({ personId, personLevel, personName = "this en
           )}
 
           {activeGrowthPlans.length === 0 && !addingPlan && (
-            <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginBottom: "12px" }}>No active growth plans.</p>
+            <p className="growth-plan-empty">No active growth plans.</p>
           )}
 
           {activeGrowthPlans.map(plan => (
@@ -1016,8 +949,8 @@ export function CompetencySection({ personId, personLevel, personName = "this en
           ))}
 
           {completedGrowthPlans.length > 0 && (
-            <details style={{ marginTop: "8px" }}>
-              <summary style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", cursor: "pointer", marginBottom: "8px" }}>
+            <details className="growth-plan-archive">
+              <summary className="growth-plan-archive-summary">
                 {completedGrowthPlans.length} completed / cancelled plan{completedGrowthPlans.length !== 1 ? "s" : ""}
               </summary>
               {completedGrowthPlans.map(plan => (
diff --git a/components/competency/skills-matrix.tsx b/components/competency/skills-matrix.tsx
index f665c52..ecf8576 100644
--- a/components/competency/skills-matrix.tsx
+++ b/components/competency/skills-matrix.tsx
@@ -73,11 +73,7 @@ const LEVEL_COLORS: Record<string, string> = {
 
 function MatrixCell({ assessment, personLevel }: { assessment: CompetencyAssessment | null; personLevel: string | null }) {
   if (!assessment) {
-    return (
-      <td style={{ padding: "8px 12px", textAlign: "center", color: "var(--text-3)", fontSize: "var(--text-caption)", background: "var(--surf-2)" }}>
-        —
-      </td>
-    )
+    return <td className="skills-matrix-td-empty">—</td>
   }
 
   const expectedScore = personLevel ? levelToScore(personLevel) : null
@@ -95,11 +91,9 @@ function MatrixCell({ assessment, personLevel }: { assessment: CompetencyAssessm
   const color = LEVEL_COLORS[assessment.assessedLevel] ?? "var(--text-2)"
 
   return (
-    <td style={{ padding: "8px 12px", textAlign: "center", background: cellBg, fontSize: "var(--text-caption)" }}>
-      <span style={{ color, fontWeight: 500 }}>
-        {assessment.assessedLevel}
-      </span>
-      <span style={{ color: "var(--text-3)", marginLeft: "2px" }}>{indicator}</span>
+    <td className="skills-matrix-td" style={{ background: cellBg }}>
+      <span className="skills-matrix-td-level" style={{ color }}>{assessment.assessedLevel}</span>
+      <span className="skills-matrix-td-indicator">{indicator}</span>
     </td>
   )
 }
@@ -170,40 +164,36 @@ export function SkillsMatrix({ memberIds }: SkillsMatrixProps) {
     [people, areas, latestByPersonArea]
   )
 
-  if (loading) return <p style={{ color: "var(--text-3)", padding: "16px" }}>Loading skills matrix…</p>
+  if (loading) return <p className="skills-matrix-loading">Loading skills matrix…</p>
 
   if (!framework) return (
-    <div style={{ padding: "24px" }}>
-      <p style={{ color: "var(--text-3)", marginBottom: "12px" }}>No career framework set up.</p>
-      <Link href="/framework" style={{ color: "#00f058", fontSize: "var(--text-label)" }}>Set up Career Framework →</Link>
+    <div className="skills-matrix-no-fw">
+      <p className="skills-matrix-no-fw-text">No career framework set up.</p>
+      <Link href="/framework" className="skills-matrix-fw-link">Set up Career Framework →</Link>
     </div>
   )
 
   if (people.length === 0) return (
-    <p style={{ color: "var(--text-3)", padding: "16px" }}>No members in this team.</p>
+    <p className="skills-matrix-no-members">No members in this team.</p>
   )
 
   return (
     <div>
       {/* Matrix table */}
-      <div style={{ overflowX: "auto", marginBottom: "28px" }}>
-        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: "var(--text-caption)" }}>
+      <div className="skills-matrix-table-wrap">
+        <table className="skills-matrix-table">
           <thead>
             <tr>
-              <th style={{ padding: "8px 12px", textAlign: "left", fontWeight: 600, color: "var(--text-2)", borderBottom: "1px solid var(--border-1)", whiteSpace: "nowrap", background: "var(--surf-2)" }}>
-                Person
-              </th>
+              <th className="skills-matrix-th-person">Person</th>
               {areas.map(area => (
                 <th
                   key={area.id}
                   onClick={() => setSortByArea(prev => prev === area.id ? null : area.id)}
+                  className="skills-matrix-th-area"
                   style={{
-                    padding: "8px 12px", textAlign: "center", fontWeight: 600,
                     color: sortByArea === area.id ? "#00f058" : "var(--text-2)",
-                    whiteSpace: "nowrap",
-                    background: "var(--surf-2)", cursor: "pointer",
                     borderBottom: sortByArea === area.id ? "2px solid #00f058" : "1px solid var(--border-1)",
-                  } as React.CSSProperties}
+                  }}
                   title="Click to sort by this area"
                 >
                   {area.name}
@@ -213,16 +203,19 @@ export function SkillsMatrix({ memberIds }: SkillsMatrixProps) {
           </thead>
           <tbody>
             {sortedPeople.map((person, i) => (
-              <tr key={person.id} style={{ borderBottom: "1px solid var(--border-1)" }}>
-                <td style={{ padding: "8px 12px", whiteSpace: "nowrap", background: i % 2 === 0 ? "var(--surf)" : "var(--surf-2)" }}>
-                  <Link
-                    href={`/people/${person.id}`}
-                    style={{ color: "var(--text-1)", textDecoration: "none", fontWeight: 500, fontSize: "var(--text-label)" }}
-                  >
+              <tr key={person.id} className="skills-matrix-row">
+                <td
+                  className="skills-matrix-td-person"
+                  style={{ background: i % 2 === 0 ? "var(--surf)" : "var(--surf-2)" }}
+                >
+                  <Link href={`/people/${person.id}`} className="skills-matrix-person-link">
                     {person.name}
                   </Link>
                   {person.level && (
-                    <span style={{ marginLeft: "6px", fontSize: "var(--text-overline)", color: LEVEL_COLORS[person.level] ?? "var(--text-3)", fontWeight: 500 }}>
+                    <span
+                      className="skills-matrix-person-level"
+                      style={{ color: LEVEL_COLORS[person.level] ?? "var(--text-3)" }}
+                    >
                       ({person.level})
                     </span>
                   )}
@@ -241,37 +234,37 @@ export function SkillsMatrix({ memberIds }: SkillsMatrixProps) {
       </div>
 
       {/* Legend */}
-      <div style={{ display: "flex", gap: "16px", marginBottom: "24px", flexWrap: "wrap" }}>
+      <div className="skills-matrix-legend">
         {[
           { symbol: "✓", label: "At expected level", color: "#4ade80" },
           { symbol: "↑", label: "Above expected", color: "#60a5fa" },
           { symbol: "↓", label: "Below expected", color: "#fbbf24" },
           { symbol: "—", label: "Not assessed", color: "var(--text-3)" },
         ].map(({ symbol, label, color }) => (
-          <span key={symbol} style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", display: "flex", alignItems: "center", gap: "5px" }}>
-            <span style={{ color, fontWeight: 600 }}>{symbol}</span> {label}
+          <span key={symbol} className="skills-matrix-legend-item">
+            <span className="skills-matrix-legend-symbol" style={{ color }}>{symbol}</span> {label}
           </span>
         ))}
       </div>
 
       {/* Gap analysis */}
-      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "16px" }}>
+      <div className="skills-matrix-gap-grid">
         {[
-          { title: "Team strengths", items: gapAnalysis.strengths, color: "#4ade80", bg: "#0d2015", empty: "No clear strengths yet" },
-          { title: "Team gaps", items: gapAnalysis.gaps, color: "#f87171", bg: "#2a0a0a", empty: "No significant gaps" },
-          { title: "Key-person risks", items: gapAnalysis.keyPersonRisks, color: "#fbbf24", bg: "#1e1a00", empty: "No single-person dependencies" },
-          { title: "Mostly unassessed", items: gapAnalysis.unassessed, color: "#9ca3af", bg: "#1a1a22", empty: "All areas have coverage" },
+          { title: "Team strengths", items: gapAnalysis.strengths, color: "#4ade80", empty: "No clear strengths yet" },
+          { title: "Team gaps", items: gapAnalysis.gaps, color: "#f87171", empty: "No significant gaps" },
+          { title: "Key-person risks", items: gapAnalysis.keyPersonRisks, color: "#fbbf24", empty: "No single-person dependencies" },
+          { title: "Mostly unassessed", items: gapAnalysis.unassessed, color: "#9ca3af", empty: "All areas have coverage" },
         ].map(({ title, items, color, empty }) => (
-          <div key={title} style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "6px", padding: "14px" }}>
-            <p style={{ fontWeight: 600, color: "var(--text-2)", fontSize: "var(--text-label)", marginBottom: "8px" }}>{title}</p>
+          <div key={title} className="skills-matrix-gap-card">
+            <p className="skills-matrix-gap-title">{title}</p>
             {items.length === 0 ? (
-              <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>{empty}</p>
+              <p className="skills-matrix-gap-empty">{empty}</p>
             ) : (
-              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: "4px" }}>
+              <ul className="skills-matrix-gap-list">
                 {items.map(item => (
-                  <li key={item} style={{ display: "flex", alignItems: "flex-start", gap: "6px", fontSize: "var(--text-caption)" }}>
-                    <span style={{ color, flexShrink: 0, marginTop: "1px" }}>•</span>
-                    <span style={{ color: "var(--text-2)" }}>{item}</span>
+                  <li key={item} className="skills-matrix-gap-item">
+                    <span className="skills-matrix-gap-bullet" style={{ color }}>•</span>
+                    <span className="skills-matrix-gap-text">{item}</span>
                   </li>
                 ))}
               </ul>
diff --git a/components/dashboard-layout.tsx b/components/dashboard-layout.tsx
index da4aa18..ecb2b1f 100644
--- a/components/dashboard-layout.tsx
+++ b/components/dashboard-layout.tsx
@@ -7,7 +7,7 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
   const [sidebarOpen, setSidebarOpen] = useState(true)
 
   return (
-    <div className="flex h-screen overflow-hidden" style={{ background: "var(--bg-base)" }}>
+    <div className="flex h-screen overflow-hidden bg-base">
       <Sidebar isOpen={sidebarOpen} onToggle={() => setSidebarOpen(!sidebarOpen)} />
       <main className="relative flex-1 overflow-y-auto">
         {children}
diff --git a/components/dashboard/dashboard-calendar.tsx b/components/dashboard/dashboard-calendar.tsx
index 5ce7be6..3a2c6fe 100644
--- a/components/dashboard/dashboard-calendar.tsx
+++ b/components/dashboard/dashboard-calendar.tsx
@@ -88,7 +88,7 @@ function DraggableTaskChip({
       {...attributes}
       onClick={onClick}
       className={cn(
-        "flex flex-col px-1.5 py-1 rounded text-[12px] font-medium cursor-grab active:cursor-grabbing transition-opacity bg-[#2a2a2a] text-gray-200 border border-[#383838]",
+        "flex flex-col px-1.5 py-1 rounded text-[13px] font-medium cursor-grab active:cursor-grabbing transition-opacity bg-[#2a2a2a] text-gray-200 border border-[#383838]",
         PRIORITY_BORDER[task.priority],
         isDragging && !overlay && "opacity-30",
         overlay && "shadow-lg opacity-95 rotate-1 cursor-grabbing",
@@ -97,7 +97,7 @@ function DraggableTaskChip({
       <span className="truncate">{task.title}</span>
       <div className="flex items-center gap-1 mt-0.5">
         <span className={cn("flex-shrink-0 w-1.5 h-1.5 rounded-full", PRIORITY_DOT[task.priority])} />
-        <span className="opacity-60 font-normal text-[12px]">{task.priority}</span>
+        <span className="opacity-60 font-normal text-[13px]">{task.priority}</span>
       </div>
     </div>
   )
@@ -268,7 +268,7 @@ export function DashboardCalendar({ tasks }: DashboardCalendarProps) {
             </button>
             <button
               onClick={() => { setViewYear(today.getFullYear()); setViewMonth(today.getMonth()) }}
-              className="px-3 py-1 text-xs rounded-md hover:bg-[#2a2a2a] text-gray-400 hover:text-gray-200 transition-colors"
+              className="px-3 py-1 text-[13px] rounded-md hover:bg-[#2a2a2a] text-gray-400 hover:text-gray-200 transition-colors"
             >
               Today
             </button>
@@ -286,7 +286,7 @@ export function DashboardCalendar({ tasks }: DashboardCalendarProps) {
           {DAYS_OF_WEEK.map((day) => (
             <div
               key={day}
-              className="py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wide"
+              className="py-2 text-center text-[13px] font-medium text-gray-500 uppercase tracking-wide"
             >
               {day}
             </div>
@@ -333,7 +333,7 @@ export function DashboardCalendar({ tasks }: DashboardCalendarProps) {
                     <div className="flex justify-end mb-1.5">
                       <span
                         className={cn(
-                          "text-xs font-medium w-6 h-6 flex items-center justify-center rounded-full",
+                          "text-[13px] font-medium w-6 h-6 flex items-center justify-center rounded-full",
                           isToday
                             ? "bg-gray-100 text-[#0f0f0f] font-bold"
                             : isCurrentMonth
@@ -355,7 +355,7 @@ export function DashboardCalendar({ tasks }: DashboardCalendarProps) {
                         />
                       ))}
                       {overflow > 0 && (
-                        <div className="text-[10px] text-gray-500 pl-1.5">
+                        <div className="text-[13px] text-gray-500 pl-1.5">
                           +{overflow} more
                         </div>
                       )}
diff --git a/components/dashboard/meetings-bar-chart.tsx b/components/dashboard/meetings-bar-chart.tsx
index 82077ba..ffa90c9 100644
--- a/components/dashboard/meetings-bar-chart.tsx
+++ b/components/dashboard/meetings-bar-chart.tsx
@@ -44,7 +44,7 @@ function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
   if (!active || !payload?.length) return null
   const total = payload.reduce((sum: number, entry: any) => sum + (entry.value ?? 0), 0)
   return (
-    <div className="bg-[#1e1e1e] border border-[#383838] rounded-lg p-3 shadow-xl text-xs">
+    <div className="bg-[#1e1e1e] border border-[#383838] rounded-lg p-3 shadow-xl text-[13px]">
       <p className="text-gray-300 font-semibold mb-2">Week of {label}</p>
       {payload.map((entry: any) =>
         entry.value > 0 ? (
@@ -76,12 +76,12 @@ export function MeetingsBarChart({ data }: MeetingsBarChartProps) {
         <CartesianGrid strokeDasharray="3 3" stroke="#2a2a2a" vertical={false} />
         <XAxis
           dataKey="week"
-          tick={{ fill: "#9ca3af", fontSize: 11 }}
+          tick={{ fill: "#9ca3af", fontSize: 13 }}
           axisLine={false}
           tickLine={false}
         />
         <YAxis
-          tick={{ fill: "#9ca3af", fontSize: 11 }}
+          tick={{ fill: "#9ca3af", fontSize: 13 }}
           axisLine={false}
           tickLine={false}
           allowDecimals={false}
diff --git a/components/dashboard/meetings-widget.tsx b/components/dashboard/meetings-widget.tsx
index b4896c0..c33bada 100644
--- a/components/dashboard/meetings-widget.tsx
+++ b/components/dashboard/meetings-widget.tsx
@@ -111,48 +111,48 @@ export function MeetingsWidget() {
   })()
 
   return (
-    <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "12px", padding: "20px" }}>
-      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: "16px" }}>
+    <div className="widget-card">
+      <div className="widget-header">
         <div>
           <h2>Meetings</h2>
-          <p style={{ marginTop: "2px" }}>{rangeLabel}</p>
+          <p className="mt-0.5">{rangeLabel}</p>
         </div>
-        <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+        <div className="widget-nav-btns">
           <button
             onClick={() => setAnchorMonday((d) => addDays(d, -56))}
-            style={{ padding: "4px", borderRadius: "4px", background: "none", border: "none", color: "var(--text-3)", cursor: "pointer" }}
-            onMouseEnter={e => { (e.currentTarget.style.background = "var(--surf-3)"); (e.currentTarget.style.color = "var(--text-1)") }}
-            onMouseLeave={e => { (e.currentTarget.style.background = "none"); (e.currentTarget.style.color = "var(--text-3)") }}
+            className="widget-nav-btn"
             aria-label="Previous 8 weeks"
           >
-            <ChevronLeft style={{ width: "14px", height: "14px" }} />
+            <ChevronLeft />
           </button>
           <button
             onClick={() => setAnchorMonday((d) => addDays(d, 56))}
             disabled={isAtOrPastCurrentWindow}
-            style={{ padding: "4px", borderRadius: "4px", background: "none", border: "none", color: "var(--text-3)", cursor: isAtOrPastCurrentWindow ? "not-allowed" : "pointer", opacity: isAtOrPastCurrentWindow ? 0.3 : 1 }}
-            onMouseEnter={e => { if (!isAtOrPastCurrentWindow) { (e.currentTarget.style.background = "var(--surf-3)"); (e.currentTarget.style.color = "var(--text-1)") } }}
-            onMouseLeave={e => { (e.currentTarget.style.background = "none"); (e.currentTarget.style.color = "var(--text-3)") }}
+            className="widget-nav-btn"
+            style={{
+              cursor: isAtOrPastCurrentWindow ? "not-allowed" : "pointer",
+              opacity: isAtOrPastCurrentWindow ? 0.3 : 1,
+            }}
             aria-label="Next week"
           >
-            <ChevronRight style={{ width: "14px", height: "14px" }} />
+            <ChevronRight />
           </button>
         </div>
       </div>
 
       {loading ? (
-        <div style={{ height: "220px", display: "flex", alignItems: "center", justifyContent: "center" }}>
-          <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>Loading...</span>
+        <div className="widget-loading">
+          <span className="widget-loading-text">Loading...</span>
         </div>
       ) : (
         <MeetingsBarChart data={data} />
       )}
 
-      <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 12px", marginTop: "12px" }}>
+      <div className="widget-legend">
         {MEETING_TYPES.map((t) => (
-          <div key={t} style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-            <span style={{ width: "8px", height: "8px", borderRadius: "50%", flexShrink: 0, backgroundColor: MEETING_COLORS[t] }} />
-            <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>{t}</span>
+          <div key={t} className="widget-legend-item">
+            <span className="widget-legend-dot" style={{ backgroundColor: MEETING_COLORS[t] }} />
+            <span className="widget-legend-label">{t}</span>
           </div>
         ))}
       </div>
diff --git a/components/dashboard/task-priority-chart.tsx b/components/dashboard/task-priority-chart.tsx
index d504b48..cab6dc7 100644
--- a/components/dashboard/task-priority-chart.tsx
+++ b/components/dashboard/task-priority-chart.tsx
@@ -95,7 +95,7 @@ function BarTooltip({ active, payload, label }: any) {
   if (!active || !payload?.length) return null
   const total = payload.reduce((s: number, e: any) => s + (e.value ?? 0), 0)
   return (
-    <div className="bg-[#1e1e1e] border border-[#383838] rounded-lg p-3 shadow-xl text-xs">
+    <div className="bg-[#1e1e1e] border border-[#383838] rounded-lg p-3 shadow-xl text-[13px]">
       <p className="text-gray-300 font-semibold mb-2">Week of {label}</p>
       {payload.map((e: any) =>
         e.value > 0 ? (
@@ -120,7 +120,7 @@ function PieTooltip({ active, payload }: any) {
   if (!active || !payload?.length) return null
   const e = payload[0]
   return (
-    <div className="bg-[#1e1e1e] border border-[#383838] rounded-lg px-3 py-2 shadow-xl text-xs">
+    <div className="bg-[#1e1e1e] border border-[#383838] rounded-lg px-3 py-2 shadow-xl text-[13px]">
       <div className="flex items-center gap-1.5">
         <span className="inline-block w-2 h-2 rounded-full" style={{ backgroundColor: e.payload.fill }} />
         <span className="text-gray-300 font-medium">{e.name}</span>
@@ -164,7 +164,7 @@ export function TaskPriorityChart() {
               key={w}
               onClick={() => setWeeks(w)}
               className={cn(
-                "px-2 py-0.5 rounded text-[11px] font-medium transition-colors",
+                "px-2 py-0.5 rounded text-[13px] font-medium transition-colors",
                 weeks === w
                   ? "bg-[#383838] text-gray-100"
                   : "text-gray-500 hover:text-gray-300"
@@ -202,14 +202,14 @@ export function TaskPriorityChart() {
 
       {loading ? (
         <div className="h-[220px] flex items-center justify-center">
-          <span className="text-gray-600 text-xs">Loading...</span>
+          <span className="text-gray-600 text-[13px]">Loading...</span>
         </div>
       ) : chartType === "bar" ? (
         <ResponsiveContainer width="100%" height={200}>
           <BarChart data={data} margin={{ top: 4, right: 4, left: -20, bottom: 0 }} barSize={weeks <= 4 ? 28 : 16}>
             <CartesianGrid strokeDasharray="3 3" stroke="#2a2a2a" vertical={false} />
-            <XAxis dataKey="week" tick={{ fill: "#9ca3af", fontSize: 10 }} axisLine={false} tickLine={false} />
-            <YAxis tick={{ fill: "#9ca3af", fontSize: 10 }} axisLine={false} tickLine={false} allowDecimals={false} />
+            <XAxis dataKey="week" tick={{ fill: "#9ca3af", fontSize: 13 }} axisLine={false} tickLine={false} />
+            <YAxis tick={{ fill: "#9ca3af", fontSize: 13 }} axisLine={false} tickLine={false} allowDecimals={false} />
             <Tooltip content={<BarTooltip />} cursor={{ fill: "rgba(255,255,255,0.04)" }} />
             {PRIORITIES.map((p, i) => (
               <Bar
@@ -226,7 +226,7 @@ export function TaskPriorityChart() {
         <div className="h-[200px]">
           {pieTotals.length === 0 ? (
             <div className="h-full flex items-center justify-center">
-              <span className="text-gray-600 text-xs">No tasks in this period</span>
+              <span className="text-gray-600 text-[13px]">No tasks in this period</span>
             </div>
           ) : (
             <ResponsiveContainer width="100%" height="100%">
@@ -248,7 +248,7 @@ export function TaskPriorityChart() {
                 <Legend
                   iconType="circle"
                   iconSize={8}
-                  formatter={(value) => <span style={{ color: "#9ca3af", fontSize: 11 }}>{value}</span>}
+                  formatter={(value) => <span className="chart-legend-label">{value}</span>}
                 />
               </PieChart>
             </ResponsiveContainer>
diff --git a/components/dashboard/tasks-bar-chart.tsx b/components/dashboard/tasks-bar-chart.tsx
index 8b68357..a6cf4ca 100644
--- a/components/dashboard/tasks-bar-chart.tsx
+++ b/components/dashboard/tasks-bar-chart.tsx
@@ -38,7 +38,7 @@ function CustomTooltip({ active, payload, label }: CustomTooltipProps) {
   if (!active || !payload?.length) return null
   const total = payload.reduce((sum: number, entry: any) => sum + (entry.value ?? 0), 0)
   return (
-    <div className="bg-[#1e1e1e] border border-[#383838] rounded-lg p-3 shadow-xl text-xs">
+    <div className="bg-[#1e1e1e] border border-[#383838] rounded-lg p-3 shadow-xl text-[13px]">
       <p className="text-gray-300 font-semibold mb-2">Week of {label}</p>
       {payload.map((entry: any) =>
         entry.value > 0 ? (
@@ -70,12 +70,12 @@ export function TasksBarChart({ data }: TasksBarChartProps) {
         <CartesianGrid strokeDasharray="3 3" stroke="#2a2a2a" vertical={false} />
         <XAxis
           dataKey="week"
-          tick={{ fill: "#9ca3af", fontSize: 11 }}
+          tick={{ fill: "#9ca3af", fontSize: 13 }}
           axisLine={false}
           tickLine={false}
         />
         <YAxis
-          tick={{ fill: "#9ca3af", fontSize: 11 }}
+          tick={{ fill: "#9ca3af", fontSize: 13 }}
           axisLine={false}
           tickLine={false}
           allowDecimals={false}
diff --git a/components/dashboard/tasks-widget.tsx b/components/dashboard/tasks-widget.tsx
index 57a288f..1b89f92 100644
--- a/components/dashboard/tasks-widget.tsx
+++ b/components/dashboard/tasks-widget.tsx
@@ -112,48 +112,48 @@ export function TasksWidget() {
   })()
 
   return (
-    <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "12px", padding: "20px" }}>
-      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: "16px" }}>
+    <div className="widget-card">
+      <div className="widget-header">
         <div>
           <h2>Tasks Due</h2>
-          <p style={{ marginTop: "2px" }}>{rangeLabel}</p>
+          <p className="mt-0.5">{rangeLabel}</p>
         </div>
-        <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+        <div className="widget-nav-btns">
           <button
             onClick={() => setAnchorMonday((d) => addDays(d, -56))}
             disabled={isAtCurrentWindow}
-            style={{ padding: "4px", borderRadius: "4px", background: "none", border: "none", color: "var(--text-3)", cursor: isAtCurrentWindow ? "not-allowed" : "pointer", opacity: isAtCurrentWindow ? 0.3 : 1 }}
-            onMouseEnter={e => { if (!isAtCurrentWindow) { (e.currentTarget.style.background = "var(--surf-3)"); (e.currentTarget.style.color = "var(--text-1)") } }}
-            onMouseLeave={e => { (e.currentTarget.style.background = "none"); (e.currentTarget.style.color = "var(--text-3)") }}
+            className="widget-nav-btn"
+            style={{
+              cursor: isAtCurrentWindow ? "not-allowed" : "pointer",
+              opacity: isAtCurrentWindow ? 0.3 : 1,
+            }}
             aria-label="Previous 8 weeks"
           >
-            <ChevronLeft style={{ width: "14px", height: "14px" }} />
+            <ChevronLeft />
           </button>
           <button
             onClick={() => setAnchorMonday((d) => addDays(d, 56))}
-            style={{ padding: "4px", borderRadius: "4px", background: "none", border: "none", color: "var(--text-3)", cursor: "pointer" }}
-            onMouseEnter={e => { (e.currentTarget.style.background = "var(--surf-3)"); (e.currentTarget.style.color = "var(--text-1)") }}
-            onMouseLeave={e => { (e.currentTarget.style.background = "none"); (e.currentTarget.style.color = "var(--text-3)") }}
+            className="widget-nav-btn"
             aria-label="Next week"
           >
-            <ChevronRight style={{ width: "14px", height: "14px" }} />
+            <ChevronRight />
           </button>
         </div>
       </div>
 
       {loading ? (
-        <div style={{ height: "220px", display: "flex", alignItems: "center", justifyContent: "center" }}>
-          <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>Loading...</span>
+        <div className="widget-loading">
+          <span className="widget-loading-text">Loading...</span>
         </div>
       ) : (
         <TasksBarChart data={data} />
       )}
 
-      <div style={{ display: "flex", flexWrap: "wrap", gap: "4px 12px", marginTop: "12px" }}>
+      <div className="widget-legend">
         {TASK_STATUSES.map((s) => (
-          <div key={s} style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-            <span style={{ width: "8px", height: "8px", borderRadius: "50%", flexShrink: 0, backgroundColor: STATUS_COLORS[s] }} />
-            <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>{s}</span>
+          <div key={s} className="widget-legend-item">
+            <span className="widget-legend-dot" style={{ backgroundColor: STATUS_COLORS[s] }} />
+            <span className="widget-legend-label">{s}</span>
           </div>
         ))}
       </div>
diff --git a/components/dashboard/team-health-widget.tsx b/components/dashboard/team-health-widget.tsx
index e9c87e7..4e5165f 100644
--- a/components/dashboard/team-health-widget.tsx
+++ b/components/dashboard/team-health-widget.tsx
@@ -141,24 +141,19 @@ export function TeamHealthWidget() {
   const labelStyle = health ? LABEL_COLORS[health.label] : LABEL_COLORS['Healthy']
 
   return (
-    <div
-      className="bg-[#1c1c1c] border border-[#383838] rounded-xl p-5"
-      style={{ display: "flex", flexDirection: "column", gap: "14px" }}
-    >
+    <div className="health-widget-card">
       {/* Header */}
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+      <div className="flex items-center justify-between">
         <div>
           <h2>Team Health</h2>
-          <p style={{ marginTop: "2px" }}>Aggregate signal score</p>
+          <p className="mt-0.5">Aggregate signal score</p>
         </div>
         <button
           onClick={handleRefresh}
           disabled={loading}
           title="Refresh"
-          style={{
-            background: "none", border: "none", cursor: loading ? "not-allowed" : "pointer",
-            color: "var(--text-3)", padding: "4px",
-          }}
+          className="widget-refresh-btn"
+          style={{ cursor: loading ? "not-allowed" : "pointer" }}
         >
           <RefreshCw
             size={14}
@@ -168,16 +163,16 @@ export function TeamHealthWidget() {
       </div>
 
       {loading ? (
-        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
-          <div style={{ height: "40px", borderRadius: "6px", background: "var(--surf-2)", animation: "pulse 1.5s ease-in-out infinite" }} />
-          <div style={{ height: "16px", borderRadius: "4px", background: "var(--surf-2)", width: "60%", animation: "pulse 1.5s ease-in-out infinite" }} />
+        <div className="health-skeleton">
+          <div className="health-skeleton__bar health-skeleton__bar--h40" />
+          <div className="health-skeleton__bar health-skeleton__bar--h16" />
         </div>
       ) : health ? (
         <>
           {/* Score ring + label */}
-          <div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
+          <div className="health-score-row">
             {/* Score ring */}
-            <div style={{ position: "relative", width: "64px", height: "64px", flexShrink: 0 }}>
+            <div className="health-score-ring">
               <svg width="64" height="64" viewBox="0 0 64 64">
                 <circle
                   cx="32" cy="32" r="26"
@@ -195,48 +190,36 @@ export function TeamHealthWidget() {
                   transform="rotate(-90 32 32)"
                 />
               </svg>
-              <span style={{
-                position: "absolute",
-                top: "50%", left: "50%",
-                transform: "translate(-50%, -50%)",
-                fontSize: "16px",
-                fontWeight: 700,
-                color: labelStyle.color,
-              }}>
+              <span
+                className="health-score-ring__value"
+                style={{ color: labelStyle.color }}
+              >
                 {health.score}
               </span>
             </div>
 
             {/* Label + breakdown */}
-            <div style={{ flex: 1 }}>
+            <div className="flex-1">
               <span
+                className="health-label-badge"
                 style={{
-                  display: "inline-block",
-                  padding: "2px 10px",
-                  borderRadius: "20px",
-                  fontSize: "var(--text-label)",
-                  fontWeight: 600,
                   color: labelStyle.color,
                   background: labelStyle.bg,
                   border: `1px solid ${labelStyle.border}`,
-                  marginBottom: "8px",
                 }}
               >
                 {health.label}
               </span>
 
               {/* Category breakdown badges */}
-              <div style={{ display: "flex", flexWrap: "wrap", gap: "5px" }}>
+              <div className="flex flex-wrap gap-1">
                 {(Object.entries(health.breakdown) as [string, number][]).map(([key, count]) => (
                   <span
                     key={key}
+                    className="health-breakdown-badge"
                     style={{
-                      padding: "2px 8px",
-                      borderRadius: "4px",
-                      fontSize: "var(--text-caption)",
                       background: count > 0 ? "var(--surf-3)" : "var(--surf-2)",
                       color: count > 0 ? "var(--text-1)" : "var(--text-3)",
-                      border: "1px solid var(--border-2)",
                     }}
                   >
                     {BREAKDOWN_LABELS[key]}: {count}
@@ -248,20 +231,15 @@ export function TeamHealthWidget() {
 
           {/* AI Narrative */}
           {aiConfig.configured && (
-            <div style={{
-              borderRadius: "6px",
-              padding: "10px 12px",
-              background: "var(--surf-2)",
-              border: "1px solid var(--border-2)",
-            }}>
+            <div className="health-narrative">
               {narrativeLoading ? (
-                <p style={{ fontSize: "var(--text-body)", color: "var(--text-3)", fontStyle: "italic", margin: 0 }}>
+                <p className="text-body text-3 italic m-0">
                   Generating summary…
                 </p>
               ) : narrative ? (
                 <>
                   <AIGeneratedBadge onDismiss={() => setNarrative(null)} />
-                  <p style={{ fontSize: "var(--text-body)", color: "var(--text-2)", lineHeight: 1.5, margin: 0, marginTop: "4px" }}>
+                  <p className="text-body text-2 m-0 mt-1 health-narrative-text">
                     {narrative}
                   </p>
                 </>
@@ -270,26 +248,14 @@ export function TeamHealthWidget() {
           )}
 
           {/* View details link */}
-          <div style={{ display: "flex", justifyContent: "flex-end" }}>
-            <Link
-              href="/radar"
-              style={{
-                display: "inline-flex",
-                alignItems: "center",
-                gap: "4px",
-                fontSize: "var(--text-caption)",
-                color: "var(--text-3)",
-                textDecoration: "none",
-              }}
-              onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-2)")}
-              onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-3)")}
-            >
+          <div className="flex justify-end">
+            <Link href="/radar" className="health-detail-link">
               View details <ExternalLink size={10} />
             </Link>
           </div>
         </>
       ) : (
-        <p style={{ color: "var(--text-3)", fontSize: "var(--text-body)" }}>Could not load team health.</p>
+        <p className="text-body text-3">Could not load team health.</p>
       )}
     </div>
   )
diff --git a/components/dashboard/upcoming-one-on-ones.tsx b/components/dashboard/upcoming-one-on-ones.tsx
index 4d65b3f..0f49f66 100644
--- a/components/dashboard/upcoming-one-on-ones.tsx
+++ b/components/dashboard/upcoming-one-on-ones.tsx
@@ -49,126 +49,71 @@ function PrepCard({ meeting }: PrepCardProps) {
   }, [meeting.personId, loading, abortController])
 
   return (
-    <div
-      data-testid="prep-card"
-      style={{
-        background: "var(--surf)",
-        border: "1px solid var(--border-1)",
-        borderRadius: "10px",
-        overflow: "hidden",
-      }}
-    >
+    <div data-testid="prep-card" className="prep-card">
       {/* Card header */}
-      <div style={{
-        display: "flex",
-        alignItems: "center",
-        gap: "10px",
-        padding: "12px 14px",
-      }}>
+      <div className="prep-card-header">
         {/* Date chip */}
-        <span style={{
-          display: "inline-flex",
-          alignItems: "center",
-          gap: "4px",
-          padding: "2px 8px",
-          borderRadius: "4px",
-          background: isToday ? "rgba(0,255,229,0.1)" : "var(--surf-3)",
-          color: isToday ? "#00ffe5" : "var(--text-3)",
-          fontSize: "var(--text-overline)",
-          fontFamily: "var(--font-mono)",
-          fontWeight: 600,
-          flexShrink: 0,
-        }}>
-          <Calendar style={{ width: "10px", height: "10px" }} />
+        <span
+          className="date-chip"
+          style={{
+            background: isToday ? "rgba(0,255,229,0.1)" : "var(--surf-3)",
+            color: isToday ? "#00ffe5" : "var(--text-3)",
+          }}
+        >
+          <Calendar />
           {dateLabel}
         </span>
 
         {/* Person name + title */}
-        <div style={{ flex: 1, minWidth: 0 }}>
-          <div style={{
-            fontSize: "var(--text-body)",
-            fontWeight: 600,
-            color: "var(--text-1)",
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-          }}>
+        <div className="prep-card-name-wrap">
+          <div className="prep-card-name">
             {meeting.personName ?? meeting.title}
           </div>
           {meeting.personName && (
-            <div style={{
-              fontSize: "var(--text-caption)",
-              color: "var(--text-3)",
-              whiteSpace: "nowrap",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-            }}>
+            <div className="prep-card-subtitle">
               {meeting.title}
             </div>
           )}
         </div>
 
         {/* Actions */}
-        <div style={{ display: "flex", alignItems: "center", gap: "6px", flexShrink: 0 }}>
+        <div className="prep-card-actions">
           {/* Link to person page */}
           {meeting.personId && (
             <Link
               href={`/people/${meeting.personId}`}
               onClick={(e) => e.stopPropagation()}
               title="View person"
-              style={{
-                display: "inline-flex",
-                alignItems: "center",
-                padding: "4px",
-                borderRadius: "4px",
-                color: "var(--text-3)",
-                textDecoration: "none",
-              }}
-              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--text-1)")}
-              onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-3)")}
+              className="prep-card-person-link"
             >
-              <ExternalLink style={{ width: "12px", height: "12px" }} />
+              <ExternalLink />
             </Link>
           )}
 
           {/* Generate / toggle button */}
           <button
             onClick={brief ? () => setExpanded((v) => !v) : handleGenerate}
+            className="inline-flex items-center gap-1 px-2.5 py-1 rounded text-label font-medium cursor-pointer transition-all"
             style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "5px",
-              padding: "4px 10px",
-              borderRadius: "5px",
               border: "1px solid",
               borderColor: brief ? "var(--border-2)" : "#7C3AED",
               background: brief ? "transparent" : "rgba(124,58,237,0.12)",
               color: brief ? "var(--text-2)" : "#a78bfa",
-              fontSize: "var(--text-label)",
-              fontWeight: 500,
-              cursor: "pointer",
-              transition: "all 0.15s",
-            }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.color = "var(--text-1)"
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.color = brief ? "var(--text-2)" : "#a78bfa"
             }}
           >
             {loading ? (
               <>
-                <Sparkles style={{ width: "12px", height: "12px", animation: "pulse 1s infinite" }} />
+                <Sparkles className="w-3 h-3 animate-pulse" />
                 Preparing…
               </>
             ) : brief ? (
               <>
-                {expanded ? <ChevronUp style={{ width: "12px", height: "12px" }} /> : <ChevronDown style={{ width: "12px", height: "12px" }} />}
+                {expanded ? <ChevronUp className="w-3 h-3" /> : <ChevronDown className="w-3 h-3" />}
                 {expanded ? "Hide" : "View prep"}
               </>
             ) : (
               <>
-                <Sparkles style={{ width: "12px", height: "12px" }} />
+                <Sparkles className="w-3 h-3" />
                 Prep brief
               </>
             )}
@@ -178,46 +123,13 @@ function PrepCard({ meeting }: PrepCardProps) {
 
       {/* Brief content */}
       {brief && expanded && (
-        <div style={{
-          borderTop: "1px solid var(--border-1)",
-          padding: "14px 16px",
-          background: "var(--surf-2)",
-        }}>
-          <div
-            data-testid="brief-content"
-            style={{
-              fontSize: "var(--text-meta)",
-              color: "var(--text-2)",
-              lineHeight: 1.6,
-              whiteSpace: "pre-wrap",
-              maxHeight: "300px",
-              overflowY: "auto",
-            }}
-          >
+        <div className="prep-card-brief-area">
+          <div data-testid="brief-content" className="prep-card-brief-content">
             {brief.content}
           </div>
-          <div style={{
-            marginTop: "10px",
-            fontSize: "var(--text-caption)",
-            color: "var(--text-3)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-          }}>
+          <div className="prep-card-brief-footer">
             <span>Generated at {new Date(brief.generatedAt).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" })}</span>
-            <button
-              onClick={handleGenerate}
-              style={{
-                background: "none",
-                border: "none",
-                color: "var(--text-3)",
-                fontSize: "var(--text-caption)",
-                cursor: "pointer",
-                padding: 0,
-              }}
-              onMouseEnter={(e) => (e.currentTarget.style.color = "var(--text-1)")}
-              onMouseLeave={(e) => (e.currentTarget.style.color = "var(--text-3)")}
-            >
+            <button onClick={handleGenerate} className="prep-card-regen-btn">
               Regenerate
             </button>
           </div>
@@ -245,22 +157,14 @@ export function UpcomingOneOnOnes() {
   if (loading || meetings.length === 0) return null
 
   return (
-    <div
-      data-testid="upcoming-one-on-ones"
-      style={{
-        background: "var(--surf)",
-        border: "1px solid var(--border-1)",
-        borderRadius: "12px",
-        padding: "20px",
-      }}
-    >
+    <div data-testid="upcoming-one-on-ones" className="one-on-ones-widget">
       {/* Header */}
-      <div style={{ marginBottom: "14px" }}>
-        <h2 style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <Sparkles style={{ width: "15px", height: "15px", color: "#a78bfa" }} />
+      <div className="one-on-ones-header">
+        <h2 className="one-on-ones-title">
+          <Sparkles />
           Upcoming 1:1s
         </h2>
-        <p style={{ marginTop: "2px", fontSize: "var(--text-meta)", color: "var(--text-3)" }}>
+        <p className="one-on-ones-sub">
           {meetings.length === 1
             ? "You have 1 upcoming 1:1. Generate a prep brief to get ready."
             : `You have ${meetings.length} upcoming 1:1s. Generate prep briefs to get ready.`}
@@ -268,7 +172,7 @@ export function UpcomingOneOnOnes() {
       </div>
 
       {/* Cards */}
-      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+      <div className="prep-cards">
         {meetings.map((meeting) => (
           <PrepCard key={meeting.id} meeting={meeting} />
         ))}
diff --git a/components/dashboard/weekly-review-banner.tsx b/components/dashboard/weekly-review-banner.tsx
index 6276cfa..d1040b7 100644
--- a/components/dashboard/weekly-review-banner.tsx
+++ b/components/dashboard/weekly-review-banner.tsx
@@ -35,18 +35,8 @@ export function WeeklyReviewBanner() {
   // Completed — show subtle badge
   if (review?.status === 'completed') {
     return (
-      <div style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        padding: '10px 14px',
-        background: '#0d1f14',
-        border: '1px solid #1a3a25',
-        borderRadius: '8px',
-        fontSize: 'var(--text-meta)',
-        color: '#00c44a',
-      }}>
-        <CheckCircle style={{ width: '13px', height: '13px' }} />
+      <div className="review-banner-done">
+        <CheckCircle />
         Week reviewed ✓
       </div>
     )
@@ -59,28 +49,16 @@ export function WeeklyReviewBanner() {
   // In-progress review
   if (review?.status === 'in_progress') {
     return (
-      <Link href="/review" style={{ textDecoration: 'none' }}>
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '10px',
-          padding: '12px 16px',
-          background: '#1a1a2e',
-          border: '1px solid #2a2a4a',
-          borderRadius: '8px',
-          cursor: 'pointer',
-          transition: 'border-color 0.15s',
-        }}>
-          <div style={{ flex: 1 }}>
-            <div style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-1)', marginBottom: '2px' }}>
-              Continue your weekly review
-            </div>
-            <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-2)' }}>
-              {signalCount > 0 ? `${signalCount} item${signalCount === 1 ? '' : 's'} remaining` : 'Pick up where you left off'}
-            </div>
+      <Link href="/review" className="review-banner review-banner--progress">
+        <div className="review-banner__body">
+          <div className="review-banner__title">
+            Continue your weekly review
+          </div>
+          <div className="review-banner__sub">
+            {signalCount > 0 ? `${signalCount} item${signalCount === 1 ? '' : 's'} remaining` : 'Pick up where you left off'}
           </div>
-          <ArrowRight style={{ width: '14px', height: '14px', color: 'var(--text-3)' }} />
         </div>
+        <ArrowRight className="review-banner__arrow" />
       </Link>
     )
   }
@@ -88,27 +66,16 @@ export function WeeklyReviewBanner() {
   // No review yet — prompt on Mon/Tue/Wed
   if (!review && isEarlyWeek) {
     return (
-      <Link href="/review" style={{ textDecoration: 'none' }}>
-        <div style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '10px',
-          padding: '12px 16px',
-          background: 'linear-gradient(135deg, #0f1f15 0%, #1a1a2e 100%)',
-          border: '1px solid #2a3a30',
-          borderRadius: '8px',
-          cursor: 'pointer',
-        }}>
-          <div style={{ flex: 1 }}>
-            <div style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-1)', marginBottom: '2px' }}>
-              Start your weekly review
-            </div>
-            <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-2)' }}>
-              {signalCount > 0 ? `${signalCount} signal${signalCount === 1 ? '' : 's'} to check` : 'Review your week and close the loop'}
-            </div>
+      <Link href="/review" className="review-banner review-banner--new">
+        <div className="review-banner__body">
+          <div className="review-banner__title">
+            Start your weekly review
+          </div>
+          <div className="review-banner__sub">
+            {signalCount > 0 ? `${signalCount} signal${signalCount === 1 ? '' : 's'} to check` : 'Review your week and close the loop'}
           </div>
-          <ArrowRight style={{ width: '14px', height: '14px', color: 'var(--text-3)' }} />
         </div>
+        <ArrowRight className="review-banner__arrow" />
       </Link>
     )
   }
diff --git a/components/evidence/__tests__/evidence-section.test.tsx b/components/evidence/__tests__/evidence-section.test.tsx
index d09ccbb..acc65c3 100644
--- a/components/evidence/__tests__/evidence-section.test.tsx
+++ b/components/evidence/__tests__/evidence-section.test.tsx
@@ -142,7 +142,7 @@ describe('EvidenceSection', () => {
     render(<EvidenceSection personId="person-1" personName="Alice Smith" />)
     const user = userEvent.setup()
     await waitFor(() => screen.getByText('Shipped new feature'))
-    await user.click(screen.getByText('Shipped new feature').closest('div[style]')!)
+    await user.click(screen.getByTestId('evidence-entry-row'))
     await waitFor(() => {
       expect(screen.getByText('Delivered ahead of schedule')).toBeInTheDocument()
     })
@@ -154,8 +154,10 @@ describe('EvidenceSection', () => {
     const user = userEvent.setup()
     await waitFor(() => screen.getByText('Shipped new feature'))
     // Expand the entry first
-    await user.click(screen.getByText('Shipped new feature').closest('div[style]')!)
-    await waitFor(() => screen.getByRole('button', { name: /Delete/i }))
+    await user.click(screen.getByTestId('evidence-entry-row'))
+    await waitFor(() => {
+      expect(screen.getByText('Delivered ahead of schedule')).toBeInTheDocument()
+    })
     await user.click(screen.getByRole('button', { name: /Delete/i }))
     await waitFor(() => {
       expect(deleteEvidence).toHaveBeenCalledWith('ev-1')
@@ -176,9 +178,7 @@ describe('EvidenceSection', () => {
     vi.mocked(getEvidenceForPerson).mockResolvedValue([entryWithMeeting])
     render(<EvidenceSection personId="person-1" personName="Alice Smith" />)
     await waitFor(() => {
-      // Link2 icon rendered on the row
-      const row = screen.getByText('Shipped new feature').closest('div[style]')!
-      expect(row).toBeInTheDocument()
+      expect(screen.getByTitle('Linked to meeting: 1:1 with Alice')).toBeInTheDocument()
     })
   })
 })
diff --git a/components/evidence/batch-evidence-import-modal.tsx b/components/evidence/batch-evidence-import-modal.tsx
index 10a3e20..b7d51be 100644
--- a/components/evidence/batch-evidence-import-modal.tsx
+++ b/components/evidence/batch-evidence-import-modal.tsx
@@ -236,11 +236,11 @@ export function BatchEvidenceImportModal({
 
         {step === 'input' && (
           <>
-            <div style={{ display: "flex", flexDirection: "column", gap: "12px", padding: "4px 0" }}>
+            <div className="batch-input-area">
               <div>
-                <Label htmlFor="paste-input" style={{ display: "flex", justifyContent: "space-between" }}>
+                <Label htmlFor="paste-input" className="batch-label-row">
                   <span>Text to extract from</span>
-                  <span style={{ color: text.length > MAX_TEXT_LENGTH ? "#f87171" : "var(--text-3)", fontSize: "var(--text-caption)" }}>
+                  <span className={`batch-char-count ${text.length > MAX_TEXT_LENGTH ? "batch-char-count--over" : "batch-char-count--ok"}`}>
                     {text.length}/{MAX_TEXT_LENGTH}
                   </span>
                 </Label>
@@ -250,18 +250,18 @@ export function BatchEvidenceImportModal({
                   onChange={e => setText(e.target.value)}
                   placeholder="Paste Slack messages, email content, performance notes, or any text containing observations about your team..."
                   rows={10}
-                  style={{ marginTop: "6px", fontFamily: "var(--font-mono)", fontSize: "var(--text-caption)" }}
+                  className="batch-textarea"
                 />
               </div>
 
               {contextPersonName && (
-                <p style={{ fontSize: "var(--text-label)", color: "var(--text-3)" }}>
-                  Context: entries will be attributed to <strong style={{ color: "var(--text-2)" }}>{contextPersonName}</strong> unless another name is found.
+                <p className="batch-context-hint">
+                  Context: entries will be attributed to <strong className="batch-context-name">{contextPersonName}</strong> unless another name is found.
                 </p>
               )}
 
               {error && (
-                <div style={{ display: "flex", alignItems: "center", gap: "6px", color: "#f87171", fontSize: "var(--text-label)" }}>
+                <div className="batch-extract-error">
                   <AlertCircle size={13} /> {error}
                 </div>
               )}
@@ -269,13 +269,10 @@ export function BatchEvidenceImportModal({
 
             <DialogFooter>
               <Button variant="outline" onClick={handleClose}>Cancel</Button>
-              <Button
-                onClick={handleExtract}
-                disabled={extracting || !text.trim()}
-              >
+              <Button onClick={handleExtract} disabled={extracting || !text.trim()}>
                 {extracting
-                  ? <><Loader2 size={13} style={{ marginRight: 6, animation: "spin 1s linear infinite" }} /> Extracting…</>
-                  : <><Upload size={13} style={{ marginRight: 6 }} /> Extract Evidence</>
+                  ? <><Loader2 size={13} className="batch-btn-spinner" /> Extracting…</>
+                  : <><Upload size={13} className="batch-btn-icon" /> Extract Evidence</>
                 }
               </Button>
             </DialogFooter>
@@ -284,78 +281,57 @@ export function BatchEvidenceImportModal({
 
         {step === 'preview' && (
           <>
-            <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+            <div className="batch-preview-area">
               {/* Toolbar */}
-              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
-                <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
-                  <button
-                    type="button"
-                    onClick={() => toggleAll(true)}
-                    style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", background: "none", border: "none", cursor: "pointer", padding: "2px 6px" }}
-                  >
-                    Select all
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => toggleAll(false)}
-                    style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", background: "none", border: "none", cursor: "pointer", padding: "2px 6px" }}
-                  >
-                    Deselect all
-                  </button>
+              <div className="batch-toolbar">
+                <div className="batch-toolbar-btns">
+                  <button type="button" onClick={() => toggleAll(true)} className="batch-toolbar-btn">Select all</button>
+                  <button type="button" onClick={() => toggleAll(false)} className="batch-toolbar-btn">Deselect all</button>
                 </div>
-                <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-                  {selectedCount} selected · {saveable} will save
-                </span>
+                <span className="batch-toolbar-count">{selectedCount} selected · {saveable} will save</span>
               </div>
 
               {/* Preview table */}
-              <div style={{
-                maxHeight: "420px",
-                overflowY: "auto",
-                border: "1px solid var(--border-2)",
-                borderRadius: "8px",
-              }}>
+              <div className="batch-table">
                 {rows.length === 0 ? (
-                  <div style={{ padding: "24px", textAlign: "center", color: "var(--text-3)" }}>
-                    No evidence entries extracted.
-                  </div>
+                  <div className="batch-empty">No evidence entries extracted.</div>
                 ) : rows.map((row) => (
                   <div
                     key={row._key}
+                    className="batch-row"
                     style={{
-                      padding: "12px 14px",
-                      borderBottom: "1px solid var(--border-1)",
                       background: row.selected ? "var(--surf)" : "var(--surf-2)",
                       opacity: row.selected ? 1 : 0.5,
                     }}
                   >
-                    <div style={{ display: "flex", alignItems: "flex-start", gap: "10px" }}>
+                    <div className="batch-row-inner">
                       {/* Checkbox */}
                       <button
                         type="button"
                         onClick={() => updateRow(row._key, { selected: !row.selected })}
-                        style={{ background: "none", border: "none", cursor: "pointer", color: row.selected ? "#00f058" : "var(--text-3)", padding: "2px", flexShrink: 0, marginTop: "2px" }}
+                        className="batch-row-checkbox"
+                        style={{ color: row.selected ? "#00f058" : "var(--text-3)" }}
                       >
                         {row.selected ? <CheckSquare size={16} /> : <Square size={16} />}
                       </button>
 
-                      <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: "8px" }}>
+                      <div className="batch-row-fields">
                         {/* Title */}
                         <Input
                           value={row.title}
                           onChange={e => updateRow(row._key, { title: e.target.value })}
-                          style={{ fontSize: "var(--text-label)", fontWeight: 600 }}
+                          className="batch-row-title-input"
                           placeholder="Title"
                         />
 
                         {/* Row 2: category, sentiment, date, person */}
-                        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 140px 1fr", gap: "6px" }}>
+                        <div className="batch-row-grid">
                           {/* Category */}
                           <Select
                             value={row.category ?? 'general'}
                             onValueChange={val => updateRow(row._key, { category: val as EvidenceCategory })}
                           >
-                            <SelectTrigger style={{ fontSize: "var(--text-caption)" }}>
+                            <SelectTrigger className="batch-row-select-trigger">
                               <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
@@ -387,7 +363,7 @@ export function BatchEvidenceImportModal({
                             type="date"
                             value={row.occurredAt}
                             onChange={e => updateRow(row._key, { occurredAt: e.target.value })}
-                            style={{ fontSize: "var(--text-caption)" }}
+                            className="batch-row-select-trigger"
                           />
 
                           {/* Person */}
@@ -413,16 +389,14 @@ export function BatchEvidenceImportModal({
 
                         {/* Ambiguity warning */}
                         {row.ambiguous && (
-                          <p style={{ fontSize: "var(--text-caption)", color: "#fbbf24", margin: 0 }}>
-                            ⚠ Could not match "{row.personName}" — please select a person manually.
+                          <p className="batch-row-warn">
+                            ⚠ Could not match &ldquo;{row.personName}&rdquo; — please select a person manually.
                           </p>
                         )}
 
                         {/* Missing person warning */}
                         {!row.personId && !row.ambiguous && row.selected && (
-                          <p style={{ fontSize: "var(--text-caption)", color: "#f87171", margin: 0 }}>
-                            Person required — this entry will not be saved.
-                          </p>
+                          <p className="batch-row-err">Person required — this entry will not be saved.</p>
                         )}
                       </div>
                     </div>
@@ -432,15 +406,10 @@ export function BatchEvidenceImportModal({
             </div>
 
             <DialogFooter>
-              <Button variant="outline" onClick={() => setStep('input')}>
-                ← Back
-              </Button>
-              <Button
-                onClick={handleSave}
-                disabled={saving || saveable === 0}
-              >
+              <Button variant="outline" onClick={() => setStep('input')}>← Back</Button>
+              <Button onClick={handleSave} disabled={saving || saveable === 0}>
                 {saving
-                  ? <><Loader2 size={13} style={{ marginRight: 6, animation: "spin 1s linear infinite" }} /> Saving…</>
+                  ? <><Loader2 size={13} className="batch-btn-spinner" /> Saving…</>
                   : `Save ${saveable} entr${saveable === 1 ? 'y' : 'ies'}`
                 }
               </Button>
diff --git a/components/evidence/evidence-section.tsx b/components/evidence/evidence-section.tsx
index a9a3161..a4c62f4 100644
--- a/components/evidence/evidence-section.tsx
+++ b/components/evidence/evidence-section.tsx
@@ -196,64 +196,61 @@ export function EvidenceSection({
     new Date(d).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })
 
   return (
-    <div style={{ background: "var(--surf)", border: "1px solid var(--border-1)", borderRadius: "8px", overflow: "hidden" }}>
+    <div className="evidence-section">
       {/* Header */}
-      <div style={{ padding: "16px 20px", borderBottom: "1px solid var(--border-1)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+      <div className="evidence-header">
         <div>
           <h2>Evidence</h2>
-          <p style={{ marginTop: "2px" }}>
+          <p className="mt-0.5">
             {entries.length} {entries.length === 1 ? "entry" : "entries"} logged for {personName}
           </p>
         </div>
-        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
-          <a
-            href={`/people/${personId}/review`}
-            style={{ display: "inline-flex", alignItems: "center", gap: "4px", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, color: "var(--text-2)", border: "1px solid var(--border-2)", background: "var(--surf-2)", textDecoration: "none", cursor: "pointer" }}
-          >
+        <div className="evidence-header-actions">
+          <a href={`/people/${personId}/review`} className="evidence-header-btn">
             Review Prep
           </a>
           <button
             onClick={() => setBatchImportOpen(true)}
-            style={{ display: "inline-flex", alignItems: "center", gap: "4px", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, color: "var(--text-2)", border: "1px solid var(--border-2)", background: "var(--surf-2)", cursor: "pointer", fontFamily: "var(--font-sans)" }}
+            className="evidence-header-btn"
             title="Import multiple evidence entries from pasted text"
           >
-            <FileText style={{ width: "11px", height: "11px" }} /> Import from text
+            <FileText /> Import from text
           </button>
           <button
             onClick={() => { setShowForm(true); setLinkedMeetingId(undefined) }}
-            style={{ display: "inline-flex", alignItems: "center", gap: "4px", background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)", border: "none", color: "#0a1a0a", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-caption)", fontWeight: 600, cursor: "pointer", fontFamily: "var(--font-sans)" }}
+            className="evidence-add-btn"
           >
-            <Plus style={{ width: "11px", height: "11px" }} /> Add Evidence
+            <Plus /> Add Evidence
           </button>
         </div>
       </div>
 
       {/* Quick-add form */}
       {showForm && (
-        <div style={{ padding: "20px 24px", borderBottom: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
-          <div style={{ display: "grid", gap: "14px" }}>
+        <div className="evidence-form">
+          <div className="evidence-form-grid">
             {/* Row 1: category + date */}
-            <div style={{ display: "grid", gridTemplateColumns: "1fr 180px", gap: "12px" }}>
-              <div style={{ display: "grid", gap: "4px" }}>
+            <div className="evidence-form-row-2col">
+              <div className="evidence-form-field">
                 <label className="form-label">Category</label>
                 <select
                   value={form.category}
                   onChange={e => setForm({ ...form, category: e.target.value as EvidenceCategory })}
-                  style={{ background: "var(--surf)", border: "1px solid var(--border-2)", borderRadius: "6px", color: "var(--text-1)", padding: "6px 10px", fontSize: "var(--text-label)", cursor: "pointer" }}
+                  className="evidence-form-select"
                 >
                   {CATEGORIES.map(c => (
                     <option key={c} value={c}>{CATEGORY_LABELS[c]}</option>
                   ))}
                 </select>
               </div>
-              <div style={{ display: "grid", gap: "4px" }}>
+              <div className="evidence-form-field">
                 <label className="form-label">Date</label>
                 <Input type="date" value={form.occurredAt} onChange={e => setForm({ ...form, occurredAt: e.target.value })} />
               </div>
             </div>
 
             {/* Row 2: title */}
-            <div style={{ display: "grid", gap: "4px" }}>
+            <div className="evidence-form-field">
               <label className="form-label">Title *</label>
               <Input
                 value={form.title}
@@ -264,7 +261,7 @@ export function EvidenceSection({
             </div>
 
             {/* Row 3: content */}
-            <div style={{ display: "grid", gap: "4px" }}>
+            <div className="evidence-form-field">
               <label className="form-label">Notes (optional)</label>
               <MarkdownTextarea
                 value={form.content}
@@ -275,10 +272,10 @@ export function EvidenceSection({
             </div>
 
             {/* Row 4: sentiment + linked meeting notice + actions */}
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }}>
-              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                <label className="form-label" style={{ margin: 0 }}>Sentiment</label>
-                <div style={{ display: "flex", gap: "4px" }}>
+            <div className="evidence-form-footer">
+              <div className="evidence-form-footer-left">
+                <label className="form-label form-label--no-margin">Sentiment</label>
+                <div className="evidence-sentiment-btns">
                   {SENTIMENTS.map(s => {
                     const cfg = SENTIMENT_CONFIG[s]
                     const active = form.sentiment === s
@@ -297,12 +294,12 @@ export function EvidenceSection({
                   })}
                 </div>
                 {linkedMeetingId && (
-                  <span style={{ display: "inline-flex", alignItems: "center", gap: "4px", fontSize: "var(--text-caption)", color: "#60a5fa" }}>
-                    <Link2 style={{ width: "11px", height: "11px" }} /> Linked to meeting
+                  <span className="evidence-linked-meeting">
+                    <Link2 /> Linked to meeting
                   </span>
                 )}
               </div>
-              <div style={{ display: "flex", gap: "8px" }}>
+              <div className="evidence-form-footer-right">
                 <Button variant="outline" onClick={() => { setShowForm(false); setForm(emptyForm()); setLinkedMeetingId(undefined) }}>Cancel</Button>
                 <Button onClick={handleSubmit} disabled={!form.title.trim() || saving}>
                   {saving ? "Saving..." : "Save Evidence"}
@@ -314,14 +311,12 @@ export function EvidenceSection({
       )}
 
       {/* Timeline */}
-      <div style={{ padding: "12px 0", minHeight: "120px" }}>
+      <div className="evidence-timeline">
         {entries.length === 0 && !showForm ? (
-          <div style={{ padding: "40px 24px", textAlign: "center" }}>
-            <p style={{ color: "var(--text-3)", marginBottom: "12px" }}>
-              No evidence logged yet. Start capturing achievements, feedback, and observations throughout the year.
-            </p>
+          <div className="evidence-empty">
+            <p>No evidence logged yet. Start capturing achievements, feedback, and observations throughout the year.</p>
             <Button onClick={() => setShowForm(true)}>
-              <Plus style={{ width: "14px", height: "14px" }} /> Add First Entry
+              <Plus className="evidence-plus-icon" /> Add First Entry
             </Button>
           </div>
         ) : (
@@ -332,79 +327,74 @@ export function EvidenceSection({
             const isEditing = editingId === entry.id
 
             return (
-              <div key={entry.id} style={{ borderBottom: "1px solid var(--border-1)", transition: "background 0.1s" }}>
+              <div key={entry.id} className="evidence-entry">
                 {/* Entry row */}
                 <div
-                  style={{ padding: "10px 20px", display: "flex", alignItems: "center", gap: "10px", cursor: "pointer" }}
+                  data-testid="evidence-entry-row"
+                  className="evidence-entry-row"
                   onClick={() => setExpandedId(isExpanded ? null : entry.id)}
-                  onMouseEnter={e => (e.currentTarget.style.background = "#292929")}
-                  onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
                 >
                   {isExpanded
-                    ? <ChevronDown style={{ width: "12px", height: "12px", color: "var(--text-3)", flexShrink: 0 }} />
-                    : <ChevronRight style={{ width: "12px", height: "12px", color: "var(--text-3)", flexShrink: 0 }} />}
+                    ? <ChevronDown className="evidence-entry-chevron" />
+                    : <ChevronRight className="evidence-entry-chevron" />}
 
                   {/* Category badge */}
-                  <span style={{ padding: "2px 7px", borderRadius: "3px", fontSize: "var(--text-caption)", fontWeight: 600, background: cat.bg, color: cat.color, flexShrink: 0 }}>
+                  <span className="evidence-cat-badge" style={{ background: cat.bg, color: cat.color }}>
                     {CATEGORY_LABELS[entry.category]}
                   </span>
 
                   {/* Title */}
-                  <span style={{ flex: 1, fontSize: "var(--text-label)", color: "var(--text-1)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                    {entry.title}
-                  </span>
+                  <span className="evidence-entry-title">{entry.title}</span>
 
                   {/* Sentiment */}
                   {sent && (
-                    <span style={{ fontSize: "var(--text-caption)", color: sent.color, flexShrink: 0 }}>
+                    <span className="evidence-sentiment" style={{ color: sent.color }}>
                       {sent.symbol} {sent.label}
                     </span>
                   )}
 
                   {/* Date */}
-                  <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", flexShrink: 0, minWidth: "90px", textAlign: "right" }}>
-                    {formatDate(entry.occurredAt)}
-                  </span>
+                  <span className="evidence-date">{formatDate(entry.occurredAt)}</span>
 
                   {/* Meeting link indicator */}
                   {entry.meetingId && (
-                    <span title={`Linked to meeting: ${entry.meetingTitle ?? entry.meetingId}`} style={{ color: "#60a5fa" }}>
-                      <Link2 style={{ width: "12px", height: "12px" }} />
+                    <span title={`Linked to meeting: ${entry.meetingTitle ?? entry.meetingId}`} className="evidence-meeting-link">
+                      <Link2 />
                     </span>
                   )}
                 </div>
 
                 {/* Expanded content */}
                 {isExpanded && (
-                  <div style={{ padding: "12px 20px 16px 42px", borderTop: "1px solid var(--border-1)", background: "var(--surf-2)" }}>
+                  <div className="evidence-expanded">
                     {isEditing ? (
-                      <div style={{ display: "grid", gap: "12px" }}>
-                        <div style={{ display: "grid", gridTemplateColumns: "1fr 180px", gap: "12px" }}>
-                          <div style={{ display: "grid", gap: "4px" }}>
+                      <div className="evidence-form-grid">
+                        <div className="evidence-form-row-2col">
+                          <div className="evidence-form-field">
                             <label className="form-label">Category</label>
                             <select
                               value={editForm.category}
                               onChange={e => setEditForm({ ...editForm, category: e.target.value as EvidenceCategory })}
-                              style={{ background: "var(--surf)", border: "1px solid var(--border-2)", borderRadius: "6px", color: "var(--text-1)", padding: "6px 10px", fontSize: "var(--text-label)", cursor: "pointer" }}
+                              className="evidence-form-select"
                             >
                               {CATEGORIES.map(c => <option key={c} value={c}>{CATEGORY_LABELS[c]}</option>)}
                             </select>
                           </div>
-                          <div style={{ display: "grid", gap: "4px" }}>
+                          <div className="evidence-form-field">
                             <label className="form-label">Date</label>
                             <Input type="date" value={editForm.occurredAt} onChange={e => setEditForm({ ...editForm, occurredAt: e.target.value })} />
                           </div>
                         </div>
-                        <div style={{ display: "grid", gap: "4px" }}>
+                        <div className="evidence-form-field">
                           <label className="form-label">Title</label>
                           <Input value={editForm.title} onChange={e => setEditForm({ ...editForm, title: e.target.value })} />
                         </div>
-                        <div style={{ display: "grid", gap: "4px" }}>
+                        <div className="evidence-form-field">
                           <label className="form-label">Notes</label>
                           <MarkdownTextarea value={editForm.content} onValueChange={v => setEditForm({ ...editForm, content: v })} rows={3} />
                         </div>
-                        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "12px" }}>
-                          <div style={{ display: "flex", gap: "4px" }}>
+                        <div className="evidence-form-footer">
+                          <div className="evidence-sentiment-btns">
                             {SENTIMENTS.map(s => {
                               const cfg = SENTIMENT_CONFIG[s]
                               const active = editForm.sentiment === s
@@ -416,10 +406,10 @@ export function EvidenceSection({
                               )
                             })}
                           </div>
-                          <div style={{ display: "flex", gap: "8px" }}>
+                          <div className="evidence-form-footer-right">
                             <Button variant="outline" onClick={() => setEditingId(null)}>Cancel</Button>
                             <Button onClick={() => handleSaveEdit(entry.id)} disabled={saving}>
-                              <Check style={{ width: "13px", height: "13px" }} /> Save
+                              <Check className="evidence-check-icon" /> Save
                             </Button>
                           </div>
                         </div>
@@ -427,24 +417,24 @@ export function EvidenceSection({
                     ) : (
                       <div>
                         {entry.content ? (
-                          <p style={{ fontSize: "var(--text-label)", color: "var(--text-2)", whiteSpace: "pre-wrap", marginBottom: "12px" }}>{entry.content}</p>
+                          <p className="evidence-content">{entry.content}</p>
                         ) : (
-                          <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", fontStyle: "italic", marginBottom: "12px" }}>No additional notes.</p>
+                          <p className="evidence-no-notes">No additional notes.</p>
                         )}
                         {entry.meetingTitle && (
-                          <p style={{ fontSize: "var(--text-caption)", color: "#60a5fa", marginBottom: "12px" }}>
-                            <Link2 style={{ width: "11px", height: "11px", display: "inline", marginRight: "4px" }} />
+                          <p className="evidence-meeting-ref">
+                            <Link2 />
                             Meeting: {entry.meetingTitle}
                           </p>
                         )}
-                        <div style={{ display: "flex", gap: "8px" }}>
+                        <div className="evidence-row-actions">
                           <Button variant="outline" onClick={() => handleStartEdit(entry)}>Edit</Button>
                           <button
                             onClick={() => handleDelete(entry.id)}
                             disabled={deletingId === entry.id}
-                            style={{ display: "inline-flex", alignItems: "center", gap: "4px", padding: "4px 10px", borderRadius: "4px", fontSize: "var(--text-label)", border: "1px solid #7f1d1d", background: "transparent", color: "#f87171", cursor: deletingId === entry.id ? "not-allowed" : "pointer", opacity: deletingId === entry.id ? 0.6 : 1 }}
+                            className="evidence-delete-btn"
                           >
-                            <Trash2 style={{ width: "13px", height: "13px" }} />
+                            <Trash2 />
                             {deletingId === entry.id ? "Deleting..." : "Delete"}
                           </button>
                         </div>
diff --git a/components/evidence/log-evidence-modal.tsx b/components/evidence/log-evidence-modal.tsx
index 7eced3f..5d5624b 100644
--- a/components/evidence/log-evidence-modal.tsx
+++ b/components/evidence/log-evidence-modal.tsx
@@ -135,7 +135,7 @@ export function LogEvidenceModal({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent style={{ maxWidth: "520px" }}>
+      <DialogContent className="log-evidence-dialog">
         <DialogHeader>
           <DialogTitle>Log as Evidence</DialogTitle>
           <DialogDescription>
@@ -144,18 +144,22 @@ export function LogEvidenceModal({
         </DialogHeader>
 
         {/* Linked meeting indicator */}
-        <div style={{ display: "inline-flex", alignItems: "center", gap: "6px", padding: "6px 10px", borderRadius: "4px", background: "var(--surf-2)", border: "1px solid var(--border-2)", fontSize: "var(--text-caption)", color: "#60a5fa" }}>
-          <Link2 style={{ width: "12px", height: "12px" }} />
+        <div className="log-evidence-meeting-link">
+          <Link2 />
           {meetingTitle} · {new Date(meetingDate).toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" })}
         </div>
 
-        <div style={{ display: "grid", gap: "14px", paddingTop: "4px" }}>
+        <div className="log-evidence-grid">
           {/* Person selector — shown if no pre-resolved person */}
           {!personId && (
-            <div style={{ display: "grid", gap: "4px" }}>
+            <div className="log-evidence-person-field">
               <label className="form-label">Person *</label>
-              <select value={resolvedPersonId} onChange={e => setResolvedPersonId(e.target.value)}
-                style={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", color: resolvedPersonId ? "var(--text-1)" : "var(--text-3)", padding: "6px 10px", fontSize: "var(--text-label)", cursor: "pointer" }}>
+              <select
+                value={resolvedPersonId}
+                onChange={e => setResolvedPersonId(e.target.value)}
+                className="evidence-form-select"
+                style={{ color: resolvedPersonId ? "var(--text-1)" : "var(--text-3)" }}
+              >
                 <option value="">Select person...</option>
                 {availablePeople.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
               </select>
@@ -163,38 +167,41 @@ export function LogEvidenceModal({
           )}
 
           {personName && (
-            <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-              Evidence will be logged for <strong style={{ color: "var(--text-1)" }}>{personName}</strong>
+            <p className="log-evidence-person-hint">
+              Evidence will be logged for <strong className="log-evidence-person-name">{personName}</strong>
             </p>
           )}
 
-          <div style={{ display: "grid", gridTemplateColumns: "1fr 160px", gap: "12px" }}>
-            <div style={{ display: "grid", gap: "4px" }}>
-              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                <label className="form-label" style={{ margin: 0 }}>Category</label>
+          <div className="log-evidence-row-2col">
+            <div className="log-evidence-field">
+              <div className="log-evidence-cat-row">
+                <label className="form-label form-label--no-margin">Category</label>
                 {aiConfig.configured && title.trim().length >= 10 && (
                   <button
                     type="button"
                     onClick={handleSuggestCategory}
                     disabled={suggesting}
-                    style={{ fontSize: "var(--text-caption)", color: suggesting ? "var(--text-3)" : "#00f058", background: "none", border: "none", cursor: suggesting ? "not-allowed" : "pointer", padding: 0, fontFamily: "var(--font-sans)" }}
+                    className={`log-evidence-suggest-btn ${suggesting ? "log-evidence-suggest-btn--loading" : "log-evidence-suggest-btn--active"}`}
                   >
                     {suggesting ? "Suggesting…" : "✦ Suggest"}
                   </button>
                 )}
               </div>
-              <select value={category} onChange={e => setCategory(e.target.value as EvidenceCategory)}
-                style={{ background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "6px", color: "var(--text-1)", padding: "6px 10px", fontSize: "var(--text-label)", cursor: "pointer" }}>
+              <select
+                value={category}
+                onChange={e => setCategory(e.target.value as EvidenceCategory)}
+                className="evidence-form-select"
+              >
                 {CATEGORIES.map(c => <option key={c} value={c}>{CATEGORY_LABELS[c]}</option>)}
               </select>
             </div>
-            <div style={{ display: "grid", gap: "4px" }}>
+            <div className="log-evidence-field">
               <label className="form-label">Date</label>
               <Input type="date" value={occurredAt} onChange={e => setOccurredAt(e.target.value)} />
             </div>
           </div>
 
-          <div style={{ display: "grid", gap: "4px" }}>
+          <div className="log-evidence-field">
             <label className="form-label">Title *</label>
             <Input
               value={title}
@@ -204,13 +211,13 @@ export function LogEvidenceModal({
             />
           </div>
 
-          <div style={{ display: "grid", gap: "4px" }}>
+          <div className="log-evidence-field">
             <label className="form-label">Notes (optional)</label>
             <MarkdownTextarea value={content} onValueChange={setContent} placeholder="Add context or specifics..." rows={3} />
           </div>
 
-          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-            <label className="form-label" style={{ margin: 0 }}>Sentiment</label>
+          <div className="log-evidence-sentiment-row">
+            <label className="form-label form-label--no-margin">Sentiment</label>
             {SENTIMENTS.map(s => {
               const cfg = SENTIMENT_CONFIG[s]
               const active = sentiment === s
@@ -223,7 +230,7 @@ export function LogEvidenceModal({
             })}
           </div>
 
-          <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px", paddingTop: "4px" }}>
+          <div className="log-evidence-footer">
             <Button variant="outline" onClick={() => onOpenChange(false)}>Cancel</Button>
             <Button onClick={handleSave} disabled={!title.trim() || (!personId && !resolvedPersonId) || saving}>
               {saving ? "Saving..." : "Save Evidence"}
diff --git a/components/evidence/sentiment-trend-chart.tsx b/components/evidence/sentiment-trend-chart.tsx
index 1426432..ca8912b 100644
--- a/components/evidence/sentiment-trend-chart.tsx
+++ b/components/evidence/sentiment-trend-chart.tsx
@@ -23,27 +23,12 @@ function Tooltip({ bucket }: { bucket: WeeklySentimentBucket }) {
   const date = new Date(bucket.weekStart + "T00:00:00")
   const label = date.toLocaleDateString("en-GB", { day: "numeric", month: "short" })
   return (
-    <div style={{
-      position: "absolute",
-      bottom: "calc(100% + 6px)",
-      left: "50%",
-      transform: "translateX(-50%)",
-      background: "var(--surf-3)",
-      border: "1px solid var(--border-2)",
-      borderRadius: "4px",
-      padding: "6px 8px",
-      fontSize: "11px",
-      color: "var(--text-1)",
-      whiteSpace: "nowrap",
-      zIndex: 10,
-      pointerEvents: "none",
-      lineHeight: 1.5,
-    }}>
-      <div style={{ fontWeight: 600, marginBottom: "2px" }}>w/c {label}</div>
+    <div className="sentiment-tooltip">
+      <div className="sentiment-tooltip-week">w/c {label}</div>
       <div style={{ color: COLORS.positive }}>↑ {bucket.positive} positive</div>
       <div style={{ color: COLORS.neutral }}>– {bucket.neutral} neutral</div>
       <div style={{ color: COLORS.negative }}>↓ {bucket.negative} negative</div>
-      <div style={{ color: "var(--text-3)", marginTop: "2px" }}>{bucket.total} total</div>
+      <div className="sentiment-tooltip-total">{bucket.total} total</div>
     </div>
   )
 }
@@ -61,35 +46,19 @@ function StackedBar({ bucket, maxTotal }: { bucket: WeeklySentimentBucket; maxTo
 
   return (
     <div
-      style={{
-        position: "relative",
-        width: `${BAR_WIDTH}px`,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "flex-end",
-        height: `${BAR_HEIGHT}px`,
-        cursor: "default",
-      }}
+      className="sentiment-stacked-bar"
+      style={{ width: `${BAR_WIDTH}px`, height: `${BAR_HEIGHT}px` }}
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
       {hovered && !empty && <Tooltip bucket={bucket} />}
       {empty ? (
-        <div style={{
-          height: "2px",
-          background: "var(--border-2)",
-          borderRadius: "1px",
-          opacity: 0.4,
-        }} />
+        <div className="sentiment-bar-empty" />
       ) : (
-        <div style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: "1px",
-          borderRadius: "3px",
-          overflow: "hidden",
-          height: `${totalRendered}px`,
-        }}>
+        <div
+          className="sentiment-bar-stack"
+          style={{ height: `${totalRendered}px` }}
+        >
           {bucket.positive > 0 && (
             <div style={{ height: `${posH}px`, background: COLORS.positive }} />
           )}
@@ -147,16 +116,16 @@ export function SentimentTrendChart({ personId, days = 60 }: SentimentTrendChart
 
   if (loading) {
     return (
-      <div style={{ height: "120px", display: "flex", alignItems: "center", justifyContent: "center" }}>
-        <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>Loading sentiment data…</span>
+      <div className="sentiment-chart-loading">
+        <span className="text-caption text-3">Loading sentiment data…</span>
       </div>
     )
   }
 
   if (error) {
     return (
-      <div style={{ height: "80px", display: "flex", alignItems: "center", justifyContent: "center" }}>
-        <span style={{ fontSize: "var(--text-caption)", color: "#f87171" }}>Could not load sentiment data</span>
+      <div className="sentiment-chart-error">
+        <span className="sentiment-chart-error-text">Could not load sentiment data</span>
       </div>
     )
   }
@@ -170,28 +139,28 @@ export function SentimentTrendChart({ personId, days = 60 }: SentimentTrendChart
     : null
 
   return (
-    <div style={{ background: "var(--surf-2)", border: "1px solid var(--border-1)", borderRadius: "6px", padding: "14px 16px" }}>
+    <div className="sentiment-chart">
       {/* Header */}
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "12px" }}>
-        <span style={{ fontSize: "var(--text-label)", fontWeight: 600, color: "var(--text-2)" }}>
+      <div className="sentiment-chart-header">
+        <span className="sentiment-chart-title">
           Sentiment Trend
-          <span style={{ fontWeight: 400, color: "var(--text-3)", marginLeft: "6px" }}>last {days} days</span>
+          <span className="sentiment-chart-period">last {days} days</span>
         </span>
-        <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+        <div className="sentiment-chart-meta">
           {trendConfig && (
-            <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
-              <trendConfig.Icon style={{ width: "12px", height: "12px", color: trendConfig.color }} />
-              <span style={{ fontSize: "var(--text-caption)", color: trendConfig.color, fontWeight: 600 }}>
+            <div className="sentiment-trend-indicator">
+              <trendConfig.Icon className="sentiment-trend-icon" style={{ color: trendConfig.color }} />
+              <span className="sentiment-trend-label" style={{ color: trendConfig.color }}>
                 {trendConfig.label}
               </span>
             </div>
           )}
           {/* Legend */}
-          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <div className="sentiment-legend">
             {(["positive", "neutral", "negative"] as const).map(s => (
-              <div key={s} style={{ display: "flex", alignItems: "center", gap: "3px" }}>
-                <div style={{ width: "8px", height: "8px", borderRadius: "2px", background: COLORS[s] }} />
-                <span style={{ fontSize: "11px", color: "var(--text-3)", textTransform: "capitalize" }}>{s}</span>
+              <div key={s} className="sentiment-legend-item">
+                <div className="sentiment-legend-dot" style={{ background: COLORS[s] }} />
+                <span className="sentiment-legend-text">{s}</span>
               </div>
             ))}
           </div>
@@ -200,30 +169,18 @@ export function SentimentTrendChart({ personId, days = 60 }: SentimentTrendChart
 
       {/* Chart */}
       {totalEntries === 0 ? (
-        <div style={{ height: `${BAR_HEIGHT}px`, display: "flex", alignItems: "center", justifyContent: "center" }}>
-          <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
-            No evidence with sentiment tags in this period
-          </span>
+        <div className="sentiment-chart-empty" style={{ height: `${BAR_HEIGHT}px` }}>
+          <span className="text-caption text-3">No evidence with sentiment tags in this period</span>
         </div>
       ) : (
-        <div style={{ overflowX: "auto" }}>
-          <div style={{
-            display: "flex",
-            alignItems: "flex-end",
-            gap: `${BAR_GAP}px`,
-            minWidth: "fit-content",
-            paddingBottom: "4px",
-          }}>
+        <div className="sentiment-chart-body">
+          <div className="sentiment-bars" style={{ gap: `${BAR_GAP}px` }}>
             {buckets.map(b => (
               <StackedBar key={b.weekStart} bucket={b} maxTotal={maxTotal} />
             ))}
           </div>
           {/* X-axis labels — show every other week to avoid crowding */}
-          <div style={{
-            display: "flex",
-            gap: `${BAR_GAP}px`,
-            marginTop: "4px",
-          }}>
+          <div className="sentiment-x-labels" style={{ gap: `${BAR_GAP}px` }}>
             {buckets.map((b, i) => {
               const show = i === 0 || i === buckets.length - 1 || (buckets.length <= 8) || i % 2 === 0
               const label = show
@@ -232,15 +189,8 @@ export function SentimentTrendChart({ personId, days = 60 }: SentimentTrendChart
               return (
                 <div
                   key={b.weekStart}
-                  style={{
-                    width: `${BAR_WIDTH}px`,
-                    fontSize: "10px",
-                    color: "var(--text-3)",
-                    textAlign: "center",
-                    flexShrink: 0,
-                    overflow: "hidden",
-                    whiteSpace: "nowrap",
-                  }}
+                  className="sentiment-x-label"
+                  style={{ width: `${BAR_WIDTH}px` }}
                 >
                   {label}
                 </div>
diff --git a/components/follow-up-draft-modal.tsx b/components/follow-up-draft-modal.tsx
index d07b100..7a12b4d 100644
--- a/components/follow-up-draft-modal.tsx
+++ b/components/follow-up-draft-modal.tsx
@@ -123,23 +123,13 @@ export function FollowUpDraftModal({ open, onOpenChange, meetingArgs }: FollowUp
                   type="button"
                   onClick={() => handleToneChange(opt.value)}
                   title={opt.description}
-                  style={{
-                    padding: "4px 14px",
-                    borderRadius: "4px",
-                    fontSize: "var(--text-label)",
-                    fontFamily: "var(--font-sans)",
-                    cursor: "pointer",
-                    background: tone === opt.value ? "var(--surf-3)" : "var(--surf-2)",
-                    color: tone === opt.value ? "var(--text-1)" : "var(--text-2)",
-                    border: `1px solid ${tone === opt.value ? "var(--border-3)" : "var(--border-2)"}`,
-                    transition: "background 0.1s",
-                  }}
+                  className={`tone-btn ${tone === opt.value ? "tone-btn--active" : "tone-btn--inactive"}`}
                 >
                   {opt.label}
                 </button>
               ))}
             </div>
-            <p className="text-xs text-muted-foreground">
+            <p className="text-[13px] text-muted-foreground">
               {TONE_OPTIONS.find((o) => o.value === tone)?.description}
             </p>
           </div>
@@ -172,7 +162,7 @@ export function FollowUpDraftModal({ open, onOpenChange, meetingArgs }: FollowUp
             <div className="flex flex-col gap-2">
               <div className="flex items-center justify-between">
                 <p className="text-sm font-medium">Draft</p>
-                <p className="text-xs text-muted-foreground">Edit before sending</p>
+                <p className="text-[13px] text-muted-foreground">Edit before sending</p>
               </div>
               <Textarea
                 value={draft}
diff --git a/components/follow-ups/follow-up-form.tsx b/components/follow-ups/follow-up-form.tsx
index b960774..3fe5418 100644
--- a/components/follow-ups/follow-up-form.tsx
+++ b/components/follow-ups/follow-up-form.tsx
@@ -52,134 +52,52 @@ export function FollowUpForm({
   }
 
   return (
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        background: 'rgba(0,0,0,0.6)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 1000,
-      }}
-      onClick={onCancel}
-    >
-      <div
-        style={{
-          background: 'var(--surf-2)',
-          border: '1px solid var(--border-2)',
-          borderRadius: '8px',
-          padding: '20px',
-          width: '400px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '14px',
-        }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <span style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-1)' }}>
-            Add follow-up for {personName}
-          </span>
-          <button onClick={onCancel} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', display: 'flex' }}>
-            <X style={{ width: '14px', height: '14px' }} />
+    <div className="modal-overlay" onClick={onCancel}>
+      <div className="modal-box modal-box--sm" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <span className="modal-title">Add follow-up for {personName}</span>
+          <button onClick={onCancel} className="modal-close-btn">
+            <X />
           </button>
         </div>
 
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+        <div className="modal-field">
           <label className="form-label">Title</label>
           <input
             autoFocus
             value={title}
             onChange={e => setTitle(e.target.value)}
             placeholder="What did you commit to?"
-            style={{
-              background: 'var(--surf-3)',
-              border: '1px solid var(--border-2)',
-              borderRadius: '4px',
-              color: 'var(--text-1)',
-              fontSize: 'var(--text-body)',
-              padding: '7px 10px',
-              fontFamily: 'var(--font-sans)',
-              outline: 'none',
-            }}
+            className="modal-input"
           />
         </div>
 
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+        <div className="modal-field">
           <label className="form-label">Description (optional)</label>
           <textarea
             value={description}
             onChange={e => setDescription(e.target.value)}
             placeholder="Additional context..."
             rows={3}
-            style={{
-              background: 'var(--surf-3)',
-              border: '1px solid var(--border-2)',
-              borderRadius: '4px',
-              color: 'var(--text-1)',
-              fontSize: 'var(--text-meta)',
-              padding: '7px 10px',
-              resize: 'none',
-              fontFamily: 'var(--font-sans)',
-              outline: 'none',
-            }}
+            className="modal-textarea"
           />
         </div>
 
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+        <div className="modal-field">
           <label className="form-label">Due date (optional)</label>
           <input
             type="date"
             value={dueDate}
             onChange={e => setDueDate(e.target.value)}
-            style={{
-              background: 'var(--surf-3)',
-              border: '1px solid var(--border-2)',
-              borderRadius: '4px',
-              color: 'var(--text-1)',
-              fontSize: 'var(--text-meta)',
-              padding: '6px 10px',
-              fontFamily: 'var(--font-sans)',
-              outline: 'none',
-            }}
+            className="modal-input modal-input--date"
           />
         </div>
 
-        {error && <p style={{ fontSize: 'var(--text-meta)', color: '#ff6b6b', margin: 0 }}>{error}</p>}
+        {error && <p className="modal-error">{error}</p>}
 
-        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
-          <button
-            onClick={onCancel}
-            style={{
-              background: 'var(--surf-3)',
-              border: '1px solid var(--border-2)',
-              borderRadius: '4px',
-              color: 'var(--text-2)',
-              fontSize: 'var(--text-meta)',
-              padding: '6px 14px',
-              cursor: 'pointer',
-              fontFamily: 'var(--font-sans)',
-            }}
-          >
-            Cancel
-          </button>
-          <button
-            onClick={handleSave}
-            disabled={saving}
-            style={{
-              background: '#00f058',
-              border: '1px solid #00f058',
-              borderRadius: '4px',
-              color: '#000',
-              fontSize: 'var(--text-meta)',
-              fontWeight: 600,
-              padding: '6px 14px',
-              cursor: saving ? 'not-allowed' : 'pointer',
-              opacity: saving ? 0.7 : 1,
-              fontFamily: 'var(--font-sans)',
-            }}
-          >
+        <div className="modal-footer">
+          <button onClick={onCancel} className="modal-btn-cancel">Cancel</button>
+          <button onClick={handleSave} disabled={saving} className="modal-btn-primary">
             {saving ? 'Saving...' : 'Save follow-up'}
           </button>
         </div>
diff --git a/components/follow-ups/follow-up-list.tsx b/components/follow-ups/follow-up-list.tsx
index 67be0c8..cbe9681 100644
--- a/components/follow-ups/follow-up-list.tsx
+++ b/components/follow-ups/follow-up-list.tsx
@@ -28,31 +28,15 @@ function isOverdue(fu: FollowUp): boolean {
 
 function StatusBadge({ status, overdue }: { status: FollowUp['status']; overdue: boolean }) {
   if (status === 'completed') {
-    return (
-      <span style={{ fontSize: 'var(--text-caption)', fontWeight: 600, color: '#00f058', background: '#0d1f14', border: '1px solid #1a3a25', borderRadius: '4px', padding: '2px 6px' }}>
-        Done
-      </span>
-    )
+    return <span className="status-chip status-chip--done">Done</span>
   }
   if (status === 'cancelled') {
-    return (
-      <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)', background: 'var(--surf-3)', border: '1px solid var(--border-2)', borderRadius: '4px', padding: '2px 6px' }}>
-        Cancelled
-      </span>
-    )
+    return <span className="status-chip status-chip--cancelled">Cancelled</span>
   }
   if (overdue) {
-    return (
-      <span style={{ fontSize: 'var(--text-caption)', fontWeight: 600, color: '#ff6b6b', background: '#2a0a0a', border: '1px solid #5a2020', borderRadius: '4px', padding: '2px 6px' }}>
-        Overdue
-      </span>
-    )
+    return <span className="status-chip status-chip--overdue">Overdue</span>
   }
-  return (
-    <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-2)', background: 'var(--surf-3)', border: '1px solid var(--border-2)', borderRadius: '4px', padding: '2px 6px' }}>
-      Open
-    </span>
-  )
+  return <span className="status-chip status-chip--open">Open</span>
 }
 
 export function FollowUpList({ followUps, onChanged, showPerson = false }: FollowUpListProps) {
@@ -73,86 +57,44 @@ export function FollowUpList({ followUps, onChanged, showPerson = false }: Follo
 
   if (followUps.length === 0) {
     return (
-      <p style={{ fontSize: 'var(--text-meta)', color: 'var(--text-3)', margin: 0 }}>
-        No follow-ups
-      </p>
+      <p className="text-meta text-3 m-0">No follow-ups</p>
     )
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+    <div className="flex flex-col gap-0.5">
       {open.map(fu => {
         const overdue = isOverdue(fu)
         const age = ageDays(fu.createdAt)
         return (
           <div
             key={fu.id}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '10px',
-              padding: '8px 12px',
-              background: overdue ? '#1a0a0a' : 'var(--surf-2)',
-              border: `1px solid ${overdue ? '#3a1515' : 'var(--border-1)'}`,
-              borderRadius: '5px',
-            }}
+            className={`follow-up-row ${overdue ? "follow-up-row--overdue" : "follow-up-row--open"}`}
           >
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-1)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                {fu.title}
-              </div>
-              <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginTop: '2px', flexWrap: 'wrap' }}>
+            <div className="follow-up-body">
+              <div className="follow-up-title">{fu.title}</div>
+              <div className="follow-up-meta">
                 {showPerson && fu.personName && (
-                  <Link href={`/people/${fu.personId}`} style={{ fontSize: 'var(--text-caption)', color: 'var(--text-2)', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '3px' }}>
-                    {fu.personName} <ExternalLink style={{ width: '9px', height: '9px' }} />
+                  <Link href={`/people/${fu.personId}`} className="follow-up-meta-link">
+                    {fu.personName} <ExternalLink />
                   </Link>
                 )}
-                <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)' }}>
+                <span className="follow-up-meta-text">
                   {fu.dueDate ? `Due ${formatDate(fu.dueDate)}` : `${age}d old`}
                 </span>
                 {fu.sourceName && (
-                  <span style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)' }}>
-                    · from "{fu.sourceName}"
-                  </span>
+                  <span className="follow-up-meta-text">· from &ldquo;{fu.sourceName}&rdquo;</span>
                 )}
                 <StatusBadge status={fu.status} overdue={overdue} />
               </div>
             </div>
 
-            <div style={{ display: 'flex', gap: '4px', flexShrink: 0 }}>
-              <button
-                onClick={() => handleComplete(fu.id)}
-                title="Mark complete"
-                style={{
-                  background: 'none',
-                  border: '1px solid var(--border-2)',
-                  borderRadius: '4px',
-                  color: '#00f058',
-                  cursor: 'pointer',
-                  padding: '3px 6px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '3px',
-                  fontSize: 'var(--text-caption)',
-                }}
-              >
-                <Check style={{ width: '10px', height: '10px' }} /> Done
+            <div className="follow-up-actions">
+              <button onClick={() => handleComplete(fu.id)} title="Mark complete" className="follow-up-done-btn">
+                <Check /> Done
               </button>
-              <button
-                onClick={() => handleCancel(fu.id)}
-                title="Cancel"
-                style={{
-                  background: 'none',
-                  border: '1px solid var(--border-2)',
-                  borderRadius: '4px',
-                  color: 'var(--text-3)',
-                  cursor: 'pointer',
-                  padding: '3px 4px',
-                  display: 'flex',
-                  alignItems: 'center',
-                }}
-              >
-                <X style={{ width: '10px', height: '10px' }} />
+              <button onClick={() => handleCancel(fu.id)} title="Cancel" className="follow-up-cancel-btn">
+                <X />
               </button>
             </div>
           </div>
@@ -160,42 +102,17 @@ export function FollowUpList({ followUps, onChanged, showPerson = false }: Follo
       })}
 
       {closed.length > 0 && (
-        <div style={{ marginTop: '4px' }}>
-          <button
-            onClick={() => setShowCompleted(s => !s)}
-            style={{
-              background: 'none',
-              border: 'none',
-              color: 'var(--text-3)',
-              fontSize: 'var(--text-caption)',
-              cursor: 'pointer',
-              display: 'flex',
-              alignItems: 'center',
-              gap: '4px',
-              padding: '4px 0',
-              fontFamily: 'var(--font-sans)',
-            }}
-          >
-            {showCompleted ? <ChevronDown style={{ width: '11px', height: '11px' }} /> : <ChevronRight style={{ width: '11px', height: '11px' }} />}
+        <div className="mt-1">
+          <button onClick={() => setShowCompleted(s => !s)} className="follow-up-toggle-btn">
+            {showCompleted ? <ChevronDown /> : <ChevronRight />}
             {closed.length} closed
           </button>
           {showCompleted && closed.map(fu => (
-            <div
-              key={fu.id}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '10px',
-                padding: '6px 12px',
-                opacity: 0.6,
-              }}
-            >
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ fontSize: 'var(--text-meta)', color: 'var(--text-2)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-                  {fu.title}
-                </div>
+            <div key={fu.id} className="follow-up-closed-row">
+              <div className="flex-1 min-w-0">
+                <div className="follow-up-closed-title">{fu.title}</div>
                 {fu.completedAt && (
-                  <div style={{ fontSize: 'var(--text-caption)', color: 'var(--text-3)' }}>
+                  <div className="follow-up-completed-at">
                     Completed {new Date(fu.completedAt).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })}
                   </div>
                 )}
diff --git a/components/meeting-form-dialog.tsx b/components/meeting-form-dialog.tsx
index 3d9980c..d003edb 100644
--- a/components/meeting-form-dialog.tsx
+++ b/components/meeting-form-dialog.tsx
@@ -352,7 +352,7 @@ export function MeetingFormDialog({ open, onOpenChange, meeting, onSave, availab
                   {/* Person Field for 1:1 */}
                   <div className="grid gap-2">
                     <Label htmlFor="person">Person *</Label>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-[13px] text-muted-foreground">
                       Select from your team or type a new name
                     </p>
                     <div className="relative">
@@ -365,19 +365,17 @@ export function MeetingFormDialog({ open, onOpenChange, meeting, onSave, availab
                         required
                       />
                       {showSuggestions && (
-                        <div style={{ position: "absolute", zIndex: 50, width: "100%", marginTop: "4px", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", boxShadow: "0 4px 16px rgba(0,0,0,0.4)", maxHeight: "192px", overflowY: "auto" }}>
+                        <div className="meeting-suggestion-dropdown">
                           {filteredPeople.map((person, index) => (
-                            <div key={index} onClick={() => handlePersonSelect(person)}
-                              style={{ padding: "6px 12px", fontSize: "var(--text-label)", cursor: "pointer", color: "var(--text-2)" }}
-                              onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3)")}
-                              onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
-                            >{person}</div>
+                            <div key={index} onClick={() => handlePersonSelect(person)} className="meeting-suggestion-item">
+                              {person}
+                            </div>
                           ))}
                         </div>
                       )}
                       {personInput.length >= 2 && availablePeople.length > 0 && filteredPeople.length === 0 && !showSuggestions && (
-                        <div style={{ position: "absolute", right: "8px", top: "50%", transform: "translateY(-50%)" }}>
-                          <span style={{ fontSize: "var(--text-overline)", background: "var(--surf-3)", color: "var(--text-2)", border: "1px solid var(--border-2)", borderRadius: "3px", padding: "2px 6px" }}>New person</span>
+                        <div className="meeting-new-person-badge">
+                          <span className="meeting-new-person-label">New person</span>
                         </div>
                       )}
                     </div>
@@ -474,18 +472,16 @@ export function MeetingFormDialog({ open, onOpenChange, meeting, onSave, availab
                         required
                       />
                       {showTeamSuggestions && (
-                        <div style={{ position: "absolute", zIndex: 50, width: "100%", marginTop: "4px", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", boxShadow: "0 4px 16px rgba(0,0,0,0.4)", maxHeight: "192px", overflowY: "auto" }}>
+                        <div className="meeting-suggestion-dropdown">
                           {filteredTeams.map((team, index) => (
-                            <div key={index} onClick={() => handleTeamSelect(team)}
-                              style={{ padding: "6px 12px", fontSize: "var(--text-label)", cursor: "pointer", color: "var(--text-2)" }}
-                              onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3)")}
-                              onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
-                            >{team}</div>
+                            <div key={index} onClick={() => handleTeamSelect(team)} className="meeting-suggestion-item">
+                              {team}
+                            </div>
                           ))}
                         </div>
                       )}
                     </div>
-                    <p className="text-xs text-muted-foreground">
+                    <p className="text-[13px] text-muted-foreground">
                       Select from your teams or type a new name
                     </p>
                   </div>
@@ -632,7 +628,7 @@ export function MeetingFormDialog({ open, onOpenChange, meeting, onSave, availab
               {is1on1 && (
                 <div className="grid gap-2">
                   <Label>Templates</Label>
-                  <p className="text-xs text-muted-foreground">
+                  <p className="text-[13px] text-muted-foreground">
                     Select a template to load pre-formatted notes
                   </p>
                   <div className="flex flex-wrap gap-2">
@@ -645,8 +641,8 @@ export function MeetingFormDialog({ open, onOpenChange, meeting, onSave, availab
                           const html = DOMPurify.sanitize(marked.parse(template.notes) as string)
                           setFormData(prev => ({ ...prev, notes: html }))
                         }}
+                        className="meeting-template-btn"
                         style={{
-                          padding: "3px 10px", borderRadius: "4px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)", cursor: "pointer",
                           background: selectedTemplate === template.id ? "var(--surf-3)" : "var(--surf-2)",
                           color: selectedTemplate === template.id ? "var(--text-1)" : "var(--text-2)",
                           border: `1px solid ${selectedTemplate === template.id ? "var(--border-3)" : "var(--border-2)"}`,
@@ -672,28 +668,14 @@ export function MeetingFormDialog({ open, onOpenChange, meeting, onSave, availab
 
               {/* TL;DR — shown when editing an existing meeting */}
               {isEditing && serviceMeeting && (
-                <div
-                  style={{
-                    borderRadius: 8,
-                    padding: "10px 12px",
-                    background: "var(--surf-2)",
-                    border: "1px solid var(--border-2)",
-                  }}
-                >
-                  <div className="flex items-center justify-between mb-1">
-                    <span style={{ fontSize: "var(--text-label)", color: "var(--text-2)", fontWeight: 600 }}>
-                      AI Summary
-                    </span>
+                <div className="meeting-tldr-box">
+                  <div className="meeting-tldr-header">
+                    <span className="meeting-tldr-title">AI Summary</span>
                     <button
                       type="button"
                       onClick={handleRegenerateTldr}
                       disabled={tldrLoading}
-                      style={{
-                        display: "flex", alignItems: "center", gap: 4,
-                        fontSize: "var(--text-label)", color: "var(--text-3)",
-                        background: "none", border: "none", cursor: tldrLoading ? "not-allowed" : "pointer",
-                        padding: "2px 6px", borderRadius: 4,
-                      }}
+                      className="meeting-tldr-regen-btn"
                       title="Regenerate summary"
                     >
                       <RefreshCw size={11} style={{ animation: tldrLoading ? "spin 1s linear infinite" : "none" }} />
@@ -701,15 +683,11 @@ export function MeetingFormDialog({ open, onOpenChange, meeting, onSave, availab
                     </button>
                   </div>
                   {tldrLoading ? (
-                    <p style={{ fontSize: "var(--text-body)", color: "var(--text-3)", fontStyle: "italic" }}>
-                      Generating summary…
-                    </p>
+                    <p className="meeting-tldr-pending">Generating summary…</p>
                   ) : tldrText ? (
-                    <p style={{ fontSize: "var(--text-body)", color: "var(--text-2)", lineHeight: 1.5 }}>
-                      {tldrText}
-                    </p>
+                    <p className="meeting-tldr-text">{tldrText}</p>
                   ) : (
-                    <p style={{ fontSize: "var(--text-body)", color: "var(--text-3)", fontStyle: "italic" }}>
+                    <p className="meeting-tldr-pending">
                       No summary yet. Save meeting notes (&gt;100 chars) to generate one.
                     </p>
                   )}
diff --git a/components/people-table.tsx b/components/people-table.tsx
index 0ffdcb3..cc46d56 100644
--- a/components/people-table.tsx
+++ b/components/people-table.tsx
@@ -21,17 +21,7 @@ interface PeopleTableProps {
 function LevelChip({ level }: { level: string }) {
   const { bg, color: text } = LEVEL_BADGE[level] ?? LEVEL_BADGE.Other
   return (
-    <span style={{
-      display: "inline-flex",
-      alignItems: "center",
-      padding: "2px 7px",
-      borderRadius: "3px",
-      fontSize: "var(--text-overline)",
-      fontWeight: 500,
-      fontFamily: "var(--font-mono)",
-      background: bg,
-      color: text,
-    }}>
+    <span className="level-chip" style={{ background: bg, color: text }}>
       {level}
     </span>
   )
@@ -58,20 +48,7 @@ export function PeopleTable({
       cell: (person) => {
         const isInactive = person.status === "inactive"
         return (
-          <div style={{
-            width: "24px",
-            height: "24px",
-            borderRadius: "50%",
-            background: "var(--surf-3)",
-            color: "var(--text-2)",
-            fontSize: "var(--text-overline)",
-            fontWeight: 500,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            flexShrink: 0,
-            opacity: isInactive ? 0.4 : 1,
-          }}>
+          <div className="avatar-chip" style={{ opacity: isInactive ? 0.4 : 1 }}>
             {getInitials(person.name)}
           </div>
         )
@@ -85,20 +62,15 @@ export function PeopleTable({
         const isInactive = person.status === "inactive"
         const score = attentionScores[person.id] ?? 0
         return (
-          <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+          <div className="table-name-row">
             {score > 0 && (
               <span
                 title={`Attention score: ${score}`}
-                style={{
-                  width: "7px",
-                  height: "7px",
-                  borderRadius: "50%",
-                  background: scoreToColor(score),
-                  flexShrink: 0,
-                }}
+                className="attention-dot"
+                style={{ background: scoreToColor(score) }}
               />
             )}
-            <span style={{ fontWeight: 500, fontSize: "var(--text-meta)", color: isInactive ? "var(--text-3)" : "var(--text-1)" }}>
+            <span className={`table-name ${isInactive ? "table-name--inactive" : "table-name--active"}`}>
               {person.name}
             </span>
           </div>
@@ -112,7 +84,7 @@ export function PeopleTable({
       cell: (person) => {
         const isInactive = person.status === "inactive"
         return (
-          <span style={{ color: isInactive ? "var(--text-3)" : "var(--text-2)", fontSize: "var(--text-meta)" }}>
+          <span className={`table-role ${isInactive ? "table-role--inactive" : "table-role--active"}`}>
             {person.role}
           </span>
         )
@@ -131,16 +103,9 @@ export function PeopleTable({
       cell: (person) => {
         const isInactive = person.status === "inactive"
         return (
-          <div style={{ display: "flex", flexWrap: "wrap", gap: "2px" }}>
+          <div className="table-teams">
             {person.teams.map((team, idx) => (
-              <span key={idx} style={{
-                background: "var(--surf-3)",
-                color: isInactive ? "var(--text-3)" : "var(--text-2)",
-                padding: "1px 5px",
-                borderRadius: "3px",
-                fontSize: "var(--text-overline)",
-                marginRight: "2px",
-              }}>
+              <span key={idx} className="team-chip" style={{ color: isInactive ? "var(--text-3)" : "var(--text-2)" }}>
                 {team}
               </span>
             ))}
@@ -153,10 +118,7 @@ export function PeopleTable({
       header: "Status",
       accessorKey: "status",
       cell: (person) => (
-        <span style={{
-          color: person.status === "active" ? "#00f058" : "var(--text-3)",
-          fontSize: "var(--text-caption)",
-        }}>
+        <span className={`status-badge ${person.status === "active" ? "status-badge--active" : "status-badge--inactive"}`}>
           ● {person.status}
         </span>
       ),
@@ -170,63 +132,24 @@ export function PeopleTable({
         <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 justify-end">
           <button
             onClick={(e) => { e.stopPropagation(); onEdit(person) }}
-            style={{
-              border: "1px solid var(--border-2)",
-              color: "var(--text-3)",
-              borderRadius: "4px",
-              padding: "2px 7px",
-              fontSize: "var(--text-meta)",
-              background: "none",
-              cursor: "pointer",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "4px",
-            }}
-            onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-            onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+            className="table-action-btn"
           >
-            <Pencil style={{ width: "11px", height: "11px" }} /> Edit
+            <Pencil /> Edit
           </button>
           <button
             onClick={(e) => { e.stopPropagation(); onToggleStatus(person) }}
-            style={{
-              border: "1px solid var(--border-2)",
-              color: "var(--text-3)",
-              borderRadius: "4px",
-              padding: "2px 7px",
-              fontSize: "var(--text-meta)",
-              background: "none",
-              cursor: "pointer",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "4px",
-            }}
-            onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-            onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+            className="table-action-btn"
           >
             {person.status === "active"
-              ? <><UserX style={{ width: "11px", height: "11px" }} /> Deactivate</>
-              : <><UserCheck style={{ width: "11px", height: "11px" }} /> Activate</>
+              ? <><UserX /> Deactivate</>
+              : <><UserCheck /> Activate</>
             }
           </button>
           <button
             onClick={(e) => { e.stopPropagation(); onDelete(person) }}
-            style={{
-              border: "1px solid var(--border-2)",
-              color: "var(--text-3)",
-              borderRadius: "4px",
-              padding: "2px 7px",
-              fontSize: "var(--text-meta)",
-              background: "none",
-              cursor: "pointer",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "4px",
-            }}
-            onMouseEnter={e => (e.currentTarget.style.color = "#f87171")}
-            onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+            className="table-action-btn table-action-btn--danger"
           >
-            <Trash2 style={{ width: "11px", height: "11px" }} /> Delete
+            <Trash2 /> Delete
           </button>
         </div>
       ),
diff --git a/components/person-form-dialog.tsx b/components/person-form-dialog.tsx
index 076945e..1379f48 100644
--- a/components/person-form-dialog.tsx
+++ b/components/person-form-dialog.tsx
@@ -142,7 +142,7 @@ export function PersonFormDialog({ open, onOpenChange, person, onSave, available
               </div>
               <div className="grid gap-2">
                 <Label>Level / Seniority</Label>
-                <div style={{ display: "flex", gap: "6px", flexWrap: "wrap" }}>
+                <div className="level-btn-row">
                   {(Object.keys(LEVEL_BADGE) as Array<keyof typeof LEVEL_BADGE>).map((label) => {
                     const { bg, color } = LEVEL_BADGE[label]
                     const isOther = label === "Other"
@@ -154,16 +154,11 @@ export function PersonFormDialog({ open, onOpenChange, person, onSave, available
                         key={label}
                         type="button"
                         onClick={() => setFormData({ ...formData, level: isOther ? "" : label })}
+                        className="level-btn"
                         style={{
-                          padding: "3px 10px",
-                          borderRadius: "4px",
-                          fontSize: "var(--text-label)",
-                          fontWeight: 500,
-                          fontFamily: "var(--font-sans)",
                           background: isSelected ? bg : "var(--surf-2)",
                           color: isSelected ? color : "var(--text-3)",
                           border: `1px solid ${isSelected ? color + "40" : "var(--border-2)"}`,
-                          cursor: "pointer",
                         }}
                       >
                         {label}
@@ -191,83 +186,77 @@ export function PersonFormDialog({ open, onOpenChange, person, onSave, available
                 <Label>Teams</Label>
                 <div className="flex gap-3 items-center">
                   {/* Available Teams */}
-                  <div style={{ flex: 1 }}>
-                    <label style={{ fontSize: "var(--text-label)", color: "var(--text-3)", display: "block", marginBottom: "4px" }}>Available Teams</label>
-                    <div style={{ border: "1px solid var(--border-2)", borderRadius: "4px", height: "128px", overflowY: "auto", background: "var(--surf-2)" }}>
+                  <div className="dual-list-col">
+                    <label className="dual-list-label">Available Teams</label>
+                    <div className="dual-list-box dual-list-box--sm">
                       {availableTeamsList.length > 0 ? (
-                        availableTeamsList.map((team) => (
-                          <div
-                            key={team.id}
-                            onClick={() => toggleAvailableSelection(team.name)}
-                            onDoubleClick={() => handleDoubleClickAvailable(team.name)}
-                            className="dual-list-item"
-                            style={{
-                              padding: "6px 12px",
-                              fontSize: "var(--text-label)",
-                              cursor: "pointer",
-                              userSelect: "none",
-                              color: selectedAvailable.includes(team.name) ? "#111" : "var(--text-2)",
-                              borderLeft: selectedAvailable.includes(team.name) ? "2px solid #00f058" : "2px solid transparent",
-                            }}
-                          >
-                            {team.name}
-                          </div>
-                        ))
+                        availableTeamsList.map((team) => {
+                          const isSelected = selectedAvailable.includes(team.name)
+                          return (
+                            <div
+                              key={team.id}
+                              onClick={() => toggleAvailableSelection(team.name)}
+                              onDoubleClick={() => handleDoubleClickAvailable(team.name)}
+                              className="dual-list-item"
+                              style={{
+                                color: isSelected ? "#111" : "var(--text-2)",
+                                borderLeft: isSelected ? "2px solid #00f058" : "2px solid transparent",
+                              }}
+                            >
+                              {team.name}
+                            </div>
+                          )
+                        })
                       ) : (
-                        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontSize: "var(--text-label)", color: "var(--text-3)" }}>
-                          All teams assigned
-                        </div>
+                        <div className="dual-list-empty">All teams assigned</div>
                       )}
                     </div>
                   </div>
 
                   {/* Arrow Buttons */}
-                  <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+                  <div className="dual-list-arrows">
                     <button
                       type="button"
                       onClick={handleAddToTeams}
                       disabled={selectedAvailable.length === 0}
-                      style={{ width: "32px", height: "32px", borderRadius: "4px", border: "1px solid var(--border-2)", background: "var(--surf-2)", color: "var(--text-2)", cursor: selectedAvailable.length === 0 ? "not-allowed" : "pointer", opacity: selectedAvailable.length === 0 ? 0.4 : 1, display: "flex", alignItems: "center", justifyContent: "center" }}
+                      className="dual-list-arrow-btn"
                     >
-                      <ChevronRight style={{ width: "16px", height: "16px" }} />
+                      <ChevronRight />
                     </button>
                     <button
                       type="button"
                       onClick={handleRemoveFromTeams}
                       disabled={selectedTeams.length === 0}
-                      style={{ width: "32px", height: "32px", borderRadius: "4px", border: "1px solid var(--border-2)", background: "var(--surf-2)", color: "var(--text-2)", cursor: selectedTeams.length === 0 ? "not-allowed" : "pointer", opacity: selectedTeams.length === 0 ? 0.4 : 1, display: "flex", alignItems: "center", justifyContent: "center" }}
+                      className="dual-list-arrow-btn"
                     >
-                      <ChevronLeft style={{ width: "16px", height: "16px" }} />
+                      <ChevronLeft />
                     </button>
                   </div>
 
                   {/* Person Teams */}
-                  <div style={{ flex: 1 }}>
-                    <label style={{ fontSize: "var(--text-label)", color: "var(--text-3)", display: "block", marginBottom: "4px" }}>{formData.name ? `${formData.name}'s Teams` : "Person's Teams"} ({personTeamsList.length})</label>
-                    <div style={{ border: "1px solid var(--border-2)", borderRadius: "4px", height: "128px", overflowY: "auto", background: "var(--surf-2)" }}>
+                  <div className="dual-list-col">
+                    <label className="dual-list-label">{formData.name ? `${formData.name}'s Teams` : "Person's Teams"} ({personTeamsList.length})</label>
+                    <div className="dual-list-box dual-list-box--sm">
                       {personTeamsList.length > 0 ? (
-                        personTeamsList.map((team) => (
-                          <div
-                            key={team.id}
-                            onClick={() => toggleTeamSelection(team.name)}
-                            onDoubleClick={() => handleDoubleClickTeam(team.name)}
-                            className="dual-list-item"
-                            style={{
-                              padding: "6px 12px",
-                              fontSize: "var(--text-label)",
-                              cursor: "pointer",
-                              userSelect: "none",
-                              color: selectedTeams.includes(team.name) ? "#111" : "var(--text-2)",
-                              borderLeft: selectedTeams.includes(team.name) ? "2px solid #00f058" : "2px solid transparent",
-                            }}
-                          >
-                            {team.name}
-                          </div>
-                        ))
+                        personTeamsList.map((team) => {
+                          const isSelected = selectedTeams.includes(team.name)
+                          return (
+                            <div
+                              key={team.id}
+                              onClick={() => toggleTeamSelection(team.name)}
+                              onDoubleClick={() => handleDoubleClickTeam(team.name)}
+                              className="dual-list-item"
+                              style={{
+                                color: isSelected ? "#111" : "var(--text-2)",
+                                borderLeft: isSelected ? "2px solid #00f058" : "2px solid transparent",
+                              }}
+                            >
+                              {team.name}
+                            </div>
+                          )
+                        })
                       ) : (
-                        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontSize: "var(--text-label)", color: "var(--text-3)" }}>
-                          No teams yet
-                        </div>
+                        <div className="dual-list-empty">No teams yet</div>
                       )}
                     </div>
                   </div>
diff --git a/components/review/dismiss-dialog.tsx b/components/review/dismiss-dialog.tsx
index e5f4c96..73503e5 100644
--- a/components/review/dismiss-dialog.tsx
+++ b/components/review/dismiss-dialog.tsx
@@ -12,37 +12,12 @@ export function DismissDialog({ onConfirm, onCancel }: DismissDialogProps) {
   const [note, setNote] = useState('')
 
   return (
-    <div
-      style={{
-        position: 'fixed',
-        inset: 0,
-        background: 'rgba(0,0,0,0.6)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        zIndex: 1000,
-      }}
-      onClick={onCancel}
-    >
-      <div
-        style={{
-          background: 'var(--surf-2)',
-          border: '1px solid var(--border-2)',
-          borderRadius: '8px',
-          padding: '20px',
-          width: '360px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '12px',
-        }}
-        onClick={e => e.stopPropagation()}
-      >
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <span style={{ fontSize: 'var(--text-body)', fontWeight: 600, color: 'var(--text-1)' }}>
-            Dismiss item
-          </span>
-          <button onClick={onCancel} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-3)', display: 'flex' }}>
-            <X style={{ width: '14px', height: '14px' }} />
+    <div className="modal-overlay" onClick={onCancel}>
+      <div className="modal-box modal-box--dismiss" onClick={e => e.stopPropagation()}>
+        <div className="modal-header">
+          <span className="modal-title">Dismiss item</span>
+          <button onClick={onCancel} className="modal-close-btn">
+            <X />
           </button>
         </div>
 
@@ -51,24 +26,14 @@ export function DismissDialog({ onConfirm, onCancel }: DismissDialogProps) {
           onChange={e => setNote(e.target.value)}
           placeholder="Optional: why are you dismissing this? (e.g. on holiday this week)"
           rows={3}
-          style={{
-            background: 'var(--surf-3)',
-            border: '1px solid var(--border-2)',
-            borderRadius: '4px',
-            color: 'var(--text-1)',
-            fontSize: 'var(--text-meta)',
-            padding: '8px 10px',
-            resize: 'none',
-            fontFamily: 'var(--font-sans)',
-            outline: 'none',
-          }}
+          className="modal-textarea"
         />
 
-        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
-          <button onClick={onCancel} className="btn-ghost" style={{ padding: '6px 12px' }}>
+        <div className="modal-footer">
+          <button onClick={onCancel} className="btn-ghost btn--padded">
             Cancel
           </button>
-          <button onClick={() => onConfirm(note)} className="btn-primary" style={{ padding: '6px 12px' }}>
+          <button onClick={() => onConfirm(note)} className="btn-primary btn--padded">
             Dismiss
           </button>
         </div>
diff --git a/components/review/review-section.tsx b/components/review/review-section.tsx
index 6b5cb0e..03a3818 100644
--- a/components/review/review-section.tsx
+++ b/components/review/review-section.tsx
@@ -46,89 +46,45 @@ export function ReviewSection({
 }: ReviewSectionProps) {
   const [expanded, setExpanded] = useState(defaultExpanded)
 
-  const chevronStyle: React.CSSProperties = {
-    color: 'var(--text-3)',
-    flexShrink: 0,
-    transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
-    transition: 'transform 0.2s',
-    opacity: nonInteractiveHeader ? 0 : 1,
-  }
-
   return (
-    <div
-      style={{
-        background: 'var(--surf)',
-        border: `1px solid ${isReviewed ? '#1a3a25' : 'var(--border-1)'}`,
-        borderRadius: '8px',
-        overflow: 'hidden',
-        transition: 'border-color 0.2s',
-      }}
-    >
+    <div className={`review-section ${isReviewed ? "review-section--reviewed" : "review-section--default"}`}>
       {/* Header */}
       <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '10px',
-          padding: '12px 16px',
-          cursor: nonInteractiveHeader ? 'default' : 'pointer',
-          userSelect: 'none',
-        }}
+        className={`review-section-header ${nonInteractiveHeader ? "review-section-header--static" : "review-section-header--interactive"}`}
         onClick={() => { if (!nonInteractiveHeader) setExpanded(e => !e) }}
-        onMouseEnter={e => { if (!nonInteractiveHeader) (e.currentTarget as HTMLElement).style.background = 'var(--surf-2)' }}
-        onMouseLeave={e => { if (!nonInteractiveHeader) (e.currentTarget as HTMLElement).style.background = '' }}
       >
         {/* Chevron SVG */}
-        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" style={chevronStyle}>
+        <svg
+          width="12" height="12" viewBox="0 0 12 12" fill="none"
+          className="review-section-chevron"
+          style={{
+            transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+            opacity: nonInteractiveHeader ? 0 : 1,
+          }}
+        >
           <path d="M4 2l4 4-4 4" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
 
         {/* Section icon */}
-        <span style={{ opacity: 0.6, flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-          {icon}
-        </span>
+        <span className="review-section-icon">{icon}</span>
 
         {/* Title */}
-        <span style={{ flex: 1, fontSize: '13px', fontWeight: 500, color: 'var(--text-1)' }}>
-          {title}
-        </span>
+        <span className="review-section-title">{title}</span>
 
         {/* Badges */}
         {!isReviewed && (
-          <span style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+          <span className="review-section-badges">
             {criticalCount > 0 && (
-              <span style={{
-                fontSize: '10px', fontFamily: 'var(--font-mono)',
-                padding: '1px 6px', borderRadius: '8px',
-                background: '#1a0a0a', color: '#f87171',
-              }}>
-                {criticalCount} critical
-              </span>
+              <span className="review-badge review-badge--crit">{criticalCount} critical</span>
             )}
             {warningCount > 0 && (
-              <span style={{
-                fontSize: '10px', fontFamily: 'var(--font-mono)',
-                padding: '1px 6px', borderRadius: '8px',
-                background: '#1e0d00', color: '#f97316',
-              }}>
-                {warningCount} {warningCount === 1 ? 'warning' : 'warnings'}
-              </span>
+              <span className="review-badge review-badge--warn">{warningCount} {warningCount === 1 ? 'warning' : 'warnings'}</span>
             )}
             {infoCount > 0 && !criticalCount && !warningCount && (
-              <span style={{
-                fontSize: '10px', fontFamily: 'var(--font-mono)',
-                padding: '1px 6px', borderRadius: '8px',
-                background: '#0a1e28', color: '#60a5fa',
-              }}>
-                {infoCount} info
-              </span>
+              <span className="review-badge review-badge--info">{infoCount} info</span>
             )}
             {badgeLabel && badgeVariant && (
-              <span style={{
-                fontSize: '10px', fontFamily: 'var(--font-mono)',
-                padding: '1px 6px', borderRadius: '8px',
-                ...BADGE_STYLES[badgeVariant],
-              }}>
+              <span className="review-badge" style={BADGE_STYLES[badgeVariant]}>
                 {badgeLabel}
               </span>
             )}
@@ -136,22 +92,14 @@ export function ReviewSection({
         )}
 
         {isReviewed && (
-          <span style={{ fontSize: '11px', color: '#00f058', fontFamily: 'var(--font-mono)' }}>
-            ✓ Reviewed
-          </span>
+          <span className="review-done-label">✓ Reviewed</span>
         )}
 
         {/* Checkbox */}
         {showCheckbox && (
           <div
             onClick={e => { e.stopPropagation(); onMarkReviewed(!isReviewed) }}
-            style={{
-              width: '18px', height: '18px', borderRadius: '4px',
-              border: `1.5px solid ${isReviewed ? '#00f058' : 'var(--border-3)'}`,
-              background: isReviewed ? '#00f058' : 'transparent',
-              cursor: 'pointer', flexShrink: 0,
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}
+            className={`review-checkbox ${isReviewed ? "review-checkbox--checked" : "review-checkbox--unchecked"}`}
             title={isReviewed ? 'Unmark as reviewed' : 'Mark as reviewed'}
           >
             <svg width="10" height="10" viewBox="0 0 10 10" fill="none" style={{ opacity: isReviewed ? 1 : 0 }}>
@@ -163,12 +111,9 @@ export function ReviewSection({
 
       {/* Body */}
       {expanded && (
-        <div style={{
-          borderTop: '1px solid var(--border-1)',
-          padding: signalCount === 0 && !children ? '14px 16px' : '0',
-        }}>
+        <div className={`review-section-body ${signalCount === 0 && !children ? "review-section-body--empty" : ""}`}>
           {signalCount === 0 && !children ? (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: '#00f058', fontSize: '12px' }}>
+            <div className="review-empty-state">
               <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                 <circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth="1.2" />
                 <path d="M4.5 7l2 2 3-4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
diff --git a/components/settings/ai-settings-card.tsx b/components/settings/ai-settings-card.tsx
index 13e5e7f..411644d 100644
--- a/components/settings/ai-settings-card.tsx
+++ b/components/settings/ai-settings-card.tsx
@@ -128,22 +128,22 @@ export function AISettingsCard() {
       <CardContent>
         {/* Configured state */}
         {config && !editMode && (
-          <div style={{ display: "grid", gap: "16px" }}>
-            <div style={{ display: "flex", alignItems: "center", gap: "16px", flexWrap: "wrap" }}>
-              <div style={{ background: "#0d2015", border: "1px solid #4ade8040", borderRadius: "6px", padding: "8px 14px" }}>
-                <span style={{ fontSize: "var(--text-caption)", color: "#4ade80", fontWeight: 600 }}>
+          <div className="grid gap-16">
+            <div className="flex-align gap-16 flex-wrap">
+              <div className="ai-config-badge">
+                <span className="ai-config-badge__provider">
                   {PROVIDER_LABELS[config.provider]}
                 </span>
-                <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginLeft: "8px" }}>
+                <span className="ai-config-badge__model">
                   {config.model}
                 </span>
               </div>
-              <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", fontFamily: "var(--font-mono)" }}>
+              <span className="text-caption font-mono">
                 key ending ···{config.keyHint}
               </span>
             </div>
 
-            <div style={{ display: "flex", gap: "8px", fontSize: "var(--text-caption)", color: "var(--text-3)" }}>
+            <div className="flex-align gap-8 text-caption text-3">
               <span>Requests: {config.totalRequests}</span>
               {config.lastUsedAt && (
                 <span>· Last used: {new Date(config.lastUsedAt).toLocaleDateString()}</span>
@@ -154,13 +154,8 @@ export function AISettingsCard() {
             {config.provider === 'anthropic' && (() => {
               const stats = getSessionCacheStats()
               return stats.calls > 0 ? (
-                <div style={{
-                  display: "flex", gap: "12px",
-                  fontSize: "var(--text-caption)", color: "var(--text-3)",
-                  padding: "6px 10px", borderRadius: "5px",
-                  background: "var(--surf-2)", border: "1px solid var(--border-2)",
-                }}>
-                  <span style={{ fontWeight: 600, color: "var(--text-2)" }}>This session</span>
+                <div className="ai-cache-stats">
+                  <span className="font-600 text-2">This session</span>
                   <span>Cache hits: {stats.cacheRead.toLocaleString()} tokens</span>
                   <span>Cache writes: {stats.cacheWrite.toLocaleString()} tokens</span>
                   <span>Calls: {stats.calls}</span>
@@ -169,17 +164,17 @@ export function AISettingsCard() {
             })()}
 
             {testResult === 'ok' && (
-              <div style={{ display: "flex", alignItems: "center", gap: "6px", color: "#4ade80", fontSize: "var(--text-caption)" }}>
-                <Check style={{ width: "12px", height: "12px" }} /> Connection working
+              <div className="ai-status-ok">
+                <Check /> Connection working
               </div>
             )}
             {testResult === 'fail' && (
-              <div style={{ color: "#f87171", fontSize: "var(--text-caption)" }}>
+              <div className="ai-status-fail">
                 ✕ {testError}
               </div>
             )}
 
-            <div style={{ display: "flex", gap: "8px" }}>
+            <div className="flex-align gap-8">
               <Button variant="outline" size="sm" onClick={handleRetest} disabled={testing}>
                 {testing ? <><Loader2 className="h-3 w-3 mr-1 animate-spin" /> Testing…</> : 'Test Connection'}
               </Button>
@@ -190,7 +185,7 @@ export function AISettingsCard() {
                 variant="outline"
                 size="sm"
                 onClick={handleRemove}
-                style={{ color: "#f87171", borderColor: "#f8717140" }}
+                className="ai-remove-btn"
               >
                 <Trash2 className="h-3 w-3 mr-1" />
                 Remove Key
@@ -201,28 +196,28 @@ export function AISettingsCard() {
 
         {/* Setup / edit form */}
         {editMode && (
-          <div style={{ display: "grid", gap: "20px" }}>
+          <div className="grid gap-20">
             {/* Provider selection */}
             <div>
-              <Label style={{ display: "block", marginBottom: "8px" }}>Provider</Label>
-              <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "8px" }}>
+              <Label className="block mb-8">Provider</Label>
+              <div className="ai-provider-grid">
                 {PROVIDERS.map(p => (
                   <button
                     key={p}
                     onClick={() => setSelectedProvider(p)}
+                    className="ai-provider-btn"
                     style={{
-                      padding: "10px 12px",
-                      borderRadius: "6px",
                       border: `1px solid ${selectedProvider === p ? '#00f05860' : 'var(--border-2)'}`,
                       background: selectedProvider === p ? "#0d200f" : "var(--surf-2)",
-                      cursor: "pointer",
-                      textAlign: "left",
                     }}
                   >
-                    <div style={{ fontSize: "var(--text-label)", fontWeight: 600, color: selectedProvider === p ? "#00f058" : "var(--text-2)", marginBottom: "2px" }}>
+                    <div
+                      className="ai-provider-btn__name"
+                      style={{ color: selectedProvider === p ? "#00f058" : "var(--text-2)" }}
+                    >
                       {PROVIDER_LABELS[p]}
                     </div>
-                    <div style={{ fontSize: "var(--text-overline)", color: "var(--text-3)", lineHeight: 1.3 }}>
+                    <div className="ai-provider-btn__desc">
                       {PROVIDER_DESCRIPTIONS[p]}
                     </div>
                   </button>
@@ -232,11 +227,11 @@ export function AISettingsCard() {
 
             {/* Model selection */}
             <div>
-              <Label style={{ display: "block", marginBottom: "6px" }}>Model</Label>
+              <Label className="block mb-6">Model</Label>
               <select
                 value={selectedModel}
                 onChange={e => setSelectedModel(e.target.value)}
-                style={{ width: "100%", background: "var(--surf-2)", border: "1px solid var(--border-2)", borderRadius: "4px", color: "var(--text-2)", padding: "7px 10px", fontSize: "var(--text-label)", fontFamily: "var(--font-sans)" }}
+                className="ai-model-select"
               >
                 {PROVIDER_MODELS[selectedProvider].map(m => (
                   <option key={m.id} value={m.id}>{m.label}</option>
@@ -246,35 +241,35 @@ export function AISettingsCard() {
 
             {/* API key */}
             <div>
-              <Label style={{ display: "block", marginBottom: "6px" }}>API Key</Label>
-              <div style={{ position: "relative" }}>
+              <Label className="block mb-6">API Key</Label>
+              <div className="relative">
                 <Input
                   type={showKey ? "text" : "password"}
                   value={apiKey}
                   onChange={e => { setApiKey(e.target.value); setTestResult(null) }}
                   placeholder={`Paste your ${PROVIDER_LABELS[selectedProvider]} API key`}
-                  style={{ paddingRight: "36px" }}
+                  className="ai-key-input"
                 />
                 <button
                   onClick={() => setShowKey(s => !s)}
-                  style={{ position: "absolute", right: "10px", top: "50%", transform: "translateY(-50%)", background: "none", border: "none", cursor: "pointer", color: "var(--text-3)", padding: 0 }}
+                  className="ai-key-toggle"
                 >
-                  {showKey ? <EyeOff style={{ width: "14px", height: "14px" }} /> : <Eye style={{ width: "14px", height: "14px" }} />}
+                  {showKey ? <EyeOff /> : <Eye />}
                 </button>
               </div>
-              <p style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", marginTop: "4px" }}>
+              <p className="ai-key-hint">
                 When you use AI features, your data (meeting notes, evidence entries, etc.) is sent to {PROVIDER_LABELS[selectedProvider]} for processing. Caliber does not store or access your data beyond what's in your account.
               </p>
             </div>
 
             {testResult === 'fail' && (
-              <div style={{ display: "flex", alignItems: "center", gap: "6px", padding: "8px 12px", borderRadius: "4px", background: "#2a0a0a", border: "1px solid #f8717140", color: "#f87171", fontSize: "var(--text-caption)" }}>
-                <X style={{ width: "12px", height: "12px", flexShrink: 0 }} />
+              <div className="ai-error-box">
+                <X />
                 {testError}
               </div>
             )}
 
-            <div style={{ display: "flex", gap: "8px" }}>
+            <div className="flex-align gap-8">
               <Button onClick={handleSaveAndTest} disabled={!apiKey.trim() || saving || testing}>
                 {saving || testing
                   ? <><Loader2 className="h-4 w-4 mr-2 animate-spin" />{testing ? 'Testing connection…' : 'Saving…'}</>
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index e5f0dfa..d382296 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -28,7 +28,7 @@ import { fetchSignalCounts } from "@/lib/hooks/use-weekly-review-signals"
 import { getMondayOfWeek, getWeeklyReview } from "@/lib/services/weekly-review"
 
 type NavItem =
-  | { name: string; href: string; icon: React.ComponentType<{ style?: React.CSSProperties }> }
+  | { name: string; href: string; icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }> }
   | { label: string }
 
 const navigation: NavItem[] = [
@@ -132,74 +132,45 @@ export function Sidebar({ isOpen, onToggle }: SidebarProps) {
 
   return (
     <div
-      className="flex h-full flex-col flex-shrink-0 transition-all duration-300"
-      style={{
-        width: isOpen ? "200px" : "44px",
-        background: "var(--surf)",
-        borderRight: "1px solid var(--border-1)",
-      }}
+      className="flex h-full flex-col flex-shrink-0 transition-all duration-300 sidebar"
+      style={{ width: isOpen ? "200px" : "44px" }}
     >
       {/* Logo + collapse toggle */}
-      <div style={{ display: "flex", alignItems: "center", height: "48px", padding: "0 10px", gap: "6px" }}>
+      <div className="sidebar-header">
         {isOpen && (
-          <Link href="/dashboard" style={{ flex: 1, display: "flex", alignItems: "center" }}>
+          <Link href="/dashboard" className="sidebar-logo-link">
             <Image
               src="/logo_transparent.png"
               alt="Caliber"
-              width={110}
-              height={28}
-              className="object-contain"
-              style={{ height: "28px", width: "auto" }}
+              width={160}
+              height={42}
+              unoptimized
+              className="object-contain sidebar-logo"
             />
           </Link>
         )}
         <button
           onClick={onToggle}
-          style={{
-            background: "none",
-            border: "none",
-            color: "var(--text-3)",
-            cursor: "pointer",
-            padding: "4px",
-            borderRadius: "4px",
-            display: "flex",
-            alignItems: "center",
-            marginLeft: isOpen ? "auto" : "0",
-          }}
-          onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-          onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+          className="sidebar-toggle"
+          style={{ marginLeft: isOpen ? "auto" : "0" }}
           aria-label={isOpen ? "Collapse sidebar" : "Expand sidebar"}
         >
           {isOpen
-            ? <ChevronLeft style={{ width: "12px", height: "12px" }} />
-            : <ChevronRight style={{ width: "12px", height: "12px" }} />
+            ? <ChevronLeft className="sidebar-nav-icon" />
+            : <ChevronRight className="sidebar-nav-icon" />
           }
         </button>
       </div>
 
       {/* Nav */}
-      <nav style={{ flex: 1, padding: "4px 10px", display: "flex", flexDirection: "column" }}>
+      <nav className="sidebar-nav">
         {navigation.map((item, idx) => {
           if ('label' in item) {
             if (!isOpen) {
-              return (
-                <div key={`label-${idx}`} style={{
-                  height: "1px",
-                  background: "var(--border-1)",
-                  margin: "4px 0",
-                }} />
-              )
+              return <div key={`label-${idx}`} className="sidebar-divider" />
             }
             return (
-              <div key={`label-${idx}`} style={{
-                fontSize: "9px",
-                textTransform: "uppercase",
-                letterSpacing: "0.08em",
-                color: "var(--text-3)",
-                padding: "10px 4px 4px",
-                fontWeight: 500,
-                userSelect: "none",
-              }}>
+              <div key={`label-${idx}`} className="sidebar-section-label">
                 {item.label}
               </div>
             )
@@ -234,37 +205,17 @@ export function Sidebar({ isOpen, onToggle }: SidebarProps) {
               className={`nav-item${isActive ? " active" : ""}${!isOpen ? " nav-item-collapsed" : ""}`}
             >
               <item.icon
-                style={{
-                  width: "12px",
-                  height: "12px",
-                  flexShrink: 0,
-                  opacity: isActive ? 1 : 0.5,
-                }}
+                className={`sidebar-nav-icon${isActive ? " sidebar-nav-icon--active" : ""}`}
               />
-              {isOpen && <span style={{ flex: 1 }}>{item.name}</span>}
+              {isOpen && <span className="flex-1">{item.name}</span>}
               {dotColor && (
-                <span style={{
-                  width: "6px",
-                  height: "6px",
-                  borderRadius: "50%",
-                  background: dotColor,
-                  flexShrink: 0,
-                }} />
+                <span className="nav-dot" style={{ background: dotColor }} />
               )}
               {badge !== null && (
-                <span style={{
-                  background: badgeBg,
-                  color: badgeColor,
-                  borderRadius: "10px",
-                  padding: "0 5px",
-                  fontSize: "var(--text-overline)",
-                  fontWeight: 600,
-                  fontFamily: "var(--font-mono)",
-                  lineHeight: "16px",
-                  flexShrink: 0,
-                  minWidth: "16px",
-                  textAlign: "center",
-                }}>
+                <span
+                  className="nav-badge"
+                  style={{ background: badgeBg, color: badgeColor }}
+                >
                   {badge > 99 ? "99+" : badge}
                 </span>
               )}
@@ -274,60 +225,23 @@ export function Sidebar({ isOpen, onToggle }: SidebarProps) {
       </nav>
 
       {/* User / Settings */}
-      <div style={{ padding: "8px 10px", position: "relative" }} ref={menuRef}>
+      <div className="sidebar-user" ref={menuRef}>
         {menuOpen && (
-          <div style={{
-            position: "absolute",
-            bottom: "calc(100% + 4px)",
-            left: "8px",
-            right: "8px",
-            background: "var(--surf-2, #1e1e1e)",
-            border: "1px solid var(--border-1)",
-            borderRadius: "8px",
-            overflow: "hidden",
-            zIndex: 200,
-            boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
-          }}>
+          <div className="sidebar-menu">
             <Link
               href="/settings"
               onClick={() => setMenuOpen(false)}
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                padding: "9px 12px",
-                fontSize: "var(--text-meta, 12px)",
-                color: "var(--text-2)",
-                textDecoration: "none",
-                transition: "background 0.1s",
-              }}
-              onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3, #2a2a2a)")}
-              onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
+              className="sidebar-menu-item"
             >
-              <Settings style={{ width: "13px", height: "13px", flexShrink: 0 }} />
+              <Settings />
               {isOpen && <span>Settings</span>}
             </Link>
-            <div style={{ height: "1px", background: "var(--border-1)" }} />
+            <div className="sidebar-divider" />
             <button
               onClick={handleLogout}
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: "8px",
-                padding: "9px 12px",
-                width: "100%",
-                fontSize: "var(--text-meta, 12px)",
-                color: "#e05555",
-                background: "transparent",
-                border: "none",
-                cursor: "pointer",
-                fontFamily: "inherit",
-                transition: "background 0.1s",
-              }}
-              onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3, #2a2a2a)")}
-              onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
+              className="sidebar-menu-item sidebar-menu-item--danger"
             >
-              <LogOut style={{ width: "13px", height: "13px", flexShrink: 0 }} />
+              <LogOut />
               {isOpen && <span>Log out</span>}
             </button>
           </div>
@@ -335,37 +249,24 @@ export function Sidebar({ isOpen, onToggle }: SidebarProps) {
         <button
           onClick={() => setMenuOpen(o => !o)}
           title={!isOpen ? userName : undefined}
-          className={`nav-item${!isOpen ? " nav-item-collapsed" : ""}`}
-          style={{ marginBottom: 0, width: "100%", background: "none", border: "none", cursor: "pointer", fontFamily: "inherit", textAlign: "left" }}
+          className={`nav-item sidebar-user-btn${!isOpen ? " nav-item-collapsed" : ""}`}
         >
           {userAvatar ? (
             <img
               src={userAvatar}
               alt={userName}
               referrerPolicy="no-referrer"
-              style={{ width: "20px", height: "20px", borderRadius: "50%", objectFit: "cover", flexShrink: 0 }}
+              className="sidebar-avatar"
             />
           ) : (
-            <div style={{
-              width: "20px",
-              height: "20px",
-              borderRadius: "50%",
-              background: "var(--surf-3)",
-              color: "var(--text-2)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "var(--text-overline)",
-              fontWeight: 500,
-              flexShrink: 0,
-            }}>
+            <div className="sidebar-avatar-initials">
               {userInitials}
             </div>
           )}
           {isOpen && (
-            <div style={{ overflow: "hidden", flex: 1 }}>
-              <div style={{ fontSize: "var(--text-meta)", color: "var(--text-1)", fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{userName}</div>
-              <div style={{ fontSize: "var(--text-overline)", color: "var(--text-3)" }}>Account</div>
+            <div className="sidebar-username">
+              <div className="sidebar-username__name">{userName}</div>
+              <div className="sidebar-username__sub">Account</div>
             </div>
           )}
         </button>
diff --git a/components/tasks/backlog-table.tsx b/components/tasks/backlog-table.tsx
index afc2eef..22e2000 100644
--- a/components/tasks/backlog-table.tsx
+++ b/components/tasks/backlog-table.tsx
@@ -153,38 +153,18 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
   return (
     <div className="space-y-0">
       {/* Controls row */}
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px", marginBottom: "12px" }}>
+      <div className="backlog-controls">
         {/* Left: search + filters button */}
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <div className="backlog-controls-left">
           {/* Search */}
-          <div style={{ position: "relative" }}>
-            <Search
-              className="absolute"
-              style={{
-                width: "14px",
-                height: "14px",
-                left: "10px",
-                top: "50%",
-                transform: "translateY(-50%)",
-                color: "var(--text-3)",
-                pointerEvents: "none",
-              }}
-            />
+          <div className="backlog-search-wrap">
+            <Search className="absolute backlog-search-icon" />
             <input
               type="text"
               placeholder="Search tasks..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              style={{
-                background: "var(--surf)",
-                border: "1px solid var(--border-1)",
-                borderRadius: "6px",
-                padding: "5px 10px 5px 30px",
-                fontSize: "var(--text-label)",
-                color: "var(--text-1)",
-                width: "180px",
-                outline: "none",
-              }}
+              className="backlog-search-input"
               onFocus={e => (e.currentTarget.style.borderColor = "var(--border-2)")}
               onBlur={e => (e.currentTarget.style.borderColor = "var(--border-1)")}
             />
@@ -193,24 +173,15 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
           {/* Filters button */}
           <button
             onClick={() => setShowFilters(!showFilters)}
-            style={{
-              background: showFilters ? "var(--surf-3)" : "transparent",
-              border: "1px solid var(--border-2)",
-              color: "var(--text-2)",
-              fontSize: "var(--text-label)",
-              padding: "5px 10px",
-              borderRadius: "6px",
-              cursor: "pointer",
-            }}
-            onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-            onMouseLeave={e => (e.currentTarget.style.color = "var(--text-2)")}
+            className="backlog-filters-btn"
+            style={{ background: showFilters ? "var(--surf-3)" : "transparent" }}
           >
             Filters
           </button>
         </div>
 
         {/* Right: AI Prioritise + New task */}
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+        <div className="backlog-controls-right">
           {/* AI Prioritise button */}
           <button
             onClick={handleAIPrioritise}
@@ -260,22 +231,7 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
           </button>
 
           {/* New task */}
-          <button
-            onClick={onQuickAdd}
-            style={{
-              background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)",
-              color: "#0a1a0a",
-              fontSize: "var(--text-caption)",
-              fontWeight: 600,
-              padding: "4px 10px",
-              borderRadius: "4px",
-              border: "none",
-              cursor: "pointer",
-              display: "flex",
-              alignItems: "center",
-              gap: "5px",
-            }}
-          >
+          <button onClick={onQuickAdd} className="backlog-new-task-btn">
             <Plus className="h-3.5 w-3.5" />
             New task
           </button>
@@ -284,54 +240,26 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
 
       {/* AI ranking active banner */}
       {aiRankings && (
-        <div style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "8px",
-          padding: "8px 12px",
-          background: "rgba(124,58,237,0.08)",
-          border: "1px solid rgba(124,58,237,0.25)",
-          borderRadius: "6px",
-          marginBottom: "12px",
-          fontSize: "var(--text-label)",
-          color: "#a78bfa",
-        }}>
-          <Sparkles style={{ width: "13px", height: "13px", flexShrink: 0 }} />
-          <span>Backlog ranked by AI priority. Hover the rank number to see the reason. <strong style={{ color: "#c4b5fd" }}>Drag to reorder manually.</strong></span>
+        <div className="backlog-ai-banner">
+          <Sparkles />
+          <span>Backlog ranked by AI priority. Hover the rank number to see the reason. <strong>Drag to reorder manually.</strong></span>
         </div>
       )}
 
       {/* Filter row */}
       {showFilters && (
-        <div style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "16px",
-          padding: "12px 16px",
-          background: "var(--surf)",
-          border: "1px solid var(--border-1)",
-          borderRadius: "8px",
-          marginBottom: "12px",
-        }}>
+        <div className="backlog-filter-row">
           {[
             { label: "Status", value: statusFilter, onChange: (v: string) => setStatusFilter(v as TaskStatus | "all"), options: TASK_STATUSES },
             { label: "Priority", value: priorityFilter, onChange: (v: string) => setPriorityFilter(v as TaskPriority | "all"), options: TASK_PRIORITIES },
             { label: "Category", value: categoryFilter, onChange: (v: string) => setCategoryFilter(v as TaskCategory | "all"), options: TASK_CATEGORIES },
           ].map(({ label, value, onChange, options }) => (
-            <div key={label} style={{ display: "flex", alignItems: "center", gap: "6px" }}>
-              <label style={{ fontSize: "var(--text-label)", color: "var(--text-2)", fontWeight: 500 }}>{label}:</label>
+            <div key={label} className="backlog-filter-item">
+              <label className="backlog-filter-label">{label}:</label>
               <select
                 value={value}
                 onChange={(e) => onChange(e.target.value)}
-                style={{
-                  background: "var(--surf-2)",
-                  border: "1px solid var(--border-2)",
-                  borderRadius: "4px",
-                  padding: "3px 6px",
-                  fontSize: "var(--text-label)",
-                  color: "var(--text-1)",
-                  cursor: "pointer",
-                }}
+                className="backlog-filter-select"
               >
                 <option value="all">All</option>
                 {options.map((opt) => (
@@ -346,13 +274,8 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
       {/* Table */}
       <div
         ref={setNodeRef}
-        style={{
-          background: "var(--surf)",
-          border: isOver ? "1px solid var(--border-2)" : "1px solid var(--border-1)",
-          borderRadius: "8px",
-          overflow: "hidden",
-        }}
-        className="max-md:overflow-x-auto"
+        className="backlog-table-wrap max-md:overflow-x-auto"
+        style={{ border: isOver ? "1px solid var(--border-2)" : "1px solid var(--border-1)" }}
       >
         <table className="w-full border-collapse">
           <colgroup>
@@ -366,15 +289,13 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
             <col style={{ width: "80px" }} />
           </colgroup>
           <thead>
-            <tr style={{ borderBottom: "1px solid var(--border-1)" }}>
+            <tr className="backlog-thead-tr">
               {/* Drag handle col */}
-              <th style={{ padding: "8px 12px", background: "var(--surf)" }} />
+              <th className="backlog-th-handle" />
               {/* AI rank col header */}
               {aiRankings && (
-                <th style={{ padding: "8px 6px", background: "var(--surf)", textAlign: "center" }}>
-                  <span style={{ fontSize: "var(--text-overline)", color: "#a78bfa", fontFamily: "var(--font-mono)", fontWeight: 600 }}>
-                    #
-                  </span>
+                <th className="backlog-th-rank">
+                  <span className="backlog-th-rank-label">#</span>
                 </th>
               )}
               {/* Sortable columns */}
@@ -387,34 +308,19 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
                   category: "Category",
                 }
                 return (
-                  <th
-                    key={field}
-                    className="col-header"
-                    style={{ padding: "8px 12px", background: "var(--surf)" }}
-                  >
+                  <th key={field} className="backlog-th">
                     <button
                       onClick={() => handleSort(field)}
-                      className="col-header"
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "4px",
-                        background: "none",
-                        border: "none",
-                        cursor: "pointer",
-                        padding: 0,
-                      }}
-                      onMouseEnter={e => (e.currentTarget.style.color = "var(--text-2)")}
-                      onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+                      className="backlog-sort-btn"
                     >
                       {labels[field]}
-                      <ArrowUpDown style={{ width: "11px", height: "11px", flexShrink: 0 }} />
+                      <ArrowUpDown />
                     </button>
                   </th>
                 )
               })}
               {/* Actions col */}
-              <th style={{ padding: "8px 12px", background: "var(--surf)" }} />
+              <th className="backlog-th" />
             </tr>
           </thead>
           <tbody>
@@ -427,11 +333,11 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
                 >
                   {/* Drag handle */}
                   <td
-                    style={{ padding: "9px 12px", textAlign: "center" }}
+                    className="backlog-td-handle"
                     onDoubleClick={(e) => e.stopPropagation()}
                   >
                     <div className="active:cursor-grabbing drag-handle cursor-grab inline-flex">
-                      <GripVertical style={{ width: "14px", height: "14px", color: "var(--text-3)" }} />
+                      <GripVertical className="backlog-grip-icon" />
                     </div>
                   </td>
 
@@ -440,42 +346,33 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
                     const ranking = rankMap.get(task.id)
                     return (
                       <td
-                        style={{ padding: "9px 6px", textAlign: "center" }}
+                        className="backlog-td-rank"
                         title={ranking?.reason ?? "Not ranked"}
                       >
                         {ranking ? (
-                          <span style={{
-                            display: "inline-flex",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            width: "22px",
-                            height: "22px",
-                            borderRadius: "50%",
-                            background: ranking.rank <= 3 ? "rgba(124,58,237,0.2)" : "var(--surf-3)",
-                            color: ranking.rank <= 3 ? "#a78bfa" : "var(--text-3)",
-                            fontSize: "var(--text-overline)",
-                            fontFamily: "var(--font-mono)",
-                            fontWeight: 700,
-                          }}>
+                          <span
+                            className="backlog-rank-badge"
+                            style={{
+                              background: ranking.rank <= 3 ? "rgba(124,58,237,0.2)" : "var(--surf-3)",
+                              color: ranking.rank <= 3 ? "#a78bfa" : "var(--text-3)",
+                            }}
+                          >
                             {ranking.rank}
                           </span>
                         ) : (
-                          <span style={{ color: "var(--text-3)", fontSize: "var(--text-overline)" }}>—</span>
+                          <span className="backlog-rank-unranked">—</span>
                         )}
                       </td>
                     )
                   })()}
 
                   {/* Name */}
-                  <td
-                    style={{ padding: "9px 12px", color: "var(--text-1)", fontSize: "var(--text-meta)", overflow: "hidden" }}
-                    title={task.title}
-                  >
+                  <td className="backlog-td-name" title={task.title}>
                     <div className="line-clamp-2 break-all max-md:break-words">{task.title}</div>
                   </td>
 
                   {/* Status */}
-                  <td style={{ padding: "9px 12px" }} onClick={(e) => e.stopPropagation()}>
+                  <td className="backlog-td" onClick={(e) => e.stopPropagation()}>
                     <BadgeSelect
                       value={task.status}
                       onValueChange={(value) => onUpdateTask(task.id, { status: value as TaskStatus })}
@@ -497,17 +394,12 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
                   </td>
 
                   {/* Due date */}
-                  <td style={{
-                    padding: "9px 12px",
-                    fontSize: "var(--text-overline)",
-                    color: "var(--text-3)",
-                    fontFamily: "var(--font-mono)",
-                  }}>
+                  <td className="backlog-td-date">
                     {formatDate(task.dueDate) || "—"}
                   </td>
 
                   {/* Priority */}
-                  <td style={{ padding: "9px 12px" }} onClick={(e) => e.stopPropagation()}>
+                  <td className="backlog-td" onClick={(e) => e.stopPropagation()}>
                     <BadgeSelect
                       value={task.priority}
                       onValueChange={(value) => onUpdateTask(task.id, { priority: value as TaskPriority })}
@@ -529,7 +421,7 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
                   </td>
 
                   {/* Category */}
-                  <td style={{ padding: "9px 12px" }} onClick={(e) => e.stopPropagation()}>
+                  <td className="backlog-td" onClick={(e) => e.stopPropagation()}>
                     <BadgeSelect
                       value={task.category}
                       onValueChange={(value) => onUpdateTask(task.id, { category: value as TaskCategory })}
@@ -552,41 +444,21 @@ export function BacklogTable({ tasks, onUpdateTask, onQuickAdd, onEdit, onDelete
 
                   {/* Actions */}
                   <td
-                    style={{ padding: "9px 12px", textAlign: "center" }}
+                    className="backlog-td-actions"
                     onClick={(e) => e.stopPropagation()}
                     onDoubleClick={(e) => e.stopPropagation()}
                   >
                     <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 justify-center">
                       <button
                         onClick={(e) => { e.stopPropagation(); onEdit(task) }}
-                        style={{
-                          border: "1px solid var(--border-2)",
-                          color: "var(--text-3)",
-                          borderRadius: "4px",
-                          padding: "2px 7px",
-                          fontSize: "var(--text-meta)",
-                          background: "none",
-                          cursor: "pointer",
-                        }}
-                        onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-                        onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+                        className="backlog-action-btn"
                       >
                         Edit
                       </button>
                       {onDelete && (
                         <button
                           onClick={(e) => { e.stopPropagation(); onDelete(task.id) }}
-                          style={{
-                            border: "1px solid var(--border-2)",
-                            color: "var(--text-3)",
-                            borderRadius: "4px",
-                            padding: "2px 7px",
-                            fontSize: "var(--text-meta)",
-                            background: "none",
-                            cursor: "pointer",
-                          }}
-                          onMouseEnter={e => (e.currentTarget.style.color = "#f87171")}
-                          onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+                          className="backlog-action-btn backlog-action-btn--danger"
                           aria-label="Delete task"
                         >
                           Delete
diff --git a/components/tasks/board-column.tsx b/components/tasks/board-column.tsx
index f4144ee..b1f82d3 100644
--- a/components/tasks/board-column.tsx
+++ b/components/tasks/board-column.tsx
@@ -32,50 +32,19 @@ export function BoardColumn({ status, tasks, onEdit, onDelete, onQuickAdd }: Boa
 
   return (
     <div
-      className="flex flex-col h-full max-md:flex-shrink-0 rounded-lg overflow-hidden"
-      style={{
-        background: "var(--surf)",
-        border: "1px solid var(--border-1)",
-      }}
+      className="board-col-outer flex flex-col h-full max-md:flex-shrink-0 rounded-lg overflow-hidden"
     >
       {/* Column header */}
-      <div
-        style={{
-          padding: "10px 14px",
-          borderBottom: "1px solid var(--border-1)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
+      <div className="board-col-header">
         {/* Left: dot + name + count */}
-        <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
-          <span style={{
-            display: "inline-block",
-            width: "7px",
-            height: "7px",
-            borderRadius: "50%",
-            background: dotColor,
-            flexShrink: 0,
-          }} />
-          <span style={{ fontSize: "var(--text-meta)", fontWeight: 500, color: "var(--text-1)" }}>{status}</span>
-          <span style={{
-            background: "var(--surf-3)",
-            color: "var(--text-3)",
-            fontSize: "var(--text-overline)",
-            borderRadius: "3px",
-            padding: "1px 5px",
-            fontFamily: "var(--font-mono)",
-          }}>{tasks.length}</span>
+        <div className="board-col-header-left">
+          <span className="board-col-dot" style={{ background: dotColor }} />
+          <span className="board-col-name">{status}</span>
+          <span className="board-col-count">{tasks.length}</span>
         </div>
 
         {/* Right: add button */}
-        <button
-          onClick={() => onQuickAdd(status)}
-          style={{ color: "var(--text-3)", background: "none", border: "none", cursor: "pointer", lineHeight: 1 }}
-          onMouseEnter={e => (e.currentTarget.style.color = "#00f058")}
-          onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
-        >
+        <button onClick={() => onQuickAdd(status)} className="board-col-add-btn">
           <Plus className="h-4 w-4" />
         </button>
       </div>
@@ -84,18 +53,12 @@ export function BoardColumn({ status, tasks, onEdit, onDelete, onQuickAdd }: Boa
       <div
         ref={setNodeRef}
         className={cn(
-          "flex-1 flex flex-col min-h-[360px] transition-all duration-200",
+          "board-col-body flex-1 flex flex-col min-h-[360px] transition-all duration-200",
           isOver && "ring-1 ring-inset"
         )}
-        style={{
-          padding: "10px",
-          gap: "6px",
-          display: "flex",
-          flexDirection: "column",
-          ...(isOver ? { boxShadow: "inset 0 0 0 1px var(--border-2)" } : {}),
-        }}
+        style={isOver ? { boxShadow: "inset 0 0 0 1px var(--border-2)" } : undefined}
       >
-        <div className="flex-1" style={{ display: "flex", flexDirection: "column", gap: "6px", minHeight: "100px" }}>
+        <div className="board-col-inner-list flex-1">
           <SortableContext items={tasks.map((t) => t.id)} strategy={verticalListSortingStrategy}>
             {tasks.map((task) => (
               <DraggableTaskCard key={task.id} task={task} onEdit={onEdit} onDelete={onDelete} />
@@ -104,55 +67,21 @@ export function BoardColumn({ status, tasks, onEdit, onDelete, onQuickAdd }: Boa
 
           {/* Empty state when done column is empty (not dragging) */}
           {tasks.length === 0 && !isOver && status === "Done" && (
-            <div style={{
-              border: "1px dashed var(--border-1)",
-              borderRadius: "6px",
-              minHeight: "60px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}>
-              <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>No tasks yet</span>
+            <div className="board-col-empty">
+              <span className="board-col-empty-text">No tasks yet</span>
             </div>
           )}
 
           {/* Drop placeholder when dragging over empty column */}
           {tasks.length === 0 && isOver && (
-            <div style={{
-              height: "60px",
-              border: "1px dashed var(--border-2)",
-              borderRadius: "6px",
-              background: "var(--surf-2)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}>
-              <span style={{ fontSize: "var(--text-caption)", color: "var(--text-3)" }}>Drop here</span>
+            <div className="board-col-drop-placeholder">
+              <span className="board-col-empty-text">Drop here</span>
             </div>
           )}
         </div>
 
         {/* Add task row */}
-        <button
-          onClick={() => onQuickAdd(status)}
-          style={{
-            padding: "7px 12px",
-            borderTop: "1px solid var(--border-1)",
-            borderLeft: "none",
-            borderRight: "none",
-            borderBottom: "none",
-            color: "var(--text-3)",
-            fontSize: "var(--text-caption)",
-            background: "none",
-            cursor: "pointer",
-            display: "flex",
-            alignItems: "center",
-            gap: "5px",
-            width: "100%",
-          }}
-          onMouseEnter={e => (e.currentTarget.style.color = "#00f058")}
-          onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
-        >
+        <button onClick={() => onQuickAdd(status)} className="board-col-add-task-btn">
           <Plus className="h-3.5 w-3.5" />
           Add task
         </button>
diff --git a/components/tasks/draggable-table-row.tsx b/components/tasks/draggable-table-row.tsx
index 4c4f856..6bf12a4 100644
--- a/components/tasks/draggable-table-row.tsx
+++ b/components/tasks/draggable-table-row.tsx
@@ -37,14 +37,8 @@ export function DraggableTableRow({ task, children, onDoubleClick }: DraggableTa
   if (isDragging) {
     return (
       <tr ref={setNodeRef} style={style} {...attributes}>
-        <td colSpan={7} style={{ padding: "6px 12px" }}>
-          <div style={{
-            height: "32px",
-            border: "1px dashed var(--border-2)",
-            borderRadius: "4px",
-            background: "var(--surf-2)",
-            opacity: 0.5,
-          }} />
+        <td colSpan={7} className="drag-placeholder-td">
+          <div className="drag-placeholder-row" />
         </td>
       </tr>
     )
@@ -66,10 +60,10 @@ export function DraggableTableRow({ task, children, onDoubleClick }: DraggableTa
   return (
     <tr
       ref={setNodeRef}
-      style={{ ...style, borderBottom: "1px solid var(--border-1)" }}
+      style={style}
       {...attributes}
       onDoubleClick={onDoubleClick}
-      className="group transition-colors cursor-pointer"
+      className="draggable-row group transition-colors cursor-pointer"
       onMouseEnter={e => ((e.currentTarget as HTMLElement).style.background = "var(--surf-2)")}
       onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = "transparent")}
     >
diff --git a/components/tasks/draggable-task-card.tsx b/components/tasks/draggable-task-card.tsx
index aa34808..78cf67e 100644
--- a/components/tasks/draggable-task-card.tsx
+++ b/components/tasks/draggable-task-card.tsx
@@ -36,13 +36,7 @@ export function DraggableTaskCard({ task, onEdit, onDelete }: DraggableTaskCardP
   if (isDragging) {
     return (
       <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-        <div style={{
-          height: "80px",
-          border: "1px dashed var(--border-2)",
-          borderRadius: "6px",
-          background: "var(--surf-2)",
-          opacity: 0.5,
-        }} />
+        <div className="drag-placeholder-card" />
       </div>
     )
   }
diff --git a/components/tasks/natural-language-task-input.tsx b/components/tasks/natural-language-task-input.tsx
index 0733ecc..6364f00 100644
--- a/components/tasks/natural-language-task-input.tsx
+++ b/components/tasks/natural-language-task-input.tsx
@@ -119,84 +119,55 @@ export function NaturalLanguageTaskInput({
 
   return (
     <>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "8px",
-          background: "var(--surface-2)",
-          border: "1px solid var(--border-2)",
-          borderRadius: "8px",
-          padding: "6px 8px",
-          maxWidth: "480px",
-          width: "100%",
-        }}
-      >
-        <Sparkles
-          size={15}
-          style={{ color: "var(--text-3)", flexShrink: 0 }}
-          aria-hidden
-        />
+      <div className="nl-task-wrap">
+        <Sparkles size={15} className="nl-task-icon" aria-hidden />
         <Input
           value={input}
           onChange={e => setInput(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder="Describe a task... (Enter to parse)"
           disabled={isParsing}
-          style={{
-            border: "none",
-            background: "transparent",
-            padding: 0,
-            height: "auto",
-            fontSize: "var(--text-caption)",
-            color: "var(--text-1)",
-            boxShadow: "none",
-            outline: "none",
-          }}
+          className="nl-task-bare-input"
           aria-label="Natural language task input"
         />
         <button
           onClick={handleParse}
           disabled={!input.trim() || isParsing}
+          className="nl-task-submit-btn"
           style={{
-            background: "none",
-            border: "none",
-            padding: "2px 4px",
             cursor: input.trim() && !isParsing ? "pointer" : "default",
             color: input.trim() && !isParsing ? "var(--text-2)" : "var(--text-4)",
-            flexShrink: 0,
-            display: "flex",
-            alignItems: "center",
           }}
           aria-label="Parse task"
         >
           {isParsing ? (
             <Loader2 size={14} className="animate-spin" />
           ) : (
-            <span style={{ fontSize: "var(--text-meta)" }}>⏎</span>
+            <span className="nl-task-enter">⏎</span>
           )}
         </button>
       </div>
 
       {/* Preview dialog */}
       <Dialog open={isPreviewOpen} onOpenChange={open => !open && handleClose()}>
-        <DialogContent style={{ maxWidth: "480px" }}>
+        <DialogContent className="nl-dialog">
           <DialogHeader>
             <DialogTitle>Review parsed task</DialogTitle>
             <DialogDescription>
               {preview && (
-                <span style={{ display: "flex", alignItems: "center", gap: "6px" }}>
+                <span className="nl-preview-header">
                   {ConfidenceIcon && (
                     <ConfidenceIcon
                       size={14}
-                      style={{ color: confidenceConfig?.color, flexShrink: 0 }}
+                      className="nl-confidence-icon"
+                      style={{ color: confidenceConfig?.color }}
                       aria-hidden
                     />
                   )}
-                  <span style={{ color: confidenceConfig?.color, fontSize: "var(--text-meta)" }}>
+                  <span className="nl-preview-confidence-label" style={{ color: confidenceConfig?.color }}>
                     {confidenceConfig?.label}
                   </span>
-                  <span style={{ color: "var(--text-3)", fontSize: "var(--text-meta)" }}>
+                  <span className="nl-preview-raw">
                     — from: &ldquo;{preview.rawInput}&rdquo;
                   </span>
                 </span>
@@ -205,9 +176,9 @@ export function NaturalLanguageTaskInput({
           </DialogHeader>
 
           {preview && (
-            <div style={{ display: "flex", flexDirection: "column", gap: "16px", paddingTop: "8px" }}>
+            <div className="nl-preview-grid">
               {/* Title */}
-              <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+              <div className="nl-preview-field">
                 <Label htmlFor="nl-title">Title</Label>
                 <Input
                   id="nl-title"
@@ -217,47 +188,33 @@ export function NaturalLanguageTaskInput({
                 />
               </div>
 
-              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
+              <div className="nl-preview-2col">
                 {/* Priority */}
-                <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+                <div className="nl-preview-field">
                   <Label htmlFor="nl-priority">Priority</Label>
-                  <Select
-                    value={preview.priority}
-                    onValueChange={val => updatePreview("priority", val)}
-                  >
-                    <SelectTrigger id="nl-priority">
-                      <SelectValue />
-                    </SelectTrigger>
+                  <Select value={preview.priority} onValueChange={val => updatePreview("priority", val)}>
+                    <SelectTrigger id="nl-priority"><SelectValue /></SelectTrigger>
                     <SelectContent>
-                      {TASK_PRIORITIES.map(p => (
-                        <SelectItem key={p} value={p}>{p}</SelectItem>
-                      ))}
+                      {TASK_PRIORITIES.map(p => <SelectItem key={p} value={p}>{p}</SelectItem>)}
                     </SelectContent>
                   </Select>
                 </div>
 
                 {/* Category */}
-                <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+                <div className="nl-preview-field">
                   <Label htmlFor="nl-category">Category</Label>
-                  <Select
-                    value={preview.category}
-                    onValueChange={val => updatePreview("category", val)}
-                  >
-                    <SelectTrigger id="nl-category">
-                      <SelectValue />
-                    </SelectTrigger>
+                  <Select value={preview.category} onValueChange={val => updatePreview("category", val)}>
+                    <SelectTrigger id="nl-category"><SelectValue /></SelectTrigger>
                     <SelectContent>
-                      {TASK_CATEGORIES.map(c => (
-                        <SelectItem key={c} value={c}>{c}</SelectItem>
-                      ))}
+                      {TASK_CATEGORIES.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
                     </SelectContent>
                   </Select>
                 </div>
               </div>
 
-              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
+              <div className="nl-preview-2col">
                 {/* Due date */}
-                <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+                <div className="nl-preview-field">
                   <Label htmlFor="nl-due">Due date</Label>
                   <Input
                     id="nl-due"
@@ -268,15 +225,10 @@ export function NaturalLanguageTaskInput({
                 </div>
 
                 {/* List */}
-                <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+                <div className="nl-preview-field">
                   <Label htmlFor="nl-list">List</Label>
-                  <Select
-                    value={preview.list}
-                    onValueChange={val => updatePreview("list", val)}
-                  >
-                    <SelectTrigger id="nl-list">
-                      <SelectValue />
-                    </SelectTrigger>
+                  <Select value={preview.list} onValueChange={val => updatePreview("list", val)}>
+                    <SelectTrigger id="nl-list"><SelectValue /></SelectTrigger>
                     <SelectContent>
                       <SelectItem value="week">This week</SelectItem>
                       <SelectItem value="backlog">Backlog</SelectItem>
@@ -287,34 +239,17 @@ export function NaturalLanguageTaskInput({
 
               {/* Assignee (display-only, matched from people) */}
               {assigneeName && (
-                <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+                <div className="nl-preview-field">
                   <Label>Linked person</Label>
-                  <div
-                    style={{
-                      fontSize: "var(--text-caption)",
-                      color: "var(--text-2)",
-                      background: "var(--surface-2)",
-                      border: "1px solid var(--border-2)",
-                      borderRadius: "6px",
-                      padding: "6px 10px",
-                    }}
-                  >
-                    {assigneeName}
-                  </div>
+                  <div className="nl-assignee-display">{assigneeName}</div>
                 </div>
               )}
             </div>
           )}
 
-          <DialogFooter style={{ marginTop: "8px" }}>
-            <Button variant="outline" onClick={handleClose}>
-              Cancel
-            </Button>
-            <Button
-              onClick={handleConfirm}
-              disabled={!preview?.title.trim()}
-              className="btn-primary"
-            >
+          <DialogFooter className="nl-preview-footer">
+            <Button variant="outline" onClick={handleClose}>Cancel</Button>
+            <Button onClick={handleConfirm} disabled={!preview?.title.trim()} className="btn-primary">
               Create task
             </Button>
           </DialogFooter>
diff --git a/components/tasks/task-card.tsx b/components/tasks/task-card.tsx
index 4c8b557..12a248b 100644
--- a/components/tasks/task-card.tsx
+++ b/components/tasks/task-card.tsx
@@ -24,19 +24,8 @@ const STATUS_BORDER: Record<Task["status"], string> = {
 function PriorityPill({ priority }: { priority: Task["priority"] }) {
   const { bg, color: text, dot } = PRIORITY_BADGE[priority]
   return (
-    <span style={{
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "4px",
-      padding: "2px 7px",
-      borderRadius: "4px",
-      fontSize: "var(--text-overline)",
-      fontWeight: 500,
-      fontFamily: "var(--font-mono)",
-      background: bg,
-      color: text,
-    }}>
-      <span style={{ width: "5px", height: "5px", borderRadius: "50%", background: dot, flexShrink: 0 }} />
+    <span className="priority-pill" style={{ background: bg, color: text }}>
+      <span className="priority-pill-dot" style={{ background: dot }} />
       {priority}
     </span>
   )
@@ -45,19 +34,8 @@ function PriorityPill({ priority }: { priority: Task["priority"] }) {
 function StatusPill({ status }: { status: Task["status"] }) {
   const { bg, color: text, dot } = STATUS_BADGE[status]
   return (
-    <span style={{
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "4px",
-      padding: "2px 7px",
-      borderRadius: "4px",
-      fontSize: "var(--text-overline)",
-      fontWeight: 500,
-      fontFamily: "var(--font-mono)",
-      background: bg,
-      color: text,
-    }}>
-      <span style={{ width: "5px", height: "5px", borderRadius: "50%", background: dot, flexShrink: 0 }} />
+    <span className="priority-pill" style={{ background: bg, color: text }}>
+      <span className="priority-pill-dot" style={{ background: dot }} />
       {status}
     </span>
   )
@@ -154,48 +132,19 @@ export function TaskCard({ task, onEdit, onDelete, isDragging = false }: TaskCar
           onClick={handleMenuClick}
           onPointerDown={(e) => e.stopPropagation()}
           onMouseDown={(e) => e.stopPropagation()}
-          style={{
-            background: "none",
-            border: "none",
-            color: "var(--text-3)",
-            cursor: "pointer",
-            padding: "2px",
-            borderRadius: "4px",
-          }}
+          className="task-card-menu-btn"
           aria-label="Task actions"
         >
           <MoreVertical className="h-4 w-4" />
         </button>
 
         {menuOpen && (
-          <div style={{
-            position: "absolute",
-            right: 0,
-            marginTop: "4px",
-            width: "128px",
-            background: "var(--surf-2)",
-            border: "1px solid var(--border-2)",
-            borderRadius: "8px",
-            boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
-            zIndex: 50,
-            overflow: "hidden",
-          }}>
+          <div className="task-card-menu-dropdown">
             <button
               onClick={handleEdit}
               onPointerDown={(e) => e.stopPropagation()}
               onMouseDown={(e) => e.stopPropagation()}
-              style={{
-                width: "100%",
-                textAlign: "left",
-                padding: "8px 12px",
-                fontSize: "var(--text-label)",
-                color: "var(--text-1)",
-                background: "none",
-                border: "none",
-                cursor: "pointer",
-              }}
-              onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3)")}
-              onMouseLeave={e => (e.currentTarget.style.background = "none")}
+              className="task-card-menu-item task-card-menu-item--edit"
             >
               Edit
             </button>
@@ -204,18 +153,7 @@ export function TaskCard({ task, onEdit, onDelete, isDragging = false }: TaskCar
                 onClick={handleDelete}
                 onPointerDown={(e) => e.stopPropagation()}
                 onMouseDown={(e) => e.stopPropagation()}
-                style={{
-                  width: "100%",
-                  textAlign: "left",
-                  padding: "8px 12px",
-                  fontSize: "var(--text-label)",
-                  color: "#f87171",
-                  background: "none",
-                  border: "none",
-                  cursor: "pointer",
-                }}
-                onMouseEnter={e => (e.currentTarget.style.background = "var(--surf-3)")}
-                onMouseLeave={e => (e.currentTarget.style.background = "none")}
+                className="task-card-menu-item task-card-menu-item--delete"
               >
                 Delete
               </button>
@@ -225,32 +163,14 @@ export function TaskCard({ task, onEdit, onDelete, isDragging = false }: TaskCar
       </div>
 
       {/* Task name */}
-      <p style={{
-        fontSize: "var(--text-meta)",
-        fontWeight: 400,
-        color: "var(--text-1)",
-        marginBottom: "9px",
-        lineHeight: 1.4,
-        paddingRight: "20px",
-      }}
-        className="line-clamp-2 break-words"
-      >
-        {task.title}
-      </p>
+      <p className="task-title line-clamp-2 break-words">{task.title}</p>
 
       {/* Meta row */}
-      <div style={{ display: "flex", alignItems: "center", gap: "5px", flexWrap: "wrap" }}>
+      <div className="task-meta-row">
         <PriorityPill priority={task.priority} />
         <StatusPill status={task.status} />
         {task.dueDate && (
-          <span style={{
-            fontSize: "var(--text-overline)",
-            color: "var(--text-3)",
-            fontFamily: "var(--font-mono)",
-            marginLeft: "auto",
-          }}>
-            {formatDate(task.dueDate)}
-          </span>
+          <span className="task-due-date">{formatDate(task.dueDate)}</span>
         )}
       </div>
     </div>
diff --git a/components/tasks/task-modal.tsx b/components/tasks/task-modal.tsx
index 714ce78..68a50a5 100644
--- a/components/tasks/task-modal.tsx
+++ b/components/tasks/task-modal.tsx
@@ -120,7 +120,7 @@ export function TaskModal({ task, isOpen, onClose, onSave, onDelete }: TaskModal
 
             <div className="grid gap-2">
               <Label>Priority</Label>
-              <div style={{ display: "flex", gap: "6px" }}>
+              <div className="flex gap-1.5">
                 {TASK_PRIORITIES.map((priority) => {
                   const isSelected = formData.priority === priority
                   const s = PRIORITY_BADGE[priority]
@@ -129,19 +129,11 @@ export function TaskModal({ task, isOpen, onClose, onSave, onDelete }: TaskModal
                       key={priority}
                       type="button"
                       onClick={() => setFormData({ ...formData, priority })}
+                      className="task-priority-btn"
                       style={{
-                        flex: 1,
-                        padding: "4px 4px",
-                        borderRadius: "4px",
-                        fontSize: "var(--text-overline)",
-                        fontWeight: 500,
-                        fontFamily: "var(--font-mono)",
                         background: isSelected ? s.bg : "var(--surf-2)",
                         color: isSelected ? s.color : "var(--text-3)",
                         border: `1px solid ${isSelected ? s.color + "33" : "var(--border-2)"}`,
-                        cursor: "pointer",
-                        whiteSpace: "nowrap",
-                        transition: "all 120ms",
                       }}
                     >
                       {priority}
diff --git a/components/team-form-dialog.tsx b/components/team-form-dialog.tsx
index 897ef8e..6fa69ff 100644
--- a/components/team-form-dialog.tsx
+++ b/components/team-form-dialog.tsx
@@ -174,83 +174,77 @@ export function TeamFormDialog({ open, onOpenChange, team, onSave, availablePeop
                 <Label>Team Members</Label>
                 <div className="flex gap-3 items-center">
                   {/* Available People */}
-                  <div style={{ flex: 1 }}>
-                    <label style={{ fontSize: "var(--text-label)", color: "var(--text-3)", display: "block", marginBottom: "4px" }}>Available People</label>
-                    <div style={{ border: "1px solid var(--border-2)", borderRadius: "4px", height: "192px", overflowY: "auto", background: "var(--surf-2)" }}>
+                  <div className="dual-list-col">
+                    <label className="dual-list-label">Available People</label>
+                    <div className="dual-list-box dual-list-box--md">
                       {availablePeopleList.length > 0 ? (
-                        availablePeopleList.map((person) => (
-                          <div
-                            key={person.id}
-                            onClick={() => toggleAvailableSelection(person.id!)}
-                            onDoubleClick={() => handleDoubleClickAvailable(person.id!)}
-                            className="dual-list-item"
-                            style={{
-                              padding: "6px 12px",
-                              fontSize: "var(--text-label)",
-                              cursor: "pointer",
-                              userSelect: "none",
-                              color: selectedAvailable.includes(person.id!) ? "#111" : "var(--text-2)",
-                              borderLeft: selectedAvailable.includes(person.id!) ? "2px solid #00f058" : "2px solid transparent",
-                            }}
-                          >
-                            {person.name}
-                          </div>
-                        ))
+                        availablePeopleList.map((person) => {
+                          const isSelected = selectedAvailable.includes(person.id!)
+                          return (
+                            <div
+                              key={person.id}
+                              onClick={() => toggleAvailableSelection(person.id!)}
+                              onDoubleClick={() => handleDoubleClickAvailable(person.id!)}
+                              className="dual-list-item"
+                              style={{
+                                color: isSelected ? "#111" : "var(--text-2)",
+                                borderLeft: isSelected ? "2px solid #00f058" : "2px solid transparent",
+                              }}
+                            >
+                              {person.name}
+                            </div>
+                          )
+                        })
                       ) : (
-                        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontSize: "var(--text-label)", color: "var(--text-3)" }}>
-                          All people assigned
-                        </div>
+                        <div className="dual-list-empty">All people assigned</div>
                       )}
                     </div>
                   </div>
 
                   {/* Arrow Buttons */}
-                  <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+                  <div className="dual-list-arrows">
                     <button
                       type="button"
                       onClick={handleAddToTeam}
                       disabled={selectedAvailable.length === 0}
-                      style={{ width: "32px", height: "32px", borderRadius: "4px", border: "1px solid var(--border-2)", background: "var(--surf-2)", color: "var(--text-2)", cursor: selectedAvailable.length === 0 ? "not-allowed" : "pointer", opacity: selectedAvailable.length === 0 ? 0.4 : 1, display: "flex", alignItems: "center", justifyContent: "center" }}
+                      className="dual-list-arrow-btn"
                     >
-                      <ChevronRight style={{ width: "16px", height: "16px" }} />
+                      <ChevronRight />
                     </button>
                     <button
                       type="button"
                       onClick={handleRemoveFromTeam}
                       disabled={selectedMembers.length === 0}
-                      style={{ width: "32px", height: "32px", borderRadius: "4px", border: "1px solid var(--border-2)", background: "var(--surf-2)", color: "var(--text-2)", cursor: selectedMembers.length === 0 ? "not-allowed" : "pointer", opacity: selectedMembers.length === 0 ? 0.4 : 1, display: "flex", alignItems: "center", justifyContent: "center" }}
+                      className="dual-list-arrow-btn"
                     >
-                      <ChevronLeft style={{ width: "16px", height: "16px" }} />
+                      <ChevronLeft />
                     </button>
                   </div>
 
                   {/* Team Members */}
-                  <div style={{ flex: 1 }}>
-                    <label style={{ fontSize: "var(--text-label)", color: "var(--text-3)", display: "block", marginBottom: "4px" }}>Team Members ({teamMembersList.length})</label>
-                    <div style={{ border: "1px solid var(--border-2)", borderRadius: "4px", height: "192px", overflowY: "auto", background: "var(--surf-2)" }}>
+                  <div className="dual-list-col">
+                    <label className="dual-list-label">Team Members ({teamMembersList.length})</label>
+                    <div className="dual-list-box dual-list-box--md">
                       {teamMembersList.length > 0 ? (
-                        teamMembersList.map((person) => (
-                          <div
-                            key={person.id}
-                            onClick={() => toggleMemberSelection(person.id!)}
-                            onDoubleClick={() => handleDoubleClickMember(person.id!)}
-                            className="dual-list-item"
-                            style={{
-                              padding: "6px 12px",
-                              fontSize: "var(--text-label)",
-                              cursor: "pointer",
-                              userSelect: "none",
-                              color: selectedMembers.includes(person.id!) ? "#111" : "var(--text-2)",
-                              borderLeft: selectedMembers.includes(person.id!) ? "2px solid #00f058" : "2px solid transparent",
-                            }}
-                          >
-                            {person.name}
-                          </div>
-                        ))
+                        teamMembersList.map((person) => {
+                          const isSelected = selectedMembers.includes(person.id!)
+                          return (
+                            <div
+                              key={person.id}
+                              onClick={() => toggleMemberSelection(person.id!)}
+                              onDoubleClick={() => handleDoubleClickMember(person.id!)}
+                              className="dual-list-item"
+                              style={{
+                                color: isSelected ? "#111" : "var(--text-2)",
+                                borderLeft: isSelected ? "2px solid #00f058" : "2px solid transparent",
+                              }}
+                            >
+                              {person.name}
+                            </div>
+                          )
+                        })
                       ) : (
-                        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontSize: "var(--text-label)", color: "var(--text-3)" }}>
-                          No members yet
-                        </div>
+                        <div className="dual-list-empty">No members yet</div>
                       )}
                     </div>
                   </div>
diff --git a/components/teams-table.tsx b/components/teams-table.tsx
index 0318f75..9187668 100644
--- a/components/teams-table.tsx
+++ b/components/teams-table.tsx
@@ -30,9 +30,7 @@ export function TeamsTable({
       cell: (team) => (
         <Link
           href={`/teams/${team.id}`}
-          style={{ fontWeight: 500, color: "var(--text-1)", fontSize: "var(--text-meta)", textDecoration: "none" }}
-          onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = "#00f058")}
-          onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-1)")}
+          className="cell-link"
           onClick={e => e.stopPropagation()}
         >
           {team.name}
@@ -44,7 +42,7 @@ export function TeamsTable({
       header: "Description",
       accessorKey: "description",
       cell: (team) => (
-        <span style={{ color: "var(--text-2)", fontSize: "var(--text-meta)" }}>{team.description}</span>
+        <span className="cell-text">{team.description}</span>
       ),
     },
     {
@@ -52,7 +50,7 @@ export function TeamsTable({
       header: "Members",
       accessorKey: "memberCount",
       cell: (team) => (
-        <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-meta)", color: "var(--text-1)" }}>{team.memberCount}</span>
+        <span className="cell-mono">{team.memberCount}</span>
       ),
     },
     {
@@ -60,7 +58,7 @@ export function TeamsTable({
       header: "Created",
       accessorKey: "createdAt",
       cell: (team) => (
-        <span style={{ color: "var(--text-3)", fontSize: "var(--text-overline)", fontFamily: "var(--font-mono)" }}>
+        <span className="cell-date">
           {new Date(team.createdAt).toLocaleDateString("en-GB", {
             day: "2-digit",
             month: "short",
@@ -74,10 +72,7 @@ export function TeamsTable({
       header: "Status",
       accessorKey: "status",
       cell: (team) => (
-        <span style={{
-          color: team.status === "active" ? "#00f058" : "var(--text-3)",
-          fontSize: "var(--text-caption)",
-        }}>
+        <span className={`status-badge ${team.status === "active" ? "status-badge--active" : "status-badge--inactive"}`}>
           ● {team.status}
         </span>
       ),
@@ -91,63 +86,24 @@ export function TeamsTable({
         <div className="opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 justify-end">
           <button
             onClick={(e) => { e.stopPropagation(); onEdit(team) }}
-            style={{
-              border: "1px solid var(--border-2)",
-              color: "var(--text-3)",
-              borderRadius: "4px",
-              padding: "2px 7px",
-              fontSize: "var(--text-meta)",
-              background: "none",
-              cursor: "pointer",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "4px",
-            }}
-            onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-            onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+            className="table-action-btn"
           >
-            <Pencil style={{ width: "11px", height: "11px" }} /> Edit
+            <Pencil /> Edit
           </button>
           <button
             onClick={(e) => { e.stopPropagation(); onToggleStatus(team) }}
-            style={{
-              border: "1px solid var(--border-2)",
-              color: "var(--text-3)",
-              borderRadius: "4px",
-              padding: "2px 7px",
-              fontSize: "var(--text-meta)",
-              background: "none",
-              cursor: "pointer",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "4px",
-            }}
-            onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-            onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+            className="table-action-btn"
           >
             {team.status === "active"
-              ? <><UserX style={{ width: "11px", height: "11px" }} /> Deactivate</>
-              : <><UserCheck style={{ width: "11px", height: "11px" }} /> Activate</>
+              ? <><UserX /> Deactivate</>
+              : <><UserCheck /> Activate</>
             }
           </button>
           <button
             onClick={(e) => { e.stopPropagation(); onDelete(team) }}
-            style={{
-              border: "1px solid var(--border-2)",
-              color: "var(--text-3)",
-              borderRadius: "4px",
-              padding: "2px 7px",
-              fontSize: "var(--text-meta)",
-              background: "none",
-              cursor: "pointer",
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "4px",
-            }}
-            onMouseEnter={e => (e.currentTarget.style.color = "#f87171")}
-            onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+            className="table-action-btn table-action-btn--danger"
           >
-            <Trash2 style={{ width: "11px", height: "11px" }} /> Delete
+            <Trash2 /> Delete
           </button>
         </div>
       ),
diff --git a/components/ui/ai-button.tsx b/components/ui/ai-button.tsx
index 26eebc8..c638001 100644
--- a/components/ui/ai-button.tsx
+++ b/components/ui/ai-button.tsx
@@ -19,31 +19,6 @@ interface AIButtonProps {
   showSetupLink?: boolean  // show "Set up AI →" when not configured (default true)
 }
 
-const baseStyle: React.CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  gap: "5px",
-  padding: "4px 10px",
-  borderRadius: "4px",
-  fontSize: "var(--text-caption)",
-  fontWeight: 600,
-  fontFamily: "var(--font-sans)",
-  cursor: "pointer",
-  border: "1px solid var(--border-2)",
-  background: "var(--surf-2)",
-  color: "var(--text-2)",
-  transition: "all 0.15s",
-}
-
-const generatingStyle: React.CSSProperties = {
-  ...baseStyle,
-  opacity: 0.7,
-  cursor: "not-allowed",
-  color: "#00f058",
-  borderColor: "#00f05840",
-  background: "#0d200f",
-}
-
 export function AIButton({
   configured,
   loading = false,
@@ -59,12 +34,7 @@ export function AIButton({
   if (!configured) {
     if (!showSetupLink) return null
     return (
-      <Link
-        href="/settings"
-        style={{ fontSize: "var(--text-caption)", color: "var(--text-3)", textDecoration: "none" }}
-        onMouseEnter={e => ((e.currentTarget as HTMLElement).style.color = "#00f058")}
-        onMouseLeave={e => ((e.currentTarget as HTMLElement).style.color = "var(--text-3)")}
-      >
+      <Link href="/settings" className="ai-setup-link">
         Set up AI →
       </Link>
     )
@@ -72,8 +42,8 @@ export function AIButton({
 
   if (generating) {
     return (
-      <span style={generatingStyle}>
-        <Loader2 style={{ width: "11px", height: "11px", animation: "spin 1s linear infinite" }} />
+      <span className="ai-btn ai-btn--generating">
+        <Loader2 className="ai-btn__icon ai-btn__icon--spin" />
         Generating…
       </span>
     )
@@ -84,19 +54,9 @@ export function AIButton({
       onClick={onClick}
       disabled={disabled}
       title={tooltip}
-      style={{ ...baseStyle, opacity: disabled ? 0.5 : 1, cursor: disabled ? "not-allowed" : "pointer" }}
-      onMouseEnter={e => {
-        if (!disabled) {
-          ;(e.currentTarget as HTMLElement).style.color = "#00f058"
-          ;(e.currentTarget as HTMLElement).style.borderColor = "#00f05840"
-        }
-      }}
-      onMouseLeave={e => {
-        ;(e.currentTarget as HTMLElement).style.color = "var(--text-2)"
-        ;(e.currentTarget as HTMLElement).style.borderColor = "var(--border-2)"
-      }}
+      className={`ai-btn${disabled ? " ai-btn--disabled" : ""}`}
     >
-      <Sparkles style={{ width: "11px", height: "11px" }} />
+      <Sparkles className="ai-btn__icon" />
       {label}
     </button>
   )
@@ -109,23 +69,10 @@ interface AIGeneratedBadgeProps {
 
 export function AIGeneratedBadge({ onDismiss }: AIGeneratedBadgeProps) {
   return (
-    <div style={{
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "6px",
-      padding: "4px 10px",
-      borderRadius: "4px",
-      background: "#0d200f",
-      border: "1px solid #00f05840",
-      fontSize: "var(--text-caption)",
-      color: "#00f058",
-    }}>
-      <Sparkles style={{ width: "10px", height: "10px" }} />
+    <div className="ai-generated-badge">
+      <Sparkles className="ai-generated-badge__icon" />
       AI-generated — review before using
-      <button
-        onClick={onDismiss}
-        style={{ background: "none", border: "none", cursor: "pointer", color: "#00f05880", marginLeft: "2px", fontFamily: "var(--font-sans)", fontSize: "var(--text-overline)", padding: "0 2px" }}
-      >
+      <button onClick={onDismiss} className="ai-generated-badge__dismiss">
         ✕
       </button>
     </div>
diff --git a/components/ui/badge-select.tsx b/components/ui/badge-select.tsx
index 5208341..1abad3f 100644
--- a/components/ui/badge-select.tsx
+++ b/components/ui/badge-select.tsx
@@ -76,7 +76,7 @@ export function BadgeSelect({
           type="button"
           onClick={() => setIsOpen(!isOpen)}
           className={cn(
-            "inline-flex items-center justify-center rounded-md px-3 py-1 text-xs font-medium transition-colors cursor-pointer",
+            "inline-flex items-center justify-center rounded-md px-3 py-1 text-[13px] font-medium transition-colors cursor-pointer",
             "hover:opacity-80",
             selectedOption?.className || "bg-gray-100 text-gray-700"
           )}
@@ -107,7 +107,7 @@ export function BadgeSelect({
                   setIsOpen(false)
                 }}
                 className={cn(
-                  "relative flex w-full items-center rounded-sm px-2 py-1.5 text-xs outline-none cursor-pointer",
+                  "relative flex w-full items-center rounded-sm px-2 py-1.5 text-[13px] outline-none cursor-pointer",
                   "hover:bg-gray-100 hover:bg-[#292929]",
                   "transition-colors"
                 )}
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index a921d46..749342d 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-[13px] font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index f58f98c..76471d0 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "text-xs text-gray-900 font-semibold shadow-sm hover:opacity-90 transition-opacity [background:linear-gradient(90deg,hsl(174,100%,50%)_0%,hsl(142,100%,47%)_100%)]",
+          "text-[13px] text-gray-900 font-semibold shadow-sm hover:opacity-90 transition-opacity [background:linear-gradient(90deg,hsl(174,100%,50%)_0%,hsl(142,100%,47%)_100%)]",
         outline:
           "text-sm border border-[#383838] bg-[#212121] hover:bg-[#292929] text-gray-200",
         destructive:
diff --git a/components/ui/data-table.tsx b/components/ui/data-table.tsx
index c742a5d..c730d0b 100644
--- a/components/ui/data-table.tsx
+++ b/components/ui/data-table.tsx
@@ -112,40 +112,19 @@ export function DataTable<T extends { id?: number | string }>({
   }, [data, searchQuery, searchKeys, filterValues, filters, sortField, sortDirection, columns])
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "0" }}>
+    <div className="data-table-wrap">
       {/* Search + controls row */}
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "8px", marginBottom: "12px" }}>
-        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+      <div className="data-table-controls">
+        <div className="data-table-controls-left">
           {searchKeys.length > 0 && (
-            <div style={{ position: "relative" }}>
-              <Search
-                style={{
-                  position: "absolute",
-                  width: "14px",
-                  height: "14px",
-                  left: "10px",
-                  top: "50%",
-                  transform: "translateY(-50%)",
-                  color: "var(--text-3)",
-                  pointerEvents: "none",
-                }}
-              />
+            <div className="data-table-search-wrap">
+              <Search className="data-table-search-icon" />
               <input
                 type="text"
                 placeholder={searchPlaceholder}
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                style={{
-                  background: "var(--surf)",
-                  border: "1px solid var(--border-1)",
-                  borderRadius: "6px",
-                  padding: "5px 10px 5px 30px",
-                  fontSize: "var(--text-label)",
-                  color: "var(--text-1)",
-                  width: "180px",
-                  outline: "none",
-                  fontFamily: "var(--font-sans)",
-                }}
+                className="data-table-search-input"
                 onFocus={e => (e.currentTarget.style.borderColor = "var(--border-2)")}
                 onBlur={e => (e.currentTarget.style.borderColor = "var(--border-1)")}
               />
@@ -154,41 +133,15 @@ export function DataTable<T extends { id?: number | string }>({
           {filters.length > 0 && (
             <button
               onClick={() => setShowFilters(!showFilters)}
-              style={{
-                background: showFilters ? "var(--surf-3)" : "transparent",
-                border: "1px solid var(--border-2)",
-                color: "var(--text-2)",
-                fontSize: "var(--text-label)",
-                padding: "5px 10px",
-                borderRadius: "6px",
-                cursor: "pointer",
-                fontFamily: "var(--font-sans)",
-              }}
-              onMouseEnter={e => (e.currentTarget.style.color = "var(--text-1)")}
-              onMouseLeave={e => (e.currentTarget.style.color = "var(--text-2)")}
+              className="data-table-filters-btn"
+              style={{ background: showFilters ? "var(--surf-3)" : "transparent" }}
             >
               Filters
             </button>
           )}
         </div>
         {onQuickAdd && (
-          <button
-            onClick={onQuickAdd}
-            style={{
-              display: "inline-flex",
-              alignItems: "center",
-              gap: "5px",
-              background: "linear-gradient(90deg, #00ffe5 0%, #00f058 100%)",
-              border: "none",
-              color: "#0a1a0a",
-              padding: "4px 10px",
-              borderRadius: "4px",
-              fontSize: "var(--text-caption)",
-              fontWeight: 600,
-              cursor: "pointer",
-              fontFamily: "var(--font-sans)",
-            }}
-          >
+          <button onClick={onQuickAdd} className="data-table-add-btn">
             + {quickAddLabel}
           </button>
         )}
@@ -196,34 +149,14 @@ export function DataTable<T extends { id?: number | string }>({
 
       {/* Filter panel */}
       {showFilters && filters.length > 0 && (
-        <div style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "16px",
-          padding: "12px 16px",
-          background: "var(--surf)",
-          border: "1px solid var(--border-1)",
-          borderRadius: "8px",
-          marginBottom: "12px",
-        }}>
+        <div className="data-table-filter-panel">
           {filters.map((filter) => (
-            <div key={filter.id} style={{ display: "flex", alignItems: "center", gap: "6px" }}>
-              <label style={{ fontSize: "var(--text-label)", color: "var(--text-2)", fontWeight: 500, fontFamily: "var(--font-sans)" }}>
-                {filter.label}:
-              </label>
+            <div key={filter.id} className="data-table-filter-item">
+              <label className="data-table-filter-label">{filter.label}:</label>
               <select
                 value={filterValues[filter.id]}
                 onChange={(e) => setFilterValues({ ...filterValues, [filter.id]: e.target.value })}
-                style={{
-                  background: "var(--surf-2)",
-                  border: "1px solid var(--border-2)",
-                  borderRadius: "4px",
-                  padding: "3px 6px",
-                  fontSize: "var(--text-label)",
-                  color: "var(--text-1)",
-                  cursor: "pointer",
-                  fontFamily: "var(--font-sans)",
-                }}
+                className="data-table-filter-select"
               >
                 <option value="all">All</option>
                 {filter.options.map((option) => (
@@ -238,40 +171,22 @@ export function DataTable<T extends { id?: number | string }>({
       )}
 
       {/* Table */}
-      <div style={{
-        background: "var(--surf)",
-        border: "1px solid var(--border-1)",
-        borderRadius: "8px",
-        overflow: "hidden",
-      }}>
-        <table style={{ width: "100%", borderCollapse: "collapse" }}>
+      <div className="data-table-box">
+        <table className="data-table">
           <thead>
-            <tr style={{ borderBottom: "1px solid var(--border-1)" }}>
+            <tr className="data-table-head-row">
               {columns.map((column) => (
                 <th
                   key={column.id}
-                  className={`col-header ${column.className ?? ""}`}
-                  style={{ padding: "8px 12px", background: "var(--surf)" }}
+                  className={`data-table-th col-header ${column.className ?? ""}`}
                 >
                   {column.sortable !== false ? (
                     <button
                       onClick={() => handleSort(column.id)}
-                      className="col-header"
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "4px",
-                        background: "none",
-                        border: "none",
-                        cursor: "pointer",
-                        padding: 0,
-                        fontFamily: "var(--font-sans)",
-                      }}
-                      onMouseEnter={e => (e.currentTarget.style.color = "var(--text-2)")}
-                      onMouseLeave={e => (e.currentTarget.style.color = "var(--text-3)")}
+                      className="data-table-sort-btn col-header"
                     >
                       {column.header}
-                      <ArrowUpDown style={{ width: "11px", height: "11px", flexShrink: 0 }} />
+                      <ArrowUpDown />
                     </button>
                   ) : (
                     column.header
@@ -295,11 +210,7 @@ export function DataTable<T extends { id?: number | string }>({
                   onMouseLeave={e => ((e.currentTarget as HTMLElement).style.background = "transparent")}
                 >
                   {columns.map((column) => (
-                    <td
-                      key={column.id}
-                      style={{ padding: "9px 12px", fontSize: "var(--text-meta)", color: "var(--text-1)" }}
-                      className={column.className}
-                    >
+                    <td key={column.id} className={`data-table-td ${column.className ?? ""}`}>
                       {column.cell
                         ? column.cell(item)
                         : column.accessorKey
@@ -311,10 +222,10 @@ export function DataTable<T extends { id?: number | string }>({
               ))
             ) : (
               <tr>
-                <td colSpan={columns.length} style={{ padding: 0 }}>
+                <td colSpan={columns.length} className="data-table-empty-td">
                   {emptyState || (
-                    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", padding: "40px", textAlign: "center" }}>
-                      <p style={{ fontSize: "var(--text-meta)", color: "var(--text-3)" }}>No items found</p>
+                    <div className="data-table-empty-state">
+                      <p className="data-table-empty-text">No items found</p>
                     </div>
                   )}
                 </td>
diff --git a/lib/signals/compute.ts b/lib/signals/compute.ts
index 788a778..743b9b0 100644
--- a/lib/signals/compute.ts
+++ b/lib/signals/compute.ts
@@ -245,6 +245,12 @@ export function computePeopleSignals(
     const lastNoteDate = notesDateByPerson[person.id]
     const newHire = isNewHire((person as any).start_date, today)
 
+    // Grace period: suppress all person-level signals for the first 7 days
+    // A person hired today cannot have missed a 1:1, logged evidence, or meeting notes yet
+    const startDate = (person as any).start_date
+    const daysInRole = startDate ? daysBetween(new Date(startDate + 'T00:00:00'), today) : 999
+    if (daysInRole < 7) continue
+
     // Thresholds adjusted for new hires
     const oneOnOneWarnDays = newHire ? 7 : 14
     const oneOnOneCritDays = newHire ? 14 : 21
@@ -354,7 +360,7 @@ export function computePeopleSignals(
       signals.push({
         type: 'new_hire_at_risk',
         severity: 'critical',
-        message: `${person.full_name} is a new hire with ${firedSignalTypes.length} unresolved onboarding signals`,
+        message: `${person.full_name} is a new hire missing: ${firedSignalTypes.map(t => ({ no_recent_1on1: 'a recent 1:1', no_evidence: 'logged evidence', missing_notes: 'meeting notes' }[t] ?? t)).join(', ')}`,
         personId: person.id,
         personName: person.full_name,
         entityId: person.id,
diff --git a/public/banner_02.png b/public/banner_02.png
deleted file mode 100644
index 7a2fa7f..0000000
Binary files a/public/banner_02.png and /dev/null differ
diff --git a/public/logo_transparent.png b/public/logo_transparent.png
index 48ed04c..507c97b 100644
Binary files a/public/logo_transparent.png and b/public/logo_transparent.png differ
diff --git a/supabase/.temp/cli-latest b/supabase/.temp/cli-latest
new file mode 100644
index 0000000..aff2b6e
--- /dev/null
+++ b/supabase/.temp/cli-latest
@@ -0,0 +1 @@
+v2.101.0
\ No newline at end of file
diff --git a/supabase/.temp/linked-project.json b/supabase/.temp/linked-project.json
new file mode 100644
index 0000000..a0d2f10
--- /dev/null
+++ b/supabase/.temp/linked-project.json
@@ -0,0 +1 @@
+{"ref":"tiuqentpmpqlwnkayrya","name":"Cadence","organization_id":"zardqeseugrophbejuah","organization_slug":"zardqeseugrophbejuah"}
\ No newline at end of file
diff --git a/supabase/functions/ai-proxy/index.ts b/supabase/functions/ai-proxy/index.ts
index 7c908cb..13636ee 100644
--- a/supabase/functions/ai-proxy/index.ts
+++ b/supabase/functions/ai-proxy/index.ts
@@ -3,7 +3,7 @@
 // The client NEVER sees the decrypted API key.
 //
 // Encryption: pgcrypto pgp_sym_encrypt/pgp_sym_decrypt.
-// Set SUPABASE_AI_ENCRYPTION_KEY in Edge Function secrets (supabase secrets set).
+// Set AI_ENCRYPTION_KEY in Edge Function secrets (supabase secrets set).
 
 import { createClient } from "jsr:@supabase/supabase-js@2"
 
@@ -83,7 +83,7 @@ Deno.serve(async (req) => {
     }
 
     // ── Decrypt API key via DB function ───────────────────────────────────────
-    const encryptionKey = Deno.env.get("SUPABASE_AI_ENCRYPTION_KEY")
+    const encryptionKey = Deno.env.get("AI_ENCRYPTION_KEY")
     if (!encryptionKey) {
       return new Response(JSON.stringify({ error: "Server configuration error." }), { status: 500, headers: corsHeaders })
     }