fix: resolve space-in-argument bug and implement premium centered glassmorphic error overlay modal

index.html

@@ -441,6 +441,38 @@
     </div>
   </div>
 
+  <!-- Error Overlay Modal (Displayed when background extraction fails) -->
+  <div class="overlay-container glass-panel hidden" id="error-overlay" style="width: 480px; text-align: center; z-index: 100020;">
+    <div class="setup-wizard">
+      <div class="wizard-header">
+        <div class="glow-icon-container">
+          <svg class="glow-icon animated-float" width="60" height="60" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12 9v4M12 17h.01" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </div>
+        <h1 style="font-size: 24px; color: #ef4444; margin-bottom: 4px; font-family: var(--font-heading);" data-i18n="errorModalTitle">Process Error</h1>
+        <p class="subtitle" style="font-size: 12.5px;" data-i18n="errorModalSubtitle">We encountered an issue while segmenting your image.</p>
+      </div>
+
+      <div class="glass-panel-inner" style="margin-top: 10px; text-align: left; max-height: 180px; overflow-y: auto; background: rgba(239, 68, 68, 0.04); border-color: rgba(239, 68, 68, 0.15); padding: 14px !important;">
+        <div style="font-family: monospace; font-size: 11px; color: #f87171; white-space: pre-wrap; word-break: break-all; line-height: 1.4;" id="error-overlay-log">Error log details...</div>
+      </div>
+
+      <div class="glass-panel-inner" style="margin-top: 10px; text-align: center; background: rgba(255, 255, 255, 0.01); border-color: rgba(255, 255, 255, 0.04); padding: 16px !important;">
+        <p style="font-size: 12.5px; line-height: 1.5; color: var(--text-muted); font-weight: 500;" data-i18n="errorModalSuggestion">
+          The subject in the image you want to extract might be too blended or visually indistinguishable from its background. Please try another image with a clearer, higher-contrast subject.
+        </p>
+      </div>
+
+      <div class="wizard-actions" style="margin-top: 12px; width: 100%;">
+        <button class="btn btn-secondary w-full" id="btn-close-error" style="border-color: rgba(239, 68, 68, 0.2) !important;">
+          <span data-i18n="closeBtn">Close</span>
+        </button>
+      </div>
+    </div>
+  </div>
+
   <!-- Loaded locally in package.json dependencies -->
   <script src="node_modules/cropperjs/dist/cropper.js"></script>
   <script src="renderer.js"></script>