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/QRInput.tsx

@@ -1,34 +1,29 @@
 'use client';
 
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Textarea } from '@/components/ui/textarea';
+const MAX_LENGTH = 2048;
 
 interface QRInputProps {
   value: string;
   onChange: (value: string) => void;
 }
 
-const MAX_LENGTH = 2048;
-
 export function QRInput({ value, onChange }: QRInputProps) {
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Text</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-2">
-        <Textarea
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          placeholder="Enter text or URL..."
-          maxLength={MAX_LENGTH}
-          rows={3}
-          className="resize-none font-mono text-sm"
-        />
-        <div className="text-[10px] text-muted-foreground text-right">
-          {value.length} / {MAX_LENGTH}
-        </div>
-      </CardContent>
-    </Card>
+    <div>
+      <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-widest block mb-2">
+        Content
+      </span>
+      <textarea
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder="Enter text or URL…"
+        maxLength={MAX_LENGTH}
+        rows={4}
+        className="w-full bg-transparent border border-border/40 rounded-lg px-3 py-2.5 text-xs font-mono outline-none focus:border-primary/50 transition-colors text-foreground/80 placeholder:text-muted-foreground/30 resize-none"
+      />
+      <div className="text-[9px] text-muted-foreground/30 font-mono text-right mt-1 tabular-nums">
+        {value.length} / {MAX_LENGTH}
+      </div>
+    </div>
   );
 }