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 76c946d..3674d66 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
@@ -10352,118 +11429,77 @@ localStorage.removeItem("lp");
 
   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;
     }
   }
@@ -11254,6 +12290,8 @@ localStorage.removeItem("lp");
 
       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;
       }
@@ -11272,9 +12310,10 @@ localStorage.removeItem("lp");
   }
 
   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...');
@@ -11335,7 +12374,7 @@ localStorage.removeItem("lp");
           _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();
@@ -11361,12 +12400,351 @@ localStorage.removeItem("lp");
             _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/Auto-Repair.js b/Extension/scripts/Auto-Repair.js
index 3942791..dcec737 100644
--- a/Extension/scripts/Auto-Repair.js
+++ b/Extension/scripts/Auto-Repair.js
@@ -472,113 +472,77 @@
 
   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;
     }
   }
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;
-  }
-}
-