ui(badges): add background image bleed support (cfg_json, PVC layout)

- Add `bleed` field to BadgeTemplateCfg (CSS length, e.g. "0.125in")
- Badge view: derive bleed_offset, move bg-image to absolute positioned div
  that extends past card edges; add isolation:isolate to badge_front stacking context
- Template form: add bleed input in Advanced > Appearance; wire to cfg_json save/load
- PVC layout CSS: change overflow:hidden → overflow:visible in print rule to allow
  bleed div to render at physical card boundary (Zebra driver clips at card edge)
- Prevents white borders on PVC cards when printer has slight alignment variance.
  Screen preview shows bleed visually extending past the card outline.

src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte

@@ -63,6 +63,8 @@ let cfg_controls_shown: string[] = $state(['name', 'title', 'affiliations', 'loc
 let cfg_controls_auth_editable: string[] = $state([]);
 // Body text color (hex)
 let cfg_body_text_color = $state('#000000');
+// Background image bleed (CSS length, e.g. "0.125in", "3mm"). Empty = no bleed.
+let cfg_bleed = $state('');
 // Alignment overrides: 'left' | 'center' | 'right' | 'justify'
 let cfg_align_name = $state('center');
 let cfg_align_title = $state('center');
@@ -156,6 +158,9 @@ async function load_template(id: string) {
                 cfg_body_text_color = '#000000';
             }
 
+            // Background bleed (CSS length, e.g. "0.125in"). Empty = no bleed.
+            cfg_bleed = parsed_cfg.bleed ?? '';
+
             // Alignment overrides (nested under cfg_json.align and cfg_json.qr_alignment)
             cfg_align_name = parsed_cfg?.align?.name ?? parsed_cfg.align_name ?? 'center';
             cfg_align_title = parsed_cfg?.align?.title ?? parsed_cfg.align_title ?? 'center';
@@ -226,6 +231,13 @@ async function handle_submit() {
         if ((cfg_obj as any)?.body_text_color_hex) delete (cfg_obj as any).body_text_color_hex;
     }
 
+    // Background bleed: save if set, remove key entirely when cleared
+    if (cfg_bleed.trim()) {
+        cfg_obj.bleed = cfg_bleed.trim();
+    } else {
+        delete cfg_obj.bleed;
+    }
+
     const data_to_save: key_val = {
         name,
         background_image_path,
@@ -525,6 +537,15 @@ function toggle_cfg_controls_auth_editable(key: string) {
                             Pick a hex color (e.g. #112233). The renderer will use this inline color.
                         </p>
                     </label>
+                    <label class="label mt-3">
+                        <span>Background Image Bleed</span>
+                        <input type="text" bind:value={cfg_bleed} class="input" placeholder="e.g. 0.125in or 3mm" />
+                        <p class="text-xs text-surface-400 italic">
+                            Extends the background image past the card edge on all four sides — prevents a white border
+                            if the printer clips slightly inside the physical card boundary. Any CSS length works
+                            (<code>0.125in</code>, <code>3mm</code>, <code>9px</code>). Leave blank for no bleed.
+                        </p>
+                    </label>
                 </div>
                 <div class="border-t pt-2">
                     <h4 class="font-semibold">Controls Menu Toggles</h4>