refactor: externalize shared primitives, remove shadcn mixing in tools

Shared components (components/ui/):
- slider-row.tsx: SliderRow — label + display value + Slider, replaces
  inline slider blocks in FileConverter, QROptions
- color-input.tsx: ColorInput — color swatch + hex text input pair,
  replaces repeated inline patterns in QROptions, KeyframeProperties,
  FaviconGenerator

Media tool (FileConverter.tsx):
- Remove all shadcn Select/SelectTrigger/SelectContent/SelectItem
- Replace with native <select> + selectCls (matches AnimationSettings
  and all other tools)
- Use SliderRow for video/audio bitrate and image quality sliders
- Net: -6 shadcn Select trees, consistent with every other tool

QROptions.tsx:
- Use SliderRow for margin slider (remove raw Slider import)
- Use ColorInput for foreground + background color pairs

KeyframeProperties.tsx:
- Use ColorInput for background color pair (keep local SliderRow which
  has a different layout with number input)

FaviconGenerator.tsx:
- Use ColorInput for background + theme color pairs

AnimationSettings.tsx:
- Remove dead bg-[#1a1a2e] per-option className (global CSS handles
  select option styling via bg-popover)

Delete:
- components/media/ConversionOptions.tsx — dead code (no imports),
  contained the shadcn Label/Input/Select/Slider patterns being replaced

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

components/animate/KeyframeProperties.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Slider } from '@/components/ui/slider';
+import { ColorInput } from '@/components/ui/color-input';
 import { MousePointerClick } from 'lucide-react';
 import { cn } from '@/lib/utils/cn';
 import type { Keyframe, KeyframeProperties, TransformValue } from '@/types/animate';
@@ -112,23 +113,11 @@ export function KeyframeProperties({ keyframe, onChange }: Props) {
               {hasBg ? 'On' : 'Off'}
             </button>
           </div>
-          <div className="flex gap-1.5">
-            <input
-              type="color"
-              value={hasBg ? props.backgroundColor! : '#8b5cf6'}
-              onChange={(e) => setProp('backgroundColor', e.target.value)}
-              disabled={!hasBg}
-              className={cn('w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5', !hasBg && 'opacity-30 cursor-not-allowed')}
-            />
-            <input
-              type="text"
-              value={hasBg ? props.backgroundColor! : ''}
-              onChange={(e) => setProp('backgroundColor', e.target.value)}
-              disabled={!hasBg}
-              placeholder="none"
-              className="flex-1 bg-transparent border border-border/40 rounded-lg px-3 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 placeholder:text-muted-foreground/30 disabled:opacity-30"
-            />
-          </div>
+          <ColorInput
+            value={hasBg ? props.backgroundColor! : '#8b5cf6'}
+            onChange={(v) => setProp('backgroundColor', v)}
+            disabled={!hasBg}
+          />
         </div>
 
         <SliderRow label="Border Radius" unit="px" value={props.borderRadius ?? 0} min={0} max={200} onChange={(v) => setProp('borderRadius', v)} />