feat: add cardBtn style for card title row buttons

Smaller variant for buttons that sit next to section labels in card headers
(Preview, Color, Results rows). Applied to QRPreview, FontPreview,
ColorManipulation, and FileConverter.

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

components/ascii/FontPreview.tsx

@@ -13,7 +13,7 @@ import {
   MessageSquareCode,
   Type,
 } from 'lucide-react';
-import { cn, actionBtn } from '@/lib/utils';
+import { cn, actionBtn, cardBtn } from '@/lib/utils';
 import { toast } from 'sonner';
 
 export type CommentStyle = 'none' | '//' | '#' | '--' | ';' | '/* */' | '<!-- -->' | '"""';
@@ -133,20 +133,20 @@ export function FontPreview({
         </div>
         <div className="flex items-center gap-1.5 flex-wrap">
           {onCopy && (
-            <button onClick={onCopy} className={actionBtn}>
+            <button onClick={onCopy} className={cardBtn}>
               <Copy className="w-3 h-3" /> Copy
             </button>
           )}
           {onShare && (
-            <button onClick={onShare} className={actionBtn}>
+            <button onClick={onShare} className={cardBtn}>
               <Share2 className="w-3 h-3" /> Share
             </button>
           )}
-          <button onClick={handleExportPNG} className={actionBtn}>
+          <button onClick={handleExportPNG} className={cardBtn}>
             <ImageIcon className="w-3 h-3" /> PNG
           </button>
           {onDownload && (
-            <button onClick={onDownload} className={actionBtn}>
+            <button onClick={onDownload} className={cardBtn}>
               <Download className="w-3 h-3" /> TXT
             </button>
           )}