fix: Repair blend mode stacking context in canvas and display mode in live preview

src/components/express/builder/BuilderCanvas.tsx

@@ -222,6 +222,7 @@ export const BuilderCanvas: React.FC = () => {
                 // z-index from array position: index 0 = back, last = front
                 // Dragging/selected get temporary boost to stay on top during interaction
                 zIndex: isDraggingField ? 1000 : isSelected ? 999 : idx + 1,
+                mixBlendMode: field.style.blendMode && field.style.blendMode !== 'normal' ? field.style.blendMode as any : undefined,
               }}
             >
               {/* Field box */}
@@ -367,10 +368,7 @@ const BrandVariableContent: React.FC<{ field: TemplateField; designMD: DesignMD;
         src={designMD.logoUrl}
         alt="Logo"
         className="max-w-full max-h-full object-contain pointer-events-none p-1"
-        style={{
+        style={{ opacity: (field.style.opacity ?? 100) / 100 }}
-          opacity: (field.style.opacity ?? 100) / 100,
-          mixBlendMode: field.style.blendMode as any,
-        }}
       />
     );
   }
@@ -391,7 +389,6 @@ const BrandVariableContent: React.FC<{ field: TemplateField; designMD: DesignMD;
             objectFit: objectFit as any,
             backgroundColor: objectFit === 'contain' ? (bgColor || 'transparent') : 'transparent',
             opacity: (field.style.opacity ?? 100) / 100,
-            mixBlendMode: field.style.blendMode as any,
           }}
           muted
           loop

src/utils/expressCompiler.ts

@@ -356,6 +356,7 @@ export function compileExpressToTimeline(
           blendMode: field.style.blendMode,
           layerId,
           isBrandElement: field.nature === 'brand-variable',
+          brandDisplayMode: 'overlay',
           isLocked: field.nature === 'static',
           elementName: field.label,
           // Placeholder mode for empty media fields
@@ -429,6 +430,7 @@ export function compileExpressToTimeline(
           opacity: field.style.opacity ?? 100,
           layerId,
           isBrandElement: field.type === 'logo',
+          brandDisplayMode: 'overlay',
           isLocked: false,
           elementName: field.label,
           // Placeholder mode for empty media fields