refactor: centralize action/icon button styles across all tools

Extract shared actionBtn and iconBtn constants into lib/utils/styles.ts
and replace all 11 local definitions across tool components.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

components/animate/KeyframeTimeline.tsx

@@ -2,7 +2,7 @@
 
 import { useRef } from 'react';
 import { Plus, Trash2 } from 'lucide-react';
-import { cn } from '@/lib/utils/cn';
+import { cn, iconBtn } from '@/lib/utils';
 import type { Keyframe } from '@/types/animate';
 
 interface Props {
@@ -17,11 +17,7 @@ interface Props {
 
 const TICKS = [25, 50, 75];
 
-const iconBtn = (disabled?: boolean) =>
-  cn(
-    'w-6 h-6 flex items-center justify-center rounded-md glass border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 transition-all',
-    disabled && 'opacity-30 cursor-not-allowed pointer-events-none'
-  );
+const timelineBtn = cn(iconBtn, 'w-6 h-6');
 
 export function KeyframeTimeline({ keyframes, selectedId, onSelect, onAdd, onDelete, onMove, embedded = false }: Props) {
   const trackRef = useRef<HTMLDivElement>(null);
@@ -68,14 +64,14 @@ export function KeyframeTimeline({ keyframes, selectedId, onSelect, onAdd, onDel
           </span>
         </div>
         <div className="flex items-center gap-1">
-          <button onClick={() => onAdd(50)} title="Add at 50%" className={iconBtn()}>
+          <button onClick={() => onAdd(50)} title="Add at 50%" className={timelineBtn}>
             <Plus className="w-3 h-3" />
           </button>
           <button
             onClick={() => selectedId && onDelete(selectedId)}
             disabled={!selectedId || keyframes.length <= 2}
             title="Delete selected"
-            className={iconBtn(!selectedId || keyframes.length <= 2)}
+            className={timelineBtn}
           >
             <Trash2 className="w-3 h-3" />
           </button>