feat(plan): render category colors from DB via --cat-color

Replace 14 hardcoded per-category CSS rules with a single --cat-color
custom property set inline on each filled cell button, driven by the DB
categories list threaded from PlanWork → PlanGrid → PlanRangeChips.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/admin/pages/PlanWork.tsx

@@ -13,6 +13,7 @@ import PlanGrid from "../components/PlanGrid";
 import PlanCellModal from "../components/PlanCellModal";
 import Forbidden from "../components/Forbidden";
 import { projectListOptions, type Project } from "../lib/queries/projects";
+import { planCategoriesOptions, type PlanCategory } from "../lib/queries/plan";
 import "../plan.css";
 
 const MONTH_NAMES = [
@@ -125,6 +126,9 @@ export default function PlanWork() {
   const { data: projectsData } = useQuery(projectListOptions({ perPage: 200 }));
   const projects: Project[] = (projectsData?.data as Project[]) ?? [];
 
+  const { data: categoriesData } = useQuery(planCategoriesOptions());
+  const categories: PlanCategory[] = categoriesData ?? [];
+
   // `lastMutated` is the (userId, date) of the most recent successful
   // mutation. We pass it to PlanGrid as `pulseKey`; the matching cell
   // gets a one-shot CSS pulse animation. We clear it after 700ms (the
@@ -667,6 +671,7 @@ export default function PlanWork() {
           <PlanGrid
             data={grid}
             projects={projects}
+            categories={categories}
             canEdit={canEdit}
             pulseKey={lastMutated}
             onCellClick={openCell}