fix: update load bg file flow

index.html

@@ -77,7 +77,7 @@
           </div>
         </div>
 
-        <div class="panel">
+        <div class="panel" id="bgPanel">
           <h2>Background</h2>
           <div class="bg-controls">
             <input type="file" id="bgFileInput" accept="image/*" hidden />

js/ui.js

@@ -217,16 +217,49 @@ export function initUI(state, updateAll) {
   });
 
   const lc = document.querySelector('.left-col');
+
+  document.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    document.body.classList.add('file-dragging');
+  });
+
+  document.addEventListener('drop', () => {
+    document.body.classList.remove('file-dragging');
+    lc.classList.remove('drag-over');
+  });
+
   lc.addEventListener('dragover', (e) => {
     e.preventDefault();
     lc.classList.add('drag-over');
   });
-  lc.addEventListener('dragleave', () => {
-    lc.classList.remove('drag-over');
+
+  lc.addEventListener('dragleave', (e) => {
+    if (!lc.contains(e.relatedTarget)) {
+      lc.classList.remove('drag-over');
+    }
   });
+
   lc.addEventListener('drop', (e) => {
     e.preventDefault();
+    document.body.classList.remove('file-dragging');
     lc.classList.remove('drag-over');
     if (e.dataTransfer.files[0]) loadBgFile(e.dataTransfer.files[0], state);
   });
+
+  const bp = $('bgPanel');
+  bp.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    bp.classList.add('drag-over');
+  });
+  bp.addEventListener('dragleave', (e) => {
+    if (!bp.contains(e.relatedTarget)) {
+      bp.classList.remove('drag-over');
+    }
+  });
+  bp.addEventListener('drop', (e) => {
+    e.preventDefault();
+    document.body.classList.remove('file-dragging');
+    bp.classList.remove('drag-over');
+    if (e.dataTransfer.files[0]) loadBgFile(e.dataTransfer.files[0], state);
+  });
 }

style.css

@@ -142,6 +142,10 @@ main {
   touch-action: none;
 }
 
+#svg image {
+  transition: opacity 0.15s;
+}
+
 .corner-circle {
   cursor: grab;
   filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.5));
@@ -454,6 +458,39 @@ main {
   background-color: #0c1018;
   background-repeat: no-repeat;
   background-position: center;
+  transition: opacity 0.15s;
+}
+
+body.file-dragging #field {
+  opacity: 0.1;
+}
+
+body.file-dragging #svg image {
+  opacity: 0.1;
+}
+
+body.file-dragging .left-col {
+  outline: 3px dashed rgba(88, 166, 255, 0.9);
+  outline-offset: -3px;
+  border-radius: 8px;
+}
+
+body.file-dragging .left-col.drag-over {
+  outline: 5px dashed var(--accent);
+  outline-offset: -5px;
+  border-radius: 8px;
+  background: rgba(88, 166, 255, 0.15);
+}
+
+body.file-dragging #bgPanel {
+  outline: 2px dashed rgba(88, 166, 255, 0.7);
+  outline-offset: -2px;
+}
+
+body.file-dragging #bgPanel.drag-over {
+  outline: 3px dashed var(--accent);
+  outline-offset: -3px;
+  background: rgba(88, 166, 255, 0.08);
 }
 
 #widget {