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>
           )}

components/color/ColorManipulation.tsx

@@ -10,7 +10,7 @@ import { ExportMenu } from '@/components/color/ExportMenu';
 import { useColorInfo, useGeneratePalette, useGenerateGradient } from '@/lib/color/api/queries';
 import { Loader2, Share2, Plus, X, Palette, Layers } from 'lucide-react';
 import { toast } from 'sonner';
-import { cn, actionBtn } from '@/lib/utils';
+import { cn, actionBtn, cardBtn } from '@/lib/utils';
 import { MobileTabs } from '@/components/ui/mobile-tabs';
 
 type HarmonyType = 'monochromatic' | 'analogous' | 'complementary' | 'triadic' | 'tetradic';
@@ -126,7 +126,7 @@ function ColorManipulationContent() {
               <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
                 Color
               </span>
-              <button onClick={handleShare} className={actionBtn}>
+              <button onClick={handleShare} className={cardBtn}>
                 <Share2 className="w-3 h-3" /> Share
               </button>
             </div>

components/media/FileConverter.tsx

@@ -17,7 +17,7 @@ import { addToHistory } from '@/lib/media/storage/history';
 import { downloadBlobsAsZip, generateOutputFilename } from '@/lib/media/utils/fileUtils';
 import type { ConversionJob, ConversionFormat, ConversionOptions } from '@/types/media';
 import { ShieldCheck, Download, RotateCcw, Loader2 } from 'lucide-react';
-import { cn, actionBtn } from '@/lib/utils';
+import { cn, actionBtn, cardBtn } from '@/lib/utils';
 
 type MobileTab = 'upload' | 'convert';
 
@@ -470,7 +470,7 @@ export function FileConverter() {
                   Results
                 </span>
                 {completedCount > 0 && (
-                  <button onClick={handleDownloadAll} className={actionBtn}>
+                  <button onClick={handleDownloadAll} className={cardBtn}>
                     <Download className="w-3 h-3" />
                     {completedCount > 1 ? `Download all (${completedCount}) as ZIP` : 'Download'}
                   </button>

components/qrcode/QRPreview.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Copy, Share2, Image as ImageIcon, FileCode, QrCode } from 'lucide-react';
-import { cn, actionBtn } from '@/lib/utils';
+import { cn, actionBtn, cardBtn } from '@/lib/utils';
 import type { ExportSize } from '@/types/qrcode';
 
 interface QRPreviewProps {
@@ -42,11 +42,11 @@ export function QRPreview({
           Preview
         </span>
 
-        <button onClick={onCopyImage} disabled={!svgString} className={actionBtn}>
+        <button onClick={onCopyImage} disabled={!svgString} className={cardBtn}>
           <Copy className="w-3 h-3" />Copy
         </button>
 
-        <button onClick={onShare} disabled={!svgString} className={actionBtn}>
+        <button onClick={onShare} disabled={!svgString} className={cardBtn}>
           <Share2 className="w-3 h-3" />Share
         </button>
 
@@ -77,7 +77,7 @@ export function QRPreview({
           </div>
         </div>
 
-        <button onClick={onDownloadSvg} disabled={!svgString} className={actionBtn}>
+        <button onClick={onDownloadSvg} disabled={!svgString} className={cardBtn}>
           <FileCode className="w-3 h-3" />SVG
         </button>
       </div>

lib/utils/styles.ts

@@ -2,6 +2,10 @@
  * Shared Tailwind class strings for consistent UI patterns across tools.
  */
 
+/** Smaller button for card title rows (copy, share, export icons next to a section label) */
+export const cardBtn =
+  'flex items-center gap-1 px-2 py-1 text-[10px] font-mono glass rounded-md border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';
+
 /** Standard action button used throughout all tools (copy, download, share, apply…) */
 export const actionBtn =
   'flex items-center gap-1.5 px-3 py-1.5 text-xs font-mono glass rounded-lg border border-border/30 text-muted-foreground hover:text-primary hover:border-primary/30 hover:bg-primary/10 transition-all disabled:opacity-40 disabled:cursor-not-allowed';