refactor: go fully native — remove all remaining shadcn component usage

Replace shadcn Select → native <select>:
- ascii/FontPreview.tsx: comment-style picker → glass pill wrapper
  with MessageSquareCode icon + native select
- color/ExportMenu.tsx: format + color-space pickers → native select
  with shared selectCls
- units/MainConverter.tsx: from/to unit pickers → native select

Delete dead code:
- components/media/FormatSelector.tsx (not imported anywhere,
  used shadcn Input + Label + Card)
- components/ui/select.tsx  — now unused
- components/ui/input.tsx   — now unused
- components/ui/label.tsx   — now unused
- components/ui/card.tsx    — now unused

Remaining components/ui/:
  slider.tsx, tooltip.tsx (TooltipProvider in Providers.tsx),
  slider-row.tsx, color-input.tsx

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

components/color/ExportMenu.tsx

@@ -1,13 +1,6 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { Download, Copy, Check, Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
 import {
@@ -30,6 +23,9 @@ interface ExportMenuProps {
 type ExportFormat = 'css' | 'scss' | 'tailwind' | 'json' | 'javascript';
 type ColorSpace = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklab' | 'lch' | 'oklch';
 
+const selectCls =
+  'flex-1 bg-transparent border border-border/40 rounded-lg px-2.5 py-1.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 cursor-pointer';
+
 const actionBtn =
   'flex items-center gap-1.5 px-3 py-1.5 text-xs 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';
 
@@ -92,28 +88,26 @@ export function ExportMenu({ colors, className }: ExportMenuProps) {
 
       {/* Selectors */}
       <div className="flex gap-2">
-        <Select value={format} onValueChange={(v) => setFormat(v as ExportFormat)}>
-          <SelectTrigger className="flex-1 h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="css">CSS Vars</SelectItem>
-            <SelectItem value="scss">SCSS</SelectItem>
-            <SelectItem value="tailwind">Tailwind</SelectItem>
-            <SelectItem value="json">JSON</SelectItem>
-            <SelectItem value="javascript">JS Array</SelectItem>
-          </SelectContent>
-        </Select>
-        <Select value={colorSpace} onValueChange={(v) => setColorSpace(v as ColorSpace)}>
-          <SelectTrigger className="flex-1 h-7 text-xs border-border/30 bg-transparent hover:border-primary/30 transition-colors">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            {['hex', 'rgb', 'hsl', 'lab', 'oklab', 'lch', 'oklch'].map((s) => (
-              <SelectItem key={s} value={s} className="font-mono text-xs">{s}</SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <select
+          value={format}
+          onChange={(e) => setFormat(e.target.value as ExportFormat)}
+          className={selectCls}
+        >
+          <option value="css">CSS Vars</option>
+          <option value="scss">SCSS</option>
+          <option value="tailwind">Tailwind</option>
+          <option value="json">JSON</option>
+          <option value="javascript">JS Array</option>
+        </select>
+        <select
+          value={colorSpace}
+          onChange={(e) => setColorSpace(e.target.value as ColorSpace)}
+          className={selectCls}
+        >
+          {['hex', 'rgb', 'hsl', 'lab', 'oklab', 'lch', 'oklch'].map((s) => (
+            <option key={s} value={s}>{s}</option>
+          ))}
+        </select>
       </div>
 
       {/* Code preview */}