diff --git a/frontend/src/components/admin/OutputTypeTable.tsx b/frontend/src/components/admin/OutputTypeTable.tsx
index f1066a6..2199c00 100644
--- a/frontend/src/components/admin/OutputTypeTable.tsx
+++ b/frontend/src/components/admin/OutputTypeTable.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Pencil, Trash2, Plus, Check, X, ChevronDown, Copy } from 'lucide-react'
 import { toast } from 'sonner'
@@ -218,6 +218,452 @@ export default function OutputTypeTable() {
     return renderer === 'blender'
   }
 
+  // Render the edit form grid (shared between edit-row and add-row)
+  function renderEditFormGrid(
+    mode: 'edit' | 'add',
+    ot: OutputType | null,
+  ) {
+    // For edit mode, use editDraft + ot fallback. For add mode, use form state.
+    const isEdit = mode === 'edit' && ot !== null
+
+    // Getter helpers
+    const val = (field: keyof typeof form) => {
+      if (isEdit) {
+        if (field === 'name') return editDraft.name ?? ot!.name
+        if (field === 'renderer') return editDraft.renderer ?? ot!.renderer
+        if (field === 'output_format') return editDraft.output_format ?? ot!.output_format
+        if (field === 'is_animation') return editDraft.is_animation ?? ot!.is_animation
+        if (field === 'transparent_bg') return editDraft.transparent_bg ?? ot!.transparent_bg
+        if (field === 'cycles_device') return editDraft.cycles_device ?? (ot!.cycles_device || '')
+        if (field === 'sort_order') return editDraft.sort_order ?? ot!.sort_order
+        if (field === 'pricing_tier_id') return editDraft.pricing_tier_id ?? ot!.pricing_tier_id ?? ''
+        if (field === 'material_override') return editDraft.material_override ?? ot!.material_override ?? ''
+        // render_settings fields (prefixed with _)
+        if (field === 'width') return (editDraft as any)._width ?? (ot!.render_settings?.width || '')
+        if (field === 'height') return (editDraft as any)._height ?? (ot!.render_settings?.height || '')
+        if (field === 'engine') return (editDraft as any)._engine ?? (ot!.render_settings?.engine || '')
+        if (field === 'samples') return (editDraft as any)._samples ?? (ot!.render_settings?.samples || '')
+        if (field === 'frame_count') return (editDraft as any)._frame_count ?? (ot!.render_settings?.frame_count || '')
+        if (field === 'fps') return (editDraft as any)._fps ?? (ot!.render_settings?.fps || '')
+        if (field === 'turntable_axis') return (editDraft as any)._turntable_axis ?? (ot!.render_settings?.turntable_axis || 'world_z')
+        if (field === 'bg_color') {
+          return (editDraft as any)._bg_color !== undefined
+            ? (editDraft as any)._bg_color as string
+            : (ot!.render_settings?.bg_color as string || '')
+        }
+        if (field === 'noise_threshold') return (editDraft as any)._noise_threshold ?? (ot!.render_settings?.noise_threshold as string || '')
+        if (field === 'denoiser') return (editDraft as any)._denoiser ?? (ot!.render_settings?.denoiser as string || '')
+        if (field === 'denoising_input_passes') return (editDraft as any)._denoising_input_passes ?? (ot!.render_settings?.denoising_input_passes as string || '')
+        if (field === 'denoising_prefilter') return (editDraft as any)._denoising_prefilter ?? (ot!.render_settings?.denoising_prefilter as string || '')
+        if (field === 'denoising_quality') return (editDraft as any)._denoising_quality ?? (ot!.render_settings?.denoising_quality as string || '')
+        if (field === 'denoising_use_gpu') return (editDraft as any)._denoising_use_gpu ?? (ot!.render_settings?.denoising_use_gpu as string || '')
+        return (form as any)[field]
+      }
+      return (form as any)[field]
+    }
+
+    const set = (field: string, value: any) => {
+      if (isEdit) {
+        // render_settings fields get _ prefix in editDraft
+        const rsFields = ['width', 'height', 'engine', 'samples', 'frame_count', 'fps', 'turntable_axis', 'bg_color', 'noise_threshold', 'denoiser', 'denoising_input_passes', 'denoising_prefilter', 'denoising_quality', 'denoising_use_gpu']
+        if (rsFields.includes(field)) {
+          setEditDraft({ ...editDraft, [`_${field}`]: value } as any)
+        } else {
+          setEditDraft({ ...editDraft, [field]: value } as any)
+        }
+      } else {
+        setForm({ ...form, [field]: value })
+      }
+    }
+
+    const currentRenderer = val('renderer') as string
+    const currentFormat = val('output_format') as string
+    const currentIsAnimation = val('is_animation') as boolean
+    const isBlender = showBlenderSettings(currentRenderer)
+    const showBg = showTransparentBg(currentRenderer, currentFormat)
+    const bgColor = val('bg_color') as string
+    const bgEnabled = bgColor !== ''
+
+    const categoriesValue = isEdit
+      ? (editDraft.compatible_categories ?? ot!.compatible_categories) || []
+      : form.compatible_categories
+
+    return (
+      <>
+        {/* Row 1: Name | Renderer | Format | Animation */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Name</label>
+            <input
+              className="input-sm w-full"
+              placeholder="e.g. 3D Thumbnail"
+              value={val('name') as string}
+              onChange={(e) => set('name', e.target.value)}
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Renderer</label>
+            <select
+              className="input-sm w-full"
+              value={currentRenderer}
+              onChange={(e) => set('renderer', e.target.value)}
+            >
+              {RENDERERS.map((r) => <option key={r}>{r}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Format</label>
+            <select
+              className="input-sm w-full"
+              value={currentFormat}
+              onChange={(e) => set('output_format', e.target.value)}
+            >
+              {FORMATS.map((f) => <option key={f}>{f}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Animation</label>
+            <label className="flex items-center gap-2 mt-1">
+              <input
+                type="checkbox"
+                checked={currentIsAnimation}
+                onChange={(e) => set('is_animation', e.target.checked)}
+              />
+              <span className="text-sm text-content-secondary">Video output</span>
+            </label>
+          </div>
+        </div>
+
+        {/* Row 2: Turntable | Background | Device | Engine */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Turntable</label>
+            {currentIsAnimation ? (
+              <div className="flex flex-col gap-1.5">
+                <div className="flex items-center gap-1">
+                  <input
+                    type="number" min={1} max={3600}
+                    className="input-sm w-16" placeholder="120"
+                    value={val('frame_count')}
+                    onChange={(e) => set('frame_count', e.target.value)}
+                    title="Frame count"
+                  />
+                  <span className="text-content-muted text-xs">f</span>
+                  <input
+                    type="number" min={1} max={120}
+                    className="input-sm w-14" placeholder="30"
+                    value={val('fps')}
+                    onChange={(e) => set('fps', e.target.value)}
+                    title="FPS"
+                  />
+                  <span className="text-content-muted text-xs">fps</span>
+                </div>
+                <select
+                  className="input-sm w-full"
+                  value={val('turntable_axis') as string}
+                  onChange={(e) => set('turntable_axis', e.target.value)}
+                  title="Rotation axis"
+                >
+                  <option value="world_z">World Z</option>
+                  <option value="world_x">World X</option>
+                  <option value="world_y">World Y</option>
+                </select>
+              </div>
+            ) : (
+              <span className="text-content-muted text-sm">N/A (not animation)</span>
+            )}
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Background</label>
+            {showBg ? (
+              <div className="flex flex-col gap-1.5">
+                <label className="flex items-center gap-1.5 text-xs text-content-secondary">
+                  <input
+                    type="checkbox"
+                    checked={val('transparent_bg') as boolean}
+                    onChange={(e) => set('transparent_bg', e.target.checked)}
+                    title="Transparent background (PNG alpha)"
+                  />
+                  Transparent (alpha)
+                </label>
+                <label className="flex items-center gap-1.5 text-xs text-content-secondary">
+                  <input
+                    type="checkbox"
+                    checked={bgEnabled}
+                    onChange={(e) => set('bg_color', e.target.checked ? (bgColor || '#000000') : '')}
+                    title="Composite over solid background color"
+                  />
+                  BG color
+                </label>
+                {bgEnabled && (
+                  <div className="flex items-center gap-1">
+                    <input
+                      type="color"
+                      className="w-7 h-6 rounded border border-border-default cursor-pointer p-0"
+                      value={bgColor}
+                      onChange={(e) => set('bg_color', e.target.value)}
+                    />
+                    <input
+                      type="text"
+                      className="input-sm w-20 font-mono text-xs"
+                      placeholder="#rrggbb"
+                      value={bgColor}
+                      onChange={(e) => set('bg_color', e.target.value)}
+                    />
+                  </div>
+                )}
+              </div>
+            ) : (
+              <span className="text-content-muted text-sm">N/A (not Blender)</span>
+            )}
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Device</label>
+            {isBlender ? (
+              <select
+                className="input-sm w-full"
+                value={val('cycles_device') as string}
+                onChange={(e) => set('cycles_device', e.target.value || null)}
+              >
+                <option value="">System default</option>
+                <option value="auto">Auto</option>
+                <option value="gpu">GPU</option>
+                <option value="cpu">CPU</option>
+              </select>
+            ) : (
+              <span className="text-content-muted text-sm">N/A (not Blender)</span>
+            )}
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Engine</label>
+            {isBlender ? (
+              <select
+                className="input-sm w-full"
+                value={val('engine') as string}
+                onChange={(e) => set('engine', e.target.value)}
+              >
+                <option value="">System default</option>
+                <option value="cycles">Cycles</option>
+                <option value="eevee">EEVEE</option>
+              </select>
+            ) : (
+              <span className="text-content-muted text-sm">N/A (not Blender)</span>
+            )}
+          </div>
+        </div>
+
+        {/* Row 3: Samples | Resolution | Pricing Tier | Workflow */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Samples</label>
+            {isBlender ? (
+              <input
+                type="number"
+                min={1}
+                max={4096}
+                className="input-sm w-full"
+                placeholder="default"
+                value={val('samples')}
+                onChange={(e) => set('samples', e.target.value)}
+              />
+            ) : (
+              <span className="text-content-muted text-sm">N/A (not Blender)</span>
+            )}
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Resolution (W x H)</label>
+            <div className="flex items-center gap-1">
+              <input
+                type="number"
+                className="input-sm w-20"
+                placeholder="W"
+                value={val('width')}
+                onChange={(e) => set('width', e.target.value)}
+              />
+              <span className="text-content-muted text-xs">x</span>
+              <input
+                type="number"
+                className="input-sm w-20"
+                placeholder="H"
+                value={val('height')}
+                onChange={(e) => set('height', e.target.value)}
+              />
+            </div>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Pricing Tier</label>
+            <select
+              className="input-sm w-full"
+              value={val('pricing_tier_id') as string | number}
+              onChange={(e) => set('pricing_tier_id', e.target.value ? Number(e.target.value) : null)}
+            >
+              <option value="">Category default</option>
+              {pricingTiers?.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.category_key}/{t.quality_level} — {t.price_per_item.toFixed(2)}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Workflow</label>
+            {isEdit ? (
+              <select
+                className="input-sm w-full"
+                value={(editDraft.workflow_definition_id ?? ot!.workflow_definition_id) ?? ''}
+                onChange={(e) => set('workflow_definition_id', e.target.value || null)}
+              >
+                <option value="">— Legacy —</option>
+                {workflows?.filter((w) => w.is_active).map((w) => (
+                  <option key={w.id} value={w.id}>{w.name}</option>
+                ))}
+              </select>
+            ) : (
+              <span className="text-content-muted text-sm">— (set after creation)</span>
+            )}
+          </div>
+        </div>
+
+        {/* Row 4: Categories | Material Override | Sort Order | Active */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Categories</label>
+            <CategoryMultiSelect
+              value={categoriesValue}
+              onChange={(cats) => set('compatible_categories', cats)}
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Material Override</label>
+            <select
+              className="input-sm w-full text-xs"
+              value={val('material_override') as string}
+              onChange={(e) => set('material_override', e.target.value || null)}
+            >
+              <option value="">— None —</option>
+              {libraryMaterials.map((m: Material) => (
+                <option key={m.id} value={m.name}>{m.name}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Sort Order</label>
+            <input
+              type="number"
+              className="input-sm w-20"
+              value={val('sort_order') as number}
+              onChange={(e) => set('sort_order', Number(e.target.value))}
+            />
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-content-muted mb-1">Active</label>
+            {isEdit ? (
+              <label className="flex items-center gap-2 mt-1">
+                <input
+                  type="checkbox"
+                  checked={editDraft.is_active ?? ot!.is_active}
+                  onChange={(e) => set('is_active', e.target.checked)}
+                />
+                <span className="text-sm text-content-secondary">Visible in wizard</span>
+              </label>
+            ) : (
+              <span className="text-content-muted text-sm">— (active by default)</span>
+            )}
+          </div>
+        </div>
+
+        {/* Row 5: Denoising settings (only for Blender) */}
+        {isBlender && (
+          <div className="mt-4 pt-3 border-t border-border-light">
+            <label className="block text-xs font-medium text-content-muted mb-2">Denoising Settings (Blender)</label>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+              <div>
+                <label className="block text-xs text-content-muted mb-0.5">Denoiser</label>
+                <select
+                  className="input-sm w-full"
+                  value={val('denoiser') as string}
+                  onChange={(e) => set('denoiser', e.target.value)}
+                  title="Denoiser"
+                >
+                  <option value="">Auto</option>
+                  <option value="OPTIX">OptiX</option>
+                  <option value="OPENIMAGEDENOISE">OIDN</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-content-muted mb-0.5">Noise Threshold</label>
+                <input
+                  type="number"
+                  step="0.001" min="0.001" max="1"
+                  className="input-sm w-full"
+                  placeholder="auto"
+                  value={val('noise_threshold')}
+                  onChange={(e) => set('noise_threshold', e.target.value)}
+                  title="Noise threshold (adaptive sampling)"
+                />
+              </div>
+              <div>
+                <label className="block text-xs text-content-muted mb-0.5">Input Passes</label>
+                <select
+                  className="input-sm w-full"
+                  value={val('denoising_input_passes') as string}
+                  onChange={(e) => set('denoising_input_passes', e.target.value)}
+                  title="Input passes"
+                >
+                  <option value="">Default</option>
+                  <option value="RGB">RGB</option>
+                  <option value="RGB_ALBEDO">RGB+Albedo</option>
+                  <option value="RGB_ALBEDO_NORMAL">RGB+Albedo+Normal</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-content-muted mb-0.5">Prefilter</label>
+                <select
+                  className="input-sm w-full"
+                  value={val('denoising_prefilter') as string}
+                  onChange={(e) => set('denoising_prefilter', e.target.value)}
+                  title="Prefilter"
+                >
+                  <option value="">Default</option>
+                  <option value="NONE">None</option>
+                  <option value="FAST">Fast</option>
+                  <option value="ACCURATE">Accurate</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-content-muted mb-0.5">Quality</label>
+                <select
+                  className="input-sm w-full"
+                  value={val('denoising_quality') as string}
+                  onChange={(e) => set('denoising_quality', e.target.value)}
+                  title="Quality (Blender 4.2+)"
+                >
+                  <option value="">Default</option>
+                  <option value="HIGH">High</option>
+                  <option value="BALANCED">Balanced</option>
+                  <option value="FAST">Fast</option>
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs text-content-muted mb-0.5">GPU Routing</label>
+                <select
+                  className="input-sm w-full"
+                  value={val('denoising_use_gpu') as string}
+                  onChange={(e) => set('denoising_use_gpu', e.target.value)}
+                  title="OIDN GPU routing"
+                >
+                  <option value="">Auto</option>
+                  <option value="1">GPU</option>
+                  <option value="0">CPU</option>
+                </select>
+              </div>
+            </div>
+          </div>
+        )}
+      </>
+    )
+  }
+
   return (
     <div>
       <div className="overflow-x-auto">
@@ -235,7 +681,7 @@ export default function OutputTypeTable() {
             <th className="px-4 py-2 font-medium text-content-secondary" title="Sample count override for this output type (overrides global Cycles/EEVEE sample settings)">Samples</th>
             <th className="px-4 py-2 font-medium text-content-secondary" title="Cycles denoising settings: denoiser, noise threshold, input passes, prefilter, quality, GPU routing">Denoise</th>
             <th className="px-4 py-2 font-medium text-content-secondary" title="Compatible product categories — empty means compatible with all categories">Categories</th>
-            <th className="px-4 py-2 font-medium text-content-secondary" title="Output resolution in pixels (width × height); leave empty to use global default">Resolution</th>
+            <th className="px-4 py-2 font-medium text-content-secondary" title="Output resolution in pixels (width x height); leave empty to use global default">Resolution</th>
             <th className="px-4 py-2 font-medium text-content-secondary" title="Pricing tier used to calculate the per-item cost for this output type">Pricing</th>
             <th className="px-4 py-2 font-medium text-content-secondary" title="Workflow definition assigned to this output type">Workflow</th>
             <th className="px-4 py-2 font-medium text-content-secondary" title="Material override — apply a single material to ALL product parts (e.g. x-ray, clay render)">Mat Override</th>
@@ -247,858 +693,267 @@ export default function OutputTypeTable() {
         <tbody>
           {isLoading && (
             <tr>
-              <td colSpan={17} className="px-4 py-4 text-center text-content-muted">Loading…</td>
+              <td colSpan={18} className="px-4 py-4 text-center text-content-muted">Loading...</td>
             </tr>
           )}
           {types?.map((ot) => (
-            <tr key={ot.id} className="border-b border-border-light hover:bg-surface-hover">
-              {editingId === ot.id ? (
-                <>
-                  <td className="px-4 py-2">
-                    <input
-                      className="input-sm"
-                      value={editDraft.name ?? ot.name}
-                      onChange={(e) => setEditDraft({ ...editDraft, name: e.target.value })}
-                    />
-                  </td>
-                  <td className="px-4 py-2">
-                    <select
-                      className="input-sm"
-                      value={editDraft.renderer ?? ot.renderer}
-                      onChange={(e) => setEditDraft({ ...editDraft, renderer: e.target.value })}
-                    >
-                      {RENDERERS.map((r) => <option key={r}>{r}</option>)}
-                    </select>
-                  </td>
-                  <td className="px-4 py-2">
-                    <select
-                      className="input-sm"
-                      value={editDraft.output_format ?? ot.output_format}
-                      onChange={(e) => setEditDraft({ ...editDraft, output_format: e.target.value })}
-                    >
-                      {FORMATS.map((f) => <option key={f}>{f}</option>)}
-                    </select>
-                  </td>
-                  <td className="px-4 py-2">
-                    <input
-                      type="checkbox"
-                      checked={editDraft.is_animation ?? ot.is_animation}
-                      onChange={(e) => setEditDraft({ ...editDraft, is_animation: e.target.checked })}
-                    />
-                  </td>
-                  <td className="px-4 py-2">
-                    {(editDraft.is_animation ?? ot.is_animation) ? (
-                      <div className="flex flex-col gap-1">
-                        <div className="flex items-center gap-1">
-                          <input
-                            type="number" min={1} max={3600}
-                            className="input-sm w-16" placeholder="120"
-                            value={(editDraft as any)._frame_count ?? (ot.render_settings?.frame_count || '')}
-                            onChange={(e) => setEditDraft({ ...editDraft, _frame_count: e.target.value } as any)}
-                            title="Frame count"
-                          />
-                          <span className="text-content-muted text-xs">f</span>
-                          <input
-                            type="number" min={1} max={120}
-                            className="input-sm w-14" placeholder="30"
-                            value={(editDraft as any)._fps ?? (ot.render_settings?.fps || '')}
-                            onChange={(e) => setEditDraft({ ...editDraft, _fps: e.target.value } as any)}
-                            title="FPS"
-                          />
-                          <span className="text-content-muted text-xs">fps</span>
-                        </div>
-                        <select
-                          className="input-sm"
-                          value={(editDraft as any)._turntable_axis ?? (ot.render_settings?.turntable_axis || 'world_z')}
-                          onChange={(e) => setEditDraft({ ...editDraft, _turntable_axis: e.target.value } as any)}
-                          title="Rotation axis"
-                        >
-                          <option value="world_z">World Z</option>
-                          <option value="world_x">World X</option>
-                          <option value="world_y">World Y</option>
-                        </select>
-                      </div>
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showTransparentBg(editDraft.renderer ?? ot.renderer, editDraft.output_format ?? ot.output_format) ? (
-                      <div className="flex flex-col gap-1">
-                        <label className="flex items-center gap-1 text-xs text-content-secondary">
-                          <input
-                            type="checkbox"
-                            checked={editDraft.transparent_bg ?? ot.transparent_bg}
-                            onChange={(e) => setEditDraft({ ...editDraft, transparent_bg: e.target.checked })}
-                            title="Transparent background (PNG alpha)"
-                          />
-                          alpha
-                        </label>
-                        {(() => {
-                          const cur = (editDraft as any)._bg_color !== undefined
-                            ? (editDraft as any)._bg_color as string
-                            : (ot.render_settings?.bg_color as string || '')
-                          const enabled = cur !== ''
-                          return (
-                            <>
-                              <label className="flex items-center gap-1 text-xs text-content-secondary">
-                                <input
-                                  type="checkbox"
-                                  checked={enabled}
-                                  onChange={(e) => setEditDraft({ ...editDraft, _bg_color: e.target.checked ? (cur || '#000000') : '' } as any)}
-                                  title="Composite over solid background color"
-                                />
-                                BG color
-                              </label>
-                              {enabled && (
-                                <div className="flex items-center gap-1">
-                                  <input
-                                    type="color"
-                                    className="w-7 h-6 rounded border border-border-default cursor-pointer p-0"
-                                    value={cur}
-                                    onChange={(e) => setEditDraft({ ...editDraft, _bg_color: e.target.value } as any)}
-                                  />
-                                  <input
-                                    type="text"
-                                    className="input-sm w-20 font-mono text-xs"
-                                    placeholder="#rrggbb"
-                                    value={cur}
-                                    onChange={(e) => setEditDraft({ ...editDraft, _bg_color: e.target.value } as any)}
-                                  />
-                                </div>
-                              )}
-                            </>
-                          )
-                        })()}
-                      </div>
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showBlenderSettings(editDraft.renderer ?? ot.renderer) ? (
-                      <select
-                        className="input-sm"
-                        value={editDraft.cycles_device ?? (ot.cycles_device || '')}
-                        onChange={(e) => setEditDraft({ ...editDraft, cycles_device: e.target.value || null })}
-                      >
-                        <option value="">System default</option>
-                        <option value="auto">Auto</option>
-                        <option value="gpu">GPU</option>
-                        <option value="cpu">CPU</option>
-                      </select>
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showBlenderSettings(editDraft.renderer ?? ot.renderer) ? (
-                      <select
-                        className="input-sm"
-                        value={(editDraft as any)._engine ?? (ot.render_settings?.engine || '')}
-                        onChange={(e) => setEditDraft({ ...editDraft, _engine: e.target.value } as any)}
-                      >
-                        <option value="">System default</option>
-                        <option value="cycles">Cycles</option>
-                        <option value="eevee">EEVEE</option>
-                      </select>
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showBlenderSettings(editDraft.renderer ?? ot.renderer) ? (
-                      <input
-                        type="number"
-                        min={1}
-                        max={4096}
-                        className="input-sm w-20"
-                        placeholder="default"
-                        value={(editDraft as any)._samples ?? (ot.render_settings?.samples || '')}
-                        onChange={(e) => setEditDraft({ ...editDraft, _samples: e.target.value } as any)}
-                      />
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showBlenderSettings(editDraft.renderer ?? ot.renderer) ? (
-                      <div className="flex flex-col gap-1 min-w-[120px]">
-                        <select
-                          className="input-sm"
-                          value={(editDraft as any)._denoiser ?? (ot.render_settings?.denoiser as string || '')}
-                          onChange={(e) => setEditDraft({ ...editDraft, _denoiser: e.target.value } as any)}
-                          title="Denoiser"
-                        >
-                          <option value="">Auto</option>
-                          <option value="OPTIX">OptiX</option>
-                          <option value="OPENIMAGEDENOISE">OIDN</option>
-                        </select>
-                        <input
-                          type="number"
-                          step="0.001" min="0.001" max="1"
-                          className="input-sm w-20"
-                          placeholder="threshold"
-                          value={(editDraft as any)._noise_threshold ?? (ot.render_settings?.noise_threshold as string || '')}
-                          onChange={(e) => setEditDraft({ ...editDraft, _noise_threshold: e.target.value } as any)}
-                          title="Noise threshold (adaptive sampling)"
-                        />
-                        <select
-                          className="input-sm"
-                          value={(editDraft as any)._denoising_input_passes ?? (ot.render_settings?.denoising_input_passes as string || '')}
-                          onChange={(e) => setEditDraft({ ...editDraft, _denoising_input_passes: e.target.value } as any)}
-                          title="Input passes"
-                        >
-                          <option value="">Default</option>
-                          <option value="RGB">RGB</option>
-                          <option value="RGB_ALBEDO">RGB+Albedo</option>
-                          <option value="RGB_ALBEDO_NORMAL">RGB+Albedo+Normal</option>
-                        </select>
-                        <select
-                          className="input-sm"
-                          value={(editDraft as any)._denoising_prefilter ?? (ot.render_settings?.denoising_prefilter as string || '')}
-                          onChange={(e) => setEditDraft({ ...editDraft, _denoising_prefilter: e.target.value } as any)}
-                          title="Prefilter"
-                        >
-                          <option value="">Default</option>
-                          <option value="NONE">None</option>
-                          <option value="FAST">Fast</option>
-                          <option value="ACCURATE">Accurate</option>
-                        </select>
-                        <select
-                          className="input-sm"
-                          value={(editDraft as any)._denoising_quality ?? (ot.render_settings?.denoising_quality as string || '')}
-                          onChange={(e) => setEditDraft({ ...editDraft, _denoising_quality: e.target.value } as any)}
-                          title="Quality (Blender 4.2+)"
-                        >
-                          <option value="">Default</option>
-                          <option value="HIGH">High</option>
-                          <option value="BALANCED">Balanced</option>
-                          <option value="FAST">Fast</option>
-                        </select>
-                        <select
-                          className="input-sm"
-                          value={(editDraft as any)._denoising_use_gpu ?? (ot.render_settings?.denoising_use_gpu as string || '')}
-                          onChange={(e) => setEditDraft({ ...editDraft, _denoising_use_gpu: e.target.value } as any)}
-                          title="OIDN GPU routing"
-                        >
-                          <option value="">Auto</option>
-                          <option value="1">GPU</option>
-                          <option value="0">CPU</option>
-                        </select>
-                      </div>
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    <CategoryMultiSelect
-                      value={(editDraft.compatible_categories ?? ot.compatible_categories) || []}
-                      onChange={(cats) => setEditDraft({ ...editDraft, compatible_categories: cats })}
-                    />
-                  </td>
-                  <td className="px-4 py-2">
-                    <div className="flex items-center gap-1">
-                      <input
-                        type="number"
-                        className="input-sm w-16"
-                        placeholder="W"
-                        value={(editDraft as any)._width ?? (ot.render_settings?.width || '')}
-                        onChange={(e) => setEditDraft({ ...editDraft, _width: e.target.value } as any)}
-                      />
-                      <span className="text-content-muted text-xs">x</span>
-                      <input
-                        type="number"
-                        className="input-sm w-16"
-                        placeholder="H"
-                        value={(editDraft as any)._height ?? (ot.render_settings?.height || '')}
-                        onChange={(e) => setEditDraft({ ...editDraft, _height: e.target.value } as any)}
-                      />
+            <React.Fragment key={ot.id}>
+              {/* Display row — always visible */}
+              <tr className={`border-b border-border-light hover:bg-surface-hover ${editingId === ot.id ? 'bg-surface-hover' : ''}`}>
+                <td className="px-4 py-2 font-medium">{ot.name}</td>
+                <td className="px-4 py-2 text-content-muted">{ot.renderer}</td>
+                <td className="px-4 py-2 text-content-muted">{ot.output_format}</td>
+                <td className="px-4 py-2">
+                  {ot.is_animation && (
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-purple-50 text-purple-700">video</span>
+                  )}
+                </td>
+                <td className="px-4 py-2">
+                  {ot.is_animation ? (
+                    <div className="flex flex-col gap-0.5">
+                      <span className="text-xs text-content-secondary">
+                        {(ot.render_settings?.frame_count as number) || 120}f / {(ot.render_settings?.fps as number) || 30}fps
+                      </span>
+                      <span className="text-xs text-content-muted">
+                        360° {({'world_z': 'World Z', 'world_x': 'World X', 'world_y': 'World Y'} as Record<string, string>)[ot.render_settings?.turntable_axis as string] ?? 'World Z'}
+                      </span>
                     </div>
-                  </td>
-                  <td className="px-4 py-2">
-                    <select
-                      className="input-sm"
-                      value={editDraft.pricing_tier_id ?? ot.pricing_tier_id ?? ''}
-                      onChange={(e) => setEditDraft({ ...editDraft, pricing_tier_id: e.target.value ? Number(e.target.value) : null })}
-                    >
-                      <option value="">Category default</option>
-                      {pricingTiers?.map((t) => (
-                        <option key={t.id} value={t.id}>
-                          {t.category_key}/{t.quality_level} — {t.price_per_item.toFixed(2)}
-                        </option>
-                      ))}
-                    </select>
-                  </td>
-                  <td className="px-4 py-2">
-                    <select
-                      className="input-sm"
-                      value={editDraft.workflow_definition_id ?? ot.workflow_definition_id ?? ''}
-                      onChange={(e) => setEditDraft({ ...editDraft, workflow_definition_id: e.target.value || null })}
-                    >
-                      <option value="">— Legacy —</option>
-                      {workflows?.filter((w) => w.is_active).map((w) => (
-                        <option key={w.id} value={w.id}>{w.name}</option>
-                      ))}
-                    </select>
-                  </td>
-                  <td className="px-4 py-2">
-                    <select
-                      className="input-sm text-xs"
-                      value={editDraft.material_override ?? ot.material_override ?? ''}
-                      onChange={(e) => setEditDraft({ ...editDraft, material_override: e.target.value || null })}
-                    >
-                      <option value="">— None —</option>
-                      {libraryMaterials.map((m: Material) => (
-                        <option key={m.id} value={m.name}>{m.name}</option>
-                      ))}
-                    </select>
-                  </td>
-                  <td className="px-4 py-2">
-                    <input
-                      type="number"
-                      className="input-sm w-16"
-                      value={editDraft.sort_order ?? ot.sort_order}
-                      onChange={(e) => setEditDraft({ ...editDraft, sort_order: Number(e.target.value) })}
-                    />
-                  </td>
-                  <td className="px-4 py-2">
-                    <input
-                      type="checkbox"
-                      checked={editDraft.is_active ?? ot.is_active}
-                      onChange={(e) => setEditDraft({ ...editDraft, is_active: e.target.checked })}
-                    />
-                  </td>
-                  <td className="px-4 py-2 flex items-center gap-2">
-                    <button
-                      className="btn-icon text-status-success-text"
-                      onClick={() => updateMut.mutate({ id: ot.id, data: editDraft })}
-                      title="Save changes"
-                    >
-                      <Check size={15} />
-                    </button>
-                    <button
-                      className="btn-icon text-content-muted"
-                      onClick={() => { setEditingId(null); setEditDraft({}) }}
-                      title="Cancel editing"
-                    >
-                      <X size={15} />
-                    </button>
-                  </td>
-                </>
-              ) : (
-                <>
-                  <td className="px-4 py-2 font-medium">{ot.name}</td>
-                  <td className="px-4 py-2 text-content-muted">{ot.renderer}</td>
-                  <td className="px-4 py-2 text-content-muted">{ot.output_format}</td>
-                  <td className="px-4 py-2">
-                    {ot.is_animation && (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-purple-50 text-purple-700">video</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {ot.is_animation ? (
-                      <div className="flex flex-col gap-0.5">
-                        <span className="text-xs text-content-secondary">
-                          {(ot.render_settings?.frame_count as number) || 120}f / {(ot.render_settings?.fps as number) || 30}fps
-                        </span>
-                        <span className="text-xs text-content-muted">
-                          360° {({'world_z': 'World Z', 'world_x': 'World X', 'world_y': 'World Y'} as Record<string, string>)[ot.render_settings?.turntable_axis as string] ?? 'World Z'}
-                        </span>
-                      </div>
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showTransparentBg(ot.renderer, ot.output_format) && (
-                      <div className="flex flex-col gap-1">
-                        {ot.transparent_bg && (
-                          <span className="text-xs px-1.5 py-0.5 rounded bg-sky-50 text-sky-700" title="Transparent background">alpha</span>
-                        )}
-                        {!!ot.render_settings?.bg_color && (
-                          <div className="flex items-center gap-1" title={`BG color: ${ot.render_settings.bg_color}`}>
-                            <span
-                              className="inline-block w-4 h-4 rounded border border-border-default"
-                              style={{ backgroundColor: ot.render_settings.bg_color as string }}
-                            />
-                            <span className="text-xs text-content-muted font-mono">{ot.render_settings.bg_color as string}</span>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showBlenderSettings(ot.renderer) ? (
-                      ot.cycles_device ? (
-                        <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${
-                          ot.cycles_device === 'gpu' ? 'bg-violet-50 text-violet-700' :
-                          ot.cycles_device === 'cpu' ? 'bg-status-warning-bg text-status-warning-text' :
-                          'bg-surface-muted text-content-muted'
-                        }`}>
-                          {ot.cycles_device.toUpperCase()}
-                        </span>
-                      ) : (
-                        <span className="text-xs text-content-muted">system</span>
-                      )
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showBlenderSettings(ot.renderer) ? (
-                      ot.render_settings?.engine ? (
-                        <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${
-                          ot.render_settings.engine === 'cycles' ? 'bg-status-success-bg text-status-success-text' : 'bg-status-info-bg text-status-info-text'
-                        }`}>
-                          {ot.render_settings.engine === 'cycles' ? 'Cycles' : 'EEVEE'}
-                        </span>
-                      ) : (
-                        <span className="text-xs text-content-muted">default</span>
-                      )
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showBlenderSettings(ot.renderer) ? (
-                      ot.render_settings?.samples ? (
-                        <span className="text-xs font-medium text-content-secondary">{ot.render_settings.samples as number}</span>
-                      ) : (
-                        <span className="text-xs text-content-muted">default</span>
-                      )
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {showBlenderSettings(ot.renderer) ? (
-                      <div className="flex flex-col gap-0.5">
-                        {ot.render_settings?.denoiser ? (
-                          <span className="text-xs px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-700 font-medium">
-                            {ot.render_settings.denoiser === 'OPTIX' ? 'OptiX' : 'OIDN'}
-                          </span>
-                        ) : null}
-                        {ot.render_settings?.noise_threshold ? (
-                          <span className="text-xs text-content-muted">t={ot.render_settings.noise_threshold as string}</span>
-                        ) : null}
-                        {ot.render_settings?.denoising_prefilter ? (
-                          <span className="text-xs text-content-muted">{ot.render_settings.denoising_prefilter as string}</span>
-                        ) : null}
-                        {!ot.render_settings?.denoiser && !ot.render_settings?.noise_threshold && !ot.render_settings?.denoising_prefilter && (
-                          <span className="text-xs text-content-muted">default</span>
-                        )}
-                      </div>
-                    ) : (
-                      <span className="text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {(!ot.compatible_categories || ot.compatible_categories.length === 0) ? (
-                      <span className="text-xs text-content-muted">All</span>
-                    ) : (
-                      <div className="flex flex-wrap gap-1">
-                        {ot.compatible_categories.map((c: string) => (
-                          <span key={c} className="text-xs px-1.5 py-0.5 rounded bg-status-info-bg text-status-info-text">
-                            {ALL_CATEGORIES.find((ac) => ac.key === c)?.label || c}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </td>
-                  <td className="px-4 py-2 text-content-muted text-xs">
-                    {ot.render_settings?.width || ot.render_settings?.height
-                      ? `${ot.render_settings.width || '?'}x${ot.render_settings.height || '?'}`
-                      : <span className="text-content-muted">default</span>}
-                  </td>
-                  <td className="px-4 py-2">
-                    {ot.pricing_tier_name ? (
-                      <div className="flex items-center gap-1">
-                        <span className="text-xs text-content-secondary truncate max-w-[80px]" title={ot.pricing_tier_name}>
-                          {ot.pricing_tier_name}
-                        </span>
-                        {ot.price_per_item != null && (
-                          <span className="text-xs px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-700 font-medium">
-                            {ot.price_per_item.toFixed(2)}
-                          </span>
-                        )}
-                      </div>
-                    ) : (
-                      <span className="text-xs text-content-muted">Category default</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2">
-                    {(() => {
-                      const wf = workflows?.find((w) => w.id === ot.workflow_definition_id)
-                      return wf ? (
-                        <span className="text-xs px-2 py-0.5 rounded-full bg-status-success-bg text-status-success-text font-medium">
-                          {wf.name}
-                        </span>
-                      ) : (
-                        <span className="text-xs px-2 py-0.5 rounded-full bg-surface-muted text-content-muted">
-                          Legacy
-                        </span>
-                      )
-                    })()}
-                  </td>
-                  <td className="px-4 py-2">
-                    {ot.material_override ? (
-                      <span className="text-xs px-1.5 py-0.5 rounded bg-amber-50 text-amber-700 font-mono truncate block max-w-[140px]" title={ot.material_override}>
-                        {ot.material_override.replace('SCHAEFFLER_', '').replace(/_/g, ' ')}
+                  ) : (
+                    <span className="text-content-muted">—</span>
+                  )}
+                </td>
+                <td className="px-4 py-2">
+                  {showTransparentBg(ot.renderer, ot.output_format) && (
+                    <div className="flex flex-col gap-1">
+                      {ot.transparent_bg && (
+                        <span className="text-xs px-1.5 py-0.5 rounded bg-sky-50 text-sky-700" title="Transparent background">alpha</span>
+                      )}
+                      {!!ot.render_settings?.bg_color && (
+                        <div className="flex items-center gap-1" title={`BG color: ${ot.render_settings.bg_color}`}>
+                          <span
+                            className="inline-block w-4 h-4 rounded border border-border-default"
+                            style={{ backgroundColor: ot.render_settings.bg_color as string }}
+                          />
+                          <span className="text-xs text-content-muted font-mono">{ot.render_settings.bg_color as string}</span>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </td>
+                <td className="px-4 py-2">
+                  {showBlenderSettings(ot.renderer) ? (
+                    ot.cycles_device ? (
+                      <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${
+                        ot.cycles_device === 'gpu' ? 'bg-violet-50 text-violet-700' :
+                        ot.cycles_device === 'cpu' ? 'bg-status-warning-bg text-status-warning-text' :
+                        'bg-surface-muted text-content-muted'
+                      }`}>
+                        {ot.cycles_device.toUpperCase()}
                       </span>
                     ) : (
-                      <span className="text-xs text-content-muted">—</span>
-                    )}
-                  </td>
-                  <td className="px-4 py-2 text-content-muted">{ot.sort_order}</td>
-                  <td className="px-4 py-2">
-                    <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
-                      ot.is_active ? 'bg-status-success-bg text-status-success-text' : 'bg-surface-muted text-content-muted'
-                    }`}>
-                      {ot.is_active ? 'active' : 'inactive'}
+                      <span className="text-xs text-content-muted">system</span>
+                    )
+                  ) : (
+                    <span className="text-content-muted">—</span>
+                  )}
+                </td>
+                <td className="px-4 py-2">
+                  {showBlenderSettings(ot.renderer) ? (
+                    ot.render_settings?.engine ? (
+                      <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${
+                        ot.render_settings.engine === 'cycles' ? 'bg-status-success-bg text-status-success-text' : 'bg-status-info-bg text-status-info-text'
+                      }`}>
+                        {ot.render_settings.engine === 'cycles' ? 'Cycles' : 'EEVEE'}
+                      </span>
+                    ) : (
+                      <span className="text-xs text-content-muted">default</span>
+                    )
+                  ) : (
+                    <span className="text-content-muted">—</span>
+                  )}
+                </td>
+                <td className="px-4 py-2">
+                  {showBlenderSettings(ot.renderer) ? (
+                    ot.render_settings?.samples ? (
+                      <span className="text-xs font-medium text-content-secondary">{ot.render_settings.samples as number}</span>
+                    ) : (
+                      <span className="text-xs text-content-muted">default</span>
+                    )
+                  ) : (
+                    <span className="text-content-muted">—</span>
+                  )}
+                </td>
+                <td className="px-4 py-2">
+                  {showBlenderSettings(ot.renderer) ? (
+                    <div className="flex flex-col gap-0.5">
+                      {ot.render_settings?.denoiser ? (
+                        <span className="text-xs px-1.5 py-0.5 rounded bg-indigo-50 text-indigo-700 font-medium">
+                          {ot.render_settings.denoiser === 'OPTIX' ? 'OptiX' : 'OIDN'}
+                        </span>
+                      ) : null}
+                      {ot.render_settings?.noise_threshold ? (
+                        <span className="text-xs text-content-muted">t={ot.render_settings.noise_threshold as string}</span>
+                      ) : null}
+                      {ot.render_settings?.denoising_prefilter ? (
+                        <span className="text-xs text-content-muted">{ot.render_settings.denoising_prefilter as string}</span>
+                      ) : null}
+                      {!ot.render_settings?.denoiser && !ot.render_settings?.noise_threshold && !ot.render_settings?.denoising_prefilter && (
+                        <span className="text-xs text-content-muted">default</span>
+                      )}
+                    </div>
+                  ) : (
+                    <span className="text-content-muted">—</span>
+                  )}
+                </td>
+                <td className="px-4 py-2">
+                  {(!ot.compatible_categories || ot.compatible_categories.length === 0) ? (
+                    <span className="text-xs text-content-muted">All</span>
+                  ) : (
+                    <div className="flex flex-wrap gap-1">
+                      {ot.compatible_categories.map((c: string) => (
+                        <span key={c} className="text-xs px-1.5 py-0.5 rounded bg-status-info-bg text-status-info-text">
+                          {ALL_CATEGORIES.find((ac) => ac.key === c)?.label || c}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </td>
+                <td className="px-4 py-2 text-content-muted text-xs">
+                  {ot.render_settings?.width || ot.render_settings?.height
+                    ? `${ot.render_settings.width || '?'}x${ot.render_settings.height || '?'}`
+                    : <span className="text-content-muted">default</span>}
+                </td>
+                <td className="px-4 py-2">
+                  {ot.pricing_tier_name ? (
+                    <div className="flex items-center gap-1">
+                      <span className="text-xs text-content-secondary truncate max-w-[80px]" title={ot.pricing_tier_name}>
+                        {ot.pricing_tier_name}
+                      </span>
+                      {ot.price_per_item != null && (
+                        <span className="text-xs px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-700 font-medium">
+                          {ot.price_per_item.toFixed(2)}
+                        </span>
+                      )}
+                    </div>
+                  ) : (
+                    <span className="text-xs text-content-muted">Category default</span>
+                  )}
+                </td>
+                <td className="px-4 py-2">
+                  {(() => {
+                    const wf = workflows?.find((w) => w.id === ot.workflow_definition_id)
+                    return wf ? (
+                      <span className="text-xs px-2 py-0.5 rounded-full bg-status-success-bg text-status-success-text font-medium">
+                        {wf.name}
+                      </span>
+                    ) : (
+                      <span className="text-xs px-2 py-0.5 rounded-full bg-surface-muted text-content-muted">
+                        Legacy
+                      </span>
+                    )
+                  })()}
+                </td>
+                <td className="px-4 py-2">
+                  {ot.material_override ? (
+                    <span className="text-xs px-1.5 py-0.5 rounded bg-amber-50 text-amber-700 font-mono truncate block max-w-[140px]" title={ot.material_override}>
+                      {ot.material_override.replace('SCHAEFFLER_', '').replace(/_/g, ' ')}
                     </span>
+                  ) : (
+                    <span className="text-xs text-content-muted">—</span>
+                  )}
+                </td>
+                <td className="px-4 py-2 text-content-muted">{ot.sort_order}</td>
+                <td className="px-4 py-2">
+                  <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
+                    ot.is_active ? 'bg-status-success-bg text-status-success-text' : 'bg-surface-muted text-content-muted'
+                  }`}>
+                    {ot.is_active ? 'active' : 'inactive'}
+                  </span>
+                </td>
+                <td className="px-4 py-2 flex items-center gap-2">
+                  <button
+                    className="btn-icon text-content-muted hover:text-accent"
+                    onClick={() => {
+                      if (editingId === ot.id) {
+                        setEditingId(null); setEditDraft({})
+                      } else {
+                        setEditingId(ot.id); setEditDraft({})
+                      }
+                    }}
+                    title={editingId === ot.id ? 'Collapse edit form' : 'Edit output type'}
+                  >
+                    <Pencil size={14} />
+                  </button>
+                  <button
+                    className="btn-icon text-content-muted hover:text-blue-500"
+                    onClick={() => duplicateMut.mutate(ot)}
+                    disabled={duplicateMut.isPending}
+                    title="Duplicate output type"
+                  >
+                    <Copy size={14} />
+                  </button>
+                  <button
+                    className="btn-icon text-content-muted hover:text-red-500"
+                    onClick={() => {
+                      if (confirm(`Delete output type "${ot.name}"?`)) deleteMut.mutate(ot.id)
+                    }}
+                    title="Delete output type"
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </td>
+              </tr>
+
+              {/* Expandable edit form row */}
+              {editingId === ot.id && (
+                <tr>
+                  <td colSpan={18} className="px-6 py-5 bg-surface-alt border-l-4 border-accent border-b-2 border-b-border-light">
+                    {renderEditFormGrid('edit', ot)}
+                    <div className="flex justify-end gap-2 mt-4 pt-3 border-t border-border-light">
+                      <button
+                        className="btn-secondary text-sm"
+                        onClick={() => { setEditingId(null); setEditDraft({}) }}
+                      >
+                        Cancel
+                      </button>
+                      <button
+                        className="btn-primary text-sm"
+                        onClick={() => updateMut.mutate({ id: ot.id, data: editDraft })}
+                      >
+                        Save Changes
+                      </button>
+                    </div>
                   </td>
-                  <td className="px-4 py-2 flex items-center gap-2">
-                    <button
-                      className="btn-icon text-content-muted hover:text-accent"
-                      onClick={() => { setEditingId(ot.id); setEditDraft({}) }}
-                      title="Edit output type"
-                    >
-                      <Pencil size={14} />
-                    </button>
-                    <button
-                      className="btn-icon text-content-muted hover:text-blue-500"
-                      onClick={() => duplicateMut.mutate(ot)}
-                      disabled={duplicateMut.isPending}
-                      title="Duplicate output type"
-                    >
-                      <Copy size={14} />
-                    </button>
-                    <button
-                      className="btn-icon text-content-muted hover:text-red-500"
-                      onClick={() => {
-                        if (confirm(`Delete output type "${ot.name}"?`)) deleteMut.mutate(ot.id)
-                      }}
-                      title="Delete output type"
-                    >
-                      <Trash2 size={14} />
-                    </button>
-                  </td>
-                </>
+                </tr>
               )}
-            </tr>
+            </React.Fragment>
           ))}
 
-          {/* Add row */}
+          {/* Add new — expandable form */}
           {showAdd && (
-            <tr className="border-b border-border-light bg-status-success-bg">
-              <td className="px-4 py-2">
-                <input
-                  className="input-sm"
-                  placeholder="e.g. 3D Thumbnail"
-                  value={form.name}
-                  onChange={(e) => setForm({ ...form, name: e.target.value })}
-                />
-              </td>
-              <td className="px-4 py-2">
-                <select
-                  className="input-sm"
-                  value={form.renderer}
-                  onChange={(e) => setForm({ ...form, renderer: e.target.value })}
-                >
-                  {RENDERERS.map((r) => <option key={r}>{r}</option>)}
-                </select>
-              </td>
-              <td className="px-4 py-2">
-                <select
-                  className="input-sm"
-                  value={form.output_format}
-                  onChange={(e) => setForm({ ...form, output_format: e.target.value })}
-                >
-                  {FORMATS.map((f) => <option key={f}>{f}</option>)}
-                </select>
-              </td>
-              <td className="px-4 py-2">
-                <input
-                  type="checkbox"
-                  checked={form.is_animation}
-                  onChange={(e) => setForm({ ...form, is_animation: e.target.checked })}
-                />
-              </td>
-              <td className="px-4 py-2">
-                {form.is_animation ? (
-                  <div className="flex flex-col gap-1">
-                    <div className="flex items-center gap-1">
-                      <input
-                        type="number" min={1} max={3600}
-                        className="input-sm w-16" placeholder="120"
-                        value={form.frame_count}
-                        onChange={(e) => setForm({ ...form, frame_count: e.target.value })}
-                        title="Frame count"
-                      />
-                      <span className="text-content-muted text-xs">f</span>
-                      <input
-                        type="number" min={1} max={120}
-                        className="input-sm w-14" placeholder="30"
-                        value={form.fps}
-                        onChange={(e) => setForm({ ...form, fps: e.target.value })}
-                        title="FPS"
-                      />
-                      <span className="text-content-muted text-xs">fps</span>
-                    </div>
-                    <select
-                      className="input-sm"
-                      value={form.turntable_axis}
-                      onChange={(e) => setForm({ ...form, turntable_axis: e.target.value })}
-                      title="Rotation axis"
+            <>
+              <tr className="border-b border-border-light bg-status-success-bg">
+                <td colSpan={18} className="px-6 py-5 border-l-4 border-status-success-text">
+                  <div className="text-sm font-medium text-content-secondary mb-3">New Output Type</div>
+                  {renderEditFormGrid('add', null)}
+                  <div className="flex justify-end gap-2 mt-4 pt-3 border-t border-border-light">
+                    <button
+                      className="btn-secondary text-sm"
+                      onClick={() => { setShowAdd(false); setForm(EMPTY_FORM) }}
                     >
-                      <option value="world_z">World Z</option>
-                      <option value="world_x">World X</option>
-                      <option value="world_y">World Y</option>
-                    </select>
+                      Cancel
+                    </button>
+                    <button
+                      className="btn-primary text-sm"
+                      disabled={!form.name.trim() || createMut.isPending}
+                      onClick={() => createMut.mutate()}
+                    >
+                      Create Output Type
+                    </button>
                   </div>
-                ) : (
-                  <span className="text-content-muted">—</span>
-                )}
-              </td>
-              <td className="px-4 py-2">
-                {showTransparentBg(form.renderer, form.output_format) ? (
-                  <div className="flex flex-col gap-1">
-                    <label className="flex items-center gap-1 text-xs text-content-secondary">
-                      <input
-                        type="checkbox"
-                        checked={form.transparent_bg}
-                        onChange={(e) => setForm({ ...form, transparent_bg: e.target.checked })}
-                        title="Transparent background (PNG alpha)"
-                      />
-                      alpha
-                    </label>
-                    <label className="flex items-center gap-1 text-xs text-content-secondary">
-                      <input
-                        type="checkbox"
-                        checked={!!form.bg_color}
-                        onChange={(e) => setForm({ ...form, bg_color: e.target.checked ? '#000000' : '' })}
-                        title="Composite over solid background color"
-                      />
-                      BG color
-                    </label>
-                    {form.bg_color && (
-                      <div className="flex items-center gap-1">
-                        <input
-                          type="color"
-                          className="w-7 h-6 rounded border border-border-default cursor-pointer p-0"
-                          value={form.bg_color}
-                          onChange={(e) => setForm({ ...form, bg_color: e.target.value })}
-                        />
-                        <input
-                          type="text"
-                          className="input-sm w-20 font-mono text-xs"
-                          placeholder="#rrggbb"
-                          value={form.bg_color}
-                          onChange={(e) => setForm({ ...form, bg_color: e.target.value })}
-                        />
-                      </div>
-                    )}
-                  </div>
-                ) : (
-                  <span className="text-content-muted">—</span>
-                )}
-              </td>
-              <td className="px-4 py-2">
-                {showBlenderSettings(form.renderer) ? (
-                  <select
-                    className="input-sm"
-                    value={form.cycles_device}
-                    onChange={(e) => setForm({ ...form, cycles_device: e.target.value })}
-                  >
-                    <option value="">System default</option>
-                    <option value="auto">Auto</option>
-                    <option value="gpu">GPU</option>
-                    <option value="cpu">CPU</option>
-                  </select>
-                ) : (
-                  <span className="text-content-muted">—</span>
-                )}
-              </td>
-              <td className="px-4 py-2">
-                {showBlenderSettings(form.renderer) ? (
-                  <select
-                    className="input-sm"
-                    value={form.engine}
-                    onChange={(e) => setForm({ ...form, engine: e.target.value })}
-                  >
-                    <option value="">System default</option>
-                    <option value="cycles">Cycles</option>
-                    <option value="eevee">EEVEE</option>
-                  </select>
-                ) : (
-                  <span className="text-content-muted">—</span>
-                )}
-              </td>
-              <td className="px-4 py-2">
-                {showBlenderSettings(form.renderer) ? (
-                  <input
-                    type="number"
-                    min={1}
-                    max={4096}
-                    className="input-sm w-20"
-                    placeholder="default"
-                    value={form.samples}
-                    onChange={(e) => setForm({ ...form, samples: e.target.value })}
-                  />
-                ) : (
-                  <span className="text-content-muted">—</span>
-                )}
-              </td>
-              <td className="px-4 py-2">
-                {showBlenderSettings(form.renderer) ? (
-                  <div className="flex flex-col gap-1 min-w-[120px]">
-                    <select
-                      className="input-sm"
-                      value={form.denoiser}
-                      onChange={(e) => setForm({ ...form, denoiser: e.target.value })}
-                      title="Denoiser"
-                    >
-                      <option value="">Auto</option>
-                      <option value="OPTIX">OptiX</option>
-                      <option value="OPENIMAGEDENOISE">OIDN</option>
-                    </select>
-                    <input
-                      type="number"
-                      step="0.001" min="0.001" max="1"
-                      className="input-sm w-20"
-                      placeholder="threshold"
-                      value={form.noise_threshold}
-                      onChange={(e) => setForm({ ...form, noise_threshold: e.target.value })}
-                      title="Noise threshold (adaptive sampling)"
-                    />
-                    <select
-                      className="input-sm"
-                      value={form.denoising_input_passes}
-                      onChange={(e) => setForm({ ...form, denoising_input_passes: e.target.value })}
-                      title="Input passes"
-                    >
-                      <option value="">Default</option>
-                      <option value="RGB">RGB</option>
-                      <option value="RGB_ALBEDO">RGB+Albedo</option>
-                      <option value="RGB_ALBEDO_NORMAL">RGB+Albedo+Normal</option>
-                    </select>
-                    <select
-                      className="input-sm"
-                      value={form.denoising_prefilter}
-                      onChange={(e) => setForm({ ...form, denoising_prefilter: e.target.value })}
-                      title="Prefilter"
-                    >
-                      <option value="">Default</option>
-                      <option value="NONE">None</option>
-                      <option value="FAST">Fast</option>
-                      <option value="ACCURATE">Accurate</option>
-                    </select>
-                    <select
-                      className="input-sm"
-                      value={form.denoising_quality}
-                      onChange={(e) => setForm({ ...form, denoising_quality: e.target.value })}
-                      title="Quality (Blender 4.2+)"
-                    >
-                      <option value="">Default</option>
-                      <option value="HIGH">High</option>
-                      <option value="BALANCED">Balanced</option>
-                      <option value="FAST">Fast</option>
-                    </select>
-                    <select
-                      className="input-sm"
-                      value={form.denoising_use_gpu}
-                      onChange={(e) => setForm({ ...form, denoising_use_gpu: e.target.value })}
-                      title="OIDN GPU routing"
-                    >
-                      <option value="">Auto</option>
-                      <option value="1">GPU</option>
-                      <option value="0">CPU</option>
-                    </select>
-                  </div>
-                ) : (
-                  <span className="text-content-muted">—</span>
-                )}
-              </td>
-              <td className="px-4 py-2">
-                <CategoryMultiSelect
-                  value={form.compatible_categories}
-                  onChange={(cats) => setForm({ ...form, compatible_categories: cats })}
-                />
-              </td>
-              <td className="px-4 py-2">
-                <div className="flex items-center gap-1">
-                  <input
-                    type="number"
-                    className="input-sm w-16"
-                    placeholder="W"
-                    value={form.width}
-                    onChange={(e) => setForm({ ...form, width: e.target.value })}
-                  />
-                  <span className="text-content-muted text-xs">x</span>
-                  <input
-                    type="number"
-                    className="input-sm w-16"
-                    placeholder="H"
-                    value={form.height}
-                    onChange={(e) => setForm({ ...form, height: e.target.value })}
-                  />
-                </div>
-              </td>
-              <td className="px-4 py-2">
-                <select
-                  className="input-sm"
-                  value={form.pricing_tier_id ?? ''}
-                  onChange={(e) => setForm({ ...form, pricing_tier_id: e.target.value ? Number(e.target.value) : null })}
-                >
-                  <option value="">Category default</option>
-                  {pricingTiers?.map((t) => (
-                    <option key={t.id} value={t.id}>
-                      {t.category_key}/{t.quality_level} — {t.price_per_item.toFixed(2)}
-                    </option>
-                  ))}
-                </select>
-              </td>
-              <td className="px-4 py-2 text-content-muted">—</td>
-              <td className="px-4 py-2">
-                <select
-                  className="input-sm text-xs"
-                  value={form.material_override}
-                  onChange={(e) => setForm({ ...form, material_override: e.target.value })}
-                >
-                  <option value="">— None —</option>
-                  {libraryMaterials.map((m: Material) => (
-                    <option key={m.id} value={m.name}>{m.name}</option>
-                  ))}
-                </select>
-              </td>
-              <td className="px-4 py-2">
-                <input
-                  type="number"
-                  className="input-sm w-16"
-                  value={form.sort_order}
-                  onChange={(e) => setForm({ ...form, sort_order: Number(e.target.value) })}
-                />
-              </td>
-              <td className="px-4 py-2 text-content-muted">—</td>
-              <td className="px-4 py-2 flex items-center gap-2">
-                <button
-                  className="btn-icon text-status-success-text"
-                  disabled={!form.name.trim() || createMut.isPending}
-                  onClick={() => createMut.mutate()}
-                  title="Save new output type"
-                >
-                  <Check size={15} />
-                </button>
-                <button
-                  className="btn-icon text-content-muted"
-                  onClick={() => { setShowAdd(false); setForm(EMPTY_FORM) }}
-                  title="Cancel adding"
-                >
-                  <X size={15} />
-                </button>
-              </td>
-            </tr>
+                </td>
+              </tr>
+            </>
           )}
         </tbody>
       </table>