feat: enhance card components across the application with consistent hover effects and improved layout; update spacing in categories page for better visual hierarchy

components/rules/rule-group-card.tsx

@@ -5,6 +5,7 @@ import { ChevronDown, ChevronRight, Plus, Tag } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { CategoryCombobox } from "@/components/ui/category-combobox";
+import { Card } from "@/components/ui/card";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import type { Transaction, Category } from "@/lib/types";
@@ -54,7 +55,7 @@ export function RuleGroupCard({
   };
 
   return (
-    <div className="border border-border rounded-lg bg-card overflow-hidden">
+    <Card className="card-hover overflow-hidden">
       {/* Header */}
       <div
         className="flex flex-col md:flex-row md:items-center gap-2 md:gap-3 p-3 md:p-4 cursor-pointer hover:bg-accent/5"
@@ -247,6 +248,6 @@ export function RuleGroupCard({
           )}
         </div>
       )}
-    </div>
+    </Card>
   );
 }