refactor: align QR code tool with Calculate/Media blueprint

- QRCodeGenerator: lg:grid-cols-5 layout (2/5 options, 3/5 preview);
  full viewport height; mobile Configure|Preview glass pill tabs
- QRInput: remove shadcn Textarea/Card; native <textarea> in glass panel
  section; character counter in monospace
- QROptions: remove shadcn Card/Label/Input/Button/Select; EC level as
  4 pill buttons with recovery % label; native color inputs + pickers;
  transparent toggle as small pill; keep shadcn Slider for margin
- QRPreview: remove shadcn Card/Button/Skeleton/ToggleGroup/Tooltip/Empty;
  glass card fills full height; PNG button with inline size pill group
  (256/512/1k/2k); empty state and pulse skeleton match other tools

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

components/qrcode/QROptions.tsx

@@ -1,17 +1,7 @@
 'use client';
 
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
 import { Slider } from '@/components/ui/slider';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
+import { cn } from '@/lib/utils/cn';
 import type { ErrorCorrectionLevel } from '@/types/qrcode';
 
 interface QROptionsProps {
@@ -25,13 +15,16 @@ interface QROptionsProps {
   onMarginChange: (margin: number) => void;
 }
 
-const EC_OPTIONS: { value: ErrorCorrectionLevel; label: string }[] = [
-  { value: 'L', label: 'Low (7%)' },
-  { value: 'M', label: 'Medium (15%)' },
-  { value: 'Q', label: 'Quartile (25%)' },
-  { value: 'H', label: 'High (30%)' },
+const EC_OPTIONS: { value: ErrorCorrectionLevel; label: string; desc: string }[] = [
+  { value: 'L', label: 'L', desc: '7%' },
+  { value: 'M', label: 'M', desc: '15%' },
+  { value: 'Q', label: 'Q', desc: '25%' },
+  { value: 'H', label: 'H', desc: '30%' },
 ];
 
+const inputCls =
+  'w-full 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';
+
 export function QROptions({
   errorCorrection,
   foregroundColor,
@@ -45,93 +38,111 @@ export function QROptions({
   const isTransparent = backgroundColor === '#00000000';
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Options</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Error Correction */}
-        <div className="space-y-1.5">
-          <Label className="text-xs">Error Correction</Label>
-          <Select value={errorCorrection} onValueChange={(v) => onErrorCorrectionChange(v as ErrorCorrectionLevel)}>
-            <SelectTrigger className="w-full">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {EC_OPTIONS.map((opt) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
+    <div className="space-y-5">
 
-        {/* Colors */}
-        <div className="space-y-3">
-          <div className="space-y-1.5">
-            <Label className="text-xs">Foreground</Label>
-            <div className="flex gap-2">
-              <Input
-                type="color"
-                className="w-9 p-1 h-9 shrink-0"
-                value={foregroundColor}
-                onChange={(e) => onForegroundColorChange(e.target.value)}
-              />
-              <Input
-                className="font-mono text-xs"
-                value={foregroundColor}
-                onChange={(e) => onForegroundColorChange(e.target.value)}
-              />
-            </div>
-          </div>
-          <div className="space-y-1.5">
-            <div className="flex items-center justify-between">
-              <Label className="text-xs">Background</Label>
-              <Button
-                variant={isTransparent ? 'default' : 'outline'}
-                size="xs"
-                className="h-5 text-[10px] px-1.5"
-                onClick={() =>
-                  onBackgroundColorChange(isTransparent ? '#ffffff' : '#00000000')
-                }
-              >
-                Transparent
-              </Button>
-            </div>
-            <div className="flex gap-2">
-              <Input
-                type="color"
-                className="w-9 p-1 h-9 shrink-0"
-                disabled={isTransparent}
-                value={backgroundColor}
-                onChange={(e) => onBackgroundColorChange(e.target.value)}
-              />
-              <Input
-                className="font-mono text-xs"
-                disabled={isTransparent}
-                value={backgroundColor}
-                onChange={(e) => onBackgroundColorChange(e.target.value)}
-              />
-            </div>
+      {/* Error Correction */}
+      <div>
+        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-2">
+          Error Correction
+        </span>
+        <div className="flex gap-1.5">
+          {EC_OPTIONS.map((opt) => (
+            <button
+              key={opt.value}
+              onClick={() => onErrorCorrectionChange(opt.value)}
+              className={cn(
+                'flex-1 flex flex-col items-center py-2 rounded-lg border text-xs font-mono transition-all',
+                errorCorrection === opt.value
+                  ? 'bg-primary/10 border-primary/40 text-primary'
+                  : 'border-border/30 text-muted-foreground hover:border-primary/30 hover:text-foreground'
+              )}
+            >
+              <span className="font-semibold">{opt.label}</span>
+              <span className="text-[9px] opacity-50 mt-0.5">{opt.desc}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Colors */}
+      <div className="space-y-3">
+        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block">
+          Colors
+        </span>
+
+        {/* Foreground */}
+        <div>
+          <label className="text-[9px] text-muted-foreground/50 font-mono block mb-1.5">Foreground</label>
+          <div className="flex gap-1.5">
+            <input
+              type="color"
+              value={foregroundColor}
+              onChange={(e) => onForegroundColorChange(e.target.value)}
+              className="w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5"
+            />
+            <input
+              type="text"
+              value={foregroundColor}
+              onChange={(e) => onForegroundColorChange(e.target.value)}
+              className={inputCls}
+            />
           </div>
         </div>
 
-        {/* Margin */}
-        <div className="space-y-1.5">
-          <div className="flex items-center justify-between">
-            <Label className="text-xs">Margin</Label>
-            <span className="text-xs text-muted-foreground">{margin}</span>
+        {/* Background */}
+        <div>
+          <div className="flex items-center justify-between mb-1.5">
+            <label className="text-[9px] text-muted-foreground/50 font-mono">Background</label>
+            <button
+              onClick={() => onBackgroundColorChange(isTransparent ? '#ffffff' : '#00000000')}
+              className={cn(
+                'text-[9px] font-mono px-1.5 py-0.5 rounded border transition-all',
+                isTransparent
+                  ? 'border-primary/40 text-primary bg-primary/10'
+                  : 'border-border/30 text-muted-foreground/50 hover:border-primary/30 hover:text-primary'
+              )}
+            >
+              Transparent
+            </button>
+          </div>
+          <div className="flex gap-1.5">
+            <input
+              type="color"
+              disabled={isTransparent}
+              value={isTransparent ? '#ffffff' : backgroundColor}
+              onChange={(e) => onBackgroundColorChange(e.target.value)}
+              className={cn(
+                'w-8 h-8 rounded-lg cursor-pointer border border-border/40 bg-transparent shrink-0 p-0.5 transition-opacity',
+                isTransparent && 'opacity-30 cursor-not-allowed'
+              )}
+            />
+            <input
+              type="text"
+              disabled={isTransparent}
+              value={isTransparent ? 'transparent' : backgroundColor}
+              onChange={(e) => onBackgroundColorChange(e.target.value)}
+              className={cn(inputCls, isTransparent && 'opacity-30')}
+            />
           </div>
-          <Slider
-            value={[margin]}
-            onValueChange={([v]) => onMarginChange(v)}
-            min={0}
-            max={8}
-            step={1}
-          />
         </div>
-      </CardContent>
-    </Card>
+      </div>
+
+      {/* Margin */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest">
+            Margin
+          </span>
+          <span className="text-[10px] text-muted-foreground/40 font-mono tabular-nums">{margin}</span>
+        </div>
+        <Slider
+          value={[margin]}
+          onValueChange={([v]) => onMarginChange(v)}
+          min={0}
+          max={8}
+          step={1}
+        />
+      </div>
+    </div>
   );
 }