From 09ff1fb179cbfb25889e51d6ea9520ae26b70b7b Mon Sep 17 00:00:00 2001
From: MiraiSeori <1321807442@qq.com>
Date: Wed, 19 Nov 2025 03:46:42 +0800
Subject: [PATCH 1/4] feat: adapt Auto-Image.js for updated Pawtect WASM module
 structure

Update the WASM module loading logic in Auto-Image.js to handle changes in the Pawtect module structure. The module loading function now searches for the 'get_pawtected_endpoint_payload' function in multiple possible export locations, including mod.h, mod.exports, and general module properties. Additionally, add safety checks before calling potentially undefined functions like mod.i and mod.r, providing appropriate fallbacks and warnings when functions are not available. These changes ensure compatibility with the updated WASM module while maintaining existing functionality.
---
 Extension/scripts/Auto-Image.js | 40 +++++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/Extension/scripts/Auto-Image.js b/Extension/scripts/Auto-Image.js
index 76c946d..2c5901c 100644
--- a/Extension/scripts/Auto-Image.js
+++ b/Extension/scripts/Auto-Image.js
@@ -10350,36 +10350,61 @@ localStorage.removeItem("lp");
   //find module if pawtect_chunk is null
   pawtect_chunk ??= await findTokenModule("pawtect_wasm_bg.wasm");
 
-  async function createWasmToken(regionX, regionY, payload) {
+async function createWasmToken(regionX, regionY, payload) {
     try {
       // Load the Pawtect module and WASM
-      const mod = await import(new URL('/_app/immutable/chunks/' + pawtect_chunk, location.origin).href);
+      // NOTE: Ensure 'pawtect_chunk' variable is updated to the new filename (e.g., 'CEH629mT.js')
+      const mod = await import(new URL('/_app/immutable/chunks/'+pawtect_chunk, location.origin).href);
       let wasm;
+      
       try {
-        wasm = await mod._();
+        // [FIX] Adapted for new module structure: 'mod._()' is no longer valid.
+        // We attempt to locate the WASM instance containing 'get_pawtected_endpoint_payload'.
+        // Based on analysis, it is likely located in 'mod.h'.
+        if (mod.h && typeof mod.h.get_pawtected_endpoint_payload === 'function') {
+            wasm = mod.h;
+        } else if (typeof mod.get_pawtected_endpoint_payload === 'function') {
+            wasm = mod; // The module itself might be the instance
+        } else if (mod.exports && typeof mod.exports.get_pawtected_endpoint_payload === 'function') {
+            wasm = mod.exports;
+        } else {
+            // Fallback: Search all exports for the target function
+            const foundKey = Object.keys(mod).find(k => mod[k] && typeof mod[k].get_pawtected_endpoint_payload === 'function');
+            if (foundKey) wasm = mod[foundKey];
+        }
+
+        if (!wasm) throw new Error("Function 'get_pawtected_endpoint_payload' not found in module exports");
         console.log('✅ WASM initialized successfully');
       } catch (wasmError) {
         console.error('❌ WASM initialization failed:', wasmError);
         return null;
       }
+
       try {
         try {
           const me = await fetch(`https://backend.wplace.live/me`, { credentials: 'include' }).then(r => r.ok ? r.json() : null);
           if (me?.id) {
-            mod.i(me.id);
-            console.log('✅ user ID set:', me.id);
+            // Check if mod.i exists before calling (it might have been renamed or removed)
+            if (typeof mod.i === 'function') {
+                mod.i(me.id);
+                console.log('✅ user ID set:', me.id);
+            } else {
+                console.log('⚠️ Warning: mod.i function not found (User ID not set)');
+            }
           }
         } catch { }
       } catch (userIdError) {
         console.log('⚠️ Error setting user ID:', userIdError.message);
       }
+
       try {
         const testUrl = `https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`;
-        if (mod.r) {
+        // Check if mod.r exists before calling
+        if (typeof mod.r === 'function') {
           mod.r(testUrl);
           console.log('✅ Request URL set:', testUrl);
         } else {
-          console.log('⚠️ request_url function (mod.r) not available');
+          console.log('⚠️ request_url function (mod.r) not available - skipping');
         }
       } catch (urlError) {
         console.log('⚠️ Error setting request URL:', urlError.message);
@@ -10421,6 +10446,7 @@ localStorage.removeItem("lp");
       console.log('🚀 Calling get_pawtected_endpoint_payload...');
       let outPtr, outLen, token;
       try {
+        // [FIX] Calling the new function name identified in analysis
         const result = wasm.get_pawtected_endpoint_payload(inPtr, bytes.length);
         console.log('✅ Function called, result type:', typeof result, result);
 

From 00d69fafbedbe06ead84e63c4e16d5b5b6f0d755 Mon Sep 17 00:00:00 2001
From: MiraiSeori <1321807442@qq.com>
Date: Wed, 19 Nov 2025 13:21:17 +0800
Subject: [PATCH 2/4] Refactor: Remove legacy edit panel styles from neon and
 neon-light themes

- Deleted extensive CSS rules for the edit panel, including overlay, container, header, main area, toolbar, and minimap styles.
- Cleaned up unused styles to streamline the codebase and improve maintainability.
---
 Extension/auto-image-styles.css      |  307 ++-
 Extension/background.js              |   37 +
 Extension/edit-panel.css             | 1297 ++++++++++
 Extension/manifest.json              |    3 +-
 Extension/popup/popup.html           |    2 +-
 Extension/scripts/Auto-Image.js      | 3259 ++++++++++++++++++--------
 Extension/scripts/image-processor.js | 1775 +++++++++++++-
 Extension/themes/acrylic.css         |  883 -------
 Extension/themes/classic-light.css   |  983 +-------
 Extension/themes/classic.css         |  985 --------
 Extension/themes/neon-cyan.css       |  319 ---
 Extension/themes/neon-light.css      |  318 ---
 Extension/themes/neon.css            |  761 ------
 13 files changed, 5702 insertions(+), 5227 deletions(-)
 create mode 100644 Extension/edit-panel.css
 delete mode 100644 Extension/themes/acrylic.css

diff --git a/Extension/auto-image-styles.css b/Extension/auto-image-styles.css
index a4b057f..6b56f4f 100644
--- a/Extension/auto-image-styles.css
+++ b/Extension/auto-image-styles.css
@@ -614,15 +614,99 @@
   /* Theme-specific styling applied via theme files */
 }
 
+/* V2 Two-Column Layout */
+.resize-container-v2 {
+  max-width: 1400px;
+  width: 95%;
+  max-height: 95%;
+  overflow: hidden;
+}
+
+.resize-two-column-layout {
+  display: flex;
+  gap: 20px;
+  height: calc(100vh - 200px);
+  max-height: 800px;
+  margin-top: 15px;
+}
+
+/* Left Column: Scrollable Configurations */
+.resize-config-column {
+  flex: 0 0 480px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.resize-config-scroll {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 10px;
+}
+
+/* Custom scrollbar for config column */
+.resize-config-scroll::-webkit-scrollbar {
+  width: 8px;
+}
+
+.resize-config-scroll::-webkit-scrollbar-track {
+  background: var(--wplace-bg-ghost);
+  border-radius: 4px;
+}
+
+.resize-config-scroll::-webkit-scrollbar-thumb {
+  background: var(--wplace-border-subtle);
+  border-radius: 4px;
+}
+
+.resize-config-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--wplace-accent);
+}
+
+/* Right Column: Fixed Preview */
+.resize-preview-column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 600px;
+  position: relative;
+  overflow: hidden;
+}
+
+.resize-preview-zoom-controls {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px;
+  border-bottom: 1px solid var(--wplace-border-subtle);
+  background: var(--wplace-bg-ghost);
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 .resize-preview-wrapper {
+  flex: 1;
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 15px 0;
-  height: 300px;
   overflow: hidden;
+  position: relative;
+  background: var(--wplace-bg-canvas, #1a1a1a);
+  border: 1px solid var(--wplace-border-subtle);
+  margin: 0;
+  height: auto;
+}
 
-  /* Theme-specific styling applied via theme files */
+.resize-camera-help {
+  flex-shrink: 0;
+  text-align: center;
+  padding: 8px;
+  font-size: 12px;
+  color: var(--wplace-text-dim);
+  border-top: 1px solid var(--wplace-border-subtle);
+  background: var(--wplace-bg-ghost);
 }
 
 .resize-canvas-stack {
@@ -648,8 +732,12 @@
   display: flex;
   gap: 8px;
   align-items: center;
-  margin-top: 8px;
+  margin: 20px 0;
   font-size: 12px;
+  padding: 15px;
+  background: var(--wplace-bg-ghost);
+  border-radius: 8px;
+  border: 1px solid var(--wplace-border-subtle);
 }
 
 /* Missing button hover styles */
@@ -668,19 +756,84 @@
 
 .resize-controls {
   display: grid;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr;
   gap: 15px;
   align-items: center;
+  margin-bottom: 20px;
+}
+
+.resize-control-label {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: 14px;
+}
+
+.resize-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.resize-checkbox-label input[type="checkbox"] {
+  cursor: pointer;
 }
 
 .resize-slider {
   width: 100%;
-  height: 4px;
+  height: 6px;
   border: none;
   outline: none;
+  appearance: none;
   -webkit-appearance: none;
+  background: linear-gradient(to right, var(--wplace-icon-primary), var(--wplace-icon-secondary));
+  border-radius: 3px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
 
-  /* Theme-specific styling applied via theme files */
+.resize-slider:hover {
+  opacity: 0.9;
+}
+
+.resize-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--wplace-slider-thumb-bg, white);
+  cursor: pointer;
+  box-shadow: var(--wplace-shadow-slider-thumb);
+  transition: all 0.2s ease;
+}
+
+.resize-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+  box-shadow: var(--wplace-shadow-slider-hover);
+}
+
+.resize-slider::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--wplace-slider-thumb-bg, white);
+  cursor: pointer;
+  border: none;
+  box-shadow: var(--wplace-shadow-slider-thumb);
+  transition: all 0.2s ease;
+}
+
+.resize-slider::-moz-range-thumb:hover {
+  transform: scale(1.2);
+  box-shadow: var(--wplace-shadow-slider-hover);
+}
+
+.resize-slider::-moz-range-track {
+  background: transparent;
+  border: none;
 }
 
 .resize-zoom-controls {
@@ -1360,6 +1513,7 @@
 
 .wplace-overlay-opacity-slider {
   width: 100%;
+  appearance: none;
   -webkit-appearance: none;
   height: 8px;
   outline: none;
@@ -1493,6 +1647,25 @@
   padding: 4px 8px;
 }
 
+/* Edit Artwork button - enlarged */
+#editImageBtn {
+  padding: 12px 24px !important;
+  font-size: 16px !important;
+  font-weight: bold !important;
+  min-width: 180px;
+  transition: all 0.2s ease;
+}
+
+#editImageBtn i {
+  font-size: 18px;
+  margin-right: 8px;
+}
+
+#editImageBtn:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
+}
+
 .resize-zoom-slider {
   max-width: 220px;
 }
@@ -1631,11 +1804,24 @@
 }
 
 .resize-advanced-select {
-  padding: 6px 8px;
+  width: 100%;
+  max-width: 100%;
+  padding: 8px 10px;
   border-radius: 6px;
   border: 1px solid var(--wplace-border-faint);
   background: var(--wplace-bg-whisper);
   color: var(--wplace-text);
+  font-size: 12px;
+  cursor: pointer;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.resize-advanced-select:hover {
+  border-color: var(--wplace-border-subtle);
+  background: var(--wplace-bg-subtle);
 }
 
 .resize-advanced-toggle {
@@ -1643,6 +1829,21 @@
   align-items: center;
   justify-content: space-between;
   font-size: 12px;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--wplace-border-ultra-faint);
+}
+
+.resize-advanced-toggle:last-child {
+  border-bottom: none;
+}
+
+.resize-advanced-controls > div:not(.resize-advanced-toggle) {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--wplace-border-ultra-faint);
+}
+
+.resize-advanced-controls > div:last-child {
+  border-bottom: none;
 }
 
 .resize-advanced-toggle-content {
@@ -1652,6 +1853,35 @@
 .resize-advanced-description {
   margin-top: 2px;
   opacity: 0.65;
+  font-size: 11px;
+  line-height: 1.4;
+}
+
+.resize-slider-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--wplace-text);
+}
+
+.resize-slider-label i {
+  margin-right: 6px;
+  color: var(--wplace-icon-primary);
+}
+
+.resize-slider-value {
+  background: var(--wplace-bg-subtle);
+  padding: 3px 10px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 600;
+  min-width: 50px;
+  text-align: center;
+  color: var(--wplace-highlight);
+  border: 1px solid var(--wplace-border-ghost);
 }
 
 .resize-advanced-checkbox {
@@ -2236,4 +2466,65 @@ input[type="number"] {
 
 .pill-btn.active {
   color: white;
+}
+
+/* ========================= */
+/* Responsive Design         */
+/* ========================= */
+
+/* Adjust layout for smaller screens */
+@media (max-width: 1400px) {
+  .resize-container-v2 {
+    max-width: 95%;
+  }
+  
+  .resize-two-column-layout {
+    max-height: 700px;
+  }
+  
+  .resize-config-column {
+    flex: 0 0 400px;
+  }
+  
+  .resize-preview-column {
+    min-width: 500px;
+  }
+}
+
+@media (max-width: 1200px) {
+  .resize-two-column-layout {
+    flex-direction: column;
+    max-height: 85vh;
+  }
+  
+  .resize-config-column {
+    flex: 0 0 auto;
+    max-height: 300px;
+  }
+  
+  .resize-preview-column {
+    flex: 1;
+    min-width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .resize-container-v2 {
+    width: 98%;
+    padding: 10px;
+  }
+  
+  .resize-config-column {
+    max-height: 250px;
+  }
+  
+  .resize-preview-zoom-controls {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+  
+  .resize-zoom-btn {
+    padding: 4px 8px;
+    font-size: 12px;
+  }
 }
\ No newline at end of file
diff --git a/Extension/background.js b/Extension/background.js
index 8ca31ba..b13306c 100644
--- a/Extension/background.js
+++ b/Extension/background.js
@@ -140,6 +140,26 @@ async function executeLocalScript(scriptName, tabId) {
                     } else {
                         console.warn(`%c⚠️ auto-image-styles.css not found in loaded themes`, 'color: #f59e0b; font-weight: bold;');
                     }
+
+                    // Inject edit-panel.css if available (THEME-INDEPENDENT)
+                    // This ensures edit panel has its own styling regardless of bot theme
+                    if (themeCSS['edit-panel.css']) {
+                        const editPanelContent = themeCSS['edit-panel.css'];
+                        const styleElement = document.createElement('style');
+                        styleElement.id = 'edit-panel-stylesheet';
+                        styleElement.textContent = editPanelContent;
+                        document.head.appendChild(styleElement);
+
+                        console.log(`%c✨ AUTO-INJECTED: edit-panel.css (THEME-INDEPENDENT)`, 'color: #10b981; font-weight: bold;');
+                        console.log(`  📏 Injected size: ${editPanelContent.length.toLocaleString()} characters`);
+                        console.log(`  📍 Source: Extension local file`);
+                        console.log(`  🎯 Target: <head> as <style> element`);
+                        console.log(`  🆔 Element ID: edit-panel-stylesheet`);
+                        console.log(`  🎨 Independence: Will override any theme-specific edit panel styles`);
+                    } else {
+                        console.warn(`%c⚠️ edit-panel.css not found in loaded themes`, 'color: #f59e0b; font-weight: bold;');
+                    }
+
                     console.groupEnd();
                 } else {
                     console.warn(`%c⚠️ No themes received from extension`, 'color: #f59e0b; font-weight: bold;');
@@ -249,6 +269,22 @@ async function executeLocalScript(scriptName, tabId) {
                         styleElement.textContent = themeContent;
                         document.head.appendChild(styleElement);
 
+                        // CRITICAL: Re-inject edit-panel.css AFTER theme to ensure it always wins
+                        // This makes edit panel styling independent from bot themes
+                        if (window.AUTOBOT_THEMES['edit-panel.css']) {
+                            const existingEditPanel = document.getElementById('edit-panel-stylesheet');
+                            if (existingEditPanel) {
+                                existingEditPanel.remove();
+                            }
+                            
+                            const editPanelStyle = document.createElement('style');
+                            editPanelStyle.id = 'edit-panel-stylesheet';
+                            editPanelStyle.textContent = window.AUTOBOT_THEMES['edit-panel.css'];
+                            document.head.appendChild(editPanelStyle);
+                            
+                            console.log(`  🎨 Edit panel CSS re-injected after theme (ensures independence)`);
+                        }
+
                         console.log(`%c✅ Theme applied successfully: ${themeName}`, 'color: #10b981; font-weight: bold;');
                         console.log(`  📏 Content size: ${themeContent.length.toLocaleString()} characters`);
                         console.log(`  📍 Source: Extension local file`);
@@ -317,6 +353,7 @@ async function loadExtensionResources() {
         console.group('%c🎨 Theme Files Loading', 'color: #8b5cf6; font-weight: bold;');
         const themeFiles = [
             'auto-image-styles.css',
+            'edit-panel.css',
             'themes/acrylic.css',
             'themes/classic-light.css',
             'themes/classic.css',
diff --git a/Extension/edit-panel.css b/Extension/edit-panel.css
new file mode 100644
index 0000000..6f87576
--- /dev/null
+++ b/Extension/edit-panel.css
@@ -0,0 +1,1297 @@
+/* ================================================
+   MODERN APP LAYOUT - EDIT PANEL
+   Professional 3-Column Design
+   ================================================ */
+
+/* ================================================
+   1. GLOBAL PANEL CONTAINER
+   ================================================ */
+
+.edit-panel-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 92vw;
+    height: 92vh;
+    min-width: 1000px;
+    min-height: 700px;
+    max-width: 1920px;
+    max-height: 1200px;
+    background: #1e1e1e;
+    border: 1px solid #3e3e3e;
+    border-radius: 8px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+    z-index: 999999;
+    display: flex;
+    flex-direction: column;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    color: #cccccc;
+    overflow: hidden;
+}
+
+/* ================================================
+   2. HEADER BAR
+   ================================================ */
+
+.edit-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 48px;
+    background: linear-gradient(180deg, #2d2d2d 0%, #252525 100%);
+    border-bottom: 1px solid #3e3e3e;
+    padding: 0 16px;
+    flex-shrink: 0;
+}
+
+.edit-title-section {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.edit-title-icon {
+    font-size: 20px;
+}
+
+.edit-title-text {
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    margin: 0;
+}
+
+.edit-title-info {
+    font-size: 12px;
+    color: #888888;
+    margin-left: 8px;
+}
+
+.edit-header-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.edit-header-btn {
+    width: 32px;
+    height: 32px;
+    background: transparent;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #cccccc;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.edit-header-btn:hover {
+    background: #3e3e3e;
+    border-color: #4a9eff;
+    color: #ffffff;
+}
+
+.edit-close-btn {
+    background: #e74c3c;
+    border-color: #c0392b;
+    color: #ffffff;
+}
+
+.edit-close-btn:hover {
+    background: #c0392b;
+}
+
+/* ================================================
+   3. MAIN WORKSPACE (3-COLUMN LAYOUT)
+   ================================================ */
+
+.edit-workspace {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+/* ================================================
+   4. LEFT SIDEBAR - TOOLS
+   ================================================ */
+
+.edit-toolbar-sidebar {
+    width: 70px;
+    background: #252525;
+    border-right: 1px solid #3e3e3e;
+    display: flex;
+    flex-direction: column;
+    padding: 12px 0;
+    gap: 4px;
+    overflow-y: auto;
+    flex-shrink: 0;
+}
+
+.edit-tool-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 0 8px;
+    margin-bottom: 8px;
+}
+
+.edit-tool-section-divider {
+    height: 1px;
+    background: #3e3e3e;
+    margin: 8px 0;
+}
+
+.edit-tool-btn {
+    width: 54px;
+    height: 54px;
+    background: #2d2d2d;
+    border: 1px solid #3e3e3e;
+    border-radius: 6px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    transition: all 0.2s;
+    position: relative;
+}
+
+.edit-tool-btn:hover {
+    background: #3e3e3e;
+    border-color: #4a9eff;
+    transform: translateY(-1px);
+}
+
+.edit-tool-btn.active {
+    background: #4a9eff;
+    border-color: #4a9eff;
+    box-shadow: 0 0 10px rgba(74, 158, 255, 0.3);
+}
+
+.edit-tool-icon {
+    font-size: 24px;
+}
+
+.edit-tool-label {
+    font-size: 9px;
+    color: #888888;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.edit-tool-btn.active .edit-tool-label {
+    color: #ffffff;
+}
+
+/* ================================================
+   5. CENTER - CANVAS AREA
+   ================================================ */
+
+.edit-canvas-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #1a1a1a;
+    overflow: hidden;
+}
+
+.edit-canvas-header {
+    height: 40px;
+    background: #252525;
+    border-bottom: 1px solid #3e3e3e;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    flex-shrink: 0;
+}
+
+.edit-zoom-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.edit-zoom-btn {
+    width: 28px;
+    height: 28px;
+    background: #2d2d2d;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    cursor: pointer;
+    color: #cccccc;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.edit-zoom-btn:hover {
+    background: #3e3e3e;
+    border-color: #4a9eff;
+}
+
+.edit-zoom-display {
+    font-size: 12px;
+    color: #888888;
+    min-width: 60px;
+    text-align: center;
+}
+
+.edit-view-controls {
+    display: flex;
+    gap: 8px;
+}
+
+.edit-view-toggle {
+    padding: 4px 10px;
+    background: #2d2d2d;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 11px;
+    color: #cccccc;
+    transition: all 0.2s;
+}
+
+.edit-view-toggle:hover {
+    background: #3e3e3e;
+    border-color: #4a9eff;
+}
+
+.edit-view-toggle.active {
+    background: #4a9eff;
+    border-color: #4a9eff;
+    color: #ffffff;
+}
+
+.edit-canvas-viewport {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+    position: relative;
+    background: 
+        linear-gradient(45deg, #0f0f0f 25%, transparent 25%),
+        linear-gradient(-45deg, #0f0f0f 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #0f0f0f 75%),
+        linear-gradient(-45deg, transparent 75%, #0f0f0f 75%);
+    background-size: 20px 20px;
+    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.edit-canvas-wrapper {
+    position: relative;
+    display: inline-block;
+}
+
+.edit-canvas {
+    display: block;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+    cursor: crosshair;
+}
+
+.edit-canvas-grid-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+    opacity: 0.3;
+}
+
+/* NAVIGATOR/MINIMAP */
+.edit-navigator {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 180px;
+    background: #252525;
+    border: 1px solid #3e3e3e;
+    border-radius: 6px;
+    padding: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    z-index: 100;
+}
+
+.edit-navigator-title {
+    font-size: 10px;
+    color: #888888;
+    margin-bottom: 6px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+}
+
+.edit-navigator-content {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    background: #1a1a1a;
+    border: 1px solid #3e3e3e;
+    border-radius: 3px;
+}
+
+.edit-navigator-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    cursor: pointer;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+}
+
+.edit-navigator-viewport {
+    position: absolute;
+    border: 2px solid #ff4444;
+    background: rgba(255, 68, 68, 0.15);
+    pointer-events: none;
+    box-shadow: 
+        0 0 0 1px rgba(0, 0, 0, 0.5),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
+    z-index: 10;
+}
+
+/* ================================================
+   6. RIGHT SIDEBAR - PROPERTIES PANEL
+   ================================================ */
+
+.edit-properties-panel {
+    width: 280px;
+    background: #252525;
+    border-left: 1px solid #3e3e3e;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    flex-shrink: 0;
+}
+
+.edit-prop-section {
+    border-bottom: 1px solid #3e3e3e;
+    padding: 16px;
+}
+
+.edit-prop-section-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: #888888;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.edit-prop-toggle {
+    cursor: pointer;
+    color: #4a9eff;
+    font-size: 12px;
+}
+
+/* POSITION PROPERTIES */
+.edit-position-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+}
+
+.edit-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.edit-input-label {
+    font-size: 10px;
+    color: #888888;
+    text-transform: uppercase;
+}
+
+.edit-input-field {
+    background: #1e1e1e;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    padding: 6px 8px;
+    color: #cccccc;
+    font-size: 12px;
+    width: 100%;
+    transition: all 0.2s;
+}
+
+.edit-input-field:focus {
+    outline: none;
+    border-color: #4a9eff;
+    background: #252525;
+}
+
+/* COLOR PICKER */
+.edit-color-display {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.edit-color-preview {
+    width: 48px;
+    height: 48px;
+    border: 2px solid #3e3e3e;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    background: 
+        linear-gradient(45deg, #2d2d2d 25%, transparent 25%),
+        linear-gradient(-45deg, #2d2d2d 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #2d2d2d 75%),
+        linear-gradient(-45deg, transparent 75%, #2d2d2d 75%);
+    background-size: 8px 8px;
+    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
+}
+
+.edit-color-preview-fill {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+}
+
+.edit-color-info {
+    flex: 1;
+}
+
+.edit-color-hex {
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    margin-bottom: 4px;
+}
+
+.edit-color-rgb {
+    font-size: 11px;
+    color: #888888;
+}
+
+.edit-color-picker-input {
+    width: 100%;
+    height: 32px;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    cursor: pointer;
+    background: #1e1e1e;
+}
+
+/* COLOR SWATCHES */
+.edit-color-swatches {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 6px;
+    margin-top: 12px;
+}
+
+.edit-swatch {
+    width: 100%;
+    aspect-ratio: 1;
+    border: 2px solid #3e3e3e;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+    position: relative;
+    background: 
+        linear-gradient(45deg, #2d2d2d 25%, transparent 25%),
+        linear-gradient(-45deg, #2d2d2d 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #2d2d2d 75%),
+        linear-gradient(-45deg, transparent 75%, #2d2d2d 75%);
+    background-size: 4px 4px;
+    background-position: 0 0, 0 2px, 2px -2px, -2px 0px;
+}
+
+.edit-swatch-fill {
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+}
+
+.edit-swatch:hover {
+    border-color: #4a9eff;
+    transform: scale(1.1);
+}
+
+.edit-swatch.active {
+    border-color: #4a9eff;
+    box-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
+}
+
+/* GRID PROPERTIES */
+.edit-checkbox-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.edit-checkbox {
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    accent-color: #4a9eff;
+}
+
+.edit-checkbox-label {
+    font-size: 12px;
+    color: #cccccc;
+    cursor: pointer;
+}
+
+.edit-slider-group {
+    margin-top: 12px;
+}
+
+.edit-slider {
+    width: 100%;
+    height: 4px;
+    background: #1e1e1e;
+    border-radius: 2px;
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 8px 0;
+}
+
+.edit-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+    background: #4a9eff;
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.edit-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: #4a9eff;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.edit-slider-value {
+    font-size: 11px;
+    color: #888888;
+    text-align: right;
+}
+
+/* LAYERS */
+.edit-layers-list {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.edit-layer-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background: #1e1e1e;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.edit-layer-item:hover {
+    background: #2d2d2d;
+    border-color: #4a9eff;
+}
+
+.edit-layer-item.active {
+    background: #4a9eff;
+    border-color: #4a9eff;
+}
+
+.edit-layer-visibility {
+    font-size: 14px;
+    cursor: pointer;
+}
+
+.edit-layer-thumbnail {
+    width: 32px;
+    height: 32px;
+    background: #252525;
+    border: 1px solid #3e3e3e;
+    border-radius: 3px;
+    image-rendering: pixelated;
+}
+
+.edit-layer-name {
+    flex: 1;
+    font-size: 12px;
+    color: #cccccc;
+}
+
+.edit-layer-item.active .edit-layer-name {
+    color: #ffffff;
+    font-weight: 600;
+}
+
+/* ================================================
+   7. BOTTOM STATUS BAR
+   ================================================ */
+
+.edit-bottom-bar {
+    height: 32px;
+    background: #252525;
+    border-top: 1px solid #3e3e3e;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 16px;
+    font-size: 11px;
+    color: #888888;
+    flex-shrink: 0;
+}
+
+.edit-status-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.edit-status-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.edit-status-icon {
+    font-size: 12px;
+}
+
+.edit-status-right {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.edit-undo-redo {
+    display: flex;
+    gap: 4px;
+}
+
+.edit-history-btn {
+    width: 24px;
+    height: 24px;
+    background: transparent;
+    border: 1px solid #3e3e3e;
+    border-radius: 3px;
+    cursor: pointer;
+    color: #cccccc;
+    font-size: 11px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.edit-history-btn:hover {
+    background: #3e3e3e;
+    border-color: #4a9eff;
+}
+
+.edit-history-btn:disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+}
+
+/* ================================================
+   8. CUSTOM SCROLLBARS
+   ================================================ */
+
+.edit-toolbar-sidebar::-webkit-scrollbar,
+.edit-properties-panel::-webkit-scrollbar,
+.edit-canvas-viewport::-webkit-scrollbar,
+.edit-layers-list::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.edit-toolbar-sidebar::-webkit-scrollbar-track,
+.edit-properties-panel::-webkit-scrollbar-track,
+.edit-canvas-viewport::-webkit-scrollbar-track,
+.edit-layers-list::-webkit-scrollbar-track {
+    background: #1e1e1e;
+}
+
+.edit-toolbar-sidebar::-webkit-scrollbar-thumb,
+.edit-properties-panel::-webkit-scrollbar-thumb,
+.edit-canvas-viewport::-webkit-scrollbar-thumb,
+.edit-layers-list::-webkit-scrollbar-thumb {
+    background: #3e3e3e;
+    border-radius: 4px;
+}
+
+.edit-toolbar-sidebar::-webkit-scrollbar-thumb:hover,
+.edit-properties-panel::-webkit-scrollbar-thumb:hover,
+.edit-canvas-viewport::-webkit-scrollbar-thumb:hover,
+.edit-layers-list::-webkit-scrollbar-thumb:hover {
+    background: #4a9eff;
+}
+
+/* ================================================
+   9. TOOLTIPS
+   ================================================ */
+
+[data-tooltip] {
+    position: relative;
+}
+
+[data-tooltip]::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-4px);
+    padding: 6px 10px;
+    background: #2d2d2d;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    font-size: 11px;
+    color: #cccccc;
+    white-space: nowrap;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    z-index: 1000;
+}
+
+[data-tooltip]:hover::before {
+    opacity: 1;
+}
+
+/* ================================================
+   10. ANIMATIONS
+   ================================================ */
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+.edit-panel-container {
+    animation: fadeIn 0.2s ease-out;
+}
+
+/* ================================================
+   11. MODALS & DIALOGS
+   ================================================ */
+
+.edit-modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000000;
+}
+
+.edit-modal {
+    background: #252525;
+    border: 1px solid #3e3e3e;
+    border-radius: 8px;
+    padding: 24px;
+    max-width: 500px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.edit-modal-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #ffffff;
+    margin-bottom: 16px;
+}
+
+.edit-modal-content {
+    font-size: 13px;
+    color: #cccccc;
+    margin-bottom: 20px;
+}
+
+.edit-modal-actions {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+}
+
+.edit-modal-btn {
+    padding: 8px 16px;
+    background: #2d2d2d;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    color: #cccccc;
+    transition: all 0.2s;
+}
+
+.edit-modal-btn:hover {
+    background: #3e3e3e;
+    border-color: #4a9eff;
+}
+
+.edit-modal-btn.primary {
+    background: #4a9eff;
+    border-color: #4a9eff;
+    color: #ffffff;
+}
+
+.edit-modal-btn.primary:hover {
+    background: #3a8eef;
+}
+
+/* ================================================
+   12. LOADING STATES
+   ================================================ */
+
+.edit-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+}
+
+.edit-spinner {
+    width: 40px;
+    height: 40px;
+    border: 3px solid #3e3e3e;
+    border-top-color: #4a9eff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.edit-loading-text {
+    font-size: 12px;
+    color: #888888;
+}
+
+/* ================================================
+   13. RESPONSIVE ADJUSTMENTS
+   ================================================ */
+
+@media (max-width: 1200px) {
+    .edit-properties-panel {
+        width: 240px;
+    }
+    
+    .edit-toolbar-sidebar {
+        width: 60px;
+    }
+    
+    .edit-tool-btn {
+        width: 44px;
+        height: 44px;
+    }
+}
+
+@media (max-height: 800px) {
+    .edit-header {
+        height: 40px;
+    }
+    
+    .edit-bottom-bar {
+        height: 28px;
+    }
+    
+    .edit-navigator {
+        width: 120px;
+        height: 120px;
+    }
+}
+
+/* ================================================
+   14. UTILITY CLASSES
+   ================================================ */
+
+.edit-hidden {
+    display: none !important;
+}
+
+.edit-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
+.edit-highlight {
+    border-color: #4a9eff !important;
+    box-shadow: 0 0 8px rgba(74, 158, 255, 0.5) !important;
+}
+
+/* ================================================
+   15. CONTEXT MENUS
+   ================================================ */
+
+.edit-context-menu {
+    position: fixed;
+    background: #252525;
+    border: 1px solid #3e3e3e;
+    border-radius: 6px;
+    padding: 4px;
+    min-width: 180px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    z-index: 1000001;
+}
+
+.edit-context-item {
+    padding: 8px 12px;
+    font-size: 12px;
+    color: #cccccc;
+    cursor: pointer;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: all 0.15s;
+}
+
+.edit-context-item:hover {
+    background: #3e3e3e;
+    color: #ffffff;
+}
+
+.edit-context-item.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.edit-context-item.disabled:hover {
+    background: transparent;
+}
+
+.edit-context-divider {
+    height: 1px;
+    background: #3e3e3e;
+    margin: 4px 0;
+}
+
+.edit-context-shortcut {
+    margin-left: auto;
+    font-size: 10px;
+    color: #666666;
+}
+
+/* ================================================
+   16. ADVANCED TOOL OPTIONS
+   ================================================ */
+
+.edit-tool-options {
+    position: absolute;
+    left: 100%;
+    top: 0;
+    margin-left: 8px;
+    background: #252525;
+    border: 1px solid #3e3e3e;
+    border-radius: 6px;
+    padding: 12px;
+    min-width: 200px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    z-index: 1000;
+}
+
+.edit-tool-options-title {
+    font-size: 11px;
+    font-weight: 600;
+    color: #888888;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+}
+
+.edit-option-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.edit-option-label {
+    font-size: 11px;
+    color: #cccccc;
+}
+
+.edit-option-value {
+    font-size: 11px;
+    color: #4a9eff;
+    font-weight: 600;
+}
+
+/* ================================================
+   17. BRUSH/TOOL CURSOR
+   ================================================ */
+
+.edit-canvas-viewport.cursor-brush {
+    cursor: none;
+}
+
+.edit-brush-cursor {
+    position: absolute;
+    border: 2px solid #4a9eff;
+    border-radius: 50%;
+    pointer-events: none;
+    z-index: 1000;
+    box-shadow: 0 0 4px rgba(74, 158, 255, 0.5);
+}
+
+/* ================================================
+   18. SELECTION OVERLAY
+   ================================================ */
+
+.edit-selection-overlay {
+    position: absolute;
+    border: 2px dashed #4a9eff;
+    background: rgba(74, 158, 255, 0.1);
+    pointer-events: none;
+    animation: dashAnimation 0.5s linear infinite;
+}
+
+@keyframes dashAnimation {
+    to {
+        stroke-dashoffset: -20;
+    }
+}
+
+/* ================================================
+   19. COLOR PALETTE PRESETS
+   ================================================ */
+
+.edit-palette-presets {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 12px;
+}
+
+.edit-palette-preset {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background: #1e1e1e;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.edit-palette-preset:hover {
+    background: #2d2d2d;
+    border-color: #4a9eff;
+}
+
+.edit-palette-preview {
+    display: flex;
+    gap: 2px;
+}
+
+.edit-palette-color {
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+}
+
+.edit-palette-name {
+    font-size: 11px;
+    color: #cccccc;
+}
+
+/* ================================================
+   20. EXPORT OPTIONS PANEL
+   ================================================ */
+
+.edit-export-options {
+    padding: 16px;
+    background: #252525;
+    border-top: 1px solid #3e3e3e;
+}
+
+.edit-export-format {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.edit-format-btn {
+    flex: 1;
+    padding: 8px;
+    background: #2d2d2d;
+    border: 1px solid #3e3e3e;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 11px;
+    color: #cccccc;
+    text-align: center;
+    transition: all 0.2s;
+}
+
+.edit-format-btn:hover {
+    background: #3e3e3e;
+    border-color: #4a9eff;
+}
+
+.edit-format-btn.active {
+    background: #4a9eff;
+    border-color: #4a9eff;
+    color: #ffffff;
+}
+
+.edit-export-btn {
+    width: 100%;
+    padding: 10px;
+    background: linear-gradient(180deg, #5aafff 0%, #4a9eff 100%);
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    color: #ffffff;
+    transition: all 0.2s;
+}
+
+.edit-export-btn:hover {
+    background: linear-gradient(180deg, #6abfff 0%, #5aafff 100%);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
+}
+
+.edit-export-btn:active {
+    transform: translateY(0);
+}
+
+/* ================================================
+   21. TIP OVERLAY (NAVIGATION HELP)
+   ================================================ */
+
+.edit-tip-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000000;
+    opacity: 1;
+    transition: opacity 0.3s ease;
+}
+
+.edit-tip-box {
+    background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%);
+    border: 2px solid #4a9eff;
+    border-radius: 12px;
+    padding: 24px 32px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(74, 158, 255, 0.3);
+    max-width: 400px;
+    text-align: center;
+    animation: tipSlideIn 0.3s ease-out;
+}
+
+@keyframes tipSlideIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.edit-tip-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    animation: tipPulse 2s ease-in-out infinite;
+}
+
+@keyframes tipPulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+}
+
+.edit-tip-content h3 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #ffffff;
+    margin: 0 0 16px 0;
+}
+
+.edit-tip-content p {
+    font-size: 14px;
+    color: #cccccc;
+    margin: 8px 0;
+    text-align: left;
+}
+
+.edit-tip-content strong {
+    color: #4a9eff;
+    font-weight: 600;
+}
+
+.edit-tip-close {
+    margin-top: 20px;
+    padding: 10px 32px;
+    background: linear-gradient(180deg, #5aafff 0%, #4a9eff 100%);
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    transition: all 0.2s;
+}
+
+.edit-tip-close:hover {
+    background: linear-gradient(180deg, #6abfff 0%, #5aafff 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(74, 158, 255, 0.5);
+}
+
+.edit-tip-close:active {
+    transform: translateY(0);
+}
diff --git a/Extension/manifest.json b/Extension/manifest.json
index ffc9443..7452c9d 100644
--- a/Extension/manifest.json
+++ b/Extension/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "WPlace AutoBOT Script Launcher",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "Launch and manage automation scripts for WPlace",
   "icons": {
     "16": "icons/icon16.png",
@@ -55,6 +55,7 @@
         "Script-manager.js",
         "Script-manager-fixed.js",
         "auto-image-styles.css",
+        "edit-panel.css",
         "themes/*.css",
         "lang/*.json",
         "lang/lang/*.json",
diff --git a/Extension/popup/popup.html b/Extension/popup/popup.html
index 5885de6..1b20574 100644
--- a/Extension/popup/popup.html
+++ b/Extension/popup/popup.html
@@ -113,7 +113,7 @@
 
         <footer>
             <div class="footer-info">
-                <span>v2.0.7</span>
+                <span>v2.1.0</span>
                 <a href="#" id="settingsBtn">Settings</a>
             </div>
         </footer>
diff --git a/Extension/scripts/Auto-Image.js b/Extension/scripts/Auto-Image.js
index 2c5901c..3e18e9d 100644
--- a/Extension/scripts/Auto-Image.js
+++ b/Extension/scripts/Auto-Image.js
@@ -1058,12 +1058,43 @@ localStorage.removeItem("lp");
     overlayOpacity: CONFIG.OVERLAY.OPACITY_DEFAULT,
     blueMarbleEnabled: CONFIG.OVERLAY.BLUE_MARBLE_DEFAULT,
     ditheringEnabled: false,
+    ditheringMethod: 'floyd', // Dithering algorithm: floyd, bayer2, bayer4, bayer8, atkinson, etc.
+    ditheringStrength: 0.5, // Dithering strength (0-1) for ordered dithering methods
+    posterizeLevels: 0, // Posterize levels (0 = disabled, 2-10 = quantize colors)
+    resamplingMethod: 'nearest', // 'nearest' | 'bilinear' | 'box' | 'median' | 'dominant'
+    // Pre-processing filters (before downscale)
+    preBlurMode: 'none', // 'none' | 'box' | 'gaussian' | 'kuwahara'
+    preBlurRadius: 0, // 0-20
+    sharpenAmount: 0, // 0-300 (percentage)
+    sharpenRadius: 0, // 0-20
+    sharpenThreshold: 0, // 0-64
     // Advanced color matching settings
-    colorMatchingAlgorithm: 'lab',
-    enableChromaPenalty: true,
+    colorMatchingAlgorithm: 'rgb', // Default to Legacy (RGB)
+    enableChromaPenalty: false, // Chroma penalty OFF by default
     chromaPenaltyWeight: 0.15,
     customTransparencyThreshold: CONFIG.TRANSPARENCY_THRESHOLD,
     customWhiteThreshold: CONFIG.WHITE_THRESHOLD,
+    // Post-processing settings
+    enableEdgeOverlay: false,
+    edgeDetectionAlgorithm: 'sobel', // 'sobel' | 'prewitt' | 'roberts' | 'laplacian'
+    edgeThreshold: 60,        // 0-255 (edge detection sensitivity)
+    edgeThickness: 1,         // 1-6 (edge line width in pixels)
+    edgeThin: false,          // boolean (thin edges to 1 pixel)
+    enableOutline: false,             // Toggle for outline effect
+    outlineThickness: 0,      // 0-10 pixels
+    enableSimplify: false,            // Toggle for simplify regions
+    simplifyArea: 0,          // 0-1000 pixels
+    enableErode: false,               // Toggle for erode edges
+    erodeAmount: 0,           // 0-20 pixels
+    enableModeFilter: false,          // Toggle for mode filter
+    modeFilterSize: 0,        // 0-21 (0 = off)
+    // Color Correction settings
+    enableColorCorrection: false,
+    brightness: 0,            // -100 to 100
+    contrast: 0,              // -100 to 100
+    saturation: 0,            // -100 to 100
+    hue: 0,                   // -180 to 180
+    gamma: 1.0,               // 0.5 to 3.0
     resizeSettings: null,
     originalImage: null,
     resizeIgnoreMask: null,
@@ -2963,19 +2994,6 @@ localStorage.removeItem("lp");
             ${Utils.t('automation')}
           </label>
           <!-- Token generator is always enabled - settings moved to Token Source above -->
-          <div class="wplace-settings-section-wrapper">
-            <label for="autoLoadProgressToggle" class="wplace-settings-toggle">
-              <div>
-                <span class="wplace-settings-toggle-title" style="color: ${theme.text || 'white'};">
-                  ${Utils.t('autoLoadProgress')}
-                </span>
-                <p class="wplace-settings-toggle-description" style="color: ${theme.text ? `${theme.text}BB` : 'rgba(255,255,255,0.7)'};">
-                  ${Utils.t('autoLoadProgressDesc')}
-                </p>
-              </div>
-              <input type="checkbox" id="autoLoadProgressToggle" ${state.autoLoadProgress ? 'checked' : ''} class="wplace-settings-checkbox" style="accent-color: ${theme.highlight || '#48dbfb'};"/>
-            </label>
-          </div>
         </div>
 
         <!-- Overlay Settings Section -->
@@ -3057,21 +3075,8 @@ localStorage.removeItem("lp");
                 style="accent-color: ${theme.highlight || '#48dbfb'};"/>
             </label>
             
-            <!-- Paint Transparent Pixels -->
-            <label class="wplace-settings-toggle">
-              <div>
-                <span class="wplace-settings-toggle-title" style="color: ${theme.text || 'white'};">
-                  ${Utils.t('paintTransparentPixels')}
-                </span>
-                <p class="wplace-settings-toggle-description" style="color: ${theme.text ? `${theme.text}BB` : 'rgba(255,255,255,0.7)'
-      };">
-                  ${Utils.t('paintTransparentPixelsDescription')}
-                </p>
-              </div>
-              <input type="checkbox" id="settingsPaintTransparentToggle" ${state.paintTransparentPixels ? 'checked' : ''} 
-                class="wplace-settings-checkbox"
-                style="accent-color: ${theme.highlight || '#48dbfb'};"/>
-            </label>
+            <!-- Paint Transparent toggle removed - use the one in Processing panel instead -->
+            
             <label class="wplace-settings-toggle">
               <div>
                 <span class="wplace-settings-toggle-title" style="color: ${theme.text || 'white'
@@ -3087,91 +3092,25 @@ localStorage.removeItem("lp");
           </div>
         </div>
 
-        <!-- Speed Control Section -->
+        <!-- Painting Order Section -->
         <div class="wplace-settings-section">
           <label class="wplace-settings-section-label">
-            <i class="fas fa-tachometer-alt wplace-icon-speed"></i>
-            ${Utils.t('paintingSpeed')}
+            <i class="fas fa-palette wplace-icon-palette"></i>
+            ${Utils.t('paintingOrder')}
           </label>
           
           <!-- Painting Order Selection -->
           <div class="wplace-mode-selection">
-            <label class="wplace-mode-label">
-              <i class="fas fa-palette wplace-icon-palette"></i>
-              ${Utils.t('paintingOrder')}
-            </label>
             <select id="paintingOrderSelect" class="wplace-settings-select">
               <option value="sequential" class="wplace-settings-option">📐 Normal</option>
               <option value="color-by-color" class="wplace-settings-option">🎨 Color By Color</option>
             </select>
           </div>
-
-          <!-- Batch Mode Selection -->
-          <div class="wplace-mode-selection">
-            <label class="wplace-mode-label">
-              <i class="fas fa-dice wplace-icon-dice"></i>
-              Batch Mode
-            </label>
-            <select id="batchModeSelect" class="wplace-settings-select">
-              <option value="normal" class="wplace-settings-option">📦 Normal (Fixed Size)</option>
-              <option value="random" class="wplace-settings-option">🎲 Random (Range)</option>
-            </select>
-          </div>
           
-          <!-- Normal Mode: Fixed Size Controls -->
-          <div id="normalBatchControls" class="wplace-batch-controls wplace-normal-batch-controls">
-            <div class="wplace-batch-size-header">
-              <span class="wplace-batch-size-label">${Utils.t('batchSize')}</span>
-            </div>
-            <div class="wplace-dual-control-compact">
-                <div class="wplace-speed-slider-container-compact">
-                  <input type="range" id="speedSlider" min="${CONFIG.PAINTING_SPEED.MIN}" max="${CONFIG.PAINTING_SPEED.MAX}" value="${state.paintingSpeed}" class="wplace-overlay-opacity-slider">
-                </div>
-                <div class="wplace-speed-input-container-compact">
-                  <div class="wplace-input-group-compact">
-                    <button id="speedDecrease" class="wplace-input-btn-compact" type="button">-</button>
-                    <input type="number" id="speedInput" class="wplace-number-input-compact" min="${CONFIG.PAINTING_SPEED.MIN}" max="${CONFIG.PAINTING_SPEED.MAX}" value="${state.paintingSpeed}">
-                    <button id="speedIncrease" class="wplace-input-btn-compact" type="button">+</button>
-                    <span id="speedValue" class="wplace-input-label-compact">pixels</span>
-                  </div>
-                </div>
-            </div>
-            <div class="wplace-speed-labels">
-              <span class="wplace-speed-min"><i class="fas fa-turtle"></i> ${CONFIG.PAINTING_SPEED.MIN}</span>
-              <span class="wplace-speed-max"><i class="fas fa-rabbit"></i> ${CONFIG.PAINTING_SPEED.MAX}</span>
-            </div>
-          </div>
-          
-          <!-- Random Mode: Range Controls -->
-          <div id="randomBatchControls" class="wplace-batch-controls wplace-random-batch-controls">
-            <div class="wplace-random-batch-grid">
-              <div>
-                <label class="wplace-random-batch-label">
-                  <i class="fas fa-arrow-down wplace-icon-min"></i>
-                  Minimum Batch Size
-                </label>
-                <input type="number" id="randomBatchMin" min="1" max="1000" value="${CONFIG.RANDOM_BATCH_RANGE.MIN}" class="wplace-settings-number-input">
-              </div>
-              <div>
-                <label class="wplace-random-batch-label">
-                  <i class="fas fa-arrow-up wplace-icon-max"></i>
-                  Maximum Batch Size
-                </label>
-                <input type="number" id="randomBatchMax" min="1" max="1000" value="${CONFIG.RANDOM_BATCH_RANGE.MAX}" class="wplace-settings-number-input">
-              </div>
-            </div>
-            <p class="wplace-random-batch-description">
-              🎲 Random batch size between min and max values
-            </p>
-          </div>
-          
-          <!-- Speed Control Toggle -->
-          <label class="wplace-speed-control-toggle">
-            <input type="checkbox" id="enableSpeedToggle" ${CONFIG.PAINTING_SPEED_ENABLED ? 'checked' : ''
-      } class="wplace-speed-checkbox"/>
-            <span>${Utils.t('enablePaintingSpeedLimit')}</span>
-            <div class="wplace-speed-toggle-description">When disabled, bot uses all available charges immediately for maximum speed</div>
-          </label>
+          <p class="wplace-settings-description">
+            <i class="fas fa-info-circle"></i> 
+            Bot now sends all available pixels at once for maximum speed
+          </p>
         </div>
         
         <!-- Coordinate Generation Section -->
@@ -3528,201 +3467,588 @@ localStorage.removeItem("lp");
     `;
 
     const resizeContainer = document.createElement('div');
-    resizeContainer.className = 'resize-container';
+    resizeContainer.className = 'resize-container resize-container-v2';
     resizeContainer.innerHTML = `
       <h3 class="resize-dialog-title" style="color: ${theme.text}">${Utils.t('resizeImage')}</h3>
-      <div class="resize-controls">
-        <label class="resize-control-label">
-          Width: <span id="widthValue">0</span>px
-          <input type="range" id="widthSlider" class="resize-slider" min="10" max="500" value="100">
-        </label>
-        <label class="resize-control-label">
-          Height: <span id="heightValue">0</span>px
-          <input type="range" id="heightSlider" class="resize-slider" min="10" max="500" value="100">
-        </label>
+      
+      <!-- Two-column layout: Left = Configurations (scrollable), Right = Preview (fixed) -->
+      <div class="resize-two-column-layout">
         
-        <!-- Edit button moved here after height slider -->
-        <div class="edit-button-container" style="margin: 15px 0; text-align: center;">
-          <button id="editImageBtn" class="wplace-btn wplace-btn-select">
-            <i class="fas fa-paint-brush"></i>
-            <span>Edit</span>
-          </button>
-        </div>
-        
-        <label class="resize-checkbox-label">
-          <input type="checkbox" id="keepAspect" checked>
-          ${Utils.t('keepAspectRatio')}
-        </label>
-        <label class="resize-checkbox-label">
-            <input type="checkbox" id="paintWhiteToggle" checked>
-            ${Utils.t('paintWhitePixels')}
-        </label>
-        <label class="resize-checkbox-label">
-            <input type="checkbox" id="paintTransparentToggle" checked>
-            ${Utils.t('paintTransparentPixels')}
-        </label>
-        <div class="resize-zoom-controls">
-          <button id="zoomOutBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t(
-      'zoomOut'
-    )}"><i class="fas fa-search-minus"></i></button>
-          <input type="range" id="zoomSlider" class="resize-slider resize-zoom-slider" min="0.1" max="20" value="1" step="0.05">
-          <button id="zoomInBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t(
-      'zoomIn'
-    )}"><i class="fas fa-search-plus"></i></button>
-          <button id="zoomFitBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t(
-      'fitToView'
-    )}">${Utils.t('fit')}</button>
-          <button id="zoomActualBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t(
-      'actualSize'
-    )}">${Utils.t('hundred')}</button>
-          <button id="panModeBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t('panMode')}">
-            <i class="fas fa-hand-paper"></i>
-          </button>
-          <span id="zoomValue" class="resize-zoom-value">100%</span>
-          <div id="cameraHelp" class="resize-camera-help">
-            Drag to pan • Pinch to zoom • Double‑tap to zoom
-          </div>
-        </div>
-      </div>
-
-      <div class="resize-preview-wrapper">
-          <div id="resizePanStage" class="resize-pan-stage">
-            <div id="resizeCanvasStack" class="resize-canvas-stack resize-canvas-positioned">
-              <canvas id="resizeCanvas" class="resize-base-canvas"></canvas>
-              <canvas id="maskCanvas" class="resize-mask-canvas"></canvas>
-            </div>
-          </div>
-      </div>
-      <div class="resize-tools">
-        <div class="resize-tools-container">
-          <div class="resize-brush-controls">
-              <div class="resize-brush-control">
-                <label class="resize-tool-label">Brush</label>
-                <div class="resize-tool-input-group">
-                  <input id="maskBrushSize" type="range" min="1" max="255" step="1" value="1" class="resize-tool-slider">
-                  <span id="maskBrushSizeValue" class="resize-tool-value">1</span>
+        <!-- LEFT COLUMN: Scrollable Configuration Panel -->
+        <div class="resize-config-column">
+          <div class="resize-config-scroll">
+            
+            <!-- Size Controls -->
+            <div class="resize-controls">
+              <label class="resize-control-label">
+                Width: <span id="widthValue">0</span>px
+                <input type="range" id="widthSlider" class="resize-slider" min="10" max="500" value="100">
+              </label>
+              <label class="resize-control-label">
+                Height: <span id="heightValue">0</span>px
+                <input type="range" id="heightSlider" class="resize-slider" min="10" max="500" value="100">
+              </label>
+              
+              <!-- Downscale Method Selection -->
+              <div class="resize-method-container" style="margin: 15px 0;">
+                <label class="resize-control-label" style="margin-bottom: 8px; display: block;">
+                  <strong>Downscale Method</strong>
+                </label>
+                <select id="resamplingMethodSelect" class="resize-method-select" style="
+                  width: 100%;
+                  padding: 8px 12px;
+                  background: var(--wplace-bg-secondary);
+                  color: var(--wplace-text-primary);
+                  border: 1px solid rgba(255, 255, 255, 0.1);
+                  border-radius: 6px;
+                  font-size: 13px;
+                  cursor: pointer;
+                  transition: all 0.2s ease;
+                ">
+                  <option value="nearest">Nearest Neighbor - Ultra-sharp pixel art</option>
+                  <option value="bilinear">Bilinear - Smooth gradients</option>
+                  <option value="box">Box Average - Balanced quality (recommended)</option>
+                  <option value="median">Median Filter - Noise reduction</option>
+                  <option value="dominant">Dominant Color - Pixel art style</option>
+                </select>
+                <div class="resize-method-hint" style="
+                  font-size: 11px;
+                  color: rgba(255, 255, 255, 0.6);
+                  margin-top: 6px;
+                  line-height: 1.4;
+                ">
+                  Choose how the image is downscaled to target size
                 </div>
               </div>
-            <div class="resize-brush-control">
-              <label class="resize-tool-label">Row/col size</label>
-              <div class="resize-tool-input-group">
-                <input id="rowColSize" type="range" min="1" max="255" step="1" value="1" class="resize-tool-slider">
-                <span id="rowColSizeValue" class="resize-tool-value">1</span>
+              
+              <label class="resize-checkbox-label">
+                <input type="checkbox" id="keepAspect" checked>
+                ${Utils.t('keepAspectRatio')}
+              </label>
+              <label class="resize-checkbox-label">
+                  <input type="checkbox" id="paintWhiteToggle" checked>
+                  ${Utils.t('paintWhitePixels')}
+              </label>
+              <label class="resize-checkbox-label">
+                  <input type="checkbox" id="paintTransparentToggle" checked>
+                  ${Utils.t('paintTransparentPixels')}
+              </label>
+            </div>
+
+            <!-- Mask Tools Section -->
+            <div class="resize-tools">
+              <div class="resize-tools-container">
+                <div class="resize-brush-controls">
+                    <div class="resize-brush-control">
+                      <label class="resize-tool-label">Brush</label>
+                      <div class="resize-tool-input-group">
+                        <input id="maskBrushSize" type="range" min="1" max="255" step="1" value="1" class="resize-tool-slider">
+                        <span id="maskBrushSizeValue" class="resize-tool-value">1</span>
+                      </div>
+                    </div>
+                  <div class="resize-brush-control">
+                    <label class="resize-tool-label">Row/col size</label>
+                    <div class="resize-tool-input-group">
+                      <input id="rowColSize" type="range" min="1" max="255" step="1" value="1" class="resize-tool-slider">
+                      <span id="rowColSizeValue" class="resize-tool-value">1</span>
+                    </div>
+                  </div>
+                </div>
+                <div class="resize-mode-controls">
+                  <label class="resize-tool-label">Mode</label>
+                  <div class="mask-mode-group resize-mode-group">
+                    <button id="maskModeIgnore" class="wplace-btn resize-mode-btn">Ignore</button>
+                    <button id="maskModeUnignore" class="wplace-btn resize-mode-btn">Unignore</button>
+                    <button id="maskModeToggle" class="wplace-btn wplace-btn-primary resize-mode-btn">Toggle</button>
+                  </div>
+                </div>
+                <button id="clearIgnoredBtn" class="wplace-btn resize-clear-btn" title="Clear all ignored pixels">Clear</button>
+                <button id="invertMaskBtn" class="wplace-btn resize-invert-btn" title="Invert mask">Invert</button>
+                <span class="resize-shortcut-help">Select a mode to start painting • Shift = Row • Alt = Column</span>
               </div>
             </div>
-          </div>
-          <div class="resize-mode-controls">
-            <label class="resize-tool-label">Mode</label>
-            <div class="mask-mode-group resize-mode-group">
-              <button id="maskModeIgnore" class="wplace-btn resize-mode-btn">Ignore</button>
-              <button id="maskModeUnignore" class="wplace-btn resize-mode-btn">Unignore</button>
-              <button id="maskModeToggle" class="wplace-btn wplace-btn-primary resize-mode-btn">Toggle</button>
-            </div>
-          </div>
-          <button id="clearIgnoredBtn" class="wplace-btn resize-clear-btn" title="Clear all ignored pixels">Clear</button>
-          <button id="invertMaskBtn" class="wplace-btn resize-invert-btn" title="Invert mask">Invert</button>
-          <span class="resize-shortcut-help">Shift = Row • Alt = Column</span>
-        </div>
-      </div>
 
-      <div class="wplace-section resize-color-palette-section" id="color-palette-section">
-          <div class="wplace-section-title">
-              <i class="fas fa-palette"></i>&nbsp;Color Palette
-          </div>
-          <div class="wplace-controls">
-              <div class="wplace-row single">
-                  <label class="resize-color-toggle-label">
-                      <input type="checkbox" id="showAllColorsToggle" class="resize-color-checkbox">
-                      <span>${Utils.t('showAllColorsIncluding')}</span>
+            <!-- Color Palette Section -->
+            <div class="wplace-section resize-color-palette-section" id="color-palette-section">
+                <div class="wplace-section-title">
+                    <i class="fas fa-palette"></i>&nbsp;Color Palette
+                </div>
+                <div class="wplace-controls">
+                    <div class="wplace-row single">
+                        <label class="resize-color-toggle-label">
+                            <input type="checkbox" id="showAllColorsToggle" class="resize-color-checkbox">
+                            <span>${Utils.t('showAllColorsIncluding')}</span>
+                        </label>
+                    </div>
+                    <div class="wplace-row" style="display: flex;">
+                        <button id="selectAllBtn" class="wplace-btn" style="flex: 1;">Select All</button>
+                        <button id="unselectAllBtn" class="wplace-btn" style="flex: 1;">Unselect All</button>
+                        <button id="unselectPaidBtn" class="wplace-btn">Unselect Paid</button>
+                    </div>
+                    <div id="colors-container" class="wplace-color-grid"></div>
+                </div>
+            </div>
+
+            <!-- IMAGE PREPROCESSING SECTION (Dedicated) -->
+            <div class="wplace-section resize-preprocessing-section" id="preprocessing-section">
+              <div class="wplace-section-title">
+                <i class="fas fa-magic"></i>&nbsp;Pre Processing
+              </div>
+              <div class="wplace-controls" style="padding: 15px;">
+                <!-- Pre-Blur (Before Downscale) -->
+                <div class="preprocessing-group" style="margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,0.1);">
+                  <label class="resize-advanced-label" style="margin-bottom: 10px; display: block;">
+                    <span class="resize-advanced-label-text" style="font-size: 14px;">
+                      <i class="fas fa-droplet"></i> Pre-Blur (Anti-Aliasing)
+                    </span>
+                    <div class="resize-advanced-description" style="margin-top: 4px;">
+                      Apply blur before downscaling to reduce moiré patterns and aliasing
+                    </div>
                   </label>
-              </div>
-              <div class="wplace-row" style="display: flex;">
-                  <button id="selectAllBtn" class="wplace-btn" style="flex: 1;">Select All</button>
-                  <button id="unselectAllBtn" class="wplace-btn" style="flex: 1;">Unselect All</button>
-                  <button id="unselectPaidBtn" class="wplace-btn">Unselect Paid</button>
-              </div>
-              <div id="colors-container" class="wplace-color-grid"></div>
-          </div>
-      </div>
+                  <select id="preBlurModeSelect" class="resize-advanced-select" style="margin-bottom: 10px;">
+                    <option value="none">None - No pre-blur</option>
+                    <option value="box">Box Blur - Fast separable filter</option>
+                    <option value="gaussian">Gaussian Blur - Smooth natural blur</option>
+                    <option value="kuwahara">Kuwahara - Edge-preserving smoothing</option>
+                  </select>
+                  <div id="blurRadiusControl" style="display: none;">
+                    <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                      <span>Blur Radius</span>
+                      <span id="blurRadiusValue" class="resize-slider-value">1</span>
+                    </label>
+                    <input type="range" id="preBlurRadiusSlider" class="resize-slider" min="1" max="20" value="1" step="1">
+                    <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                      Larger radius = stronger blur (1-20 pixels)
+                    </div>
+                  </div>
+                </div>
 
-      <div class="wplace-section resize-advanced-color-section" id="advanced-color-section">
-        <div class="wplace-section-title">
-          <i class="fas fa-flask"></i>&nbsp;Advanced Color Matching
-        </div>
-        <div class="resize-advanced-controls">
-          <label class="resize-advanced-label">
-            <span class="resize-advanced-label-text">Algorithm</span>
-            <select id="colorAlgorithmSelect" class="resize-advanced-select">
-              <option value="lab" ${state.colorMatchingAlgorithm === 'lab' ? 'selected' : ''
+                <!-- Sharpening (After Processing) -->
+                <div class="preprocessing-group">
+                  <label class="resize-advanced-label" style="margin-bottom: 10px; display: block;">
+                    <span class="resize-advanced-label-text" style="font-size: 14px;">
+                      <i class="fas fa-adjust"></i> Sharpening (Unsharp Mask)
+                    </span>
+                    <div class="resize-advanced-description" style="margin-top: 4px;">
+                      Enhance edges and details after processing
+                    </div>
+                  </label>
+                  
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                    <span>Amount</span>
+                    <span id="sharpenAmountValue" class="resize-slider-value">0%</span>
+                  </label>
+                  <input type="range" id="sharpenAmountSlider" class="resize-slider" min="0" max="300" value="0" step="5" style="margin-bottom: 10px;">
+                  
+                  <div id="sharpenRadiusControl" style="display: none; margin-bottom: 10px;">
+                    <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                      <span>Radius</span>
+                      <span id="sharpenRadiusValue" class="resize-slider-value">1</span>
+                    </label>
+                    <input type="range" id="sharpenRadiusSlider" class="resize-slider" min="1" max="20" value="1" step="1">
+                  </div>
+                  
+                  <div id="sharpenThresholdControl" style="display: none;">
+                    <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                      <span>Threshold</span>
+                      <span id="sharpenThresholdValue" class="resize-slider-value">0</span>
+                    </label>
+                    <input type="range" id="sharpenThresholdSlider" class="resize-slider" min="0" max="64" value="0" step="1">
+                    <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                      Higher threshold = sharpen only strong edges (reduces noise amplification)
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- DITHERING SECTION (Dedicated) -->
+            <div class="wplace-section resize-dithering-section" id="dithering-section">
+              <div class="wplace-section-title">
+                <i class="fas fa-th"></i>&nbsp;Dithering
+              </div>
+              <div class="wplace-controls" style="padding: 15px;">
+                <!-- Enable Dithering Toggle -->
+                <label class="resize-advanced-toggle" style="margin-bottom: 15px;">
+                  <div class="resize-advanced-toggle-content">
+                    <span class="resize-advanced-label-text" style="font-size: 14px;">
+                      <i class="fas fa-square-check"></i> Enable Dithering
+                    </span>
+                    <div class="resize-advanced-description">
+                      Apply error diffusion or ordered dithering to smooth color transitions
+                    </div>
+                  </div>
+                  <input type="checkbox" id="enableDitheringToggle" ${state.ditheringEnabled ? 'checked' : ''} class="resize-advanced-checkbox" />
+                </label>
+                
+                <!-- Dithering Method -->
+                <div id="ditheringMethodControl" style="display: ${state.ditheringEnabled ? 'block' : 'none'}; margin-bottom: 15px;">
+                  <label class="resize-advanced-label" style="margin-bottom: 8px; display: block;">
+                    <span class="resize-advanced-label-text" style="font-size: 13px;">Dithering Method</span>
+                  </label>
+                  <select id="ditheringMethodSelect" class="resize-advanced-select">
+                    <optgroup label="❯ Error Diffusion (High Quality)">
+                      <option value="floyd">Floyd-Steinberg - Classic balanced</option>
+                      <option value="atkinson">Atkinson - Soft, preserves highlights</option>
+                      <option value="jarvis">Jarvis - Wide diffusion, smooth</option>
+                      <option value="stucki">Stucki - Similar to Jarvis</option>
+                      <option value="burkes">Burkes - Fast quality</option>
+                      <option value="sierra">Sierra - High detail</option>
+                      <option value="twosierra">Two-Row Sierra - Faster</option>
+                      <option value="sierralite">Sierra Lite - Minimal, fastest</option>
+                      <option value="falsefloydsteinberg">False Floyd-Steinberg - Simple fast</option>
+                    </optgroup>
+                    <optgroup label="❯ Ordered Dithering (Patterned)">
+                      <option value="bayer2">Bayer 2×2 - Coarse checkerboard</option>
+                      <option value="bayer4">Bayer 4×4 - Medium halftone</option>
+                      <option value="bayer8">Bayer 8×8 - Fine halftone</option>
+                      <option value="random">Random Noise - Stochastic</option>
+                    </optgroup>
+                  </select>
+                  <div class="resize-advanced-description" style="margin-top: 6px; font-size: 11px;">
+                    <strong>Error Diffusion:</strong> Natural, no visible patterns<br>
+                    <strong>Ordered:</strong> Faster, visible patterns (adjustable strength)
+                  </div>
+                </div>
+                
+                <!-- Dithering Strength (Ordered methods only) -->
+                <div id="ditheringStrengthControl" style="display: none; margin-bottom: 15px;">
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                    <span><i class="fas fa-sliders"></i> Dithering Strength</span>
+                    <span id="ditheringStrengthValue" class="resize-slider-value">50%</span>
+                  </label>
+                  <input type="range" id="ditheringStrengthSlider" class="resize-slider" min="0" max="100" value="50" step="1">
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    Controls pattern intensity (ordered methods only)
+                  </div>
+                </div>
+                
+                <!-- Posterize Levels -->
+                <div id="posterizeLevelsControl" style="display: ${state.ditheringEnabled ? 'block' : 'none'}; margin-bottom: 15px;">
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                    <span><i class="fas fa-layer-group"></i> Posterize Levels</span>
+                    <span id="posterizeLevelsValue" class="resize-slider-value">Disabled</span>
+                  </label>
+                  <input type="range" id="posterizeLevelsSlider" class="resize-slider" min="0" max="10" value="0" step="1">
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    <strong>0:</strong> Disabled (full colors)<br>
+                    <strong>2-4:</strong> Artistic posterization<br>
+                    <strong>5-10:</strong> Subtle color reduction
+                  </div>
+                </div>
+
+                <!-- Dithering Info -->
+                <div class="resize-advanced-description" style="background: rgba(79, 172, 254, 0.1); padding: 10px; border-radius: 6px; border-left: 3px solid #4facfe; margin-top: 10px;">
+                  <i class="fas fa-info-circle"></i> <strong>Tip:</strong> Dithering smooths gradients and reduces color banding. Error diffusion is best for photos, ordered dithering for retro/artistic effects.
+                </div>
+              </div>
+            </div>
+
+            <!-- Post-Processing Section -->
+            <div class="wplace-section resize-advanced-color-section" id="postprocessing-section">
+              <div class="wplace-section-title">
+                <i class="fas fa-sliders-h"></i>&nbsp;Post-Processing
+              </div>
+              <div class="resize-advanced-controls">
+                
+                <!-- Edge Overlay -->
+                <label class="resize-advanced-toggle">
+                  <div class="resize-advanced-toggle-content">
+                    <span class="resize-advanced-label-text">Edge Overlay</span>
+                    <div class="resize-advanced-description">Highlight edges with black outlines</div>
+                  </div>
+                  <input type="checkbox" id="enableEdgeOverlayToggle" class="resize-advanced-checkbox" />
+                </label>
+
+                <!-- Edge Detection Algorithm (shown when Edge Overlay is enabled) -->
+                <div id="edgeAlgorithmControl" style="margin-bottom: 12px; display: none;">
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px;">
+                    <span>Edge Detection Algorithm</span>
+                  </label>
+                  <select id="edgeDetectionAlgorithmSelect" class="resize-slider" style="width: 100%; padding: 6px 8px; border-radius: 4px; border: 1px solid #aaa; background: #f5f5f5; cursor: pointer;">
+                    <option value="sobel">Sobel (Sensitive to Edges)</option>
+                    <option value="prewitt">Prewitt (Balanced)</option>
+                    <option value="roberts">Roberts (Fast)</option>
+                    <option value="laplacian">Laplacian (Zero Crossing)</option>
+                  </select>
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    Choose edge detection method: Sobel (best), Prewitt (balanced), Roberts (fast), Laplacian (zerocross)
+                  </div>
+                </div>
+
+                <!-- Edge Threshold (shown when Edge Overlay is enabled) -->
+                <div id="edgeThresholdControl" style="margin-bottom: 12px; display: none;">
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                    <span>Edge Threshold</span>
+                    <span id="edgeThresholdValue" class="resize-slider-value">60</span>
+                  </label>
+                  <input type="range" id="edgeThresholdSlider" class="resize-slider" min="0" max="255" value="60" step="1">
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    Edge detection sensitivity (0=subtle, 255=strong)
+                  </div>
+                </div>
+
+                <!-- Edge Thickness (shown when Edge Overlay is enabled) -->
+                <div id="edgeThicknessControl" style="margin-bottom: 12px; display: none;">
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                    <span>Edge Thickness</span>
+                    <span id="edgeThicknessValue" class="resize-slider-value">1</span>
+                  </label>
+                  <input type="range" id="edgeThicknessSlider" class="resize-slider" min="1" max="6" value="1" step="1">
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    Edge line width in pixels (1-6)
+                  </div>
+                </div>
+
+                <!-- Edge Thin Toggle (shown when Edge Overlay is enabled) -->
+                <div id="edgeThinControl" style="margin-bottom: 12px; display: none;">
+                  <label class="resize-slider-label" style="font-size: 13px;">
+                    <input type="checkbox" id="edgeThinToggle" class="resize-advanced-checkbox" />
+                    <span>Thin Edges</span>
+                  </label>
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    Post-process to make edges exactly 1 pixel thin
+                  </div>
+                </div>
+
+                <!-- Increase Outline -->
+                <div style="margin-bottom: 12px;">
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                    <span>Increase Outline</span>
+                    <span id="outlineThicknessValue" class="resize-slider-value">0</span>
+                  </label>
+                  <input type="range" id="outlineThicknessSlider" class="resize-slider" min="0" max="8" value="0" step="1">
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    Thickness of black outline around edges (0-8 pixels)
+                  </div>
+                </div>
+
+                <!-- Simplify Regions -->
+                <div style="margin-bottom: 12px;">
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                    <span>Simplify Regions (px)</span>
+                    <span id="simplifyAreaValue" class="resize-slider-value">0</span>
+                  </label>
+                  <input type="range" id="simplifyAreaSlider" class="resize-slider" min="0" max="500" value="0" step="10">
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    Merge small regions to reduce complexity (0-500 pixels)
+                  </div>
+                </div>
+
+                <!-- Erode Edges -->
+                <div style="margin-bottom: 12px;">
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                    <span>Erode Edges</span>
+                    <span id="erodeAmountValue" class="resize-slider-value">0</span>
+                  </label>
+                  <input type="range" id="erodeAmountSlider" class="resize-slider" min="0" max="8" value="0" step="1">
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    Shrink edges inward to reduce noise (0-8 pixels)
+                  </div>
+                </div>
+
+                <!-- Mode Filter Size -->
+                <div style="margin-bottom: 12px;">
+                  <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                    <span>Mode Filter (N×N)</span>
+                    <span id="modeFilterValue" class="resize-slider-value">0</span>
+                  </label>
+                  <input type="range" id="modeFilterSlider" class="resize-slider" min="0" max="10" value="0" step="1">
+                  <div class="resize-advanced-description" style="font-size: 11px; margin-top: 4px;">
+                    Median filter to smooth regions (0 = off, 1-10 = filter radius)
+                  </div>
+                </div>
+
+              </div>
+            </div>
+
+            <!-- Color Correction Section -->
+            <div class="wplace-section resize-advanced-color-section" id="colorcorrection-section">
+              <div class="wplace-section-title">
+                <i class="fas fa-palette"></i>&nbsp;Color Correction
+              </div>
+              <div class="resize-advanced-controls">
+                
+                <!-- Color Correction Toggle -->
+                <label class="resize-advanced-toggle">
+                  <div class="resize-advanced-toggle-content">
+                    <span class="resize-advanced-label-text">Enable Color Correction</span>
+                    <div class="resize-advanced-description">Adjust brightness, contrast, saturation, hue, gamma</div>
+                  </div>
+                  <input type="checkbox" id="enableColorCorrectionToggle" class="resize-advanced-checkbox" />
+                </label>
+
+                <!-- Color Correction Controls (hidden by default) -->
+                <div id="colorCorrectionControls" style="display: none;">
+                  <!-- Brightness -->
+                  <div style="margin-bottom: 12px;">
+                    <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                      <span>Brightness (-100 to 100)</span>
+                      <span id="brightnessValue" class="resize-slider-value">0</span>
+                    </label>
+                    <input type="range" id="brightnessSlider" class="resize-slider" min="-100" max="100" value="0" step="1">
+                  </div>
+
+                  <!-- Contrast -->
+                  <div style="margin-bottom: 12px;">
+                    <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                      <span>Contrast (-100 to 100)</span>
+                      <span id="contrastValue" class="resize-slider-value">0</span>
+                    </label>
+                    <input type="range" id="contrastSlider" class="resize-slider" min="-100" max="100" value="0" step="1">
+                  </div>
+
+                  <!-- Saturation -->
+                  <div style="margin-bottom: 12px;">
+                    <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                      <span>Saturation (-100 to 100)</span>
+                      <span id="saturationValue" class="resize-slider-value">0</span>
+                    </label>
+                    <input type="range" id="saturationSlider" class="resize-slider" min="-100" max="100" value="0" step="1">
+                  </div>
+
+                  <!-- Hue -->
+                  <div style="margin-bottom: 12px;">
+                    <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                      <span>Hue Shift (-180 to 180°)</span>
+                      <span id="hueValue" class="resize-slider-value">0°</span>
+                    </label>
+                    <input type="range" id="hueSlider" class="resize-slider" min="-180" max="180" value="0" step="1">
+                  </div>
+
+                  <!-- Gamma -->
+                  <div style="margin-bottom: 12px;">
+                    <label class="resize-slider-label" style="font-size: 13px; margin-bottom: 5px; display: flex; justify-content: space-between;">
+                      <span>Gamma (0.5 to 3.0)</span>
+                      <span id="gammaValue" class="resize-slider-value">1.0</span>
+                    </label>
+                    <input type="range" id="gammaSlider" class="resize-slider" min="0.5" max="3.0" value="1.0" step="0.1">
+                  </div>
+                </div>
+
+              </div>
+            </div>
+
+            <!-- Advanced Color Matching Section -->
+            <div class="wplace-section resize-advanced-color-section" id="advanced-color-section">
+              <div class="wplace-section-title">
+                <i class="fas fa-flask"></i>&nbsp;Advanced Color Matching
+              </div>
+              <div class="resize-advanced-controls">
+                <label class="resize-advanced-label">
+                  <span class="resize-advanced-label-text">Algorithm</span>
+                  <select id="colorAlgorithmSelect" class="resize-advanced-select">
+                    <option value="lab" ${state.colorMatchingAlgorithm === 'lab' ? 'selected' : ''
       }>Perceptual (Lab)</option>
-            <option value="legacy" ${state.colorMatchingAlgorithm === 'legacy' ? 'selected' : ''
+                  <option value="legacy" ${state.colorMatchingAlgorithm === 'legacy' ? 'selected' : ''
       }>Legacy (RGB)</option>
-            <option value="hsv" ${state.colorMatchingAlgorithm === 'hsv' ? 'selected' : ''
+                  <option value="hsv" ${state.colorMatchingAlgorithm === 'hsv' ? 'selected' : ''
       }>HSV (Hue-Saturation-Value)</option>
-            <option value="hsl" ${state.colorMatchingAlgorithm === 'hsl' ? 'selected' : ''
+                  <option value="hsl" ${state.colorMatchingAlgorithm === 'hsl' ? 'selected' : ''
       }>HSL (Hue-Saturation-Lightness)</option>
-            <option value="xyz" ${state.colorMatchingAlgorithm === 'xyz' ? 'selected' : ''
+                  <option value="xyz" ${state.colorMatchingAlgorithm === 'xyz' ? 'selected' : ''
       }>XYZ (CIE Color Space)</option>
-            <option value="luv" ${state.colorMatchingAlgorithm === 'luv' ? 'selected' : ''
+                  <option value="luv" ${state.colorMatchingAlgorithm === 'luv' ? 'selected' : ''
       }>LUV (CIE L*u*v*)</option>
-            <option value="yuv" ${state.colorMatchingAlgorithm === 'yuv' ? 'selected' : ''
+                  <option value="yuv" ${state.colorMatchingAlgorithm === 'yuv' ? 'selected' : ''
       }>YUV (Luma-Chroma)</option>
-            <option value="oklab" ${state.colorMatchingAlgorithm === 'oklab' ? 'selected' : ''
+                  <option value="oklab" ${state.colorMatchingAlgorithm === 'oklab' ? 'selected' : ''
       }>Oklab (Perceptual Uniform)</option>
-            <option value="lch" ${state.colorMatchingAlgorithm === 'lch' ? 'selected' : ''
+                  <option value="lch" ${state.colorMatchingAlgorithm === 'lch' ? 'selected' : ''
       }>LCH (Lightness-Chroma-Hue)</option>
-            </select>
-          </label>
-          <label class="resize-advanced-toggle">
-            <div class="resize-advanced-toggle-content">
-              <span class="resize-advanced-label-text">Chroma Penalty</span>
-              <div class="resize-advanced-description">Preserve vivid colors (Lab only)</div>
-            </div>
-            <input type="checkbox" id="enableChromaPenaltyToggle" ${state.enableChromaPenalty ? 'checked' : ''
+                  </select>
+                </label>
+                <label class="resize-advanced-toggle">
+                  <div class="resize-advanced-toggle-content">
+                    <span class="resize-advanced-label-text">Chroma Penalty</span>
+                    <div class="resize-advanced-description">Preserve vivid colors (Lab only)</div>
+                  </div>
+                  <input type="checkbox" id="enableChromaPenaltyToggle" ${state.enableChromaPenalty ? 'checked' : ''
       } class="resize-advanced-checkbox" />
-          </label>
-          <div class="resize-chroma-weight-control">
-            <div class="resize-chroma-weight-header">
-              <span>${Utils.t('chromaWeight')}</span>
-              <span id="chromaWeightValue" class="resize-chroma-weight-value">${state.chromaPenaltyWeight}</span>
+                </label>
+                <div class="resize-chroma-weight-control">
+                  <div class="resize-chroma-weight-header">
+                    <span>${Utils.t('chromaWeight')}</span>
+                    <span id="chromaWeightValue" class="resize-chroma-weight-value">${state.chromaPenaltyWeight}</span>
+                  </div>
+                  <input type="range" id="chromaPenaltyWeightSlider" min="0" max="0.5" step="0.01" value="${state.chromaPenaltyWeight}" class="resize-chroma-weight-slider" />
+                </div>
+                
+                <div class="resize-threshold-controls">
+                  <label class="resize-threshold-label">
+                    <span class="resize-advanced-label-text">Transparency</span>
+                    <input type="number" id="transparencyThresholdInput" min="0" max="255" value="${state.customTransparencyThreshold}" class="resize-threshold-input" />
+                  </label>
+                  <label class="resize-threshold-label">
+                    <span class="resize-advanced-label-text">White Thresh</span>
+                    <input type="number" id="whiteThresholdInput" min="200" max="255" value="${state.customWhiteThreshold}" class="resize-threshold-input" />
+                  </label>
+                </div>
+                <button id="resetAdvancedColorBtn" class="wplace-btn resize-reset-advanced-btn">Reset Advanced</button>
+              </div>
             </div>
-            <input type="range" id="chromaPenaltyWeightSlider" min="0" max="0.5" step="0.01" value="${state.chromaPenaltyWeight}" class="resize-chroma-weight-slider" />
-          </div>
-          <label class="resize-advanced-toggle">
-            <div class="resize-advanced-toggle-content">
-              <span class="resize-advanced-label-text">Enable Dithering</span>
-              <div class="resize-advanced-description">Floyd–Steinberg error diffusion in preview and applied output</div>
-            </div>
-            <input type="checkbox" id="enableDitheringToggle" ${state.ditheringEnabled ? 'checked' : ''
-      } class="resize-advanced-checkbox" />
-          </label>
-          <div class="resize-threshold-controls">
-            <label class="resize-threshold-label">
-              <span class="resize-advanced-label-text">Transparency</span>
-              <input type="number" id="transparencyThresholdInput" min="0" max="255" value="${state.customTransparencyThreshold}" class="resize-threshold-input" />
-            </label>
-            <label class="resize-threshold-label">
-              <span class="resize-advanced-label-text">White Thresh</span>
-              <input type="number" id="whiteThresholdInput" min="200" max="255" value="${state.customWhiteThreshold}" class="resize-threshold-input" />
-            </label>
-          </div>
-          <button id="resetAdvancedColorBtn" class="wplace-btn resize-reset-advanced-btn">Reset Advanced</button>
-        </div>
-      </div>
 
-      <div class="resize-buttons">
-        <button id="downloadPreviewBtn" class="wplace-btn wplace-btn-primary">
-          <i class="fas fa-download"></i>
-          <span>${Utils.t('downloadPreview')}</span>
-        </button>
-        <button id="confirmResize" class="wplace-btn wplace-btn-start">
-          <i class="fas fa-check"></i>
-          <span>${Utils.t('apply')}</span>
-        </button>
-        <button id="cancelResize" class="wplace-btn wplace-btn-stop">
-          <i class="fas fa-times"></i>
-          <span>${Utils.t('cancel')}</span>
-        </button>
+            <!-- Action Buttons -->
+            <div class="resize-buttons">
+              <button id="downloadPreviewBtn" class="wplace-btn wplace-btn-primary">
+                <i class="fas fa-download"></i>
+                <span>${Utils.t('downloadPreview')}</span>
+              </button>
+              <button id="confirmResize" class="wplace-btn wplace-btn-start">
+                <i class="fas fa-check"></i>
+                <span>${Utils.t('apply')}</span>
+              </button>
+              <button id="cancelResize" class="wplace-btn wplace-btn-stop">
+                <i class="fas fa-times"></i>
+                <span>${Utils.t('cancel')}</span>
+              </button>
+            </div>
+            
+          </div>
+        </div>
+        
+        <!-- RIGHT COLUMN: Fixed Preview Panel with Zoom Controls -->
+        <div class="resize-preview-column">
+          <!-- Zoom Controls (fixed at top) -->
+          <div class="resize-preview-zoom-controls">
+            <button id="editImageBtn" class="wplace-btn resize-zoom-btn" title="Edit Artwork" style="margin-right: 10px; font-weight: bold;">
+              <i class="fas fa-paint-brush"></i> Edit Artwork✨🎨
+            </button>
+            <button id="zoomOutBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t(
+      'zoomOut'
+    )}"><i class="fas fa-search-minus"></i></button>
+            <input type="range" id="zoomSlider" class="resize-slider resize-zoom-slider" min="0.1" max="20" value="1" step="0.05">
+            <button id="zoomInBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t(
+      'zoomIn'
+    )}"><i class="fas fa-search-plus"></i></button>
+            <button id="zoomFitBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t(
+      'fitToView'
+    )}">${Utils.t('fit')}</button>
+            <button id="zoomActualBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t(
+      'actualSize'
+    )}">${Utils.t('hundred')}</button>
+            <button id="panModeBtn" class="wplace-btn resize-zoom-btn" title="${Utils.t('panMode')}">
+              <i class="fas fa-hand-paper"></i>
+            </button>
+            <span id="zoomValue" class="resize-zoom-value">100%</span>
+          </div>
+          
+          <!-- Preview Canvas (fills remaining space) -->
+          <div class="resize-preview-wrapper">
+            <div id="resizePanStage" class="resize-pan-stage">
+              <div id="resizeCanvasStack" class="resize-canvas-stack resize-canvas-positioned">
+                <canvas id="resizeCanvas" class="resize-base-canvas"></canvas>
+                <canvas id="maskCanvas" class="resize-mask-canvas"></canvas>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Help text (fixed at bottom) -->
+          <div id="cameraHelp" class="resize-camera-help">
+            WASD to pan • Mouse wheel to zoom • Drag to pan
+          </div>
+        </div>
+        
       </div>
     `;
 
@@ -4088,69 +4414,7 @@ localStorage.removeItem("lp");
         });
       }
 
-      // Batch mode controls
-      const batchModeSelect = settingsContainer.querySelector('#batchModeSelect');
-      const normalBatchControls = settingsContainer.querySelector('#normalBatchControls');
-      const randomBatchControls = settingsContainer.querySelector('#randomBatchControls');
-      const randomBatchMin = settingsContainer.querySelector('#randomBatchMin');
-      const randomBatchMax = settingsContainer.querySelector('#randomBatchMax');
-
-      if (batchModeSelect) {
-        batchModeSelect.addEventListener('change', (e) => {
-          state.batchMode = e.target.value;
-
-          // Switch between normal and random controls
-          if (normalBatchControls && randomBatchControls) {
-            if (e.target.value === 'random') {
-              normalBatchControls.style.display = 'none';
-              randomBatchControls.style.display = 'block';
-            } else {
-              normalBatchControls.style.display = 'block';
-              randomBatchControls.style.display = 'none';
-            }
-          }
-
-          saveBotSettings();
-          console.log(`📦 Batch mode changed to: ${state.batchMode}`);
-          Utils.showAlert(
-            Utils.t('batchModeSet', {
-              mode:
-                state.batchMode === 'random' ? Utils.t('randomRange') : Utils.t('normalFixedSize'),
-            }),
-            'success'
-          );
-        });
-      }
-
-      if (randomBatchMin) {
-        randomBatchMin.addEventListener('input', (e) => {
-          const min = parseInt(e.target.value);
-          if (min >= 1 && min <= 1000) {
-            state.randomBatchMin = min;
-            // Ensure min doesn't exceed max
-            if (randomBatchMax && min > state.randomBatchMax) {
-              state.randomBatchMax = min;
-              randomBatchMax.value = min;
-            }
-            saveBotSettings();
-          }
-        });
-      }
-
-      if (randomBatchMax) {
-        randomBatchMax.addEventListener('input', (e) => {
-          const max = parseInt(e.target.value);
-          if (max >= 1 && max <= 1000) {
-            state.randomBatchMax = max;
-            // Ensure max doesn't go below min
-            if (randomBatchMin && max < state.randomBatchMin) {
-              state.randomBatchMin = max;
-              randomBatchMin.value = max;
-            }
-            saveBotSettings();
-          }
-        });
-      }
+      // Batch controls removed - bot now uses all available charges automatically
 
       const languageSelect = settingsContainer.querySelector('#languageSelect');
       if (languageSelect) {
@@ -4181,10 +4445,7 @@ localStorage.removeItem("lp");
       const overlayOpacityValue = settingsContainer.querySelector('#overlayOpacityValue');
       const enableBlueMarbleToggle = settingsContainer.querySelector('#enableBlueMarbleToggle');
       const settingsPaintWhiteToggle = settingsContainer.querySelector('#settingsPaintWhiteToggle');
-      const settingsPaintTransparentToggle = settingsContainer.querySelector(
-        '#settingsPaintTransparentToggle'
-      );
-      const autoLoadProgressToggle = settingsContainer.querySelector('#autoLoadProgressToggle');
+      // settingsPaintTransparentToggle removed - use the one in Processing panel instead
 
       if (overlayOpacitySlider && overlayOpacityValue) {
         const updateOpacity = (newValue) => {
@@ -4215,73 +4476,10 @@ localStorage.removeItem("lp");
         });
       }
 
-      if (settingsPaintTransparentToggle) {
-        settingsPaintTransparentToggle.checked = state.paintTransparentPixels;
-        settingsPaintTransparentToggle.addEventListener('change', (e) => {
-          state.paintTransparentPixels = e.target.checked;
-          saveBotSettings();
-          console.log(
-            `🎨 Paint transparent pixels: ${state.paintTransparentPixels ? 'ON' : 'OFF'}`
-          );
-          const statusText = state.paintTransparentPixels
-            ? 'Transparent pixels in the template will be painted with the closest available color'
-            : 'Transparent pixels will be skipped';
-          Utils.showAlert(statusText, 'success');
-        });
-      }
+      // settingsPaintTransparentToggle removed - use the one in Processing panel instead
+      // autoLoadProgressToggle removed - auto-load feature disabled
 
-      if (autoLoadProgressToggle) {
-        autoLoadProgressToggle.checked = state.autoLoadProgress;
-        autoLoadProgressToggle.addEventListener('change', (e) => {
-          state.autoLoadProgress = !!e.target.checked;
-          saveBotSettings();
-          console.log(`🔄 Auto-load progress ${state.autoLoadProgress ? 'enabled' : 'disabled'}`);
-        });
-      }
-
-      // Speed controls - both slider and input
-      const speedSlider = settingsContainer.querySelector('#speedSlider');
-      const speedInput = settingsContainer.querySelector('#speedInput');
-      const speedDecrease = settingsContainer.querySelector('#speedDecrease');
-      const speedIncrease = settingsContainer.querySelector('#speedIncrease');
-      const speedValue = settingsContainer.querySelector('#speedValue');
-
-      if (speedSlider && speedInput && speedValue && speedDecrease && speedIncrease) {
-        const updateSpeed = (newValue) => {
-          const speed = Math.max(CONFIG.PAINTING_SPEED.MIN, Math.min(CONFIG.PAINTING_SPEED.MAX, parseInt(newValue)));
-          state.paintingSpeed = speed;
-
-          // Update both controls (value shows in input, label shows unit only)
-          speedSlider.value = speed;
-          speedInput.value = speed;
-          speedValue.textContent = `pixels`;
-
-          saveBotSettings();
-        };
-
-        // Slider event listener
-        speedSlider.addEventListener('input', (e) => {
-          updateSpeed(e.target.value);
-        });
-
-        // Number input event listener
-        speedInput.addEventListener('input', (e) => {
-          updateSpeed(e.target.value);
-        });
-
-        // Decrease button
-        speedDecrease.addEventListener('click', () => {
-          updateSpeed(parseInt(speedInput.value) - 1);
-        });
-
-        // Increase button
-        speedIncrease.addEventListener('click', () => {
-          updateSpeed(parseInt(speedInput.value) + 1);
-        });
-
-        // Add scroll-to-adjust for speed slider
-        Utils.createScrollToAdjust(speedSlider, updateSpeed, CONFIG.PAINTING_SPEED.MIN, CONFIG.PAINTING_SPEED.MAX, 1);
-      }
+      // Speed controls removed - bot now uses all available charges automatically
 
       if (enableBlueMarbleToggle) {
         enableBlueMarbleToggle.addEventListener('click', async () => {
@@ -4294,19 +4492,7 @@ localStorage.removeItem("lp");
         });
       }
 
-      // Speed control toggle
-      const enableSpeedToggle = settingsContainer.querySelector('#enableSpeedToggle');
-      if (enableSpeedToggle) {
-        enableSpeedToggle.addEventListener('change', (e) => {
-          CONFIG.PAINTING_SPEED_ENABLED = e.target.checked;
-          saveBotSettings();
-          console.log(`⚡ Batch speed control: ${CONFIG.PAINTING_SPEED_ENABLED ? 'ON' : 'OFF'}`);
-          const statusText = CONFIG.PAINTING_SPEED_ENABLED
-            ? 'Batch speed control enabled - will use configured batch size'
-            : 'Batch speed control disabled - will use all available charges immediately';
-          Utils.showAlert(statusText, 'success');
-        });
-      }
+      // Speed control toggle removed - bot now uses all available charges automatically
 
       // (Advanced color listeners moved outside to work with resize dialog)
       // (Advanced color listeners moved outside to work with resize dialog)
@@ -4339,6 +4525,7 @@ localStorage.removeItem("lp");
     const keepAspect = resizeContainer.querySelector('#keepAspect');
     const paintWhiteToggle = resizeContainer.querySelector('#paintWhiteToggle');
     const paintTransparentToggle = resizeContainer.querySelector('#paintTransparentToggle');
+    const resamplingMethodSelect = resizeContainer.querySelector('#resamplingMethodSelect');
     const zoomSlider = resizeContainer.querySelector('#zoomSlider');
     const zoomValue = resizeContainer.querySelector('#zoomValue');
     const zoomInBtn = resizeContainer.querySelector('#zoomInBtn');
@@ -4357,6 +4544,53 @@ localStorage.removeItem("lp");
     const editImageBtn = resizeContainer.querySelector('#editImageBtn');
     const downloadPreviewBtn = resizeContainer.querySelector('#downloadPreviewBtn');
     const clearIgnoredBtn = resizeContainer.querySelector('#clearIgnoredBtn');
+    
+    // Pre-processing controls
+    const preBlurModeSelect = resizeContainer.querySelector('#preBlurModeSelect');
+    const preBlurRadiusSlider = resizeContainer.querySelector('#preBlurRadiusSlider');
+    const blurRadiusValue = resizeContainer.querySelector('#blurRadiusValue');
+    const blurRadiusControl = resizeContainer.querySelector('#blurRadiusControl');
+    const sharpenAmountSlider = resizeContainer.querySelector('#sharpenAmountSlider');
+    const sharpenAmountValue = resizeContainer.querySelector('#sharpenAmountValue');
+    const sharpenRadiusSlider = resizeContainer.querySelector('#sharpenRadiusSlider');
+    const sharpenRadiusValue = resizeContainer.querySelector('#sharpenRadiusValue');
+    const sharpenRadiusControl = resizeContainer.querySelector('#sharpenRadiusControl');
+    const sharpenThresholdSlider = resizeContainer.querySelector('#sharpenThresholdSlider');
+    const sharpenThresholdValue = resizeContainer.querySelector('#sharpenThresholdValue');
+    const sharpenThresholdControl = resizeContainer.querySelector('#sharpenThresholdControl');
+    
+    // Set initial resampling method value
+    if (resamplingMethodSelect) {
+      resamplingMethodSelect.value = state.resamplingMethod;
+    }
+    
+    // Set initial pre-processing values
+    if (preBlurModeSelect) {
+      preBlurModeSelect.value = state.preBlurMode;
+      if (state.preBlurMode !== 'none' && blurRadiusControl) {
+        blurRadiusControl.style.display = 'block';
+      }
+    }
+    if (preBlurRadiusSlider && blurRadiusValue) {
+      preBlurRadiusSlider.value = state.preBlurRadius;
+      blurRadiusValue.textContent = state.preBlurRadius;
+    }
+    if (sharpenAmountSlider && sharpenAmountValue) {
+      sharpenAmountSlider.value = state.sharpenAmount;
+      sharpenAmountValue.textContent = state.sharpenAmount;
+      if (state.sharpenAmount > 0) {
+        if (sharpenRadiusControl) sharpenRadiusControl.style.display = 'block';
+        if (sharpenThresholdControl) sharpenThresholdControl.style.display = 'block';
+      }
+    }
+    if (sharpenRadiusSlider && sharpenRadiusValue) {
+      sharpenRadiusSlider.value = state.sharpenRadius;
+      sharpenRadiusValue.textContent = state.sharpenRadius;
+    }
+    if (sharpenThresholdSlider && sharpenThresholdValue) {
+      sharpenThresholdSlider.value = state.sharpenThreshold;
+      sharpenThresholdValue.textContent = state.sharpenThreshold;
+    }
 
     // Coordinate generation controls with smart visibility
     const coordinateModeSelect = settingsContainer.querySelector('#coordinateModeSelect');
@@ -4840,12 +5074,12 @@ localStorage.removeItem("lp");
         // Updated estimation calculation for new cooldown logic
         // Now we wait for cooldownChargeThreshold before processing pixels
 
-        // Calculate batch size (with fallback if function not yet defined)
+        // Calculate batch size - bot now uses all available charges
         let batchSize;
         try {
-          batchSize = typeof calculateBatchSize === 'function' ? calculateBatchSize() : state.paintingSpeed || 5;
+          batchSize = typeof calculateBatchSize === 'function' ? calculateBatchSize() : state.displayCharges || 1;
         } catch (e) {
-          batchSize = state.paintingSpeed || 5;
+          batchSize = state.displayCharges || 1;
         }
 
         // Ensure batchSize is valid and not zero
@@ -4876,11 +5110,7 @@ localStorage.removeItem("lp");
             estimatedMs += regenerationTime;
           }
 
-          // Add painting speed delay if enabled
-          if (CONFIG.PAINTING_SPEED_ENABLED && state.paintingSpeed > 0) {
-            const paintingDelay = remainingPixels * (1000 / state.paintingSpeed);
-            estimatedMs += paintingDelay;
-          }
+          // Painting speed delay removed - bot now uses all available charges immediately
         }
 
         // Safety check to prevent infinity or invalid values
@@ -5121,11 +5351,58 @@ localStorage.removeItem("lp");
       document.getElementById('closeMovePanel').addEventListener('click', closeMovePanel);
     }
 
-    function showResizeDialog(processor) {
+    function showResizeDialog(processor, isNewImage = false) {
+      // ========================================
+      // RESET ALL PROCESSING SETTINGS TO DEFAULT
+      // (Only when a NEW image is uploaded)
+      // ========================================
+      if (isNewImage) {
+        console.log('🔄 Resetting ALL processing settings to default (new template uploaded)...');
+        
+        // Dithering settings
+        state.ditheringEnabled = false;
+        state.ditheringMethod = 'floyd';
+        state.ditheringStrength = 0.5;
+        state.posterizeLevels = 0;
+        
+        // Pre-processing settings
+        state.preBlurMode = 'none';
+        state.preBlurRadius = 0;
+        state.sharpenAmount = 0;
+        state.sharpenRadius = 0;
+        state.sharpenThreshold = 0;
+        
+        // Resampling and color matching
+        state.resamplingMethod = 'nearest';
+        state.colorMatchingAlgorithm = 'rgb';  // Default to Legacy (RGB)
+        state.enableChromaPenalty = false;      // Chroma penalty OFF by default
+        state.chromaPenaltyWeight = 0.15;
+        
+        // Post-processing settings
+        state.enableEdgeOverlay = false;
+        state.outlineThickness = 0;
+        state.simplifyArea = 0;
+        state.erodeAmount = 0;
+        state.modeFilterSize = 0;
+        
+        // Color correction settings
+        state.enableColorCorrection = false;
+        state.brightness = 0;
+        state.contrast = 0;
+        state.saturation = 0;
+        state.hue = 0;
+        state.gamma = 1.0;
+        
+        console.log('✅ Processing settings reset - All OFF, Color Algorithm: RGB');
+      } else {
+        console.log('📂 Reopening processing panel - preserving existing settings');
+      }
+      
       let baseProcessor = processor;
       let width, height;
       if (state.originalImage?.dataUrl) {
-        baseProcessor = new ImageProcessor(state.originalImage.dataUrl);
+        // Use global WPlaceImageProcessor which has resampleImage method
+        baseProcessor = new window.WPlaceImageProcessor(state.originalImage.dataUrl);
         width = state.originalImage.width;
         height = state.originalImage.height;
       } else {
@@ -5168,6 +5445,277 @@ localStorage.removeItem("lp");
       paintWhiteToggle.checked = state.paintWhitePixels;
       paintTransparentToggle.checked = state.paintTransparentPixels;
 
+      // Reset UI elements to match default processing settings (only on new image)
+      if (isNewImage) {
+        setTimeout(() => {
+          // Dithering controls
+          const ditherToggle = document.getElementById('enableDitheringToggle');
+          if (ditherToggle) {
+            ditherToggle.checked = false;
+            const methodControl = document.getElementById('ditheringMethodControl');
+            const posterizeControl = document.getElementById('posterizeLevelsControl');
+            const strengthControl = document.getElementById('ditheringStrengthControl');
+            if (methodControl) methodControl.style.display = 'none';
+            if (posterizeControl) posterizeControl.style.display = 'none';
+            if (strengthControl) strengthControl.style.display = 'none';
+          }
+          
+          const ditheringMethodSelect = document.getElementById('ditheringMethodSelect');
+          if (ditheringMethodSelect) ditheringMethodSelect.value = 'floyd';
+          
+          const ditheringStrengthSlider = document.getElementById('ditheringStrengthSlider');
+          const ditheringStrengthValue = document.getElementById('ditheringStrengthValue');
+          if (ditheringStrengthSlider && ditheringStrengthValue) {
+            ditheringStrengthSlider.value = 50;
+            ditheringStrengthValue.textContent = '50%';
+          }
+          
+          const posterizeLevelsSlider = document.getElementById('posterizeLevelsSlider');
+          const posterizeLevelsValue = document.getElementById('posterizeLevelsValue');
+          if (posterizeLevelsSlider && posterizeLevelsValue) {
+            posterizeLevelsSlider.value = 0;
+            posterizeLevelsValue.textContent = 'Disabled';
+          }
+          
+          // Pre-processing controls
+          const preBlurModeSelect = document.getElementById('preBlurModeSelect');
+          const blurRadiusControl = document.getElementById('blurRadiusControl');
+          if (preBlurModeSelect) {
+            preBlurModeSelect.value = 'none';
+            if (blurRadiusControl) blurRadiusControl.style.display = 'none';
+          }
+          
+          const preBlurRadiusSlider = document.getElementById('preBlurRadiusSlider');
+          const blurRadiusValue = document.getElementById('blurRadiusValue');
+          if (preBlurRadiusSlider && blurRadiusValue) {
+            preBlurRadiusSlider.value = 0;
+            blurRadiusValue.textContent = '0';
+          }
+          
+          const sharpenAmountSlider = document.getElementById('sharpenAmountSlider');
+          const sharpenAmountValue = document.getElementById('sharpenAmountValue');
+          const sharpenRadiusControl = document.getElementById('sharpenRadiusControl');
+          const sharpenThresholdControl = document.getElementById('sharpenThresholdControl');
+          if (sharpenAmountSlider && sharpenAmountValue) {
+            sharpenAmountSlider.value = 0;
+            sharpenAmountValue.textContent = '0';
+            if (sharpenRadiusControl) sharpenRadiusControl.style.display = 'none';
+            if (sharpenThresholdControl) sharpenThresholdControl.style.display = 'none';
+          }
+          
+          const sharpenRadiusSlider = document.getElementById('sharpenRadiusSlider');
+          const sharpenRadiusValue = document.getElementById('sharpenRadiusValue');
+          if (sharpenRadiusSlider && sharpenRadiusValue) {
+            sharpenRadiusSlider.value = 0;
+            sharpenRadiusValue.textContent = '0';
+          }
+          
+          const sharpenThresholdSlider = document.getElementById('sharpenThresholdSlider');
+          const sharpenThresholdValue = document.getElementById('sharpenThresholdValue');
+          if (sharpenThresholdSlider && sharpenThresholdValue) {
+            sharpenThresholdSlider.value = 0;
+            sharpenThresholdValue.textContent = '0';
+          }
+          
+          // Resampling method
+          const resamplingMethodSelect = document.getElementById('resamplingMethodSelect');
+          if (resamplingMethodSelect) resamplingMethodSelect.value = 'nearest';
+          
+          // Advanced color matching - RESET TO DEFAULT (RGB, no chroma)
+          const colorAlgorithmSelect = document.getElementById('colorAlgorithmSelect');
+          if (colorAlgorithmSelect) colorAlgorithmSelect.value = 'rgb';
+          
+          const chromaPenaltyToggle = document.getElementById('enableChromaPenaltyToggle');
+          if (chromaPenaltyToggle) chromaPenaltyToggle.checked = false;
+          
+          const chromaPenaltyWeightSlider = document.getElementById('chromaPenaltyWeightSlider');
+          const chromaWeightValue = document.getElementById('chromaWeightValue');
+          if (chromaPenaltyWeightSlider && chromaWeightValue) {
+            chromaPenaltyWeightSlider.value = 0.15;
+            chromaWeightValue.textContent = '0.15';
+          }
+          
+          // Post-processing controls
+          const enableEdgeOverlayToggle = document.getElementById('enableEdgeOverlayToggle');
+          if (enableEdgeOverlayToggle) enableEdgeOverlayToggle.checked = false;
+          
+          const edgeAlgorithmControl = document.getElementById('edgeAlgorithmControl');
+          if (edgeAlgorithmControl) edgeAlgorithmControl.style.display = 'none';
+          
+          const edgeDetectionAlgorithmSelect = document.getElementById('edgeDetectionAlgorithmSelect');
+          if (edgeDetectionAlgorithmSelect) edgeDetectionAlgorithmSelect.value = 'sobel';
+          
+          const outlineThicknessSlider = document.getElementById('outlineThicknessSlider');
+          const outlineThicknessValue = document.getElementById('outlineThicknessValue');
+          if (outlineThicknessSlider && outlineThicknessValue) {
+            outlineThicknessSlider.value = 0;
+            outlineThicknessValue.textContent = '0';
+          }
+          
+          const simplifyAreaSlider = document.getElementById('simplifyAreaSlider');
+          const simplifyAreaValue = document.getElementById('simplifyAreaValue');
+          if (simplifyAreaSlider && simplifyAreaValue) {
+            simplifyAreaSlider.value = 0;
+            simplifyAreaValue.textContent = '0';
+          }
+          
+          const erodeAmountSlider = document.getElementById('erodeAmountSlider');
+          const erodeAmountValue = document.getElementById('erodeAmountValue');
+          if (erodeAmountSlider && erodeAmountValue) {
+            erodeAmountSlider.value = 0;
+            erodeAmountValue.textContent = '0';
+          }
+          
+          const modeFilterSlider = document.getElementById('modeFilterSlider');
+          const modeFilterValue = document.getElementById('modeFilterValue');
+          if (modeFilterSlider && modeFilterValue) {
+            modeFilterSlider.value = 0;
+            modeFilterValue.textContent = '0';
+          }
+          
+          // Color correction controls
+          const enableColorCorrectionToggle = document.getElementById('enableColorCorrectionToggle');
+          if (enableColorCorrectionToggle) enableColorCorrectionToggle.checked = false;
+          
+          const colorCorrectionControls = document.getElementById('colorCorrectionControls');
+          if (colorCorrectionControls) colorCorrectionControls.style.display = 'none';
+          
+          const brightnessSlider = document.getElementById('brightnessSlider');
+          const brightnessValue = document.getElementById('brightnessValue');
+          if (brightnessSlider && brightnessValue) {
+            brightnessSlider.value = 0;
+            brightnessValue.textContent = '0';
+          }
+          
+          const contrastSlider = document.getElementById('contrastSlider');
+          const contrastValue = document.getElementById('contrastValue');
+          if (contrastSlider && contrastValue) {
+            contrastSlider.value = 0;
+            contrastValue.textContent = '0';
+          }
+          
+          const saturationSlider = document.getElementById('saturationSlider');
+          const saturationValue = document.getElementById('saturationValue');
+          if (saturationSlider && saturationValue) {
+            saturationSlider.value = 0;
+            saturationValue.textContent = '0';
+          }
+          
+          const hueSlider = document.getElementById('hueSlider');
+          const hueValue = document.getElementById('hueValue');
+          if (hueSlider && hueValue) {
+            hueSlider.value = 0;
+            hueValue.textContent = '0°';
+          }
+          
+          const gammaSlider = document.getElementById('gammaSlider');
+          const gammaValue = document.getElementById('gammaValue');
+          if (gammaSlider && gammaValue) {
+            gammaSlider.value = 1.0;
+            gammaValue.textContent = '1.0';
+          }
+          
+          console.log('✅ UI elements reset - All controls to default, Color Algorithm: RGB, Chroma OFF, Post-Processing OFF, Color Correction OFF');
+        }, 100);
+      } else {
+        // Panel reopened - just sync UI with current state
+        setTimeout(() => {
+          // Update all sliders to match current state values
+          const ditheringStrengthSlider = document.getElementById('ditheringStrengthSlider');
+          const ditheringStrengthValue = document.getElementById('ditheringStrengthValue');
+          if (ditheringStrengthSlider && ditheringStrengthValue) {
+            ditheringStrengthSlider.value = Math.round(state.ditheringStrength * 100);
+            ditheringStrengthValue.textContent = `${Math.round(state.ditheringStrength * 100)}%`;
+          }
+          
+          const posterizeLevelsSlider = document.getElementById('posterizeLevelsSlider');
+          const posterizeLevelsValue = document.getElementById('posterizeLevelsValue');
+          if (posterizeLevelsSlider && posterizeLevelsValue) {
+            posterizeLevelsSlider.value = state.posterizeLevels;
+            posterizeLevelsValue.textContent = state.posterizeLevels === 0 ? 'Disabled' : state.posterizeLevels;
+          }
+          
+          const preBlurRadiusSlider = document.getElementById('preBlurRadiusSlider');
+          const blurRadiusValue = document.getElementById('blurRadiusValue');
+          if (preBlurRadiusSlider && blurRadiusValue) {
+            preBlurRadiusSlider.value = state.preBlurRadius;
+            blurRadiusValue.textContent = state.preBlurRadius;
+          }
+          
+          const sharpenAmountSlider = document.getElementById('sharpenAmountSlider');
+          const sharpenAmountValue = document.getElementById('sharpenAmountValue');
+          if (sharpenAmountSlider && sharpenAmountValue) {
+            sharpenAmountSlider.value = state.sharpenAmount;
+            sharpenAmountValue.textContent = state.sharpenAmount;
+          }
+          
+          const outlineThicknessSlider = document.getElementById('outlineThicknessSlider');
+          const outlineThicknessValue = document.getElementById('outlineThicknessValue');
+          if (outlineThicknessSlider && outlineThicknessValue) {
+            outlineThicknessSlider.value = state.outlineThickness;
+            outlineThicknessValue.textContent = state.outlineThickness;
+          }
+          
+          const simplifyAreaSlider = document.getElementById('simplifyAreaSlider');
+          const simplifyAreaValue = document.getElementById('simplifyAreaValue');
+          if (simplifyAreaSlider && simplifyAreaValue) {
+            simplifyAreaSlider.value = state.simplifyArea;
+            simplifyAreaValue.textContent = state.simplifyArea;
+          }
+          
+          const erodeAmountSlider = document.getElementById('erodeAmountSlider');
+          const erodeAmountValue = document.getElementById('erodeAmountValue');
+          if (erodeAmountSlider && erodeAmountValue) {
+            erodeAmountSlider.value = state.erodeAmount;
+            erodeAmountValue.textContent = state.erodeAmount;
+          }
+          
+          const modeFilterSlider = document.getElementById('modeFilterSlider');
+          const modeFilterValue = document.getElementById('modeFilterValue');
+          if (modeFilterSlider && modeFilterValue) {
+            modeFilterSlider.value = state.modeFilterSize;
+            modeFilterValue.textContent = state.modeFilterSize;
+          }
+          
+          const brightnessSlider = document.getElementById('brightnessSlider');
+          const brightnessValue = document.getElementById('brightnessValue');
+          if (brightnessSlider && brightnessValue) {
+            brightnessSlider.value = state.brightness;
+            brightnessValue.textContent = state.brightness;
+          }
+          
+          const contrastSlider = document.getElementById('contrastSlider');
+          const contrastValue = document.getElementById('contrastValue');
+          if (contrastSlider && contrastValue) {
+            contrastSlider.value = state.contrast;
+            contrastValue.textContent = state.contrast;
+          }
+          
+          const saturationSlider = document.getElementById('saturationSlider');
+          const saturationValue = document.getElementById('saturationValue');
+          if (saturationSlider && saturationValue) {
+            saturationSlider.value = state.saturation;
+            saturationValue.textContent = state.saturation;
+          }
+          
+          const hueSlider = document.getElementById('hueSlider');
+          const hueValue = document.getElementById('hueValue');
+          if (hueSlider && hueValue) {
+            hueSlider.value = state.hue;
+            hueValue.textContent = state.hue + '°';
+          }
+          
+          const gammaSlider = document.getElementById('gammaSlider');
+          const gammaValue = document.getElementById('gammaValue');
+          if (gammaSlider && gammaValue) {
+            gammaSlider.value = state.gamma;
+            gammaValue.textContent = state.gamma.toFixed(1);
+          }
+          
+          console.log('📂 UI synced with current state - settings preserved');
+        }, 100);
+      }
+
       let _previewTimer = null;
       let _previewJobId = 0;
       let _isDraggingSize = false;
@@ -5239,6 +5787,60 @@ localStorage.removeItem("lp");
         // Ensure overlay buffers exist and rebuild from mask when dimensions change
         _ensureMaskOverlayBuffers(w, h, true);
       };
+      
+      // Helper function to resample an image source using the global WPlaceImageProcessor
+      const performResampling = (imageSource, targetWidth, targetHeight, method) => {
+        // Get the source canvas/image
+        let source = imageSource.canvas || imageSource.img;
+        
+        // Apply pre-blur if enabled
+        if (state.preBlurMode && state.preBlurMode !== 'none' && state.preBlurRadius > 0) {
+          const preBlurCanvas = document.createElement('canvas');
+          preBlurCanvas.width = source.width;
+          preBlurCanvas.height = source.height;
+          const preBlurCtx = preBlurCanvas.getContext('2d');
+          preBlurCtx.drawImage(source, 0, 0);
+          
+          // Apply blur using global image processor
+          if (globalImageProcessor && typeof globalImageProcessor.applyPreBlur === 'function') {
+            source = globalImageProcessor.applyPreBlur(preBlurCanvas, state.preBlurMode, state.preBlurRadius);
+            console.log(`✨ Applied ${state.preBlurMode} blur with radius ${state.preBlurRadius}`);
+          }
+        }
+        
+        // Perform resampling
+        let resampledCanvas;
+        if (typeof imageSource.resampleImage === 'function') {
+          resampledCanvas = imageSource.resampleImage(source, targetWidth, targetHeight, method);
+        } else if (window.WPlaceImageProcessor && globalImageProcessor && typeof globalImageProcessor.resampleImage === 'function') {
+          resampledCanvas = globalImageProcessor.resampleImage(source, targetWidth, targetHeight, method);
+        } else {
+          // Final fallback: simple canvas drawing
+          const fallbackCanvas = document.createElement('canvas');
+          const fallbackCtx = fallbackCanvas.getContext('2d');
+          fallbackCanvas.width = targetWidth;
+          fallbackCanvas.height = targetHeight;
+          fallbackCtx.imageSmoothingEnabled = (method === 'bilinear');
+          fallbackCtx.drawImage(source, 0, 0, targetWidth, targetHeight);
+          resampledCanvas = fallbackCanvas;
+        }
+        
+        // Apply sharpening if enabled
+        if (state.sharpenAmount > 0 && state.sharpenRadius > 0) {
+          if (globalImageProcessor && typeof globalImageProcessor.applyUnsharpMask === 'function') {
+            resampledCanvas = globalImageProcessor.applyUnsharpMask(
+              resampledCanvas,
+              state.sharpenAmount,
+              state.sharpenRadius,
+              state.sharpenThreshold
+            );
+            console.log(`✨ Applied unsharp mask: amount=${state.sharpenAmount}, radius=${state.sharpenRadius}, threshold=${state.sharpenThreshold}`);
+          }
+        }
+        
+        return resampledCanvas;
+      };
+      
       _updateResizePreview = async () => {
         const jobId = ++_previewJobId;
         const newWidth = parseInt(widthSlider.value, 10);
@@ -5257,8 +5859,18 @@ localStorage.removeItem("lp");
           if (baseProcessor !== processor && (!baseProcessor.img || !baseProcessor.canvas)) {
             await baseProcessor.load();
           }
+          
+          // Use the resampling helper function
+          const resampledCanvas = performResampling(
+            baseProcessor,
+            newWidth,
+            newHeight,
+            state.resamplingMethod
+          );
+          
           baseCtx.clearRect(0, 0, newWidth, newHeight);
-          baseCtx.drawImage(baseProcessor.img, 0, 0, newWidth, newHeight);
+          baseCtx.drawImage(resampledCanvas, 0, 0);
+          
           // Draw existing mask overlay buffer
           maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
           if (_maskImageData) maskCtx.putImageData(_maskImageData, 0, 0);
@@ -5269,100 +5881,99 @@ localStorage.removeItem("lp");
         if (baseProcessor !== processor && (!baseProcessor.img || !baseProcessor.canvas)) {
           await baseProcessor.load();
         }
+        
+        // Use the resampling helper function
+        const resampledCanvas = performResampling(
+          baseProcessor,
+          newWidth,
+          newHeight,
+          state.resamplingMethod
+        );
+        
         baseCtx.clearRect(0, 0, newWidth, newHeight);
-        baseCtx.drawImage(baseProcessor.img, 0, 0, newWidth, newHeight);
+        baseCtx.drawImage(resampledCanvas, 0, 0);
         const imgData = baseCtx.getImageData(0, 0, newWidth, newHeight);
         const data = imgData.data;
 
         const tThresh = state.customTransparencyThreshold || CONFIG.TRANSPARENCY_THRESHOLD;
 
-        const applyFSDither = () => {
-          const w = newWidth,
-            h = newHeight;
-          const n = w * h;
-          const { work, eligible } = ensureDitherBuffers(n);
-          for (let y = 0; y < h; y++) {
-            for (let x = 0; x < w; x++) {
-              const idx = y * w + x;
-              const i4 = idx * 4;
-              const r = data[i4],
-                g = data[i4 + 1],
-                b = data[i4 + 2],
-                a = data[i4 + 3];
-              const isEligible =
-                (state.paintTransparentPixels || a >= tThresh) &&
-                (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b));
-              eligible[idx] = isEligible ? 1 : 0;
-              work[idx * 3] = r;
-              work[idx * 3 + 1] = g;
-              work[idx * 3 + 2] = b;
-              if (!isEligible) {
-                data[i4 + 3] = 0; // transparent in preview overlay
-              }
-            }
+        // Apply color correction BEFORE palette conversion (if enabled)
+        // This ensures color adjustments happen before snapping to palette
+        if (state.enableColorCorrection && (
+          state.brightness !== 0 ||
+          state.contrast !== 0 ||
+          state.saturation !== 0 ||
+          state.hue !== 0 ||
+          state.gamma !== 1.0
+        )) {
+          const processedData = globalImageProcessor.applyColorCorrection(
+            data,
+            state.brightness || 0,
+            state.contrast || 0,
+            state.saturation || 0,
+            state.hue || 0,
+            state.gamma || 1.0
+          );
+          for (let i = 0; i < processedData.length; i++) {
+            data[i] = processedData[i];
           }
+        }
 
-          const diffuse = (nx, ny, er, eg, eb, factor) => {
-            if (nx < 0 || nx >= w || ny < 0 || ny >= h) return;
-            const nidx = ny * w + nx;
-            if (!eligible[nidx]) return;
-            const base = nidx * 3;
-            work[base] = Math.min(255, Math.max(0, work[base] + er * factor));
-            work[base + 1] = Math.min(255, Math.max(0, work[base + 1] + eg * factor));
-            work[base + 2] = Math.min(255, Math.max(0, work[base + 2] + eb * factor));
-          };
-
-          for (let y = 0; y < h; y++) {
-            for (let x = 0; x < w; x++) {
-              const idx = y * w + x;
-              if (!eligible[idx]) continue;
-              const base = idx * 3;
-              const r0 = work[base],
-                g0 = work[base + 1],
-                b0 = work[base + 2];
-              const [nr, ng, nb] = Utils.findClosestPaletteColor(
-                r0,
-                g0,
-                b0,
-                state.activeColorPalette
-              );
-              const i4 = idx * 4;
-              data[i4] = nr;
-              data[i4 + 1] = ng;
-              data[i4 + 2] = nb;
-              data[i4 + 3] = 255;
-
-              const er = r0 - nr;
-              const eg = g0 - ng;
-              const eb = b0 - nb;
-
-              diffuse(x + 1, y, er, eg, eb, 7 / 16);
-              diffuse(x - 1, y + 1, er, eg, eb, 3 / 16);
-              diffuse(x, y + 1, er, eg, eb, 5 / 16);
-              diffuse(x + 1, y + 1, er, eg, eb, 1 / 16);
-            }
-          }
-        };
-
-        // Skip expensive dithering while user is dragging sliders
+        // Apply multi-algorithm dithering if enabled
         console.log(`🎨 Preview render - ditheringEnabled: ${state.ditheringEnabled}, _isDraggingSize: ${_isDraggingSize}`);
         if (state.ditheringEnabled && !_isDraggingSize) {
-          console.log('✅ Applying dithering to preview');
-          applyFSDither();
+          const ditherResult = globalImageProcessor.applyDithering(
+            data,
+            newWidth,
+            newHeight,
+            state.activeColorPalette,
+            {
+              method: state.ditheringMethod || 'floyd',
+              strength: state.ditheringStrength || 0.5,
+              posterizeLevels: state.posterizeLevels || 0,
+              paintTransparentPixels: state.paintTransparentPixels,
+              paintWhitePixels: state.paintWhitePixels,
+              transparencyThreshold: tThresh,
+              whiteThreshold: state.customWhiteThreshold || CONFIG.WHITE_THRESHOLD,
+              algorithm: state.colorMatchingAlgorithm || 'lab',
+              enableChromaPenalty: state.enableChromaPenalty,
+              chromaPenaltyWeight: state.chromaPenaltyWeight,
+              mask: state.resizeIgnoreMask
+            }
+          );
+          
+          // Copy dithered data back
+          for (let i = 0; i < ditherResult.data.length; i++) {
+            data[i] = ditherResult.data[i];
+          }
         } else {
-          console.log('⛔ Skipping dithering - applying direct color conversion');
+          // No dithering - simple color quantization
+          console.log('⛔ Dithering disabled - applying direct color quantization');
           for (let i = 0; i < data.length; i += 4) {
             const r = data[i],
               g = data[i + 1],
               b = data[i + 2],
               a = data[i + 3];
+            
+            const isTransparent = a < tThresh;
+            
             if (
-              (!state.paintTransparentPixels && a < tThresh) ||
+              (!state.paintTransparentPixels && isTransparent) ||
               (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))
             ) {
               data[i + 3] = 0;
               continue;
             }
+            
+            // If painting transparent pixels and this pixel is transparent, keep it transparent
+            if (state.paintTransparentPixels && isTransparent) {
+              data[i] = 0;
+              data[i + 1] = 0;
+              data[i + 2] = 0;
+              data[i + 3] = 0;
+              continue;
+            }
+            
             const [nr, ng, nb] = Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
             data[i] = nr;
             data[i + 1] = ng;
@@ -5370,12 +5981,103 @@ localStorage.removeItem("lp");
             data[i + 3] = 255;
           }
         }
+        // Apply post-processing effects if enabled
+        if (state.enableEdgeOverlay) {
+          const processedData = globalImageProcessor.applyEdgeOverlay(
+            data,
+            newWidth,
+            newHeight,
+            state.edgeDetectionAlgorithm || 'sobel',
+            state.edgeThreshold || 60,
+            state.edgeThickness || 1,
+            state.edgeThin || false
+          );
+          for (let i = 0; i < processedData.length; i++) {
+            data[i] = processedData[i];
+          }
+        }
+
+        if (state.outlineThickness > 0) {
+          const processedData = globalImageProcessor.applyOutline(
+            data,
+            newWidth,
+            newHeight,
+            state.outlineThickness
+          );
+          for (let i = 0; i < processedData.length; i++) {
+            data[i] = processedData[i];
+          }
+        }
+
+        if (state.simplifyArea > 0) {
+          const processedData = globalImageProcessor.simplifyRegions(
+            data,
+            newWidth,
+            newHeight,
+            state.simplifyArea
+          );
+          for (let i = 0; i < processedData.length; i++) {
+            data[i] = processedData[i];
+          }
+        }
+
+        if (state.erodeAmount > 0) {
+          const processedData = globalImageProcessor.erodeEdges(
+            data,
+            newWidth,
+            newHeight,
+            state.erodeAmount
+          );
+          for (let i = 0; i < processedData.length; i++) {
+            data[i] = processedData[i];
+          }
+        }
+
+        if (state.modeFilterSize > 0) {
+          const processedData = globalImageProcessor.applyModeFilter(
+            data,
+            newWidth,
+            newHeight,
+            state.modeFilterSize
+          );
+          for (let i = 0; i < processedData.length; i++) {
+            data[i] = processedData[i];
+          }
+        }
 
         if (jobId !== _previewJobId) return;
         baseCtx.putImageData(imgData, 0, 0);
         maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
         if (_maskImageData) maskCtx.putImageData(_maskImageData, 0, 0);
         updateZoomLayout();
+
+        // 🔥 AUTO-COMMIT: Update overlay in real-time when processing settings change
+        // This ensures changes to processing panel immediately affect the placed template
+        if (state.imageData && state.imageData.processor) {
+          try {
+            // Save the processed pixels to state so they're used for painting
+            const processedPixels = new Uint8ClampedArray(data);
+            state.imageData.pixels = processedPixels;
+            state.imageData.width = newWidth;
+            state.imageData.height = newHeight;
+            
+            // Update overlay with processed image
+            const overlayCanvas = document.createElement('canvas');
+            overlayCanvas.width = newWidth;
+            overlayCanvas.height = newHeight;
+            const overlayCtx = overlayCanvas.getContext('2d');
+            overlayCtx.putImageData(imgData, 0, 0);
+            
+            createImageBitmap(overlayCanvas).then(bitmap => {
+              overlayManager.setImage(bitmap);
+              console.log('✅ Overlay auto-updated with processing changes');
+            }).catch(err => {
+              console.warn('Failed to auto-update overlay:', err);
+            });
+          } catch (err) {
+            console.warn('Failed to auto-commit processing changes:', err);
+          }
+        }
       };
 
       const onWidthInput = () => {
@@ -5671,6 +6373,60 @@ localStorage.removeItem("lp");
           lastTouchDist = null;
           setCursor(panMode || allowPan ? 'grab' : '');
         });
+        
+        // WASD keyboard panning support (like edit panel)
+        const wasdKeys = new Set();
+        const wasdPanSpeed = 15; // Base speed in pixels
+        let wasdAnimationFrame = null;
+        
+        const updateWASDPan = () => {
+          if (wasdKeys.size === 0) {
+            wasdAnimationFrame = null;
+            return;
+          }
+          
+          const speed = wasdPanSpeed * _zoomLevel; // Speed scales with zoom
+          
+          if (wasdKeys.has('w') || wasdKeys.has('arrowup')) {
+            panY += speed;
+          }
+          if (wasdKeys.has('s') || wasdKeys.has('arrowdown')) {
+            panY -= speed;
+          }
+          if (wasdKeys.has('a') || wasdKeys.has('arrowleft')) {
+            panX += speed;
+          }
+          if (wasdKeys.has('d') || wasdKeys.has('arrowright')) {
+            panX -= speed;
+          }
+          
+          applyPan();
+          wasdAnimationFrame = requestAnimationFrame(updateWASDPan);
+        };
+        
+        window.addEventListener('keydown', (e) => {
+          const key = e.key.toLowerCase();
+          if (['w', 'a', 's', 'd', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(key)) {
+            // Only handle if focus is not in an input/textarea
+            if (document.activeElement.tagName === 'INPUT' || 
+                document.activeElement.tagName === 'TEXTAREA' ||
+                document.activeElement.tagName === 'SELECT') {
+              return;
+            }
+            
+            e.preventDefault();
+            wasdKeys.add(key);
+            
+            if (!wasdAnimationFrame) {
+              wasdAnimationFrame = requestAnimationFrame(updateWASDPan);
+            }
+          }
+        });
+        
+        window.addEventListener('keyup', (e) => {
+          const key = e.key.toLowerCase();
+          wasdKeys.delete(key);
+        });
       }
       const schedulePreview = () => {
         if (_previewTimer) clearTimeout(_previewTimer);
@@ -5704,6 +6460,82 @@ localStorage.removeItem("lp");
         onHeightInput();
         schedulePreview();
       });
+      
+      // Resampling method change listener
+      if (resamplingMethodSelect) {
+        resamplingMethodSelect.addEventListener('change', (e) => {
+          state.resamplingMethod = e.target.value;
+          console.log(`🎨 Resampling method changed to: ${state.resamplingMethod}`);
+          saveBotSettings(); // Save the new method
+          schedulePreview(); // Trigger preview update with new method
+        });
+      }
+      
+      // Pre-blur controls
+      if (preBlurModeSelect) {
+        preBlurModeSelect.addEventListener('change', (e) => {
+          state.preBlurMode = e.target.value;
+          console.log(`🎨 Pre-blur mode changed to: ${state.preBlurMode}`);
+          
+          // Auto-enable pre-blur if a method is selected
+          if (state.preBlurMode !== 'none' && state.preBlurRadius === 0) {
+            state.preBlurRadius = 5; // Set to visible default value
+            if (preBlurRadiusSlider) preBlurRadiusSlider.value = 5;
+            if (blurRadiusValue) blurRadiusValue.textContent = 5;
+            console.log('✨ Pre-blur AUTO-ENABLED with radius: 5');
+          }
+          
+          // Show/hide blur radius control
+          if (blurRadiusControl) {
+            blurRadiusControl.style.display = (state.preBlurMode !== 'none') ? 'block' : 'none';
+          }
+          saveBotSettings();
+          schedulePreview();
+        });
+      }
+      
+      if (preBlurRadiusSlider && blurRadiusValue) {
+        preBlurRadiusSlider.addEventListener('change', (e) => {
+          state.preBlurRadius = parseInt(e.target.value, 10);
+          blurRadiusValue.textContent = state.preBlurRadius;
+          saveBotSettings();
+          schedulePreview();
+        });
+      }
+      
+      // Sharpen controls
+      if (sharpenAmountSlider && sharpenAmountValue) {
+        sharpenAmountSlider.addEventListener('change', (e) => {
+          state.sharpenAmount = parseInt(e.target.value, 10);
+          sharpenAmountValue.textContent = state.sharpenAmount;
+          // Show/hide additional sharpen controls
+          if (sharpenRadiusControl && sharpenThresholdControl) {
+            const showControls = state.sharpenAmount > 0;
+            sharpenRadiusControl.style.display = showControls ? 'block' : 'none';
+            sharpenThresholdControl.style.display = showControls ? 'block' : 'none';
+          }
+          saveBotSettings();
+          schedulePreview();
+        });
+      }
+      
+      if (sharpenRadiusSlider && sharpenRadiusValue) {
+        sharpenRadiusSlider.addEventListener('change', (e) => {
+          state.sharpenRadius = parseInt(e.target.value, 10);
+          sharpenRadiusValue.textContent = state.sharpenRadius;
+          saveBotSettings();
+          schedulePreview();
+        });
+      }
+      
+      if (sharpenThresholdSlider && sharpenThresholdValue) {
+        sharpenThresholdSlider.addEventListener('change', (e) => {
+          state.sharpenThreshold = parseInt(e.target.value, 10);
+          sharpenThresholdValue.textContent = state.sharpenThreshold;
+          saveBotSettings();
+          schedulePreview();
+        });
+      }
 
       // Mask painting UX: brush size, modes, row/column fills, and precise coords
       let draggingMask = false;
@@ -5711,7 +6543,7 @@ localStorage.removeItem("lp");
         lastPaintY = -1;
       let brushSize = 1;
       let rowColSize = 1;
-      let maskMode = 'ignore'; // 'ignore' | 'unignore' | 'toggle'
+      let maskMode = null; // null (inactive) | 'ignore' | 'unignore' | 'toggle'
       const brushEl = resizeContainer.querySelector('#maskBrushSize');
       const brushValEl = resizeContainer.querySelector('#maskBrushSizeValue');
       const btnIgnore = resizeContainer.querySelector('#maskModeIgnore');
@@ -5758,7 +6590,7 @@ localStorage.removeItem("lp");
       if (btnIgnore) btnIgnore.addEventListener('click', () => setMode('ignore'));
       if (btnUnignore) btnUnignore.addEventListener('click', () => setMode('unignore'));
       if (btnToggle) btnToggle.addEventListener('click', () => setMode('toggle'));
-      // Initialize button state (default to toggle mode)
+      // Initialize button state (no mode selected by default)
       updateModeButtons();
 
       const mapClientToPixel = (clientX, clientY) => {
@@ -5780,6 +6612,7 @@ localStorage.removeItem("lp");
       };
 
       const paintCircle = (cx, cy, radius, value) => {
+        if (!maskMode) return; // Don't paint if no mode selected
         const w = baseCanvas.width,
           h = baseCanvas.height;
         ensureMask(w, h);
@@ -5822,6 +6655,7 @@ localStorage.removeItem("lp");
       };
 
       const paintRow = (y, value) => {
+        if (!maskMode) return; // Don't paint if no mode selected
         const w = baseCanvas.width,
           h = baseCanvas.height;
         ensureMask(w, h);
@@ -5867,6 +6701,7 @@ localStorage.removeItem("lp");
       };
 
       const paintColumn = (x, value) => {
+        if (!maskMode) return; // Don't paint if no mode selected
         const w = baseCanvas.width,
           h = baseCanvas.height;
         ensureMask(w, h);
@@ -6018,83 +6853,33 @@ localStorage.removeItem("lp");
             ? state.resizeIgnoreMask
             : null;
 
-        const applyFSDitherFinal = async () => {
-          const w = newWidth,
-            h = newHeight;
-          const n = w * h;
-          const { work, eligible } = ensureDitherBuffers(n);
-          for (let y = 0; y < h; y++) {
-            for (let x = 0; x < w; x++) {
-              const idx = y * w + x;
-              const i4 = idx * 4;
-              const r = data[i4],
-                g = data[i4 + 1],
-                b = data[i4 + 2],
-                a = data[i4 + 3];
-              const masked = mask && mask[idx];
-              const isEligible =
-                !masked &&
-                (state.paintTransparentPixels || a >= tThresh2) &&
-                (state.paintWhitePixels || !Utils.isWhitePixel(r, g, b));
-              eligible[idx] = isEligible ? 1 : 0;
-              work[idx * 3] = r;
-              work[idx * 3 + 1] = g;
-              work[idx * 3 + 2] = b;
-              if (!isEligible) {
-                data[i4 + 3] = 0;
-              }
-            }
-            // Yield to keep UI responsive
-            if ((y & 15) === 0) await Promise.resolve();
-          }
-
-          const diffuse = (nx, ny, er, eg, eb, factor) => {
-            if (nx < 0 || nx >= w || ny < 0 || ny >= h) return;
-            const nidx = ny * w + nx;
-            if (!eligible[nidx]) return;
-            const base = nidx * 3;
-            work[base] = Math.min(255, Math.max(0, work[base] + er * factor));
-            work[base + 1] = Math.min(255, Math.max(0, work[base + 1] + eg * factor));
-            work[base + 2] = Math.min(255, Math.max(0, work[base + 2] + eb * factor));
-          };
-
-          for (let y = 0; y < h; y++) {
-            for (let x = 0; x < w; x++) {
-              const idx = y * w + x;
-              if (!eligible[idx]) continue;
-              const base = idx * 3;
-              const r0 = work[base],
-                g0 = work[base + 1],
-                b0 = work[base + 2];
-              const [nr, ng, nb] = Utils.findClosestPaletteColor(
-                r0,
-                g0,
-                b0,
-                state.activeColorPalette
-              );
-              const i4 = idx * 4;
-              data[i4] = nr;
-              data[i4 + 1] = ng;
-              data[i4 + 2] = nb;
-              data[i4 + 3] = 255;
-              totalValidPixels++;
-
-              const er = r0 - nr;
-              const eg = g0 - ng;
-              const eb = b0 - nb;
-
-              diffuse(x + 1, y, er, eg, eb, 7 / 16);
-              diffuse(x - 1, y + 1, er, eg, eb, 3 / 16);
-              diffuse(x, y + 1, er, eg, eb, 5 / 16);
-              diffuse(x + 1, y + 1, er, eg, eb, 1 / 16);
-            }
-            // Yield every row to reduce jank
-            await Promise.resolve();
-          }
-        };
-
+        // Apply multi-algorithm dithering if enabled
         if (state.ditheringEnabled) {
-          await applyFSDitherFinal();
+          const ditherResult = globalImageProcessor.applyDithering(
+            data,
+            newWidth,
+            newHeight,
+            state.activeColorPalette,
+            {
+              method: state.ditheringMethod || 'floyd',
+              strength: state.ditheringStrength || 0.5,
+              posterizeLevels: state.posterizeLevels || 0,
+              paintTransparentPixels: state.paintTransparentPixels,
+              paintWhitePixels: state.paintWhitePixels,
+              transparencyThreshold: tThresh2,
+              whiteThreshold: state.customWhiteThreshold || CONFIG.WHITE_THRESHOLD,
+              algorithm: state.colorMatchingAlgorithm || 'lab',
+              enableChromaPenalty: state.enableChromaPenalty,
+              chromaPenaltyWeight: state.chromaPenaltyWeight,
+              mask: mask
+            }
+          );
+          
+          // Copy dithered data and count valid pixels
+          for (let i = 0; i < ditherResult.data.length; i++) {
+            data[i] = ditherResult.data[i];
+          }
+          totalValidPixels = ditherResult.totalValidPixels;
         } else {
           for (let i = 0; i < data.length; i += 4) {
             const r = data[i],
@@ -6102,12 +6887,24 @@ localStorage.removeItem("lp");
               b = data[i + 2],
               a = data[i + 3];
             const masked = mask && mask[i >> 2];
-            const isTransparent = (!state.paintTransparentPixels && a < tThresh2) || masked;
-            const isWhiteAndSkipped = !state.paintWhitePixels && Utils.isWhitePixel(r, g, b);
-            if (isTransparent || isWhiteAndSkipped) {
+            
+            const isTransparent = a < tThresh2;
+            
+            if (masked || (!state.paintTransparentPixels && isTransparent) || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
               data[i + 3] = 0; // overlay transparency
               continue;
             }
+            
+            // If painting transparent AND this pixel is transparent, keep it transparent
+            if (state.paintTransparentPixels && isTransparent) {
+              data[i] = 0;
+              data[i + 1] = 0;
+              data[i + 2] = 0;
+              data[i + 3] = 0;
+              totalValidPixels++;
+              continue;
+            }
+            
             totalValidPixels++;
             const [nr, ng, nb] = Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
             data[i] = nr;
@@ -6275,9 +7072,12 @@ localStorage.removeItem("lp");
         // Initialize edit panel with current image
         initializeEditPanel(imageData);
 
-        // Show edit panel
+        // Show edit panel (use flex to center content)
         editOverlay.style.display = 'block';
 
+        // Show helpful tooltip
+        showEditPanelTip();
+
         console.log('✨ Pixel Art Editor opened successfully');
       } catch (error) {
         console.error('Error opening pixel art editor:', error);
@@ -6286,116 +7086,191 @@ localStorage.removeItem("lp");
     }
 
     function createEditPanel() {
+      // CSS is already injected globally by background.js
+      // Modern App Layout with 3-column design
+      
       const editOverlay = document.createElement('div');
       editOverlay.id = 'editOverlay';
       editOverlay.className = 'edit-overlay';
 
       editOverlay.innerHTML = `
-        <div class="edit-container">
+        <div class="edit-panel-container">
+          <!-- HEADER -->
           <div class="edit-header">
-            <div class="edit-header-left">
-              <h3>Manual Pixel Art Editor</h3>
-              <div class="edit-instructions">
-                <small>🖱️ Left click: Draw | Right click/Ctrl+drag: Pan | Mouse wheel: Zoom</small>
-              </div>
+            <div class="edit-title-section">
+              <span class="edit-title-icon">🎨</span>
+              <h3 class="edit-title-text">Pixel Art Editor</h3>
+              <span class="edit-title-info" id="editImageInfo">Loading...</span>
             </div>
-            <div class="edit-nav-controls">
-              <div class="zoom-controls">
-                <button id="editZoomOut" class="zoom-btn" title="Zoom Out (Ctrl + -)">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M19 13H5v-2h14v2z"/>
-                  </svg>
-                </button>
-                <select id="zoomSelect" class="zoom-select" title="Zoom Level">
-                  <option value="0.1">10%</option>
-                  <option value="0.25">25%</option>
-                  <option value="0.5">50%</option>
-                  <option value="0.75">75%</option>
-                  <option value="1" selected>100%</option>
-                  <option value="1.5">150%</option>
-                  <option value="2">200%</option>
-                  <option value="3">300%</option>
-                  <option value="4">400%</option>
-                  <option value="6">600%</option>
-                  <option value="8">800%</option>
-                  <option value="12">1200%</option>
-                  <option value="16">1600%</option>
-                  <option value="24">2400%</option>
-                  <option value="32">3200%</option>
-                </select>
-                <button id="editZoomIn" class="zoom-btn" title="Zoom In (Ctrl + +)">
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
-                  </svg>
-                </button>
-                <button id="zoomFit" class="zoom-btn" title="Fit to Window (Ctrl + 0)">📰</button>
-                <button id="zoom100" class="zoom-btn" title="Actual Size (Ctrl + 1)">1:1</button>
-              </div>
-              <div class="edit-controls">
-                <button id="editBackBtn" class="wplace-btn wplace-btn-secondary">← Back</button>
-                <button id="editApplyBtn" class="wplace-btn wplace-btn-confirm">Apply Changes</button>
-              </div>
+            <div class="edit-header-actions">
+              <button id="editBackBtn" class="edit-header-btn" title="Back to Resize" data-tooltip="Back">−</button>
+              <button id="editApplyBtn" class="edit-header-btn" title="Apply Changes" data-tooltip="Apply">✓</button>
+              <button class="edit-close-btn edit-header-btn" title="Close Editor" data-tooltip="Close">×</button>
             </div>
           </div>
-          
-          <div class="edit-content">
-            <div class="edit-main-area">
-              <div class="edit-toolbar">
-                <div class="edit-tool-group">
-                  <label>Tools:</label>
-                  <button id="paintBrush" class="edit-tool active" data-tool="paint" title="Brush (B)">🖌</button>
-                  <button id="eraseTool" class="edit-tool" data-tool="erase" title="Eraser (E)">🗑</button>
-                  <button id="eyedropperTool" class="edit-tool" data-tool="eyedropper" title="Eyedropper (I)">💉</button>
-                  <button id="fillTool" class="edit-tool" data-tool="fill" title="Fill (F)">🪣</button>
-                </div>
-                
-                <div class="edit-tool-group">
-                  <label>Brush Size:</label>
-                  <input type="range" id="brushSize" min="1" max="20" value="1" class="edit-slider" title="Use [ ] keys">
-                  <span id="brushSizeValue">1</span>
-                  <button id="showGrid" class="edit-toggle" title="Toggle Grid (G)">⊞</button>
-                </div>
-                
-                <div class="edit-tool-group">
-                  <button id="undoBtn" class="wplace-btn wplace-btn-secondary" title="Undo (Ctrl+Z)">↶</button>
-                  <button id="redoBtn" class="wplace-btn wplace-btn-secondary" title="Redo (Ctrl+Shift+Z)">↷</button>
-                  <button id="resetViewBtn" class="wplace-btn wplace-btn-secondary" title="Reset View">🔄</button>
+
+          <!-- WORKSPACE (3-COLUMN) -->
+          <div class="edit-workspace">
+            
+            <!-- LEFT SIDEBAR: TOOLS -->
+            <div class="edit-toolbar-sidebar">
+              <div class="edit-tool-section">
+                <button id="paintBrush" class="edit-tool-btn active" data-tool="paint" title="Brush (B)" data-tooltip="Brush (B)">
+                  <span class="edit-tool-icon">🖌️</span>
+                  <span class="edit-tool-label">Brush</span>
+                </button>
+                <button id="eraseTool" class="edit-tool-btn" data-tool="erase" title="Eraser (E)" data-tooltip="Eraser (E)">
+                  <span class="edit-tool-icon">🧹</span>
+                  <span class="edit-tool-label">Erase</span>
+                </button>
+                <button id="eyedropperTool" class="edit-tool-btn" data-tool="eyedropper" title="Eyedropper (I)" data-tooltip="Eyedropper (I)">
+                  <span class="edit-tool-icon">💧</span>
+                  <span class="edit-tool-label">Pick</span>
+                </button>
+                <button id="fillTool" class="edit-tool-btn" data-tool="fill" title="Fill (F)" data-tooltip="Fill (F)">
+                  <span class="edit-tool-icon">🪣</span>
+                  <span class="edit-tool-label">Fill</span>
+                </button>
+              </div>
+              
+              <div class="edit-tool-section-divider"></div>
+              
+              <div class="edit-tool-section">
+                <button id="undoBtn" class="edit-tool-btn" title="Undo (Ctrl+Z)" data-tooltip="Undo (Ctrl+Z)">
+                  <span class="edit-tool-icon">↩️</span>
+                  <span class="edit-tool-label">Undo</span>
+                </button>
+                <button id="redoBtn" class="edit-tool-btn" title="Redo (Ctrl+Y)" data-tooltip="Redo (Ctrl+Y)">
+                  <span class="edit-tool-icon">↪️</span>
+                  <span class="edit-tool-label">Redo</span>
+                </button>
+                <button id="resetViewBtn" class="edit-tool-btn" title="Reset View" data-tooltip="Reset View">
+                  <span class="edit-tool-icon">🔄</span>
+                  <span class="edit-tool-label">Reset</span>
+                </button>
+              </div>
+            </div>
+
+            <!-- CENTER: CANVAS AREA -->
+            <div class="edit-canvas-area">
+              <div class="edit-canvas-header">
+                <div class="edit-zoom-controls">
+                  <button id="editZoomOut" class="edit-zoom-btn" title="Zoom Out (Ctrl + -)" data-tooltip="Zoom Out">−</button>
+                  <select id="zoomSelect" class="edit-zoom-display" title="Zoom Level">
+                    <option value="0.1">10%</option>
+                    <option value="0.25">25%</option>
+                    <option value="0.5">50%</option>
+                    <option value="0.75">75%</option>
+                    <option value="1" selected>100%</option>
+                    <option value="1.5">150%</option>
+                    <option value="2">200%</option>
+                    <option value="3">300%</option>
+                    <option value="4">400%</option>
+                    <option value="6">600%</option>
+                    <option value="8">800%</option>
+                    <option value="12">1200%</option>
+                    <option value="16">1600%</option>
+                  </select>
+                  <button id="editZoomIn" class="edit-zoom-btn" title="Zoom In (Ctrl + +)" data-tooltip="Zoom In">+</button>
+                  <button id="zoomFit" class="edit-zoom-btn" title="Fit to Window (Ctrl + 0)" data-tooltip="Fit">⊡</button>
+                  <button id="zoom100" class="edit-zoom-btn" title="Actual Size (Ctrl + 1)" data-tooltip="1:1">1:1</button>
                 </div>
               </div>
               
-              <div class="edit-canvas-area">
-                <div class="edit-canvas-container" id="editCanvasContainer">
-                  <div class="edit-canvas-wrapper" id="editCanvasWrapper">
-                    <canvas id="editCanvas" class="edit-canvas"></canvas>
-                  </div>
-                  <div class="minimap-container" id="minimapContainer">
-                    <div class="minimap-header">Navigator</div>
-                    <div class="minimap-content">
-                      <canvas id="minimapCanvas" class="minimap-canvas"></canvas>
-                      <div id="minimapViewport" class="minimap-viewport"></div>
-                    </div>
+              <div class="edit-canvas-viewport" id="editCanvasContainer">
+                <div class="edit-canvas-wrapper" id="editCanvasWrapper">
+                  <canvas id="editCanvas" class="edit-canvas"></canvas>
+                </div>
+                
+                <!-- NAVIGATOR/MINIMAP -->
+                <div class="edit-navigator" id="minimapContainer">
+                  <div class="edit-navigator-title">Navigator</div>
+                  <div class="edit-navigator-content">
+                    <canvas id="minimapCanvas" class="edit-navigator-canvas"></canvas>
+                    <div id="minimapViewport" class="edit-navigator-viewport"></div>
                   </div>
                 </div>
               </div>
             </div>
-            
-            <div class="edit-bottom-bar">
-              <div class="edit-info-section">
-                <span id="editStatusBar">Position: (0, 0) | Color: #000000 | Zoom: 100%</span>
+
+            <!-- RIGHT SIDEBAR: PROPERTIES -->
+            <div class="edit-properties-panel">
+              
+              <!-- POSITION SECTION -->
+              <div class="edit-prop-section">
+                <div class="edit-prop-section-title">
+                  Position
+                </div>
+                <div class="edit-position-grid">
+                  <div class="edit-input-group">
+                    <label class="edit-input-label">X</label>
+                    <input type="number" class="edit-input-field" id="posX" value="0" readonly>
+                  </div>
+                  <div class="edit-input-group">
+                    <label class="edit-input-label">Y</label>
+                    <input type="number" class="edit-input-field" id="posY" value="0" readonly>
+                  </div>
+                </div>
               </div>
-              <div class="edit-current-color">
-                <label>Current:</label>
-                <div id="currentColorDisplay" class="color-display"></div>
+
+              <!-- COLOR SECTION -->
+              <div class="edit-prop-section">
+                <div class="edit-prop-section-title">
+                  Current Color
+                </div>
+                <div class="edit-color-display">
+                  <div class="edit-color-preview">
+                    <div class="edit-color-preview-fill" id="currentColorDisplay" style="background: #000000;"></div>
+                  </div>
+                  <div class="edit-color-info">
+                    <div class="edit-color-hex" id="colorHex">#000000</div>
+                    <div class="edit-color-rgb" id="colorRgb">RGB(0, 0, 0)</div>
+                  </div>
+                </div>
               </div>
-              <div class="edit-available-colors">
-                <label>Available Colors (<span id="editColorCount">0</span>):</label>
-                <div id="editColorGrid" class="edit-color-grid">
+
+              <!-- BRUSH SECTION -->
+              <div class="edit-prop-section">
+                <div class="edit-prop-section-title">
+                  Brush Settings
+                </div>
+                <div class="edit-slider-group">
+                  <div class="edit-input-label">Size: <span id="brushSizeValue">1</span>px</div>
+                  <input type="range" id="brushSize" min="1" max="20" value="1" class="edit-slider">
+                  <div class="edit-slider-value">Use [ ] keys to adjust</div>
+                </div>
+              </div>
+
+              <!-- AVAILABLE COLORS -->
+              <div class="edit-prop-section">
+                <div class="edit-prop-section-title">
+                  Available Colors (<span id="editColorCount">0</span>)
+                </div>
+                <div class="edit-color-swatches" id="editColorGrid">
                   <!-- Colors will be populated here -->
                 </div>
               </div>
-              </div>
+
             </div>
           </div>
+
+          <!-- BOTTOM STATUS BAR -->
+          <div class="edit-bottom-bar">
+            <div class="edit-status-left">
+              <div class="edit-status-item">
+                <span class="edit-status-icon">ℹ️</span>
+                <span id="editStatusBar">Click to paint</span>
+              </div>
+            </div>
+            <div class="edit-status-right">
+              <div class="edit-undo-redo">
+                <button id="undoBtn2" class="edit-history-btn" title="Undo (Ctrl+Z)">↶</button>
+                <button id="redoBtn2" class="edit-history-btn" title="Redo (Ctrl+Y)">↷</button>
+              </div>
+              <span id="editZoomStatus">Zoom: 100%</span>
+            </div>
+          </div>
+
         </div>
       `;
 
@@ -6414,7 +7289,6 @@ localStorage.removeItem("lp");
       const fillTool = document.getElementById('fillTool');
       const brushSize = document.getElementById('brushSize');
       const brushSizeValue = document.getElementById('brushSizeValue');
-      const showGrid = document.getElementById('showGrid');
       const undoBtn = document.getElementById('undoBtn');
       const redoBtn = document.getElementById('redoBtn');
       const resetViewBtn = document.getElementById('resetViewBtn');
@@ -6427,6 +7301,13 @@ localStorage.removeItem("lp");
 
       // Back to resize panel
       editBackBtn.onclick = () => {
+        // Stop WASD animation
+        if (editState.wasdAnimationFrame) {
+          cancelAnimationFrame(editState.wasdAnimationFrame);
+          editState.wasdAnimationFrame = null;
+        }
+        editState.wasdKeys = { w: false, a: false, s: false, d: false };
+        
         document.getElementById('editOverlay').style.display = 'none';
         resizeContainer.style.display = 'block';
       };
@@ -6434,6 +7315,14 @@ localStorage.removeItem("lp");
       // Apply changes
       editApplyBtn.onclick = () => {
         applyEditChanges();
+        
+        // Stop WASD animation
+        if (editState.wasdAnimationFrame) {
+          cancelAnimationFrame(editState.wasdAnimationFrame);
+          editState.wasdAnimationFrame = null;
+        }
+        editState.wasdKeys = { w: false, a: false, s: false, d: false };
+        
         document.getElementById('editOverlay').style.display = 'none';
         resizeContainer.style.display = 'block';
       };
@@ -6455,13 +7344,6 @@ localStorage.removeItem("lp");
         selectTool('fill');
       };
 
-      // Grid toggle
-      showGrid.onclick = () => {
-        editState.showGrid = !editState.showGrid;
-        showGrid.classList.toggle('active', editState.showGrid);
-        redrawCanvas();
-      };
-
       // Brush size
       brushSize.oninput = () => {
         brushSizeValue.textContent = brushSize.value;
@@ -6471,6 +7353,12 @@ localStorage.removeItem("lp");
       // Undo/Redo
       undoBtn.onclick = () => undoEdit();
       redoBtn.onclick = () => redoEdit();
+      
+      // Duplicate undo/redo in status bar
+      const undoBtn2 = document.getElementById('undoBtn2');
+      const redoBtn2 = document.getElementById('redoBtn2');
+      if (undoBtn2) undoBtn2.onclick = () => undoEdit();
+      if (redoBtn2) redoBtn2.onclick = () => redoEdit();
 
       // Reset view
       resetViewBtn.onclick = () => resetEditView();
@@ -6507,7 +7395,6 @@ localStorage.removeItem("lp");
       redoStack: [],
       isDrawing: false,
       isPanning: false,
-      showGrid: false,
 
       mouseX: 0,
       mouseY: 0,
@@ -6517,7 +7404,11 @@ localStorage.removeItem("lp");
       lastPaintPos: null,
       touchStart: null,
       lastTouchDistance: 0,
-      lastTouchCenter: { x: 0, y: 0 }
+      lastTouchCenter: { x: 0, y: 0 },
+      
+      // WASD movement
+      wasdKeys: { w: false, a: false, s: false, d: false },
+      wasdAnimationFrame: null
     };
 
     function calculateOptimalPanelSize(imageWidth, imageHeight) {
@@ -6561,16 +7452,134 @@ localStorage.removeItem("lp");
       editState.redoStack = [];
       editState.currentTool = 'paint';
       editState.brushSize = 1;
-      editState.showGrid = false;
       editState.isPanning = false;
       editState.isDrawing = false;
       editState.lastPaintPos = null;
+      editState.wasdKeys = { w: false, a: false, s: false, d: false };
+      if (editState.wasdAnimationFrame) {
+        cancelAnimationFrame(editState.wasdAnimationFrame);
+        editState.wasdAnimationFrame = null;
+      }
+
+      // Reset processing settings to default (everything OFF)
+      console.log('🔄 Resetting processing settings to default...');
+      state.ditheringEnabled = false;
+      state.ditheringMethod = 'floyd';
+      state.ditheringStrength = 0.5;
+      state.posterizeLevels = 0;
+      state.preBlurMode = 'none';
+      state.preBlurRadius = 0;
+      state.sharpenAmount = 0;
+      state.sharpenRadius = 0;
+      state.sharpenThreshold = 0;
+      state.resamplingMethod = 'nearest';
+      state.colorMatchingAlgorithm = 'rgb'; // Default to Legacy (RGB)
+      state.enableChromaPenalty = false;     // Chroma penalty OFF by default
+      state.chromaPenaltyWeight = 0.15;
+      console.log('✅ Processing settings reset - All OFF, Color Algorithm: RGB');
+
+      // Reset UI elements to match the default state
+      // This will be called after the resize panel is created
+      setTimeout(() => {
+        // Dithering controls
+        const ditherToggle = document.getElementById('enableDitheringToggle');
+        if (ditherToggle) {
+          ditherToggle.checked = false;
+          const methodControl = document.getElementById('ditheringMethodControl');
+          const posterizeControl = document.getElementById('posterizeLevelsControl');
+          if (methodControl) methodControl.style.display = 'none';
+          if (posterizeControl) posterizeControl.style.display = 'none';
+        }
+        
+        const ditheringMethodSelect = document.getElementById('ditheringMethodSelect');
+        if (ditheringMethodSelect) ditheringMethodSelect.value = 'floyd';
+        
+        const ditheringStrengthSlider = document.getElementById('ditheringStrengthSlider');
+        const ditheringStrengthValue = document.getElementById('ditheringStrengthValue');
+        if (ditheringStrengthSlider && ditheringStrengthValue) {
+          ditheringStrengthSlider.value = 50;
+          ditheringStrengthValue.textContent = '50%';
+        }
+        
+        const posterizeLevelsSlider = document.getElementById('posterizeLevelsSlider');
+        const posterizeLevelsValue = document.getElementById('posterizeLevelsValue');
+        if (posterizeLevelsSlider && posterizeLevelsValue) {
+          posterizeLevelsSlider.value = 0;
+          posterizeLevelsValue.textContent = 'Disabled';
+        }
+        
+        // Pre-processing controls
+        const preBlurModeSelect = document.getElementById('preBlurModeSelect');
+        const blurRadiusControl = document.getElementById('blurRadiusControl');
+        if (preBlurModeSelect) {
+          preBlurModeSelect.value = 'none';
+          if (blurRadiusControl) blurRadiusControl.style.display = 'none';
+        }
+        
+        const preBlurRadiusSlider = document.getElementById('preBlurRadiusSlider');
+        const blurRadiusValue = document.getElementById('blurRadiusValue');
+        if (preBlurRadiusSlider && blurRadiusValue) {
+          preBlurRadiusSlider.value = 0;
+          blurRadiusValue.textContent = '0';
+        }
+        
+        const sharpenAmountSlider = document.getElementById('sharpenAmountSlider');
+        const sharpenAmountValue = document.getElementById('sharpenAmountValue');
+        const sharpenRadiusControl = document.getElementById('sharpenRadiusControl');
+        const sharpenThresholdControl = document.getElementById('sharpenThresholdControl');
+        if (sharpenAmountSlider && sharpenAmountValue) {
+          sharpenAmountSlider.value = 0;
+          sharpenAmountValue.textContent = '0';
+          if (sharpenRadiusControl) sharpenRadiusControl.style.display = 'none';
+          if (sharpenThresholdControl) sharpenThresholdControl.style.display = 'none';
+        }
+        
+        const sharpenRadiusSlider = document.getElementById('sharpenRadiusSlider');
+        const sharpenRadiusValue = document.getElementById('sharpenRadiusValue');
+        if (sharpenRadiusSlider && sharpenRadiusValue) {
+          sharpenRadiusSlider.value = 0;
+          sharpenRadiusValue.textContent = '0';
+        }
+        
+        const sharpenThresholdSlider = document.getElementById('sharpenThresholdSlider');
+        const sharpenThresholdValue = document.getElementById('sharpenThresholdValue');
+        if (sharpenThresholdSlider && sharpenThresholdValue) {
+          sharpenThresholdSlider.value = 0;
+          sharpenThresholdValue.textContent = '0';
+        }
+        
+        // Resampling method
+        const resamplingMethodSelect = document.getElementById('resamplingMethodSelect');
+        if (resamplingMethodSelect) resamplingMethodSelect.value = 'nearest';
+        
+        // Advanced color matching - RESET TO DEFAULT (RGB, no chroma)
+        const colorAlgorithmSelect = document.getElementById('colorAlgorithmSelect');
+        if (colorAlgorithmSelect) colorAlgorithmSelect.value = 'rgb';
+        
+        const chromaPenaltyToggle = document.getElementById('enableChromaPenaltyToggle');
+        if (chromaPenaltyToggle) chromaPenaltyToggle.checked = false;
+        
+        const chromaPenaltyWeightSlider = document.getElementById('chromaPenaltyWeightSlider');
+        const chromaWeightValue = document.getElementById('chromaWeightValue');
+        if (chromaPenaltyWeightSlider && chromaWeightValue) {
+          chromaPenaltyWeightSlider.value = 0.15;
+          chromaWeightValue.textContent = '0.15';
+        }
+        
+        console.log('✅ UI elements reset to default values - All OFF, Color Algorithm: RGB, Chroma OFF');
+      }, 100);
 
       // Set canvas size to match baseCanvas
       editCanvas.width = baseCanvas.width;
       editCanvas.height = baseCanvas.height;
       editState.canvasWidth = editCanvas.width;
       editState.canvasHeight = editCanvas.height;
+      
+      // Update header info
+      const editImageInfo = document.getElementById('editImageInfo');
+      if (editImageInfo) {
+        editImageInfo.textContent = `${editCanvas.width}×${editCanvas.height}`;
+      }
 
       // Configure canvas context for pixel art
       ctx.imageSmoothingEnabled = false;
@@ -6578,13 +7587,9 @@ localStorage.removeItem("lp");
       ctx.mozImageSmoothingEnabled = false;
       ctx.msImageSmoothingEnabled = false;
 
-      // Calculate optimal panel size
-      const panelSize = calculateOptimalPanelSize(editCanvas.width, editCanvas.height);
-      const editContainer = document.querySelector('.edit-container');
-      if (editContainer) {
-        editContainer.style.width = panelSize.panelWidth + 'px';
-        editContainer.style.height = panelSize.panelHeight + 'px';
-      }
+      // REMOVED: Dynamic panel sizing - panel now has fixed size in CSS
+      // This ensures consistent UI regardless of image dimensions
+      // The canvas area is scrollable/pannable to accommodate any image size
 
       // Setup canvas container
       setupCanvasContainer();
@@ -6921,10 +7926,52 @@ localStorage.removeItem("lp");
       }
     }
 
+    function showEditPanelTip() {
+      // Create tip overlay
+      const tipOverlay = document.createElement('div');
+      tipOverlay.className = 'edit-tip-overlay';
+      tipOverlay.innerHTML = `
+        <div class="edit-tip-box">
+          <div class="edit-tip-icon">💡</div>
+          <div class="edit-tip-content">
+            <h3>Navigation Tips</h3>
+            <p><strong>🎮 WASD</strong> - Move canvas smoothly</p>
+            <p><strong>🖱️ Click Navigator</strong> - Jump to location</p>
+            <p><strong>🔍 Mouse Wheel</strong> - Zoom in/out</p>
+          </div>
+          <button class="edit-tip-close">Got it!</button>
+        </div>
+      `;
+      
+      document.body.appendChild(tipOverlay);
+      
+      // Auto-close after 5 seconds
+      const autoCloseTimer = setTimeout(() => {
+        closeTip();
+      }, 5000);
+      
+      // Close button
+      const closeBtn = tipOverlay.querySelector('.edit-tip-close');
+      closeBtn.onclick = () => {
+        clearTimeout(autoCloseTimer);
+        closeTip();
+      };
+      
+      function closeTip() {
+        tipOverlay.style.opacity = '0';
+        setTimeout(() => {
+          if (tipOverlay.parentNode) {
+            tipOverlay.parentNode.removeChild(tipOverlay);
+          }
+        }, 300);
+      }
+    }
+
     function selectTool(tool) {
       editState.currentTool = tool;
 
-      document.querySelectorAll('.edit-tool').forEach(btn => {
+      // Remove active class from all tool buttons
+      document.querySelectorAll('.edit-tool-btn').forEach(btn => {
         btn.classList.remove('active');
       });
 
@@ -7000,28 +8047,38 @@ localStorage.removeItem("lp");
       }
 
       availableColors.forEach(color => {
-        const colorBtn = document.createElement('button');
-        colorBtn.className = 'color-btn';
-        colorBtn.style.backgroundColor = color.hex;
-        colorBtn.title = `${color.name} (${color.hex})`;
-        colorBtn.dataset.colorId = color.id;
-        colorBtn.dataset.colorHex = color.hex;
+        const colorSwatch = document.createElement('div');
+        colorSwatch.className = 'edit-swatch';
+        colorSwatch.title = `${color.name} (${color.hex})`;
+        colorSwatch.dataset.colorId = color.id;
+        colorSwatch.dataset.colorHex = color.hex;
+        
+        const swatchFill = document.createElement('div');
+        swatchFill.className = 'edit-swatch-fill';
+        swatchFill.style.backgroundColor = color.hex;
+        colorSwatch.appendChild(swatchFill);
 
-        colorBtn.onclick = () => {
+        colorSwatch.onclick = () => {
           editState.currentColor = color.hex;
           editState.currentColorId = color.id;
           currentColorDisplay.style.backgroundColor = color.hex;
+          
+          // Update color info
+          const colorHex = document.getElementById('colorHex');
+          const colorRgb = document.getElementById('colorRgb');
+          if (colorHex) colorHex.textContent = color.hex.toUpperCase();
+          if (colorRgb) colorRgb.textContent = `RGB(${color.rgb.join(', ')})`;
 
           // Update active color
-          document.querySelectorAll('.color-btn').forEach(btn => {
-            btn.classList.remove('selected');
+          document.querySelectorAll('.edit-swatch').forEach(btn => {
+            btn.classList.remove('active');
           });
-          colorBtn.classList.add('selected');
+          colorSwatch.classList.add('active');
 
           updateStatusBar(editState.mouseX, editState.mouseY);
         };
 
-        colorGrid.appendChild(colorBtn);
+        colorGrid.appendChild(colorSwatch);
       });
 
       // Set first color as default
@@ -7029,7 +8086,13 @@ localStorage.removeItem("lp");
         editState.currentColor = availableColors[0].hex;
         editState.currentColorId = availableColors[0].id;
         currentColorDisplay.style.backgroundColor = availableColors[0].hex;
-        colorGrid.firstChild.classList.add('selected');
+        
+        const colorHex = document.getElementById('colorHex');
+        const colorRgb = document.getElementById('colorRgb');
+        if (colorHex) colorHex.textContent = availableColors[0].hex.toUpperCase();
+        if (colorRgb) colorRgb.textContent = `RGB(${availableColors[0].rgb.join(', ')})`;
+        
+        colorGrid.firstChild.classList.add('active');
       }
     }
 
@@ -7114,6 +8177,9 @@ localStorage.removeItem("lp");
         // Also update status bar zoom text
         updateStatusBar(editState.mouseX || 0, editState.mouseY || 0);
       }
+      
+      // Update navigator viewport indicator
+      updateMinimap();
     }
 
     function setupCanvasContainer() {
@@ -7273,8 +8339,11 @@ localStorage.removeItem("lp");
         return;
       }
 
-      // Calculate minimap size
-      const maxSize = 150;
+      // Make minimap visible
+      if (minimapContainer) minimapContainer.style.display = 'block';
+
+      // Calculate minimap size - fit within the navigator container
+      const maxSize = 164; // 180px container - 16px padding
       const scale = Math.min(maxSize / editCanvas.width, maxSize / editCanvas.height);
 
       minimapCanvas.width = editCanvas.width * scale;
@@ -7283,7 +8352,10 @@ localStorage.removeItem("lp");
       // Draw thumbnail
       const minimapCtx = minimapCanvas.getContext('2d');
       minimapCtx.imageSmoothingEnabled = false;
-      // REMOVED: drawCheckerboardBackground - prevents checkerboard from being saved with template
+      minimapCtx.webkitImageSmoothingEnabled = false;
+      minimapCtx.mozImageSmoothingEnabled = false;
+      
+      // Draw the image
       minimapCtx.drawImage(editCanvas, 0, 0, minimapCanvas.width, minimapCanvas.height);
 
       // Update viewport indicator
@@ -7295,23 +8367,63 @@ localStorage.removeItem("lp");
       const minimapCanvas = document.getElementById('minimapCanvas');
       const container = document.getElementById('editCanvasContainer');
       const editCanvas = document.getElementById('editCanvas');
+      const wrapper = document.getElementById('editCanvasWrapper');
 
-      if (!viewport || !minimapCanvas || !container || !editCanvas) return;
+      if (!viewport || !minimapCanvas || !container || !editCanvas || !wrapper) return;
+      if (minimapCanvas.width === 0 || minimapCanvas.height === 0) return;
+      if (editCanvas.width === 0 || editCanvas.height === 0) return;
 
       const containerRect = container.getBoundingClientRect();
+      const wrapperRect = wrapper.getBoundingClientRect();
       const scale = minimapCanvas.width / editCanvas.width;
 
-      // Calculate visible area in minimap coordinates
-      const visibleWidth = Math.min(containerRect.width / editState.zoom * scale, minimapCanvas.width);
-      const visibleHeight = Math.min(containerRect.height / editState.zoom * scale, minimapCanvas.height);
+      // Calculate how much of the canvas is visible
+      const visibleCanvasWidth = containerRect.width / editState.zoom;
+      const visibleCanvasHeight = containerRect.height / editState.zoom;
 
-      const viewportX = (minimapCanvas.width / 2) - (editState.panX / editState.zoom * scale) - (visibleWidth / 2);
-      const viewportY = (minimapCanvas.height / 2) - (editState.panY / editState.zoom * scale) - (visibleHeight / 2);
+      // Clamp visible area to actual canvas dimensions
+      const clampedVisibleWidth = Math.min(visibleCanvasWidth, editCanvas.width);
+      const clampedVisibleHeight = Math.min(visibleCanvasHeight, editCanvas.height);
 
-      viewport.style.width = `${visibleWidth}px`;
-      viewport.style.height = `${visibleHeight}px`;
-      viewport.style.left = `${Math.max(0, Math.min(minimapCanvas.width - visibleWidth, viewportX))}px`;
-      viewport.style.top = `${Math.max(0, Math.min(minimapCanvas.height - visibleHeight, viewportY))}px`;
+      // Convert visible area to minimap pixels and clamp to minimap size
+      const viewportWidth = Math.min(clampedVisibleWidth * scale, minimapCanvas.width);
+      const viewportHeight = Math.min(clampedVisibleHeight * scale, minimapCanvas.height);
+
+      // Calculate the offset of the wrapper from the container center
+      const containerCenterX = containerRect.left + containerRect.width / 2;
+      const containerCenterY = containerRect.top + containerRect.height / 2;
+      const wrapperCenterX = wrapperRect.left + wrapperRect.width / 2;
+      const wrapperCenterY = wrapperRect.top + wrapperRect.height / 2;
+      
+      // Calculate how much we've panned in canvas coordinates
+      const panOffsetX = (containerCenterX - wrapperCenterX) / editState.zoom;
+      const panOffsetY = (containerCenterY - wrapperCenterY) / editState.zoom;
+      
+      // Calculate the top-left corner of the visible area in canvas coordinates
+      const visibleLeft = (editCanvas.width / 2) + panOffsetX - (clampedVisibleWidth / 2);
+      const visibleTop = (editCanvas.height / 2) + panOffsetY - (clampedVisibleHeight / 2);
+      
+      // Clamp visible position to canvas bounds
+      const clampedLeft = Math.max(0, Math.min(editCanvas.width - clampedVisibleWidth, visibleLeft));
+      const clampedTop = Math.max(0, Math.min(editCanvas.height - clampedVisibleHeight, visibleTop));
+      
+      // Convert to minimap coordinates
+      const viewportX = clampedLeft * scale;
+      const viewportY = clampedTop * scale;
+
+      // Apply strict bounds to ensure viewport stays within minimap
+      const boundedX = Math.max(0, Math.min(minimapCanvas.width - viewportWidth, viewportX));
+      const boundedY = Math.max(0, Math.min(minimapCanvas.height - viewportHeight, viewportY));
+
+      // Ensure dimensions are valid
+      const finalWidth = Math.max(1, Math.min(viewportWidth, minimapCanvas.width));
+      const finalHeight = Math.max(1, Math.min(viewportHeight, minimapCanvas.height));
+
+      viewport.style.width = `${finalWidth}px`;
+      viewport.style.height = `${finalHeight}px`;
+      viewport.style.left = `${boundedX}px`;
+      viewport.style.top = `${boundedY}px`;
+      viewport.style.display = 'block';
     }
 
     function navigateToMinimapPosition(e) {
@@ -7338,9 +8450,20 @@ localStorage.removeItem("lp");
 
     function updateStatusBar(x, y) {
       const statusBar = document.getElementById('editStatusBar');
+      const posX = document.getElementById('posX');
+      const posY = document.getElementById('posY');
+      const zoomStatus = document.getElementById('editZoomStatus');
+      
       if (statusBar) {
+        statusBar.textContent = `Position: (${x}, ${y}) | Color: ${editState.currentColor || '#000000'}`;
+      }
+      
+      if (posX) posX.value = x;
+      if (posY) posY.value = y;
+      
+      if (zoomStatus) {
         const zoomPercent = Math.round(editState.zoom * 100);
-        statusBar.textContent = `Position: (${x}, ${y}) | Color: ${editState.currentColor || '#000000'} | Zoom: ${zoomPercent}%`;
+        zoomStatus.textContent = `Zoom: ${zoomPercent}%`;
       }
     }
 
@@ -7358,11 +8481,18 @@ localStorage.removeItem("lp");
         if (currentColorDisplay) {
           currentColorDisplay.style.backgroundColor = pickedColor;
         }
+        
+        // Update color info
+        const colorHex = document.getElementById('colorHex');
+        const colorRgb = document.getElementById('colorRgb');
+        if (colorHex) colorHex.textContent = pickedColor.toUpperCase();
+        if (colorRgb) colorRgb.textContent = `RGB(${r}, ${g}, ${b})`;
 
         // Try to find matching color in palette
-        document.querySelectorAll('.edit-color-btn').forEach(btn => {
+        document.querySelectorAll('.edit-swatch').forEach(btn => {
           btn.classList.remove('active');
-          if (btn.dataset.colorHex === pickedColor) {
+          const swatchHex = btn.dataset.colorHex;
+          if (swatchHex === pickedColor) {
             btn.classList.add('active');
             editState.currentColorId = parseInt(btn.dataset.colorId);
           }
@@ -7434,27 +8564,8 @@ localStorage.removeItem("lp");
     }
 
     function drawGrid(ctx, width, height) {
-      if (!editState.showGrid || editState.zoom < 4) return;
-
-      ctx.save();
-      ctx.strokeStyle = 'rgba(128, 128, 128, 0.3)';
-      ctx.lineWidth = 1 / editState.zoom;
-
-      for (let x = 0; x <= width; x++) {
-        ctx.beginPath();
-        ctx.moveTo(x, 0);
-        ctx.lineTo(x, height);
-        ctx.stroke();
-      }
-
-      for (let y = 0; y <= height; y++) {
-        ctx.beginPath();
-        ctx.moveTo(0, y);
-        ctx.lineTo(width, y);
-        ctx.stroke();
-      }
-
-      ctx.restore();
+      // Grid feature removed - function kept for compatibility
+      return;
     }
 
     function drawCheckerboardBackground(ctx, width, height) {
@@ -7485,6 +8596,9 @@ localStorage.removeItem("lp");
         // REMOVED: drawCheckerboardBackground - prevents checkerboard from being saved with template
         ctx.drawImage(img, 0, 0);
         drawGrid(ctx, editCanvas.width, editCanvas.height);
+        
+        // Update minimap to reflect changes
+        setupMinimap();
       };
       img.src = currentState;
     }
@@ -7590,18 +8704,69 @@ localStorage.removeItem("lp");
     }
 
     function setupKeyboardShortcuts() {
+      // WASD smooth movement function
+      function updateWASDMovement() {
+        const baseSpeed = 5; // pixels per frame at 100% zoom
+        // Multiply by zoom so it moves faster when zoomed in (feels more natural)
+        const scaledSpeed = baseSpeed * editState.zoom;
+        let moved = false;
+        
+        if (editState.wasdKeys.w) {
+          editState.panY += scaledSpeed;
+          moved = true;
+        }
+        if (editState.wasdKeys.s) {
+          editState.panY -= scaledSpeed;
+          moved = true;
+        }
+        if (editState.wasdKeys.a) {
+          editState.panX += scaledSpeed;
+          moved = true;
+        }
+        if (editState.wasdKeys.d) {
+          editState.panX -= scaledSpeed;
+          moved = true;
+        }
+        
+        if (moved) {
+          constrainPan();
+          updateCanvasTransform();
+        }
+        
+        // Continue animation if any key is pressed
+        if (editState.wasdKeys.w || editState.wasdKeys.s || editState.wasdKeys.a || editState.wasdKeys.d) {
+          editState.wasdAnimationFrame = requestAnimationFrame(updateWASDMovement);
+        } else {
+          editState.wasdAnimationFrame = null;
+        }
+      }
+      
       document.addEventListener('keydown', (e) => {
         // Only handle shortcuts when edit panel is visible
         const editOverlay = document.getElementById('editOverlay');
         if (!editOverlay || editOverlay.style.display === 'none') return;
 
-        // Prevent default for handled keys
-        const handledKeys = ['b', 'e', 'i', 'f', 'g', 'z', '[', ']'];
-        if (handledKeys.includes(e.key.toLowerCase()) || (e.ctrlKey && e.key.toLowerCase() === 'z')) {
+        // Handle WASD movement
+        const key = e.key.toLowerCase();
+        if (['w', 'a', 's', 'd'].includes(key)) {
+          e.preventDefault();
+          if (!editState.wasdKeys[key]) {
+            editState.wasdKeys[key] = true;
+            // Start animation if not already running
+            if (!editState.wasdAnimationFrame) {
+              editState.wasdAnimationFrame = requestAnimationFrame(updateWASDMovement);
+            }
+          }
+          return;
+        }
+
+        // Prevent default for other handled keys
+        const handledKeys = ['b', 'e', 'i', 'f', 'z', '[', ']'];
+        if (handledKeys.includes(key) || (e.ctrlKey && key === 'z')) {
           e.preventDefault();
         }
 
-        switch (e.key.toLowerCase()) {
+        switch (key) {
           case 'b': // Brush
             selectTool('paint');
             break;
@@ -7614,10 +8779,6 @@ localStorage.removeItem("lp");
           case 'f': // Fill
             selectTool('fill');
             break;
-          case 'g': // Grid
-            const showGrid = document.getElementById('showGrid');
-            if (showGrid) showGrid.click();
-            break;
           case 'z':
             if (e.ctrlKey || e.metaKey) {
               if (e.shiftKey) {
@@ -7668,6 +8829,17 @@ localStorage.removeItem("lp");
             break;
         }
       });
+      
+      // Handle keyup for WASD
+      document.addEventListener('keyup', (e) => {
+        const editOverlay = document.getElementById('editOverlay');
+        if (!editOverlay || editOverlay.style.display === 'none') return;
+        
+        const key = e.key.toLowerCase();
+        if (['w', 'a', 's', 'd'].includes(key)) {
+          editState.wasdKeys[key] = false;
+        }
+      });
     }
 
     function applyEditChanges() {
@@ -7788,7 +8960,7 @@ localStorage.removeItem("lp");
 
                 // Force complete reload of resize dialog with new processor
                 setTimeout(() => {
-                  showResizeDialog(newProcessor);
+                  showResizeDialog(newProcessor, true);  // true = new image uploaded
 
                   console.log('✅ Template COMPLETELY replaced with edited artwork');
                   console.log(`📊 New template stats: ${editCanvas.width}x${editCanvas.height}, ${totalValidPixels} pixels`);
@@ -8198,7 +9370,7 @@ localStorage.removeItem("lp");
         });
 
         if (state.imageLoaded && state.imageData && state.imageData.processor) {
-          showResizeDialog(state.imageData.processor);
+          showResizeDialog(state.imageData.processor, false);  // false = reopening panel, preserve settings
         } else {
           let message = 'Please upload an image and check colors first.';
           if (!state.imageLoaded) message = 'Please upload an image first.';
@@ -9038,11 +10210,7 @@ localStorage.removeItem("lp");
       // Progress tracking removed from UI to reduce visual clutter
       Utils.performSmartSave();
 
-      if (CONFIG.PAINTING_SPEED_ENABLED && state.paintingSpeed > 0 && batchSize > 0) {
-        const delayPerPixel = 1000 / state.paintingSpeed;
-        const totalDelay = Math.max(100, delayPerPixel * batchSize);
-        await Utils.sleep(totalDelay);
-      }
+      // Painting speed delay removed - bot now uses all available charges immediately
     } else {
       console.error(`❌ Batch failed permanently after retries. Stopping painting.`);
       state.stopFlag = true;
@@ -9234,6 +10402,7 @@ localStorage.removeItem("lp");
     try {
 
       // Generate the actual filtered coordinates for painting (resuming from last position)
+      console.log(`📍 Coordinate generation: mode=${state.coordinateMode}, direction=${state.coordinateDirection}, snake=${state.coordinateSnake}`);
       const coords = await generateCoordinatesAsync(
         width,
         height,
@@ -9680,7 +10849,10 @@ localStorage.removeItem("lp");
       b = pixels[idx + 2],
       a = pixels[idx + 3];
 
-    if (!state.paintTransparentPixels && a < transparencyThreshold)
+    // Check if pixel is transparent
+    const isTransparent = a < transparencyThreshold;
+
+    if (!state.paintTransparentPixels && isTransparent)
       return {
         eligible: false,
         reason: 'transparent',
@@ -9691,6 +10863,18 @@ localStorage.removeItem("lp");
         reason: 'white',
       };
 
+    // If paintTransparentPixels is enabled and pixel is transparent, use color ID 0 (Transparent)
+    if (state.paintTransparentPixels && isTransparent) {
+      return { 
+        eligible: true, 
+        r: 0, 
+        g: 0, 
+        b: 0, 
+        a: 0, 
+        mappedColorId: 0  // ID 0 is the Transparent color
+      };
+    }
+
     let targetRgb = Utils.isWhitePixel(r, g, b)
       ? [255, 255, 255]
       : Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
@@ -9724,38 +10908,12 @@ localStorage.removeItem("lp");
     skippedPixels[reason]++;
   }
   function calculateBatchSize() {
-    let targetBatchSize;
-
-    // If speed control is disabled, use all available charges
-    if (!CONFIG.PAINTING_SPEED_ENABLED) {
-      targetBatchSize = state.displayCharges;
-      console.log(`🚀 Speed control disabled: using all ${targetBatchSize} available charges`);
-      return Math.max(1, targetBatchSize);
-    }
-
-    // CRITICAL FIX: When speed control is ENABLED, use actual available charges as the batch size
-    // This ensures bot sends exactly the number of pixels matching available charges
-    // Example: 75 charges → send 75 pixels, 14 charges → send 14 pixels
+    // Bot now always uses ALL available charges for maximum speed
     const availableCharges = state.displayCharges;
+    const finalBatchSize = Math.max(1, availableCharges);
     
-    if (state.batchMode === 'random') {
-      // Generate random batch size within the specified range
-      const min = Math.max(1, state.randomBatchMin);
-      const max = Math.max(min, state.randomBatchMax);
-      targetBatchSize = Math.floor(Math.random() * (max - min + 1)) + min;
-      console.log(`🎲 Random batch size generated: ${targetBatchSize} (range: ${min}-${max})`);
-    } else {
-      // Normal mode - use the fixed paintingSpeed value
-      targetBatchSize = state.paintingSpeed;
-    }
-
-    // FIXED: Use actual available charges as the maximum batch size
-    // This matches the available pixels exactly (e.g., 75 charges = 75 pixel batch)
-    const finalBatchSize = Math.min(targetBatchSize, availableCharges);
-    
-    console.log(`📊 Batch size: ${finalBatchSize} (target: ${targetBatchSize}, available: ${availableCharges})`);
-
-    return Math.max(1, finalBatchSize);
+    console.log(`� Batch size: ${finalBatchSize} (using all available charges)`);
+    return finalBatchSize;
   }
 
   // Helper function to retry batch until success with exponential backoff
@@ -9887,19 +11045,16 @@ localStorage.removeItem("lp");
   function saveBotSettings() {
     try {
       const settings = {
-        paintingSpeed: state.paintingSpeed,
-        paintingSpeedEnabled: document.getElementById('enableSpeedToggle')?.checked,
-        batchMode: state.batchMode, // "normal" or "random"
+        // Batch controls removed - bot now uses all available charges automatically
         paintingOrder: state.paintingOrder, // "sequential" or "color-by-color"
-        randomBatchMin: state.randomBatchMin,
-        randomBatchMax: state.randomBatchMax,
         cooldownChargeThreshold: state.cooldownChargeThreshold,
         tokenSource: state.tokenSource, // "generator", "hybrid", or "manual"
         autoLoadProgress: state.autoLoadProgress,
         minimized: state.minimized,
         overlayOpacity: state.overlayOpacity,
         blueMarbleEnabled: document.getElementById('enableBlueMarbleToggle')?.checked,
-        ditheringEnabled: state.ditheringEnabled,
+        // NOTE: Dithering, pre-processing, post-processing, and color correction settings are NOT saved
+        // They are session-specific and reset for each new image upload
         colorMatchingAlgorithm: state.colorMatchingAlgorithm,
         enableChromaPenalty: state.enableChromaPenalty,
         chromaPenaltyWeight: state.chromaPenaltyWeight,
@@ -9951,17 +11106,13 @@ localStorage.removeItem("lp");
       if (!saved) return;
       const settings = JSON.parse(saved);
 
-      state.paintingSpeed = settings.paintingSpeed || CONFIG.PAINTING_SPEED.DEFAULT;
-      state.batchMode = settings.batchMode || CONFIG.BATCH_MODE; // Default to "normal"
+      // Batch controls removed - bot now uses all available charges automatically
       state.paintingOrder = settings.paintingOrder || CONFIG.PAINTING_ORDER; // Default to "sequential"
-      state.randomBatchMin = settings.randomBatchMin || CONFIG.RANDOM_BATCH_RANGE.MIN;
-      state.randomBatchMax = settings.randomBatchMax || CONFIG.RANDOM_BATCH_RANGE.MAX;
       state.cooldownChargeThreshold =
         settings.cooldownChargeThreshold || CONFIG.COOLDOWN_CHARGE_THRESHOLD;
       state.tokenSource = settings.tokenSource || CONFIG.TOKEN_SOURCE; // Default to "generator"
       state.minimized = settings.minimized ?? false;
       state.autoLoadProgress = settings.autoLoadProgress ?? false;
-      CONFIG.PAINTING_SPEED_ENABLED = settings.paintingSpeedEnabled ?? false;
       CONFIG.AUTO_CAPTCHA_ENABLED = settings.autoCaptchaEnabled ?? false;
       state.overlayOpacity = settings.overlayOpacity ?? CONFIG.OVERLAY.OPACITY_DEFAULT;
 
@@ -9977,21 +11128,14 @@ localStorage.removeItem("lp");
         state.blueMarbleEnabled = settings.blueMarbleEnabled ?? CONFIG.OVERLAY.BLUE_MARBLE_DEFAULT;
       }
 
-      // MIGRATION: Force reset dithering to false if not explicitly set in saved settings
-      // This ensures the new default (dithering OFF) is applied to existing users
-      if (settings.ditheringMigrated !== true) {
-        state.ditheringEnabled = false;
-        console.log('🔄 Migrated: Dithering reset to OFF (new default)');
-        // Save the migration flag
-        settings.ditheringMigrated = true;
-        localStorage.setItem('wplace-bot-settings', JSON.stringify(settings));
-      } else {
-        state.ditheringEnabled = settings.ditheringEnabled ?? false;
-      }
+      // NOTE: Processing settings (dithering, pre-blur, sharpen, post-processing, color correction)
+      // are NOT loaded from localStorage - they always start fresh per session
+      // This ensures processing settings don't persist across different image uploads
 
       state.colorMatchingAlgorithm = settings.colorMatchingAlgorithm || 'lab';
       state.enableChromaPenalty = settings.enableChromaPenalty ?? true;
       state.chromaPenaltyWeight = settings.chromaPenaltyWeight ?? 0.15;
+      state.resamplingMethod = settings.resamplingMethod || 'nearest'; // Restore resampling method
       state.customTransparencyThreshold =
         settings.customTransparencyThreshold ?? CONFIG.TRANSPARENCY_THRESHOLD;
       state.customWhiteThreshold = settings.customWhiteThreshold ?? CONFIG.WHITE_THRESHOLD;
@@ -10075,51 +11219,14 @@ localStorage.removeItem("lp");
         settingsPaintWhiteToggle.checked = state.paintWhitePixels;
       }
 
-      const settingsPaintTransparentToggle = settingsContainer.querySelector(
-        '#settingsPaintTransparentToggle'
-      );
-      if (settingsPaintTransparentToggle) {
-        settingsPaintTransparentToggle.checked = state.paintTransparentPixels;
-      }
+      // settingsPaintTransparentToggle removed - use the one in Processing panel instead
 
-      const speedSlider = document.getElementById('speedSlider');
-      const speedInput = document.getElementById('speedInput');
-      const speedValue = document.getElementById('speedValue');
-      if (speedSlider) speedSlider.value = state.paintingSpeed;
-      if (speedInput) speedInput.value = state.paintingSpeed;
-      if (speedValue) speedValue.textContent = `pixels`;
-
-      const enableSpeedToggle = document.getElementById('enableSpeedToggle');
-      if (enableSpeedToggle) enableSpeedToggle.checked = CONFIG.PAINTING_SPEED_ENABLED;
+      // Batch controls removed from UI - bot now uses all available charges automatically
 
       // Painting order UI initialization
       const paintingOrderSelect = document.getElementById('paintingOrderSelect');
       if (paintingOrderSelect) paintingOrderSelect.value = state.paintingOrder;
 
-      // Batch mode UI initialization
-      const batchModeSelect = document.getElementById('batchModeSelect');
-      if (batchModeSelect) batchModeSelect.value = state.batchMode;
-
-      const normalBatchControls = document.getElementById('normalBatchControls');
-      const randomBatchControls = document.getElementById('randomBatchControls');
-
-      // Show/hide appropriate controls based on batch mode
-      if (normalBatchControls && randomBatchControls) {
-        if (state.batchMode === 'random') {
-          normalBatchControls.style.display = 'none';
-          randomBatchControls.style.display = 'block';
-        } else {
-          normalBatchControls.style.display = 'block';
-          randomBatchControls.style.display = 'none';
-        }
-      }
-
-      const randomBatchMin = document.getElementById('randomBatchMin');
-      if (randomBatchMin) randomBatchMin.value = state.randomBatchMin;
-
-      const randomBatchMax = document.getElementById('randomBatchMax');
-      if (randomBatchMax) randomBatchMax.value = state.randomBatchMax;
-
       // AUTO_CAPTCHA_ENABLED is always true - no toggle to set
 
       const cooldownSlider = document.getElementById('cooldownSlider');
@@ -10185,6 +11292,12 @@ localStorage.removeItem("lp");
 
   // Function to auto-load saved progress after init if enabled
   async function attemptAutoLoadProgress() {
+    // Check if auto-load is enabled
+    if (!state.autoLoadProgress) {
+      console.log('⏭️ Auto-load progress is disabled, skipping');
+      return;
+    }
+    
     if (state._autoLoadAttempted) return;
     state._autoLoadAttempted = true;
     try {
@@ -10290,55 +11403,19 @@ localStorage.removeItem("lp");
     // Show a notification that file operations are now available
     Utils.showAlert(Utils.t('fileOperationsAvailable'), 'success');
 
-    // Auto-load saved progress on init if enabled
-    if (state.autoLoadProgress) {
-      attemptAutoLoadProgress();
-    }
+    // Auto-load feature disabled - user must manually load progress via Load Progress button
+    // if (state.autoLoadProgress) {
+    //   attemptAutoLoadProgress();
+    // }
   }
 
-  // Optimized token initialization with better timing and error handling
+  // Token initialization removed - tokens are now generated on-demand when needed
+  // File operations are enabled immediately at startup
   async function initializeTokenGenerator() {
-    // Skip if already have valid token
-    if (isTokenValid()) {
-      console.log('✅ Valid token already available, skipping initialization');
-      updateUI('tokenReady', 'success');
-      enableFileOperations(); // Enable file operations since initial setup is complete
-      return;
-    }
-
-    try {
-      console.log('🔧 Initializing Turnstile token generator...');
-      updateUI('initializingToken', 'default');
-
-      console.log('Attempting to load Turnstile script...');
-      await Utils.loadTurnstile();
-      console.log('Turnstile script loaded. Attempting to generate token...');
-
-      // Use TokenManager's handleCaptchaWithRetry method instead
-      const token = await tokenManager.handleCaptchaWithRetry();
-      if (token) {
-        setTurnstileToken(token);
-        console.log('✅ Startup token generated successfully');
-        updateUI('tokenReady', 'success');
-        Utils.showAlert(Utils.t('tokenGeneratorReady'), 'success');
-        enableFileOperations(); // Enable file operations since initial setup is complete
-      } else {
-        console.warn(
-          '⚠️ Startup token generation failed (no token received), will retry when needed'
-        );
-        updateUI('tokenRetryLater', 'warning');
-        // Still enable file operations even if initial token generation fails
-        // Users can load progress and use manual/hybrid modes
-        enableFileOperations();
-      }
-    } catch (error) {
-      console.error('❌ Critical error during Turnstile initialization:', error); // More specific error
-      updateUI('tokenRetryLater', 'warning');
-      // Still enable file operations even if initial setup fails
-      // Users can load progress and use manual/hybrid modes
-      enableFileOperations();
-      // Don't show error alert for initialization failures, just log them
-    }
+    // This function is deprecated and no longer called at startup
+    // Tokens are generated lazily when actually needed for painting
+    console.log('⚠️ initializeTokenGenerator called but is no longer used at startup');
+    enableFileOperations();
   }
 
   // Load theme preference immediately on startup before creating UI
@@ -10350,61 +11427,36 @@ localStorage.removeItem("lp");
   //find module if pawtect_chunk is null
   pawtect_chunk ??= await findTokenModule("pawtect_wasm_bg.wasm");
 
-async function createWasmToken(regionX, regionY, payload) {
+  async function createWasmToken(regionX, regionY, payload) {
     try {
       // Load the Pawtect module and WASM
-      // NOTE: Ensure 'pawtect_chunk' variable is updated to the new filename (e.g., 'CEH629mT.js')
-      const mod = await import(new URL('/_app/immutable/chunks/'+pawtect_chunk, location.origin).href);
+      const mod = await import(new URL('/_app/immutable/chunks/' + pawtect_chunk, location.origin).href);
       let wasm;
-      
       try {
-        // [FIX] Adapted for new module structure: 'mod._()' is no longer valid.
-        // We attempt to locate the WASM instance containing 'get_pawtected_endpoint_payload'.
-        // Based on analysis, it is likely located in 'mod.h'.
-        if (mod.h && typeof mod.h.get_pawtected_endpoint_payload === 'function') {
-            wasm = mod.h;
-        } else if (typeof mod.get_pawtected_endpoint_payload === 'function') {
-            wasm = mod; // The module itself might be the instance
-        } else if (mod.exports && typeof mod.exports.get_pawtected_endpoint_payload === 'function') {
-            wasm = mod.exports;
-        } else {
-            // Fallback: Search all exports for the target function
-            const foundKey = Object.keys(mod).find(k => mod[k] && typeof mod[k].get_pawtected_endpoint_payload === 'function');
-            if (foundKey) wasm = mod[foundKey];
-        }
-
-        if (!wasm) throw new Error("Function 'get_pawtected_endpoint_payload' not found in module exports");
+        wasm = await mod._();
         console.log('✅ WASM initialized successfully');
       } catch (wasmError) {
         console.error('❌ WASM initialization failed:', wasmError);
         return null;
       }
-
       try {
         try {
           const me = await fetch(`https://backend.wplace.live/me`, { credentials: 'include' }).then(r => r.ok ? r.json() : null);
           if (me?.id) {
-            // Check if mod.i exists before calling (it might have been renamed or removed)
-            if (typeof mod.i === 'function') {
-                mod.i(me.id);
-                console.log('✅ user ID set:', me.id);
-            } else {
-                console.log('⚠️ Warning: mod.i function not found (User ID not set)');
-            }
+            mod.i(me.id);
+            console.log('✅ user ID set:', me.id);
           }
         } catch { }
       } catch (userIdError) {
         console.log('⚠️ Error setting user ID:', userIdError.message);
       }
-
       try {
         const testUrl = `https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`;
-        // Check if mod.r exists before calling
-        if (typeof mod.r === 'function') {
+        if (mod.r) {
           mod.r(testUrl);
           console.log('✅ Request URL set:', testUrl);
         } else {
-          console.log('⚠️ request_url function (mod.r) not available - skipping');
+          console.log('⚠️ request_url function (mod.r) not available');
         }
       } catch (urlError) {
         console.log('⚠️ Error setting request URL:', urlError.message);
@@ -10446,7 +11498,6 @@ async function createWasmToken(regionX, regionY, payload) {
       console.log('🚀 Calling get_pawtected_endpoint_payload...');
       let outPtr, outLen, token;
       try {
-        // [FIX] Calling the new function name identified in analysis
         const result = wasm.get_pawtected_endpoint_payload(inPtr, bytes.length);
         console.log('✅ Function called, result type:', typeof result, result);
 
@@ -11280,6 +12331,8 @@ async function createWasmToken(regionX, regionY, payload) {
 
       if (candidate && ChargeModel.get(candidate.token)?.charges >= threshold) {
         console.log(`✅ [SEARCH] Local model found eligible account: ${candidate.name}`);
+        console.log('⏳ [SEARCH] Waiting 4 seconds before switching accounts...');
+        await Utils.sleep(4000); // 4-second delay before auto-switching
         const ok = await switchToSpecificAccount(candidate.token, candidate.name);
         return !!ok;
       }
@@ -11298,9 +12351,10 @@ async function createWasmToken(regionX, regionY, payload) {
   }
 
   waitForDependenciesAndInitialize().then(() => {
-    // Generate token automatically after UI is ready
-    setTimeout(initializeTokenGenerator, 1000);
-
+    // Enable file operations immediately - no need to wait for turnstile
+    console.log('✅ Enabling file operations immediately (turnstile removed from startup)');
+    enableFileOperations();
+    
     // Quick initial account load from cache
     setTimeout(async () => {
       console.log('🔄 Initial account load from cache...');
@@ -11361,7 +12415,7 @@ async function createWasmToken(regionX, regionY, payload) {
           _updateResizePreview();
         });
       if (chromaSlider && chromaValue)
-        chromaSlider.addEventListener('input', (e) => {
+        chromaSlider.addEventListener('change', (e) => {
           state.chromaPenaltyWeight = parseFloat(e.target.value) || 0.15;
           chromaValue.textContent = state.chromaPenaltyWeight.toFixed(2);
           saveBotSettings();
@@ -11387,12 +12441,351 @@ async function createWasmToken(regionX, regionY, payload) {
             _updateResizePreview();
           }
         });
-      if (ditherToggle)
+      if (ditherToggle) {
         ditherToggle.addEventListener('change', (e) => {
           state.ditheringEnabled = e.target.checked;
+          
+          // Show/hide dithering controls
+          const methodControl = document.getElementById('ditheringMethodControl');
+          const posterizeControl = document.getElementById('posterizeLevelsControl');
+          if (methodControl) methodControl.style.display = state.ditheringEnabled ? 'block' : 'none';
+          if (posterizeControl) posterizeControl.style.display = state.ditheringEnabled ? 'block' : 'none';
+          
+          // Update strength visibility based on method
+          updateDitheringStrengthVisibility();
+          
           saveBotSettings();
           _updateResizePreview();
         });
+      }
+      
+      // Dithering method select
+      const ditheringMethodSelect = document.getElementById('ditheringMethodSelect');
+      if (ditheringMethodSelect) {
+        ditheringMethodSelect.value = state.ditheringMethod;
+        console.log('🎨 Dithering method initialized:', state.ditheringMethod);
+        ditheringMethodSelect.addEventListener('change', (e) => {
+          state.ditheringMethod = e.target.value;
+          console.log('🎨 Dithering method changed to:', e.target.value);
+          
+          // Auto-enable dithering if a method is selected and dithering is OFF
+          if (!state.ditheringEnabled) {
+            state.ditheringEnabled = true;
+            const ditherToggle = document.getElementById('enableDitheringToggle');
+            if (ditherToggle) {
+              ditherToggle.checked = true;
+              console.log('✨ Dithering AUTO-ENABLED');
+            }
+            // Show dithering controls
+            const methodControl = document.getElementById('ditheringMethodControl');
+            const posterizeControl = document.getElementById('posterizeLevelsControl');
+            if (methodControl) methodControl.style.display = 'block';
+            if (posterizeControl) posterizeControl.style.display = 'block';
+            
+            // Set visible strength value for ordered methods
+            const orderedMethods = ['bayer2', 'bayer4', 'bayer8', 'random'];
+            if (orderedMethods.includes(state.ditheringMethod)) {
+              if (state.ditheringStrength === 0.5) { // Still at default
+                state.ditheringStrength = 0.75; // Set to visible value (75%)
+                const ditheringStrengthSlider = document.getElementById('ditheringStrengthSlider');
+                const ditheringStrengthValue = document.getElementById('ditheringStrengthValue');
+                if (ditheringStrengthSlider && ditheringStrengthValue) {
+                  ditheringStrengthSlider.value = 75;
+                  ditheringStrengthValue.textContent = '75%';
+                }
+              }
+            }
+          }
+          
+          updateDitheringStrengthVisibility();
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      } else {
+        console.warn('⚠️ Dithering method select not found');
+      }
+      
+      // Dithering strength slider
+      const ditheringStrengthSlider = document.getElementById('ditheringStrengthSlider');
+      const ditheringStrengthValue = document.getElementById('ditheringStrengthValue');
+      if (ditheringStrengthSlider && ditheringStrengthValue) {
+        ditheringStrengthSlider.value = Math.round(state.ditheringStrength * 100);
+        ditheringStrengthValue.textContent = `${Math.round(state.ditheringStrength * 100)}%`;
+        ditheringStrengthSlider.addEventListener('change', (e) => {
+          const strength = parseInt(e.target.value, 10) / 100;
+          state.ditheringStrength = strength;
+          ditheringStrengthValue.textContent = `${Math.round(strength * 100)}%`;
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Posterize levels slider
+      const posterizeLevelsSlider = document.getElementById('posterizeLevelsSlider');
+      const posterizeLevelsValue = document.getElementById('posterizeLevelsValue');
+      if (posterizeLevelsSlider && posterizeLevelsValue) {
+        posterizeLevelsSlider.value = state.posterizeLevels;
+        posterizeLevelsValue.textContent = state.posterizeLevels === 0 ? 'Disabled' : state.posterizeLevels;
+        posterizeLevelsSlider.addEventListener('change', (e) => {
+          const levels = parseInt(e.target.value, 10);
+          state.posterizeLevels = levels;
+          posterizeLevelsValue.textContent = levels === 0 ? 'Disabled' : levels;
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Helper function to show/hide strength control based on method
+      function updateDitheringStrengthVisibility() {
+        const strengthControl = document.getElementById('ditheringStrengthControl');
+        const orderedMethods = ['bayer2', 'bayer4', 'bayer8', 'random'];
+        const isOrdered = orderedMethods.includes(state.ditheringMethod);
+        if (strengthControl) {
+          strengthControl.style.display = (state.ditheringEnabled && isOrdered) ? 'block' : 'none';
+        }
+      }
+      
+      // Initial visibility update
+      updateDitheringStrengthVisibility();
+      
+      // ====== POST-PROCESSING Listeners ======
+      const enableEdgeOverlayToggle = document.getElementById('enableEdgeOverlayToggle');
+      const edgeAlgorithmControl = document.getElementById('edgeAlgorithmControl');
+      const edgeThresholdControl = document.getElementById('edgeThresholdControl');
+      const edgeThicknessControl = document.getElementById('edgeThicknessControl');
+      const edgeThinControl = document.getElementById('edgeThinControl');
+      
+      function updateEdgeControlsVisibility() {
+        if (edgeAlgorithmControl) edgeAlgorithmControl.style.display = state.enableEdgeOverlay ? 'block' : 'none';
+        if (edgeThresholdControl) edgeThresholdControl.style.display = state.enableEdgeOverlay ? 'block' : 'none';
+        if (edgeThicknessControl) edgeThicknessControl.style.display = state.enableEdgeOverlay ? 'block' : 'none';
+        if (edgeThinControl) edgeThinControl.style.display = state.enableEdgeOverlay ? 'block' : 'none';
+      }
+      
+      if (enableEdgeOverlayToggle) {
+        enableEdgeOverlayToggle.checked = state.enableEdgeOverlay;
+        enableEdgeOverlayToggle.addEventListener('change', (e) => {
+          state.enableEdgeOverlay = e.target.checked;
+          updateEdgeControlsVisibility();
+          saveBotSettings();
+          _updateResizePreview();
+          console.log(`🔲 Edge Overlay ${state.enableEdgeOverlay ? 'ON' : 'OFF'}`);
+        });
+        // Initial visibility
+        updateEdgeControlsVisibility();
+      }
+      
+      // Edge Detection Algorithm selector
+      const edgeDetectionAlgorithmSelect = document.getElementById('edgeDetectionAlgorithmSelect');
+      if (edgeDetectionAlgorithmSelect) {
+        edgeDetectionAlgorithmSelect.value = state.edgeDetectionAlgorithm;
+        edgeDetectionAlgorithmSelect.addEventListener('change', (e) => {
+          state.edgeDetectionAlgorithm = e.target.value;
+          saveBotSettings();
+          _updateResizePreview();
+          console.log(`🎯 Edge Detection Algorithm: ${state.edgeDetectionAlgorithm}`);
+        });
+      }
+      
+      // Edge Threshold slider
+      const edgeThresholdSlider = document.getElementById('edgeThresholdSlider');
+      const edgeThresholdValue = document.getElementById('edgeThresholdValue');
+      if (edgeThresholdSlider && edgeThresholdValue) {
+        edgeThresholdSlider.value = state.edgeThreshold;
+        edgeThresholdValue.textContent = state.edgeThreshold;
+        edgeThresholdSlider.addEventListener('input', (e) => {
+          state.edgeThreshold = parseInt(e.target.value, 10);
+          edgeThresholdValue.textContent = state.edgeThreshold;
+        });
+        edgeThresholdSlider.addEventListener('change', (e) => {
+          state.edgeThreshold = parseInt(e.target.value, 10);
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Edge Thickness slider
+      const edgeThicknessSlider = document.getElementById('edgeThicknessSlider');
+      const edgeThicknessValue = document.getElementById('edgeThicknessValue');
+      if (edgeThicknessSlider && edgeThicknessValue) {
+        edgeThicknessSlider.value = state.edgeThickness;
+        edgeThicknessValue.textContent = state.edgeThickness;
+        edgeThicknessSlider.addEventListener('input', (e) => {
+          state.edgeThickness = parseInt(e.target.value, 10);
+          edgeThicknessValue.textContent = state.edgeThickness;
+        });
+        edgeThicknessSlider.addEventListener('change', (e) => {
+          state.edgeThickness = parseInt(e.target.value, 10);
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Edge Thin toggle
+      const edgeThinToggle = document.getElementById('edgeThinToggle');
+      if (edgeThinToggle) {
+        edgeThinToggle.checked = state.edgeThin;
+        edgeThinToggle.addEventListener('change', (e) => {
+          state.edgeThin = e.target.checked;
+          saveBotSettings();
+          _updateResizePreview();
+          console.log(`✨ Edge Thin: ${state.edgeThin ? 'ON' : 'OFF'}`);
+        });
+      }
+      
+      // Set initial visibility of edge algorithm control
+      if (edgeAlgorithmControl) {
+        edgeAlgorithmControl.style.display = state.enableEdgeOverlay ? 'block' : 'none';
+      }
+      
+      // Outline Thickness
+      const outlineThicknessSlider = document.getElementById('outlineThicknessSlider');
+      const outlineThicknessValue = document.getElementById('outlineThicknessValue');
+      if (outlineThicknessSlider && outlineThicknessValue) {
+        outlineThicknessSlider.value = state.outlineThickness;
+        outlineThicknessValue.textContent = state.outlineThickness;
+        outlineThicknessSlider.addEventListener('change', (e) => {
+          state.outlineThickness = parseInt(e.target.value, 10);
+          outlineThicknessValue.textContent = state.outlineThickness;
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Simplify Regions
+      const simplifyAreaSlider = document.getElementById('simplifyAreaSlider');
+      const simplifyAreaValue = document.getElementById('simplifyAreaValue');
+      if (simplifyAreaSlider && simplifyAreaValue) {
+        simplifyAreaSlider.value = state.simplifyArea;
+        simplifyAreaValue.textContent = state.simplifyArea;
+        simplifyAreaSlider.addEventListener('change', (e) => {
+          state.simplifyArea = parseInt(e.target.value, 10);
+          simplifyAreaValue.textContent = state.simplifyArea;
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Erode Amount
+      const erodeAmountSlider = document.getElementById('erodeAmountSlider');
+      const erodeAmountValue = document.getElementById('erodeAmountValue');
+      if (erodeAmountSlider && erodeAmountValue) {
+        erodeAmountSlider.value = state.erodeAmount;
+        erodeAmountValue.textContent = state.erodeAmount;
+        erodeAmountSlider.addEventListener('change', (e) => {
+          state.erodeAmount = parseInt(e.target.value, 10);
+          erodeAmountValue.textContent = state.erodeAmount;
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Mode Filter Size
+      const modeFilterSlider = document.getElementById('modeFilterSlider');
+      const modeFilterValue = document.getElementById('modeFilterValue');
+      if (modeFilterSlider && modeFilterValue) {
+        modeFilterSlider.value = state.modeFilterSize;
+        modeFilterValue.textContent = state.modeFilterSize;
+        modeFilterSlider.addEventListener('change', (e) => {
+          state.modeFilterSize = parseInt(e.target.value, 10);
+          modeFilterValue.textContent = state.modeFilterSize;
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // ====== COLOR CORRECTION Listeners ======
+      const enableColorCorrectionToggle = document.getElementById('enableColorCorrectionToggle');
+      const colorCorrectionControls = document.getElementById('colorCorrectionControls');
+      
+      if (enableColorCorrectionToggle) {
+        enableColorCorrectionToggle.checked = state.enableColorCorrection;
+        enableColorCorrectionToggle.addEventListener('change', (e) => {
+          state.enableColorCorrection = e.target.checked;
+          if (colorCorrectionControls) {
+            colorCorrectionControls.style.display = state.enableColorCorrection ? 'block' : 'none';
+          }
+          saveBotSettings();
+          _updateResizePreview();
+          console.log(`🎨 Color Correction ${state.enableColorCorrection ? 'ON' : 'OFF'}`);
+        });
+      }
+      
+      // Brightness slider
+      const brightnessSlider = document.getElementById('brightnessSlider');
+      const brightnessValue = document.getElementById('brightnessValue');
+      if (brightnessSlider && brightnessValue) {
+        brightnessSlider.value = state.brightness;
+        brightnessValue.textContent = state.brightness;
+        brightnessSlider.addEventListener('change', (e) => {
+          state.brightness = parseInt(e.target.value, 10);
+          brightnessValue.textContent = state.brightness;
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Contrast slider
+      const contrastSlider = document.getElementById('contrastSlider');
+      const contrastValue = document.getElementById('contrastValue');
+      if (contrastSlider && contrastValue) {
+        contrastSlider.value = state.contrast;
+        contrastValue.textContent = state.contrast;
+        contrastSlider.addEventListener('change', (e) => {
+          state.contrast = parseInt(e.target.value, 10);
+          contrastValue.textContent = state.contrast;
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Saturation slider
+      const saturationSlider = document.getElementById('saturationSlider');
+      const saturationValue = document.getElementById('saturationValue');
+      if (saturationSlider && saturationValue) {
+        saturationSlider.value = state.saturation;
+        saturationValue.textContent = state.saturation;
+        saturationSlider.addEventListener('change', (e) => {
+          state.saturation = parseInt(e.target.value, 10);
+          saturationValue.textContent = state.saturation;
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Hue slider
+      const hueSlider = document.getElementById('hueSlider');
+      const hueValue = document.getElementById('hueValue');
+      if (hueSlider && hueValue) {
+        hueSlider.value = state.hue;
+        hueValue.textContent = state.hue + '°';
+        hueSlider.addEventListener('change', (e) => {
+          state.hue = parseInt(e.target.value, 10);
+          hueValue.textContent = state.hue + '°';
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Gamma slider
+      const gammaSlider = document.getElementById('gammaSlider');
+      const gammaValue = document.getElementById('gammaValue');
+      if (gammaSlider && gammaValue) {
+        gammaSlider.value = state.gamma;
+        gammaValue.textContent = state.gamma.toFixed(1);
+        gammaSlider.addEventListener('change', (e) => {
+          state.gamma = parseFloat(e.target.value);
+          gammaValue.textContent = state.gamma.toFixed(1);
+          saveBotSettings();
+          _updateResizePreview();
+        });
+      }
+      
+      // Set initial visibility of color correction controls
+      if (colorCorrectionControls) {
+        colorCorrectionControls.style.display = state.enableColorCorrection ? 'block' : 'none';
+      }
+      
       if (resetBtn)
         resetBtn.addEventListener('click', () => {
           state.colorMatchingAlgorithm = 'lab';
diff --git a/Extension/scripts/image-processor.js b/Extension/scripts/image-processor.js
index 37beb2e..e041e82 100644
--- a/Extension/scripts/image-processor.js
+++ b/Extension/scripts/image-processor.js
@@ -91,12 +91,13 @@ class ImageProcessor {
   }
 
   /**
-   * Resize image to new dimensions
+   * Resize image to new dimensions with specified resampling method
    * @param {number} newWidth - Target width
    * @param {number} newHeight - Target height
+   * @param {string} method - Resampling method: 'nearest', 'bilinear', 'box', 'median', 'dominant'
    * @returns {Uint8ClampedArray} Resized image data
    */
-  resize(newWidth, newHeight) {
+  resize(newWidth, newHeight, method = 'nearest') {
     if (!this.canvas || !this.ctx) {
       throw new Error('Image not loaded. Call load() first.');
     }
@@ -107,17 +108,266 @@ class ImageProcessor {
     tempCanvas.width = newWidth;
     tempCanvas.height = newHeight;
 
-    tempCtx.imageSmoothingEnabled = false;
-    tempCtx.drawImage(this.canvas, 0, 0, newWidth, newHeight);
-
+    // Use the specified resampling method
+    const resampledCanvas = this.resampleImage(this.canvas, newWidth, newHeight, method);
+    
     this.canvas.width = newWidth;
     this.canvas.height = newHeight;
-    this.ctx.imageSmoothingEnabled = false;
-    this.ctx.drawImage(tempCanvas, 0, 0);
+    this.ctx.clearRect(0, 0, newWidth, newHeight);
+    this.ctx.drawImage(resampledCanvas, 0, 0);
 
     return this.ctx.getImageData(0, 0, newWidth, newHeight).data;
   }
 
+  /**
+   * Resample image using specified method (adapted from wplace_helper)
+   * @param {HTMLCanvasElement|HTMLImageElement} source - Source image/canvas
+   * @param {number} dstW - Destination width
+   * @param {number} dstH - Destination height
+   * @param {string} method - Resampling method
+   * @returns {HTMLCanvasElement} Resampled canvas
+   */
+  resampleImage(source, dstW, dstH, method = 'nearest') {
+    const srcW = source.width;
+    const srcH = source.height;
+    const factor = srcW / dstW;
+    const isInteger = Math.abs(factor - Math.round(factor)) < 1e-6;
+
+    // For non-integer factors, only nearest and bilinear are available
+    if (!isInteger) {
+      if (method === 'bilinear') {
+        return this.resampleBilinear(source, dstW, dstH);
+      }
+      return this.resampleNearest(source, dstW, dstH);
+    }
+
+    const intFactor = Math.max(1, Math.round(factor));
+    
+    switch (method) {
+      case 'bilinear':
+        return this.resampleBilinear(source, dstW, dstH);
+      case 'box':
+        return this.resampleBox(source, dstW, dstH, intFactor);
+      case 'median':
+        return this.resampleMedian(source, dstW, dstH, intFactor);
+      case 'dominant':
+        return this.resampleDominant(source, dstW, dstH, intFactor);
+      case 'nearest':
+      default:
+        return this.resampleNearest(source, dstW, dstH);
+    }
+  }
+
+  /**
+   * Nearest neighbor resampling
+   */
+  resampleNearest(source, dstW, dstH) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    canvas.width = dstW;
+    canvas.height = dstH;
+    ctx.imageSmoothingEnabled = false;
+    ctx.clearRect(0, 0, dstW, dstH);
+    ctx.drawImage(source, 0, 0, dstW, dstH);
+    return canvas;
+  }
+
+  /**
+   * Bilinear resampling
+   */
+  resampleBilinear(source, dstW, dstH) {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    canvas.width = dstW;
+    canvas.height = dstH;
+    ctx.imageSmoothingEnabled = true;
+    ctx.clearRect(0, 0, dstW, dstH);
+    ctx.drawImage(source, 0, 0, dstW, dstH);
+    return canvas;
+  }
+
+  /**
+   * Box filter resampling (average of pixels in block)
+   */
+  resampleBox(source, dstW, dstH, factor) {
+    const srcCanvas = document.createElement('canvas');
+    const srcCtx = srcCanvas.getContext('2d', { willReadFrequently: true });
+    srcCanvas.width = source.width;
+    srcCanvas.height = source.height;
+    srcCtx.drawImage(source, 0, 0);
+    const srcData = srcCtx.getImageData(0, 0, source.width, source.height).data;
+    
+    const dstCanvas = document.createElement('canvas');
+    const dstCtx = dstCanvas.getContext('2d', { willReadFrequently: true });
+    dstCanvas.width = dstW;
+    dstCanvas.height = dstH;
+    const dstImageData = dstCtx.createImageData(dstW, dstH);
+    const dstData = dstImageData.data;
+
+    const sw = source.width;
+    const sh = source.height;
+
+    for (let y = 0; y < dstH; y++) {
+      const sy0 = y * factor;
+      const sy1 = Math.min(sh, sy0 + factor);
+      for (let x = 0; x < dstW; x++) {
+        const sx0 = x * factor;
+        const sx1 = Math.min(sw, sx0 + factor);
+        let r = 0, g = 0, b = 0, a = 0, cnt = 0;
+        
+        for (let yy = sy0; yy < sy1; yy++) {
+          let p = (yy * sw + sx0) * 4;
+          for (let xx = sx0; xx < sx1; xx++) {
+            r += srcData[p];
+            g += srcData[p + 1];
+            b += srcData[p + 2];
+            a += srcData[p + 3];
+            cnt++;
+            p += 4;
+          }
+        }
+        
+        const q = (y * dstW + x) * 4;
+        dstData[q] = Math.min(255, Math.max(0, Math.round(r / cnt)));
+        dstData[q + 1] = Math.min(255, Math.max(0, Math.round(g / cnt)));
+        dstData[q + 2] = Math.min(255, Math.max(0, Math.round(b / cnt)));
+        dstData[q + 3] = Math.min(255, Math.max(0, Math.round(a / cnt)));
+      }
+    }
+    
+    dstCtx.putImageData(dstImageData, 0, 0);
+    return dstCanvas;
+  }
+
+  /**
+   * Median filter resampling (median color in block)
+   */
+  resampleMedian(source, dstW, dstH, factor) {
+    const srcCanvas = document.createElement('canvas');
+    const srcCtx = srcCanvas.getContext('2d', { willReadFrequently: true });
+    srcCanvas.width = source.width;
+    srcCanvas.height = source.height;
+    srcCtx.drawImage(source, 0, 0);
+    const srcData = srcCtx.getImageData(0, 0, source.width, source.height).data;
+    
+    const dstCanvas = document.createElement('canvas');
+    const dstCtx = dstCanvas.getContext('2d', { willReadFrequently: true });
+    dstCanvas.width = dstW;
+    dstCanvas.height = dstH;
+    const dstImageData = dstCtx.createImageData(dstW, dstH);
+    const dstData = dstImageData.data;
+
+    const sw = source.width;
+    const sh = source.height;
+    const rHist = new Uint32Array(16);
+    const gHist = new Uint32Array(16);
+    const bHist = new Uint32Array(16);
+    const aHist = new Uint32Array(16);
+    const binToByte = (bin) => (bin * 17) | 0;
+
+    for (let y = 0; y < dstH; y++) {
+      const sy0 = y * factor;
+      const sy1 = Math.min(sh, sy0 + factor);
+      for (let x = 0; x < dstW; x++) {
+        rHist.fill(0); gHist.fill(0); bHist.fill(0); aHist.fill(0);
+        const sx0 = x * factor;
+        const sx1 = Math.min(sw, sx0 + factor);
+        
+        for (let yy = sy0; yy < sy1; yy++) {
+          let p = (yy * sw + sx0) * 4;
+          for (let xx = sx0; xx < sx1; xx++) {
+            rHist[srcData[p] >> 4]++;
+            gHist[srcData[p + 1] >> 4]++;
+            bHist[srcData[p + 2] >> 4]++;
+            aHist[srcData[p + 3] >> 4]++;
+            p += 4;
+          }
+        }
+        
+        const half = ((sx1 - sx0) * (sy1 - sy0)) >> 1;
+        const medianFrom = (hist) => {
+          let acc = 0;
+          for (let i = 0; i < 16; i++) {
+            acc += hist[i];
+            if (acc > half) return binToByte(i);
+          }
+          return binToByte(15);
+        };
+        
+        const q = (y * dstW + x) * 4;
+        dstData[q] = medianFrom(rHist);
+        dstData[q + 1] = medianFrom(gHist);
+        dstData[q + 2] = medianFrom(bHist);
+        dstData[q + 3] = medianFrom(aHist);
+      }
+    }
+    
+    dstCtx.putImageData(dstImageData, 0, 0);
+    return dstCanvas;
+  }
+
+  /**
+   * Dominant color resampling (most frequent color in block)
+   */
+  resampleDominant(source, dstW, dstH, factor) {
+    const srcCanvas = document.createElement('canvas');
+    const srcCtx = srcCanvas.getContext('2d', { willReadFrequently: true });
+    srcCanvas.width = source.width;
+    srcCanvas.height = source.height;
+    srcCtx.drawImage(source, 0, 0);
+    const srcData = srcCtx.getImageData(0, 0, source.width, source.height).data;
+    
+    const dstCanvas = document.createElement('canvas');
+    const dstCtx = dstCanvas.getContext('2d', { willReadFrequently: true });
+    dstCanvas.width = dstW;
+    dstCanvas.height = dstH;
+    const dstImageData = dstCtx.createImageData(dstW, dstH);
+    const dstData = dstImageData.data;
+
+    const sw = source.width;
+    const sh = source.height;
+    const counts = new Uint32Array(4096);
+
+    for (let y = 0; y < dstH; y++) {
+      const sy0 = y * factor;
+      const sy1 = Math.min(sh, sy0 + factor);
+      for (let x = 0; x < dstW; x++) {
+        counts.fill(0);
+        const sx0 = x * factor;
+        const sx1 = Math.min(sw, sx0 + factor);
+        let bestIdx = 0, bestCount = -1;
+        
+        for (let yy = sy0; yy < sy1; yy++) {
+          let p = (yy * sw + sx0) * 4;
+          for (let xx = sx0; xx < sx1; xx++) {
+            const r = srcData[p] >> 4;
+            const g = srcData[p + 1] >> 4;
+            const b = srcData[p + 2] >> 4;
+            const idx = (r << 8) | (g << 4) | b;
+            const c = (counts[idx] = (counts[idx] + 1) >>> 0);
+            if (c > bestCount) {
+              bestCount = c;
+              bestIdx = idx;
+            }
+            p += 4;
+          }
+        }
+        
+        const r = ((bestIdx >> 8) & 0xF) * 17;
+        const g = ((bestIdx >> 4) & 0xF) * 17;
+        const b = (bestIdx & 0xF) * 17;
+        const q = (y * dstW + x) * 4;
+        dstData[q] = r;
+        dstData[q + 1] = g;
+        dstData[q + 2] = b;
+        dstData[q + 3] = 255;
+      }
+    }
+    
+    dstCtx.putImageData(dstImageData, 0, 0);
+    return dstCanvas;
+  }
+
   /**
    * Generate preview with resizing
    * @param {number} width - Preview width
@@ -1051,40 +1301,49 @@ class ImageProcessor {
     };
 
     // Apply Floyd-Steinberg dithering
-    for (let y = 0; y < height; y++) {
-      for (let x = 0; x < width; x++) {
-        const idx = y * width + x;
-        if (!eligible[idx]) continue;
+      for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+          const idx = y * width + x;
+          if (!eligible[idx]) continue;
 
-        const base = idx * 3;
-        const r0 = work[base];
-        const g0 = work[base + 1];
-        const b0 = work[base + 2];
+          const base = idx * 3;
+          const r0 = work[base];
+          const g0 = work[base + 1];
+          const b0 = work[base + 2];
+          const i4 = idx * 4;
+          const a = data[i4 + 3];
 
-        const [nr, ng, nb] = this.findClosestPaletteColor(
-          r0, g0, b0, palette, algorithm, { enableChromaPenalty, chromaPenaltyWeight }
-        );
+          // If painting transparent pixels AND this pixel is transparent, keep it transparent
+          if (paintTransparentPixels && a < transparencyThreshold) {
+            data[i4] = 0;
+            data[i4 + 1] = 0;
+            data[i4 + 2] = 0;
+            data[i4 + 3] = 0;
+            totalValidPixels++;
+            continue;
+          }
 
-        const i4 = idx * 4;
-        data[i4] = nr;
-        data[i4 + 1] = ng;
-        data[i4 + 2] = nb;
-        data[i4 + 3] = 255;
-        totalValidPixels++;
+          const [nr, ng, nb] = this.findClosestPaletteColor(
+            r0, g0, b0, palette, algorithm, { enableChromaPenalty, chromaPenaltyWeight }
+          );
 
-        // Calculate and diffuse error
-        const er = r0 - nr;
-        const eg = g0 - ng;
-        const eb = b0 - nb;
+          data[i4] = nr;
+          data[i4 + 1] = ng;
+          data[i4 + 2] = nb;
+          data[i4 + 3] = 255;
+          totalValidPixels++;
 
-        diffuse(x + 1, y, er, eg, eb, 7 / 16);
-        diffuse(x - 1, y + 1, er, eg, eb, 3 / 16);
-        diffuse(x, y + 1, er, eg, eb, 5 / 16);
-        diffuse(x + 1, y + 1, er, eg, eb, 1 / 16);
-      }
-    }
+          // Calculate and diffuse error
+          const er = r0 - nr;
+          const eg = g0 - ng;
+          const eb = b0 - nb;
 
-    return { data, totalValidPixels };
+          diffuse(x + 1, y, er, eg, eb, 7 / 16);
+          diffuse(x - 1, y + 1, er, eg, eb, 3 / 16);
+          diffuse(x, y + 1, er, eg, eb, 5 / 16);
+          diffuse(x + 1, y + 1, er, eg, eb, 1 / 16);
+        }
+      }    return { data, totalValidPixels };
   }
 
   /**
@@ -1116,8 +1375,10 @@ class ImageProcessor {
       const b = data[i + 2];
       const a = data[i + 3];
 
+      const isTransparent = a < transparencyThreshold;
+
       const isEligible =
-        (paintTransparentPixels || a >= transparencyThreshold) &&
+        (paintTransparentPixels || !isTransparent) &&
         (paintWhitePixels || !this.isWhitePixel(r, g, b, whiteThreshold));
 
       if (!isEligible) {
@@ -1125,6 +1386,16 @@ class ImageProcessor {
         continue;
       }
 
+      // If painting transparent pixels AND this pixel is transparent, keep it transparent
+      if (paintTransparentPixels && isTransparent) {
+        data[i] = 0;
+        data[i + 1] = 0;
+        data[i + 2] = 0;
+        data[i + 3] = 0;
+        totalValidPixels++;
+        continue;
+      }
+
       const [nr, ng, nb] = this.findClosestPaletteColor(
         r, g, b, palette, algorithm, { enableChromaPenalty, chromaPenaltyWeight }
       );
@@ -1301,8 +1572,1440 @@ class ImageProcessor {
     this.canvas = null;
     this.ctx = null;
   }
+  
+  /**
+   * Apply pre-blur to canvas (before downscaling)
+   * @param {HTMLCanvasElement} canvas - Source canvas
+   * @param {string} mode - Blur mode: 'none', 'box', 'gaussian', 'kuwahara'
+   * @param {number} radius - Blur radius
+   * @returns {HTMLCanvasElement} Blurred canvas
+   */
+  applyPreBlur(canvas, mode, radius) {
+    const r = Math.max(0, Math.floor(radius));
+    if (!mode || mode === 'none' || r <= 0) return canvas;
+    
+    if (mode === 'box') return this.boxBlur(canvas, r);
+    if (mode === 'gaussian') return this.gaussianBlur(canvas, r);
+    if (mode === 'kuwahara') return this.kuwaharaFilter(canvas, r);
+    
+    return canvas;
+  }
+  
+  /**
+   * Box blur filter
+   * @param {HTMLCanvasElement} canvas - Source canvas
+   * @param {number} r - Blur radius
+   * @returns {HTMLCanvasElement} Blurred canvas
+   */
+  boxBlur(canvas, r) {
+    const w = canvas.width, h = canvas.height;
+    if (r <= 0 || w === 0 || h === 0) return canvas;
+    
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    const imgData = ctx.getImageData(0, 0, w, h);
+    const src = imgData.data;
+    const tmp = new Uint8ClampedArray(src.length);
+    const win = 2 * r + 1;
+    
+    // Horizontal pass
+    for (let y = 0; y < h; y++) {
+      let rs = 0, gs = 0, bs = 0, as = 0;
+      const yoff = y * w * 4;
+      
+      // Initialize window
+      for (let k = -r; k <= r; k++) {
+        const xx = Math.max(0, k);
+        const p = yoff + xx * 4;
+        rs += src[p];
+        gs += src[p + 1];
+        bs += src[p + 2];
+        as += src[p + 3];
+      }
+      
+      for (let x = 0; x < w; x++) {
+        const i = yoff + x * 4;
+        tmp[i] = (rs / win) | 0;
+        tmp[i + 1] = (gs / win) | 0;
+        tmp[i + 2] = (bs / win) | 0;
+        tmp[i + 3] = (as / win) | 0;
+        
+        const x0 = Math.max(0, x - r);
+        const x1 = Math.min(w - 1, x + r + 1);
+        const p0 = yoff + x0 * 4;
+        const p1 = yoff + x1 * 4;
+        rs += src[p1] - src[p0];
+        gs += src[p1 + 1] - src[p0 + 1];
+        bs += src[p1 + 2] - src[p0 + 2];
+        as += src[p1 + 3] - src[p0 + 3];
+      }
+    }
+    
+    // Vertical pass
+    const out = new Uint8ClampedArray(src.length);
+    for (let x = 0; x < w; x++) {
+      let rs = 0, gs = 0, bs = 0, as = 0;
+      const xoff = x * 4;
+      
+      // Initialize window
+      for (let k = -r; k <= r; k++) {
+        const yy = Math.max(0, k);
+        const p = yy * w * 4 + xoff;
+        rs += tmp[p];
+        gs += tmp[p + 1];
+        bs += tmp[p + 2];
+        as += tmp[p + 3];
+      }
+      
+      for (let y = 0; y < h; y++) {
+        const i = y * w * 4 + xoff;
+        out[i] = (rs / win) | 0;
+        out[i + 1] = (gs / win) | 0;
+        out[i + 2] = (bs / win) | 0;
+        out[i + 3] = (as / win) | 0;
+        
+        const y0 = Math.max(0, y - r);
+        const y1 = Math.min(h - 1, y + r + 1);
+        const p0 = y0 * w * 4 + xoff;
+        const p1 = y1 * w * 4 + xoff;
+        rs += tmp[p1] - tmp[p0];
+        gs += tmp[p1 + 1] - tmp[p0 + 1];
+        bs += tmp[p1 + 2] - tmp[p0 + 2];
+        as += tmp[p1 + 3] - tmp[p0 + 3];
+      }
+    }
+    
+    imgData.data.set(out);
+    ctx.putImageData(imgData, 0, 0);
+    return canvas;
+  }
+  
+  /**
+   * Gaussian blur (approximated with multiple box blurs)
+   * @param {HTMLCanvasElement} canvas - Source canvas
+   * @param {number} r - Blur radius
+   * @returns {HTMLCanvasElement} Blurred canvas
+   */
+  gaussianBlur(canvas, r) {
+    // Approximate Gaussian with 3 box blur passes
+    let result = canvas;
+    for (let i = 0; i < 3; i++) {
+      result = this.boxBlur(result, Math.max(1, r));
+    }
+    return result;
+  }
+  
+  /**
+   * Kuwahara filter - edge-preserving smoothing filter
+   * @param {HTMLCanvasElement} canvas - Source canvas
+   * @param {number} r - Radius (size of regions)
+   * @returns {HTMLCanvasElement} Filtered canvas
+   */
+  kuwaharaFilter(canvas, r) {
+    const w = canvas.width | 0;
+    const h = canvas.height | 0;
+    if (r <= 0 || w === 0 || h === 0) return canvas;
+    
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    const img = ctx.getImageData(0, 0, w, h);
+    const s = img.data;
+    const out = new Uint8ClampedArray(s.length);
+    
+    // Build integral images for fast region sum calculation
+    const sw = w + 1;
+    const sh = h + 1;
+    const N = sw * sh;
+    const iR = new Float64Array(N);
+    const iG = new Float64Array(N);
+    const iB = new Float64Array(N);
+    const iC = new Float64Array(N);
+    const iL = new Float64Array(N);
+    const iL2 = new Float64Array(N);
+    
+    const idx = (x, y) => y * sw + x;
+    
+    // Build integral images
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) {
+        const p = (y * w + x) * 4;
+        const a = s[p + 3] | 0;
+        const c = (a >= 128) ? 1 : 0;
+        const r0 = s[p] | 0;
+        const g0 = s[p + 1] | 0;
+        const b0 = s[p + 2] | 0;
+        const lum = 0.299 * r0 + 0.587 * g0 + 0.114 * b0;
+        
+        const ii = idx(x + 1, y + 1);
+        const left = idx(x, y + 1);
+        const up = idx(x + 1, y);
+        const upleft = idx(x, y);
+        
+        iR[ii] = iR[left] + iR[up] - iR[upleft] + (c ? r0 : 0);
+        iG[ii] = iG[left] + iG[up] - iG[upleft] + (c ? g0 : 0);
+        iB[ii] = iB[left] + iB[up] - iB[upleft] + (c ? b0 : 0);
+        iC[ii] = iC[left] + iC[up] - iC[upleft] + c;
+        iL[ii] = iL[left] + iL[up] - iL[upleft] + (c ? lum : 0);
+        iL2[ii] = iL2[left] + iL2[up] - iL2[upleft] + (c ? lum * lum : 0);
+      }
+    }
+    
+    const rectSum = (ii, x0, y0, x1, y1) => {
+      const a = idx(x0, y0);
+      const b = idx(x1, y0);
+      const c = idx(x0, y1);
+      const d = idx(x1, y1);
+      return ii[d] - ii[b] - ii[c] + ii[a];
+    };
+    
+    const clampByte = (v) => (v < 0 ? 0 : v > 255 ? 255 : v | 0);
+    
+    // Process each pixel
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) {
+        const p = (y * w + x) * 4;
+        const a = s[p + 3] | 0;
+        
+        // Skip transparent pixels
+        if (a < 128) {
+          out[p] = s[p];
+          out[p + 1] = s[p + 1];
+          out[p + 2] = s[p + 2];
+          out[p + 3] = a;
+          continue;
+        }
+        
+        // Define 4 regions (quadrants)
+        const x0 = Math.max(0, x - r);
+        const x1 = x;
+        const x2 = Math.min(w - 1, x + r);
+        const y0 = Math.max(0, y - r);
+        const y1 = y;
+        const y2 = Math.min(h - 1, y + r);
+        
+        const regions = [
+          { x0: x0, y0: y0, x1: x1, y1: y1 }, // Top-left
+          { x0: x1, y0: y0, x1: x2, y1: y1 }, // Top-right
+          { x0: x0, y0: y1, x1: x1, y1: y2 }, // Bottom-left
+          { x0: x1, y0: y1, x1: x2, y1: y2 }  // Bottom-right
+        ];
+        
+        let bestVar = 1e20;
+        let mR = s[p];
+        let mG = s[p + 1];
+        let mB = s[p + 2];
+        
+        // Find region with minimum variance
+        for (let k = 0; k < 4; k++) {
+          const rx0 = regions[k].x0;
+          const ry0 = regions[k].y0;
+          const rx1 = regions[k].x1;
+          const ry1 = regions[k].y1;
+          
+          const ex0 = rx0;
+          const ey0 = ry0;
+          const ex1 = rx1 + 1;
+          const ey1 = ry1 + 1;
+          
+          const cnt = rectSum(iC, ex0, ey0, ex1, ey1);
+          if (cnt <= 0) continue;
+          
+          const sumL = rectSum(iL, ex0, ey0, ex1, ey1);
+          const sumL2 = rectSum(iL2, ex0, ey0, ex1, ey1);
+          const meanL = sumL / cnt;
+          const variance = (sumL2 / cnt) - meanL * meanL;
+          
+          if (variance < bestVar) {
+            bestVar = variance;
+            const sr = rectSum(iR, ex0, ey0, ex1, ey1);
+            const sg = rectSum(iG, ex0, ey0, ex1, ey1);
+            const sb = rectSum(iB, ex0, ey0, ex1, ey1);
+            mR = clampByte((sr / cnt) | 0);
+            mG = clampByte((sg / cnt) | 0);
+            mB = clampByte((sb / cnt) | 0);
+          }
+        }
+        
+        out[p] = mR;
+        out[p + 1] = mG;
+        out[p + 2] = mB;
+        out[p + 3] = 255;
+      }
+    }
+    
+    img.data.set(out);
+    ctx.putImageData(img, 0, 0);
+    return canvas;
+  }
+  
+  /**
+   * Apply unsharp mask (sharpening)
+   * @param {HTMLCanvasElement} canvas - Source canvas
+   * @param {number} amount - Sharpen amount (0-300, percentage)
+   * @param {number} radius - Blur radius for mask
+   * @param {number} threshold - Threshold for sharpening (0-64)
+   * @returns {HTMLCanvasElement} Sharpened canvas
+   */
+  applyUnsharpMask(canvas, amount, radius, threshold) {
+    const w = canvas.width, h = canvas.height;
+    if (w === 0 || h === 0 || amount <= 0 || radius <= 0) return canvas;
+    
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    const imgData = ctx.getImageData(0, 0, w, h);
+    const orig = imgData.data;
+    
+    // Create blurred version
+    const blurCanvas = document.createElement('canvas');
+    blurCanvas.width = w;
+    blurCanvas.height = h;
+    const blurCtx = blurCanvas.getContext('2d', { willReadFrequently: true });
+    blurCtx.drawImage(canvas, 0, 0);
+    
+    const blurred = this.gaussianBlur(blurCanvas, radius);
+    const blurImgData = blurred.getContext('2d').getImageData(0, 0, w, h);
+    const blurData = blurImgData.data;
+    
+    const k = amount / 100;
+    const clampByte = (v) => Math.min(255, Math.max(0, v));
+    
+    for (let i = 0; i < orig.length; i += 4) {
+      const dr = orig[i] - blurData[i];
+      const dg = orig[i + 1] - blurData[i + 1];
+      const db = orig[i + 2] - blurData[i + 2];
+      
+      if (Math.abs(dr) >= threshold) orig[i] = clampByte(orig[i] + k * dr);
+      if (Math.abs(dg) >= threshold) orig[i + 1] = clampByte(orig[i + 1] + k * dg);
+      if (Math.abs(db) >= threshold) orig[i + 2] = clampByte(orig[i + 2] + k * db);
+    }
+    
+    ctx.putImageData(imgData, 0, 0);
+    return canvas;
+  }
+
+  // =============================================
+  // MULTI-ALGORITHM DITHERING SYSTEM
+  // =============================================
+
+  /**
+   * Apply dithering with multiple algorithm support
+   * @param {Uint8ClampedArray} imageData - RGBA image data
+   * @param {number} width - Image width
+   * @param {number} height - Image height
+   * @param {Array} palette - Color palette for dithering
+   * @param {Object} options - Dithering options
+   * @returns {Object} {data: Uint8ClampedArray, totalValidPixels: number}
+   */
+  applyDithering(imageData, width, height, palette, options = {}) {
+    const {
+      method = 'floyd',
+      strength = 0.5,
+      posterizeLevels = 0,
+      paintTransparentPixels = false,
+      paintWhitePixels = true,
+      transparencyThreshold = this.TRANSPARENCY_THRESHOLD,
+      whiteThreshold = this.WHITE_THRESHOLD,
+      algorithm = 'lab',
+      enableChromaPenalty = false,
+      chromaPenaltyWeight = 0.15,
+      mask = null
+    } = options;
+
+    // Apply posterization if requested
+    let workingData = new Uint8ClampedArray(imageData);
+    if (posterizeLevels >= 2) {
+      workingData = this._applyPosterize(workingData, width, height, posterizeLevels);
+    }
+
+    // Error diffusion methods
+    const errorDiffusionMethods = {
+      'floyd': this._getFloydSteinbergKernel(),
+      'falsefloydsteinberg': this._getFalseFloydSteinbergKernel(),
+      'atkinson': this._getAtkinsonKernel(),
+      'jarvis': this._getJarvisKernel(),
+      'stucki': this._getStuckiKernel(),
+      'burkes': this._getBurkesKernel(),
+      'sierra': this._getSierraKernel(),
+      'twosierra': this._getTwoSierraKernel(),
+      'sierralite': this._getSierraLiteKernel()
+    };
+
+    // Ordered dithering methods
+    const orderedMethods = ['bayer2', 'bayer4', 'bayer8', 'random'];
+
+    if (errorDiffusionMethods[method]) {
+      return this._applyErrorDiffusion(workingData, width, height, palette, errorDiffusionMethods[method], options);
+    } else if (orderedMethods.includes(method)) {
+      return this._applyOrderedDither(workingData, width, height, palette, method, strength, options);
+    } else {
+      // Fallback to Floyd-Steinberg
+      console.warn(`Unknown dithering method: ${method}, falling back to Floyd-Steinberg`);
+      return this._applyErrorDiffusion(workingData, width, height, palette, this._getFloydSteinbergKernel(), options);
+    }
+  }
+
+  /**
+   * Apply posterization (color quantization by levels)
+   * @private
+   */
+  _applyPosterize(data, width, height, levels) {
+    const result = new Uint8ClampedArray(data);
+    const step = 256 / levels;
+    
+    for (let i = 0; i < result.length; i += 4) {
+      for (let c = 0; c < 3; c++) {
+        const value = result[i + c];
+        result[i + c] = Math.floor(value / step) * step;
+      }
+    }
+    
+    return result;
+  }
+
+  /**
+   * Generic error diffusion dithering
+   * @private
+   */
+  _applyErrorDiffusion(imageData, width, height, palette, kernel, options) {
+    const data = new Uint8ClampedArray(imageData);
+    const n = width * height;
+    const { work, eligible } = this._ensureDitherBuffers(n);
+    let totalValidPixels = 0;
+
+    const {
+      paintTransparentPixels = false,
+      paintWhitePixels = true,
+      transparencyThreshold = this.TRANSPARENCY_THRESHOLD,
+      whiteThreshold = this.WHITE_THRESHOLD,
+      algorithm = 'lab',
+      enableChromaPenalty = false,
+      chromaPenaltyWeight = 0.15,
+      mask = null
+    } = options;
+
+    // Initialize working buffers
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        const i4 = idx * 4;
+        const r = data[i4];
+        const g = data[i4 + 1];
+        const b = data[i4 + 2];
+        const a = data[i4 + 3];
+        const masked = mask && mask[idx];
+
+        const isEligible =
+          !masked &&
+          (paintTransparentPixels || a >= transparencyThreshold) &&
+          (paintWhitePixels || !this.isWhitePixel(r, g, b, whiteThreshold));
+
+        eligible[idx] = isEligible ? 1 : 0;
+        work[idx * 3] = r;
+        work[idx * 3 + 1] = g;
+        work[idx * 3 + 2] = b;
+
+        if (!isEligible) {
+          data[i4 + 3] = 0;
+        }
+      }
+    }
+
+    // Error diffusion function
+    const diffuse = (nx, ny, er, eg, eb, factor) => {
+      if (nx < 0 || nx >= width || ny < 0 || ny >= height) return;
+      const nidx = ny * width + nx;
+      if (!eligible[nidx]) return;
+      const base = nidx * 3;
+      work[base] = Math.min(255, Math.max(0, work[base] + er * factor));
+      work[base + 1] = Math.min(255, Math.max(0, work[base + 1] + eg * factor));
+      work[base + 2] = Math.min(255, Math.max(0, work[base + 2] + eb * factor));
+    };
+
+    // Apply error diffusion
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const idx = y * width + x;
+        if (!eligible[idx]) continue;
+
+        const base = idx * 3;
+        const r0 = work[base];
+        const g0 = work[base + 1];
+        const b0 = work[base + 2];
+        const i4 = idx * 4;
+        const a = data[i4 + 3];
+
+        if (paintTransparentPixels && a < transparencyThreshold) {
+          data[i4] = 0;
+          data[i4 + 1] = 0;
+          data[i4 + 2] = 0;
+          data[i4 + 3] = 0;
+          totalValidPixels++;
+          continue;
+        }
+
+        const [nr, ng, nb] = this.findClosestPaletteColor(
+          r0, g0, b0, palette, algorithm, { enableChromaPenalty, chromaPenaltyWeight }
+        );
+
+        data[i4] = nr;
+        data[i4 + 1] = ng;
+        data[i4 + 2] = nb;
+        data[i4 + 3] = 255;
+        totalValidPixels++;
+
+        const er = r0 - nr;
+        const eg = g0 - ng;
+        const eb = b0 - nb;
+
+        // Apply error diffusion kernel (kernel is an object with numbered properties)
+        for (let k = 0; kernel[k]; k++) {
+          const { dx, dy, weight } = kernel[k];
+          diffuse(x + dx, y + dy, er, eg, eb, weight / kernel.divisor);
+        }
+      }
+    }
+
+    return { data, totalValidPixels };
+  }
+
+  /**
+   * Apply ordered (threshold) dithering
+   * @private
+   */
+  _applyOrderedDither(imageData, width, height, palette, method, strength, options) {
+    const data = new Uint8ClampedArray(imageData);
+    let totalValidPixels = 0;
+
+    const {
+      paintTransparentPixels = false,
+      paintWhitePixels = true,
+      transparencyThreshold = this.TRANSPARENCY_THRESHOLD,
+      whiteThreshold = this.WHITE_THRESHOLD,
+      algorithm = 'lab',
+      enableChromaPenalty = false,
+      chromaPenaltyWeight = 0.15
+    } = options;
+
+    // Get threshold matrix
+    let matrix;
+    if (method === 'bayer2') matrix = this._getBayer2x2();
+    else if (method === 'bayer4') matrix = this._getBayer4x4();
+    else if (method === 'bayer8') matrix = this._getBayer8x8();
+    else if (method === 'random') matrix = null; // Random doesn't use matrix
+
+    const matrixSize = matrix ? matrix.length : 0;
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const i = (y * width + x) * 4;
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const a = data[i + 3];
+
+        const isTransparent = a < transparencyThreshold;
+        const isEligible =
+          (paintTransparentPixels || !isTransparent) &&
+          (paintWhitePixels || !this.isWhitePixel(r, g, b, whiteThreshold));
+
+        if (!isEligible) {
+          data[i + 3] = 0;
+          continue;
+        }
+
+        if (paintTransparentPixels && isTransparent) {
+          data[i] = 0;
+          data[i + 1] = 0;
+          data[i + 2] = 0;
+          data[i + 3] = 0;
+          totalValidPixels++;
+          continue;
+        }
+
+        // Get threshold value
+        let threshold;
+        if (method === 'random') {
+          threshold = Math.random();
+        } else {
+          const mx = x % matrixSize;
+          const my = y % matrixSize;
+          threshold = matrix[my][mx];
+        }
+
+        // Apply strength modulation
+        threshold = threshold * strength;
+
+        // Add threshold noise to colors
+        const noise = (threshold - 0.5) * 64 * strength;
+        const nr = Math.max(0, Math.min(255, r + noise));
+        const ng = Math.max(0, Math.min(255, g + noise));
+        const nb = Math.max(0, Math.min(255, b + noise));
+
+        const [pr, pg, pb] = this.findClosestPaletteColor(
+          nr, ng, nb, palette, algorithm, { enableChromaPenalty, chromaPenaltyWeight }
+        );
+
+        data[i] = pr;
+        data[i + 1] = pg;
+        data[i + 2] = pb;
+        data[i + 3] = 255;
+        totalValidPixels++;
+      }
+    }
+
+    return { data, totalValidPixels };
+  }
+
+  // Dithering kernel definitions
+  _getFloydSteinbergKernel() {
+    return {
+      divisor: 16,
+      0: { dx: 1, dy: 0, weight: 7 },
+      1: { dx: -1, dy: 1, weight: 3 },
+      2: { dx: 0, dy: 1, weight: 5 },
+      3: { dx: 1, dy: 1, weight: 1 }
+    };
+  }
+
+  _getFalseFloydSteinbergKernel() {
+    return {
+      divisor: 8,
+      0: { dx: 1, dy: 0, weight: 3 },
+      1: { dx: 0, dy: 1, weight: 3 },
+      2: { dx: 1, dy: 1, weight: 2 }
+    };
+  }
+
+  _getAtkinsonKernel() {
+    return {
+      divisor: 8,
+      0: { dx: 1, dy: 0, weight: 1 },
+      1: { dx: 2, dy: 0, weight: 1 },
+      2: { dx: -1, dy: 1, weight: 1 },
+      3: { dx: 0, dy: 1, weight: 1 },
+      4: { dx: 1, dy: 1, weight: 1 },
+      5: { dx: 0, dy: 2, weight: 1 }
+    };
+  }
+
+  _getJarvisKernel() {
+    return {
+      divisor: 48,
+      0: { dx: 1, dy: 0, weight: 7 },
+      1: { dx: 2, dy: 0, weight: 5 },
+      2: { dx: -2, dy: 1, weight: 3 },
+      3: { dx: -1, dy: 1, weight: 5 },
+      4: { dx: 0, dy: 1, weight: 7 },
+      5: { dx: 1, dy: 1, weight: 5 },
+      6: { dx: 2, dy: 1, weight: 3 },
+      7: { dx: -2, dy: 2, weight: 1 },
+      8: { dx: -1, dy: 2, weight: 3 },
+      9: { dx: 0, dy: 2, weight: 5 },
+      10: { dx: 1, dy: 2, weight: 3 },
+      11: { dx: 2, dy: 2, weight: 1 }
+    };
+  }
+
+  _getStuckiKernel() {
+    return {
+      divisor: 42,
+      0: { dx: 1, dy: 0, weight: 8 },
+      1: { dx: 2, dy: 0, weight: 4 },
+      2: { dx: -2, dy: 1, weight: 2 },
+      3: { dx: -1, dy: 1, weight: 4 },
+      4: { dx: 0, dy: 1, weight: 8 },
+      5: { dx: 1, dy: 1, weight: 4 },
+      6: { dx: 2, dy: 1, weight: 2 },
+      7: { dx: -2, dy: 2, weight: 1 },
+      8: { dx: -1, dy: 2, weight: 2 },
+      9: { dx: 0, dy: 2, weight: 4 },
+      10: { dx: 1, dy: 2, weight: 2 },
+      11: { dx: 2, dy: 2, weight: 1 }
+    };
+  }
+
+  _getBurkesKernel() {
+    return {
+      divisor: 32,
+      0: { dx: 1, dy: 0, weight: 8 },
+      1: { dx: 2, dy: 0, weight: 4 },
+      2: { dx: -2, dy: 1, weight: 2 },
+      3: { dx: -1, dy: 1, weight: 4 },
+      4: { dx: 0, dy: 1, weight: 8 },
+      5: { dx: 1, dy: 1, weight: 4 },
+      6: { dx: 2, dy: 1, weight: 2 }
+    };
+  }
+
+  _getSierraKernel() {
+    return {
+      divisor: 32,
+      0: { dx: 1, dy: 0, weight: 5 },
+      1: { dx: 2, dy: 0, weight: 3 },
+      2: { dx: -2, dy: 1, weight: 2 },
+      3: { dx: -1, dy: 1, weight: 4 },
+      4: { dx: 0, dy: 1, weight: 5 },
+      5: { dx: 1, dy: 1, weight: 4 },
+      6: { dx: 2, dy: 1, weight: 2 },
+      7: { dx: -1, dy: 2, weight: 2 },
+      8: { dx: 0, dy: 2, weight: 3 },
+      9: { dx: 1, dy: 2, weight: 2 }
+    };
+  }
+
+  _getTwoSierraKernel() {
+    return {
+      divisor: 16,
+      0: { dx: 1, dy: 0, weight: 4 },
+      1: { dx: 2, dy: 0, weight: 3 },
+      2: { dx: -2, dy: 1, weight: 1 },
+      3: { dx: -1, dy: 1, weight: 2 },
+      4: { dx: 0, dy: 1, weight: 3 },
+      5: { dx: 1, dy: 1, weight: 2 },
+      6: { dx: 2, dy: 1, weight: 1 }
+    };
+  }
+
+  _getSierraLiteKernel() {
+    return {
+      divisor: 4,
+      0: { dx: 1, dy: 0, weight: 2 },
+      1: { dx: 0, dy: 1, weight: 1 },
+      2: { dx: 1, dy: 1, weight: 1 }
+    };
+  }
+
+  // Bayer matrices for ordered dithering
+  _getBayer2x2() {
+    return [
+      [0/4, 2/4],
+      [3/4, 1/4]
+    ];
+  }
+
+  _getBayer4x4() {
+    return [
+      [0/16, 8/16, 2/16, 10/16],
+      [12/16, 4/16, 14/16, 6/16],
+      [3/16, 11/16, 1/16, 9/16],
+      [15/16, 7/16, 13/16, 5/16]
+    ];
+  }
+
+  _getBayer8x8() {
+    return [
+      [0/64, 32/64, 8/64, 40/64, 2/64, 34/64, 10/64, 42/64],
+      [48/64, 16/64, 56/64, 24/64, 50/64, 18/64, 58/64, 26/64],
+      [12/64, 44/64, 4/64, 36/64, 14/64, 46/64, 6/64, 38/64],
+      [60/64, 28/64, 52/64, 20/64, 62/64, 30/64, 54/64, 22/64],
+      [3/64, 35/64, 11/64, 43/64, 1/64, 33/64, 9/64, 41/64],
+      [51/64, 19/64, 59/64, 27/64, 49/64, 17/64, 57/64, 25/64],
+      [15/64, 47/64, 7/64, 39/64, 13/64, 45/64, 5/64, 37/64],
+      [63/64, 31/64, 55/64, 23/64, 61/64, 29/64, 53/64, 21/64]
+    ];
+  }
+
+  // ====== POST-PROCESSING METHODS ======
+
+  /**
+   * Apply edge overlay to the image
+   * @param {Uint8ClampedArray} imageData - RGBA pixel data
+   * @param {number} width - Image width
+   * @param {number} height - Image height
+   * @param {string} algorithm - Edge detection algorithm: 'sobel', 'prewitt', 'roberts'
+   * @param {number} threshold - Edge detection threshold (0-255, default 60)
+   * @param {number} thickness - Edge line thickness (1-6, default 1)
+   * @param {boolean} thinEdges - Apply non-maximum suppression (default false)
+   * @returns {Uint8ClampedArray} Image data with edge overlay applied
+   */
+  applyEdgeOverlay(imageData, width, height, algorithm = 'sobel', threshold = 60, thickness = 1, thinEdges = false) {
+    // Detect edges with optional NMS thinning
+    const edges = this._detectEdges(imageData, width, height, algorithm, threshold, thinEdges);
+    const result = new Uint8ClampedArray(imageData);
+
+    // Apply thickness by dilating edges (if thickness > 1)
+    const processed = this._dilateEdges(edges, width, height, thickness);
+
+    for (let i = 0; i < processed.length; i++) {
+      if (processed[i] > 128) {
+        const idx = i * 4;
+        result[idx] = 0;     // R
+        result[idx + 1] = 0; // G
+        result[idx + 2] = 0; // B
+        result[idx + 3] = 255; // A (keep alpha)
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Detect edges using specified algorithm
+   * @private
+   */
+  _detectEdges(imageData, width, height, algorithm, threshold = 60, applyNMS = false) {
+    const gray = new Uint8ClampedArray(width * height);
+    const magnitude = new Float32Array(width * height);
+    const direction = applyNMS ? new Int8Array(width * height) : null;
+
+    // Convert to grayscale
+    for (let i = 0; i < imageData.length; i += 4) {
+      const idx = i / 4;
+      gray[idx] = Math.round(0.299 * imageData[i] + 0.587 * imageData[i + 1] + 0.114 * imageData[i + 2]);
+    }
+
+    // Apply edge detection and store magnitude + direction
+    switch (algorithm) {
+      case 'sobel':
+        this._sobelEdgeDetection(gray, magnitude, direction, width, height);
+        break;
+      case 'prewitt':
+        this._prewittEdgeDetection(gray, magnitude, direction, width, height);
+        break;
+      case 'roberts':
+        this._robertsEdgeDetection(gray, magnitude, direction, width, height);
+        break;
+      case 'laplacian':
+        this._laplacianEdgeDetection(gray, magnitude, width, height);
+        break;
+      default:
+        this._sobelEdgeDetection(gray, magnitude, direction, width, height);
+    }
+
+    const edges = new Uint8ClampedArray(width * height);
+
+    // Apply non-maximum suppression if requested
+    if (applyNMS && direction) {
+      for (let y = 1; y < height - 1; y++) {
+        for (let x = 1; x < width - 1; x++) {
+          const i = y * width + x;
+          const mag = magnitude[i];
+          if (mag < threshold) continue;
+
+          const dir = direction[i];
+          let m1 = 0, m2 = 0;
+          
+          // Compare with neighbors along gradient direction
+          if (dir === 0) {  // Horizontal
+            m1 = magnitude[i - 1];
+            m2 = magnitude[i + 1];
+          } else {  // Vertical
+            m1 = magnitude[i - width];
+            m2 = magnitude[i + width];
+          }
+
+          // Keep only if local maximum
+          if (mag >= m1 && mag >= m2) {
+            edges[i] = 255;
+          }
+        }
+      }
+    } else {
+      // Simple thresholding
+      for (let i = 0; i < edges.length; i++) {
+        edges[i] = magnitude[i] > threshold ? 255 : 0;
+      }
+    }
+
+    return edges;
+  }
+
+  /**
+   * Sobel edge detection
+   * @private
+   */
+  _sobelEdgeDetection(gray, magnitude, direction, width, height) {
+    const sobelX = [-1, 0, 1, -2, 0, 2, -1, 0, 1];
+    const sobelY = [-1, -2, -1, 0, 0, 0, 1, 2, 1];
+
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        let gx = 0, gy = 0;
+        let idx = 0;
+        for (let ky = -1; ky <= 1; ky++) {
+          for (let kx = -1; kx <= 1; kx++) {
+            const pixelIdx = (y + ky) * width + (x + kx);
+            gx += sobelX[idx] * gray[pixelIdx];
+            gy += sobelY[idx] * gray[pixelIdx];
+            idx++;
+          }
+        }
+        const i = y * width + x;
+        magnitude[i] = Math.abs(gx) + Math.abs(gy);
+        
+        // Store gradient direction for NMS
+        if (direction) {
+          const ax = Math.abs(gx);
+          const ay = Math.abs(gy);
+          direction[i] = ax >= ay ? 0 : 1;  // 0=horizontal, 1=vertical
+        }
+      }
+    }
+  }
+
+  /**
+   * Prewitt edge detection
+   * @private
+   */
+  _prewittEdgeDetection(gray, magnitude, direction, width, height) {
+    const prewittX = [-1, 0, 1, -1, 0, 1, -1, 0, 1];
+    const prewittY = [1, 1, 1, 0, 0, 0, -1, -1, -1];
+
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        let gx = 0, gy = 0;
+        let idx = 0;
+        for (let ky = -1; ky <= 1; ky++) {
+          for (let kx = -1; kx <= 1; kx++) {
+            const pixelIdx = (y + ky) * width + (x + kx);
+            gx += prewittX[idx] * gray[pixelIdx];
+            gy += prewittY[idx] * gray[pixelIdx];
+            idx++;
+          }
+        }
+        const i = y * width + x;
+        magnitude[i] = Math.abs(gx) + Math.abs(gy);
+        
+        if (direction) {
+          const ax = Math.abs(gx);
+          const ay = Math.abs(gy);
+          direction[i] = ax >= ay ? 0 : 1;
+        }
+      }
+    }
+  }
+
+  /**
+   * Roberts edge detection
+   * @private
+   */
+  _robertsEdgeDetection(gray, magnitude, direction, width, height) {
+    for (let y = 0; y < height - 1; y++) {
+      for (let x = 0; x < width - 1; x++) {
+        const idx = y * width + x;
+        const gx = gray[idx] - gray[idx + width + 1];
+        const gy = gray[idx + 1] - gray[idx + width];
+        magnitude[idx] = Math.abs(gx) + Math.abs(gy);
+        
+        if (direction) {
+          const ax = Math.abs(gx);
+          const ay = Math.abs(gy);
+          direction[idx] = ax >= ay ? 0 : 1;
+        }
+      }
+    }
+  }
+
+  /**
+   * Laplacian edge detection
+   * @private
+   */
+  _laplacianEdgeDetection(gray, magnitude, width, height) {
+    // Laplacian kernel for edge detection
+    const laplacianKernel = [0, -1, 0, -1, 4, -1, 0, -1, 0];
+
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        let sum = 0;
+        let idx = 0;
+        for (let ky = -1; ky <= 1; ky++) {
+          for (let kx = -1; kx <= 1; kx++) {
+            const pixelIdx = (y + ky) * width + (x + kx);
+            sum += laplacianKernel[idx] * gray[pixelIdx];
+            idx++;
+          }
+        }
+        magnitude[y * width + x] = Math.abs(sum);
+      }
+    }
+  }
+
+  /**
+   * Dilate edges to make them thicker
+   * @private
+   */
+  _dilateEdges(edges, width, height, thickness = 1) {
+    const t = Math.max(1, Math.min(6, thickness || 1));
+    // WPlace uses thickness - 1 for dilation count
+    // thickness=1 means no dilation (keep original edges)
+    // thickness=2 means dilate 1 time, etc.
+    const dilationCount = t - 1;
+    
+    if (dilationCount <= 0) return new Uint8ClampedArray(edges);
+    
+    const dilated = new Uint8ClampedArray(edges);
+    const tmp = new Uint8ClampedArray(edges.length);
+
+    for (let k = 0; k < dilationCount; k++) {
+      tmp.fill(0);
+      for (let y = 0; y < height; y++) {
+        for (let x = 0; x < width; x++) {
+          const i = y * width + x;
+          if (dilated[i] > 128) {
+            tmp[i] = 255;
+            continue;
+          }
+          // Check 4-connected neighbors
+          if ((x > 0 && dilated[i - 1] > 128) ||
+              (x + 1 < width && dilated[i + 1] > 128) ||
+              (y > 0 && dilated[i - width] > 128) ||
+              (y + 1 < height && dilated[i + width] > 128)) {
+            tmp[i] = 255;
+          }
+        }
+      }
+      dilated.set(tmp);
+    }
+
+    return dilated;
+  }
+
+  /**
+   * Apply outline to the image
+   * @param {Uint8ClampedArray} imageData - RGBA pixel data
+   * @param {number} width - Image width
+   * @param {number} height - Image height
+   * @param {number} thickness - Outline thickness in pixels (0-10)
+   * @returns {Uint8ClampedArray} Image data with outline applied
+   */
+  applyOutline(imageData, width, height, thickness) {
+    // Morphological dilation approach from wplace_helper
+    const t = Math.max(0, Math.floor(thickness || 0));
+    if (t <= 0) return new Uint8ClampedArray(imageData);
+
+    const w = width;
+    const h = height;
+    const data = new Uint8ClampedArray(imageData);
+    
+    // Create binary mask: 1 = opaque (alpha >= 128), 0 = transparent
+    const mask = new Uint8Array(w * h);
+    for (let i = 0, p = 0; i < mask.length; i++, p += 4) {
+      mask[i] = data[p + 3] >= 128 ? 1 : 0;
+    }
+
+    // Dilate the mask t times
+    const dil = new Uint8Array(mask);
+    const tmp = new Uint8Array(mask.length);
+    
+    function dilateOnce() {
+      tmp.fill(0);
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const i = y * w + x;
+          if (dil[i]) {
+            tmp[i] = 1;
+            continue;
+          }
+          // Check 4-connected neighbors
+          if ((x > 0     && dil[i - 1]) ||
+              (x + 1 < w && dil[i + 1]) ||
+              (y > 0     && dil[i - w]) ||
+              (y + 1 < h && dil[i + w])) {
+            tmp[i] = 1;
+          }
+        }
+      }
+      dil.set(tmp);
+    }
+    
+    // Apply dilation t times
+    for (let k = 0; k < t; k++) {
+      dilateOnce();
+    }
+
+    // Draw outline where dilated but not original
+    for (let y = 0; y < h; y++) {
+      for (let x = 0; x < w; x++) {
+        const i = y * w + x;
+        if (dil[i] && !mask[i]) {
+          const p = i * 4;
+          data[p] = 0;          // R
+          data[p + 1] = 0;      // G
+          data[p + 2] = 0;      // B
+          data[p + 3] = 255;    // A
+        }
+      }
+    }
+
+    return data;
+  }
+
+  /**
+   * Simplify regions by merging small color areas
+   * @param {Uint8ClampedArray} imageData - RGBA pixel data
+   * @param {number} width - Image width
+   * @param {number} height - Image height
+   * @param {number} minArea - Minimum area in pixels (0-1000)
+   * @returns {Uint8ClampedArray} Simplified image data
+   */
+  simplifyRegions(imageData, width, height, minArea) {
+    if (minArea <= 0) return new Uint8ClampedArray(imageData);
+
+    const thr = Math.max(1, Math.floor(minArea || 0));
+    if (width === 0 || height === 0) return new Uint8ClampedArray(imageData);
+
+    const result = new Uint8ClampedArray(imageData);
+    const visited = new Uint8Array(width * height);
+    const qx = new Int32Array(width * height);
+    const qy = new Int32Array(width * height);
+    let qs = 0, qe = 0;
+
+    function idx(x, y) { return (y * width + x) << 2; }
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const li = y * width + x;
+        if (visited[li]) continue;
+
+        const p = li << 2;
+        const a = result[p + 3] | 0;
+        if (a < 128) {
+          visited[li] = 1;
+          continue;
+        }
+
+        const r0 = result[p] | 0;
+        const g0 = result[p + 1] | 0;
+        const b0 = result[p + 2] | 0;
+        const key = ((r0 << 16) | (g0 << 8) | b0) >>> 0;
+
+        qs = 0;
+        qe = 0;
+        qx[qe] = x;
+        qy[qe] = y;
+        qe++;
+
+        const comp = [];
+        const borderColors = {};
+        visited[li] = 1;
+
+        while (qs < qe) {
+          const cx0 = qx[qs];
+          const cy0 = qy[qs];
+          qs++;
+          const pi = idx(cx0, cy0);
+          comp.push(pi);
+
+          const neighbors = [[1, 0], [-1, 0], [0, 1], [0, -1]];
+          for (let k = 0; k < 4; k++) {
+            const nx = cx0 + neighbors[k][0];
+            const ny = cy0 + neighbors[k][1];
+            if (nx < 0 || ny < 0 || nx >= width || ny >= height) continue;
+
+            const l2 = ny * width + nx;
+            if (visited[l2]) continue;
+
+            const p2 = idx(nx, ny);
+            const a2 = result[p2 + 3] | 0;
+            if (a2 < 128) {
+              visited[l2] = 1;
+              continue;
+            }
+
+            const r = result[p2] | 0;
+            const g = result[p2 + 1] | 0;
+            const b = result[p2 + 2] | 0;
+            const k2 = ((r << 16) | (g << 8) | b) >>> 0;
+
+            if (k2 === key) {
+              visited[l2] = 1;
+              qx[qe] = nx;
+              qy[qe] = ny;
+              qe++;
+            } else {
+              borderColors[k2] = (borderColors[k2] || 0) + 1;
+            }
+          }
+        }
+
+        if (comp.length > 0 && comp.length < thr) {
+          let bestKey = -1;
+          let bestCnt = -1;
+          for (const ks in borderColors) {
+            const c = borderColors[ks] | 0;
+            if (c > bestCnt) {
+              bestCnt = c;
+              bestKey = Number(ks) | 0;
+            }
+          }
+
+          if (bestKey >= 0) {
+            const nr = (bestKey >>> 16) & 255;
+            const ng = (bestKey >>> 8) & 255;
+            const nb = bestKey & 255;
+            for (let i = 0; i < comp.length; i++) {
+              const p3 = comp[i];
+              result[p3] = nr;
+              result[p3 + 1] = ng;
+              result[p3 + 2] = nb;
+              result[p3 + 3] = 255;
+            }
+          }
+        }
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Flood fill to find connected regions
+   * @private
+   */
+
+  /**
+   * Erode edges by shrinking them inward
+   * @param {Uint8ClampedArray} imageData - RGBA pixel data
+   * @param {number} width - Image width
+   * @param {number} height - Image height
+   * @param {number} amount - Erosion amount in pixels (0-20)
+   * @returns {Uint8ClampedArray} Eroded image data
+   */
+  erodeEdges(imageData, width, height, amount) {
+    if (amount <= 0) return new Uint8ClampedArray(imageData);
+
+    const result = new Uint8ClampedArray(imageData);
+
+    for (let iteration = 0; iteration < amount; iteration++) {
+      const temp = new Uint8ClampedArray(result);
+      for (let y = 1; y < height - 1; y++) {
+        for (let x = 1; x < width - 1; x++) {
+          const idx = (y * width + x) * 4;
+          const alpha = temp[idx + 3];
+
+          // Check if any neighbor is transparent
+          let hasTransparentNeighbor = false;
+          for (let dy = -1; dy <= 1 && !hasTransparentNeighbor; dy++) {
+            for (let dx = -1; dx <= 1; dx++) {
+              const nidx = ((y + dy) * width + (x + dx)) * 4;
+              if (temp[nidx + 3] < 128) {
+                hasTransparentNeighbor = true;
+                break;
+              }
+            }
+          }
+
+          if (hasTransparentNeighbor && alpha > 128) {
+            result[idx + 3] = 0; // Make transparent
+          }
+        }
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * Apply mode filter (median-like filtering) - optimized from wplace_helper
+   * @param {Uint8ClampedArray} imageData - RGBA pixel data
+   * @param {number} width - Image width
+   * @param {number} height - Image height
+   * @param {number} radius - Filter radius (1-10)
+   * @returns {Uint8ClampedArray} Filtered image data
+   */
+  applyModeFilter(imageData, width, height, radius) {
+    if (radius <= 0 || width === 0 || height === 0) return new Uint8ClampedArray(imageData);
+
+    const n = radius | 0;
+    if (n <= 1) return new Uint8ClampedArray(imageData);
+
+    const left = Math.floor((n - 1) / 2);
+    const right = n - left - 1;
+    const result = new Uint8ClampedArray(imageData);
+    const out = new Uint8ClampedArray(imageData);
+
+    for (let y = 0; y < height; y++) {
+      for (let x = 0; x < width; x++) {
+        const i = (y * width + x) * 4;
+        const a = imageData[i + 3] | 0;
+
+        // Skip transparent pixels
+        if (a < 128) {
+          out[i] = imageData[i];
+          out[i + 1] = imageData[i + 1];
+          out[i + 2] = imageData[i + 2];
+          out[i + 3] = a;
+          continue;
+        }
+
+        const counts = {};
+        let best = 0;
+        let bR = imageData[i];
+        let bG = imageData[i + 1];
+        let bB = imageData[i + 2];
+
+        for (let dy = -left; dy <= right; dy++) {
+          const yy = y + dy;
+          if (yy < 0 || yy >= height) continue;
+
+          for (let dx = -left; dx <= right; dx++) {
+            const xx = x + dx;
+            if (xx < 0 || xx >= width) continue;
+
+            const j = (yy * width + xx) * 4;
+            if ((imageData[j + 3] | 0) < 128) continue;
+
+            const key = ((imageData[j] | 0) << 16) | ((imageData[j + 1] | 0) << 8) | (imageData[j + 2] | 0);
+            const c = (counts[key] || 0) + 1;
+            counts[key] = c;
+
+            if (c > best) {
+              best = c;
+              bR = imageData[j];
+              bG = imageData[j + 1];
+              bB = imageData[j + 2];
+            }
+          }
+        }
+
+        out[i] = bR;
+        out[i + 1] = bG;
+        out[i + 2] = bB;
+        out[i + 3] = 255;
+      }
+    }
+
+    // Copy result back
+    for (let i = 0; i < out.length; i += 4) {
+      result[i] = out[i];
+      result[i + 1] = out[i + 1];
+      result[i + 2] = out[i + 2];
+    }
+
+    return result;
+  }
+
+  // ====== COLOR CORRECTION METHODS ======
+
+  /**
+   * Apply color correction to the image
+   * @param {Uint8ClampedArray} imageData - RGBA pixel data
+   * @param {number} brightness - Brightness adjustment (-100 to 100)
+   * @param {number} contrast - Contrast adjustment (-100 to 100)
+   * @param {number} saturation - Saturation adjustment (-100 to 100)
+   * @param {number} hue - Hue rotation (-180 to 180 degrees)
+   * @param {number} gamma - Gamma correction (0.5 to 3.0)
+   * @returns {Uint8ClampedArray} Color-corrected image data
+   */
+  applyColorCorrection(imageData, brightness = 0, contrast = 0, saturation = 0, hue = 0, gamma = 1.0) {
+    const result = new Uint8ClampedArray(imageData);
+
+    for (let i = 0; i < result.length; i += 4) {
+      let r = result[i];
+      let g = result[i + 1];
+      let b = result[i + 2];
+
+      // Brightness
+      if (brightness !== 0) {
+        r = Math.max(0, Math.min(255, r + (brightness * 2.55)));
+        g = Math.max(0, Math.min(255, g + (brightness * 2.55)));
+        b = Math.max(0, Math.min(255, b + (brightness * 2.55)));
+      }
+
+      // Contrast
+      if (contrast !== 0) {
+        const factor = (contrast + 100) / 100;
+        r = Math.max(0, Math.min(255, (r - 128) * factor + 128));
+        g = Math.max(0, Math.min(255, (g - 128) * factor + 128));
+        b = Math.max(0, Math.min(255, (b - 128) * factor + 128));
+      }
+
+      // Saturation
+      if (saturation !== 0) {
+        const [h, s, l] = this._rgbToHsl(r, g, b);
+        const newS = Math.max(0, Math.min(100, s + saturation));
+        [r, g, b] = this._hslToRgb(h, newS, l);
+      }
+
+      // Hue rotation
+      if (hue !== 0) {
+        const [h, s, l] = this._rgbToHsl(r, g, b);
+        const newH = (h + hue) % 360;
+        [r, g, b] = this._hslToRgb(newH, s, l);
+      }
+
+      // Gamma correction
+      if (gamma !== 1.0) {
+        const invGamma = 1.0 / gamma;
+        r = Math.pow(r / 255, invGamma) * 255;
+        g = Math.pow(g / 255, invGamma) * 255;
+        b = Math.pow(b / 255, invGamma) * 255;
+      }
+
+      result[i] = Math.round(r);
+      result[i + 1] = Math.round(g);
+      result[i + 2] = Math.round(b);
+    }
+
+    return result;
+  }
+
+  /**
+   * Convert RGB to HSL
+   * @private
+   */
+  _rgbToHsl(r, g, b) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h = 0, s = 0;
+    const l = (max + min) / 2;
+
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+        case g: h = ((b - r) / d + 2) / 6; break;
+        case b: h = ((r - g) / d + 4) / 6; break;
+      }
+    }
+
+    return [h * 360, s * 100, l * 100];
+  }
+
+  /**
+   * Convert HSL to RGB
+   * @private
+   */
+  _hslToRgb(h, s, l) {
+    h /= 360;
+    s /= 100;
+    l /= 100;
+
+    let r, g, b;
+    if (s === 0) {
+      r = g = b = l;
+    } else {
+      const hue2rgb = (p, q, t) => {
+        if (t < 0) t += 1;
+        if (t > 1) t -= 1;
+        if (t < 1/6) return p + (q - p) * 6 * t;
+        if (t < 1/2) return q;
+        if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+        return p;
+      };
+      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+      const p = 2 * l - q;
+      r = hue2rgb(p, q, h + 1/3);
+      g = hue2rgb(p, q, h);
+      b = hue2rgb(p, q, h - 1/3);
+    }
+
+    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+  }
+
+  /**
+   * Color matching helper
+   * @private
+   */
+  _colorMatch(color1, color2, tolerance = 10) {
+    return Math.abs(color1[0] - color2[0]) <= tolerance &&
+           Math.abs(color1[1] - color2[1]) <= tolerance &&
+           Math.abs(color1[2] - color2[2]) <= tolerance;
+  }
 }
 
+
 // Create global instance
 window.WPlaceImageProcessor = ImageProcessor;
 
diff --git a/Extension/themes/acrylic.css b/Extension/themes/acrylic.css
deleted file mode 100644
index edee14c..0000000
--- a/Extension/themes/acrylic.css
+++ /dev/null
@@ -1,883 +0,0 @@
-/* WPlace Auto-Image Bot - Acrylic Theme */
-/* Beautiful theme with translucent blurred panels */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
-
-@font-face {
-    font-family: 'Apple Color Emoji';
-    src: url('https://raw.githubusercontent.com/GORAlexComp/AppleColorEmojiFont/refs/heads/main/fonts/AppleColorEmoji.ttf');
-}
-
-/* Multi-account panel styling */
-.wplace-theme-acrylic #wplace-accounts-container {
-    background: var(--wplace-primary);
-    color: var(--wplace-text);
-    border-radius: var(--wplace-radius);
-    box-shadow: none;
-    backdrop-filter: var(--wplace-backdrop);
-    border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
-    min-width: 250px;
-}
-
-.wplace-theme-acrylic #wplace-accounts-container * {
-    font-size: 15px;
-    line-height: normal;
-}
-
-/* Active account styles */
-.wplace-theme-acrylic .wplace-accounts-container .active-account {
-    --active-bg: color-mix(in srgb, white 15%, transparent);
-    --active-color: var(--wplace-success);
-    --inactive-color: var(--wplace-text);
-    --progress-bg: rgb(255 255 255 / 10%);
-    --progress-fill: white;
-}
-
-/* Main Container */
-.wplace-theme-acrylic #wplace-image-bot-container {
-    background: var(--wplace-primary);
-    color: var(--wplace-text);
-    border-radius: var(--wplace-radius);
-    box-shadow: none;
-    backdrop-filter: var(--wplace-backdrop);
-    border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
-    min-width: 300px;
-}
-
-.wplace-theme-acrylic #wplace-image-bot-container * {
-    font-size: 15px;
-    line-height: normal;
-}
-
-.wplace-theme-acrylic .wplace-content {
-    display: flex;
-    flex-direction: column;
-    /* gap: 10px; */
-    padding: 10px;
-}
-
-#wplace-image-bot-container.wplace-dragging {
-    transition: none !important;
-    box-shadow: none !important;
-    transform: none !important;
-}
-
-/* Stats */
-.wplace-theme-acrylic #wplace-stats-container {
-    background: var(--wplace-primary);
-    color: var(--wplace-text);
-    border-radius: var(--wplace-radius);
-    box-shadow: none;
-    backdrop-filter: var(--wplace-backdrop);
-    border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
-}
-
-.wplace-theme-acrylic .wplace-stats {
-    margin-bottom: 0;
-}
-
-.wplace-theme-acrylic .wplace-colors-section {
-    border-top: none;
-    margin: 0;
-}
-
-/* Settings Container */
-.wplace-theme-acrylic #wplace-settings-container {
-    background: var(--wplace-primary) !important;
-    color: var(--wplace-text) !important;
-    border-radius: var(--wplace-radius) !important;
-    box-shadow: none !important;
-    backdrop-filter: var(--wplace-backdrop) !important;
-    border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color) !important;
-    max-width: 400px !important;
-}
-
-.wplace-theme-acrylic .wplace-settings-header {
-    background: transparent;
-    padding: 0;
-}
-
-.wplace-theme-acrylic .wplace-settings-header:hover {
-    background: transparent !important;
-}
-
-.wplace-theme-acrylic .wplace-settings-icon {
-    animation: none;
-    font-size: 15px;
-}
-
-.wplace-theme-acrylic .wplace-settings-content {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.wplace-theme-acrylic .wplace-settings-footer {
-    border-top: none;
-    padding: 10px;
-}
-
-.wplace-theme-acrylic .wplace-settings-section {
-    margin: 0;
-}
-
-.wplace-theme-acrylic .wplace-settings-section-wrapper,
-.wplace-theme-acrylic .wplace-overlay-wrapper,
-.wplace-theme-acrylic .wplace-batch-controls {
-    padding: 0 !important;
-    background: transparent !important;
-    border: none !important;
-}
-
-/* Headers */
-.wplace-theme-acrylic .wplace-header,
-.wplace-theme-acrylic .wplace-settings-title-wrapper {
-    height: 40px;
-    padding: 7px 7px 7px 10px;
-    font-weight: 600;
-    background: var(--wplace-accent);
-    color: var(--wplace-highlight);
-}
-
-.wplace-theme-acrylic .wplace-header span,
-.wplace-theme-acrylic .wplace-settings-title {
-    max-width: 150px;
-    font-size: 15px;
-    font-weight: 600;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.wplace-theme-acrylic .wplace-header-controls #compactBtn {
-    display: none;
-}
-
-.wplace-theme-acrylic .wplace-header-btn,
-.wplace-theme-acrylic .wplace-settings-close-btn {
-    background: #2e2e2e;
-    color: var(--wplace-highlight);
-    border: none;
-    font-size: 12px;
-    border-radius: 4px;
-    width: 24px;
-    height: 24px;
-}
-
-.wplace-theme-acrylic .wplace-header-btn i {
-    font-size: 12px !important;
-}
-
-.wplace-theme-acrylic .wplace-header-btn:hover,
-.wplace-theme-acrylic .wplace-settings-close-btn:hover {
-    background: transparent;
-    transform: none;
-}
-
-/* Sections */
-.wplace-theme-acrylic .wplace-section {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    background: transparent;
-    padding: 0;
-    border: none;
-    margin: 0;
-}
-
-.wplace-theme-acrylic .wplace-section-title {
-    color: var(--wplace-highlight);
-    text-transform: capitalize;
-    font-size: 13px;
-    font-weight: 600;
-    pointer-events: none;
-    letter-spacing: unset;
-}
-
-.wplace-theme-acrylic .wplace-section-title i {
-    display: none;
-}
-
-.wplace-theme-acrylic .wplace-status-section {
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    border: none;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-/* Status Styling */
-.wplace-theme-acrylic .wplace-stats {
-    background: transparent;
-    padding: 0;
-    border: none;
-}
-
-.wplace-theme-acrylic .wplace-stat-value {
-    color: var(--wplace-highlight);
-}
-
-.wplace-theme-acrylic .wplace-status {
-    border-radius: var(--wplace-radius);
-    border: none;
-    box-shadow: none;
-    padding: 10px;
-    font-weight: 500;
-}
-
-.wplace-theme-acrylic .status-default {
-    background: color-mix(in srgb, white 15%, transparent) !important;
-}
-
-.wplace-theme-acrylic .status-success {
-    background: color-mix(in srgb, var(--wplace-success) 15%, transparent);
-    color: var(--wplace-success);
-}
-
-.wplace-theme-acrylic .status-error {
-    background: color-mix(in srgb, var(--wplace-error) 15%, transparent);
-    color: var(--wplace-error);
-}
-
-.wplace-theme-acrylic .status-warning {
-    background: color-mix(in srgb, var(--wplace-warning) 15%, transparent);
-    color: var(--wplace-warning);
-}
-
-/* Buttons */
-.wplace-theme-acrylic .wplace-btn {
-    border-radius: 8px;
-    border: none;
-    height: max-content;
-    padding: 10px;
-    gap: 5px;
-    flex-direction: column;
-    align-items: flex-start;
-    line-height: normal;
-    text-align: left;
-    font-size: 15px !important;
-    box-shadow: none;
-}
-
-.wplace-theme-acrylic .wplace-btn::before {
-    display: none;
-}
-
-.wplace-theme-acrylic .wplace-btn:disabled {
-    box-shadow: none !important;
-}
-
-.wplace-theme-acrylic .wplace-btn:hover:not(:disabled) {
-    transform: none;
-    animation: none;
-    box-shadow: none !important;
-    filter: brightness(0.9);
-}
-
-.wplace-theme-acrylic .wplace-btn-primary,
-.wplace-theme-acrylic .wplace-btn-upload {
-    background: white !important;
-    color: black !important;
-    border: none !important;
-}
-
-.wplace-theme-acrylic .wplace-btn-upload:hover:not(:disabled) {
-    background: revert !important;
-}
-
-.wplace-theme-acrylic .wplace-btn-secondary,
-.wplace-theme-acrylic .wplace-btn-select,
-.wplace-theme-acrylic .wplace-btn-file,
-.wplace-theme-acrylic .wplace-btn-overlay {
-    background: var(--wplace-secondary);
-}
-
-.wplace-theme-acrylic .wplace-btn-start {
-    background: var(--wplace-success);
-    color: white;
-}
-
-.wplace-theme-acrylic .wplace-btn-stop {
-    background: var(--wplace-error);
-    color: white;
-}
-
-.wplace-theme-acrylic .wplace-btn.active {
-    background: white;
-    color: black;
-    box-shadow: none !important;
-}
-
-.wplace-theme-acrylic .wplace-btn.active i {
-    filter: none;
-}
-
-.wplace-theme-acrylic .wplace-settings-apply-btn {
-    background: white;
-    color: black;
-    border-radius: 8px;
-}
-
-/* Compact Input Buttons */
-.wplace-theme-acrylic .wplace-input-btn-small,
-.wplace-theme-acrylic .wplace-input-btn-small:hover,
-.wplace-theme-acrylic .wplace-input-btn-small:active {
-    background: white;
-    color: black;
-    border: none;
-    transform: none;
-    border-radius: 4px;
-    box-shadow: none;
-    font-weight: 500;
-    width: 25px;
-    height: 25px;
-}
-
-/* Alerts */
-.wplace-theme-acrylic .wplace-alert-base {
-    border-radius: var(--wplace-radius);
-    backdrop-filter: var(--wplace-backdrop);
-    border: none;
-    box-shadow: none;
-}
-
-.wplace-theme-acrylic .wplace-alert-info {
-    background: color-mix(in srgb, #0000e5 50%, transparent);
-}
-
-.wplace-theme-acrylic .wplace-alert-success {
-    background: color-mix(in srgb, var(--wplace-success) 50%, transparent);
-}
-
-.wplace-theme-acrylic .wplace-alert-error {
-    background: color-mix(in srgb, var(--wplace-error) 50%, transparent);
-}
-
-.wplace-theme-acrylic .wplace-alert-warning {
-    background: color-mix(in srgb, var(--wplace-warning) 50%, transparent);
-}
-
-/* Progress Bar */
-.wplace-theme-acrylic .wplace-progress {
-    background: var(--wplace-secondary);
-    border-radius: 4px;
-    margin: 0;
-    border: none;
-}
-
-.wplace-theme-acrylic .wplace-progress-bar {
-    background: white;
-}
-
-.wplace-theme-acrylic .wplace-progress-bar::after {
-    display: none;
-}
-
-/* Form Controls */
-.wplace-theme-acrylic .wplace-settings-checkbox,
-.wplace-theme-acrylic .wplace-notification-checkbox,
-.wplace-theme-acrylic .wplace-speed-checkbox {
-    cursor: pointer;
-    width: 20px;
-    height: 20px;
-    flex-shrink: 0;
-    accent-color: var(--wplace-highlight);
-}
-
-.wplace-theme-acrylic .wplace-settings-select,
-.wplace-theme-acrylic .wplace-settings-number-input,
-.wplace-theme-acrylic .wplace-cooldown-input,
-.wplace-theme-acrylic .wplace-notification-interval-input {
-    background: rgb(255 255 255 / 10%);
-    color: white;
-    border: 1px solid rgb(255 255 255 / 25%);
-    border-radius: 8px;
-    box-shadow: none;
-    transition-duration: 0.3s;
-}
-
-.wplace-theme-acrylic .wplace-settings-select:hover,
-.wplace-theme-acrylic .wplace-settings-number-input:hover,
-.wplace-theme-acrylic .wplace-cooldown-input:hover,
-.wplace-theme-acrylic .wplace-notification-interval-input:hover {
-    border-color: rgb(255 255 255 / 50%);
-}
-
-.wplace-theme-acrylic .wplace-settings-select:focus,
-.wplace-theme-acrylic .wplace-settings-number-input:focus,
-.wplace-theme-acrylic .wplace-cooldown-input:focus,
-.wplace-theme-acrylic .wplace-notification-interval-input:focus {
-    border-color: white;
-}
-
-.wplace-theme-acrylic .wplace-settings-option {
-    background: #2d3748;
-    color: white;
-}
-
-.wplace-theme-acrylic .wplace-settings-select option {
-    background: #2d3748;
-    color: white;
-}
-
-.wplace-theme-acrylic .wplace-cooldown-input {
-    border-radius: 4px !important;
-}
-
-.wplace-theme-acrylic .wplace-cooldown-input:focus {
-    background: rgb(255 255 255 / 10%);
-    box-shadow: none;
-}
-
-.wplace-theme-acrylic .wplace-overlay-opacity-value {
-    background-color: var(--wplace-secondary) !important;
-    border: none !important;
-}
-
-/* Sliders */
-.wplace-theme-acrylic .wplace-slider,
-.wplace-theme-acrylic .wplace-speed-slider,
-.wplace-theme-acrylic .wplace-overlay-opacity-slider {
-    background: var(--wplace-secondary) !important;
-    border-radius: 3px !important;
-    height: 6px !important;
-}
-
-.wplace-theme-acrylic .wplace-slider::-webkit-slider-thumb,
-.wplace-theme-acrylic .resize-slider::-webkit-slider-thumb,
-.wplace-theme-acrylic .wplace-speed-slider::-webkit-slider-thumb,
-.wplace-theme-acrylic .wplace-overlay-opacity-slider::-webkit-slider-thumb {
-    width: 16px !important;
-    height: 16px !important;
-    border-radius: 4px !important;
-    background: white !important;
-    box-shadow: none !important;
-    transform: none !important;
-}
-
-.wplace-theme-acrylic .wplace-speed-value {
-    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-    border-radius: 8px;
-    color: white;
-    box-shadow: 0 3px 10px rgb(79 172 254 / 30%);
-    border: 1px solid rgb(255 255 255 / 20%);
-}
-
-.wplace-theme-acrylic .resize-slider {
-    -webkit-appearance: revert;
-}
-
-/* Layout Controls */
-.wplace-theme-acrylic .wplace-slider-container {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-    margin: 0;
-}
-
-.wplace-theme-acrylic .wplace-input-label-compact {
-    color: rgba(255, 255, 255, 0.75);
-    margin-left: 4px;
-    text-transform: lowercase;
-    white-space: nowrap;
-}
-
-.wplace-theme-acrylic .wplace-cooldown-control {
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.wplace-theme-acrylic .wplace-cooldown-control label {
-    font-weight: 400;
-    margin-bottom: 0;
-    display: block;
-}
-
-.wplace-theme-acrylic .wplace-cooldown-input-group {
-    margin: 0;
-    background: transparent;
-}
-
-/* Color Elements */
-.wplace-theme-acrylic .wplace-color-item-name {
-    color: #ccc;
-}
-
-.wplace-theme-acrylic .wplace-color-swatch {
-    border: 1px solid rgb(255 255 255 / 20%);
-    border-radius: 4px;
-}
-
-.wplace-theme-acrylic .wplace-color-swatch:not(.active) {
-    filter: grayscale(80%);
-}
-
-.wplace-theme-acrylic .wplace-color-swatch.unavailable {
-    border-color: #666;
-}
-
-.wplace-theme-acrylic .wplace-color-swatch.unavailable:not(.active) {
-    filter: grayscale(90%);
-}
-
-.wplace-theme-acrylic .wplace-color-swatch.active::after {
-    text-shadow: 0 0 3px black;
-}
-
-.wplace-theme-acrylic .wplace-stat-color-swatch {
-    border-radius: 3px;
-    border: 1px solid rgb(255 255 255 / 10%);
-    box-shadow: inset 0 0 2px rgb(0 0 0 / 50%);
-}
-
-.wplace-theme-acrylic .wplace-stat-colors-grid {
-    background: var(--wplace-secondary);
-    border-radius: 8px;
-}
-
-.wplace-theme-acrylic .wplace-color-divider {
-    background: rgb(255 255 255 / 10%);
-}
-
-/* Icons */
-.wplace-theme-acrylic .wplace-icon-key,
-.wplace-theme-acrylic .wplace-icon-robot,
-.wplace-theme-acrylic .wplace-icon-speed,
-.wplace-theme-acrylic .wplace-icon-bell,
-.wplace-theme-acrylic .wplace-icon-palette,
-.wplace-theme-acrylic .wplace-icon-globe,
-.wplace-theme-acrylic .wplace-icon-paint,
-.wplace-theme-acrylic .wplace-icon-eye,
-.wplace-theme-acrylic .wplace-icon-compass,
-.wplace-theme-acrylic .wplace-icon-route,
-.wplace-theme-acrylic .wplace-icon-table,
-.wplace-theme-acrylic .wplace-icon-dice {
-    color: white;
-}
-
-/* Typography */
-.wplace-theme-acrylic .wplace-cooldown-unit {
-    display: none;
-}
-
-.wplace-theme-acrylic .wplace-settings-toggle-title,
-.wplace-theme-acrylic .wplace-overlay-opacity-label {
-    font-size: 15px !important;
-}
-
-.wplace-theme-acrylic .wplace-settings-description,
-.wplace-theme-acrylic .wplace-random-batch-description,
-.wplace-theme-acrylic .wplace-settings-toggle-description {
-    font-size: 12px;
-    color: rgb(255 255 255 / 75%) !important;
-}
-
-/* Turnstile Overlay */
-.wplace-theme-acrylic .wplace-turnstile-overlay {
-    background: var(--wplace-primary);
-    border-radius: var(--wplace-radius);
-    box-shadow: none;
-    backdrop-filter: var(--wplace-backdrop);
-    border: none;
-    padding: 16px !important;
-    color: var(--wplace-text) !important;
-}
-
-.wplace-theme-acrylic .wplace-turnstile-hide-btn {
-    border-radius: 8px !important;
-    backdrop-filter: var(--wplace-backdrop) !important;
-    background: var(--wplace-primary) !important;
-    top: -25px !important;
-    right: 0 !important;
-    transition: all 0.3s ease !important;
-}
-
-.wplace-theme-acrylic .wplace-turnstile-hide-btn:hover {
-    background: white !important;
-    color: black !important;
-}
-
-/* Resize Tools */
-.wplace-theme-acrylic .resize-tools button {
-    border-radius: 6px;
-    border: 1px solid rgb(255 255 255 / 20%);
-    background: rgb(255 255 255 / 6%);
-    color: #fff;
-}
-
-.wplace-theme-acrylic .resize-overlay {
-    background: rgb(0 0 0 / 50%);
-}
-
-/* TODO: More resize menu styles */
-.wplace-theme-acrylic .resize-container {
-    background: var(--wplace-secondary);
-    backdrop-filter: var(--wplace-backdrop);
-    border: none;
-    border-radius: var(--wplace-radius);
-    color: var(--wplace-text);
-}
-
-/* Account switching UI styles */
-.wplace-theme-acrylic .wplace-section {
-    margin: 5px;
-    border-radius: var(--wplace-radius);
-    background: rgba(255, 255, 255, 0.08);
-    padding: 5px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    backdrop-filter: var(--wplace-backdrop);
-}
-
-.wplace-theme-acrylic .wplace-section-title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-weight: 600;
-    color: var(--wplace-text);
-    margin: 2px;
-    font-size: 14px;
-}
-
-/* Auto-swap toggle switch */
-.wplace-theme-acrylic .wplace-switch {
-    position: relative;
-    display: inline-block;
-    width: 50px;
-    height: 24px;
-}
-
-.wplace-theme-acrylic .wplace-switch input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-}
-
-.wplace-theme-acrylic .wplace-slider-round {
-    position: absolute;
-    cursor: pointer;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(255, 255, 255, 0.2);
-    transition: 0.4s;
-    border-radius: 24px;
-    backdrop-filter: blur(10px);
-}
-
-.wplace-theme-acrylic .wplace-slider-round:before {
-    position: absolute;
-    content: "";
-    height: 18px;
-    width: 18px;
-    left: 3px;
-    bottom: 3px;
-    background-color: white;
-    transition: 0.4s;
-    border-radius: 50%;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-}
-
-.wplace-theme-acrylic .wplace-switch input:checked+.wplace-slider-round {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.wplace-theme-acrylic .wplace-switch input:checked+.wplace-slider-round:before {
-    transform: translateX(26px);
-}
-
-/* Account list container */
-.wplace-theme-acrylic .accounts-list-container {
-    max-height: 500px;
-    overflow-y: auto;
-    /* margin-top: 10px; */
-    padding: 0 6px;
-}
-
-/* Individual account item */
-.wplace-theme-acrylic .wplace-account-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 6px 8px;
-    margin: 4px 0;
-    background: rgba(255, 255, 255, 0.05);
-    border-radius: 8px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
-    transition: all 0.3s ease;
-    backdrop-filter: blur(10px);
-    position: relative;
-}
-
-/* Account ordering number */
-.wplace-theme-acrylic .wplace-account-number {
-    position: absolute;
-    top: 3px;
-    left: 3px;
-    width: 16px;
-    height: 16px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 9px;
-    font-weight: bold;
-    z-index: 1;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-}
-
-.wplace-theme-acrylic .wplace-account-item:hover {
-    background: rgba(255, 255, 255, 0.12);
-    border-color: rgba(255, 255, 255, 0.3);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.wplace-theme-acrylic .wplace-account-item.is-current {
-    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3) 0%, rgba(118, 75, 162, 0.3) 100%);
-    border-color: #667eea;
-    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
-}
-
-/* Account details */
-.wplace-theme-acrylic .wplace-account-details {
-    flex: 1;
-    margin-left: 25px;
-}
-
-.wplace-theme-acrylic .wplace-account-name {
-    font-weight: 600;
-    color: var(--wplace-text);
-    font-size: 13px;
-    margin-bottom: 2px;
-}
-
-/* Account statistics */
-.wplace-theme-acrylic .wplace-account-stats {
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.75);
-}
-
-.wplace-theme-acrylic .wplace-account-stats i {
-    margin-right: 4px;
-}
-
-.wplace-theme-acrylic .wplace-account-stats .fas.fa-bolt {
-    color: #ffd700;
-}
-
-.wplace-theme-acrylic .wplace-account-stats .fas.fa-tint {
-    color: #00bfff;
-}
-
-/* Move Artwork Panel Styles for Acrylic Theme */
-.wplace-theme-acrylic .wplace-move-panel {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--wplace-primary);
-  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
-  border-radius: var(--wplace-radius);
-  padding: 24px;
-  z-index: 10000;
-  backdrop-filter: var(--wplace-backdrop);
-  min-width: 240px;
-  text-align: center;
-  font-family: var(--wplace-font);
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
-}
-
-.wplace-theme-acrylic .wplace-move-panel-title {
-  color: var(--wplace-text);
-  margin: 0 0 20px 0;
-  font-size: 18px;
-  font-weight: 600;
-  letter-spacing: 0.5px;
-}
-
-.wplace-theme-acrylic .wplace-move-controls {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-.wplace-theme-acrylic .wplace-move-btn {
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--wplace-text);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 12px;
-  cursor: pointer;
-  font-family: var(--wplace-font);
-  font-size: 16px;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
-}
-
-.wplace-theme-acrylic .wplace-move-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
-  border-color: rgba(255, 255, 255, 0.5);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
-}
-
-.wplace-theme-acrylic .wplace-move-btn:active {
-  transform: translateY(0);
-  background: rgba(255, 255, 255, 0.4);
-}
-
-.wplace-theme-acrylic .wplace-move-center {
-  color: var(--wplace-text);
-  padding: 12px;
-  font-size: 14px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.8;
-}
-
-.wplace-theme-acrylic .wplace-move-close-btn {
-  background: rgba(255, 59, 48, 0.8);
-  color: white;
-  border: 1px solid rgba(255, 59, 48, 0.3);
-  padding: 12px 20px;
-  border-radius: 12px;
-  cursor: pointer;
-  font-family: var(--wplace-font);
-  font-size: 15px;
-  font-weight: 600;
-  transition: all 0.3s ease;
-  backdrop-filter: blur(10px);
-}
-
-.wplace-theme-acrylic .wplace-move-close-btn:hover {
-  background: rgba(255, 59, 48, 1);
-  transform: translateY(-1px);
-  box-shadow: 0 8px 20px rgba(255, 59, 48, 0.3);
-}
-
-.wplace-theme-acrylic .wplace-move-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 9999;
-  backdrop-filter: blur(8px);
-}
\ No newline at end of file
diff --git a/Extension/themes/classic-light.css b/Extension/themes/classic-light.css
index 26524bf..50c454e 100644
--- a/Extension/themes/classic-light.css
+++ b/Extension/themes/classic-light.css
@@ -555,7 +555,7 @@
   border-radius: 4px;
   color: var(--wplace-text);
   padding: 4px 8px;
-  font-size: 12px;
+  font-size: 10px;
   width: 65px;
   text-align: center;
   transition: all 0.2s ease;
@@ -775,984 +775,3 @@
     color: #2196f3;
 }
 
-/* Edit Panel Styles for Classic Light Theme - Fullscreen Layout */
-:root .edit-overlay,
-.wplace-theme-classic-light .edit-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(255, 255, 255, 0.95);
-  z-index: 10001;
-  backdrop-filter: blur(8px);
-}
-
-/* Enhanced Container Layout */
-:root .edit-container,
-.wplace-theme-classic-light .edit-container {
-  background: linear-gradient(135deg, #FBFBFB 0%, #E0E0E1 100%);
-  border-radius: 8px;
-  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.2);
-  display: flex;
-  flex-direction: column;
-  width: 98vw;
-  height: 98vh;
-  max-width: 98vw;
-  max-height: 98vh;
-  min-width: 1000px;
-  min-height: 700px;
-  overflow: hidden;
-  backdrop-filter: blur(15px);
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  position: fixed;
-  top: 1vh;
-  left: 1vw;
-  z-index: 10000;
-}
-
-:root .edit-main,
-.wplace-theme-classic-light .edit-main {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-/* Enhanced Header Layout */
-:root .edit-header,
-.wplace-theme-classic-light .edit-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px;
-  background: linear-gradient(135deg, #E0E0E1 0%, #F3F3F3 100%);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  min-height: 70px;
-}
-
-:root .edit-header-left,
-.wplace-theme-classic-light .edit-header-left {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-:root .edit-header h3,
-.wplace-theme-classic-light .edit-header h3 {
-  margin: 0;
-  color: var(--wplace-text);
-  font-size: 18px;
-  font-weight: 600;
-}
-
-:root .edit-nav-controls,
-.wplace-theme-classic-light .edit-nav-controls {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-/* Zoom Controls */
-:root .zoom-controls,
-.wplace-theme-classic-light .zoom-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: rgba(0, 0, 0, 0.05);
-  padding: 6px 12px;
-  border-radius: 6px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-:root .zoom-select,
-.wplace-theme-classic-light .zoom-select {
-  background: linear-gradient(135deg, #F3F3F3 0%, #FBFBFB 100%);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  color: var(--wplace-text);
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 11px;
-  cursor: pointer;
-  min-width: 60px;
-}
-
-:root .zoom-select:hover,
-.wplace-theme-classic-light .zoom-select:hover {
-  background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%);
-}
-
-:root .edit-content,
-.wplace-theme-classic-light .edit-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-:root .edit-main-area,
-.wplace-theme-classic-light .edit-main-area {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-:root .edit-toolbar,
-.wplace-theme-classic-light .edit-toolbar {
-  width: 80px;
-  min-width: 80px;
-  background: rgba(0, 0, 0, 0.05);
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 8px 4px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-:root .edit-canvas-area,
-.wplace-theme-classic-light .edit-canvas-area {
-  flex: 4;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  background: #F3F3F3;
-  min-width: 0;
-}
-
-:root .edit-canvas-container,
-.wplace-theme-classic-light .edit-canvas-container {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-height: 400px;
-  max-width: 100%;
-}
-
-:root .edit-canvas,
-.wplace-theme-classic-light .edit-canvas {
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  cursor: crosshair;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-  background-image: 
-    repeating-conic-gradient(rgba(0, 0, 0, 0.08) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
-}
-
-:root .edit-tool-group,
-.wplace-theme-classic-light .edit-tool-group {
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 6px;
-  padding: 6px 4px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-}
-
-:root .edit-tool-group h4,
-.wplace-theme-classic-light .edit-tool-group h4 {
-  color: var(--wplace-highlight);
-  margin: 0 0 8px 0;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-:root .edit-brush-tools,
-.wplace-theme-classic-light .edit-brush-tools {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-:root .edit-tool-btn,
-.wplace-theme-classic-light .edit-tool-btn {
-  background: linear-gradient(135deg, #FBFBFB 0%, #E0E0E1 100%);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  color: var(--wplace-text);
-  border-radius: 6px;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-:root .edit-tool-btn:hover,
-.wplace-theme-classic-light .edit-tool-btn:hover {
-  background: linear-gradient(135deg, #E0E0E1 0%, #FBFBFB 100%);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-:root .edit-tool-btn.active,
-.wplace-theme-classic-light .edit-tool-btn.active {
-  background: var(--wplace-highlight);
-  color: white;
-  border-color: var(--wplace-text);
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(32, 60, 93, 0.3);
-}
-
-:root .edit-color-palette,
-.wplace-theme-classic-light .edit-color-palette {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
-  gap: 4px;
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-:root .edit-color-swatch,
-.wplace-theme-classic-light .edit-color-swatch {
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-:root .edit-color-swatch:hover,
-.wplace-theme-classic-light .edit-color-swatch:hover {
-  transform: scale(1.1);
-  border-color: var(--wplace-text);
-}
-
-:root .edit-color-swatch.active,
-.wplace-theme-classic-light .edit-color-swatch.active {
-  border-color: #4facfe;
-  box-shadow: 0 0 8px rgba(79, 172, 254, 0.5);
-  transform: scale(1.1);
-}
-
-:root .edit-brush-size-container,
-.wplace-theme-classic-light .edit-brush-size-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-:root .edit-brush-size-slider,
-.wplace-theme-classic-light .edit-brush-size-slider {
-  width: 100%;
-  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
-  border-radius: 4px;
-  height: 6px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-:root .edit-brush-size-slider::-webkit-slider-thumb,
-.wplace-theme-classic-light .edit-brush-size-slider::-webkit-slider-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: white;
-  border: 2px solid #4facfe;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-:root .edit-brush-size-slider::-webkit-slider-thumb:hover,
-.wplace-theme-classic-light .edit-brush-size-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.2);
-}
-
-:root .edit-brush-size-display,
-.wplace-theme-classic-light .edit-brush-size-display {
-  color: var(--wplace-text);
-  font-size: 12px;
-  text-align: center;
-  background: rgba(0, 0, 0, 0.1);
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-
-:root .edit-action-buttons,
-.wplace-theme-classic-light .edit-action-buttons {
-  display: flex;
-  gap: 10px;
-  padding: 10px;
-  background: rgba(0, 0, 0, 0.05);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-:root .edit-btn-primary,
-.wplace-theme-classic-light .edit-btn-primary {
-  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
-  color: white;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-weight: bold;
-  transition: all 0.2s ease;
-}
-
-:root .edit-btn-secondary,
-.wplace-theme-classic-light .edit-btn-secondary {
-  background: linear-gradient(135deg, #E0E0E1 0%, #FBFBFB 100%);
-  color: var(--wplace-text);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-  padding: 10px 20px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-:root .edit-btn-primary:hover,
-.wplace-theme-classic-light .edit-btn-primary:hover {
-  background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-:root .edit-btn-secondary:hover,
-.wplace-theme-classic-light .edit-btn-secondary:hover {
-  background: linear-gradient(135deg, #FBFBFB 0%, #E0E0E1 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-
-:root .edit-zoom-controls,
-.wplace-theme-classic-light .edit-zoom-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-:root .edit-zoom-btn,
-.wplace-theme-classic-light .edit-zoom-btn {
-  background: rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  color: var(--wplace-text);
-  border-radius: 4px;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-:root .edit-zoom-btn:hover,
-.wplace-theme-classic-light .edit-zoom-btn:hover {
-  background: rgba(0, 0, 0, 0.2);
-  border-color: var(--wplace-text);
-}
-
-:root .edit-zoom-display,
-.wplace-theme-classic-light .edit-zoom-display {
-  color: var(--wplace-text);
-  font-size: 12px;
-  min-width: 60px;
-  text-align: center;
-}
-
-:root .edit-instructions,
-.wplace-theme-classic-light .edit-instructions {
-  color: rgba(0, 0, 0, 0.7);
-  font-size: 11px;
-  margin: 5px 0;
-  text-align: center;
-}
-
-:root .edit-status-bar,
-.wplace-theme-classic-light .edit-status-bar {
-  background: rgba(255, 255, 255, 0.3);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  padding: 5px 15px;
-  font-size: 11px;
-  color: rgba(0, 0, 0, 0.8);
-  font-family: monospace;
-}
-
-:root .edit-tool,
-.wplace-theme-classic-light .edit-tool {
-  background: linear-gradient(135deg, #F3F3F3 0%, #FBFBFB 100%);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  color: var(--wplace-text);
-  border-radius: 6px;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 16px;
-  min-width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-:root .edit-tool:hover,
-.wplace-theme-classic-light .edit-tool:hover {
-  background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transform: translateY(-1px);
-}
-
-:root .edit-tool.active,
-.wplace-theme-classic-light .edit-tool.active {
-  background: var(--wplace-highlight);
-  color: white;
-  border-color: var(--wplace-text);
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(32, 60, 93, 0.3);
-}
-
-:root .edit-toggle,
-.wplace-theme-classic-light .edit-toggle {
-  background: linear-gradient(135deg, #F3F3F3 0%, #FBFBFB 100%);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  color: var(--wplace-text);
-  border-radius: 6px;
-  padding: 6px 10px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  min-width: 35px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:root .edit-toggle:hover,
-.wplace-theme-classic-light .edit-toggle:hover {
-  background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%);
-  transform: translateY(-1px);
-}
-
-:root .edit-toggle.active,
-.wplace-theme-classic-light .edit-toggle.active {
-  background: var(--wplace-highlight);
-  color: white;
-  border-color: var(--wplace-text);
-  box-shadow: 0 0 6px rgba(32, 60, 93, 0.3);
-}
-
-:root .edit-slider,
-.wplace-theme-classic-light .edit-slider {
-  width: 80px;
-  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
-  border-radius: 4px;
-  height: 6px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  margin: 0 8px;
-}
-
-:root .edit-color-grid,
-.wplace-theme-classic-light .edit-color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 3px;
-  max-height: 80px;
-  overflow: visible;
-  padding: 4px 0;
-  justify-content: flex-start;
-  flex-direction: row;
-}
-
-:root .edit-color-grid::-webkit-scrollbar,
-.wplace-theme-classic-light .edit-color-grid::-webkit-scrollbar {
-  width: 6px;
-}
-
-:root .edit-color-grid::-webkit-scrollbar-track,
-.wplace-theme-classic-light .edit-color-grid::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-}
-
-:root .edit-color-grid::-webkit-scrollbar-thumb,
-.wplace-theme-classic-light .edit-color-grid::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 3px;
-}
-
-:root .edit-color-grid::-webkit-scrollbar-thumb:hover,
-.wplace-theme-classic-light .edit-color-grid::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-/* Minimap Container & Components */
-:root .minimap-container,
-.wplace-theme-classic-light .minimap-container {
-  width: 200px;
-  height: 200px;
-  background: linear-gradient(135deg, #F8F8F8 0%, #EEEEEE 100%);
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-radius: 8px;
-  position: absolute;
-  top: 80px;
-  right: 20px;
-  overflow: hidden;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  backdrop-filter: blur(10px);
-  flex-shrink: 0;
-  z-index: 1000;
-}
-
-:root .minimap-header,
-.wplace-theme-classic-light .minimap-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 24px;
-  background: linear-gradient(135deg, #E0E0E1 0%, #F3F3F3 100%);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--wplace-text);
-  z-index: 3;
-}
-
-:root .minimap-content,
-.wplace-theme-classic-light .minimap-content {
-  position: absolute;
-  top: 24px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-}
-
-:root .minimap-canvas,
-.wplace-theme-classic-light .minimap-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: crosshair;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-  background-image: 
-    repeating-conic-gradient(rgba(0, 0, 0, 0.08) 0% 25%, transparent 0% 50%) 50% / 8px 8px;
-}
-
-:root .minimap-viewport,
-.wplace-theme-classic-light .minimap-viewport {
-  position: absolute;
-  border: 2px solid #4A9EFF;
-  background: rgba(74, 158, 255, 0.1);
-  pointer-events: none;
-  z-index: 2;
-  box-shadow: 0 0 8px rgba(74, 158, 255, 0.4);
-}
-
-/* Bottom Bar Styles */
-:root .edit-bottom-bar,
-.wplace-theme-classic-light .edit-bottom-bar {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 8px 12px;
-  background: linear-gradient(135deg, #E0E0E1 0%, #F3F3F3 100%);
-  border-top: 1px solid rgba(0, 0, 0, 0.2);
-  min-height: 70px;
-  max-height: 120px;
-  overflow: visible;
-  width: 100%;
-  position: relative;
-}
-
-:root .edit-info-section,
-.wplace-theme-classic-light .edit-info-section {
-  display: flex;
-  align-items: center;
-  color: rgba(0, 0, 0, 0.8);
-  font-size: 10px;
-  font-family: monospace;
-  white-space: nowrap;
-  min-width: 180px;
-  flex-shrink: 0;
-}
-
-:root .edit-current-color,
-.wplace-theme-classic-light .edit-current-color {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--wplace-text);
-  font-size: 11px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-:root .edit-available-colors,
-.wplace-theme-classic-light .edit-available-colors {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-  min-width: 0;
-}
-
-:root .edit-available-colors label,
-.wplace-theme-classic-light .edit-available-colors label {
-  color: var(--wplace-text);
-  font-size: 10px;
-  font-weight: 600;
-  margin: 0;
-}
-
-:root .color-display,
-.wplace-theme-classic-light .color-display {
-  width: 24px;
-  height: 24px;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 3px;
-  cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-  flex-shrink: 0;
-}
-
-:root .edit-color-grid .color-btn,
-.wplace-theme-classic-light .edit-color-grid .color-btn {
-  width: 18px;
-  height: 18px;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 2px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  flex-shrink: 0;
-}
-
-:root .edit-color-grid .color-btn:hover,
-.wplace-theme-classic-light .edit-color-grid .color-btn:hover {
-  border-color: rgba(0, 0, 0, 0.6);
-  transform: scale(1.1);
-  z-index: 10;
-}
-
-:root .edit-color-grid .color-btn.selected,
-.wplace-theme-classic-light .edit-color-grid .color-btn.selected {
-  border-color: #4facfe;
-  box-shadow: 0 0 8px rgba(79, 172, 254, 0.5);
-  transform: scale(1.1);
-}
-
-/* Mobile Responsive Adjustments */
-@media (max-width: 1024px) {
-  :root .edit-container,
-  .wplace-theme-classic-light .edit-container {
-    width: 100vw;
-    height: 100vh;
-    min-width: 100vw;
-    min-height: 100vh;
-    top: 0;
-    left: 0;
-    border-radius: 0;
-  }
-  
-  :root .edit-nav-controls,
-  .wplace-theme-classic-light .edit-nav-controls {
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  :root .edit-main-area,
-  .wplace-theme-classic-light .edit-main-area {
-    flex-direction: row;
-  }
-  
-  :root .edit-toolbar,
-  .wplace-theme-classic-light .edit-toolbar {
-    width: 60px;
-    min-width: 60px;
-  }
-  
-  :root .minimap-container,
-  .wplace-theme-classic-light .minimap-container {
-    top: 80px;
-    right: 8px;
-    transform: scale(0.8);
-  }
-  
-  :root .zoom-controls,
-  .wplace-theme-classic-light .zoom-controls {
-    flex-wrap: wrap;
-    gap: 4px;
-  }
-}
-
-@media (max-width: 768px) {
-  :root .edit-header,
-  .wplace-theme-classic-light .edit-header {
-    padding: 8px 12px;
-    flex-direction: column;
-    gap: 8px;
-    min-height: 60px;
-  }
-  
-  :root .edit-main-area,
-  .wplace-theme-classic-light .edit-main-area {
-    flex-direction: row;
-  }
-  
-  :root .edit-toolbar,
-  .wplace-theme-classic-light .edit-toolbar {
-    width: 50px;
-    min-width: 50px;
-  }
-  
-  :root .zoom-controls,
-  .wplace-theme-classic-light .zoom-controls {
-    scale: 0.9;
-  }
-  
-  :root .minimap-container,
-  .wplace-theme-classic-light .minimap-container {
-    display: none;
-  }
-  
-  :root .edit-color-grid .color-btn,
-  .wplace-theme-classic-light .edit-color-grid .color-btn {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-/* Touch Device Optimizations */
-@media (hover: none) and (pointer: coarse) {
-  :root .zoom-btn,
-  .wplace-theme-classic-light .zoom-btn {
-    min-width: 44px;
-    min-height: 44px;
-  }
-}
-
-/* Move Artwork Panel Styles for Classic Light Theme */
-.wplace-theme-classic-light .wplace-move-panel {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: var(--wplace-primary);
-  border: 2px solid var(--wplace-border-color);
-  border-radius: var(--wplace-radius);
-  padding: 20px;
-  z-index: 10000;
-  box-shadow: var(--wplace-shadow);
-  min-width: 200px;
-  text-align: center;
-  backdrop-filter: var(--wplace-backdrop);
-  font-family: var(--wplace-font);
-}
-
-.wplace-theme-classic-light .wplace-move-panel-title {
-  color: var(--wplace-text);
-  margin: 0 0 15px 0;
-  font-size: 16px;
-  font-weight: 600;
-}
-
-.wplace-theme-classic-light .wplace-move-controls {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 8px;
-  margin-bottom: 15px;
-}
-
-.wplace-theme-classic-light .wplace-move-btn {
-  padding: 10px;
-  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
-  color: white;
-  border: 1px solid var(--wplace-border-color);
-  border-radius: var(--wplace-btn-radius);
-  cursor: pointer;
-  font-family: var(--wplace-font);
-  font-size: 14px;
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
-}
-
-.wplace-theme-classic-light .wplace-move-btn:hover {
-  background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
-}
-
-.wplace-theme-classic-light .wplace-move-btn:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
-}
-
-.wplace-theme-classic-light .wplace-move-center {
-  color: var(--wplace-highlight);
-  padding: 10px;
-  font-size: 12px;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.wplace-theme-classic-light .wplace-move-close-btn {
-  background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
-  color: white;
-  border: 1px solid var(--wplace-border-color);
-  padding: 10px 16px;
-  border-radius: var(--wplace-btn-radius);
-  cursor: pointer;
-  font-family: var(--wplace-font);
-  transition: all 0.2s ease;
-  box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
-}
-
-.wplace-theme-classic-light .wplace-move-close-btn:hover {
-  background: linear-gradient(135deg, #d32f2f 0%, #f44336 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
-}
-
-.wplace-theme-classic-light .wplace-move-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
-  backdrop-filter: blur(4px);
-}
-
-/* Mobile Responsive Adjustments */
-@media (max-width: 1024px) {
-  :root .edit-container,
-  .wplace-theme-classic-light .edit-container {
-    width: 100vw;
-    height: 100vh;
-    min-width: 100vw;
-    min-height: 100vh;
-    top: 0;
-    left: 0;
-    border-radius: 0;
-  }
-  
-  :root .edit-nav-controls,
-  .wplace-theme-classic-light .edit-nav-controls {
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  :root .edit-main-area,
-  .wplace-theme-classic-light .edit-main-area {
-    flex-direction: row;
-  }
-  
-  :root .edit-toolbar,
-  .wplace-theme-classic-light .edit-toolbar {
-    width: 60px;
-    min-width: 60px;
-  }
-  
-  :root .minimap-container,
-  .wplace-theme-classic-light .minimap-container {
-    top: 80px;
-    right: 8px;
-    transform: scale(0.8);
-  }
-  
-  :root .zoom-controls,
-  .wplace-theme-classic-light .zoom-controls {
-    flex-wrap: wrap;
-    gap: 4px;
-  }
-}
-
-@media (max-width: 768px) {
-  :root .edit-header,
-  .wplace-theme-classic-light .edit-header {
-    padding: 8px 12px;
-    flex-direction: column;
-    gap: 8px;
-    min-height: 60px;
-  }
-  
-  :root .edit-main-area,
-  .wplace-theme-classic-light .edit-main-area {
-    flex-direction: row;
-  }
-  
-  :root .edit-toolbar,
-  .wplace-theme-classic-light .edit-toolbar {
-    width: 50px;
-    min-width: 50px;
-  }
-  
-  :root .zoom-controls,
-  .wplace-theme-classic-light .zoom-controls {
-    scale: 0.9;
-  }
-  
-  :root .minimap-container,
-  .wplace-theme-classic-light .minimap-container {
-    display: none;
-  }
-  
-  :root .edit-color-grid .color-btn,
-  .wplace-theme-classic-light .edit-color-grid .color-btn {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-/* Touch Device Optimizations */
-@media (hover: none) and (pointer: coarse) {
-  :root .zoom-btn,
-  .wplace-theme-classic-light .zoom-btn {
-    min-width: 44px;
-    min-height: 44px;
-  }
-  
-  :root .edit-tool,
-  .wplace-theme-classic-light .edit-tool {
-    min-width: 44px;
-    min-height: 44px;
-    padding: 12px;
-  }
-  
-  :root .edit-color-btn,
-  .wplace-theme-classic-light .edit-color-btn {
-    min-width: 20px;
-    min-height: 20px;
-  }
-}
-
-/* High DPI Display Optimizations */  
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  :root .edit-canvas,
-  .wplace-theme-classic-light .edit-canvas {
-    image-rendering: -webkit-optimize-contrast;
-    image-rendering: pixelated;
-  }
-  
-  :root .minimap-canvas,
-  .wplace-theme-classic-light .minimap-canvas {
-    image-rendering: -webkit-optimize-contrast;
-    image-rendering: pixelated;
-  }
-}
\ No newline at end of file
diff --git a/Extension/themes/classic.css b/Extension/themes/classic.css
index 428d8f6..4dd75c9 100644
--- a/Extension/themes/classic.css
+++ b/Extension/themes/classic.css
@@ -1029,988 +1029,3 @@
   backdrop-filter: blur(4px);
 }
 
-/* Edit Panel Styles for Classic Theme - Fullscreen Layout */
-:root .edit-overlay,
-.wplace-theme-classic .edit-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.95);
-  z-index: 10001;
-  backdrop-filter: blur(8px);
-}
-
-/* OLD STYLES - REMOVED - Now using enhanced fullscreen layout */
-
-:root .edit-header,
-.wplace-theme-classic .edit-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 15px;
-  background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
-  border-bottom: 1px solid #fff;
-  color: white;
-  font-weight: bold;
-}
-
-:root .edit-content,
-.wplace-theme-classic .edit-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-:root .edit-main-area,
-.wplace-theme-classic .edit-main-area {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-:root .edit-toolbar,
-.wplace-theme-classic .edit-toolbar {
-  width: 80px;
-  min-width: 80px;
-  background: rgba(255, 255, 255, 0.05);
-  border-right: 1px solid rgba(255, 255, 255, 0.2);
-  padding: 8px 4px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-}
-
-:root .edit-canvas-area,
-.wplace-theme-classic .edit-canvas-area {
-  flex: 4;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  background: #111;
-  min-width: 0;
-}
-
-:root .edit-canvas-container,
-.wplace-theme-classic .edit-canvas-container {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  min-height: 400px;
-  max-width: 100%;
-}
-
-:root .edit-canvas,
-.wplace-theme-classic .edit-canvas {
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  cursor: crosshair;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-}
-
-:root .edit-tool-group,
-.wplace-theme-classic .edit-tool-group {
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 6px;
-  padding: 6px 4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-}
-
-:root .edit-tool-group h4,
-.wplace-theme-classic .edit-tool-group h4 {
-  color: var(--wplace-highlight);
-  margin: 0 0 8px 0;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-:root .edit-brush-tools,
-.wplace-theme-classic .edit-brush-tools {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-:root .edit-tool-btn,
-.wplace-theme-classic .edit-tool-btn {
-  background: linear-gradient(135deg, #222 0%, #4a4a4a 100%);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: white;
-  border-radius: 6px;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-:root .edit-tool-btn:hover,
-.wplace-theme-classic .edit-tool-btn:hover {
-  background: linear-gradient(135deg, #4a4a4a 0%, #222 100%);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-}
-
-:root .edit-tool-btn.active,
-.wplace-theme-classic .edit-tool-btn.active {
-  background: var(--wplace-highlight);
-  color: #000;
-  border-color: white;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(0, 0, 0, 0.2);
-}
-
-:root .edit-color-palette,
-.wplace-theme-classic .edit-color-palette {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
-  gap: 4px;
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-:root .edit-color-swatch,
-.wplace-theme-classic .edit-color-swatch {
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-:root .edit-color-swatch:hover,
-.wplace-theme-classic .edit-color-swatch:hover {
-  transform: scale(1.1);
-  border-color: white;
-}
-
-:root .edit-color-swatch.active,
-.wplace-theme-classic .edit-color-swatch.active {
-  border-color: #4facfe;
-  box-shadow: 0 0 8px rgba(79, 172, 254, 0.5);
-  transform: scale(1.1);
-}
-
-:root .edit-brush-size-container,
-.wplace-theme-classic .edit-brush-size-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-:root .edit-brush-size-slider,
-.wplace-theme-classic .edit-brush-size-slider {
-  width: 100%;
-  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
-  border-radius: 4px;
-  height: 6px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-}
-
-:root .edit-brush-size-slider::-webkit-slider-thumb,
-.wplace-theme-classic .edit-brush-size-slider::-webkit-slider-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: white;
-  border: 2px solid #4facfe;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-:root .edit-brush-size-slider::-webkit-slider-thumb:hover,
-.wplace-theme-classic .edit-brush-size-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.2);
-}
-
-:root .edit-brush-size-display,
-.wplace-theme-classic .edit-brush-size-display {
-  color: white;
-  font-size: 12px;
-  text-align: center;
-  background: rgba(255, 255, 255, 0.1);
-  padding: 4px 8px;
-  border-radius: 4px;
-}
-
-:root .edit-action-buttons,
-.wplace-theme-classic .edit-action-buttons {
-  display: flex;
-  gap: 10px;
-  padding: 10px;
-  background: rgba(255, 255, 255, 0.05);
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-:root .edit-btn-primary,
-.wplace-theme-classic .edit-btn-primary {
-  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 6px;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-weight: bold;
-  transition: all 0.2s ease;
-}
-
-:root .edit-btn-secondary,
-.wplace-theme-classic .edit-btn-secondary {
-  background: linear-gradient(135deg, #666 0%, #444 100%);
-  color: white;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 6px;
-  padding: 10px 20px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-:root .edit-btn-primary:hover,
-.wplace-theme-classic .edit-btn-primary:hover {
-  background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-:root .edit-btn-secondary:hover,
-.wplace-theme-classic .edit-btn-secondary:hover {
-  background: linear-gradient(135deg, #444 0%, #666 100%);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-
-:root .edit-zoom-controls,
-.wplace-theme-classic .edit-zoom-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-:root .edit-zoom-btn,
-.wplace-theme-classic .edit-zoom-btn {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  color: white;
-  border-radius: 4px;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-:root .edit-zoom-btn:hover,
-.wplace-theme-classic .edit-zoom-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: white;
-}
-
-:root .edit-zoom-display,
-.wplace-theme-classic .edit-zoom-display {
-  color: white;
-  font-size: 12px;
-  min-width: 60px;
-  text-align: center;
-}
-
-/* New Edit Panel Enhancement Styles */
-
-:root .edit-instructions,
-.wplace-theme-classic .edit-instructions {
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 11px;
-  margin: 5px 0;
-  text-align: center;
-}
-
-:root .edit-status-bar,
-.wplace-theme-classic .edit-status-bar {
-  background: rgba(0, 0, 0, 0.3);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  padding: 5px 15px;
-  font-size: 11px;
-  color: rgba(255, 255, 255, 0.8);
-  font-family: monospace;
-}
-
-:root .edit-tool,
-.wplace-theme-classic .edit-tool {
-  background: linear-gradient(135deg, #333 0%, #555 100%);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: white;
-  border-radius: 6px;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 16px;
-  min-width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-:root .edit-tool:hover,
-.wplace-theme-classic .edit-tool:hover {
-  background: linear-gradient(135deg, #555 0%, #333 100%);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-  transform: translateY(-1px);
-}
-
-:root .edit-tool.active,
-.wplace-theme-classic .edit-tool.active {
-  background: var(--wplace-highlight);
-  color: #000;
-  border-color: white;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(79, 172, 254, 0.5);
-}
-
-/* Specific tool styling to ensure proper click handling */
-:root #fillTool,
-.wplace-theme-classic #fillTool {
-  position: relative;
-  z-index: 10;
-  pointer-events: auto;
-}
-
-:root .edit-toggle,
-.wplace-theme-classic .edit-toggle {
-  background: linear-gradient(135deg, #333 0%, #555 100%);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: white;
-  border-radius: 6px;
-  padding: 6px 10px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  min-width: 35px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-:root .edit-toggle:hover,
-.wplace-theme-classic .edit-toggle:hover {
-  background: linear-gradient(135deg, #555 0%, #333 100%);
-  transform: translateY(-1px);
-}
-
-:root .edit-toggle.active,
-.wplace-theme-classic .edit-toggle.active {
-  background: var(--wplace-highlight);
-  color: #000;
-  border-color: white;
-  box-shadow: 0 0 6px rgba(79, 172, 254, 0.5);
-}
-
-:root .edit-slider,
-.wplace-theme-classic .edit-slider {
-  width: 80px;
-  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
-  border-radius: 4px;
-  height: 6px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  margin: 0 8px;
-}
-
-:root .edit-slider::-webkit-slider-thumb,
-.wplace-theme-classic .edit-slider::-webkit-slider-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: white;
-  border: 2px solid #4facfe;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-:root .edit-slider::-webkit-slider-thumb:hover,
-.wplace-theme-classic .edit-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.2);
-}
-
-:root .edit-color-btn,
-.wplace-theme-classic .edit-color-btn {
-  width: 24px;
-  height: 24px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  margin: 2px;
-}
-
-:root .edit-color-btn:hover,
-.wplace-theme-classic .edit-color-btn:hover {
-  transform: scale(1.15);
-  border-color: white;
-  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
-}
-
-:root .edit-color-btn.active,
-.wplace-theme-classic .edit-color-btn.active {
-  border-color: #4facfe;
-  box-shadow: 0 0 8px rgba(79, 172, 254, 0.8);
-  transform: scale(1.15);
-}
-
-:root .edit-color-grid,
-.wplace-theme-classic .edit-color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 3px;
-  height: 32px;
-  padding: 2px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  width: 100%;
-}
-
-:root .color-display,
-.wplace-theme-classic .color-display {
-  width: 30px;
-  height: 20px;
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-radius: 4px;
-  margin-left: 8px;
-  background: #000000;
-}
-
-:root .zoom-btn,
-.wplace-theme-classic .zoom-btn {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  color: white;
-  border-radius: 4px;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  font-weight: bold;
-}
-
-:root .zoom-btn:hover,
-.wplace-theme-classic .zoom-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: white;
-  transform: translateY(-1px);
-}
-
-/* Scrollbar styling for color grid */
-:root .edit-color-grid::-webkit-scrollbar,
-.wplace-theme-classic .edit-color-grid::-webkit-scrollbar {
-  width: 6px;
-}
-
-:root .edit-color-grid::-webkit-scrollbar-track,
-.wplace-theme-classic .edit-color-grid::-webkit-scrollbar-track {
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 3px;
-}
-
-:root .edit-color-grid::-webkit-scrollbar-thumb,
-.wplace-theme-classic .edit-color-grid::-webkit-scrollbar-thumb {
-  background: var(--wplace-highlight);
-  border-radius: 3px;
-}
-
-:root .edit-color-grid::-webkit-scrollbar-thumb:hover,
-.wplace-theme-classic .edit-color-grid::-webkit-scrollbar-thumb:hover {
-  background: #4facfe;
-}
-
-/* Enhanced Layout for Fullscreen Canvas with Navigation Bar and Bottom Bar */
-
-:root .edit-header,
-.wplace-theme-classic .edit-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px;
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-  min-height: 70px;
-}
-
-:root .edit-header-left,
-.wplace-theme-classic .edit-header-left {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-:root .edit-header h3,
-.wplace-theme-classic .edit-header h3 {
-  margin: 0;
-  color: white;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-:root .edit-instructions,
-.wplace-theme-classic .edit-instructions {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-:root .edit-nav-controls,
-.wplace-theme-classic .edit-nav-controls {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-:root .zoom-controls,
-.wplace-theme-classic .zoom-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 6px 12px;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-:root .zoom-select,
-.wplace-theme-classic .zoom-select {
-  background: linear-gradient(135deg, #333 0%, #555 100%);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: white;
-  border-radius: 4px;
-  padding: 4px 8px;
-  font-size: 11px;
-  cursor: pointer;
-  min-width: 60px;
-}
-
-:root .zoom-select:hover,
-.wplace-theme-classic .zoom-select:hover {
-  background: linear-gradient(135deg, #555 0%, #333 100%);
-}
-
-:root .edit-canvas-container,
-.wplace-theme-classic .edit-canvas-container {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background:
-    linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
-    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
-    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
-  background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-  background-color: #ddd;
-}
-
-:root .edit-canvas-wrapper,
-.wplace-theme-classic .edit-canvas-wrapper {
-  position: relative;
-  transform-origin: center center;
-  display: inline-block;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  border: 2px solid #333;
-  background: white;
-  transition: transform 0.1s ease-out;
-  image-rendering: pixelated;
-}
-
-:root .brush-preview,
-.wplace-theme-classic .brush-preview {
-  position: absolute;
-  pointer-events: none;
-  border: 2px solid rgba(255, 255, 255, 0.8);
-  background: rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  transform-origin: top left;
-  display: none;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-}
-
-:root .minimap-container,
-.wplace-theme-classic .minimap-container {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: rgba(0, 0, 0, 0.85);
-  border: 1px solid #666;
-  border-radius: 6px;
-  padding: 8px;
-  z-index: 100;
-  backdrop-filter: blur(4px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-:root .minimap-header,
-.wplace-theme-classic .minimap-header {
-  color: white;
-  font-size: 10px;
-  margin-bottom: 6px;
-  text-align: center;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-:root .minimap-content,
-.wplace-theme-classic .minimap-content {
-  position: relative;
-}
-
-:root .minimap-canvas,
-.wplace-theme-classic .minimap-canvas {
-  border: 1px solid #999;
-  cursor: pointer;
-  display: block;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-}
-
-:root .minimap-canvas:hover,
-.wplace-theme-classic .minimap-canvas:hover {
-  border-color: #4facfe;
-}
-
-:root .minimap-viewport,
-.wplace-theme-classic .minimap-viewport {
-  position: absolute;
-  border: 2px solid #ff6b6b;
-  background: rgba(255, 107, 107, 0.2);
-  pointer-events: none;
-  box-shadow: inset 0 0 4px rgba(255, 107, 107, 0.5);
-  transition: all 0.1s ease;
-}
-
-/* Almost Fullscreen Layout Design */
-
-:root .edit-container,
-.wplace-theme-classic .edit-container {
-  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
-  border-radius: 8px;
-  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.7);
-  display: flex;
-  flex-direction: column;
-  width: 98vw;
-  height: 98vh;
-  max-width: 98vw;
-  max-height: 98vh;
-  min-width: 1000px;
-  min-height: 700px;
-  overflow: hidden;
-  backdrop-filter: blur(15px);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  position: fixed;
-  top: 1vh;
-  left: 1vw;
-  z-index: 10000;
-}
-
-:root .edit-main,
-.wplace-theme-classic .edit-main {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-:root .edit-canvas-area,
-.wplace-theme-classic .edit-canvas-area {
-  flex: 4;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
-}
-
-/* Bottom Bar Styles */
-:root .edit-bottom-bar,
-.wplace-theme-classic .edit-bottom-bar {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 8px 12px;
-  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-  min-height: 70px;
-  max-height: 120px;
-  overflow: visible;
-  width: 100%;
-  position: relative;
-}
-
-:root .edit-info-section,
-.wplace-theme-classic .edit-info-section {
-  display: flex;
-  align-items: center;
-  color: rgba(255, 255, 255, 0.8);
-  font-size: 10px;
-  font-family: monospace;
-  white-space: nowrap;
-  min-width: 180px;
-  flex-shrink: 0;
-}
-
-:root .edit-current-color,
-.wplace-theme-classic .edit-current-color {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: white;
-  font-size: 11px;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-:root .edit-available-colors,
-.wplace-theme-classic .edit-available-colors {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-  min-width: 0;
-}
-
-:root .edit-available-colors label,
-.wplace-theme-classic .edit-available-colors label {
-  color: white;
-  font-size: 10px;
-  font-weight: 600;
-  margin: 0;
-}
-
-:root .color-display,
-.wplace-theme-classic .color-display {
-  width: 24px;
-  height: 24px;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 3px;
-  cursor: pointer;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
-  flex-shrink: 0;
-}
-
-
-
-:root .edit-color-grid,
-.wplace-theme-classic .edit-color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 3px;
-  max-height: 80px;
-  overflow: visible;
-  padding: 4px 0;
-  justify-content: flex-start;
-  flex-direction: row;
-}
-
-:root .edit-color-grid .color-btn,
-.wplace-theme-classic .edit-color-grid .color-btn {
-  width: 18px;
-  height: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 2px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  flex-shrink: 0;
-}
-
-:root .edit-color-grid .color-btn:hover,
-.wplace-theme-classic .edit-color-grid .color-btn:hover {
-  border-color: rgba(255, 255, 255, 0.6);
-  transform: scale(1.1);
-  z-index: 10;
-}
-
-:root .edit-color-grid .color-btn.selected,
-.wplace-theme-classic .edit-color-grid .color-btn.selected {
-  border-color: #4facfe;
-  box-shadow: 0 0 8px rgba(79, 172, 254, 0.5);
-  transform: scale(1.1);
-}
-
-/* Mobile Responsive Adjustments */
-@media (max-width: 1024px) {
-
-  :root .edit-container,
-  .wplace-theme-classic .edit-container {
-    width: 100vw;
-    height: 100vh;
-    min-width: 100vw;
-    min-height: 100vh;
-    top: 0;
-    left: 0;
-    border-radius: 0;
-  }
-
-  :root .edit-nav-controls,
-  .wplace-theme-classic .edit-nav-controls {
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  :root .edit-main-area,
-  .wplace-theme-classic .edit-main-area {
-    flex-direction: row;
-  }
-
-  :root .edit-toolbar,
-  .wplace-theme-classic .edit-toolbar {
-    width: 60px;
-    min-width: 60px;
-  }
-
-  :root .minimap-container,
-  .wplace-theme-classic .minimap-container {
-    top: 80px;
-    right: 8px;
-    transform: scale(0.8);
-  }
-
-  :root .zoom-controls,
-  .wplace-theme-classic .zoom-controls {
-    flex-wrap: wrap;
-    gap: 4px;
-  }
-}
-
-@media (max-width: 768px) {
-
-  :root .edit-header,
-  .wplace-theme-classic .edit-header {
-    padding: 8px 12px;
-    flex-direction: column;
-    gap: 8px;
-    min-height: 60px;
-  }
-
-  :root .edit-main-area,
-  .wplace-theme-classic .edit-main-area {
-    flex-direction: row;
-  }
-
-  :root .edit-toolbar,
-  .wplace-theme-classic .edit-toolbar {
-    width: 50px;
-    min-width: 50px;
-  }
-
-  :root .zoom-controls,
-  .wplace-theme-classic .zoom-controls {
-    scale: 0.9;
-  }
-
-  :root .minimap-container,
-  .wplace-theme-classic .minimap-container {
-    display: none;
-  }
-
-  :root .edit-color-grid .color-btn,
-  .wplace-theme-classic .edit-color-grid .color-btn {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-/* Touch Device Optimizations */
-@media (hover: none) and (pointer: coarse) {
-
-  :root .zoom-btn,
-  .wplace-theme-classic .zoom-btn {
-    min-width: 44px;
-    min-height: 44px;
-  }
-
-  :root .edit-tool,
-  .wplace-theme-classic .edit-tool {
-    min-width: 44px;
-    min-height: 44px;
-    padding: 12px;
-  }
-
-  :root .edit-color-btn,
-  .wplace-theme-classic .edit-color-btn {
-    width: 32px;
-    height: 32px;
-  }
-}
-
-/* High DPI Display Support */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-
-  :root .edit-canvas,
-  .wplace-theme-classic .edit-canvas {
-    image-rendering: pixelated;
-    image-rendering: -moz-crisp-edges;
-    image-rendering: crisp-edges;
-  }
-
-  :root .minimap-canvas,
-  .wplace-theme-classic .minimap-canvas {
-    image-rendering: pixelated;
-    image-rendering: -moz-crisp-edges;
-    image-rendering: crisp-edges;
-  }
-}
-
-/* Animation and Transition Enhancements */
-:root .edit-canvas-wrapper,
-.wplace-theme-classic .edit-canvas-wrapper {
-  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-:root .minimap-viewport,
-.wplace-theme-classic .minimap-viewport {
-  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-:root .zoom-btn,
-.wplace-theme-classic .zoom-btn {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-:root .zoom-btn:active,
-.wplace-theme-classic .zoom-btn:active {
-  transform: translateY(1px) scale(0.95);
-}
\ No newline at end of file
diff --git a/Extension/themes/neon-cyan.css b/Extension/themes/neon-cyan.css
index 80ff0c1..b9c0b4b 100644
--- a/Extension/themes/neon-cyan.css
+++ b/Extension/themes/neon-cyan.css
@@ -814,322 +814,3 @@
   50% { box-shadow: 0 0 15px var(--wplace-error); }
 }
 
-/* Edit Panel Styles for Neon Cyan Theme */
-:root .edit-overlay,
-.wplace-theme-neon-cyan .edit-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(25, 89, 161, 0.95);
-  z-index: 10001;
-  backdrop-filter: blur(8px);
-}
-
-:root .edit-container,
-.wplace-theme-neon-cyan .edit-container {
-  background: linear-gradient(135deg, #1959A1 0%, #3C74AF 100%);
-  border-radius: 0;
-  box-shadow: 0 0 20px rgba(234, 156, 0, 0.3), inset 0 0 20px rgba(234, 156, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  width: 98vw;
-  height: 98vh;
-  max-width: 98vw;
-  max-height: 98vh;
-  min-width: 1000px;
-  min-height: 700px;
-  overflow: hidden;
-  border: 3px solid #EA9C00;
-  position: fixed;
-  top: 1vh;
-  left: 1vw;
-  z-index: 10000;
-}
-
-:root .edit-header,
-.wplace-theme-neon-cyan .edit-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px;
-  background: linear-gradient(135deg, #3C74AF 0%, #538CC0 100%);
-  border-bottom: 3px solid #EA9C00;
-  min-height: 70px;
-}
-
-:root .edit-header h3,
-.wplace-theme-neon-cyan .edit-header h3 {
-  margin: 0;
-  color: #81DCF7;
-  font-size: 18px;
-  font-weight: 600;
-  text-shadow: 0 0 10px #EA9C00;
-}
-
-:root .edit-main,
-.wplace-theme-neon-cyan .edit-main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-:root .edit-main-area,
-.wplace-theme-neon-cyan .edit-main-area {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-:root .edit-toolbar,
-.wplace-theme-neon-cyan .edit-toolbar {
-  width: 80px;
-  min-width: 80px;
-  background: rgba(0, 191, 255, 0.1);
-  border-right: 3px solid #00bfff;
-  padding: 8px 4px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  box-shadow: inset 0 0 20px rgba(0, 191, 255, 0.2);
-}
-
-:root .edit-tool-group,
-.wplace-theme-neon-cyan .edit-tool-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
-  align-items: center;
-}
-
-:root .edit-canvas-area,
-.wplace-theme-neon-cyan .edit-canvas-area {
-  flex: 4;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  background: linear-gradient(135deg, #538CC0 0%, #1959A1 100%);
-}
-
-:root .edit-canvas-container,
-.wplace-theme-neon-cyan .edit-canvas-container {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: 
-    linear-gradient(45deg, #2a4d6b 25%, transparent 25%), 
-    linear-gradient(-45deg, #2a4d6b 25%, transparent 25%), 
-    linear-gradient(45deg, transparent 75%, #2a4d6b 75%), 
-    linear-gradient(-45deg, transparent 75%, #2a4d6b 75%);
-  background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-  background-color: #1d3a5c;
-}
-
-:root .edit-canvas-wrapper,
-.wplace-theme-neon-cyan .edit-canvas-wrapper {
-  position: relative;
-  transform-origin: center center;
-  display: inline-block;
-  box-shadow: 0 0 20px rgba(234, 156, 0, 0.5);
-  border: 3px solid #EA9C00;
-  background: white;
-  transition: transform 0.1s ease-out;
-  image-rendering: pixelated;
-}
-
-:root .edit-bottom-bar,
-.wplace-theme-neon-cyan .edit-bottom-bar {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 8px 12px;
-  background: linear-gradient(135deg, #3C74AF 0%, #538CC0 100%);
-  border-top: 3px solid #EA9C00;
-  min-height: 70px;
-  max-height: 120px;
-  overflow: visible;
-  width: 100%;
-  position: relative;
-  flex-shrink: 0;
-  margin: 0;
-}
-
-:root .edit-info-section,
-.wplace-theme-neon-cyan .edit-info-section {
-  display: flex;
-  align-items: center;
-  color: rgba(0, 191, 255, 0.8);
-  font-size: 10px;
-  font-family: monospace;
-  white-space: nowrap;
-  min-width: 180px;
-  flex-shrink: 0;
-}
-
-:root .edit-current-color,
-.wplace-theme-neon-cyan .edit-current-color {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-left: 12px;
-  flex-shrink: 0;
-}
-
-:root .edit-color-swatch,
-.wplace-theme-neon-cyan .edit-color-swatch {
-  width: 12px;
-  height: 12px;
-  border: 1px solid #00bfff;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-
-/* Minimap Styles */
-:root .minimap-container,
-.wplace-theme-neon-cyan .minimap-container {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: rgba(0, 0, 0, 0.9);
-  border: 2px solid #00bfff;
-  border-radius: 6px;
-  padding: 8px;
-  z-index: 100;
-  backdrop-filter: blur(4px);
-  box-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
-}
-
-:root .minimap-header,
-.wplace-theme-neon-cyan .minimap-header {
-  color: #00bfff;
-  font-size: 10px;
-  margin-bottom: 6px;
-  text-align: center;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  text-shadow: 0 0 5px rgba(0, 191, 255, 0.5);
-}
-
-:root .minimap-content,
-.wplace-theme-neon-cyan .minimap-content {
-  position: relative;
-}
-
-:root .minimap-canvas,
-.wplace-theme-neon-cyan .minimap-canvas {
-  border: 1px solid #00bfff;
-  cursor: pointer;
-  display: block;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-}
-
-:root .minimap-canvas:hover,
-.wplace-theme-neon-cyan .minimap-canvas:hover {
-  border-color: #4facfe;
-  box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
-}
-
-:root .minimap-viewport,
-.wplace-theme-neon-cyan .minimap-viewport {
-  position: absolute;
-  border: 2px solid #ff6b6b;
-  background: rgba(255, 107, 107, 0.2);
-  pointer-events: none;
-}
-
-:root .edit-color-grid,
-.wplace-theme-neon-cyan .edit-color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 3px;
-  max-height: 80px;
-  overflow: visible;
-  padding: 4px 0;
-  justify-content: flex-start;
-  flex-direction: row;
-}
-
-:root .edit-color-grid .color-btn,
-.wplace-theme-neon-cyan .edit-color-grid .color-btn {
-  width: 18px;
-  height: 18px;
-  border: 2px solid #EA9C00;
-  border-radius: 0;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  flex-shrink: 0;
-  box-shadow: 0 0 5px rgba(234, 156, 0, 0.3);
-}
-
-:root .edit-color-grid .color-btn:hover,
-.wplace-theme-neon-cyan .edit-color-grid .color-btn:hover {
-  border-color: #81DCF7;
-  transform: scale(1.1);
-  z-index: 10;
-  box-shadow: 0 0 10px rgba(129, 220, 247, 0.5);
-}
-
-:root .edit-color-grid .color-btn.selected,
-.wplace-theme-neon-cyan .edit-color-grid .color-btn.selected {
-  border-color: #81DCF7;
-  box-shadow: 0 0 15px rgba(129, 220, 247, 0.8);
-  transform: scale(1.1);
-}
-
-:root .zoom-controls,
-.wplace-theme-neon-cyan .zoom-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: rgba(234, 156, 0, 0.1);
-  padding: 6px 12px;
-  border-radius: 0;
-  border: 2px solid #EA9C00;
-}
-
-:root .zoom-btn,
-.wplace-theme-neon-cyan .zoom-btn {
-  background: rgba(234, 156, 0, 0.1);
-  border: 2px solid #EA9C00;
-  color: #81DCF7;
-  border-radius: 0;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  font-weight: bold;
-  text-shadow: 0 0 5px #EA9C00;
-}
-
-:root .zoom-btn:hover,
-.wplace-theme-neon-cyan .zoom-btn:hover {
-  background: rgba(234, 156, 0, 0.2);
-  border-color: #81DCF7;
-  color: #81DCF7;
-  transform: translateY(-1px);
-  box-shadow: 0 0 10px rgba(129, 220, 247, 0.5);
-}
diff --git a/Extension/themes/neon-light.css b/Extension/themes/neon-light.css
index 264a76c..f79b867 100644
--- a/Extension/themes/neon-light.css
+++ b/Extension/themes/neon-light.css
@@ -880,321 +880,3 @@
     }
 }
 
-/* Edit Panel Styles for Neon Light Theme */
-:root .edit-overlay,
-.wplace-theme-neon-light .edit-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(224, 224, 225, 0.95);
-  z-index: 10001;
-  backdrop-filter: blur(8px);
-}
-
-:root .edit-container,
-.wplace-theme-neon-light .edit-container {
-  background: linear-gradient(135deg, #E0E0E1 0%, #FBFBFB 100%);
-  border-radius: 0;
-  box-shadow: 0 0 20px rgba(234, 156, 0, 0.3), inset 0 0 20px rgba(234, 156, 0, 0.1);
-  display: flex;
-  flex-direction: column;
-  width: 98vw;
-  height: 98vh;
-  max-width: 98vw;
-  max-height: 98vh;
-  min-width: 1000px;
-  min-height: 700px;
-  overflow: hidden;
-  border: 3px solid #203C5D;
-  position: fixed;
-  top: 1vh;
-  left: 1vw;
-  z-index: 10000;
-}
-
-:root .edit-header,
-.wplace-theme-neon-light .edit-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px;
-  background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%);
-  border-bottom: 3px solid #203C5D;
-  min-height: 70px;
-}
-
-:root .edit-header h3,
-.wplace-theme-neon-light .edit-header h3 {
-  margin: 0;
-  color: #203C5D;
-  font-size: 18px;
-  font-weight: 600;
-  text-shadow: 0 0 10px rgba(234, 156, 0, 0.5);
-}
-
-:root .edit-main,
-.wplace-theme-neon-light .edit-main {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-:root .edit-main-area,
-.wplace-theme-neon-light .edit-main-area {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-:root .edit-toolbar,
-.wplace-theme-neon-light .edit-toolbar {
-  width: 80px;
-  min-width: 80px;
-  background: rgba(96, 165, 250, 0.1);
-  border-right: 3px solid #60a5fa;
-  padding: 8px 4px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  box-shadow: inset 0 0 20px rgba(96, 165, 250, 0.2);
-}
-
-:root .edit-tool-group,
-.wplace-theme-neon-light .edit-tool-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: 100%;
-  align-items: center;
-}
-
-:root .edit-canvas-area,
-.wplace-theme-neon-light .edit-canvas-area {
-  flex: 4;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  min-height: 0;
-  background: linear-gradient(135deg, #F3F3F3 0%, #E0E0E1 100%);
-}
-
-:root .edit-canvas-container,
-.wplace-theme-neon-light .edit-canvas-container {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background: 
-    linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
-    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
-    linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
-    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
-  background-size: 20px 20px;
-  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-  background-color: #ddd;
-}
-
-:root .edit-canvas-wrapper,
-.wplace-theme-neon-light .edit-canvas-wrapper {
-  position: relative;
-  transform-origin: center center;
-  display: inline-block;
-  box-shadow: 0 0 20px rgba(234, 156, 0, 0.3);
-  border: 3px solid #203C5D;
-  background: white;
-  transition: transform 0.1s ease-out;
-  image-rendering: pixelated;
-}
-
-:root .edit-bottom-bar,
-.wplace-theme-neon-light .edit-bottom-bar {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 8px 12px;
-  background: linear-gradient(135deg, #FBFBFB 0%, #F3F3F3 100%);
-  border-top: 3px solid #203C5D;
-  min-height: 70px;
-  max-height: 120px;
-  overflow: visible;
-  width: 100%;
-  position: relative;
-  flex-shrink: 0;
-  margin: 0;
-}
-
-:root .edit-info-section,
-.wplace-theme-neon-light .edit-info-section {
-  display: flex;
-  align-items: center;
-  color: rgba(32, 60, 93, 0.9);
-  font-size: 10px;
-  font-family: monospace;
-  white-space: nowrap;
-  min-width: 180px;
-  flex-shrink: 0;
-}
-
-:root .edit-current-color,
-.wplace-theme-neon-light .edit-current-color {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin-left: 12px;
-  flex-shrink: 0;
-}
-
-:root .edit-color-swatch,
-.wplace-theme-neon-light .edit-color-swatch {
-  width: 12px;
-  height: 12px;
-  border: 1px solid #60a5fa;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-
-/* Minimap Styles */
-:root .minimap-container,
-.wplace-theme-neon-light .minimap-container {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background: rgba(255, 255, 255, 0.95);
-  border: 2px solid #60a5fa;
-  border-radius: 6px;
-  padding: 8px;
-  z-index: 100;
-  backdrop-filter: blur(4px);
-  box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
-}
-
-:root .minimap-header,
-.wplace-theme-neon-light .minimap-header {
-  color: #203C5D;
-  font-size: 10px;
-  margin-bottom: 6px;
-  text-align: center;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-:root .minimap-content,
-.wplace-theme-neon-light .minimap-content {
-  position: relative;
-}
-
-:root .minimap-canvas,
-.wplace-theme-neon-light .minimap-canvas {
-  border: 1px solid #60a5fa;
-  cursor: pointer;
-  display: block;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-}
-
-:root .minimap-canvas:hover,
-.wplace-theme-neon-light .minimap-canvas:hover {
-  border-color: #4facfe;
-  box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
-}
-
-:root .minimap-viewport,
-.wplace-theme-neon-light .minimap-viewport {
-  position: absolute;
-  border: 2px solid #ff6b6b;
-  background: rgba(255, 107, 107, 0.2);
-  pointer-events: none;
-}
-
-:root .edit-color-grid,
-.wplace-theme-neon-light .edit-color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 3px;
-  max-height: 80px;
-  overflow: visible;
-  padding: 4px 0;
-  justify-content: flex-start;
-  flex-direction: row;
-}
-
-:root .edit-color-grid .color-btn,
-.wplace-theme-neon-light .edit-color-grid .color-btn {
-  width: 18px;
-  height: 18px;
-  border: 2px solid #203C5D;
-  border-radius: 0;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  flex-shrink: 0;
-  box-shadow: 0 0 5px rgba(32, 60, 93, 0.3);
-}
-
-:root .edit-color-grid .color-btn:hover,
-.wplace-theme-neon-light .edit-color-grid .color-btn:hover {
-  border-color: #ff1493;
-  transform: scale(1.1);
-  z-index: 10;
-  box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
-}
-
-:root .edit-color-grid .color-btn.selected,
-.wplace-theme-neon-light .edit-color-grid .color-btn.selected {
-  border-color: #ff1493;
-  box-shadow: 0 0 15px rgba(255, 20, 147, 0.8);
-  transform: scale(1.1);
-}
-
-:root .zoom-controls,
-.wplace-theme-neon-light .zoom-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: rgba(32, 60, 93, 0.1);
-  padding: 6px 12px;
-  border-radius: 0;
-  border: 2px solid #203C5D;
-}
-
-:root .zoom-btn,
-.wplace-theme-neon-light .zoom-btn {
-  background: rgba(32, 60, 93, 0.1);
-  border: 2px solid #203C5D;
-  color: #203C5D;
-  border-radius: 0;
-  width: 30px;
-  height: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 14px;
-  font-weight: bold;
-  text-shadow: 0 0 5px rgba(234, 156, 0, 0.5);
-}
-
-:root .zoom-btn:hover,
-.wplace-theme-neon-light .zoom-btn:hover {
-  background: rgba(32, 60, 93, 0.2);
-  border-color: #ff1493;
-  color: #ff1493;
-  transform: translateY(-1px);
-  box-shadow: 0 0 10px rgba(255, 20, 147, 0.5);
-}
diff --git a/Extension/themes/neon.css b/Extension/themes/neon.css
index 726844e..cad6dea 100644
--- a/Extension/themes/neon.css
+++ b/Extension/themes/neon.css
@@ -927,764 +927,3 @@
     text-shadow: 0 0 8px #00bfff;
 }
 
-/* Edit Panel Styles for Neon Theme - Complete Fullscreen Layout */
-:root .edit-overlay,
-.wplace-theme-neon .edit-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(26, 26, 46, 0.95);
-  z-index: 10001;
-  backdrop-filter: blur(8px);
-}
-
-/* Enhanced Container Layout */
-:root .edit-container,
-.wplace-theme-neon .edit-container {
-  background: var(--wplace-primary);
-  border-radius: 0;
-  box-shadow: 0 0 30px var(--wplace-text), inset 0 0 30px rgb(0 255 65 / 10%);
-  display: flex;
-  flex-direction: column;
-  width: 98vw;
-  height: 98vh;
-  max-width: 98vw;
-  max-height: 98vh;
-  min-width: 1000px;
-  min-height: 700px;
-  overflow: hidden;
-  backdrop-filter: blur(15px);
-  border: 2px solid var(--wplace-text);
-  position: fixed;
-  top: 1vh;
-  left: 1vw;
-  z-index: 10000;
-}
-
-:root .edit-main,
-.wplace-theme-neon .edit-main {
-  display: flex;
-  flex: 1;
-  min-height: 0;
-}
-
-/* Enhanced Header Layout */
-:root .edit-header,
-.wplace-theme-neon .edit-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 20px;
-  background: var(--wplace-secondary);
-  border-bottom: 2px solid var(--wplace-text);
-  min-height: 70px;
-}
-
-:root .edit-header-left,
-.wplace-theme-neon .edit-header-left {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-:root .edit-header h3,
-.wplace-theme-neon .edit-header h3 {
-  margin: 0;
-  color: var(--wplace-text);
-  font-size: 18px;
-  font-weight: 600;
-  text-shadow: 0 0 10px var(--wplace-text);
-  font-family: var(--wplace-font);
-  text-transform: uppercase;
-}
-
-:root .edit-instructions,
-.wplace-theme-neon .edit-instructions {
-  color: rgba(0, 255, 65, 0.7);
-  font-family: var(--wplace-font);
-  font-size: 8px;
-  text-transform: uppercase;
-  text-shadow: 0 0 5px var(--wplace-text);
-}
-
-:root .edit-nav-controls,
-.wplace-theme-neon .edit-nav-controls {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-/* Zoom Controls */
-:root .zoom-controls,
-.wplace-theme-neon .zoom-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: rgba(0, 255, 65, 0.05);
-  padding: 6px 12px;
-  border-radius: 0;
-  border: 2px solid var(--wplace-text);
-  box-shadow: 0 0 15px var(--wplace-text);
-}
-
-:root .zoom-select,
-.wplace-theme-neon .zoom-select {
-  background: var(--wplace-secondary);
-  border: 2px solid var(--wplace-text);
-  color: var(--wplace-text);
-  border-radius: 0;
-  padding: 4px 8px;
-  font-size: 11px;
-  cursor: pointer;
-  min-width: 60px;
-  font-family: var(--wplace-font);
-  text-shadow: 0 0 5px var(--wplace-text);
-}
-
-:root .zoom-select:hover,
-.wplace-theme-neon .zoom-select:hover {
-  box-shadow: 0 0 15px var(--wplace-text);
-  animation: pixel-blink 0.5s infinite;
-}
-
-/* Content Layout */
-:root .edit-content,
-.wplace-theme-neon .edit-content {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-:root .edit-main-area,
-.wplace-theme-neon .edit-main-area {
-  display: flex;
-  flex-direction: row;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-/* Toolbar Styling */
-:root .edit-toolbar,
-.wplace-theme-neon .edit-toolbar {
-  width: 80px;
-  min-width: 80px;
-  background: var(--wplace-secondary);
-  border-right: 2px solid var(--wplace-text);
-  padding: 8px 4px;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  box-shadow: 0 0 20px var(--wplace-text);
-}
-
-:root .edit-canvas-area,
-.wplace-theme-neon .edit-canvas-area {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--wplace-primary);
-  position: relative;
-  overflow: auto;
-  border-right: 2px solid var(--wplace-text);
-}
-
-/* Canvas Container with Neon Background Pattern */
-:root .edit-canvas-container,
-.wplace-theme-neon .edit-canvas-container {
-  flex: 1;
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  background-image: 
-    repeating-conic-gradient(rgba(0, 255, 65, 0.08) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
-}
-
-:root .edit-canvas,
-.wplace-theme-neon .edit-canvas {
-  border: 2px solid var(--wplace-text);
-  cursor: crosshair;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-  background-image: 
-    repeating-conic-gradient(rgba(0, 255, 65, 0.08) 0% 25%, transparent 0% 50%) 50% / 20px 20px;
-  box-shadow: 0 0 20px var(--wplace-text);
-}
-
-:root .edit-canvas-wrapper,
-.wplace-theme-neon .edit-canvas-wrapper {
-  position: relative;
-  transform-origin: center center;
-  display: inline-block;
-  box-shadow: 0 0 30px var(--wplace-text);
-  border: 2px solid var(--wplace-text);
-  background: var(--wplace-primary);
-  transition: transform 0.1s ease-out;
-  image-rendering: pixelated;
-}
-
-/* Tool Groups */
-:root .edit-tool-group,
-.wplace-theme-neon .edit-tool-group {
-  background: rgba(0, 255, 65, 0.05);
-  border-radius: 0;
-  padding: 6px 4px;
-  border: 2px solid var(--wplace-text);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  box-shadow: 0 0 15px var(--wplace-text);
-}
-
-:root .edit-tool-group h4,
-.wplace-theme-neon .edit-tool-group h4 {
-  color: var(--wplace-text);
-  margin: 0 0 8px 0;
-  font-size: 13px;
-  font-weight: 600;
-  text-shadow: 0 0 8px var(--wplace-text);
-  font-family: var(--wplace-font);
-  text-transform: uppercase;
-}
-
-/* Tool Buttons */
-:root .edit-tool-btn,
-.wplace-theme-neon .edit-tool-btn {
-  background: var(--wplace-secondary);
-  border: 2px solid var(--wplace-text);
-  color: var(--wplace-text);
-  border-radius: 0;
-  padding: 8px 12px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-size: 12px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--wplace-font);
-  text-shadow: 0 0 5px var(--wplace-text);
-  text-transform: uppercase;
-}
-
-:root .edit-tool-btn:hover,
-.wplace-theme-neon .edit-tool-btn:hover {
-  box-shadow: 0 0 20px var(--wplace-text);
-  animation: pixel-blink 0.5s infinite;
-}
-
-:root .edit-tool-btn.active,
-.wplace-theme-neon .edit-tool-btn.active {
-  background: var(--wplace-text);
-  color: var(--wplace-primary);
-  border-color: var(--wplace-text);
-  box-shadow: 0 0 25px var(--wplace-text);
-}
-
-/* Brush Preview */
-:root .brush-preview,
-.wplace-theme-neon .brush-preview {
-  position: absolute;
-  pointer-events: none;
-  border: 2px solid var(--wplace-text);
-  background: rgba(0, 255, 65, 0.1);
-  z-index: 1000;
-  transform-origin: top left;
-  display: none;
-  box-shadow: 0 0 15px var(--wplace-text);
-}
-
-/* Color Palette */
-:root .edit-color-palette,
-.wplace-theme-neon .edit-color-palette {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
-  gap: 4px;
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-:root .edit-color-swatch,
-.wplace-theme-neon .edit-color-swatch {
-  width: 24px;
-  height: 24px;
-  border: 2px solid var(--wplace-text);
-  border-radius: 0;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 0 8px var(--wplace-text);
-}
-
-:root .edit-color-swatch:hover,
-.wplace-theme-neon .edit-color-swatch:hover {
-  transform: scale(1.1);
-  box-shadow: 0 0 15px var(--wplace-text);
-}
-
-:root .edit-color-swatch.active,
-.wplace-theme-neon .edit-color-swatch.active {
-  border-color: var(--wplace-highlight);
-  box-shadow: 0 0 20px var(--wplace-highlight);
-  transform: scale(1.1);
-}
-
-/* Brush Size Controls */
-:root .edit-brush-size-container,
-.wplace-theme-neon .edit-brush-size-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-:root .edit-brush-size-slider,
-.wplace-theme-neon .edit-brush-size-slider {
-  width: 100%;
-  background: var(--wplace-secondary);
-  border-radius: 0;
-  height: 6px;
-  outline: none;
-  appearance: none;
-  -webkit-appearance: none;
-  border: 1px solid var(--wplace-text);
-  box-shadow: 0 0 10px var(--wplace-text);
-}
-
-:root .edit-brush-size-slider::-webkit-slider-thumb,
-.wplace-theme-neon .edit-brush-size-slider::-webkit-slider-thumb {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 0;
-  background: var(--wplace-text);
-  border: 2px solid var(--wplace-text);
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 0 10px var(--wplace-text);
-}
-
-:root .edit-brush-size-slider::-webkit-slider-thumb:hover,
-.wplace-theme-neon .edit-brush-size-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.2);
-  box-shadow: 0 0 20px var(--wplace-text);
-}
-
-:root .edit-brush-size-display,
-.wplace-theme-neon .edit-brush-size-display {
-  color: var(--wplace-text);
-  font-size: 12px;
-  text-align: center;
-  background: rgba(0, 255, 65, 0.1);
-  padding: 4px 8px;
-  border-radius: 0;
-  border: 1px solid var(--wplace-text);
-  font-family: var(--wplace-font);
-  text-shadow: 0 0 5px var(--wplace-text);
-}
-
-/* Action Buttons */
-:root .edit-action-buttons,
-.wplace-theme-neon .edit-action-buttons {
-  display: flex;
-  gap: 10px;
-  padding: 10px;
-  background: var(--wplace-secondary);
-  border-top: 2px solid var(--wplace-text);
-}
-
-:root .edit-btn-primary,
-.wplace-theme-neon .edit-btn-primary {
-  background: var(--wplace-secondary);
-  color: var(--wplace-success);
-  border: 2px solid var(--wplace-success);
-  border-radius: 0;
-  padding: 10px 20px;
-  cursor: pointer;
-  font-weight: bold;
-  transition: all 0.2s ease;
-  font-family: var(--wplace-font);
-  text-shadow: 0 0 8px var(--wplace-success);
-  text-transform: uppercase;
-}
-
-:root .edit-btn-secondary,
-.wplace-theme-neon .edit-btn-secondary {
-  background: var(--wplace-secondary);
-  color: var(--wplace-text);
-  border: 2px solid var(--wplace-text);
-  border-radius: 0;
-  padding: 10px 20px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-family: var(--wplace-font);
-  text-shadow: 0 0 5px var(--wplace-text);
-  text-transform: uppercase;
-}
-
-:root .edit-btn-primary:hover,
-.wplace-theme-neon .edit-btn-primary:hover {
-  box-shadow: 0 0 20px var(--wplace-success);
-  animation: pixel-blink 0.5s infinite;
-}
-
-:root .edit-btn-secondary:hover,
-.wplace-theme-neon .edit-btn-secondary:hover {
-  box-shadow: 0 0 15px var(--wplace-text);
-  animation: pixel-blink 0.5s infinite;
-}
-
-/* Zoom Controls */
-:root .edit-zoom-controls,
-.wplace-theme-neon .edit-zoom-controls {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-:root .edit-zoom-btn,
-.wplace-theme-neon .edit-zoom-btn {
-  background: var(--wplace-secondary);
-  border: 2px solid var(--wplace-text);
-  color: var(--wplace-text);
-  border-radius: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-family: var(--wplace-font);
-  text-shadow: 0 0 5px var(--wplace-text);
-}
-
-:root .edit-zoom-btn:hover,
-.wplace-theme-neon .edit-zoom-btn:hover {
-  box-shadow: 0 0 15px var(--wplace-text);
-  animation: pixel-blink 0.5s infinite;
-}
-
-/* Minimap Container & Components */
-:root .minimap-container,
-.wplace-theme-neon .minimap-container {
-  width: 200px;
-  height: 200px;
-  background: var(--wplace-primary);
-  border: 2px solid var(--wplace-text);
-  border-radius: 0;
-  position: absolute;
-  top: 80px;
-  right: 20px;
-  overflow: hidden;
-  box-shadow: 0 0 25px var(--wplace-text), inset 0 0 20px rgb(0 255 65 / 10%);
-  backdrop-filter: blur(10px);
-  flex-shrink: 0;
-  z-index: 1000;
-}
-
-:root .minimap-header,
-.wplace-theme-neon .minimap-header {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 24px;
-  background: var(--wplace-secondary);
-  border-bottom: 1px solid var(--wplace-text);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--wplace-text);
-  z-index: 3;
-  font-family: var(--wplace-font);
-  text-transform: uppercase;
-  text-shadow: 0 0 5px var(--wplace-text);
-}
-
-:root .minimap-content,
-.wplace-theme-neon .minimap-content {
-  position: absolute;
-  top: 24px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: hidden;
-}
-
-:root .minimap-canvas,
-.wplace-theme-neon .minimap-canvas {
-  position: absolute;
-  top: 0;
-  left: 0;
-  cursor: crosshair;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-  background-image: 
-    repeating-conic-gradient(rgba(0, 255, 65, 0.08) 0% 25%, transparent 0% 50%) 50% / 8px 8px;
-  border: 1px solid var(--wplace-text);
-}
-
-:root .minimap-canvas:hover,
-.wplace-theme-neon .minimap-canvas:hover {
-  border-color: var(--wplace-highlight);
-  box-shadow: 0 0 10px var(--wplace-highlight);
-}
-
-:root .minimap-viewport,
-.wplace-theme-neon .minimap-viewport {
-  position: absolute;
-  border: 2px solid var(--wplace-highlight);
-  background: rgba(255, 107, 53, 0.1);
-  pointer-events: none;
-  z-index: 2;
-  box-shadow: 0 0 15px var(--wplace-highlight);
-}
-
-/* Bottom Bar Styles */
-:root .edit-bottom-bar,
-.wplace-theme-neon .edit-bottom-bar {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  padding: 8px 12px;
-  background: var(--wplace-secondary);
-  border-top: 2px solid var(--wplace-text);
-  min-height: 70px;
-  max-height: 120px;
-  overflow: visible;
-  width: 100%;
-  position: relative;
-}
-
-:root .edit-info-section,
-.wplace-theme-neon .edit-info-section {
-  display: flex;
-  align-items: center;
-  color: var(--wplace-text);
-  font-size: 10px;
-  font-family: var(--wplace-font);
-  white-space: nowrap;
-  min-width: 180px;
-  flex-shrink: 0;
-  text-shadow: 0 0 5px var(--wplace-text);
-  text-transform: uppercase;
-}
-
-:root .edit-current-color,
-.wplace-theme-neon .edit-current-color {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--wplace-text);
-  font-size: 11px;
-  white-space: nowrap;
-  flex-shrink: 0;
-  font-family: var(--wplace-font);
-  text-shadow: 0 0 5px var(--wplace-text);
-  text-transform: uppercase;
-}
-
-:root .edit-available-colors,
-.wplace-theme-neon .edit-available-colors {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  flex: 1;
-  min-width: 0;
-}
-
-:root .edit-available-colors label,
-.wplace-theme-neon .edit-available-colors label {
-  color: var(--wplace-text);
-  font-size: 10px;
-  font-weight: 600;
-  margin: 0;
-  font-family: var(--wplace-font);
-  text-shadow: 0 0 5px var(--wplace-text);
-  text-transform: uppercase;
-}
-
-:root .color-display,
-.wplace-theme-neon .color-display {
-  width: 24px;
-  height: 24px;
-  border: 2px solid var(--wplace-text);
-  border-radius: 0;
-  cursor: pointer;
-  box-shadow: 0 0 8px var(--wplace-text);
-  flex-shrink: 0;
-}
-
-:root .edit-color-grid,
-.wplace-theme-neon .edit-color-grid {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 3px;
-  max-height: 80px;
-  overflow: visible;
-  padding: 4px 0;
-  justify-content: flex-start;
-  flex-direction: row;
-}
-
-:root .edit-color-grid .color-btn,
-.wplace-theme-neon .edit-color-grid .color-btn {
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--wplace-text);
-  border-radius: 0;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  position: relative;
-  flex-shrink: 0;
-  box-shadow: 0 0 8px var(--wplace-text);
-}
-
-:root .edit-color-grid .color-btn:hover,
-.wplace-theme-neon .edit-color-grid .color-btn:hover {
-  transform: scale(1.1);
-  box-shadow: 0 0 15px var(--wplace-text);
-}
-
-:root .edit-color-grid .color-btn.active,
-.wplace-theme-neon .edit-color-grid .color-btn.active {
-  border-color: var(--wplace-highlight);
-  box-shadow: 0 0 20px var(--wplace-highlight);
-  transform: scale(1.2);
-}
-
-/* Mobile Responsive Adjustments */
-@media (max-width: 1024px) {
-  :root .edit-container,
-  .wplace-theme-neon .edit-container {
-    width: 100vw;
-    height: 100vh;
-    min-width: 100vw;
-    min-height: 100vh;
-    top: 0;
-    left: 0;
-    border-radius: 0;
-  }
-  
-  :root .edit-nav-controls,
-  .wplace-theme-neon .edit-nav-controls {
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  :root .edit-main-area,
-  .wplace-theme-neon .edit-main-area {
-    flex-direction: row;
-  }
-  
-  :root .edit-toolbar,
-  .wplace-theme-neon .edit-toolbar {
-    width: 60px;
-    min-width: 60px;
-  }
-  
-  :root .minimap-container,
-  .wplace-theme-neon .minimap-container {
-    top: 80px;
-    right: 8px;
-    transform: scale(0.8);
-  }
-  
-  :root .zoom-controls,
-  .wplace-theme-neon .zoom-controls {
-    flex-wrap: wrap;
-    gap: 4px;
-  }
-}
-
-@media (max-width: 768px) {
-  :root .edit-header,
-  .wplace-theme-neon .edit-header {
-    padding: 8px 12px;
-    flex-direction: column;
-    gap: 8px;
-    min-height: 60px;
-  }
-  
-  :root .edit-main-area,
-  .wplace-theme-neon .edit-main-area {
-    flex-direction: row;
-  }
-  
-  :root .edit-toolbar,
-  .wplace-theme-neon .edit-toolbar {
-    width: 50px;
-    min-width: 50px;
-  }
-  
-  :root .zoom-controls,
-  .wplace-theme-neon .zoom-controls {
-    scale: 0.9;
-  }
-  
-  :root .minimap-container,
-  .wplace-theme-neon .minimap-container {
-    display: none;
-  }
-  
-  :root .edit-color-grid .color-btn,
-  .wplace-theme-neon .edit-color-grid .color-btn {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-/* Touch Device Optimizations */
-@media (hover: none) and (pointer: coarse) {
-  :root .zoom-btn,
-  .wplace-theme-neon .zoom-btn {
-    min-width: 44px;
-    min-height: 44px;
-  }
-  
-  :root .edit-tool,
-  .wplace-theme-neon .edit-tool {
-    min-width: 44px;
-    min-height: 44px;
-    padding: 12px;
-  }
-  
-  :root .edit-color-btn,
-  .wplace-theme-neon .edit-color-btn {
-    min-width: 20px;
-    min-height: 20px;
-  }
-}
-
-/* High DPI Display Optimizations */  
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-  :root .edit-canvas,
-  .wplace-theme-neon .edit-canvas {
-    image-rendering: -webkit-optimize-contrast;
-    image-rendering: pixelated;
-  }
-  
-  :root .minimap-canvas,
-  .wplace-theme-neon .minimap-canvas {
-    image-rendering: -webkit-optimize-contrast;
-    image-rendering: pixelated;
-  }
-}
-

From 6c240b2b981960f0ec96a358e7ffd21ac750b339 Mon Sep 17 00:00:00 2001
From: MiraiSeori <1321807442@qq.com>
Date: Thu, 20 Nov 2025 08:04:36 +0800
Subject: [PATCH 3/4] feat: refactor createWasmToken to improve stability and
 token capture mechanism

---
 Extension/scripts/Auto-Image.js  | 161 ++++++++++++-------------------
 Extension/scripts/Auto-Repair.js | 156 ++++++++++++------------------
 2 files changed, 120 insertions(+), 197 deletions(-)

diff --git a/Extension/scripts/Auto-Image.js b/Extension/scripts/Auto-Image.js
index 3e18e9d..dfed8e1 100644
--- a/Extension/scripts/Auto-Image.js
+++ b/Extension/scripts/Auto-Image.js
@@ -11427,120 +11427,79 @@ localStorage.removeItem("lp");
   //find module if pawtect_chunk is null
   pawtect_chunk ??= await findTokenModule("pawtect_wasm_bg.wasm");
 
-  async function createWasmToken(regionX, regionY, payload) {
+async function createWasmToken(regionX, regionY, payload) {
     try {
-      // Load the Pawtect module and WASM
-      const mod = await import(new URL('/_app/immutable/chunks/' + pawtect_chunk, location.origin).href);
-      let wasm;
-      try {
-        wasm = await mod._();
-        console.log('✅ WASM initialized successfully');
-      } catch (wasmError) {
-        console.error('❌ WASM initialization failed:', wasmError);
+      // Load the Pawtect module
+      // Fallback to D1pWKeJi.js if pawtect_chunk is undefined, ensuring stability
+      const chunkName = (typeof pawtect_chunk !== 'undefined' && pawtect_chunk) ? pawtect_chunk : "D1pWKeJi.js";
+      const mod = await import(new URL('/_app/immutable/chunks/' + chunkName, location.origin).href);
+      
+      // Check for API client (mod.a) instead of WASM init (mod._)
+      if (!mod.a) {
+        console.error('❌ API Client (mod.a) not found');
         return null;
       }
-      try {
-        try {
-          const me = await fetch(`https://backend.wplace.live/me`, { credentials: 'include' }).then(r => r.ok ? r.json() : null);
-          if (me?.id) {
-            mod.i(me.id);
-            console.log('✅ user ID set:', me.id);
-          }
-        } catch { }
-      } catch (userIdError) {
-        console.log('⚠️ Error setting user ID:', userIdError.message);
-      }
-      try {
-        const testUrl = `https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`;
-        if (mod.r) {
-          mod.r(testUrl);
-          console.log('✅ Request URL set:', testUrl);
-        } else {
-          console.log('⚠️ request_url function (mod.r) not available');
-        }
-      } catch (urlError) {
-        console.log('⚠️ Error setting request URL:', urlError.message);
+      console.log('✅ Module loaded and API client found');
+
+      // Prepare data for paint() method
+      // We need to reconstruct the internal pixel object structure expected by mod.a.paint
+      console.log('📝 Reconstructing paint data from payload...');
+      const paintPixels = [];
+      for (let i = 0; i < payload.colors.length; i++) {
+        paintPixels.push({
+          tile: [regionX, regionY],
+          pixel: [payload.coords[i * 2], payload.coords[i * 2 + 1]],
+          season: mod.C, // Use exported season constant
+          colorIdx: payload.colors[i]
+        });
       }
 
-      // Create test payload
+      // Hook request method to capture token
+      // This bypasses the need to manually handle WASM memory or obfuscated context functions
+      console.log('🚀 Hooking API client to capture token...');
+      const originalRequest = mod.a.request.bind(mod.a);
+      let capturedToken = null;
 
-      console.log('📝 payload:', payload);
-
-      // Encode payload
-      const enc = new TextEncoder();
-      const dec = new TextDecoder();
-      const bodyStr = JSON.stringify(payload);
-      const bytes = enc.encode(bodyStr);
-      console.log('📏 Payload size:', bytes.length, 'bytes');
-      console.log('📄 Payload string:', bodyStr);
-
-      // Allocate WASM memory with validation
-      let inPtr;
-      try {
-        if (!wasm.__wbindgen_malloc) {
-          console.error('❌ __wbindgen_malloc function not found');
-          return null;
+      mod.a.request = async function(url, options) {
+        // Intercept the token from headers
+        if (options && options.headers && options.headers['x-pawtect-token']) {
+          capturedToken = options.headers['x-pawtect-token'];
+          console.log('✅ Token captured via hook');
+          
+          // Return fake success to satisfy paint() execution flow
+          return { status: 200, json: async () => ({}) };
         }
+        // Pass through other requests (like /me)
+        return originalRequest(url, options);
+      };
 
-        inPtr = wasm.__wbindgen_malloc(bytes.length, 1);
-        console.log('✅ WASM memory allocated, pointer:', inPtr);
+      // Trigger the paint function
+      console.log('🚀 Calling mod.a.paint() to generate token...');
+      try {
+        // This handles UserID, URL, and WASM interaction internally
+        await mod.a.paint(paintPixels, payload.fp);
+      } catch (e) {
+        // Ignore errors caused by our fake request response
+      } finally {
+        // Restore original request method (Cleanup)
+        mod.a.request = originalRequest;
+        console.log('✅ Request hook restored');
+      }
 
-        // Copy data to WASM memory
-        const wasmBuffer = new Uint8Array(wasm.memory.buffer, inPtr, bytes.length);
-        wasmBuffer.set(bytes);
-        console.log('✅ Data copied to WASM memory');
-      } catch (memError) {
-        console.error('❌ Memory allocation error:', memError);
+      // Validate and return result
+      if (capturedToken) {
+        console.log('');
+        console.log('🎉 SUCCESS!');
+        console.log('🔑 Full token:');
+        console.log(capturedToken);
+        return capturedToken;
+      } else {
+        console.error('❌ Failed to capture token via hooking');
         return null;
       }
 
-      // Call the WASM function
-      console.log('🚀 Calling get_pawtected_endpoint_payload...');
-      let outPtr, outLen, token;
-      try {
-        const result = wasm.get_pawtected_endpoint_payload(inPtr, bytes.length);
-        console.log('✅ Function called, result type:', typeof result, result);
-
-        if (Array.isArray(result) && result.length === 2) {
-          [outPtr, outLen] = result;
-          console.log('✅ Got output pointer:', outPtr, 'length:', outLen);
-
-          // Decode the result
-          const outputBuffer = new Uint8Array(wasm.memory.buffer, outPtr, outLen);
-          token = dec.decode(outputBuffer);
-          console.log('✅ Token decoded successfully');
-        } else {
-          console.error('❌ Unexpected function result format:', result);
-          return null;
-        }
-      } catch (funcError) {
-        console.error('❌ Function call error:', funcError);
-        console.error('Stack trace:', funcError.stack);
-        return null;
-      }
-
-      // Cleanup memory
-      try {
-        if (wasm.__wbindgen_free && outPtr && outLen) {
-          wasm.__wbindgen_free(outPtr, outLen, 1);
-          console.log('✅ Output memory freed');
-        }
-        if (wasm.__wbindgen_free && inPtr) {
-          wasm.__wbindgen_free(inPtr, bytes.length, 1);
-          console.log('✅ Input memory freed');
-        }
-      } catch (cleanupError) {
-        console.log('⚠️ Cleanup warning:', cleanupError.message);
-      }
-
-      // Display results
-      console.log('');
-      console.log('🎉 SUCCESS!');
-      console.log('🔑 Full token:');
-      console.log(token);
-      return token;
     } catch (error) {
-      console.error('❌ Failed to generate fp parameter:', error);
+      console.error('❌ Failed to generate token:', error);
       return null;
     }
   }
diff --git a/Extension/scripts/Auto-Repair.js b/Extension/scripts/Auto-Repair.js
index 3942791..cc804fe 100644
--- a/Extension/scripts/Auto-Repair.js
+++ b/Extension/scripts/Auto-Repair.js
@@ -470,115 +470,79 @@
   // Find module if pawtect_chunk is null
   pawtect_chunk ??= await findTokenModule("pawtect_wasm_bg.wasm");
 
-  async function createWasmToken(regionX, regionY, payload) {
+async function createWasmToken(regionX, regionY, payload) {
     try {
-      // Load the Pawtect module and WASM
-      const mod = await import(new URL('/_app/immutable/chunks/'+pawtect_chunk, location.origin).href);
-      let wasm;
-      try {
-        wasm = await mod._();
-        console.log('✅ WASM initialized successfully');
-      } catch (wasmError) {
-        console.error('❌ WASM initialization failed:', wasmError);
+      // Load the Pawtect module
+      // Fallback to D1pWKeJi.js if pawtect_chunk is undefined, ensuring stability
+      const chunkName = (typeof pawtect_chunk !== 'undefined' && pawtect_chunk) ? pawtect_chunk : "D1pWKeJi.js";
+      const mod = await import(new URL('/_app/immutable/chunks/' + chunkName, location.origin).href);
+      
+      // Check for API client (mod.a) instead of WASM init (mod._)
+      if (!mod.a) {
+        console.error('❌ API Client (mod.a) not found');
         return null;
       }
-      try {
-        try {
-          const me = await fetch(`https://backend.wplace.live/me`, { credentials: 'include' }).then(r => r.ok ? r.json() : null);
-          if (me?.id) {
-            mod.i(me.id);
-            console.log('✅ user ID set:', me.id);
-          }
-        } catch { }
-      } catch (userIdError) {
-        console.log('⚠️ Error setting user ID:', userIdError.message);
-      }
-      try {
-        const testUrl = `https://backend.wplace.live/s0/pixel/${regionX}/${regionY}`;
-        if (mod.r) {
-          mod.r(testUrl);
-          console.log('✅ Request URL set:', testUrl);
-        } else {
-          console.log('⚠️ request_url function (mod.r) not available');
-        }
-      } catch (urlError) {
-        console.log('⚠️ Error setting request URL:', urlError.message);
+      console.log('✅ Module loaded and API client found');
+
+      // Prepare data for paint() method
+      // We need to reconstruct the internal pixel object structure expected by mod.a.paint
+      console.log('📝 Reconstructing paint data from payload...');
+      const paintPixels = [];
+      for (let i = 0; i < payload.colors.length; i++) {
+        paintPixels.push({
+          tile: [regionX, regionY],
+          pixel: [payload.coords[i * 2], payload.coords[i * 2 + 1]],
+          season: mod.C, // Use exported season constant
+          colorIdx: payload.colors[i]
+        });
       }
 
-      console.log('🔍 payload:', payload);
+      // Hook request method to capture token
+      // This bypasses the need to manually handle WASM memory or obfuscated context functions
+      console.log('🚀 Hooking API client to capture token...');
+      const originalRequest = mod.a.request.bind(mod.a);
+      let capturedToken = null;
 
-      // Encode payload
-      const enc = new TextEncoder();
-      const dec = new TextDecoder();
-      const bodyStr = JSON.stringify(payload);
-      const bytes = enc.encode(bodyStr);
-      console.log('🔍 Payload size:', bytes.length, 'bytes');
-      console.log('🔄 Payload string:', bodyStr);
-
-      // Allocate WASM memory with validation
-      let inPtr;
-      try {
-        if (!wasm.__wbindgen_malloc) {
-          console.error('❌ __wbindgen_malloc function not found');
-          return null;
+      mod.a.request = async function(url, options) {
+        // Intercept the token from headers
+        if (options && options.headers && options.headers['x-pawtect-token']) {
+          capturedToken = options.headers['x-pawtect-token'];
+          console.log('✅ Token captured via hook');
+          
+          // Return fake success to satisfy paint() execution flow
+          return { status: 200, json: async () => ({}) };
         }
+        // Pass through other requests (like /me)
+        return originalRequest(url, options);
+      };
 
-        inPtr = wasm.__wbindgen_malloc(bytes.length, 1);
-        console.log('✅ WASM memory allocated, pointer:', inPtr);
+      // Trigger the paint function
+      console.log('🚀 Calling mod.a.paint() to generate token...');
+      try {
+        // This handles UserID, URL, and WASM interaction internally
+        await mod.a.paint(paintPixels, payload.fp);
+      } catch (e) {
+        // Ignore errors caused by our fake request response
+      } finally {
+        // Restore original request method (Cleanup)
+        mod.a.request = originalRequest;
+        console.log('✅ Request hook restored');
+      }
 
-        // Copy data to WASM memory
-        const wasmBuffer = new Uint8Array(wasm.memory.buffer, inPtr, bytes.length);
-        wasmBuffer.set(bytes);
-        console.log('✅ Data copied to WASM memory');
-      } catch (memError) {
-        console.error('❌ Memory allocation error:', memError);
+      // Validate and return result
+      if (capturedToken) {
+        console.log('');
+        console.log('🎉 SUCCESS!');
+        console.log('🔑 Full token:');
+        console.log(capturedToken);
+        return capturedToken;
+      } else {
+        console.error('❌ Failed to capture token via hooking');
         return null;
       }
 
-      // Call the WASM function
-      console.log('🚀 Calling get_pawtected_endpoint_payload...');
-      let outPtr, outLen, token;
-      try {
-        const result = wasm.get_pawtected_endpoint_payload(inPtr, bytes.length);
-        console.log('✅ Function called, result type:', typeof result, result);
-
-        if (Array.isArray(result) && result.length === 2) {
-          [outPtr, outLen] = result;
-          console.log('✅ Got output pointer:', outPtr, 'length:', outLen);
-
-          // Decode the result
-          const outputBuffer = new Uint8Array(wasm.memory.buffer, outPtr, outLen);
-          token = dec.decode(outputBuffer);
-          console.log('✅ Token decoded successfully');
-        } else {
-          console.error('❌ Unexpected function result format:', result);
-          return null;
-        }
-      } catch (funcError) {
-        console.error('❌ Function call error:', funcError);
-        console.error('Stack trace:', funcError.stack);
-        return null;
-      }
-
-      // Cleanup memory
-      try {
-        if (wasm.__wbindgen_free && outPtr && outLen) {
-          wasm.__wbindgen_free(outPtr, outLen, 1);
-          console.log('✅ Output memory freed');
-        }
-        if (wasm.__wbindgen_free && inPtr) {
-          wasm.__wbindgen_free(inPtr, bytes.length, 1);
-          console.log('✅ Input memory freed');
-        }
-      } catch (cleanupError) {
-        console.log('⚠️ Cleanup warning:', cleanupError.message);
-      }
-
-      console.log('🎉 SUCCESS!');
-      console.log('🔑 Full token:', token);
-      return token;
     } catch (error) {
-      console.error('❌ Failed to generate fp parameter:', error);
+      console.error('❌ Failed to generate token:', error);
       return null;
     }
   }

From e880403c0df52bb4aa33fe805685d1b3cfe75571 Mon Sep 17 00:00:00 2001
From: MiraiSeori <1321807442@qq.com>
Date: Thu, 20 Nov 2025 08:24:01 +0800
Subject: [PATCH 4/4] feat: adjust createWasmToken function indentation for
 consistency

---
 Extension/scripts/Auto-Image.js  | 2 +-
 Extension/scripts/Auto-Repair.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Extension/scripts/Auto-Image.js b/Extension/scripts/Auto-Image.js
index dfed8e1..3674d66 100644
--- a/Extension/scripts/Auto-Image.js
+++ b/Extension/scripts/Auto-Image.js
@@ -11427,7 +11427,7 @@ localStorage.removeItem("lp");
   //find module if pawtect_chunk is null
   pawtect_chunk ??= await findTokenModule("pawtect_wasm_bg.wasm");
 
-async function createWasmToken(regionX, regionY, payload) {
+  async function createWasmToken(regionX, regionY, payload) {
     try {
       // Load the Pawtect module
       // Fallback to D1pWKeJi.js if pawtect_chunk is undefined, ensuring stability
diff --git a/Extension/scripts/Auto-Repair.js b/Extension/scripts/Auto-Repair.js
index cc804fe..dcec737 100644
--- a/Extension/scripts/Auto-Repair.js
+++ b/Extension/scripts/Auto-Repair.js
@@ -470,7 +470,7 @@
   // Find module if pawtect_chunk is null
   pawtect_chunk ??= await findTokenModule("pawtect_wasm_bg.wasm");
 
-async function createWasmToken(regionX, regionY, payload) {
+  async function createWasmToken(regionX, regionY, payload) {
     try {
       // Load the Pawtect module
       // Fallback to D1pWKeJi.js if pawtect_chunk is undefined, ensuring stability