From 5f78e58e45241c40db9fcf87942fe4efe37a26ce Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Sun, 24 Aug 2025 22:36:30 +0200
Subject: [PATCH 01/36] test decoupled css

---
 Auto-Image.js         | 1149 +++++++----------------------------------
 auto-image-styles.css |  749 +++++++++++++++++++++++++++
 2 files changed, 941 insertions(+), 957 deletions(-)
 create mode 100644 auto-image-styles.css

diff --git a/Auto-Image.js b/Auto-Image.js
index b4ea565..696198b 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3292,406 +3292,222 @@
       document.head.appendChild(googleFonts)
     }
 
+    // Link external CSS file
+    const cssLink = document.createElement('link');
+    cssLink.rel = 'stylesheet';
+    cssLink.href = 'https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBOT/refs/heads/main/auto-image-styles.css';
+    cssLink.setAttribute('data-wplace-theme', 'true');
+    document.head.appendChild(cssLink);
+
+    // Apply theme-specific dynamic styles
     const style = document.createElement("style")
-    style.setAttribute("data-wplace-theme", "true")
+    style.setAttribute("data-wplace-theme-dynamic", "true")
 
     style.textContent = `
-      ${theme.animations.glow
-        ? `
-      @keyframes neonGlow {
-        0%, 100% {
-          text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+      /* Dynamic theme-specific styles */
+      ${theme.animations.glow ? `
+        .wplace-header { animation: neonGlow 2s ease-in-out infinite alternate; }
+        .fas, .fa { filter: drop-shadow(0 0 3px currentColor); }
+      ` : ""}
+
+      ${theme.animations.pixelBlink ? `
+        .wplace-btn:hover:not(:disabled) { animation: pixelBlink 0.5s infinite; }
+        .status-error { animation: pixelBlink 0.5s infinite; }
+        .wplace-progress-bar::after { animation: pixelBlink 1s infinite; }
+      ` : ""}
+
+      ${theme.animations.scanline ? `
+        #wplace-image-bot-container::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: linear-gradient(90deg, transparent, ${theme.neon}, transparent);
+          animation: scanline 3s linear infinite;
+          z-index: 1;
+          pointer-events: none;
         }
-        50% {
-          text-shadow: 0 0 2px currentColor, 0 0 5px currentColor, 0 0 8px currentColor;
-        }
-      }`
-        : ""
-      }
-
-      ${theme.animations.pixelBlink
-        ? `
-      @keyframes pixelBlink {
-        0%, 50% { opacity: 1; }
-        51%, 100% { opacity: 0.7; }
-      }`
-        : ""
-      }
-
-      ${theme.animations.scanline
-        ? `
-      @keyframes scanline {
-        0% { transform: translateY(-100%); }
-        100% { transform: translateY(400px); }
-      }`
-        : ""
-      }
-
-      @keyframes pulse {
-        0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
-        70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
-        100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
-      }
-      @keyframes slideIn {
-        from { transform: translateY(-10px); opacity: 0; }
-        to { transform: translateY(0); opacity: 1; }
-      }
-      @keyframes shimmer {
-        0% { transform: translateX(-100%); }
-        100% { transform: translateX(100%); }
-      }
+      ` : ""}
 
+      /* Theme-specific container styles */
       #wplace-image-bot-container {
-        position: fixed;
-        top: 20px;
-        left: 20px;
-        width: ${CONFIG.currentTheme === "Neon Retro" ? "280px" : "280px"};
-        max-height: calc(100vh - 40px);
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.primary} 0%, #1a1a1a 100%)`
-        : theme.primary
-      };
+          ? `linear-gradient(135deg, ${theme.primary} 0%, #1a1a1a 100%)`
+          : theme.primary
+        };
         border: ${theme.borderWidth} ${theme.borderStyle} ${CONFIG.currentTheme === "Classic Autobot" ? theme.accent : theme.text};
         border-radius: ${theme.borderRadius};
-        padding: 0;
         box-shadow: ${theme.boxShadow};
-        z-index: 9998;
         font-family: ${theme.fontFamily};
         color: ${theme.text};
-        animation: slideIn 0.4s ease-out;
-        overflow-y: auto; /* Allow scrolling for main panel */
-        overflow-x: hidden;
         ${theme.backdropFilter ? `backdrop-filter: ${theme.backdropFilter};` : ""}
-        transition: all 0.3s ease;
-        user-select: none;
         ${CONFIG.currentTheme === "Neon Retro" ? "image-rendering: pixelated;" : ""}
       }
 
-      ${theme.animations.scanline
-        ? `
-      #wplace-image-bot-container::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        height: 2px;
-        background: linear-gradient(90deg, transparent, ${theme.neon}, transparent);
-        animation: scanline 3s linear infinite;
-        z-index: 1;
-        pointer-events: none;
-      }`
-        : ""
-      }
+      ${CONFIG.currentTheme === "Neon Retro" ? `
+        #wplace-image-bot-container::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background:
+            repeating-linear-gradient(
+              0deg,
+              transparent,
+              transparent 2px,
+              rgba(0, 255, 65, 0.03) 2px,
+              rgba(0, 255, 65, 0.03) 4px
+            );
+          pointer-events: none;
+          z-index: 1;
+        }
+      ` : ""}
 
-      ${CONFIG.currentTheme === "Neon Retro"
-        ? `
-      #wplace-image-bot-container::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background:
-          repeating-linear-gradient(
-            0deg,
-            transparent,
-            transparent 2px,
-            rgba(0, 255, 65, 0.03) 2px,
-            rgba(0, 255, 65, 0.03) 4px
-          );
-        pointer-events: none;
-        z-index: 1;
-      }`
-        : ""
-      }
-
-      #wplace-image-bot-container.wplace-dragging {
-        transition: none;
-        box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,255,255,0.2);
-        transform: scale(1.02);
-        z-index: 9999;
-      }
-      #wplace-image-bot-container.wplace-minimized {
-        width: 200px;
-        height: auto;
-        overflow: hidden;
-      }
-      #wplace-image-bot-container.wplace-compact {
-        width: 240px;
-      }
-
-      /* Stats Container */
       #wplace-stats-container {
-        position: fixed;
-        top: 20px;
-        left: 330px;
-        width: ${CONFIG.currentTheme === "Neon Retro" ? "280px" : "280px"};
-        max-height: calc(100vh - 40px);
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.primary} 0%, #1a1a1a 100%)`
-        : theme.primary
-      };
+          ? `linear-gradient(135deg, ${theme.primary} 0%, #1a1a1a 100%)`
+          : theme.primary
+        };
         border: ${theme.borderWidth} ${theme.borderStyle} ${CONFIG.currentTheme === "Classic Autobot" ? theme.accent : theme.text};
         border-radius: ${theme.borderRadius};
-        padding: 0;
         box-shadow: ${theme.boxShadow};
-        z-index: 9997;
         font-family: ${theme.fontFamily};
         color: ${theme.text};
-        animation: slideIn 0.4s ease-out;
-        overflow-y: auto; /* Make stats panel scrollable */
         ${theme.backdropFilter ? `backdrop-filter: ${theme.backdropFilter};` : ""}
-        transition: all 0.3s ease;
-        user-select: none;
         ${CONFIG.currentTheme === "Neon Retro" ? "image-rendering: pixelated;" : ""}
       }
 
-      /* FIX: Disable transition during drag to prevent lag */
-      #wplace-stats-container.wplace-dragging {
-        transition: none;
-      }
-
       .wplace-header {
         padding: ${CONFIG.currentTheme === "Neon Retro" ? "8px 12px" : "8px 12px"};
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.secondary} 0%, #2a2a2a 100%)`
-        : theme.secondary
-      };
+          ? `linear-gradient(135deg, ${theme.secondary} 0%, #2a2a2a 100%)`
+          : theme.secondary
+        };
         color: ${theme.highlight};
         font-size: ${CONFIG.currentTheme === "Neon Retro" ? "11px" : "13px"};
         font-weight: ${CONFIG.currentTheme === "Neon Retro" ? "normal" : "700"};
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: move;
-        user-select: none;
         border-bottom: ${CONFIG.currentTheme === "Neon Retro" ? "2px" : "1px"} solid ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255,255,255,0.1)" : theme.text};
         ${CONFIG.currentTheme === "Classic Autobot" ? "text-shadow: 0 1px 2px rgba(0,0,0,0.5);" : "text-transform: uppercase; letter-spacing: 1px;"}
-        transition: background 0.2s ease;
-        position: relative;
-        z-index: 2;
-        ${theme.animations.glow ? "animation: neonGlow 2s ease-in-out infinite alternate;" : ""}
+        font-family: ${theme.fontFamily};
       }
 
-      .wplace-header-title {
-        display: flex;
-        align-items: center;
-        gap: ${CONFIG.currentTheme === "Neon Retro" ? "6px" : "6px"};
-      }
-
-      .wplace-header-controls {
-        display: flex;
-        gap: ${CONFIG.currentTheme === "Neon Retro" ? "6px" : "6px"};
-      }
+      .wplace-header-title { gap: ${CONFIG.currentTheme === "Neon Retro" ? "6px" : "6px"}; }
+      .wplace-header-controls { gap: ${CONFIG.currentTheme === "Neon Retro" ? "6px" : "6px"}; }
 
       .wplace-header-btn {
         background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255,255,255,0.1)" : theme.accent};
         border: ${CONFIG.currentTheme === "Neon Retro" ? `2px solid ${theme.text}` : "none"};
         color: ${theme.text};
-        cursor: pointer;
         border-radius: ${CONFIG.currentTheme === "Classic Autobot" ? "4px" : "0"};
         width: ${CONFIG.currentTheme === "Classic Autobot" ? "18px" : "auto"};
         height: ${CONFIG.currentTheme === "Classic Autobot" ? "18px" : "auto"};
         padding: ${CONFIG.currentTheme === "Neon Retro" ? "4px 6px" : "0"};
         font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "10px"};
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.2s;
         font-family: ${theme.fontFamily};
         ${CONFIG.currentTheme === "Neon Retro" ? "image-rendering: pixelated;" : ""}
       }
       .wplace-header-btn:hover {
         background: ${CONFIG.currentTheme === "Classic Autobot" ? theme.accent : theme.text};
         color: ${CONFIG.currentTheme === "Classic Autobot" ? theme.text : theme.primary};
-        transform: ${CONFIG.currentTheme === "Classic Autobot" ? "scale(1.1)" : "none"};
         ${CONFIG.currentTheme === "Neon Retro" ? `box-shadow: 0 0 10px ${theme.text};` : ""}
       }
 
-      .wplace-content {
-        padding: ${CONFIG.currentTheme === "Neon Retro" ? "12px" : "12px"};
-        display: block;
-        position: relative;
-        z-index: 2;
-      }
-      .wplace-content.wplace-hidden {
-        display: none;
-      }
-
-      .wplace-status-section {
-        margin-bottom: 12px;
-        padding: 8px;
-        background: rgba(255,255,255,0.03);
-        border-radius: ${theme.borderRadius};
-        border: 1px solid rgba(255,255,255,0.1);
-      }
-
-      .wplace-section {
-        margin-bottom: ${CONFIG.currentTheme === "Neon Retro" ? "12px" : "12px"};
-        padding: 12px;
-        background: rgba(255,255,255,0.03);
-        border-radius: ${theme.borderRadius};
-        border: 1px solid rgba(255,255,255,0.1);
-      }
-
-      .wplace-section-title {
-        font-size: 11px;
-        font-weight: 600;
-        margin-bottom: 8px;
-        color: ${theme.highlight};
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-      }
-
-      .wplace-controls {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-      .wplace-row {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 8px;
-      }
-      .wplace-row.single {
-        grid-template-columns: 1fr;
-      }
+      .wplace-content { padding: ${CONFIG.currentTheme === "Neon Retro" ? "12px" : "12px"}; }
+      .wplace-section { border-radius: ${theme.borderRadius}; }
+      .wplace-section-title { color: ${theme.highlight}; }
 
       .wplace-btn {
         padding: ${CONFIG.currentTheme === "Neon Retro" ? "12px 8px" : "8px 12px"};
         border: ${CONFIG.currentTheme === "Neon Retro" ? "2px solid" : "none"};
         border-radius: ${theme.borderRadius};
         font-weight: ${CONFIG.currentTheme === "Neon Retro" ? "normal" : "500"};
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
         gap: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "6px"};
         font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "11px"};
-        transition: all 0.3s ease;
-        position: relative;
-        overflow: hidden;
         font-family: ${theme.fontFamily};
         ${CONFIG.currentTheme === "Neon Retro" ? "text-transform: uppercase; letter-spacing: 1px; image-rendering: pixelated;" : ""}
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.accent} 0%, #4a4a4a 100%)`
-        : theme.accent
-      };
+          ? `linear-gradient(135deg, ${theme.accent} 0%, #4a4a4a 100%)`
+          : theme.accent
+        };
         ${CONFIG.currentTheme === "Classic Autobot" ? "border: 1px solid rgba(255,255,255,0.1);" : ""}
       }
 
-      ${CONFIG.currentTheme === "Classic Autobot"
-        ? `
-      .wplace-btn::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-        transition: left 0.5s ease;
-      }
-      .wplace-btn:hover:not(:disabled)::before {
-        left: 100%;
-      }`
-        : `
-      .wplace-btn::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: -100%;
-        width: 100%;
-        height: 100%;
-        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-        transition: left 0.5s;
-      }
-      .wplace-btn:hover::before {
-        left: 100%;
-      }`
-      }
-
-      .wplace-btn:hover:not(:disabled) {
-        transform: ${CONFIG.currentTheme === "Classic Autobot" ? "translateY(-1px)" : "none"};
-        box-shadow: ${CONFIG.currentTheme === "Classic Autobot" ? "0 4px 12px rgba(0,0,0,0.4)" : "0 0 15px currentColor"
-      };
-        ${theme.animations.pixelBlink ? "animation: pixelBlink 0.5s infinite;" : ""}
-      }
-      .wplace-btn:active:not(:disabled) {
-        transform: translateY(0);
-      }
+      ${CONFIG.currentTheme === "Classic Autobot" ? `
+        .wplace-btn::before {
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+          transition: left 0.5s ease;
+        }
+        .wplace-btn:hover:not(:disabled)::before { left: 100%; }
+        .wplace-btn:hover:not(:disabled) {
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+        }
+      ` : `
+        .wplace-btn:hover:not(:disabled) { box-shadow: 0 0 15px currentColor; }
+      `}
 
       .wplace-btn-primary {
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.accent} 0%, #6a5acd 100%)`
-        : theme.accent
-      };
+          ? `linear-gradient(135deg, ${theme.accent} 0%, #6a5acd 100%)`
+          : theme.accent
+        };
         color: ${theme.text};
         ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.text};` : ""}
       }
+
       .wplace-btn-upload {
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.secondary} 0%, #4a4a4a 100%)`
-        : theme.purple
-      };
+          ? `linear-gradient(135deg, ${theme.secondary} 0%, #4a4a4a 100%)`
+          : theme.purple
+        };
         color: ${theme.text};
         ${CONFIG.currentTheme === "Classic Autobot"
-        ? `border: 1px dashed ${theme.highlight};`
-        : `border-color: ${theme.text}; border-style: dashed;`
-      }
+          ? `border: 1px dashed ${theme.highlight};`
+          : `border-color: ${theme.text}; border-style: dashed;`
+        }
       }
+
       .wplace-btn-start {
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.success} 0%, #228b22 100%)`
-        : theme.success
-      };
+          ? `linear-gradient(135deg, ${theme.success} 0%, #228b22 100%)`
+          : theme.success
+        };
         color: ${CONFIG.currentTheme === "Classic Autobot" ? "white" : theme.primary};
         ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.success};` : ""}
       }
+
       .wplace-btn-stop {
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.error} 0%, #dc143c 100%)`
-        : theme.error
-      };
+          ? `linear-gradient(135deg, ${theme.error} 0%, #dc143c 100%)`
+          : theme.error
+        };
         color: ${CONFIG.currentTheme === "Classic Autobot" ? "white" : theme.text};
         ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.error};` : ""}
       }
+
       .wplace-btn-select {
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.highlight} 0%, #9370db 100%)`
-        : theme.highlight
-      };
+          ? `linear-gradient(135deg, ${theme.highlight} 0%, #9370db 100%)`
+          : theme.highlight
+        };
         color: ${CONFIG.currentTheme === "Classic Autobot" ? "white" : theme.primary};
         ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.highlight};` : ""}
       }
+
       .wplace-btn-file {
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? "linear-gradient(135deg, #ff8c00 0%, #ff7f50 100%)"
-        : theme.warning
-      };
+          ? "linear-gradient(135deg, #ff8c00 0%, #ff7f50 100%)"
+          : theme.warning
+        };
         color: ${CONFIG.currentTheme === "Classic Autobot" ? "white" : theme.primary};
         ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.warning};` : ""}
       }
-      .wplace-btn:disabled {
-        opacity: ${CONFIG.currentTheme === "Classic Autobot" ? "0.5" : "0.3"};
-        cursor: not-allowed;
-        transform: none !important;
-        ${theme.animations.pixelBlink ? "animation: none !important;" : ""}
-        box-shadow: none !important;
-      }
-      .wplace-btn:disabled::before {
-        display: none;
-      }
-      
-      .wplace-btn-overlay.active {
-        background: linear-gradient(135deg, #29b6f6 0%, #8e2de2 100%);
-        box-shadow: 0 0 15px #8e2de2;
-      }
+
+      .wplace-btn:disabled { opacity: ${CONFIG.currentTheme === "Classic Autobot" ? "0.5" : "0.3"}; }
 
       .wplace-stats {
         background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255,255,255,0.03)" : theme.secondary};
@@ -3703,132 +3519,68 @@
       }
 
       .wplace-stat-item {
-        display: flex;
-        justify-content: space-between;
         padding: ${CONFIG.currentTheme === "Neon Retro" ? "6px 0" : "4px 0"};
         font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "11px"};
-        border-bottom: 1px solid rgba(255,255,255,0.05);
         ${CONFIG.currentTheme === "Neon Retro" ? "text-transform: uppercase; letter-spacing: 1px;" : ""}
       }
-      .wplace-stat-item:last-child {
-        border-bottom: none;
-      }
-      .wplace-stat-label {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        opacity: 0.9;
-        font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "10px"};
-      }
-      .wplace-stat-value {
-        font-weight: 600;
-        color: ${theme.highlight};
-      }
-
-      .wplace-colors-section {
-        margin-top: 10px;
-        padding-top: 8px;
-        border-top: 1px solid rgba(255,255,255,0.05);
-      }
-
-      .wplace-stat-colors-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(16px, 1fr));
-        gap: 4px;
-        margin-top: 8px;
-        padding: 4px;
-        background: rgba(0,0,0,0.2);
-        border-radius: 4px;
-        max-height: 80px; /* Limit height and allow scrolling */
-        overflow-y: auto;
-      }
-      
-      .wplace-stat-color-swatch {
-        width: 16px;
-        height: 16px;
-        border-radius: 3px;
-        border: 1px solid rgba(255,255,255,0.1);
-        box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
-      }
+      .wplace-stat-label { font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "10px"}; }
+      .wplace-stat-value { color: ${theme.highlight}; }
 
       .wplace-progress {
-        width: 100%;
         background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(0,0,0,0.3)" : theme.secondary};
         border: ${CONFIG.currentTheme === "Neon Retro" ? `2px solid ${theme.text}` : "1px solid rgba(255,255,255,0.1)"};
         border-radius: ${theme.borderRadius};
         margin: ${CONFIG.currentTheme === "Neon Retro" ? "10px 0" : "8px 0"};
-        overflow: hidden;
         height: ${CONFIG.currentTheme === "Neon Retro" ? "16px" : "6px"};
-        position: relative;
       }
 
-      ${CONFIG.currentTheme === "Neon Retro"
-        ? `
-      .wplace-progress::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background:
-          repeating-linear-gradient(
-            45deg,
-            transparent,
-            transparent 2px,
-            rgba(0, 255, 65, 0.1) 2px,
-            rgba(0, 255, 65, 0.1) 4px
-          );
-        pointer-events: none;
-      }`
-        : ""
-      }
+      ${CONFIG.currentTheme === "Neon Retro" ? `
+        .wplace-progress::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background:
+            repeating-linear-gradient(
+              45deg,
+              transparent,
+              transparent 2px,
+              rgba(0, 255, 65, 0.1) 2px,
+              rgba(0, 255, 65, 0.1) 4px
+            );
+          pointer-events: none;
+        }
+      ` : ""}
 
       .wplace-progress-bar {
         height: ${CONFIG.currentTheme === "Neon Retro" ? "100%" : "6px"};
         background: ${CONFIG.currentTheme === "Classic Autobot"
-        ? `linear-gradient(135deg, ${theme.highlight} 0%, #9370db 100%)`
-        : `linear-gradient(90deg, ${theme.success}, ${theme.neon})`
-      };
+          ? `linear-gradient(135deg, ${theme.highlight} 0%, #9370db 100%)`
+          : `linear-gradient(90deg, ${theme.success}, ${theme.neon})`
+        };
         transition: width ${CONFIG.currentTheme === "Neon Retro" ? "0.3s" : "0.5s"} ease;
-        position: relative;
         ${CONFIG.currentTheme === "Neon Retro" ? `box-shadow: 0 0 10px ${theme.success};` : ""}
       }
 
-      ${CONFIG.currentTheme === "Classic Autobot"
-        ? `
-      .wplace-progress-bar::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-        animation: shimmer 2s infinite;
-      }`
-        : `
-      .wplace-progress-bar::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 4px;
-        height: 100%;
-        background: ${theme.text};
-        animation: pixelBlink 1s infinite;
-      }`
-      }
+      ${CONFIG.currentTheme === "Classic Autobot" ? `
+        .wplace-progress-bar::after {
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+          animation: shimmer 2s infinite;
+        }
+      ` : `
+        .wplace-progress-bar::after {
+          background: ${theme.text};
+        }
+      `}
 
       .wplace-status {
         padding: ${CONFIG.currentTheme === "Neon Retro" ? "10px" : "6px"};
         border: ${CONFIG.currentTheme === "Neon Retro" ? "2px solid" : "1px solid"};
         border-radius: ${theme.borderRadius};
-        text-align: center;
         font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "11px"};
         ${CONFIG.currentTheme === "Neon Retro" ? "text-transform: uppercase; letter-spacing: 1px;" : ""}
-        position: relative;
-        overflow: hidden;
       }
 
       .status-default {
@@ -3847,7 +3599,6 @@
         border-color: ${theme.error};
         color: ${CONFIG.currentTheme === "Classic Autobot" ? theme.error : theme.text};
         box-shadow: 0 0 15px ${theme.error};
-        ${theme.animations.pixelBlink ? "animation: pixelBlink 0.5s infinite;" : ""}
       }
       .status-warning {
         background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255, 165, 0, 0.1)" : theme.warning};
@@ -3856,71 +3607,17 @@
         box-shadow: 0 0 15px ${theme.warning};
       }
 
+      /* Settings and other dynamic elements */
       .resize-container {
-        display: none;
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
         background: ${theme.primary};
-        padding: 20px;
         border: ${theme.borderWidth} ${theme.borderStyle} ${theme.text};
         border-radius: ${theme.borderRadius};
-        z-index: 10000;
-        box-shadow: ${CONFIG.currentTheme === "Classic Autobot" ? "0 0 20px rgba(0,0,0,0.5)" : "0 0 30px rgba(0, 255, 65, 0.5)"
-      };
-        width: 90%;
-        max-width: 700px;
-        max-height: 90%;
-        overflow: auto;
+        box-shadow: ${CONFIG.currentTheme === "Classic Autobot" ? "0 0 20px rgba(0,0,0,0.5)" : "0 0 30px rgba(0, 255, 65, 0.5)"};
         font-family: ${theme.fontFamily};
       }
 
-      .resize-preview-wrapper {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border: 1px solid ${theme.accent};
-        background: rgba(0,0,0,0.2);
-        margin: 15px 0;
-        height: 300px;
-        overflow: hidden;
-      }
-
-  .resize-canvas-stack { position: relative; transform-origin: center center; display: inline-block; }
-      .resize-base-canvas, .resize-mask-canvas {
-        position: absolute; left: 0; top: 0;
-        image-rendering: pixelated;
-        image-rendering: -moz-crisp-edges;
-        image-rendering: crisp-edges;
-      }
-      .resize-mask-canvas { pointer-events: auto; }
-      .resize-tools { display:flex; gap:8px; align-items:center; margin-top:8px; font-size:12px; }
-      .resize-tools button { padding:6px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color:#fff; cursor:pointer; }
-      .wplace-btn.active,
-      .wplace-btn[aria-pressed="true"] {
-        background: ${theme.highlight} !important;
-        color: ${theme.primary} !important;
-        border-color: ${theme.text} !important;
-        box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2) !important;
-      }
-      .wplace-btn.active i,
-      .wplace-btn[aria-pressed="true"] i { filter: drop-shadow(0 0 3px ${theme.primary}); }
-      .mask-mode-group .wplace-btn.active,
-      .mask-mode-group .wplace-btn[aria-pressed="true"] {
-        background: ${theme.highlight};
-        color: ${theme.primary};
-        border-color: ${theme.text};
-        box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2);
-      }
-
-      .resize-controls {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 15px;
-        align-items: center;
-      }
-
+      .resize-preview-wrapper { border: 1px solid ${theme.accent}; }
+      
       .resize-controls label {
         font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "12px"};
         ${CONFIG.currentTheme === "Neon Retro" ? "text-transform: uppercase; letter-spacing: 1px;" : ""}
@@ -3928,517 +3625,55 @@
       }
 
       .resize-slider {
-        width: 100%;
         height: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "4px"};
         background: ${CONFIG.currentTheme === "Classic Autobot" ? "#ccc" : theme.secondary};
         border: ${CONFIG.currentTheme === "Neon Retro" ? `2px solid ${theme.text}` : "none"};
         border-radius: ${theme.borderRadius};
-        outline: none;
-        -webkit-appearance: none;
       }
 
-      ${CONFIG.currentTheme === "Neon Retro"
-        ? `
-      .resize-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        width: 16px;
-        height: 16px;
-        background: ${theme.highlight};
-        border: 2px solid ${theme.text};
-        border-radius: 0;
-        cursor: pointer;
-        box-shadow: 0 0 5px ${theme.highlight};
-      }
+      ${CONFIG.currentTheme === "Neon Retro" ? `
+        .resize-slider::-webkit-slider-thumb {
+          width: 16px;
+          height: 16px;
+          background: ${theme.highlight};
+          border: 2px solid ${theme.text};
+          border-radius: 0;
+          box-shadow: 0 0 5px ${theme.highlight};
+        }
 
-      .resize-slider::-moz-range-thumb {
-        width: 16px;
-        height: 16px;
-        background: ${theme.highlight};
-        border: 2px solid ${theme.text};
-        border-radius: 0;
-        cursor: pointer;
-        box-shadow: 0 0 5px ${theme.highlight};
-      }`
-        : ""
+        .resize-slider::-moz-range-thumb {
+          width: 16px;
+          height: 16px;
+          background: ${theme.highlight};
+          border: 2px solid ${theme.text};
+          border-radius: 0;
+          box-shadow: 0 0 5px ${theme.highlight};
+        }
+      ` : ""}
+
+      .wplace-slider::-webkit-slider-thumb { background: ${theme.highlight}; }
+
+      ${CONFIG.currentTheme === "Neon Retro" ? `
+        input[type="checkbox"] {
+          width: 16px;
+          height: 16px;
+          border: 2px solid ${theme.text};
+          background: ${theme.secondary};
+        }
+        input[type="checkbox"]:checked { background: ${theme.success}; }
+        input[type="checkbox"]:checked::after { color: ${theme.primary}; }
+      ` : ""}
+
+      /* Additional theme-specific styles */
+      .wplace-btn.active,
+      .wplace-btn[aria-pressed="true"] {
+        background: ${theme.highlight} !important;
+        color: ${theme.primary} !important;
+        border-color: ${theme.text} !important;
       }
       
-      .resize-zoom-controls {
-        grid-column: 1 / -1;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin-top: 15px;
-      }
-
-      .resize-buttons {
-        display: flex;
-        gap: 10px;
-        justify-content: center;
-        margin-top: 20px;
-      }
-
-      .resize-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.8);
-        z-index: 9999;
-        display: none;
-      }
-      .wplace-color-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
-        gap: 10px;
-        padding-top: 8px;
-        max-height: 300px;
-        overflow-y: auto;
-      }
-      .wplace-color-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 4px;
-      }
-      .wplace-color-item-name {
-        font-size: 9px;
-        color: #ccc;
-        text-align: center;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        width: 100%;
-      }
-      .wplace-color-swatch {
-        width: 22px;
-        height: 22px;
-        border: 1px solid rgba(255,255,255,0.2);
-        border-radius: 4px;
-        cursor: pointer;
-        transition: transform 0.1s ease, box-shadow 0.2s ease;
-        position: relative;
-        margin: 0 auto;
-      }
-      .wplace-color-swatch.unavailable {
-        border-color: #666;
-        border-style: dashed;
-        cursor: not-allowed;
-      }
-      .wplace-color-swatch:hover {
-        transform: scale(1.1);
-        z-index: 1;
-      }
-      .wplace-color-swatch:not(.active) {
-        opacity: 0.3;
-        filter: grayscale(80%);
-      }
-      .wplace-color-swatch.unavailable:not(.active) {
-        opacity: 0.2;
-        filter: grayscale(90%);
-      }
-      .wplace-color-swatch.active::after {
-        content: '✔';
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: white;
-        font-size: 12px;
-        font-weight: bold;
-        text-shadow: 0 0 3px black;
-      }
-      .wplace-color-divider {
-        border: none;
-        height: 1px;
-        background: rgba(255,255,255,0.1);
-        margin: 8px 0;
-      }
-
-        .wplace-cooldown-control {
-            margin-top: 8px;
-        }
-        .wplace-cooldown-control label {
-            font-size: 11px;
-            margin-bottom: 4px;
-            display: block;
-        }
-        .wplace-slider-container {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        .wplace-slider {
-            flex: 1;
-            -webkit-appearance: none;
-            appearance: none;
-            height: 4px;
-            background: #444;
-            border-radius: 2px;
-            outline: none;
-        }
-        .wplace-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 14px;
-            height: 14px;
-            background: ${theme.highlight};
-            border-radius: 50%;
-            cursor: pointer;
-        }
-
-
-      ${CONFIG.currentTheme === "Neon Retro"
-        ? `
-      input[type="checkbox"] {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        width: 16px;
-        height: 16px;
-        border: 2px solid ${theme.text};
-        background: ${theme.secondary};
-        margin-right: 8px;
-        position: relative;
-        cursor: pointer;
-      }
-
-      input[type="checkbox"]:checked {
-        background: ${theme.success};
-      }
-
-      input[type="checkbox"]:checked::after {
-        content: '✓';
-        position: absolute;
-        top: -2px;
-        left: 1px;
-        color: ${theme.primary};
-        font-size: 12px;
-        font-weight: bold;
-      }
-
-      .fas, .fa {
-        filter: drop-shadow(0 0 3px currentColor);
-      }
-
-      .wplace-speed-control {
-        margin-top: 12px;
-        padding: 12px;
-        background: ${theme.secondary};
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.accent};
-        border-radius: ${theme.borderRadius};
-        backdrop-filter: ${theme.backdropFilter};
-      }
-
-      .wplace-speed-label {
-        display: flex;
-        align-items: center;
-        margin-bottom: 8px;
-        color: ${theme.text};
-        font-size: 13px;
-        font-weight: 600;
-      }
-
-      .wplace-speed-label i {
-        margin-right: 6px;
-        color: ${theme.highlight};
-      }
-
-      .wplace-speed-slider-container {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-      }
-
-      .wplace-speed-slider {
-        flex: 1;
-        height: 6px;
-        border-radius: 3px;
-        background: ${theme.primary};
-        outline: none;
-        cursor: pointer;
-        -webkit-appearance: none;
-        appearance: none;
-      }
-
-      .wplace-speed-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        background: ${theme.highlight};
-        cursor: pointer;
-        border: 2px solid ${theme.text};
-        box-shadow: ${theme.boxShadow};
-      }
-
-      .wplace-speed-slider::-moz-range-thumb {
-        width: 18px;
-        height: 18px;
-        border-radius: 50%;
-        background: ${theme.highlight};
-        cursor: pointer;
-        border: 2px solid ${theme.text};
-        box-shadow: ${theme.boxShadow};
-      }
-
-      .wplace-speed-display {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        min-width: 90px;
-        justify-content: flex-end;
-      }
-
-      #speedValue {
-        color: ${theme.highlight};
-        font-weight: 600;
-        font-size: 14px;
-      }
-
-      .wplace-speed-unit {
-        color: ${theme.text};
-        font-size: 11px;
-        opacity: 0.8;
-      }
-
-      #wplace-settings-container {
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        z-index: 10001;
-        min-width: 400px;
-        max-width: 500px;
-        background: ${theme.primary};
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.accent};
-        border-radius: ${theme.borderRadius};
-        box-shadow: ${theme.boxShadow};
-        backdrop-filter: ${theme.backdropFilter};
-      }
-
-      .wplace-settings {
-        padding: 16px;
-        max-height: 400px;
-        overflow-y: auto;
-      }
-
-      .wplace-setting-section {
-        margin-bottom: 20px;
-        padding: 12px;
-        background: ${theme.secondary};
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.accent};
-        border-radius: ${theme.borderRadius};
-      }
-
-      .wplace-setting-title {
-        display: flex;
-        align-items: center;
-        margin-bottom: 12px;
-        color: ${theme.text};
-        font-size: 14px;
-        font-weight: 600;
-      }
-
-      .wplace-setting-title i {
-        margin-right: 8px;
-        color: ${theme.highlight};
-      }
-
-      .wplace-setting-content {
-        color: ${theme.text};
-      }
-
-      .wplace-section {
-        margin-bottom: 20px;
-        padding: 15px;
-        background: ${theme.secondary};
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.accent};
-        border-radius: ${theme.borderRadius};
-      }
-
-      .wplace-section-title {
-        display: flex;
-        align-items: center;
-        margin-bottom: 15px;
-        color: ${theme.text};
-        font-size: 14px;
-        font-weight: 600;
-      }
-
-      .wplace-section-title i {
-        margin-right: 8px;
-        color: ${theme.highlight};
-      }
-
-      .wplace-speed-container {
-        display: flex;
-        align-items: center;
-        gap: 15px;
-        margin-bottom: 10px;
-      }
-
-      .wplace-slider {
-        flex: 1;
-        height: 6px;
-        background: ${theme.accent};
-        border-radius: 3px;
-        outline: none;
-        -webkit-appearance: none;
-      }
-
-      .wplace-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        width: 18px;
-        height: 18px;
-        background: ${theme.highlight};
-        border-radius: 50%;
-        cursor: pointer;
-        border: 2px solid ${theme.primary};
-      }
-
-      .wplace-speed-display {
-        background: ${theme.accent};
-        padding: 5px 10px;
-        border-radius: 4px;
-        color: ${theme.text};
-        font-weight: 600;
-        min-width: 80px;
-        text-align: center;
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.highlight};
-      }
-
-      .wplace-select {
-        width: 100%;
-        padding: 8px 12px;
-        background: ${theme.secondary};
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.accent};
-        border-radius: ${theme.borderRadius};
-        color: ${theme.text};
-        font-size: 14px;
-        margin-bottom: 10px;
-      }
-
-      .wplace-select:focus {
-        outline: none;
-        border-color: ${theme.highlight};
-      }
-
-      .wplace-description {
-        color: ${theme.text};
-        font-size: 12px;
-        opacity: 0.8;
-        line-height: 1.4;
-      }
-
-      .wplace-theme-custom {
-        margin-top: 15px;
-        padding: 15px;
-        background: ${theme.accent};
-        border-radius: ${theme.borderRadius};
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.highlight};
-      }
-
-      .wplace-custom-group {
-        margin-bottom: 15px;
-      }
-
-      .wplace-custom-label {
-        display: flex;
-        align-items: center;
-        margin-bottom: 8px;
-        color: ${theme.text};
-        font-size: 13px;
-        font-weight: 600;
-      }
-
-      .wplace-custom-label i {
-        margin-right: 8px;
-        color: ${theme.highlight};
-        width: 16px;
-      }
-
-      .wplace-color-input-group {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-      }
-
-      .wplace-color-input {
-        width: 50px;
-        height: 30px;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        background: transparent;
-      }
-
-      .wplace-color-text {
-        flex: 1;
-        padding: 6px 10px;
-        background: ${theme.secondary};
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.accent};
-        border-radius: 4px;
-        color: ${theme.text};
-        font-size: 12px;
-        font-family: monospace;
-      }
-
-      .wplace-animation-controls {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      .wplace-checkbox-label {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: ${theme.text};
-        font-size: 12px;
-        cursor: pointer;
-      }
-
-      .wplace-checkbox-label input[type="checkbox"] {
-        accent-color: ${theme.highlight};
-      }
-
-      .wplace-slider-container {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-      }
-
-      .wplace-slider-container .wplace-slider {
-        flex: 1;
-      }
-
-      .wplace-slider-container span {
-        color: ${theme.text};
-        font-size: 12px;
-        font-weight: 600;
-        min-width: 40px;
-      }
-
-      .wplace-custom-actions {
-        display: flex;
-        gap: 10px;
-        margin-top: 20px;
-        border-top: 1px solid ${theme.accent};
-        padding-top: 15px;
-      }
-
-      .wplace-btn-secondary {
-        background: ${theme.accent};
-        color: ${theme.text};
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.highlight};
-      }
-
-      .wplace-btn-secondary:hover {
-        background: ${theme.secondary};
-      }`
-        : ""
-      }
+      .wplace-btn.active i,
+      .wplace-btn[aria-pressed="true"] i { filter: drop-shadow(0 0 3px ${theme.primary}); }
     `
     document.head.appendChild(style)
 
diff --git a/auto-image-styles.css b/auto-image-styles.css
new file mode 100644
index 0000000..5ac4a82
--- /dev/null
+++ b/auto-image-styles.css
@@ -0,0 +1,749 @@
+/* WPlace Auto-Image Bot Styles */
+
+/* Animations */
+@keyframes neonGlow {
+  0%, 100% {
+    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+  }
+  50% {
+    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor, 0 0 8px currentColor;
+  }
+}
+
+@keyframes pixelBlink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0.7; }
+}
+
+@keyframes scanline {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(400px); }
+}
+
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
+  70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
+}
+
+@keyframes slideIn {
+  from { transform: translateY(-10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+@keyframes slideDown {
+  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
+  to { transform: translateX(-50%) translateY(0); opacity: 1; }
+}
+
+/* Main containers - will be dynamically styled based on theme */
+#wplace-image-bot-container {
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  width: 280px;
+  max-height: calc(100vh - 40px);
+  padding: 0;
+  z-index: 9998;
+  animation: slideIn 0.4s ease-out;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: all 0.3s ease;
+  user-select: none;
+}
+
+#wplace-image-bot-container.wplace-dragging {
+  transition: none;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,255,255,0.2);
+  transform: scale(1.02);
+  z-index: 9999;
+}
+
+#wplace-image-bot-container.wplace-minimized {
+  width: 200px;
+  height: auto;
+  overflow: hidden;
+}
+
+#wplace-image-bot-container.wplace-compact {
+  width: 240px;
+}
+
+/* Stats Container */
+#wplace-stats-container {
+  position: fixed;
+  top: 20px;
+  left: 330px;
+  width: 280px;
+  max-height: calc(100vh - 40px);
+  padding: 0;
+  z-index: 9997;
+  animation: slideIn 0.4s ease-out;
+  overflow-y: auto;
+  transition: all 0.3s ease;
+  user-select: none;
+}
+
+#wplace-stats-container.wplace-dragging {
+  transition: none;
+}
+
+/* Header styles */
+.wplace-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: move;
+  user-select: none;
+  transition: background 0.2s ease;
+  position: relative;
+  z-index: 2;
+}
+
+.wplace-header-title {
+  display: flex;
+  align-items: center;
+}
+
+.wplace-header-controls {
+  display: flex;
+}
+
+.wplace-header-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.wplace-header-btn:hover {
+  transform: scale(1.1);
+}
+
+/* Content areas */
+.wplace-content {
+  display: block;
+  position: relative;
+  z-index: 2;
+}
+
+.wplace-content.wplace-hidden {
+  display: none;
+}
+
+.wplace-status-section {
+  margin-bottom: 12px;
+  padding: 8px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+
+.wplace-section {
+  margin-bottom: 12px;
+  padding: 12px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+
+.wplace-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Controls and buttons */
+.wplace-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wplace-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.wplace-row.single {
+  grid-template-columns: 1fr;
+}
+
+.wplace-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.wplace-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s;
+}
+
+.wplace-btn:hover::before {
+  left: 100%;
+}
+
+.wplace-btn:hover:not(:disabled) {
+  box-shadow: 0 0 15px currentColor;
+}
+
+.wplace-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.wplace-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+.wplace-btn:disabled::before {
+  display: none;
+}
+
+.wplace-btn-overlay.active {
+  background: linear-gradient(135deg, #29b6f6 0%, #8e2de2 100%);
+  box-shadow: 0 0 15px #8e2de2;
+}
+
+/* Stats display */
+.wplace-stats {
+  margin-bottom: 8px;
+}
+
+.wplace-stat-item {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255,255,255,0.05);
+}
+
+.wplace-stat-item:last-child {
+  border-bottom: none;
+}
+
+.wplace-stat-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  opacity: 0.9;
+}
+
+.wplace-stat-value {
+  font-weight: 600;
+}
+
+.wplace-colors-section {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255,255,255,0.05);
+}
+
+.wplace-stat-colors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16px, 1fr));
+  gap: 4px;
+  margin-top: 8px;
+  padding: 4px;
+  background: rgba(0,0,0,0.2);
+  border-radius: 4px;
+  max-height: 80px;
+  overflow-y: auto;
+}
+
+.wplace-stat-color-swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  border: 1px solid rgba(255,255,255,0.1);
+  box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
+}
+
+/* Progress bars */
+.wplace-progress {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.wplace-progress-bar {
+  position: relative;
+  transition: width 0.5s ease;
+}
+
+/* Status indicators */
+.wplace-status {
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+.status-default {
+  background: rgba(255,255,255,0.1);
+}
+
+.status-success {
+  background: rgba(0, 255, 0, 0.1);
+  box-shadow: 0 0 15px currentColor;
+}
+
+.status-error {
+  background: rgba(255, 0, 0, 0.1);
+  box-shadow: 0 0 15px currentColor;
+}
+
+.status-warning {
+  background: rgba(255, 165, 0, 0.1);
+  box-shadow: 0 0 15px currentColor;
+}
+
+/* Resize container */
+.resize-container {
+  display: none;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10000;
+  width: 90%;
+  max-width: 700px;
+  max-height: 90%;
+  overflow: auto;
+}
+
+.resize-preview-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,0.2);
+  margin: 15px 0;
+  height: 300px;
+  overflow: hidden;
+}
+
+.resize-canvas-stack { 
+  position: relative; 
+  transform-origin: center center; 
+  display: inline-block; 
+}
+
+.resize-base-canvas, .resize-mask-canvas {
+  position: absolute; 
+  left: 0; 
+  top: 0;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+.resize-mask-canvas { 
+  pointer-events: auto; 
+}
+
+.resize-tools { 
+  display: flex; 
+  gap: 8px; 
+  align-items: center; 
+  margin-top: 8px; 
+  font-size: 12px; 
+}
+
+.resize-tools button { 
+  padding: 6px 10px; 
+  border-radius: 6px; 
+  border: 1px solid rgba(255,255,255,0.2); 
+  background: rgba(255,255,255,0.06); 
+  color: #fff; 
+  cursor: pointer; 
+}
+
+.wplace-btn.active,
+.wplace-btn[aria-pressed="true"] {
+  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2) !important;
+}
+
+.mask-mode-group .wplace-btn.active,
+.mask-mode-group .wplace-btn[aria-pressed="true"] {
+  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2);
+}
+
+.resize-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+  align-items: center;
+}
+
+.resize-slider {
+  width: 100%;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.resize-zoom-controls {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 15px;
+}
+
+.resize-buttons {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.resize-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: none;
+}
+
+/* Color grid */
+.wplace-color-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 10px;
+  padding-top: 8px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.wplace-color-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.wplace-color-item-name {
+  font-size: 9px;
+  color: #ccc;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.wplace-color-swatch {
+  width: 22px;
+  height: 22px;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.2s ease;
+  position: relative;
+  margin: 0 auto;
+}
+
+.wplace-color-swatch.unavailable {
+  border-color: #666;
+  border-style: dashed;
+  cursor: not-allowed;
+}
+
+.wplace-color-swatch:hover {
+  transform: scale(1.1);
+  z-index: 1;
+}
+
+.wplace-color-swatch:not(.active) {
+  opacity: 0.3;
+  filter: grayscale(80%);
+}
+
+.wplace-color-swatch.unavailable:not(.active) {
+  opacity: 0.2;
+  filter: grayscale(90%);
+}
+
+.wplace-color-swatch.active::after {
+  content: '✔';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 3px black;
+}
+
+.wplace-color-divider {
+  border: none;
+  height: 1px;
+  background: rgba(255,255,255,0.1);
+  margin: 8px 0;
+}
+
+/* Cooldown controls */
+.wplace-cooldown-control {
+  margin-top: 8px;
+}
+
+.wplace-cooldown-control label {
+  font-size: 11px;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.wplace-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.wplace-slider {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: #444;
+  border-radius: 2px;
+  outline: none;
+}
+
+.wplace-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* Settings container */
+#wplace-settings-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10001;
+  min-width: 400px;
+  max-width: 500px;
+}
+
+.wplace-settings {
+  padding: 16px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.wplace-setting-section {
+  margin-bottom: 20px;
+  padding: 12px;
+}
+
+.wplace-setting-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.wplace-setting-title i {
+  margin-right: 8px;
+}
+
+.wplace-setting-content {
+  /* Content styling will be theme-dependent */
+}
+
+.wplace-speed-control {
+  margin-top: 12px;
+  padding: 12px;
+}
+
+.wplace-speed-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.wplace-speed-label i {
+  margin-right: 6px;
+}
+
+.wplace-speed-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.wplace-speed-slider {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.wplace-speed-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid;
+}
+
+.wplace-speed-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid;
+}
+
+.wplace-speed-display {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 90px;
+  justify-content: flex-end;
+}
+
+#speedValue {
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.wplace-speed-unit {
+  font-size: 11px;
+  opacity: 0.8;
+}
+
+.wplace-speed-container {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 10px;
+}
+
+.wplace-speed-display {
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-weight: 600;
+  min-width: 80px;
+  text-align: center;
+}
+
+.wplace-select {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  margin-bottom: 10px;
+}
+
+.wplace-select:focus {
+  outline: none;
+}
+
+.wplace-description {
+  font-size: 12px;
+  opacity: 0.8;
+  line-height: 1.4;
+}
+
+.wplace-theme-custom {
+  margin-top: 15px;
+  padding: 15px;
+}
+
+.wplace-custom-group {
+  margin-bottom: 15px;
+}
+
+.wplace-custom-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.wplace-custom-label i {
+  margin-right: 8px;
+  width: 16px;
+}
+
+.wplace-color-input-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.wplace-color-input {
+  width: 50px;
+  height: 30px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.wplace-color-text {
+  flex: 1;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: monospace;
+}
+
+.wplace-animation-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wplace-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.wplace-custom-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+  border-top: 1px solid;
+  padding-top: 15px;
+}
+
+/* Theme-specific overrides will be applied dynamically via JavaScript */
\ No newline at end of file

From 43c86972efb3980b9cb4f483b6135624a28e1a46 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Sun, 24 Aug 2025 22:39:28 +0200
Subject: [PATCH 02/36] my branch

---
 Auto-Image.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 696198b..596bf34 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3295,7 +3295,7 @@
     // Link external CSS file
     const cssLink = document.createElement('link');
     cssLink.rel = 'stylesheet';
-    cssLink.href = 'https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBOT/refs/heads/main/auto-image-styles.css';
+    cssLink.href = 'https://raw.githubusercontent.com/Staninna/WPlace-AutoBOT/refs/heads/main/auto-image-styles.css';
     cssLink.setAttribute('data-wplace-theme', 'true');
     document.head.appendChild(cssLink);
 

From 158159019b4a24a23c0ec9059759254f288a91a5 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Sun, 24 Aug 2025 22:45:18 +0200
Subject: [PATCH 03/36] updated url

---
 Auto-Image.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 596bf34..49a8b95 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3295,7 +3295,7 @@
     // Link external CSS file
     const cssLink = document.createElement('link');
     cssLink.rel = 'stylesheet';
-    cssLink.href = 'https://raw.githubusercontent.com/Staninna/WPlace-AutoBOT/refs/heads/main/auto-image-styles.css';
+    cssLink.href = 'https://staninna.github.io/WPlace-AutoBOT/auto-image-styles.css';
     cssLink.setAttribute('data-wplace-theme', 'true');
     document.head.appendChild(cssLink);
 

From 8d5bd64988cfee4966e0eb9f3b6508d28f0c9c93 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Sun, 24 Aug 2025 23:04:47 +0200
Subject: [PATCH 04/36] added todo for merge

---
 Auto-Image.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 49a8b95..2ce2c02 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3295,7 +3295,7 @@
     // Link external CSS file
     const cssLink = document.createElement('link');
     cssLink.rel = 'stylesheet';
-    cssLink.href = 'https://staninna.github.io/WPlace-AutoBOT/auto-image-styles.css';
+    cssLink.href = 'https://staninna.github.io/WPlace-AutoBOT/auto-image-styles.css';  // TODO: Before merge change to https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBOT/refs/heads/main/auto-image-styles.css
     cssLink.setAttribute('data-wplace-theme', 'true');
     document.head.appendChild(cssLink);
 

From 4667c5b736539fff660dd1b37e4166ebb3dc7861 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 01:23:43 +0200
Subject: [PATCH 05/36] Refactor CSS integration by decoupling styles from
 JavaScript and adding complete CSS file

---
 Auto-Image.js                  |  98 +----
 auto-image-complete-styles.css | 753 +++++++++++++++++++++++++++++++++
 2 files changed, 771 insertions(+), 80 deletions(-)
 create mode 100644 auto-image-complete-styles.css

diff --git a/Auto-Image.js b/Auto-Image.js
index 2ce2c02..217aa26 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -1700,18 +1700,7 @@
         }
         
         this._turnstileContainer = document.createElement('div');
-        this._turnstileContainer.style.cssText = `
-          position: fixed !important;
-          left: -99999px !important;
-          top: -99999px !important;
-          width: 1px !important;
-          height: 1px !important;
-          pointer-events: none !important;
-          opacity: 0 !important;
-          visibility: hidden !important;
-          z-index: -99999 !important;
-          overflow: hidden !important;
-        `;
+        this._turnstileContainer.className = 'wplace-turnstile-hidden';
         this._turnstileContainer.setAttribute('aria-hidden', 'true');
         this._turnstileContainer.id = 'turnstile-widget-container';
         document.body.appendChild(this._turnstileContainer);
@@ -1727,35 +1716,19 @@
 
       const overlay = document.createElement('div');
       overlay.id = 'turnstile-overlay-container';
-      overlay.style.cssText = `
-        position: fixed !important;
-        bottom: 20px !important;
-        right: 20px !important;
-        z-index: 99999 !important;
-        background: rgba(0,0,0,0.9) !important;
-        border-radius: 12px !important;
-        padding: 20px !important;
-        box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
-        backdrop-filter: blur(10px) !important;
-        border: 1px solid rgba(255,255,255,0.2) !important;
-        color: white !important;
-        font-family: 'Segoe UI', sans-serif !important;
-        display: none !important;
-        max-width: 350px !important;
-        min-width: 300px !important;
-      `;
+      overlay.className = 'wplace-turnstile-overlay wplace-overlay-hidden';
 
       const title = document.createElement('div');
       title.textContent = 'Cloudflare Turnstile — please complete the check if shown';
-      title.style.cssText = 'font: 600 12px/1.3 "Segoe UI",sans-serif; margin-bottom: 8px; opacity: 0.9;';
+      title.className = 'wplace-turnstile-title';
 
       const host = document.createElement('div');
       host.id = 'turnstile-overlay-host';
-      host.style.cssText = 'width: 100%; min-height: 70px;';
+      host.className = 'wplace-turnstile-host';
 
       const hideBtn = document.createElement('button');
       hideBtn.textContent = 'Hide';
-      hideBtn.style.cssText = 'position:absolute; top:6px; right:6px; font-size:11px; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.2); border-radius:6px; padding:2px 6px; cursor:pointer;';
+      hideBtn.className = 'wplace-turnstile-hide-btn';
       hideBtn.addEventListener('click', () => overlay.remove());
 
       overlay.appendChild(title);
@@ -2084,40 +2057,7 @@
 
     showAlert: (message, type = "info") => {
       const alertDiv = document.createElement("div")
-      alertDiv.style.cssText = `
-        position: fixed;
-        top: 20px;
-        left: 50%;
-        transform: translateX(-50%);
-        padding: 12px 20px;
-        border-radius: 8px;
-        color: white;
-        font-weight: 600;
-        z-index: 10001;
-        max-width: 400px;
-        text-align: center;
-        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-        animation: slideDown 0.3s ease-out;
-        font-family: 'Segoe UI', sans-serif;
-      `
-
-      const colors = {
-        info: "background: linear-gradient(135deg, #3498db, #2980b9);",
-        success: "background: linear-gradient(135deg, #27ae60, #229954);",
-        warning: "background: linear-gradient(135deg, #f39c12, #e67e22);",
-        error: "background: linear-gradient(135deg, #e74c3c, #c0392b);",
-      }
-
-      alertDiv.style.cssText += colors[type] || colors.info
-
-      const style = document.createElement("style")
-      style.textContent = `
-        @keyframes slideDown {
-          from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
-          to { transform: translateX(-50%) translateY(0); opacity: 1; }
-        }
-      `
-      document.head.appendChild(style)
+      alertDiv.className = `wplace-alert-base wplace-alert-${type}`
 
       alertDiv.textContent = message
       document.body.appendChild(alertDiv)
@@ -2126,7 +2066,6 @@
         alertDiv.style.animation = "slideDown 0.3s ease-out reverse"
         setTimeout(() => {
           document.body.removeChild(alertDiv)
-          document.head.removeChild(style)
         }, 300)
       }, 4000)
     },
@@ -3292,13 +3231,20 @@
       document.head.appendChild(googleFonts)
     }
 
-    // Link external CSS file
+    // Link external CSS files
     const cssLink = document.createElement('link');
     cssLink.rel = 'stylesheet';
-    cssLink.href = 'https://staninna.github.io/WPlace-AutoBOT/auto-image-styles.css';  // TODO: Before merge change to https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBOT/refs/heads/main/auto-image-styles.css
+    cssLink.href = 'https://staninna.github.io/WPlace-AutoBOT/auto-image-complete-styles.css';  // TODO: Before merge change to https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBOT/refs/heads/main/auto-image-styles.css
     cssLink.setAttribute('data-wplace-theme', 'true');
     document.head.appendChild(cssLink);
 
+    // Link complete styles CSS file (includes extracted inline styles)
+    const completeCssLink = document.createElement('link');
+    completeCssLink.rel = 'stylesheet';
+    completeCssLink.href = './auto-image-complete-styles.css';
+    completeCssLink.setAttribute('data-wplace-complete', 'true');
+    document.head.appendChild(completeCssLink);
+
     // Apply theme-specific dynamic styles
     const style = document.createElement("style")
     style.setAttribute("data-wplace-theme-dynamic", "true")
@@ -3838,17 +3784,9 @@
       `linear-gradient(135deg, ${theme.primary} 0%, ${theme.secondary || theme.primary} 100%)` : 
       `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
     
-    settingsContainer.style.cssText = `
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      background: ${themeBackground};
-      border: ${theme.borderWidth || '1px'} ${theme.borderStyle || 'solid'} ${theme.accent || 'rgba(255,255,255,0.1)'};
-      border-radius: ${theme.borderRadius || '16px'};
-      padding: 0;
-      z-index: 10002;
-      display: none;
+    settingsContainer.className = 'wplace-settings-container-base';
+    // Apply theme-specific background
+    settingsContainer.style.background = themeBackground;
       min-width: 420px;
       max-width: 480px;
       color: ${theme.text || 'white'};
diff --git a/auto-image-complete-styles.css b/auto-image-complete-styles.css
new file mode 100644
index 0000000..d33e415
--- /dev/null
+++ b/auto-image-complete-styles.css
@@ -0,0 +1,753 @@
+/* WPlace Auto-Image Bot - Complete CSS Styles */
+/* All styling separated from JavaScript */
+
+/* CSS Custom Properties for Dynamic Values */
+:root {
+  /* Default Theme Colors */
+  --wplace-primary: #000000;
+  --wplace-secondary: #111111;
+  --wplace-accent: #775ce3;
+  --wplace-text: #ffffff;
+  --wplace-success: #00ff00;
+  --wplace-error: #ff0000;
+  --wplace-warning: #ffa500;
+  
+  /* Layout Properties */
+  --wplace-border-width: 1px;
+  --wplace-border-style: solid;
+  --wplace-border-radius: 16px;
+  --wplace-padding: 16px;
+  
+  /* Animation Properties */
+  --wplace-glow-enabled: 0;
+  --wplace-pixel-blink-enabled: 0;
+  --wplace-scanline-enabled: 0;
+  
+  /* Overlay Properties */
+  --wplace-overlay-opacity: 0.6;
+}
+
+/* Theme Variants */
+.theme-cyberpunk {
+  --wplace-primary: #0a0a0a;
+  --wplace-secondary: #1a1a2e;
+  --wplace-accent: #00ffff;
+  --wplace-text: #00ff00;
+  --wplace-glow-enabled: 1;
+  --wplace-pixel-blink-enabled: 1;
+}
+
+.theme-neon {
+  --wplace-primary: #0f0f23;
+  --wplace-secondary: #16213e;
+  --wplace-accent: #ff006e;
+  --wplace-text: #ffffff;
+  --wplace-glow-enabled: 1;
+}
+
+.theme-matrix {
+  --wplace-primary: #000000;
+  --wplace-secondary: #001100;
+  --wplace-accent: #00ff00;
+  --wplace-text: #00ff00;
+  --wplace-scanline-enabled: 1;
+}
+
+.theme-minimal {
+  --wplace-primary: #ffffff;
+  --wplace-secondary: #f5f5f5;
+  --wplace-accent: #007acc;
+  --wplace-text: #333333;
+}
+
+/* Base Animations */
+@keyframes neonGlow {
+  0%, 100% {
+    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+  }
+  50% {
+    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor, 0 0 8px currentColor;
+  }
+}
+
+@keyframes pixelBlink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0.7; }
+}
+
+@keyframes scanline {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(400px); }
+}
+
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
+  70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
+}
+
+@keyframes slideIn {
+  from { transform: translateY(-10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideDown {
+  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
+  to { transform: translateX(-50%) translateY(0); opacity: 1; }
+}
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
+/* Conditional Animations Based on Theme */
+.theme-cyberpunk .wplace-header,
+.theme-neon .wplace-header {
+  animation: neonGlow 2s ease-in-out infinite alternate;
+}
+
+.theme-cyberpunk .fas,
+.theme-cyberpunk .fa,
+.theme-neon .fas,
+.theme-neon .fa {
+  filter: drop-shadow(0 0 3px currentColor);
+}
+
+.theme-cyberpunk .wplace-btn:hover:not(:disabled),
+.theme-cyberpunk .status-error,
+.theme-cyberpunk .wplace-progress-bar::after {
+  animation: pixelBlink 0.5s infinite;
+}
+
+.theme-matrix::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--wplace-accent), transparent);
+  animation: scanline 3s linear infinite;
+  pointer-events: none;
+}
+
+/* Turnstile Container Styles */
+.wplace-turnstile-hidden {
+  position: fixed !important;
+  left: -99999px !important;
+  top: -99999px !important;
+  width: 1px !important;
+  height: 1px !important;
+  pointer-events: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  z-index: -99999 !important;
+  overflow: hidden !important;
+}
+
+.wplace-turnstile-overlay {
+  position: fixed !important;
+  bottom: 20px !important;
+  right: 20px !important;
+  z-index: 99999 !important;
+  background: rgba(0,0,0,0.9) !important;
+  border-radius: 12px !important;
+  padding: 20px !important;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
+  backdrop-filter: blur(10px) !important;
+  border: 1px solid rgba(255,255,255,0.2) !important;
+  color: var(--wplace-text) !important;
+  font-family: "Segoe UI", sans-serif !important;
+  min-width: 300px !important;
+  max-width: 400px !important;
+}
+
+.wplace-turnstile-title {
+  font: 600 12px/1.3 "Segoe UI", sans-serif !important;
+  margin-bottom: 8px !important;
+  opacity: 0.9 !important;
+  color: var(--wplace-text) !important;
+}
+
+.wplace-turnstile-host {
+  width: 100% !important;
+  min-height: 70px !important;
+}
+
+.wplace-turnstile-hide-btn {
+  position: absolute !important;
+  top: 6px !important;
+  right: 6px !important;
+  font-size: 11px !important;
+  background: transparent !important;
+  color: var(--wplace-text) !important;
+  border: 1px solid rgba(255,255,255,0.2) !important;
+  border-radius: 6px !important;
+  padding: 2px 6px !important;
+  cursor: pointer !important;
+}
+
+.wplace-turnstile-hide-btn:hover {
+  background: rgba(255,255,255,0.1) !important;
+}
+
+/* Alert System */
+.wplace-alert {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 12px 20px;
+  border-radius: 8px;
+  color: white;
+  font-weight: 600;
+  z-index: 10001;
+  max-width: 400px;
+  text-align: center;
+  animation: slideDown 0.3s ease-out;
+}
+
+.wplace-alert-success {
+  background: linear-gradient(135deg, #4caf50, #66bb6a);
+  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+}
+
+.wplace-alert-error {
+  background: linear-gradient(135deg, #f44336, #ef5350);
+  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
+}
+
+.wplace-alert-warning {
+  background: linear-gradient(135deg, #ff9800, #ffb74d);
+  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
+}
+
+.wplace-alert-info {
+  background: linear-gradient(135deg, #2196f3, #42a5f5);
+  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
+}
+
+/* Settings Container */
+.wplace-settings-container {
+  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-accent);
+  border-radius: var(--wplace-border-radius);
+  padding: 0;
+  z-index: 10002;
+  display: none;
+  color: var(--wplace-text);
+  font-family: "Segoe UI", Roboto, sans-serif;
+  min-width: 400px;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+}
+
+.wplace-settings-container.show {
+  display: block;
+  animation: slideIn 0.3s ease-out;
+}
+
+/* Settings Header */
+.wplace-settings-header {
+  background: var(--wplace-secondary);
+  padding: var(--wplace-padding);
+  border-bottom: 1px solid var(--wplace-accent);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.wplace-settings-title {
+  color: var(--wplace-accent);
+  font-size: 18px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.wplace-settings-close {
+  background: none;
+  border: none;
+  color: var(--wplace-text);
+  font-size: 18px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+}
+
+.wplace-settings-close:hover {
+  opacity: 1;
+}
+
+/* Settings Content */
+.wplace-settings {
+  padding: var(--wplace-padding);
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.wplace-setting-section {
+  margin-bottom: 20px;
+  padding: 12px;
+  background: rgba(255,255,255,0.03);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 8px;
+}
+
+.wplace-setting-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--wplace-accent);
+}
+
+.wplace-setting-title i {
+  margin-right: 8px;
+}
+
+/* Form Controls */
+.wplace-select {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  margin-bottom: 10px;
+  background: var(--wplace-secondary);
+  border: 1px solid var(--wplace-accent);
+  border-radius: 6px;
+  color: var(--wplace-text);
+}
+
+.wplace-select:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(119, 92, 227, 0.3);
+}
+
+.wplace-description {
+  font-size: 12px;
+  opacity: 0.8;
+  line-height: 1.4;
+  color: var(--wplace-text);
+}
+
+/* Speed Controls */
+.wplace-speed-control {
+  margin-top: 12px;
+  padding: 12px;
+  background: rgba(255,255,255,0.03);
+  border-radius: 8px;
+}
+
+.wplace-speed-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--wplace-text);
+}
+
+.wplace-speed-label i {
+  margin-right: 6px;
+}
+
+.wplace-speed-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.wplace-speed-slider {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  outline: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+  background: #444;
+}
+
+.wplace-speed-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--wplace-accent);
+  background: var(--wplace-accent);
+}
+
+.wplace-speed-slider::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid var(--wplace-accent);
+  background: var(--wplace-accent);
+}
+
+.wplace-speed-display {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 90px;
+  justify-content: flex-end;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-weight: 600;
+  background: var(--wplace-secondary);
+  color: var(--wplace-text);
+}
+
+.wplace-speed-unit {
+  font-size: 11px;
+  opacity: 0.8;
+}
+
+/* Theme Customization */
+.wplace-theme-custom {
+  margin-top: 15px;
+  padding: 15px;
+  background: rgba(255,255,255,0.03);
+  border-radius: 8px;
+}
+
+.wplace-custom-group {
+  margin-bottom: 15px;
+}
+
+.wplace-custom-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--wplace-text);
+}
+
+.wplace-custom-label i {
+  margin-right: 8px;
+  width: 16px;
+}
+
+.wplace-color-input-group {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.wplace-color-input {
+  width: 50px;
+  height: 30px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  background: transparent;
+}
+
+.wplace-color-text {
+  flex: 1;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: monospace;
+  background: var(--wplace-secondary);
+  border: 1px solid var(--wplace-accent);
+  color: var(--wplace-text);
+}
+
+.wplace-animation-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.wplace-checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  cursor: pointer;
+  color: var(--wplace-text);
+}
+
+.wplace-custom-actions {
+  display: flex;
+  gap: 10px;
+  margin-top: 20px;
+  border-top: 1px solid rgba(255,255,255,0.1);
+  padding-top: 15px;
+}
+
+/* Overlay Styles */
+.wplace-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: none;
+}
+
+.wplace-overlay.show {
+  display: block;
+}
+
+/* Overlay visibility classes */
+.wplace-overlay-hidden {
+  display: none !important;
+}
+
+.wplace-overlay-visible {
+  display: block !important;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .wplace-settings-container {
+    min-width: 90vw;
+    max-width: 90vw;
+    margin: 20px;
+  }
+  
+  .wplace-turnstile-overlay {
+    bottom: 10px !important;
+    right: 10px !important;
+    left: 10px !important;
+    min-width: auto !important;
+  }
+  
+  .wplace-alert {
+    max-width: 90vw;
+    margin: 0 5vw;
+  }
+}
+
+/* Dark/Light mode support */
+@media (prefers-color-scheme: light) {
+  .theme-auto {
+    --wplace-primary: #ffffff;
+    --wplace-secondary: #f5f5f5;
+    --wplace-accent: #007acc;
+    --wplace-text: #333333;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .theme-auto {
+    --wplace-primary: #1e1e1e;
+    --wplace-secondary: #2d2d30;
+    --wplace-accent: #775ce3;
+    --wplace-text: #ffffff;
+  }
+}
+
+/* =============================================== */
+/* EXTRACTED INLINE STYLES - PREVIOUSLY IN JS */
+/* =============================================== */
+
+/* Turnstile Overlay Styles - extracted from createTurnstileOverlay */
+.wplace-turnstile-title {
+  font: 600 12px/1.3 "Segoe UI", sans-serif;
+  margin-bottom: 8px;
+  opacity: 0.9;
+  color: var(--wplace-text, #ffffff);
+}
+
+.wplace-turnstile-host {
+  width: 100%;
+  min-height: 70px;
+}
+
+.wplace-turnstile-hide-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  font-size: 11px;
+  background: transparent;
+  color: var(--wplace-text, #ffffff);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  padding: 2px 6px;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.wplace-turnstile-hide-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Alert System Styles - extracted from showAlert */
+.wplace-alert-base {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 12px 20px;
+  border-radius: 8px;
+  color: white;
+  font-weight: 600;
+  z-index: 10001;
+  max-width: 400px;
+  text-align: center;
+  animation: slideDown 0.3s ease-out;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  font-family: 'Segoe UI', sans-serif;
+}
+
+/* Alert type variants - extracted from showAlert colors object */
+.wplace-alert-info {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+}
+
+.wplace-alert-success {
+  background: linear-gradient(135deg, #27ae60, #229954);
+  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
+}
+
+.wplace-alert-warning {
+  background: linear-gradient(135deg, #f39c12, #e67e22);
+  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
+}
+
+.wplace-alert-error {
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
+}
+
+/* Settings Container Base Styles - extracted from showSettings */
+.wplace-settings-container-base {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10002;
+  display: none;
+  font-family: "Segoe UI", Roboto, sans-serif;
+  min-width: 400px;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+  animation: slideIn 0.3s ease-out;
+  border: 1px solid var(--wplace-accent, rgba(255,255,255,0.1));
+  border-radius: 16px;
+  padding: 0;
+}
+
+.wplace-settings-container-base.show {
+  display: block;
+}
+
+/* Dynamic Theme Background Classes */
+.wplace-theme-classic {
+  background: linear-gradient(135deg, var(--wplace-primary, #000000) 0%, #1a1a1a 100%);
+}
+
+.wplace-theme-standard {
+  background: var(--wplace-primary, #000000);
+}
+
+/* Settings Container Theme Variations */
+.wplace-settings-cyberpunk {
+  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
+}
+
+.wplace-settings-neon {
+  background: linear-gradient(135deg, #0f0f23 0%, #16213e 50%, #240046 100%);
+}
+
+.wplace-settings-matrix {
+  background: linear-gradient(135deg, #000000 0%, #001100 50%, #002200 100%);
+}
+
+.wplace-settings-retro {
+  background: linear-gradient(135deg, #2c3e50 0%, #3498db 50%, #9b59b6 100%);
+}
+
+.wplace-settings-minimal {
+  background: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7 100%);
+}
+
+.wplace-settings-synthwave {
+  background: linear-gradient(135deg, #1a0033 0%, #2d1b69 50%, #11998e 100%);
+}
+
+.wplace-settings-vapor {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+/* Color swatch states - extracted from updateColorGrid */
+.wplace-color-swatch.unavailable {
+  opacity: 0.4;
+  filter: grayscale(50%);
+}
+
+/* Stats container visibility - extracted from toggleStats */
+.wplace-stats-container.hidden {
+  display: none;
+}
+
+/* Additional utility classes for dynamic behavior */
+.wplace-drag-active {
+  transition: none !important;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
+  transform: scale(1.02) !important;
+  z-index: 9999 !important;
+}
+
+.wplace-paint-effect {
+  animation: pulse 0.5s ease-out;
+}
+
+.wplace-settings-error {
+  background: rgba(255, 0, 0, 0.4) !important;
+}
+
+/* Animation modifier classes for conditional application */
+.wplace-glow-animation .wplace-header {
+  animation: neonGlow 2s ease-in-out infinite alternate;
+}
+
+.wplace-glow-animation .fas,
+.wplace-glow-animation .fa {
+  filter: drop-shadow(0 0 3px currentColor);
+}
+
+.wplace-blink-animation .wplace-btn:hover:not(:disabled) {
+  animation: pixelBlink 0.5s infinite;
+}
+
+.wplace-blink-animation .status-error {
+  animation: pixelBlink 0.5s infinite;
+}
+
+.wplace-blink-animation .wplace-progress-bar::after {
+  animation: pixelBlink 1s infinite;
+}
+
+.wplace-scanline-animation::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--wplace-neon, #00ffff), transparent);
+  animation: scanline 3s linear infinite;
+  z-index: 1;
+  pointer-events: none;
+}
\ No newline at end of file

From f4863f9018e18639a9d740a66cb699a51ef0b3e9 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 12:46:24 +0200
Subject: [PATCH 06/36] Fix JavaScript syntax error in settings container CSS
 assignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 Auto-Image.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 217aa26..dc1e605 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3787,6 +3787,7 @@
     settingsContainer.className = 'wplace-settings-container-base';
     // Apply theme-specific background
     settingsContainer.style.background = themeBackground;
+    settingsContainer.style.cssText += `
       min-width: 420px;
       max-width: 480px;
       color: ${theme.text || 'white'};
@@ -3799,7 +3800,7 @@
         box-shadow: ${theme.boxShadow || '0 20px 40px rgba(0,0,0,0.3)'}, 
                    0 0 30px ${theme.highlight || theme.neon || '#00ffff'};
       ` : ''}
-    `
+    `;
 
     settingsContainer.innerHTML = `
       <div class="wplace-settings-header" style="

From 7984f94f7376c578665c1751df5ed507258b04fd Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 13:22:09 +0200
Subject: [PATCH 07/36] Add base styles for main container and adjust z-index
 in CSS (hopefully this fixes it)

---
 Auto-Image.js                  | 7 +------
 auto-image-complete-styles.css | 9 +++++++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index dc1e605..63493f3 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3238,12 +3238,6 @@
     cssLink.setAttribute('data-wplace-theme', 'true');
     document.head.appendChild(cssLink);
 
-    // Link complete styles CSS file (includes extracted inline styles)
-    const completeCssLink = document.createElement('link');
-    completeCssLink.rel = 'stylesheet';
-    completeCssLink.href = './auto-image-complete-styles.css';
-    completeCssLink.setAttribute('data-wplace-complete', 'true');
-    document.head.appendChild(completeCssLink);
 
     // Apply theme-specific dynamic styles
     const style = document.createElement("style")
@@ -3790,6 +3784,7 @@
     settingsContainer.style.cssText += `
       min-width: 420px;
       max-width: 480px;
+      z-index: 99999;
       color: ${theme.text || 'white'};
       font-family: ${theme.fontFamily || "'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"};
       box-shadow: ${theme.boxShadow || '0 20px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1)'};
diff --git a/auto-image-complete-styles.css b/auto-image-complete-styles.css
index d33e415..deef55f 100644
--- a/auto-image-complete-styles.css
+++ b/auto-image-complete-styles.css
@@ -1,6 +1,15 @@
 /* WPlace Auto-Image Bot - Complete CSS Styles */
 /* All styling separated from JavaScript */
 
+/* Main Container Base Styles */
+#wplace-image-bot-container {
+  position: fixed !important;
+  top: 20px !important;
+  left: 20px !important;
+  z-index: 10000 !important;
+  max-width: 400px !important;
+}
+
 /* CSS Custom Properties for Dynamic Values */
 :root {
   /* Default Theme Colors */

From eaa7a03ca67bf580b95598110f753e8f13badacf Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 13:39:50 +0200
Subject: [PATCH 08/36] zindex

---
 auto-image-complete-styles.css | 37 +++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/auto-image-complete-styles.css b/auto-image-complete-styles.css
index deef55f..469a74b 100644
--- a/auto-image-complete-styles.css
+++ b/auto-image-complete-styles.css
@@ -10,6 +10,37 @@
   max-width: 400px !important;
 }
 
+/* Stats Container Positioning */
+#wplace-stats-container {
+  position: fixed !important;
+  top: 60px !important;
+  right: 20px !important;
+  z-index: 10001 !important;
+  max-width: 350px !important;
+}
+
+/* Resize Dialog Containers */
+.resize-container {
+  position: fixed !important;
+  top: 50% !important;
+  left: 50% !important;
+  transform: translate(-50%, -50%) !important;
+  z-index: 100000 !important;
+  max-width: 90vw !important;
+  max-height: 90vh !important;
+}
+
+.resize-overlay {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  background: rgba(0, 0, 0, 0.8) !important;
+  z-index: 99999 !important;
+  display: none !important;
+}
+
 /* CSS Custom Properties for Dynamic Values */
 :root {
   /* Default Theme Colors */
@@ -247,7 +278,7 @@
   border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-accent);
   border-radius: var(--wplace-border-radius);
   padding: 0;
-  z-index: 10002;
+  z-index: 100001;
   display: none;
   color: var(--wplace-text);
   font-family: "Segoe UI", Roboto, sans-serif;
@@ -507,7 +538,7 @@
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
-  z-index: 9999;
+  z-index: 100002;
   display: none;
 }
 
@@ -644,7 +675,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 10002;
+  z-index: 100001;
   display: none;
   font-family: "Segoe UI", Roboto, sans-serif;
   min-width: 400px;

From 1c086b8ddc211c43957d574ce2d611c4843eeb03 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 13:55:50 +0200
Subject: [PATCH 09/36] fix

---
 Auto-Image.js                  | 9 ++++++---
 auto-image-complete-styles.css | 3 +++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 63493f3..2f22e98 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -4443,6 +4443,9 @@
     document.body.appendChild(statsContainer)
     document.body.appendChild(settingsContainer)
 
+    // Show the main container after all elements are appended
+    container.style.display = "block"
+
     const uploadBtn = container.querySelector("#uploadBtn")
     const resizeBtn = container.querySelector("#resizeBtn")
     const selectPosBtn = container.querySelector("#selectPosBtn")
@@ -4609,9 +4612,9 @@
       }
     }
     if (statsContainer && statsBtn) {
-      statsContainer.style.display = "block";
-      statsBtn.innerHTML = '<i class="fas fa-chart-line"></i>';
-      statsBtn.title = "Hide Stats";
+      // Stats container starts hidden - user clicks button to show
+      statsBtn.innerHTML = '<i class="fas fa-chart-bar"></i>';
+      statsBtn.title = "Show Stats";
     }
 
     const settingsBtn = container.querySelector("#settingsBtn")
diff --git a/auto-image-complete-styles.css b/auto-image-complete-styles.css
index 469a74b..39ede51 100644
--- a/auto-image-complete-styles.css
+++ b/auto-image-complete-styles.css
@@ -8,6 +8,7 @@
   left: 20px !important;
   z-index: 10000 !important;
   max-width: 400px !important;
+  display: none !important;
 }
 
 /* Stats Container Positioning */
@@ -17,6 +18,7 @@
   right: 20px !important;
   z-index: 10001 !important;
   max-width: 350px !important;
+  display: none !important;
 }
 
 /* Resize Dialog Containers */
@@ -28,6 +30,7 @@
   z-index: 100000 !important;
   max-width: 90vw !important;
   max-height: 90vh !important;
+  display: none !important;
 }
 
 .resize-overlay {

From f646ff6f3b89f0bae49f27dbbdf83e49826f2ef5 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 14:11:55 +0200
Subject: [PATCH 10/36] fix css?

---
 auto-image-complete-styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/auto-image-complete-styles.css b/auto-image-complete-styles.css
index 39ede51..1f42eb4 100644
--- a/auto-image-complete-styles.css
+++ b/auto-image-complete-styles.css
@@ -8,7 +8,7 @@
   left: 20px !important;
   z-index: 10000 !important;
   max-width: 400px !important;
-  display: none !important;
+  display: none;
 }
 
 /* Stats Container Positioning */

From 7252e4b0fec0153cf46dad61df3fa9ce21aaaf43 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 14:44:32 +0200
Subject: [PATCH 11/36] feat: Update CSS and JS for decoupled styles and revert
 CSS link

---
 Auto-Farm.js                   |  624 ----------------
 Auto-Image.js                  |    7 +-
 auto-image-complete-styles.css | 1282 ++++++++++++++++++--------------
 3 files changed, 743 insertions(+), 1170 deletions(-)
 delete mode 100644 Auto-Farm.js

diff --git a/Auto-Farm.js b/Auto-Farm.js
deleted file mode 100644
index 1a903bd..0000000
--- a/Auto-Farm.js
+++ /dev/null
@@ -1,624 +0,0 @@
-(async () => {
-  const CONFIG = {
-    START_X: 742,
-    START_Y: 1148,
-    PIXELS_PER_LINE: 100,
-    DELAY: 1000,
-    THEME: {
-      primary: '#000000',
-      secondary: '#111111',
-      accent: '#222222',
-      text: '#ffffff',
-      highlight: '#775ce3',
-      success: '#00ff00',
-      error: '#ff0000'
-    }
-  };
-
-  const state = {
-    running: false,
-    paintedCount: 0,
-    charges: { count: 0, max: 80, cooldownMs: 30000 },
-    userInfo: null,
-    lastPixel: null,
-    minimized: false,
-    menuOpen: false,
-    language: 'en',
-    autoRefresh: true,
-    pausedForManual: false
-  };
-
-  const sleep = ms => new Promise(r => setTimeout(r, ms));
-  const waitForSelector = async (selector, interval = 200, timeout = 5000) => {
-    const start = Date.now();
-    while (Date.now() - start < timeout) {
-      const el = document.querySelector(selector);
-      if (el) return el;
-      await sleep(interval);
-    }
-    return null;
-  };
-
-  const originalFetch = window.fetch;
-  let capturedCaptchaToken = null;
-  window.fetch = async (url, options = {}) => {
-    if (typeof url === 'string' && url.includes('https://backend.wplace.live/s0/pixel/')) {
-      try {
-        const payload = JSON.parse(options.body || '{}');
-        if (payload.t) {
-          console.log('✅ CAPTCHA Token Captured:', payload.t);
-          capturedCaptchaToken = payload.t;
-          if (state.pausedForManual) {
-            state.pausedForManual = false;
-            state.running = true;
-            updateUI(
-              state.language === 'pt' ? '🚀 Pintura reiniciada!' : '🚀 Farm resumed!',
-              'success'
-            );
-            paintLoop();
-          }
-        }
-      } catch (e) {
-      }
-    }
-    return originalFetch(url, options);
-  };
-
-  const fetchAPI = async (url, options = {}) => {
-    try {
-      const res = await fetch(url, {
-        credentials: 'include',
-        ...options
-      });
-      return await res.json();
-    } catch (e) {
-      return null;
-    }
-  };
-
-  const getRandomPosition = () => ({
-    x: Math.floor(Math.random() * CONFIG.PIXELS_PER_LINE),
-    y: Math.floor(Math.random() * CONFIG.PIXELS_PER_LINE)
-  });
-
-  const paintPixel = async (x, y) => {
-    const randomColor = Math.floor(Math.random() * 31) + 1;
-    const url = `https://backend.wplace.live/s0/pixel/${CONFIG.START_X}/${CONFIG.START_Y}`;
-    const payload = JSON.stringify({ coords: [x, y], colors: [randomColor], t: capturedCaptchaToken });
-    try {
-      const res = await originalFetch(url, {
-        method: 'POST',
-        headers: { 'Content-Type': 'text/plain;charset=UTF-8' },
-        credentials: 'include',
-        body: payload
-      });
-      if (res.status === 403) {
-        console.error('❌ 403 Forbidden. CAPTCHA token might be invalid or expired.');
-        capturedCaptchaToken = null;
-        stoppedForToken = true;
-        return 'token_error';
-      }
-      const data = await res.json();
-      return data;
-    } catch (e) {
-      return null;
-    }
-  };
-
-  const getCharge = async () => {
-    const data = await fetchAPI('https://backend.wplace.live/me');
-    if (data) {
-      state.userInfo = data;
-      state.charges = {
-        count: Math.floor(data.charges.count),
-        max: Math.floor(data.charges.max),
-        cooldownMs: data.charges.cooldownMs
-      };
-      if (state.userInfo.level) {
-        state.userInfo.level = Math.floor(state.userInfo.level);
-      }
-    }
-    return state.charges;
-  };
-
-  const detectUserLocation = async () => {
-    try {
-      const response = await fetch('https://ipapi.co/json/');
-      const data = await response.json();
-      if (data.country === 'BR') {
-        state.language = 'pt';
-      } else if (data.country === 'US') {
-        state.language = 'en';
-      } else {
-        state.language = 'en';
-      }
-    } catch {
-      state.language = 'en';
-    }
-  };
-
-  const paintLoop = async () => {
-    while (state.running) {
-      const { count, cooldownMs } = state.charges;
-      
-      if (count < 1) {
-        updateUI(state.language === 'pt' ? `⌛ Sem cargas. Esperando ${Math.ceil(cooldownMs/1000)}s...` : `⌛ No charges. Waiting ${Math.ceil(cooldownMs/1000)}s...`, 'status');
-        await sleep(cooldownMs);
-        await getCharge();
-        continue;
-      }
-
-      const randomPos = getRandomPosition();
-      const paintResult = await paintPixel(randomPos.x, randomPos.y);
-      if (paintResult === 'token_error') {
-        if (state.autoRefresh) {
-          await getCharge();
-          if (state.charges.count < 2) {
-            if (!state.pausedForManual) {
-              updateUI(
-                state.language === 'pt'
-                  ? '⚡ Aguardando pelo menos 2 cargas para auto-refresh...'
-                  : 'Waiting for at least 2 charges for auto-refresh...',
-                'status'
-              );
-              state.pausedForManual = true;
-            }
-            while (state.charges.count < 2) {
-              await sleep(60000);
-              await getCharge();
-              updateStats();
-            }
-            state.pausedForManual = false;
-          }
-          updateUI(
-            state.language === 'pt'
-              ? '❌ Token expirado. Aguardando elemento Paint...'
-              : '❌ CAPTCHA token expired. Waiting for Paint button...',
-            'error'
-          );
-          const mainPaintBtn = await waitForSelector('button.btn.btn-primary.btn-lg, button.btn-primary.sm\\:btn-xl');
-          if (mainPaintBtn) mainPaintBtn.click();
-          await sleep(500);
-          updateUI(
-            state.language === 'pt' ? 'Selecionando transparente...' : 'Selecting transparent...',
-            'status'
-          );
-          const transBtn = await waitForSelector('button#color-0');
-          if (transBtn) transBtn.click();
-          await sleep(500);
-          const canvas = await waitForSelector('canvas');
-          if (canvas) {
-            canvas.setAttribute('tabindex', '0');
-            canvas.focus();
-            const rect = canvas.getBoundingClientRect();
-            const centerX = Math.round(rect.left + rect.width / 2);
-            const centerY = Math.round(rect.top + rect.height / 2);
-            const moveEvt = new MouseEvent('mousemove', {
-              clientX: centerX,
-              clientY: centerY,
-              bubbles: true
-            });
-            canvas.dispatchEvent(moveEvt);
-            const keyDown = new KeyboardEvent('keydown', { key: ' ', code: 'Space', bubbles: true });
-            const keyUp = new KeyboardEvent('keyup', { key: ' ', code: 'Space', bubbles: true });
-            canvas.dispatchEvent(keyDown);
-            canvas.dispatchEvent(keyUp);
-          }
-          await sleep(500);
-          updateUI(
-            state.language === 'pt' ? 'Confirmando pintura...' : 'Confirming paint...',
-            'status'
-          );
-          let confirmBtn = await waitForSelector(
-            'button.btn.btn-primary.btn-lg, button.btn.btn-primary.sm\\:btn-xl'
-          );
-          if (!confirmBtn) {
-            const allPrimary = Array.from(document.querySelectorAll('button.btn-primary'));
-            confirmBtn = allPrimary.length ? allPrimary[allPrimary.length - 1] : null;
-          }
-          confirmBtn?.click();
-        } else {
-          // insufficient charges or auto-refresh disabled
-          if (state.autoRefresh && state.charges.count < 2) {
-            updateUI(
-              state.language === 'pt'
-                ? '⚡ Cargas insuficientes para auto-refresh. Por favor, clique manualmente.'
-                : 'Insufficient charges for auto-refresh. Please click manually.',
-              'error'
-            );
-          }
-          if (!state.pausedForManual) {
-            updateUI(
-              state.language === 'pt'
-                ? 'Auto-refresh desativado. Por favor, clique no botão pintura manualmente.'
-                : 'Auto-refresh disabled. Please click the Paint button manually.',
-              'status'
-            );
-            state.pausedForManual = true;
-          }
-          state.running = false;
-          return;
-        }
-        await sleep(1000);
-        continue;
-      }
-      
-      if (paintResult?.painted === 1) {
-        state.paintedCount++;
-        state.lastPixel = { 
-          x: CONFIG.START_X + randomPos.x,
-          y: CONFIG.START_Y + randomPos.y,
-          time: new Date() 
-        };
-        state.charges.count--;
-        
-        document.getElementById('paintEffect').style.animation = 'pulse 0.5s';
-        setTimeout(() => {
-          document.getElementById('paintEffect').style.animation = '';
-        }, 500);
-        
-        updateUI(state.language === 'pt' ? '✅ Pixel pintado!' : '✅ Pixel painted!', 'success');
-      } else {
-        updateUI(state.language === 'pt' ? '❌ Falha ao pintar' : '❌ Failed to paint', 'error');
-      }
-
-      await sleep(CONFIG.DELAY);
-      updateStats();
-    }
-  };
-
-  const createUI = () => {
-    if (state.menuOpen) return;
-    state.menuOpen = true;
-
-    const fontAwesome = document.createElement('link');
-    fontAwesome.rel = 'stylesheet';
-    fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
-    document.head.appendChild(fontAwesome);
-
-    const style = document.createElement('style');
-    style.textContent = `
-      @keyframes pulse {
-        0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }n
-        70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
-        100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
-      }
-      @keyframes slideIn {
-        from { transform: translateY(20px); opacity: 0; }
-        to { transform: translateY(0); opacity: 1; }
-      }
-      .wplace-bot-panel {
-        position: fixed;
-        top: 20px;
-        right: 20px;
-        width: 250px;
-        background: ${CONFIG.THEME.primary};
-        border: 1px solid ${CONFIG.THEME.accent};
-        border-radius: 8px;
-        padding: 0;
-        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
-        z-index: 9999;
-        font-family: 'Segoe UI', Roboto, sans-serif;
-        color: ${CONFIG.THEME.text};
-        animation: slideIn 0.4s ease-out;
-        overflow: hidden;
-      }
-      .wplace-header {
-        padding: 12px 15px;
-        background: ${CONFIG.THEME.secondary};
-        color: ${CONFIG.THEME.highlight};
-        font-size: 16px;
-        font-weight: 600;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: move;
-        user-select: none;
-      }
-      .wplace-header-title {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-      .wplace-header-controls {
-        display: flex;
-        gap: 10px;
-      }
-      .wplace-header-btn {
-        background: none;
-        border: none;
-        color: ${CONFIG.THEME.text};
-        cursor: pointer;
-        opacity: 0.7;
-        transition: opacity 0.2s;
-      }
-      .wplace-header-btn:hover {
-        opacity: 1;
-      }
-      .wplace-content {
-        padding: 15px;
-        display: ${state.minimized ? 'none' : 'block'};
-      }
-      .wplace-controls {
-        display: flex;
-        gap: 10px;
-        margin-bottom: 15px;
-      }
-      .wplace-btn {
-        flex: 1;
-        padding: 10px;
-        border: none;
-        border-radius: 6px;
-        font-weight: 600;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        transition: all 0.2s;
-      }
-      .wplace-btn:hover {
-        transform: translateY(-2px);
-      }
-      .wplace-btn-primary {
-        background: ${CONFIG.THEME.accent};
-        color: white;
-      }
-      .wplace-btn-stop {
-        background: ${CONFIG.THEME.error};
-        color: white;
-      }
-      .wplace-stats {
-        background: ${CONFIG.THEME.secondary};
-        padding: 12px;
-        border-radius: 6px;
-        margin-bottom: 15px;
-      }
-      .wplace-stat-item {
-        display: flex;
-        justify-content: space-between;
-        padding: 6px 0;
-        font-size: 14px;
-      }
-      .wplace-stat-label {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        opacity: 0.8;
-      }
-      .wplace-status {
-        padding: 8px;
-        border-radius: 4px;
-        text-align: center;
-        font-size: 13px;
-      }
-      .status-default {
-        background: rgba(255,255,255,0.1);
-      }
-      .status-success {
-        background: rgba(0, 255, 0, 0.1);
-        color: ${CONFIG.THEME.success};
-      }
-      .status-error {
-        background: rgba(255, 0, 0, 0.1);
-        color: ${CONFIG.THEME.error};
-      }
-      #paintEffect {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        border-radius: 8px;
-      }
-    `;
-    document.head.appendChild(style);
-
-    const translations = {
-      pt: {
-        title: "WPlace Auto-Farm",
-        start: "Iniciar",
-        stop: "Parar",
-        ready: "Pronto para começar",
-        user: "Usuário",
-        pixels: "Pixels",
-        charges: "Cargas",
-        level: "Level"
-      },
-      en: {
-        title: "WPlace Auto-Farm",
-        start: "Start",
-        stop: "Stop",
-        ready: "Ready to start",
-        user: "User",
-        pixels: "Pixels",
-        charges: "Charges",
-        level: "Level"
-      }
-    };
-
-    const t = translations[state.language] || translations.en;
-
-    const panel = document.createElement('div');
-    panel.className = 'wplace-bot-panel';
-    panel.innerHTML = `
-      <div id="paintEffect"></div>
-      <div class="wplace-header">
-        <div class="wplace-header-title">
-          <i class="fas fa-paint-brush"></i>
-          <span>${t.title}</span>
-        </div>
-        <div class="wplace-header-controls">
-          <button id="minimizeBtn" class="wplace-header-btn" title="${state.language === 'pt' ? 'Minimizar' : 'Minimize'}">
-            <i class="fas fa-${state.minimized ? 'expand' : 'minus'}"></i>
-          </button>
-        </div>
-      </div>
-      <div class="wplace-content">
-        <div class="wplace-controls">
-          <button id="toggleBtn" class="wplace-btn wplace-btn-primary">
-            <i class="fas fa-play"></i>
-            <span>${t.start}</span>
-          </button>
-          <label style="display:flex; align-items:center; margin-left:10px;">
-            <input type="checkbox" id="autoRefreshCheckbox" ${state.autoRefresh ? 'checked' : ''}/>
-            <span style="margin-left:4px; font-size:14px;">Auto Refresh</span>
-          </label>
-        </div>
-        
-        <div class="wplace-stats">
-          <div id="statsArea">
-            <div class="wplace-stat-item">
-              <div class="wplace-stat-label"><i class="fas fa-paint-brush"></i> ${state.language === 'pt' ? 'Carregando...' : 'Loading...'}</div>
-            </div>
-          </div>
-        </div>
-        
-        <div id="statusText" class="wplace-status status-default">
-          ${t.ready}
-        </div>
-      </div>
-    `;
-    
-    document.body.appendChild(panel);
-    
-    const header = panel.querySelector('.wplace-header');
-    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
-    
-    header.onmousedown = dragMouseDown;
-    
-    function dragMouseDown(e) {
-      if (e.target.closest('.wplace-header-btn')) return;
-      
-      e = e || window.event;
-      e.preventDefault();
-      pos3 = e.clientX;
-      pos4 = e.clientY;
-      document.onmouseup = closeDragElement;
-      document.onmousemove = elementDrag;
-    }
-    
-    function elementDrag(e) {
-      e = e || window.event;
-      e.preventDefault();
-      pos1 = pos3 - e.clientX;
-      pos2 = pos4 - e.clientY;
-      pos3 = e.clientX;
-      pos4 = e.clientY;
-      panel.style.top = (panel.offsetTop - pos2) + "px";
-      panel.style.left = (panel.offsetLeft - pos1) + "px";
-    }
-    
-    function closeDragElement() {
-      document.onmouseup = null;
-      document.onmousemove = null;
-    }
-    
-    const toggleBtn = panel.querySelector('#toggleBtn');
-    const minimizeBtn = panel.querySelector('#minimizeBtn');
-    const statusText = panel.querySelector('#statusText');
-    const content = panel.querySelector('.wplace-content');
-    const statsArea = panel.querySelector('#statsArea');
-    
-    toggleBtn.addEventListener('click', () => {
-      state.running = !state.running;
-      
-      if (state.running && !capturedCaptchaToken) {
-        updateUI(state.language === 'pt' ? '❌ Token não capturado. Clique em qualquer pixel primeiro.' : '❌ CAPTCHA token not captured. Please click any pixel manually first.', 'error');
-        state.running = false;
-        return;
-      }
-  
-      if (state.running) {
-        toggleBtn.innerHTML = `<i class="fas fa-stop"></i> <span>${t.stop}</span>`;
-        toggleBtn.classList.remove('wplace-btn-primary');
-        toggleBtn.classList.add('wplace-btn-stop');
-        updateUI(state.language === 'pt' ? '🚀 Pintura iniciada!' : '🚀 Painting started!', 'success');
-        paintLoop();
-      } else {
-        toggleBtn.innerHTML = `<i class="fas fa-play"></i> <span>${t.start}</span>`;
-        toggleBtn.classList.add('wplace-btn-primary');
-        toggleBtn.classList.remove('wplace-btn-stop');
-        statsArea.innerHTML = '';
-        updateUI(state.language === 'pt' ? '⏹️ Parado' : '⏹️ Stopped', 'default');
-      }
-    });
-    
-    minimizeBtn.addEventListener('click', () => {
-      state.minimized = !state.minimized;
-      content.style.display = state.minimized ? 'none' : 'block';
-      minimizeBtn.innerHTML = `<i class="fas fa-${state.minimized ? 'expand' : 'minus'}"></i>`;
-    });
-    
-    const autoRefreshCheckbox = panel.querySelector('#autoRefreshCheckbox');
-    autoRefreshCheckbox.addEventListener('change', () => {
-      state.autoRefresh = autoRefreshCheckbox.checked;
-    });
-    
-    window.addEventListener('beforeunload', () => {
-      state.menuOpen = false;
-    });
-  };
-
-  window.updateUI = (message, type = 'default') => {
-    const statusText = document.querySelector('#statusText');
-    if (statusText) {
-      statusText.textContent = message;
-      statusText.className = `wplace-status status-${type}`;
-      statusText.style.animation = 'none';
-      void statusText.offsetWidth;
-      statusText.style.animation = 'slideIn 0.3s ease-out';
-    }
-  };
-
-  window.updateStats = async () => {
-    await getCharge();
-    const statsArea = document.querySelector('#statsArea');
-    if (statsArea) {
-      const t = {
-        pt: {
-          user: "Usuário",
-          pixels: "Pixels",
-          charges: "Cargas",
-          level: "Level"
-        },
-        en: {
-          user: "User",
-          pixels: "Pixels",
-          charges: "Charges",
-          level: "Level"
-        }
-      }[state.language] || {
-        user: "User",
-        pixels: "Pixels",
-        charges: "Charges",
-        level: "Level"
-      };
-
-      statsArea.innerHTML = `
-        <div class="wplace-stat-item">
-          <div class="wplace-stat-label"><i class="fas fa-user"></i> ${t.user}</div>
-          <div>${state.userInfo.name}</div>
-        </div>
-        <div class="wplace-stat-item">
-          <div class="wplace-stat-label"><i class="fas fa-paint-brush"></i> ${t.pixels}</div>
-          <div>${state.paintedCount}</div>
-        </div>
-        <div class="wplace-stat-item">
-          <div class="wplace-stat-label"><i class="fas fa-bolt"></i> ${t.charges}</div>
-          <div>${Math.floor(state.charges.count)}/${Math.floor(state.charges.max)}</div>
-        </div>
-        <div class="wplace-stat-item">
-          <div class="wplace-stat-label"><i class="fas fa-star"></i> ${t.level}</div>
-          <div>${state.userInfo?.level || '0'}</div>
-        </div>
-      `;
-    }
-  };
-
-  await detectUserLocation();
-  createUI();
-  await getCharge();
-  updateStats();
-})();
diff --git a/Auto-Image.js b/Auto-Image.js
index 2f22e98..a50ace5 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -4493,12 +4493,7 @@
     }
 
     if (!statsContainer || !statsArea || !closeStatsBtn) {
-      console.error("Stats UI elements not found:", {
-        statsContainer: !!statsContainer,
-        statsArea: !!statsArea,
-        closeStatsBtn: !!closeStatsBtn,
-      })
-    }
+      // Note: base CSS now aligns with this layout: main panel at left:20px (width 280), stats at left:330px.
 
     const header = container.querySelector(".wplace-header")
 
diff --git a/auto-image-complete-styles.css b/auto-image-complete-styles.css
index 1f42eb4..9182f9d 100644
--- a/auto-image-complete-styles.css
+++ b/auto-image-complete-styles.css
@@ -1,338 +1,681 @@
-/* WPlace Auto-Image Bot - Complete CSS Styles */
-/* All styling separated from JavaScript */
+/* WPlace Auto-Image Bot - Unified CSS Styles (decoupled from JS)
+   Why: bring external CSS in-sync with the UI that Auto-Image.js renders,
+   fix layout (positions, widths, z-index), and ensure class names match JS
+   (e.g., .wplace-dragging) so buttons and panels behave correctly. */
 
-/* Main Container Base Styles */
+/* ========================= */
+/* Core animations (shared)  */
+/* ========================= */
+ @keyframes neonGlow {
+  0%,
+  100% {
+    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor,
+      0 0 15px currentColor;
+  }
+  50% {
+    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor,
+      0 0 8px currentColor;
+  }
+}
+
+ @keyframes pixelBlink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0.7;
+  }
+}
+
+ @keyframes scanline {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(400px);
+  }
+}
+
+ @keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
+  }
+}
+
+ @keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+ @keyframes slideDown {
+  from {
+    transform: translateX(-50%) translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
+}
+
+ @keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+/* ========================= */
+/* Main containers (fixed)   */
+/* Align with JS structure   */
+/* ========================= */
 #wplace-image-bot-container {
-  position: fixed !important;
-  top: 20px !important;
-  left: 20px !important;
-  z-index: 10000 !important;
-  max-width: 400px !important;
+  /* Why fixed sizes/positions: matches JS expectations and preserves two-panel layout */
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  width: 280px;
+  max-height: calc(100vh - 40px);
+  padding: 0;
+  z-index: 9998;
+  animation: slideIn 0.4s ease-out;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: all 0.3s ease;
+  user-select: none;
+  display: none; /* JS will set display: block inline when ready */
+}
+
+#wplace-image-bot-container.wplace-dragging {
+  transition: none;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
+    0 0 0 2px rgba(255, 255, 255, 0.2);
+  transform: scale(1.02);
+  z-index: 9999;
+}
+
+#wplace-image-bot-container.wplace-compact {
+  width: 240px;
+}
+
+#wplace-image-bot-container.wplace-minimized {
+  width: 200px;
+  height: auto;
+  overflow: hidden;
+}
+
+/* Stats container sits to the right of main (280 + 30 = 330) */
+#wplace-stats-container {
+  position: fixed;
+  top: 20px;
+  left: 330px;
+  width: 280px;
+  max-height: calc(100vh - 40px);
+  padding: 0;
+  z-index: 9997;
+  animation: slideIn 0.4s ease-out;
+  overflow-y: auto;
+  transition: all 0.3s ease;
+  user-select: none;
   display: none;
 }
 
-/* Stats Container Positioning */
-#wplace-stats-container {
-  position: fixed !important;
-  top: 60px !important;
-  right: 20px !important;
-  z-index: 10001 !important;
-  max-width: 350px !important;
-  display: none !important;
+#wplace-stats-container.wplace-dragging {
+  transition: none;
 }
 
-/* Resize Dialog Containers */
-.resize-container {
-  position: fixed !important;
-  top: 50% !important;
-  left: 50% !important;
-  transform: translate(-50%, -50%) !important;
-  z-index: 100000 !important;
-  max-width: 90vw !important;
-  max-height: 90vh !important;
-  display: none !important;
+/* Back-compat for legacy class (some earlier CSS used this) */
+.wplace-drag-active {
+  transition: none !important;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
+    0 0 0 2px rgba(255, 255, 255, 0.2) !important;
+  transform: scale(1.02) !important;
+  z-index: 9999 !important;
 }
 
-.resize-overlay {
-  position: fixed !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 100% !important;
-  height: 100% !important;
-  background: rgba(0, 0, 0, 0.8) !important;
-  z-index: 99999 !important;
-  display: none !important;
+/* ========================= */
+/* Header and content blocks */
+/* ========================= */
+.wplace-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: move;
+  user-select: none;
+  transition: background 0.2s ease;
+  position: relative;
+  z-index: 2;
+  padding: 8px 12px;
 }
 
-/* CSS Custom Properties for Dynamic Values */
-:root {
-  /* Default Theme Colors */
-  --wplace-primary: #000000;
-  --wplace-secondary: #111111;
-  --wplace-accent: #775ce3;
-  --wplace-text: #ffffff;
-  --wplace-success: #00ff00;
-  --wplace-error: #ff0000;
-  --wplace-warning: #ffa500;
-  
-  /* Layout Properties */
-  --wplace-border-width: 1px;
-  --wplace-border-style: solid;
-  --wplace-border-radius: 16px;
-  --wplace-padding: 16px;
-  
-  /* Animation Properties */
-  --wplace-glow-enabled: 0;
-  --wplace-pixel-blink-enabled: 0;
-  --wplace-scanline-enabled: 0;
-  
-  /* Overlay Properties */
-  --wplace-overlay-opacity: 0.6;
+.wplace-header-title {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
-/* Theme Variants */
-.theme-cyberpunk {
-  --wplace-primary: #0a0a0a;
-  --wplace-secondary: #1a1a2e;
-  --wplace-accent: #00ffff;
-  --wplace-text: #00ff00;
-  --wplace-glow-enabled: 1;
-  --wplace-pixel-blink-enabled: 1;
+.wplace-header-controls {
+  display: flex;
+  gap: 6px;
 }
 
-.theme-neon {
-  --wplace-primary: #0f0f23;
-  --wplace-secondary: #16213e;
-  --wplace-accent: #ff006e;
-  --wplace-text: #ffffff;
-  --wplace-glow-enabled: 1;
+.wplace-header-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+  background: rgba(255, 255, 255, 0.1);
+  color: inherit;
+  border: none;
+  border-radius: 4px;
+  width: 18px;
+  height: 18px;
+  font-size: 10px;
 }
 
-.theme-matrix {
-  --wplace-primary: #000000;
-  --wplace-secondary: #001100;
-  --wplace-accent: #00ff00;
-  --wplace-text: #00ff00;
-  --wplace-scanline-enabled: 1;
+.wplace-header-btn:hover {
+  transform: scale(1.1);
 }
 
-.theme-minimal {
-  --wplace-primary: #ffffff;
-  --wplace-secondary: #f5f5f5;
-  --wplace-accent: #007acc;
-  --wplace-text: #333333;
+.wplace-content {
+  display: block;
+  position: relative;
+  z-index: 2;
+  padding: 12px;
 }
 
-/* Base Animations */
-@keyframes neonGlow {
-  0%, 100% {
-    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
-  }
-  50% {
-    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor, 0 0 8px currentColor;
-  }
+.wplace-content.wplace-hidden {
+  display: none;
 }
 
-@keyframes pixelBlink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0.7; }
+/* Sections */
+.wplace-status-section {
+  margin-bottom: 12px;
+  padding: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-@keyframes scanline {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(400px); }
+.wplace-section {
+  margin-bottom: 12px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-@keyframes pulse {
-  0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
-  70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
+.wplace-section-title {
+  font-size: 11px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
 }
 
-@keyframes slideIn {
-  from { transform: translateY(-10px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
+/* ========================= */
+/* Controls and buttons      */
+/* ========================= */
+.wplace-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
-@keyframes slideDown {
-  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
-  to { transform: translateX(-50%) translateY(0); opacity: 1; }
+.wplace-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
 }
 
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
+.wplace-row.single {
+  grid-template-columns: 1fr;
 }
 
-/* Conditional Animations Based on Theme */
-.theme-cyberpunk .wplace-header,
-.theme-neon .wplace-header {
-  animation: neonGlow 2s ease-in-out infinite alternate;
+.wplace-btn {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: none;
 }
 
-.theme-cyberpunk .fas,
-.theme-cyberpunk .fa,
-.theme-neon .fas,
-.theme-neon .fa {
-  filter: drop-shadow(0 0 3px currentColor);
+.wplace-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  transition: left 0.5s;
 }
 
-.theme-cyberpunk .wplace-btn:hover:not(:disabled),
-.theme-cyberpunk .status-error,
-.theme-cyberpunk .wplace-progress-bar::after {
-  animation: pixelBlink 0.5s infinite;
+.wplace-btn:hover::before {
+  left: 100%;
 }
 
-.theme-matrix::before {
+.wplace-btn:hover:not(:disabled) {
+  box-shadow: 0 0 15px currentColor;
+}
+
+.wplace-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.wplace-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+.wplace-btn:disabled::before {
+  display: none;
+}
+
+.wplace-btn-overlay.active {
+  background: linear-gradient(135deg, #29b6f6 0%, #8e2de2 100%);
+  box-shadow: 0 0 15px #8e2de2;
+}
+
+/* ========================= */
+/* Stats and progress        */
+/* ========================= */
+.wplace-stats {
+  margin-bottom: 8px;
+}
+
+.wplace-stat-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 0;
+  font-size: 11px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.wplace-stat-item:last-child {
+  border-bottom: none;
+}
+
+.wplace-stat-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  opacity: 0.9;
+  font-size: 10px;
+}
+
+.wplace-stat-value {
+  font-weight: 600;
+}
+
+.wplace-colors-section {
+  margin-top: 10px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.wplace-stat-colors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16px, 1fr));
+  gap: 4px;
+  margin-top: 8px;
+  padding: 4px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  max-height: 80px;
+  overflow-y: auto;
+}
+
+.wplace-stat-color-swatch {
+  width: 16px;
+  height: 16px;
+  border-radius: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
+}
+
+/* Progress */
+.wplace-progress {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  margin: 8px 0;
+  height: 6px;
+}
+
+.wplace-progress-bar {
+  position: relative;
+  height: 6px;
+  transition: width 0.5s ease;
+}
+
+.wplace-progress-bar::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, var(--wplace-accent), transparent);
-  animation: scanline 3s linear infinite;
-  pointer-events: none;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  animation: shimmer 2s infinite;
 }
 
-/* Turnstile Container Styles */
-.wplace-turnstile-hidden {
-  position: fixed !important;
-  left: -99999px !important;
-  top: -99999px !important;
-  width: 1px !important;
-  height: 1px !important;
-  pointer-events: none !important;
-  opacity: 0 !important;
-  visibility: hidden !important;
-  z-index: -99999 !important;
-  overflow: hidden !important;
-}
-
-.wplace-turnstile-overlay {
-  position: fixed !important;
-  bottom: 20px !important;
-  right: 20px !important;
-  z-index: 99999 !important;
-  background: rgba(0,0,0,0.9) !important;
-  border-radius: 12px !important;
-  padding: 20px !important;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
-  backdrop-filter: blur(10px) !important;
-  border: 1px solid rgba(255,255,255,0.2) !important;
-  color: var(--wplace-text) !important;
-  font-family: "Segoe UI", sans-serif !important;
-  min-width: 300px !important;
-  max-width: 400px !important;
-}
-
-.wplace-turnstile-title {
-  font: 600 12px/1.3 "Segoe UI", sans-serif !important;
-  margin-bottom: 8px !important;
-  opacity: 0.9 !important;
-  color: var(--wplace-text) !important;
-}
-
-.wplace-turnstile-host {
-  width: 100% !important;
-  min-height: 70px !important;
-}
-
-.wplace-turnstile-hide-btn {
-  position: absolute !important;
-  top: 6px !important;
-  right: 6px !important;
-  font-size: 11px !important;
-  background: transparent !important;
-  color: var(--wplace-text) !important;
-  border: 1px solid rgba(255,255,255,0.2) !important;
-  border-radius: 6px !important;
-  padding: 2px 6px !important;
-  cursor: pointer !important;
-}
-
-.wplace-turnstile-hide-btn:hover {
-  background: rgba(255,255,255,0.1) !important;
-}
-
-/* Alert System */
-.wplace-alert {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 12px 20px;
-  border-radius: 8px;
-  color: white;
-  font-weight: 600;
-  z-index: 10001;
-  max-width: 400px;
+/* ========================= */
+/* Status blocks             */
+/* ========================= */
+.wplace-status {
   text-align: center;
-  animation: slideDown 0.3s ease-out;
+  position: relative;
+  overflow: hidden;
+  padding: 6px;
+  border: 1px solid;
+  border-radius: 8px;
+  font-size: 11px;
 }
 
-.wplace-alert-success {
-  background: linear-gradient(135deg, #4caf50, #66bb6a);
-  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+.status-default {
+  background: rgba(255, 255, 255, 0.1);
 }
 
-.wplace-alert-error {
-  background: linear-gradient(135deg, #f44336, #ef5350);
-  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
+.status-success {
+  background: rgba(0, 255, 0, 0.1);
+  box-shadow: 0 0 15px currentColor;
 }
 
-.wplace-alert-warning {
-  background: linear-gradient(135deg, #ff9800, #ffb74d);
-  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
+.status-error {
+  background: rgba(255, 0, 0, 0.1);
+  box-shadow: 0 0 15px currentColor;
 }
 
-.wplace-alert-info {
-  background: linear-gradient(135deg, #2196f3, #42a5f5);
-  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
+.status-warning {
+  background: rgba(255, 165, 0, 0.1);
+  box-shadow: 0 0 15px currentColor;
 }
 
-/* Settings Container */
-.wplace-settings-container {
+/* ========================= */
+/* Resize dialog             */
+/* ========================= */
+.resize-container {
+  display: none;
   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-accent);
-  border-radius: var(--wplace-border-radius);
-  padding: 0;
-  z-index: 100001;
-  display: none;
-  color: var(--wplace-text);
-  font-family: "Segoe UI", Roboto, sans-serif;
-  min-width: 400px;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
+  z-index: 10000;
+  width: 90%;
+  max-width: 700px;
+  max-height: 90%;
+  overflow: auto;
 }
 
-.wplace-settings-container.show {
-  display: block;
-  animation: slideIn 0.3s ease-out;
-}
-
-/* Settings Header */
-.wplace-settings-header {
-  background: var(--wplace-secondary);
-  padding: var(--wplace-padding);
-  border-bottom: 1px solid var(--wplace-accent);
+.resize-preview-wrapper {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.2);
+  margin: 15px 0;
+  height: 300px;
+  overflow: hidden;
+}
+
+.resize-canvas-stack {
+  position: relative;
+  transform-origin: center center;
+  display: inline-block;
+}
+
+.resize-base-canvas,
+.resize-mask-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+.resize-mask-canvas {
+  pointer-events: auto;
+}
+
+.resize-tools {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.resize-tools button {
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.06);
+  color: #fff;
+  cursor: pointer;
+}
+
+.wplace-btn.active,
+.wplace-btn[aria-pressed='true'] {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset,
+    0 0 6px rgba(0, 0, 0, 0.2) !important;
+}
+
+.mask-mode-group .wplace-btn.active,
+.mask-mode-group .wplace-btn[aria-pressed='true'] {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset,
+    0 0 6px rgba(0, 0, 0, 0.2);
+}
+
+.resize-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
   align-items: center;
 }
 
-.wplace-settings-title {
-  color: var(--wplace-accent);
-  font-size: 18px;
-  font-weight: 600;
+.resize-slider {
+  width: 100%;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.resize-zoom-controls {
+  grid-column: 1 / -1;
   display: flex;
   align-items: center;
   gap: 10px;
+  margin-top: 15px;
 }
 
-.wplace-settings-close {
-  background: none;
-  border: none;
-  color: var(--wplace-text);
-  font-size: 18px;
+.resize-buttons {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.resize-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: none;
+}
+
+/* ========================= */
+/* Color grid                */
+/* ========================= */
+.wplace-color-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  gap: 10px;
+  padding-top: 8px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.wplace-color-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.wplace-color-item-name {
+  font-size: 9px;
+  color: #ccc;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+.wplace-color-swatch {
+  width: 22px;
+  height: 22px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
   cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.2s;
+  transition: transform 0.1s ease, box-shadow 0.2s ease;
+  position: relative;
+  margin: 0 auto;
 }
 
-.wplace-settings-close:hover {
-  opacity: 1;
+.wplace-color-swatch.unavailable {
+  border-color: #666;
+  border-style: dashed;
+  cursor: not-allowed;
+}
+
+.wplace-color-swatch:hover {
+  transform: scale(1.1);
+  z-index: 1;
+}
+
+.wplace-color-swatch:not(.active) {
+  opacity: 0.3;
+  filter: grayscale(80%);
+}
+
+.wplace-color-swatch.unavailable:not(.active) {
+  opacity: 0.2;
+  filter: grayscale(90%);
+}
+
+.wplace-color-swatch.active::after {
+  content: '✔';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+  text-shadow: 0 0 3px black;
+}
+
+.wplace-color-divider {
+  border: none;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  margin: 8px 0;
+}
+
+/* ========================= */
+/* Cooldown controls         */
+/* ========================= */
+.wplace-cooldown-control {
+  margin-top: 8px;
+}
+
+.wplace-cooldown-control label {
+  font-size: 11px;
+  margin-bottom: 4px;
+  display: block;
+}
+
+.wplace-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.wplace-slider {
+  flex: 1;
+  -webkit-appearance: none;
+  appearance: none;
+  height: 4px;
+  background: #444;
+  border-radius: 2px;
+  outline: none;
+}
+
+.wplace-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+/* ========================= */
+/* Settings container (base) */
+/* ========================= */
+#wplace-settings-container {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10001;
+  min-width: 400px;
+  max-width: 500px;
 }
 
-/* Settings Content */
 .wplace-settings {
-  padding: var(--wplace-padding);
+  padding: 16px;
   max-height: 400px;
   overflow-y: auto;
 }
@@ -340,9 +683,6 @@
 .wplace-setting-section {
   margin-bottom: 20px;
   padding: 12px;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 8px;
 }
 
 .wplace-setting-title {
@@ -351,43 +691,36 @@
   margin-bottom: 12px;
   font-size: 14px;
   font-weight: 600;
-  color: var(--wplace-accent);
 }
 
 .wplace-setting-title i {
   margin-right: 8px;
 }
 
-/* Form Controls */
+/* ========================= */
+/* Form controls             */
+/* ========================= */
 .wplace-select {
   width: 100%;
   padding: 8px 12px;
   font-size: 14px;
   margin-bottom: 10px;
-  background: var(--wplace-secondary);
-  border: 1px solid var(--wplace-accent);
-  border-radius: 6px;
-  color: var(--wplace-text);
 }
 
 .wplace-select:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(119, 92, 227, 0.3);
 }
 
 .wplace-description {
   font-size: 12px;
   opacity: 0.8;
   line-height: 1.4;
-  color: var(--wplace-text);
 }
 
-/* Speed Controls */
+/* Speed controls */
 .wplace-speed-control {
   margin-top: 12px;
   padding: 12px;
-  background: rgba(255,255,255,0.03);
-  border-radius: 8px;
 }
 
 .wplace-speed-label {
@@ -396,7 +729,6 @@
   margin-bottom: 8px;
   font-size: 13px;
   font-weight: 600;
-  color: var(--wplace-text);
 }
 
 .wplace-speed-label i {
@@ -417,7 +749,6 @@
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
-  background: #444;
 }
 
 .wplace-speed-slider::-webkit-slider-thumb {
@@ -427,8 +758,7 @@
   height: 18px;
   border-radius: 50%;
   cursor: pointer;
-  border: 2px solid var(--wplace-accent);
-  background: var(--wplace-accent);
+  border: 2px solid;
 }
 
 .wplace-speed-slider::-moz-range-thumb {
@@ -436,8 +766,7 @@
   height: 18px;
   border-radius: 50%;
   cursor: pointer;
-  border: 2px solid var(--wplace-accent);
-  background: var(--wplace-accent);
+  border: 2px solid;
 }
 
 .wplace-speed-display {
@@ -446,194 +775,76 @@
   gap: 4px;
   min-width: 90px;
   justify-content: flex-end;
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-weight: 600;
-  background: var(--wplace-secondary);
-  color: var(--wplace-text);
 }
 
-.wplace-speed-unit {
-  font-size: 11px;
-  opacity: 0.8;
+/* ========================= */
+/* Turnstile overlay         */
+/* ========================= */
+/* Hidden invisible widget host (token generator) */
+.wplace-turnstile-hidden {
+  position: fixed !important;
+  left: -99999px !important;
+  top: -99999px !important;
+  width: 1px !important;
+  height: 1px !important;
+  pointer-events: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  z-index: -99999 !important;
+  overflow: hidden !important;
 }
 
-/* Theme Customization */
-.wplace-theme-custom {
-  margin-top: 15px;
-  padding: 15px;
-  background: rgba(255,255,255,0.03);
-  border-radius: 8px;
+/* Visible overlay (interactive fallback) */
+.wplace-turnstile-overlay {
+  position: fixed !important;
+  bottom: 20px !important;
+  right: 20px !important;
+  z-index: 99999 !important;
+  background: rgba(0, 0, 0, 0.9) !important;
+  border-radius: 12px !important;
+  padding: 20px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
+  backdrop-filter: blur(10px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  color: #fff !important;
+  font-family: 'Segoe UI', sans-serif !important;
+  min-width: 300px !important;
+  max-width: 400px !important;
 }
 
-.wplace-custom-group {
-  margin-bottom: 15px;
-}
-
-.wplace-custom-label {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--wplace-text);
-}
-
-.wplace-custom-label i {
-  margin-right: 8px;
-  width: 16px;
-}
-
-.wplace-color-input-group {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.wplace-color-input {
-  width: 50px;
-  height: 30px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  background: transparent;
-}
-
-.wplace-color-text {
-  flex: 1;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: monospace;
-  background: var(--wplace-secondary);
-  border: 1px solid var(--wplace-accent);
-  color: var(--wplace-text);
-}
-
-.wplace-animation-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.wplace-checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  cursor: pointer;
-  color: var(--wplace-text);
-}
-
-.wplace-custom-actions {
-  display: flex;
-  gap: 10px;
-  margin-top: 20px;
-  border-top: 1px solid rgba(255,255,255,0.1);
-  padding-top: 15px;
-}
-
-/* Overlay Styles */
-.wplace-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  z-index: 100002;
-  display: none;
-}
-
-.wplace-overlay.show {
-  display: block;
-}
-
-/* Overlay visibility classes */
-.wplace-overlay-hidden {
-  display: none !important;
-}
-
-.wplace-overlay-visible {
-  display: block !important;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .wplace-settings-container {
-    min-width: 90vw;
-    max-width: 90vw;
-    margin: 20px;
-  }
-  
-  .wplace-turnstile-overlay {
-    bottom: 10px !important;
-    right: 10px !important;
-    left: 10px !important;
-    min-width: auto !important;
-  }
-  
-  .wplace-alert {
-    max-width: 90vw;
-    margin: 0 5vw;
-  }
-}
-
-/* Dark/Light mode support */
-@media (prefers-color-scheme: light) {
-  .theme-auto {
-    --wplace-primary: #ffffff;
-    --wplace-secondary: #f5f5f5;
-    --wplace-accent: #007acc;
-    --wplace-text: #333333;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .theme-auto {
-    --wplace-primary: #1e1e1e;
-    --wplace-secondary: #2d2d30;
-    --wplace-accent: #775ce3;
-    --wplace-text: #ffffff;
-  }
-}
-
-/* =============================================== */
-/* EXTRACTED INLINE STYLES - PREVIOUSLY IN JS */
-/* =============================================== */
-
-/* Turnstile Overlay Styles - extracted from createTurnstileOverlay */
 .wplace-turnstile-title {
-  font: 600 12px/1.3 "Segoe UI", sans-serif;
-  margin-bottom: 8px;
-  opacity: 0.9;
-  color: var(--wplace-text, #ffffff);
+  font: 600 12px/1.3 'Segoe UI', sans-serif !important;
+  margin-bottom: 8px !important;
+  opacity: 0.9 !important;
+  color: #ffffff !important;
 }
 
 .wplace-turnstile-host {
-  width: 100%;
-  min-height: 70px;
+  width: 100% !important;
+  min-height: 70px !important;
 }
 
 .wplace-turnstile-hide-btn {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  font-size: 11px;
-  background: transparent;
-  color: var(--wplace-text, #ffffff);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 6px;
-  padding: 2px 6px;
-  cursor: pointer;
-  transition: background 0.2s ease;
+  position: absolute !important;
+  top: 6px !important;
+  right: 6px !important;
+  font-size: 11px !important;
+  background: transparent !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 6px !important;
+  padding: 2px 6px !important;
+  cursor: pointer !important;
+  transition: background 0.2s ease !important;
 }
 
 .wplace-turnstile-hide-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.1) !important;
 }
 
-/* Alert System Styles - extracted from showAlert */
+/* ========================= */
+/* Alert system (used by JS) */
+/* ========================= */
 .wplace-alert-base {
   position: fixed;
   top: 20px;
@@ -647,11 +858,10 @@
   max-width: 400px;
   text-align: center;
   animation: slideDown 0.3s ease-out;
-  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
   font-family: 'Segoe UI', sans-serif;
 }
 
-/* Alert type variants - extracted from showAlert colors object */
 .wplace-alert-info {
   background: linear-gradient(135deg, #3498db, #2980b9);
   box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
@@ -672,7 +882,84 @@
   box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
 }
 
-/* Settings Container Base Styles - extracted from showSettings */
+/* ========================= */
+/* Modal overlay helpers     */
+/* ========================= */
+.wplace-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 100002;
+  display: none;
+}
+
+.wplace-overlay.show {
+  display: block;
+}
+
+/* Overlay visibility helpers */
+.wplace-overlay-hidden {
+  display: none !important;
+}
+
+.wplace-overlay-visible {
+  display: block !important;
+}
+
+/* ========================= */
+/* Responsive tweaks         */
+/* ========================= */
+ @media (max-width: 768px) {
+  #wplace-image-bot-container {
+    left: 10px;
+    width: calc(100vw - 20px);
+    max-height: calc(100vh - 20px);
+  }
+
+  #wplace-stats-container {
+    display: none !important; /* hide secondary panel on small screens */
+  }
+
+  .wplace-alert-base {
+    max-width: 90vw;
+    margin: 0 5vw;
+  }
+
+  .wplace-turnstile-overlay {
+    bottom: 10px !important;
+    right: 10px !important;
+    left: 10px !important;
+    min-width: auto !important;
+  }
+}
+
+/* ========================= */
+/* Auto light/dark support   */
+/* ========================= */
+ @media (prefers-color-scheme: light) {
+  .theme-auto {
+    --wplace-primary: #ffffff;
+    --wplace-secondary: #f5f5f5;
+    --wplace-accent: #007acc;
+    --wplace-text: #333333;
+  }
+}
+
+ @media (prefers-color-scheme: dark) {
+  .theme-auto {
+    --wplace-primary: #1e1e1e;
+    --wplace-secondary: #2d2d30;
+    --wplace-accent: #775ce3;
+    --wplace-text: #ffffff;
+  }
+}
+
+/* ===================================== */
+/* Settings container variants (optional)*/
+/* ===================================== */
 .wplace-settings-container-base {
   position: fixed;
   top: 50%;
@@ -680,13 +967,13 @@
   transform: translate(-50%, -50%);
   z-index: 100001;
   display: none;
-  font-family: "Segoe UI", Roboto, sans-serif;
+  font-family: 'Segoe UI', Roboto, sans-serif;
   min-width: 400px;
   max-width: 500px;
   max-height: 80vh;
   overflow-y: auto;
   animation: slideIn 0.3s ease-out;
-  border: 1px solid var(--wplace-accent, rgba(255,255,255,0.1));
+  border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   padding: 0;
 }
@@ -695,63 +982,9 @@
   display: block;
 }
 
-/* Dynamic Theme Background Classes */
-.wplace-theme-classic {
-  background: linear-gradient(135deg, var(--wplace-primary, #000000) 0%, #1a1a1a 100%);
-}
-
-.wplace-theme-standard {
-  background: var(--wplace-primary, #000000);
-}
-
-/* Settings Container Theme Variations */
-.wplace-settings-cyberpunk {
-  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
-}
-
-.wplace-settings-neon {
-  background: linear-gradient(135deg, #0f0f23 0%, #16213e 50%, #240046 100%);
-}
-
-.wplace-settings-matrix {
-  background: linear-gradient(135deg, #000000 0%, #001100 50%, #002200 100%);
-}
-
-.wplace-settings-retro {
-  background: linear-gradient(135deg, #2c3e50 0%, #3498db 50%, #9b59b6 100%);
-}
-
-.wplace-settings-minimal {
-  background: linear-gradient(135deg, #ecf0f1 0%, #bdc3c7 100%);
-}
-
-.wplace-settings-synthwave {
-  background: linear-gradient(135deg, #1a0033 0%, #2d1b69 50%, #11998e 100%);
-}
-
-.wplace-settings-vapor {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-/* Color swatch states - extracted from updateColorGrid */
-.wplace-color-swatch.unavailable {
-  opacity: 0.4;
-  filter: grayscale(50%);
-}
-
-/* Stats container visibility - extracted from toggleStats */
-.wplace-stats-container.hidden {
-  display: none;
-}
-
-/* Additional utility classes for dynamic behavior */
-.wplace-drag-active {
-  transition: none !important;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
-  transform: scale(1.02) !important;
-  z-index: 9999 !important;
-}
-
+/* ===================================== */
+/* Utility styles                         */
+/* ===================================== */
 .wplace-paint-effect {
   animation: pulse 0.5s ease-out;
 }
@@ -760,37 +993,6 @@
   background: rgba(255, 0, 0, 0.4) !important;
 }
 
-/* Animation modifier classes for conditional application */
-.wplace-glow-animation .wplace-header {
-  animation: neonGlow 2s ease-in-out infinite alternate;
+.wplace-stats-container.hidden {
+  display: none;
 }
-
-.wplace-glow-animation .fas,
-.wplace-glow-animation .fa {
-  filter: drop-shadow(0 0 3px currentColor);
-}
-
-.wplace-blink-animation .wplace-btn:hover:not(:disabled) {
-  animation: pixelBlink 0.5s infinite;
-}
-
-.wplace-blink-animation .status-error {
-  animation: pixelBlink 0.5s infinite;
-}
-
-.wplace-blink-animation .wplace-progress-bar::after {
-  animation: pixelBlink 1s infinite;
-}
-
-.wplace-scanline-animation::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, var(--wplace-neon, #00ffff), transparent);
-  animation: scanline 3s linear infinite;
-  z-index: 1;
-  pointer-events: none;
-}
\ No newline at end of file

From 825a333d3359e597d6343c3e060532a6b80fc7e7 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 14:46:37 +0200
Subject: [PATCH 12/36] restore AutoFarm. it was deleted by accident

---
 Auto-Farm.js | 624 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 624 insertions(+)
 create mode 100644 Auto-Farm.js

diff --git a/Auto-Farm.js b/Auto-Farm.js
new file mode 100644
index 0000000..1a903bd
--- /dev/null
+++ b/Auto-Farm.js
@@ -0,0 +1,624 @@
+(async () => {
+  const CONFIG = {
+    START_X: 742,
+    START_Y: 1148,
+    PIXELS_PER_LINE: 100,
+    DELAY: 1000,
+    THEME: {
+      primary: '#000000',
+      secondary: '#111111',
+      accent: '#222222',
+      text: '#ffffff',
+      highlight: '#775ce3',
+      success: '#00ff00',
+      error: '#ff0000'
+    }
+  };
+
+  const state = {
+    running: false,
+    paintedCount: 0,
+    charges: { count: 0, max: 80, cooldownMs: 30000 },
+    userInfo: null,
+    lastPixel: null,
+    minimized: false,
+    menuOpen: false,
+    language: 'en',
+    autoRefresh: true,
+    pausedForManual: false
+  };
+
+  const sleep = ms => new Promise(r => setTimeout(r, ms));
+  const waitForSelector = async (selector, interval = 200, timeout = 5000) => {
+    const start = Date.now();
+    while (Date.now() - start < timeout) {
+      const el = document.querySelector(selector);
+      if (el) return el;
+      await sleep(interval);
+    }
+    return null;
+  };
+
+  const originalFetch = window.fetch;
+  let capturedCaptchaToken = null;
+  window.fetch = async (url, options = {}) => {
+    if (typeof url === 'string' && url.includes('https://backend.wplace.live/s0/pixel/')) {
+      try {
+        const payload = JSON.parse(options.body || '{}');
+        if (payload.t) {
+          console.log('✅ CAPTCHA Token Captured:', payload.t);
+          capturedCaptchaToken = payload.t;
+          if (state.pausedForManual) {
+            state.pausedForManual = false;
+            state.running = true;
+            updateUI(
+              state.language === 'pt' ? '🚀 Pintura reiniciada!' : '🚀 Farm resumed!',
+              'success'
+            );
+            paintLoop();
+          }
+        }
+      } catch (e) {
+      }
+    }
+    return originalFetch(url, options);
+  };
+
+  const fetchAPI = async (url, options = {}) => {
+    try {
+      const res = await fetch(url, {
+        credentials: 'include',
+        ...options
+      });
+      return await res.json();
+    } catch (e) {
+      return null;
+    }
+  };
+
+  const getRandomPosition = () => ({
+    x: Math.floor(Math.random() * CONFIG.PIXELS_PER_LINE),
+    y: Math.floor(Math.random() * CONFIG.PIXELS_PER_LINE)
+  });
+
+  const paintPixel = async (x, y) => {
+    const randomColor = Math.floor(Math.random() * 31) + 1;
+    const url = `https://backend.wplace.live/s0/pixel/${CONFIG.START_X}/${CONFIG.START_Y}`;
+    const payload = JSON.stringify({ coords: [x, y], colors: [randomColor], t: capturedCaptchaToken });
+    try {
+      const res = await originalFetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'text/plain;charset=UTF-8' },
+        credentials: 'include',
+        body: payload
+      });
+      if (res.status === 403) {
+        console.error('❌ 403 Forbidden. CAPTCHA token might be invalid or expired.');
+        capturedCaptchaToken = null;
+        stoppedForToken = true;
+        return 'token_error';
+      }
+      const data = await res.json();
+      return data;
+    } catch (e) {
+      return null;
+    }
+  };
+
+  const getCharge = async () => {
+    const data = await fetchAPI('https://backend.wplace.live/me');
+    if (data) {
+      state.userInfo = data;
+      state.charges = {
+        count: Math.floor(data.charges.count),
+        max: Math.floor(data.charges.max),
+        cooldownMs: data.charges.cooldownMs
+      };
+      if (state.userInfo.level) {
+        state.userInfo.level = Math.floor(state.userInfo.level);
+      }
+    }
+    return state.charges;
+  };
+
+  const detectUserLocation = async () => {
+    try {
+      const response = await fetch('https://ipapi.co/json/');
+      const data = await response.json();
+      if (data.country === 'BR') {
+        state.language = 'pt';
+      } else if (data.country === 'US') {
+        state.language = 'en';
+      } else {
+        state.language = 'en';
+      }
+    } catch {
+      state.language = 'en';
+    }
+  };
+
+  const paintLoop = async () => {
+    while (state.running) {
+      const { count, cooldownMs } = state.charges;
+      
+      if (count < 1) {
+        updateUI(state.language === 'pt' ? `⌛ Sem cargas. Esperando ${Math.ceil(cooldownMs/1000)}s...` : `⌛ No charges. Waiting ${Math.ceil(cooldownMs/1000)}s...`, 'status');
+        await sleep(cooldownMs);
+        await getCharge();
+        continue;
+      }
+
+      const randomPos = getRandomPosition();
+      const paintResult = await paintPixel(randomPos.x, randomPos.y);
+      if (paintResult === 'token_error') {
+        if (state.autoRefresh) {
+          await getCharge();
+          if (state.charges.count < 2) {
+            if (!state.pausedForManual) {
+              updateUI(
+                state.language === 'pt'
+                  ? '⚡ Aguardando pelo menos 2 cargas para auto-refresh...'
+                  : 'Waiting for at least 2 charges for auto-refresh...',
+                'status'
+              );
+              state.pausedForManual = true;
+            }
+            while (state.charges.count < 2) {
+              await sleep(60000);
+              await getCharge();
+              updateStats();
+            }
+            state.pausedForManual = false;
+          }
+          updateUI(
+            state.language === 'pt'
+              ? '❌ Token expirado. Aguardando elemento Paint...'
+              : '❌ CAPTCHA token expired. Waiting for Paint button...',
+            'error'
+          );
+          const mainPaintBtn = await waitForSelector('button.btn.btn-primary.btn-lg, button.btn-primary.sm\\:btn-xl');
+          if (mainPaintBtn) mainPaintBtn.click();
+          await sleep(500);
+          updateUI(
+            state.language === 'pt' ? 'Selecionando transparente...' : 'Selecting transparent...',
+            'status'
+          );
+          const transBtn = await waitForSelector('button#color-0');
+          if (transBtn) transBtn.click();
+          await sleep(500);
+          const canvas = await waitForSelector('canvas');
+          if (canvas) {
+            canvas.setAttribute('tabindex', '0');
+            canvas.focus();
+            const rect = canvas.getBoundingClientRect();
+            const centerX = Math.round(rect.left + rect.width / 2);
+            const centerY = Math.round(rect.top + rect.height / 2);
+            const moveEvt = new MouseEvent('mousemove', {
+              clientX: centerX,
+              clientY: centerY,
+              bubbles: true
+            });
+            canvas.dispatchEvent(moveEvt);
+            const keyDown = new KeyboardEvent('keydown', { key: ' ', code: 'Space', bubbles: true });
+            const keyUp = new KeyboardEvent('keyup', { key: ' ', code: 'Space', bubbles: true });
+            canvas.dispatchEvent(keyDown);
+            canvas.dispatchEvent(keyUp);
+          }
+          await sleep(500);
+          updateUI(
+            state.language === 'pt' ? 'Confirmando pintura...' : 'Confirming paint...',
+            'status'
+          );
+          let confirmBtn = await waitForSelector(
+            'button.btn.btn-primary.btn-lg, button.btn.btn-primary.sm\\:btn-xl'
+          );
+          if (!confirmBtn) {
+            const allPrimary = Array.from(document.querySelectorAll('button.btn-primary'));
+            confirmBtn = allPrimary.length ? allPrimary[allPrimary.length - 1] : null;
+          }
+          confirmBtn?.click();
+        } else {
+          // insufficient charges or auto-refresh disabled
+          if (state.autoRefresh && state.charges.count < 2) {
+            updateUI(
+              state.language === 'pt'
+                ? '⚡ Cargas insuficientes para auto-refresh. Por favor, clique manualmente.'
+                : 'Insufficient charges for auto-refresh. Please click manually.',
+              'error'
+            );
+          }
+          if (!state.pausedForManual) {
+            updateUI(
+              state.language === 'pt'
+                ? 'Auto-refresh desativado. Por favor, clique no botão pintura manualmente.'
+                : 'Auto-refresh disabled. Please click the Paint button manually.',
+              'status'
+            );
+            state.pausedForManual = true;
+          }
+          state.running = false;
+          return;
+        }
+        await sleep(1000);
+        continue;
+      }
+      
+      if (paintResult?.painted === 1) {
+        state.paintedCount++;
+        state.lastPixel = { 
+          x: CONFIG.START_X + randomPos.x,
+          y: CONFIG.START_Y + randomPos.y,
+          time: new Date() 
+        };
+        state.charges.count--;
+        
+        document.getElementById('paintEffect').style.animation = 'pulse 0.5s';
+        setTimeout(() => {
+          document.getElementById('paintEffect').style.animation = '';
+        }, 500);
+        
+        updateUI(state.language === 'pt' ? '✅ Pixel pintado!' : '✅ Pixel painted!', 'success');
+      } else {
+        updateUI(state.language === 'pt' ? '❌ Falha ao pintar' : '❌ Failed to paint', 'error');
+      }
+
+      await sleep(CONFIG.DELAY);
+      updateStats();
+    }
+  };
+
+  const createUI = () => {
+    if (state.menuOpen) return;
+    state.menuOpen = true;
+
+    const fontAwesome = document.createElement('link');
+    fontAwesome.rel = 'stylesheet';
+    fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
+    document.head.appendChild(fontAwesome);
+
+    const style = document.createElement('style');
+    style.textContent = `
+      @keyframes pulse {
+        0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }n
+        70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
+        100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
+      }
+      @keyframes slideIn {
+        from { transform: translateY(20px); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+      .wplace-bot-panel {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        width: 250px;
+        background: ${CONFIG.THEME.primary};
+        border: 1px solid ${CONFIG.THEME.accent};
+        border-radius: 8px;
+        padding: 0;
+        box-shadow: 0 5px 15px rgba(0,0,0,0.5);
+        z-index: 9999;
+        font-family: 'Segoe UI', Roboto, sans-serif;
+        color: ${CONFIG.THEME.text};
+        animation: slideIn 0.4s ease-out;
+        overflow: hidden;
+      }
+      .wplace-header {
+        padding: 12px 15px;
+        background: ${CONFIG.THEME.secondary};
+        color: ${CONFIG.THEME.highlight};
+        font-size: 16px;
+        font-weight: 600;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        cursor: move;
+        user-select: none;
+      }
+      .wplace-header-title {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .wplace-header-controls {
+        display: flex;
+        gap: 10px;
+      }
+      .wplace-header-btn {
+        background: none;
+        border: none;
+        color: ${CONFIG.THEME.text};
+        cursor: pointer;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+      }
+      .wplace-header-btn:hover {
+        opacity: 1;
+      }
+      .wplace-content {
+        padding: 15px;
+        display: ${state.minimized ? 'none' : 'block'};
+      }
+      .wplace-controls {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 15px;
+      }
+      .wplace-btn {
+        flex: 1;
+        padding: 10px;
+        border: none;
+        border-radius: 6px;
+        font-weight: 600;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        transition: all 0.2s;
+      }
+      .wplace-btn:hover {
+        transform: translateY(-2px);
+      }
+      .wplace-btn-primary {
+        background: ${CONFIG.THEME.accent};
+        color: white;
+      }
+      .wplace-btn-stop {
+        background: ${CONFIG.THEME.error};
+        color: white;
+      }
+      .wplace-stats {
+        background: ${CONFIG.THEME.secondary};
+        padding: 12px;
+        border-radius: 6px;
+        margin-bottom: 15px;
+      }
+      .wplace-stat-item {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 0;
+        font-size: 14px;
+      }
+      .wplace-stat-label {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        opacity: 0.8;
+      }
+      .wplace-status {
+        padding: 8px;
+        border-radius: 4px;
+        text-align: center;
+        font-size: 13px;
+      }
+      .status-default {
+        background: rgba(255,255,255,0.1);
+      }
+      .status-success {
+        background: rgba(0, 255, 0, 0.1);
+        color: ${CONFIG.THEME.success};
+      }
+      .status-error {
+        background: rgba(255, 0, 0, 0.1);
+        color: ${CONFIG.THEME.error};
+      }
+      #paintEffect {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        border-radius: 8px;
+      }
+    `;
+    document.head.appendChild(style);
+
+    const translations = {
+      pt: {
+        title: "WPlace Auto-Farm",
+        start: "Iniciar",
+        stop: "Parar",
+        ready: "Pronto para começar",
+        user: "Usuário",
+        pixels: "Pixels",
+        charges: "Cargas",
+        level: "Level"
+      },
+      en: {
+        title: "WPlace Auto-Farm",
+        start: "Start",
+        stop: "Stop",
+        ready: "Ready to start",
+        user: "User",
+        pixels: "Pixels",
+        charges: "Charges",
+        level: "Level"
+      }
+    };
+
+    const t = translations[state.language] || translations.en;
+
+    const panel = document.createElement('div');
+    panel.className = 'wplace-bot-panel';
+    panel.innerHTML = `
+      <div id="paintEffect"></div>
+      <div class="wplace-header">
+        <div class="wplace-header-title">
+          <i class="fas fa-paint-brush"></i>
+          <span>${t.title}</span>
+        </div>
+        <div class="wplace-header-controls">
+          <button id="minimizeBtn" class="wplace-header-btn" title="${state.language === 'pt' ? 'Minimizar' : 'Minimize'}">
+            <i class="fas fa-${state.minimized ? 'expand' : 'minus'}"></i>
+          </button>
+        </div>
+      </div>
+      <div class="wplace-content">
+        <div class="wplace-controls">
+          <button id="toggleBtn" class="wplace-btn wplace-btn-primary">
+            <i class="fas fa-play"></i>
+            <span>${t.start}</span>
+          </button>
+          <label style="display:flex; align-items:center; margin-left:10px;">
+            <input type="checkbox" id="autoRefreshCheckbox" ${state.autoRefresh ? 'checked' : ''}/>
+            <span style="margin-left:4px; font-size:14px;">Auto Refresh</span>
+          </label>
+        </div>
+        
+        <div class="wplace-stats">
+          <div id="statsArea">
+            <div class="wplace-stat-item">
+              <div class="wplace-stat-label"><i class="fas fa-paint-brush"></i> ${state.language === 'pt' ? 'Carregando...' : 'Loading...'}</div>
+            </div>
+          </div>
+        </div>
+        
+        <div id="statusText" class="wplace-status status-default">
+          ${t.ready}
+        </div>
+      </div>
+    `;
+    
+    document.body.appendChild(panel);
+    
+    const header = panel.querySelector('.wplace-header');
+    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+    
+    header.onmousedown = dragMouseDown;
+    
+    function dragMouseDown(e) {
+      if (e.target.closest('.wplace-header-btn')) return;
+      
+      e = e || window.event;
+      e.preventDefault();
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+      document.onmouseup = closeDragElement;
+      document.onmousemove = elementDrag;
+    }
+    
+    function elementDrag(e) {
+      e = e || window.event;
+      e.preventDefault();
+      pos1 = pos3 - e.clientX;
+      pos2 = pos4 - e.clientY;
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+      panel.style.top = (panel.offsetTop - pos2) + "px";
+      panel.style.left = (panel.offsetLeft - pos1) + "px";
+    }
+    
+    function closeDragElement() {
+      document.onmouseup = null;
+      document.onmousemove = null;
+    }
+    
+    const toggleBtn = panel.querySelector('#toggleBtn');
+    const minimizeBtn = panel.querySelector('#minimizeBtn');
+    const statusText = panel.querySelector('#statusText');
+    const content = panel.querySelector('.wplace-content');
+    const statsArea = panel.querySelector('#statsArea');
+    
+    toggleBtn.addEventListener('click', () => {
+      state.running = !state.running;
+      
+      if (state.running && !capturedCaptchaToken) {
+        updateUI(state.language === 'pt' ? '❌ Token não capturado. Clique em qualquer pixel primeiro.' : '❌ CAPTCHA token not captured. Please click any pixel manually first.', 'error');
+        state.running = false;
+        return;
+      }
+  
+      if (state.running) {
+        toggleBtn.innerHTML = `<i class="fas fa-stop"></i> <span>${t.stop}</span>`;
+        toggleBtn.classList.remove('wplace-btn-primary');
+        toggleBtn.classList.add('wplace-btn-stop');
+        updateUI(state.language === 'pt' ? '🚀 Pintura iniciada!' : '🚀 Painting started!', 'success');
+        paintLoop();
+      } else {
+        toggleBtn.innerHTML = `<i class="fas fa-play"></i> <span>${t.start}</span>`;
+        toggleBtn.classList.add('wplace-btn-primary');
+        toggleBtn.classList.remove('wplace-btn-stop');
+        statsArea.innerHTML = '';
+        updateUI(state.language === 'pt' ? '⏹️ Parado' : '⏹️ Stopped', 'default');
+      }
+    });
+    
+    minimizeBtn.addEventListener('click', () => {
+      state.minimized = !state.minimized;
+      content.style.display = state.minimized ? 'none' : 'block';
+      minimizeBtn.innerHTML = `<i class="fas fa-${state.minimized ? 'expand' : 'minus'}"></i>`;
+    });
+    
+    const autoRefreshCheckbox = panel.querySelector('#autoRefreshCheckbox');
+    autoRefreshCheckbox.addEventListener('change', () => {
+      state.autoRefresh = autoRefreshCheckbox.checked;
+    });
+    
+    window.addEventListener('beforeunload', () => {
+      state.menuOpen = false;
+    });
+  };
+
+  window.updateUI = (message, type = 'default') => {
+    const statusText = document.querySelector('#statusText');
+    if (statusText) {
+      statusText.textContent = message;
+      statusText.className = `wplace-status status-${type}`;
+      statusText.style.animation = 'none';
+      void statusText.offsetWidth;
+      statusText.style.animation = 'slideIn 0.3s ease-out';
+    }
+  };
+
+  window.updateStats = async () => {
+    await getCharge();
+    const statsArea = document.querySelector('#statsArea');
+    if (statsArea) {
+      const t = {
+        pt: {
+          user: "Usuário",
+          pixels: "Pixels",
+          charges: "Cargas",
+          level: "Level"
+        },
+        en: {
+          user: "User",
+          pixels: "Pixels",
+          charges: "Charges",
+          level: "Level"
+        }
+      }[state.language] || {
+        user: "User",
+        pixels: "Pixels",
+        charges: "Charges",
+        level: "Level"
+      };
+
+      statsArea.innerHTML = `
+        <div class="wplace-stat-item">
+          <div class="wplace-stat-label"><i class="fas fa-user"></i> ${t.user}</div>
+          <div>${state.userInfo.name}</div>
+        </div>
+        <div class="wplace-stat-item">
+          <div class="wplace-stat-label"><i class="fas fa-paint-brush"></i> ${t.pixels}</div>
+          <div>${state.paintedCount}</div>
+        </div>
+        <div class="wplace-stat-item">
+          <div class="wplace-stat-label"><i class="fas fa-bolt"></i> ${t.charges}</div>
+          <div>${Math.floor(state.charges.count)}/${Math.floor(state.charges.max)}</div>
+        </div>
+        <div class="wplace-stat-item">
+          <div class="wplace-stat-label"><i class="fas fa-star"></i> ${t.level}</div>
+          <div>${state.userInfo?.level || '0'}</div>
+        </div>
+      `;
+    }
+  };
+
+  await detectUserLocation();
+  createUI();
+  await getCharge();
+  updateStats();
+})();

From 213b32c61b2635f4ffdbfb5ca304b38051242239 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 14:57:19 +0200
Subject: [PATCH 13/36] syntax error

---
 Auto-Image.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Auto-Image.js b/Auto-Image.js
index a50ace5..fcd2120 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -4494,6 +4494,7 @@
 
     if (!statsContainer || !statsArea || !closeStatsBtn) {
       // Note: base CSS now aligns with this layout: main panel at left:20px (width 280), stats at left:330px.
+    }
 
     const header = container.querySelector(".wplace-header")
 

From 85b16ebe34997aeb8b27478119d080987bbc96a8 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 15:01:44 +0200
Subject: [PATCH 14/36] fix: Refactor settings container visibility logic to
 use class-based toggling

---
 Auto-Image.js | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index fcd2120..8f5097d 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -4620,32 +4620,32 @@
 
     if (settingsBtn && closeSettingsBtn && applySettingsBtn) {
       settingsBtn.addEventListener("click", () => {
-        const isVisible = settingsContainer.style.display !== "none"
+        const isVisible = settingsContainer.classList.contains("show");
         if (isVisible) {
-          settingsContainer.style.animation = "settingsFadeOut 0.3s ease-out forwards"
+          settingsContainer.style.animation = "settingsFadeOut 0.3s ease-out forwards";
+          settingsContainer.classList.remove("show");
           setTimeout(() => {
-            settingsContainer.style.display = "none"
-            settingsContainer.style.animation = ""
-          }, 300)
+            settingsContainer.style.animation = "";
+          }, 300);
         } else {
-          settingsContainer.style.top = "50%"
-          settingsContainer.style.left = "50%"
-          settingsContainer.style.transform = "translate(-50%, -50%)"
-          settingsContainer.style.display = "block"
-          settingsContainer.style.animation = "settingsSlideIn 0.4s ease-out"
+          settingsContainer.style.top = "50%";
+          settingsContainer.style.left = "50%";
+          settingsContainer.style.transform = "translate(-50%, -50%)";
+          settingsContainer.classList.add("show");
+          settingsContainer.style.animation = "settingsSlideIn 0.4s ease-out";
         }
       })
 
       closeSettingsBtn.addEventListener("click", () => {
-        settingsContainer.style.animation = "settingsFadeOut 0.3s ease-out forwards"
+        settingsContainer.style.animation = "settingsFadeOut 0.3s ease-out forwards";
+        settingsContainer.classList.remove("show");
         setTimeout(() => {
-          settingsContainer.style.display = "none"
-          settingsContainer.style.animation = ""
-          settingsContainer.style.top = "50%"
-          settingsContainer.style.left = "50%"
-          settingsContainer.style.transform = "translate(-50%, -50%)"
-        }, 300)
-      })
+          settingsContainer.style.animation = "";
+          settingsContainer.style.top = "50%";
+          settingsContainer.style.left = "50%";
+          settingsContainer.style.transform = "translate(-50%, -50%)";
+        }, 300);
+      });
 
       applySettingsBtn.addEventListener("click", () => {
         // Sync advanced settings before save

From 3760449cf53f8dd503b9c8403eadc4b5f6221f33 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 15:11:48 +0200
Subject: [PATCH 15/36] fix: Turnstile overlay and logging improvements

---
 Auto-Image.js | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 8f5097d..152dbf1 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -1843,6 +1843,7 @@
           }
           
           const overlay = this.ensureTurnstileOverlayContainer();
+          overlay.classList.remove('wplace-overlay-hidden');
           overlay.style.display = 'block';
           
           const host = overlay.querySelector('#turnstile-overlay-host');
@@ -1851,6 +1852,7 @@
           // Set a timeout for interactive mode
           const timeout = setTimeout(() => {
             console.warn('⏰ Interactive Turnstile widget timeout');
+            overlay.classList.add('wplace-overlay-hidden');
             overlay.style.display = 'none';
             resolve(null);
           }, 60000); // 60 seconds for user interaction
@@ -1862,7 +1864,8 @@
             theme: 'light',
             callback: (token) => {
               clearTimeout(timeout);
-              overlay.style.display = 'none';
+              overlay.classList.add('wplace-overlay-hidden');
+            overlay.style.display = 'none';
               console.log('✅ Interactive Turnstile completed successfully');
               
               if (typeof token === 'string' && token.length > 20) {
@@ -1874,7 +1877,8 @@
             },
             'error-callback': (error) => {
               clearTimeout(timeout);
-              overlay.style.display = 'none';
+              overlay.classList.add('wplace-overlay-hidden');
+            overlay.style.display = 'none';
               console.warn('❌ Interactive Turnstile error:', error);
               resolve(null);
             },
@@ -1885,6 +1889,7 @@
           
           if (!widgetId) {
             clearTimeout(timeout);
+            overlay.classList.add('wplace-overlay-hidden');
             overlay.style.display = 'none';
             console.warn('❌ Failed to create interactive Turnstile widget');
             resolve(null);
@@ -6879,31 +6884,27 @@
     try {
       console.log("🔧 Initializing Turnstile token generator...");
       updateUI("initializingToken", "default");
-      
-      // Pre-load Turnstile script first to avoid delays later
+
+      console.log("Attempting to load Turnstile script...");
       await Utils.loadTurnstile();
-      
+      console.log("Turnstile script loaded. Attempting to generate token...");
+
       const token = await handleCaptchaWithRetry();
       if (token) {
         setTurnstileToken(token);
         console.log("✅ Startup token generated successfully");
         updateUI("tokenReady", "success");
         Utils.showAlert("🔑 Token generator ready!", "success");
-        enableFileOperations(); // Enable file operations since initial setup is complete
+        enableFileOperations();
       } else {
-        console.warn("⚠️ Startup token generation failed, will retry when needed");
+        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.warn("⚠️ Startup token generation failed:", 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
     }
   }
 

From a19a3824f06fc67f0e792daab71d5810d219d193 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 15:28:00 +0200
Subject: [PATCH 16/36] update css files and urls

---
 Auto-Image.js                  |   2 +-
 auto-image-complete-styles.css | 998 ---------------------------------
 auto-image-styles.css          | 581 +++++++++++++------
 3 files changed, 416 insertions(+), 1165 deletions(-)
 delete mode 100644 auto-image-complete-styles.css

diff --git a/Auto-Image.js b/Auto-Image.js
index 152dbf1..cc3bbdb 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3239,7 +3239,7 @@
     // Link external CSS files
     const cssLink = document.createElement('link');
     cssLink.rel = 'stylesheet';
-    cssLink.href = 'https://staninna.github.io/WPlace-AutoBOT/auto-image-complete-styles.css';  // TODO: Before merge change to https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBOT/refs/heads/main/auto-image-styles.css
+    cssLink.href = 'https://staninna.github.io/WPlace-AutoBOT/auto-image-styles.css'; // TODO: Before merge change to https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBOT/refs/heads/main/auto-image-styles.css
     cssLink.setAttribute('data-wplace-theme', 'true');
     document.head.appendChild(cssLink);
 
diff --git a/auto-image-complete-styles.css b/auto-image-complete-styles.css
deleted file mode 100644
index 9182f9d..0000000
--- a/auto-image-complete-styles.css
+++ /dev/null
@@ -1,998 +0,0 @@
-/* WPlace Auto-Image Bot - Unified CSS Styles (decoupled from JS)
-   Why: bring external CSS in-sync with the UI that Auto-Image.js renders,
-   fix layout (positions, widths, z-index), and ensure class names match JS
-   (e.g., .wplace-dragging) so buttons and panels behave correctly. */
-
-/* ========================= */
-/* Core animations (shared)  */
-/* ========================= */
- @keyframes neonGlow {
-  0%,
-  100% {
-    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor,
-      0 0 15px currentColor;
-  }
-  50% {
-    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor,
-      0 0 8px currentColor;
-  }
-}
-
- @keyframes pixelBlink {
-  0%,
-  50% {
-    opacity: 1;
-  }
-  51%,
-  100% {
-    opacity: 0.7;
-  }
-}
-
- @keyframes scanline {
-  0% {
-    transform: translateY(-100%);
-  }
-  100% {
-    transform: translateY(400px);
-  }
-}
-
- @keyframes pulse {
-  0% {
-    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
-  }
-}
-
- @keyframes slideIn {
-  from {
-    transform: translateY(-10px);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
- @keyframes slideDown {
-  from {
-    transform: translateX(-50%) translateY(-20px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(-50%) translateY(0);
-    opacity: 1;
-  }
-}
-
- @keyframes shimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}
-
-/* ========================= */
-/* Main containers (fixed)   */
-/* Align with JS structure   */
-/* ========================= */
-#wplace-image-bot-container {
-  /* Why fixed sizes/positions: matches JS expectations and preserves two-panel layout */
-  position: fixed;
-  top: 20px;
-  left: 20px;
-  width: 280px;
-  max-height: calc(100vh - 40px);
-  padding: 0;
-  z-index: 9998;
-  animation: slideIn 0.4s ease-out;
-  overflow-y: auto;
-  overflow-x: hidden;
-  transition: all 0.3s ease;
-  user-select: none;
-  display: none; /* JS will set display: block inline when ready */
-}
-
-#wplace-image-bot-container.wplace-dragging {
-  transition: none;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
-    0 0 0 2px rgba(255, 255, 255, 0.2);
-  transform: scale(1.02);
-  z-index: 9999;
-}
-
-#wplace-image-bot-container.wplace-compact {
-  width: 240px;
-}
-
-#wplace-image-bot-container.wplace-minimized {
-  width: 200px;
-  height: auto;
-  overflow: hidden;
-}
-
-/* Stats container sits to the right of main (280 + 30 = 330) */
-#wplace-stats-container {
-  position: fixed;
-  top: 20px;
-  left: 330px;
-  width: 280px;
-  max-height: calc(100vh - 40px);
-  padding: 0;
-  z-index: 9997;
-  animation: slideIn 0.4s ease-out;
-  overflow-y: auto;
-  transition: all 0.3s ease;
-  user-select: none;
-  display: none;
-}
-
-#wplace-stats-container.wplace-dragging {
-  transition: none;
-}
-
-/* Back-compat for legacy class (some earlier CSS used this) */
-.wplace-drag-active {
-  transition: none !important;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
-    0 0 0 2px rgba(255, 255, 255, 0.2) !important;
-  transform: scale(1.02) !important;
-  z-index: 9999 !important;
-}
-
-/* ========================= */
-/* Header and content blocks */
-/* ========================= */
-.wplace-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  cursor: move;
-  user-select: none;
-  transition: background 0.2s ease;
-  position: relative;
-  z-index: 2;
-  padding: 8px 12px;
-}
-
-.wplace-header-title {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.wplace-header-controls {
-  display: flex;
-  gap: 6px;
-}
-
-.wplace-header-btn {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s;
-  background: rgba(255, 255, 255, 0.1);
-  color: inherit;
-  border: none;
-  border-radius: 4px;
-  width: 18px;
-  height: 18px;
-  font-size: 10px;
-}
-
-.wplace-header-btn:hover {
-  transform: scale(1.1);
-}
-
-.wplace-content {
-  display: block;
-  position: relative;
-  z-index: 2;
-  padding: 12px;
-}
-
-.wplace-content.wplace-hidden {
-  display: none;
-}
-
-/* Sections */
-.wplace-status-section {
-  margin-bottom: 12px;
-  padding: 8px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.wplace-section {
-  margin-bottom: 12px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.wplace-section-title {
-  font-size: 11px;
-  font-weight: 600;
-  margin-bottom: 8px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-/* ========================= */
-/* Controls and buttons      */
-/* ========================= */
-.wplace-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.wplace-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-}
-
-.wplace-row.single {
-  grid-template-columns: 1fr;
-}
-
-.wplace-btn {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-  position: relative;
-  overflow: hidden;
-  padding: 8px 12px;
-  border-radius: 8px;
-  border: none;
-}
-
-.wplace-btn::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.2),
-    transparent
-  );
-  transition: left 0.5s;
-}
-
-.wplace-btn:hover::before {
-  left: 100%;
-}
-
-.wplace-btn:hover:not(:disabled) {
-  box-shadow: 0 0 15px currentColor;
-}
-
-.wplace-btn:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-.wplace-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-.wplace-btn:disabled::before {
-  display: none;
-}
-
-.wplace-btn-overlay.active {
-  background: linear-gradient(135deg, #29b6f6 0%, #8e2de2 100%);
-  box-shadow: 0 0 15px #8e2de2;
-}
-
-/* ========================= */
-/* Stats and progress        */
-/* ========================= */
-.wplace-stats {
-  margin-bottom: 8px;
-}
-
-.wplace-stat-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 4px 0;
-  font-size: 11px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.wplace-stat-item:last-child {
-  border-bottom: none;
-}
-
-.wplace-stat-label {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  opacity: 0.9;
-  font-size: 10px;
-}
-
-.wplace-stat-value {
-  font-weight: 600;
-}
-
-.wplace-colors-section {
-  margin-top: 10px;
-  padding-top: 8px;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.wplace-stat-colors-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(16px, 1fr));
-  gap: 4px;
-  margin-top: 8px;
-  padding: 4px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-  max-height: 80px;
-  overflow-y: auto;
-}
-
-.wplace-stat-color-swatch {
-  width: 16px;
-  height: 16px;
-  border-radius: 3px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
-}
-
-/* Progress */
-.wplace-progress {
-  width: 100%;
-  overflow: hidden;
-  position: relative;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  margin: 8px 0;
-  height: 6px;
-}
-
-.wplace-progress-bar {
-  position: relative;
-  height: 6px;
-  transition: width 0.5s ease;
-}
-
-.wplace-progress-bar::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.3),
-    transparent
-  );
-  animation: shimmer 2s infinite;
-}
-
-/* ========================= */
-/* Status blocks             */
-/* ========================= */
-.wplace-status {
-  text-align: center;
-  position: relative;
-  overflow: hidden;
-  padding: 6px;
-  border: 1px solid;
-  border-radius: 8px;
-  font-size: 11px;
-}
-
-.status-default {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.status-success {
-  background: rgba(0, 255, 0, 0.1);
-  box-shadow: 0 0 15px currentColor;
-}
-
-.status-error {
-  background: rgba(255, 0, 0, 0.1);
-  box-shadow: 0 0 15px currentColor;
-}
-
-.status-warning {
-  background: rgba(255, 165, 0, 0.1);
-  box-shadow: 0 0 15px currentColor;
-}
-
-/* ========================= */
-/* Resize dialog             */
-/* ========================= */
-.resize-container {
-  display: none;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 10000;
-  width: 90%;
-  max-width: 700px;
-  max-height: 90%;
-  overflow: auto;
-}
-
-.resize-preview-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.2);
-  margin: 15px 0;
-  height: 300px;
-  overflow: hidden;
-}
-
-.resize-canvas-stack {
-  position: relative;
-  transform-origin: center center;
-  display: inline-block;
-}
-
-.resize-base-canvas,
-.resize-mask-canvas {
-  position: absolute;
-  left: 0;
-  top: 0;
-  image-rendering: pixelated;
-  image-rendering: -moz-crisp-edges;
-  image-rendering: crisp-edges;
-}
-
-.resize-mask-canvas {
-  pointer-events: auto;
-}
-
-.resize-tools {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  margin-top: 8px;
-  font-size: 12px;
-}
-
-.resize-tools button {
-  padding: 6px 10px;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  background: rgba(255, 255, 255, 0.06);
-  color: #fff;
-  cursor: pointer;
-}
-
-.wplace-btn.active,
-.wplace-btn[aria-pressed='true'] {
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset,
-    0 0 6px rgba(0, 0, 0, 0.2) !important;
-}
-
-.mask-mode-group .wplace-btn.active,
-.mask-mode-group .wplace-btn[aria-pressed='true'] {
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset,
-    0 0 6px rgba(0, 0, 0, 0.2);
-}
-
-.resize-controls {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 15px;
-  align-items: center;
-}
-
-.resize-slider {
-  width: 100%;
-  outline: none;
-  -webkit-appearance: none;
-}
-
-.resize-zoom-controls {
-  grid-column: 1 / -1;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 15px;
-}
-
-.resize-buttons {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.resize-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  z-index: 9999;
-  display: none;
-}
-
-/* ========================= */
-/* Color grid                */
-/* ========================= */
-.wplace-color-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
-  gap: 10px;
-  padding-top: 8px;
-  max-height: 300px;
-  overflow-y: auto;
-}
-
-.wplace-color-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-}
-
-.wplace-color-item-name {
-  font-size: 9px;
-  color: #ccc;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-}
-
-.wplace-color-swatch {
-  width: 22px;
-  height: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: transform 0.1s ease, box-shadow 0.2s ease;
-  position: relative;
-  margin: 0 auto;
-}
-
-.wplace-color-swatch.unavailable {
-  border-color: #666;
-  border-style: dashed;
-  cursor: not-allowed;
-}
-
-.wplace-color-swatch:hover {
-  transform: scale(1.1);
-  z-index: 1;
-}
-
-.wplace-color-swatch:not(.active) {
-  opacity: 0.3;
-  filter: grayscale(80%);
-}
-
-.wplace-color-swatch.unavailable:not(.active) {
-  opacity: 0.2;
-  filter: grayscale(90%);
-}
-
-.wplace-color-swatch.active::after {
-  content: '✔';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: white;
-  font-size: 12px;
-  font-weight: bold;
-  text-shadow: 0 0 3px black;
-}
-
-.wplace-color-divider {
-  border: none;
-  height: 1px;
-  background: rgba(255, 255, 255, 0.1);
-  margin: 8px 0;
-}
-
-/* ========================= */
-/* Cooldown controls         */
-/* ========================= */
-.wplace-cooldown-control {
-  margin-top: 8px;
-}
-
-.wplace-cooldown-control label {
-  font-size: 11px;
-  margin-bottom: 4px;
-  display: block;
-}
-
-.wplace-slider-container {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.wplace-slider {
-  flex: 1;
-  -webkit-appearance: none;
-  appearance: none;
-  height: 4px;
-  background: #444;
-  border-radius: 2px;
-  outline: none;
-}
-
-.wplace-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-/* ========================= */
-/* Settings container (base) */
-/* ========================= */
-#wplace-settings-container {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 10001;
-  min-width: 400px;
-  max-width: 500px;
-}
-
-.wplace-settings {
-  padding: 16px;
-  max-height: 400px;
-  overflow-y: auto;
-}
-
-.wplace-setting-section {
-  margin-bottom: 20px;
-  padding: 12px;
-}
-
-.wplace-setting-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.wplace-setting-title i {
-  margin-right: 8px;
-}
-
-/* ========================= */
-/* Form controls             */
-/* ========================= */
-.wplace-select {
-  width: 100%;
-  padding: 8px 12px;
-  font-size: 14px;
-  margin-bottom: 10px;
-}
-
-.wplace-select:focus {
-  outline: none;
-}
-
-.wplace-description {
-  font-size: 12px;
-  opacity: 0.8;
-  line-height: 1.4;
-}
-
-/* Speed controls */
-.wplace-speed-control {
-  margin-top: 12px;
-  padding: 12px;
-}
-
-.wplace-speed-label {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.wplace-speed-label i {
-  margin-right: 6px;
-}
-
-.wplace-speed-slider-container {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.wplace-speed-slider {
-  flex: 1;
-  height: 6px;
-  border-radius: 3px;
-  outline: none;
-  cursor: pointer;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.wplace-speed-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  cursor: pointer;
-  border: 2px solid;
-}
-
-.wplace-speed-slider::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  cursor: pointer;
-  border: 2px solid;
-}
-
-.wplace-speed-display {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  min-width: 90px;
-  justify-content: flex-end;
-}
-
-/* ========================= */
-/* Turnstile overlay         */
-/* ========================= */
-/* Hidden invisible widget host (token generator) */
-.wplace-turnstile-hidden {
-  position: fixed !important;
-  left: -99999px !important;
-  top: -99999px !important;
-  width: 1px !important;
-  height: 1px !important;
-  pointer-events: none !important;
-  opacity: 0 !important;
-  visibility: hidden !important;
-  z-index: -99999 !important;
-  overflow: hidden !important;
-}
-
-/* Visible overlay (interactive fallback) */
-.wplace-turnstile-overlay {
-  position: fixed !important;
-  bottom: 20px !important;
-  right: 20px !important;
-  z-index: 99999 !important;
-  background: rgba(0, 0, 0, 0.9) !important;
-  border-radius: 12px !important;
-  padding: 20px !important;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
-  backdrop-filter: blur(10px) !important;
-  border: 1px solid rgba(255, 255, 255, 0.2) !important;
-  color: #fff !important;
-  font-family: 'Segoe UI', sans-serif !important;
-  min-width: 300px !important;
-  max-width: 400px !important;
-}
-
-.wplace-turnstile-title {
-  font: 600 12px/1.3 'Segoe UI', sans-serif !important;
-  margin-bottom: 8px !important;
-  opacity: 0.9 !important;
-  color: #ffffff !important;
-}
-
-.wplace-turnstile-host {
-  width: 100% !important;
-  min-height: 70px !important;
-}
-
-.wplace-turnstile-hide-btn {
-  position: absolute !important;
-  top: 6px !important;
-  right: 6px !important;
-  font-size: 11px !important;
-  background: transparent !important;
-  color: #ffffff !important;
-  border: 1px solid rgba(255, 255, 255, 0.2) !important;
-  border-radius: 6px !important;
-  padding: 2px 6px !important;
-  cursor: pointer !important;
-  transition: background 0.2s ease !important;
-}
-
-.wplace-turnstile-hide-btn:hover {
-  background: rgba(255, 255, 255, 0.1) !important;
-}
-
-/* ========================= */
-/* Alert system (used by JS) */
-/* ========================= */
-.wplace-alert-base {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 12px 20px;
-  border-radius: 8px;
-  color: white;
-  font-weight: 600;
-  z-index: 10001;
-  max-width: 400px;
-  text-align: center;
-  animation: slideDown 0.3s ease-out;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  font-family: 'Segoe UI', sans-serif;
-}
-
-.wplace-alert-info {
-  background: linear-gradient(135deg, #3498db, #2980b9);
-  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
-}
-
-.wplace-alert-success {
-  background: linear-gradient(135deg, #27ae60, #229954);
-  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
-}
-
-.wplace-alert-warning {
-  background: linear-gradient(135deg, #f39c12, #e67e22);
-  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
-}
-
-.wplace-alert-error {
-  background: linear-gradient(135deg, #e74c3c, #c0392b);
-  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
-}
-
-/* ========================= */
-/* Modal overlay helpers     */
-/* ========================= */
-.wplace-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.8);
-  z-index: 100002;
-  display: none;
-}
-
-.wplace-overlay.show {
-  display: block;
-}
-
-/* Overlay visibility helpers */
-.wplace-overlay-hidden {
-  display: none !important;
-}
-
-.wplace-overlay-visible {
-  display: block !important;
-}
-
-/* ========================= */
-/* Responsive tweaks         */
-/* ========================= */
- @media (max-width: 768px) {
-  #wplace-image-bot-container {
-    left: 10px;
-    width: calc(100vw - 20px);
-    max-height: calc(100vh - 20px);
-  }
-
-  #wplace-stats-container {
-    display: none !important; /* hide secondary panel on small screens */
-  }
-
-  .wplace-alert-base {
-    max-width: 90vw;
-    margin: 0 5vw;
-  }
-
-  .wplace-turnstile-overlay {
-    bottom: 10px !important;
-    right: 10px !important;
-    left: 10px !important;
-    min-width: auto !important;
-  }
-}
-
-/* ========================= */
-/* Auto light/dark support   */
-/* ========================= */
- @media (prefers-color-scheme: light) {
-  .theme-auto {
-    --wplace-primary: #ffffff;
-    --wplace-secondary: #f5f5f5;
-    --wplace-accent: #007acc;
-    --wplace-text: #333333;
-  }
-}
-
- @media (prefers-color-scheme: dark) {
-  .theme-auto {
-    --wplace-primary: #1e1e1e;
-    --wplace-secondary: #2d2d30;
-    --wplace-accent: #775ce3;
-    --wplace-text: #ffffff;
-  }
-}
-
-/* ===================================== */
-/* Settings container variants (optional)*/
-/* ===================================== */
-.wplace-settings-container-base {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 100001;
-  display: none;
-  font-family: 'Segoe UI', Roboto, sans-serif;
-  min-width: 400px;
-  max-width: 500px;
-  max-height: 80vh;
-  overflow-y: auto;
-  animation: slideIn 0.3s ease-out;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
-  padding: 0;
-}
-
-.wplace-settings-container-base.show {
-  display: block;
-}
-
-/* ===================================== */
-/* Utility styles                         */
-/* ===================================== */
-.wplace-paint-effect {
-  animation: pulse 0.5s ease-out;
-}
-
-.wplace-settings-error {
-  background: rgba(255, 0, 0, 0.4) !important;
-}
-
-.wplace-stats-container.hidden {
-  display: none;
-}
diff --git a/auto-image-styles.css b/auto-image-styles.css
index 5ac4a82..9182f9d 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1,48 +1,92 @@
-/* WPlace Auto-Image Bot Styles */
+/* WPlace Auto-Image Bot - Unified CSS Styles (decoupled from JS)
+   Why: bring external CSS in-sync with the UI that Auto-Image.js renders,
+   fix layout (positions, widths, z-index), and ensure class names match JS
+   (e.g., .wplace-dragging) so buttons and panels behave correctly. */
 
-/* Animations */
-@keyframes neonGlow {
-  0%, 100% {
-    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+/* ========================= */
+/* Core animations (shared)  */
+/* ========================= */
+ @keyframes neonGlow {
+  0%,
+  100% {
+    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor,
+      0 0 15px currentColor;
   }
   50% {
-    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor, 0 0 8px currentColor;
+    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor,
+      0 0 8px currentColor;
   }
 }
 
-@keyframes pixelBlink {
-  0%, 50% { opacity: 1; }
-  51%, 100% { opacity: 0.7; }
+ @keyframes pixelBlink {
+  0%,
+  50% {
+    opacity: 1;
+  }
+  51%,
+  100% {
+    opacity: 0.7;
+  }
 }
 
-@keyframes scanline {
-  0% { transform: translateY(-100%); }
-  100% { transform: translateY(400px); }
+ @keyframes scanline {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(400px);
+  }
 }
 
-@keyframes pulse {
-  0% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
-  70% { box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
-  100% { box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
+ @keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
+  }
 }
 
-@keyframes slideIn {
-  from { transform: translateY(-10px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
+ @keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
 }
 
-@keyframes shimmer {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
+ @keyframes slideDown {
+  from {
+    transform: translateX(-50%) translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+  }
 }
 
-@keyframes slideDown {
-  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
-  to { transform: translateX(-50%) translateY(0); opacity: 1; }
+ @keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
-/* Main containers - will be dynamically styled based on theme */
+/* ========================= */
+/* Main containers (fixed)   */
+/* Align with JS structure   */
+/* ========================= */
 #wplace-image-bot-container {
+  /* Why fixed sizes/positions: matches JS expectations and preserves two-panel layout */
   position: fixed;
   top: 20px;
   left: 20px;
@@ -55,26 +99,28 @@
   overflow-x: hidden;
   transition: all 0.3s ease;
   user-select: none;
+  display: none; /* JS will set display: block inline when ready */
 }
 
 #wplace-image-bot-container.wplace-dragging {
   transition: none;
-  box-shadow: 0 12px 40px rgba(0,0,0,0.8), 0 0 0 2px rgba(255,255,255,0.2);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
+    0 0 0 2px rgba(255, 255, 255, 0.2);
   transform: scale(1.02);
   z-index: 9999;
 }
 
+#wplace-image-bot-container.wplace-compact {
+  width: 240px;
+}
+
 #wplace-image-bot-container.wplace-minimized {
   width: 200px;
   height: auto;
   overflow: hidden;
 }
 
-#wplace-image-bot-container.wplace-compact {
-  width: 240px;
-}
-
-/* Stats Container */
+/* Stats container sits to the right of main (280 + 30 = 330) */
 #wplace-stats-container {
   position: fixed;
   top: 20px;
@@ -87,13 +133,25 @@
   overflow-y: auto;
   transition: all 0.3s ease;
   user-select: none;
+  display: none;
 }
 
 #wplace-stats-container.wplace-dragging {
   transition: none;
 }
 
-/* Header styles */
+/* Back-compat for legacy class (some earlier CSS used this) */
+.wplace-drag-active {
+  transition: none !important;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
+    0 0 0 2px rgba(255, 255, 255, 0.2) !important;
+  transform: scale(1.02) !important;
+  z-index: 9999 !important;
+}
+
+/* ========================= */
+/* Header and content blocks */
+/* ========================= */
 .wplace-header {
   display: flex;
   justify-content: space-between;
@@ -103,15 +161,18 @@
   transition: background 0.2s ease;
   position: relative;
   z-index: 2;
+  padding: 8px 12px;
 }
 
 .wplace-header-title {
   display: flex;
   align-items: center;
+  gap: 6px;
 }
 
 .wplace-header-controls {
   display: flex;
+  gap: 6px;
 }
 
 .wplace-header-btn {
@@ -120,35 +181,43 @@
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
+  background: rgba(255, 255, 255, 0.1);
+  color: inherit;
+  border: none;
+  border-radius: 4px;
+  width: 18px;
+  height: 18px;
+  font-size: 10px;
 }
 
 .wplace-header-btn:hover {
   transform: scale(1.1);
 }
 
-/* Content areas */
 .wplace-content {
   display: block;
   position: relative;
   z-index: 2;
+  padding: 12px;
 }
 
 .wplace-content.wplace-hidden {
   display: none;
 }
 
+/* Sections */
 .wplace-status-section {
   margin-bottom: 12px;
   padding: 8px;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.1);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .wplace-section {
   margin-bottom: 12px;
   padding: 12px;
-  background: rgba(255,255,255,0.03);
-  border: 1px solid rgba(255,255,255,0.1);
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .wplace-section-title {
@@ -162,7 +231,9 @@
   letter-spacing: 0.5px;
 }
 
-/* Controls and buttons */
+/* ========================= */
+/* Controls and buttons      */
+/* ========================= */
 .wplace-controls {
   display: flex;
   flex-direction: column;
@@ -187,6 +258,9 @@
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: none;
 }
 
 .wplace-btn::before {
@@ -196,7 +270,12 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
   transition: left 0.5s;
 }
 
@@ -228,7 +307,9 @@
   box-shadow: 0 0 15px #8e2de2;
 }
 
-/* Stats display */
+/* ========================= */
+/* Stats and progress        */
+/* ========================= */
 .wplace-stats {
   margin-bottom: 8px;
 }
@@ -236,7 +317,9 @@
 .wplace-stat-item {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid rgba(255,255,255,0.05);
+  padding: 4px 0;
+  font-size: 11px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .wplace-stat-item:last-child {
@@ -248,6 +331,7 @@
   align-items: center;
   gap: 6px;
   opacity: 0.9;
+  font-size: 10px;
 }
 
 .wplace-stat-value {
@@ -257,7 +341,7 @@
 .wplace-colors-section {
   margin-top: 10px;
   padding-top: 8px;
-  border-top: 1px solid rgba(255,255,255,0.05);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .wplace-stat-colors-grid {
@@ -266,7 +350,7 @@
   gap: 4px;
   margin-top: 8px;
   padding: 4px;
-  background: rgba(0,0,0,0.2);
+  background: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   max-height: 80px;
   overflow-y: auto;
@@ -276,31 +360,59 @@
   width: 16px;
   height: 16px;
   border-radius: 3px;
-  border: 1px solid rgba(255,255,255,0.1);
-  box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
 }
 
-/* Progress bars */
+/* Progress */
 .wplace-progress {
   width: 100%;
   overflow: hidden;
   position: relative;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  margin: 8px 0;
+  height: 6px;
 }
 
 .wplace-progress-bar {
   position: relative;
+  height: 6px;
   transition: width 0.5s ease;
 }
 
-/* Status indicators */
+.wplace-progress-bar::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  animation: shimmer 2s infinite;
+}
+
+/* ========================= */
+/* Status blocks             */
+/* ========================= */
 .wplace-status {
   text-align: center;
   position: relative;
   overflow: hidden;
+  padding: 6px;
+  border: 1px solid;
+  border-radius: 8px;
+  font-size: 11px;
 }
 
 .status-default {
-  background: rgba(255,255,255,0.1);
+  background: rgba(255, 255, 255, 0.1);
 }
 
 .status-success {
@@ -318,7 +430,9 @@
   box-shadow: 0 0 15px currentColor;
 }
 
-/* Resize container */
+/* ========================= */
+/* Resize dialog             */
+/* ========================= */
 .resize-container {
   display: none;
   position: fixed;
@@ -336,56 +450,59 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: rgba(0,0,0,0.2);
+  background: rgba(0, 0, 0, 0.2);
   margin: 15px 0;
   height: 300px;
   overflow: hidden;
 }
 
-.resize-canvas-stack { 
-  position: relative; 
-  transform-origin: center center; 
-  display: inline-block; 
+.resize-canvas-stack {
+  position: relative;
+  transform-origin: center center;
+  display: inline-block;
 }
 
-.resize-base-canvas, .resize-mask-canvas {
-  position: absolute; 
-  left: 0; 
+.resize-base-canvas,
+.resize-mask-canvas {
+  position: absolute;
+  left: 0;
   top: 0;
   image-rendering: pixelated;
   image-rendering: -moz-crisp-edges;
   image-rendering: crisp-edges;
 }
 
-.resize-mask-canvas { 
-  pointer-events: auto; 
+.resize-mask-canvas {
+  pointer-events: auto;
 }
 
-.resize-tools { 
-  display: flex; 
-  gap: 8px; 
-  align-items: center; 
-  margin-top: 8px; 
-  font-size: 12px; 
+.resize-tools {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 12px;
 }
 
-.resize-tools button { 
-  padding: 6px 10px; 
-  border-radius: 6px; 
-  border: 1px solid rgba(255,255,255,0.2); 
-  background: rgba(255,255,255,0.06); 
-  color: #fff; 
-  cursor: pointer; 
+.resize-tools button {
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.06);
+  color: #fff;
+  cursor: pointer;
 }
 
 .wplace-btn.active,
-.wplace-btn[aria-pressed="true"] {
-  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2) !important;
+.wplace-btn[aria-pressed='true'] {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset,
+    0 0 6px rgba(0, 0, 0, 0.2) !important;
 }
 
 .mask-mode-group .wplace-btn.active,
-.mask-mode-group .wplace-btn[aria-pressed="true"] {
-  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2);
+.mask-mode-group .wplace-btn[aria-pressed='true'] {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset,
+    0 0 6px rgba(0, 0, 0, 0.2);
 }
 
 .resize-controls {
@@ -427,7 +544,9 @@
   display: none;
 }
 
-/* Color grid */
+/* ========================= */
+/* Color grid                */
+/* ========================= */
 .wplace-color-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
@@ -457,7 +576,7 @@
 .wplace-color-swatch {
   width: 22px;
   height: 22px;
-  border: 1px solid rgba(255,255,255,0.2);
+  border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 4px;
   cursor: pointer;
   transition: transform 0.1s ease, box-shadow 0.2s ease;
@@ -501,11 +620,13 @@
 .wplace-color-divider {
   border: none;
   height: 1px;
-  background: rgba(255,255,255,0.1);
+  background: rgba(255, 255, 255, 0.1);
   margin: 8px 0;
 }
 
-/* Cooldown controls */
+/* ========================= */
+/* Cooldown controls         */
+/* ========================= */
 .wplace-cooldown-control {
   margin-top: 8px;
 }
@@ -540,7 +661,9 @@
   cursor: pointer;
 }
 
-/* Settings container */
+/* ========================= */
+/* Settings container (base) */
+/* ========================= */
 #wplace-settings-container {
   position: fixed;
   top: 50%;
@@ -574,10 +697,27 @@
   margin-right: 8px;
 }
 
-.wplace-setting-content {
-  /* Content styling will be theme-dependent */
+/* ========================= */
+/* Form controls             */
+/* ========================= */
+.wplace-select {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 14px;
+  margin-bottom: 10px;
 }
 
+.wplace-select:focus {
+  outline: none;
+}
+
+.wplace-description {
+  font-size: 12px;
+  opacity: 0.8;
+  line-height: 1.4;
+}
+
+/* Speed controls */
 .wplace-speed-control {
   margin-top: 12px;
   padding: 12px;
@@ -637,113 +777,222 @@
   justify-content: flex-end;
 }
 
-#speedValue {
+/* ========================= */
+/* Turnstile overlay         */
+/* ========================= */
+/* Hidden invisible widget host (token generator) */
+.wplace-turnstile-hidden {
+  position: fixed !important;
+  left: -99999px !important;
+  top: -99999px !important;
+  width: 1px !important;
+  height: 1px !important;
+  pointer-events: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  z-index: -99999 !important;
+  overflow: hidden !important;
+}
+
+/* Visible overlay (interactive fallback) */
+.wplace-turnstile-overlay {
+  position: fixed !important;
+  bottom: 20px !important;
+  right: 20px !important;
+  z-index: 99999 !important;
+  background: rgba(0, 0, 0, 0.9) !important;
+  border-radius: 12px !important;
+  padding: 20px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
+  backdrop-filter: blur(10px) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  color: #fff !important;
+  font-family: 'Segoe UI', sans-serif !important;
+  min-width: 300px !important;
+  max-width: 400px !important;
+}
+
+.wplace-turnstile-title {
+  font: 600 12px/1.3 'Segoe UI', sans-serif !important;
+  margin-bottom: 8px !important;
+  opacity: 0.9 !important;
+  color: #ffffff !important;
+}
+
+.wplace-turnstile-host {
+  width: 100% !important;
+  min-height: 70px !important;
+}
+
+.wplace-turnstile-hide-btn {
+  position: absolute !important;
+  top: 6px !important;
+  right: 6px !important;
+  font-size: 11px !important;
+  background: transparent !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 6px !important;
+  padding: 2px 6px !important;
+  cursor: pointer !important;
+  transition: background 0.2s ease !important;
+}
+
+.wplace-turnstile-hide-btn:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
+/* ========================= */
+/* Alert system (used by JS) */
+/* ========================= */
+.wplace-alert-base {
+  position: fixed;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 12px 20px;
+  border-radius: 8px;
+  color: white;
   font-weight: 600;
-  font-size: 14px;
-}
-
-.wplace-speed-unit {
-  font-size: 11px;
-  opacity: 0.8;
-}
-
-.wplace-speed-container {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  margin-bottom: 10px;
-}
-
-.wplace-speed-display {
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-weight: 600;
-  min-width: 80px;
+  z-index: 10001;
+  max-width: 400px;
   text-align: center;
+  animation: slideDown 0.3s ease-out;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  font-family: 'Segoe UI', sans-serif;
 }
 
-.wplace-select {
+.wplace-alert-info {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+}
+
+.wplace-alert-success {
+  background: linear-gradient(135deg, #27ae60, #229954);
+  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
+}
+
+.wplace-alert-warning {
+  background: linear-gradient(135deg, #f39c12, #e67e22);
+  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
+}
+
+.wplace-alert-error {
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
+}
+
+/* ========================= */
+/* Modal overlay helpers     */
+/* ========================= */
+.wplace-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
   width: 100%;
-  padding: 8px 12px;
-  font-size: 14px;
-  margin-bottom: 10px;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 100002;
+  display: none;
 }
 
-.wplace-select:focus {
-  outline: none;
+.wplace-overlay.show {
+  display: block;
 }
 
-.wplace-description {
-  font-size: 12px;
-  opacity: 0.8;
-  line-height: 1.4;
+/* Overlay visibility helpers */
+.wplace-overlay-hidden {
+  display: none !important;
 }
 
-.wplace-theme-custom {
-  margin-top: 15px;
-  padding: 15px;
+.wplace-overlay-visible {
+  display: block !important;
 }
 
-.wplace-custom-group {
-  margin-bottom: 15px;
+/* ========================= */
+/* Responsive tweaks         */
+/* ========================= */
+ @media (max-width: 768px) {
+  #wplace-image-bot-container {
+    left: 10px;
+    width: calc(100vw - 20px);
+    max-height: calc(100vh - 20px);
+  }
+
+  #wplace-stats-container {
+    display: none !important; /* hide secondary panel on small screens */
+  }
+
+  .wplace-alert-base {
+    max-width: 90vw;
+    margin: 0 5vw;
+  }
+
+  .wplace-turnstile-overlay {
+    bottom: 10px !important;
+    right: 10px !important;
+    left: 10px !important;
+    min-width: auto !important;
+  }
 }
 
-.wplace-custom-label {
-  display: flex;
-  align-items: center;
-  margin-bottom: 8px;
-  font-size: 13px;
-  font-weight: 600;
+/* ========================= */
+/* Auto light/dark support   */
+/* ========================= */
+ @media (prefers-color-scheme: light) {
+  .theme-auto {
+    --wplace-primary: #ffffff;
+    --wplace-secondary: #f5f5f5;
+    --wplace-accent: #007acc;
+    --wplace-text: #333333;
+  }
 }
 
-.wplace-custom-label i {
-  margin-right: 8px;
-  width: 16px;
+ @media (prefers-color-scheme: dark) {
+  .theme-auto {
+    --wplace-primary: #1e1e1e;
+    --wplace-secondary: #2d2d30;
+    --wplace-accent: #775ce3;
+    --wplace-text: #ffffff;
+  }
 }
 
-.wplace-color-input-group {
-  display: flex;
-  gap: 8px;
-  align-items: center;
+/* ===================================== */
+/* Settings container variants (optional)*/
+/* ===================================== */
+.wplace-settings-container-base {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 100001;
+  display: none;
+  font-family: 'Segoe UI', Roboto, sans-serif;
+  min-width: 400px;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+  animation: slideIn 0.3s ease-out;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 0;
 }
 
-.wplace-color-input {
-  width: 50px;
-  height: 30px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  background: transparent;
+.wplace-settings-container-base.show {
+  display: block;
 }
 
-.wplace-color-text {
-  flex: 1;
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 12px;
-  font-family: monospace;
+/* ===================================== */
+/* Utility styles                         */
+/* ===================================== */
+.wplace-paint-effect {
+  animation: pulse 0.5s ease-out;
 }
 
-.wplace-animation-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.wplace-settings-error {
+  background: rgba(255, 0, 0, 0.4) !important;
 }
 
-.wplace-checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  cursor: pointer;
+.wplace-stats-container.hidden {
+  display: none;
 }
-
-.wplace-custom-actions {
-  display: flex;
-  gap: 10px;
-  margin-top: 20px;
-  border-top: 1px solid;
-  padding-top: 15px;
-}
-
-/* Theme-specific overrides will be applied dynamically via JavaScript */
\ No newline at end of file

From abb3c3fffeceec7bb7cdde0d412b63d3ea11d79f Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 15:37:14 +0200
Subject: [PATCH 17/36] update readme's

---
 NL.md     | 2 +-
 README.md | 2 +-
 RU.md     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/NL.md b/NL.md
index 9b3827e..588e9d6 100644
--- a/NL.md
+++ b/NL.md
@@ -112,7 +112,7 @@ javascript:fetch("https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBO
 * [x] Ondersteuning voor kruistegels toevoegen
 * [x] AutoCaptcha-oplosser toevoegen
 * [x] Correcte kleur pixel overslaan toevoegen
-* [ ] CSS scheiden
+* [x] CSS scheiden
 
 ---
 
diff --git a/README.md b/README.md
index 8ccec8b..0bdcf05 100644
--- a/README.md
+++ b/README.md
@@ -113,7 +113,7 @@ javascript:fetch("https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBO
 - [x] Add Cross Tiles Support
 - [x] Add AutoCaptcha Solver
 - [x] Add Correct Color Pixel Skip
-- [ ] Separate Css
+- [x] Separate Css
 
 ---
 
diff --git a/RU.md b/RU.md
index cb07c8e..1c6b496 100644
--- a/RU.md
+++ b/RU.md
@@ -112,7 +112,7 @@ javascript:fetch("https://raw.githubusercontent.com/Wplace-AutoBot/WPlace-AutoBO
 - [x] Добавить поддержку перекрестных плиток
 - [x] Добавить средство автоподчеты
 - [x] Добавить правильный пропуск цветного пикселя
-- [ ] Отдельный Css
+- [x] Отдельный Css
 - [ ] Учебные пособия
 
 ---

From 5906e4ceacbe517665efe92341e3acdc50fb1ab5 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 16:52:19 +0200
Subject: [PATCH 18/36] wip better style switch

---
 Auto-Image.js         |  51 +++++++--
 auto-image-styles.css | 257 ++++++++++++++++++++++++++++++++++--------
 2 files changed, 247 insertions(+), 61 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index cc3bbdb..672616b 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -177,19 +177,47 @@
   const getCurrentTheme = () => CONFIG.THEMES[CONFIG.currentTheme]
 
   const switchTheme = (themeName) => {
-    if (CONFIG.THEMES[themeName]) {
-      CONFIG.currentTheme = themeName
-      saveThemePreference()
+  if (CONFIG.THEMES[themeName]) {
+    CONFIG.currentTheme = themeName
+    saveThemePreference()
 
-      // Remove existing theme styles
-      const existingStyle = document.querySelector('style[data-wplace-theme="true"]')
-      if (existingStyle) {
-        existingStyle.remove()
-      }
+    // APPLY THEME VARS/CLASS (new)
+    applyTheme()
 
-      // Recreate UI with new theme (cleanup is handled in createUI)
-      createUI()
-    }
+    // Recreate UI (kept for now)
+    createUI()
+  }
+}
+
+  // Add this helper (place it after getCurrentTheme/switchTheme definitions)
+  function applyTheme() {
+    const theme = getCurrentTheme();
+    // Toggle theme class on documentElement so CSS vars cascade to our UI
+    document.documentElement.classList.remove('wplace-theme--classic', 'wplace-theme--neon');
+    document.documentElement.classList.add(
+      CONFIG.currentTheme === 'Neon Retro' ? 'wplace-theme--neon' : 'wplace-theme--classic'
+    );
+
+    // Also set CSS variables explicitly in case you want runtime overrides
+    const root = document.documentElement;
+    const setVar = (k, v) => { try { root.style.setProperty(k, v); } catch {} };
+
+    setVar('--wplace-primary', theme.primary);
+    setVar('--wplace-secondary', theme.secondary);
+    setVar('--wplace-accent', theme.accent);
+    setVar('--wplace-text', theme.text);
+    setVar('--wplace-highlight', theme.highlight);
+    setVar('--wplace-success', theme.success);
+    setVar('--wplace-error', theme.error);
+    setVar('--wplace-warning', theme.warning);
+
+    // Typography + look
+    setVar('--wplace-font', theme.fontFamily || "'Segoe UI', Roboto, sans-serif");
+    setVar('--wplace-radius', (('' + (theme.borderRadius || '12px'))));
+    setVar('--wplace-border-style', (('' + (theme.borderStyle || 'solid'))));
+    setVar('--wplace-border-width', (('' + (theme.borderWidth || '1px'))));
+    setVar('--wplace-backdrop', (('' + (theme.backdropFilter || 'blur(10px)'))));
+    setVar('--wplace-border-color', 'rgba(255,255,255,0.1)');
   }
 
   const saveThemePreference = () => {
@@ -3223,6 +3251,7 @@
     loadLanguagePreference()
 
     const theme = getCurrentTheme()
+    applyTheme() // <- new: set CSS vars and theme class before building UI
 
     const fontAwesome = document.createElement("link")
     fontAwesome.rel = "stylesheet"
diff --git a/auto-image-styles.css b/auto-image-styles.css
index 9182f9d..08d4998 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -3,18 +3,90 @@
    fix layout (positions, widths, z-index), and ensure class names match JS
    (e.g., .wplace-dragging) so buttons and panels behave correctly. */
 
+/* ========================= */
+/* Theme tokens (CSS vars)   */
+/* ========================= */
+
+/* Default = Classic Autobot */
+:root {
+  --wplace-primary: #000000;
+  --wplace-secondary: #111111;
+  --wplace-accent: #222222;
+  --wplace-text: #ffffff;
+  --wplace-highlight: #775ce3;
+  --wplace-success: #00ff00;
+  --wplace-error: #ff0000;
+  --wplace-warning: #ffaa00;
+
+  --wplace-radius: 12px;
+  --wplace-border-style: solid;
+  --wplace-border-width: 1px;
+  --wplace-border-color: rgba(255, 255, 255, 0.1);
+  --wplace-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+  --wplace-backdrop: blur(10px);
+  --wplace-font: 'Segoe UI', Roboto, sans-serif;
+
+  --wplace-z-overlay: 10000;
+  --wplace-z-alert: 10001;
+  --wplace-z-settings: 100001;
+
+  /* feature toggles */
+  --wplace-scanline: 0;
+  --wplace-pixel-blink: 0;
+}
+
+/* Optional theme class hooks (you can switch these on body or html) */
+.wplace-theme--classic {
+  --wplace-primary: #000000;
+  --wplace-secondary: #111111;
+  --wplace-accent: #222222;
+  --wplace-text: #ffffff;
+  --wplace-highlight: #775ce3;
+  --wplace-success: #00ff00;
+  --wplace-error: #ff0000;
+  --wplace-warning: #ffaa00;
+
+  --wplace-radius: 12px;
+  --wplace-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(255, 255, 255, 0.1);
+  --wplace-backdrop: blur(10px);
+  --wplace-font: 'Segoe UI', Roboto, sans-serif;
+
+  --wplace-scanline: 0;
+  --wplace-pixel-blink: 0;
+}
+
+.wplace-theme--neon {
+  --wplace-primary: #1a1a2e;
+  --wplace-secondary: #16213e;
+  --wplace-accent: #0f3460;
+  --wplace-text: #00ff41;
+  --wplace-highlight: #ff6b35;
+  --wplace-success: #39ff14;
+  --wplace-error: #ff073a;
+  --wplace-warning: #ffff00;
+
+  --wplace-radius: 0;
+  --wplace-shadow: 0 0 20px rgba(0, 255, 65, 0.3),
+    inset 0 0 20px rgba(0, 255, 65, 0.1);
+  --wplace-backdrop: none;
+  --wplace-font: 'Press Start 2P', monospace;
+
+  --wplace-scanline: 1;
+  --wplace-pixel-blink: 1;
+}
+
 /* ========================= */
 /* Core animations (shared)  */
 /* ========================= */
  @keyframes neonGlow {
   0%,
   100% {
-    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor,
-      0 0 15px currentColor;
+    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
   }
   50% {
-    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor,
-      0 0 8px currentColor;
+    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor, 0 0 8px currentColor;
   }
 }
 
@@ -100,12 +172,20 @@
   transition: all 0.3s ease;
   user-select: none;
   display: none; /* JS will set display: block inline when ready */
+
+  /* Theme hooks */
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  font-family: var(--wplace-font);
+  backdrop-filter: var(--wplace-backdrop);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 #wplace-image-bot-container.wplace-dragging {
   transition: none;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
-    0 0 0 2px rgba(255, 255, 255, 0.2);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.2);
   transform: scale(1.02);
   z-index: 9999;
 }
@@ -134,6 +214,15 @@
   transition: all 0.3s ease;
   user-select: none;
   display: none;
+
+  /* Theme hooks */
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  font-family: var(--wplace-font);
+  backdrop-filter: var(--wplace-backdrop);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 #wplace-stats-container.wplace-dragging {
@@ -143,8 +232,7 @@
 /* Back-compat for legacy class (some earlier CSS used this) */
 .wplace-drag-active {
   transition: none !important;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8),
-    0 0 0 2px rgba(255, 255, 255, 0.2) !important;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
   transform: scale(1.02) !important;
   z-index: 9999 !important;
 }
@@ -162,6 +250,11 @@
   position: relative;
   z-index: 2;
   padding: 8px 12px;
+
+  /* Theme hooks */
+  background: var(--wplace-secondary);
+  color: var(--wplace-highlight);
+  border-bottom: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 .wplace-header-title {
@@ -188,10 +281,15 @@
   width: 18px;
   height: 18px;
   font-size: 10px;
+  /* Theme tweak */
+  background: var(--wplace-accent);
+  color: var(--wplace-text);
 }
 
 .wplace-header-btn:hover {
   transform: scale(1.1);
+  background: var(--wplace-text);
+  color: var(--wplace-primary);
 }
 
 .wplace-content {
@@ -211,6 +309,7 @@
   padding: 8px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--wplace-radius);
 }
 
 .wplace-section {
@@ -218,6 +317,7 @@
   padding: 12px;
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--wplace-radius);
 }
 
 .wplace-section-title {
@@ -229,6 +329,7 @@
   gap: 6px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  color: var(--wplace-highlight);
 }
 
 /* ========================= */
@@ -259,8 +360,11 @@
   position: relative;
   overflow: hidden;
   padding: 8px 12px;
-  border-radius: 8px;
+  border-radius: var(--wplace-radius);
   border: none;
+  background: var(--wplace-accent);
+  color: var(--wplace-text);
+  font-family: var(--wplace-font);
 }
 
 .wplace-btn::before {
@@ -270,12 +374,7 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.2),
-    transparent
-  );
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
   transition: left 0.5s;
 }
 
@@ -307,11 +406,42 @@
   box-shadow: 0 0 15px #8e2de2;
 }
 
+/* button variants via theme */
+.wplace-btn-start {
+  background: var(--wplace-success);
+  color: #000;
+}
+
+.wplace-btn-stop {
+  background: var(--wplace-error);
+  color: #fff;
+}
+
+.wplace-btn-select {
+  background: var(--wplace-highlight);
+  color: #000;
+}
+
+.wplace-btn-upload {
+  background: var(--wplace-secondary);
+  border: 1px dashed var(--wplace-highlight);
+  color: var(--wplace-text);
+}
+
+.wplace-btn-file {
+  background: var(--wplace-warning);
+  color: #000;
+}
+
 /* ========================= */
 /* Stats and progress        */
 /* ========================= */
 .wplace-stats {
   margin-bottom: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--wplace-radius);
+  padding: 8px;
 }
 
 .wplace-stat-item {
@@ -336,6 +466,7 @@
 
 .wplace-stat-value {
   font-weight: 600;
+  color: var(--wplace-highlight);
 }
 
 .wplace-colors-section {
@@ -369,9 +500,9 @@
   width: 100%;
   overflow: hidden;
   position: relative;
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--wplace-secondary);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
+  border-radius: var(--wplace-radius);
   margin: 8px 0;
   height: 6px;
 }
@@ -380,21 +511,14 @@
   position: relative;
   height: 6px;
   transition: width 0.5s ease;
+  background: linear-gradient(135deg, var(--wplace-highlight) 0%, #9370db 100%);
 }
 
 .wplace-progress-bar::after {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(
-    90deg,
-    transparent,
-    rgba(255, 255, 255, 0.3),
-    transparent
-  );
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
   animation: shimmer 2s infinite;
 }
 
@@ -407,26 +531,34 @@
   overflow: hidden;
   padding: 6px;
   border: 1px solid;
-  border-radius: 8px;
+  border-radius: var(--wplace-radius);
   font-size: 11px;
 }
 
 .status-default {
   background: rgba(255, 255, 255, 0.1);
+  border-color: var(--wplace-border-color);
+  color: var(--wplace-text);
 }
 
 .status-success {
   background: rgba(0, 255, 0, 0.1);
+  border-color: var(--wplace-success);
+  color: var(--wplace-success);
   box-shadow: 0 0 15px currentColor;
 }
 
 .status-error {
   background: rgba(255, 0, 0, 0.1);
+  border-color: var(--wplace-error);
+  color: var(--wplace-error);
   box-shadow: 0 0 15px currentColor;
 }
 
 .status-warning {
   background: rgba(255, 165, 0, 0.1);
+  border-color: var(--wplace-warning);
+  color: var(--wplace-warning);
   box-shadow: 0 0 15px currentColor;
 }
 
@@ -439,11 +571,18 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 10000;
+  z-index: var(--wplace-z-overlay);
   width: 90%;
   max-width: 700px;
   max-height: 90%;
   overflow: auto;
+
+  /* Theme */
+  background: var(--wplace-primary);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  font-family: var(--wplace-font);
 }
 
 .resize-preview-wrapper {
@@ -454,6 +593,7 @@
   margin: 15px 0;
   height: 300px;
   overflow: hidden;
+  border: 1px solid var(--wplace-accent);
 }
 
 .resize-canvas-stack {
@@ -495,14 +635,12 @@
 
 .wplace-btn.active,
 .wplace-btn[aria-pressed='true'] {
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset,
-    0 0 6px rgba(0, 0, 0, 0.2) !important;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(0, 0, 0, 0.2) !important;
 }
 
 .mask-mode-group .wplace-btn.active,
 .mask-mode-group .wplace-btn[aria-pressed='true'] {
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset,
-    0 0 6px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(0, 0, 0, 0.2);
 }
 
 .resize-controls {
@@ -669,9 +807,18 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: 10001;
+  z-index: var(--wplace-z-alert);
   min-width: 400px;
   max-width: 500px;
+
+  /* Theme */
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  font-family: var(--wplace-font);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  backdrop-filter: var(--wplace-backdrop);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 .wplace-settings {
@@ -685,18 +832,6 @@
   padding: 12px;
 }
 
-.wplace-setting-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.wplace-setting-title i {
-  margin-right: 8px;
-}
-
 /* ========================= */
 /* Form controls             */
 /* ========================= */
@@ -851,10 +986,10 @@
   left: 50%;
   transform: translateX(-50%);
   padding: 12px 20px;
-  border-radius: 8px;
+  border-radius: var(--wplace-radius);
   color: white;
   font-weight: 600;
-  z-index: 10001;
+  z-index: var(--wplace-z-alert);
   max-width: 400px;
   text-align: center;
   animation: slideDown 0.3s ease-out;
@@ -967,15 +1102,19 @@
   transform: translate(-50%, -50%);
   z-index: 100001;
   display: none;
-  font-family: 'Segoe UI', Roboto, sans-serif;
+  font-family: var(--wplace-font);
   min-width: 400px;
   max-width: 500px;
   max-height: 80vh;
   overflow-y: auto;
   animation: slideIn 0.3s ease-out;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 16px;
+  border-radius: var(--wplace-radius);
   padding: 0;
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  box-shadow: var(--wplace-shadow);
+  backdrop-filter: var(--wplace-backdrop);
 }
 
 .wplace-settings-container-base.show {
@@ -996,3 +1135,21 @@
 .wplace-stats-container.hidden {
   display: none;
 }
+
+/* Theme flourishes for Neon (scanline/pixel blink) */
+.wplace-theme--neon #wplace-image-bot-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--wplace-text), transparent);
+  z-index: 1;
+  pointer-events: none;
+  animation: scanline 3s linear infinite;
+}
+
+.wplace-theme--neon .wplace-btn:hover:not(:disabled) {
+  animation: pixelBlink 0.5s infinite;
+}
\ No newline at end of file

From 1cfb996a71c6420bcc03108e655440efc39c0320 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 18:06:34 +0200
Subject: [PATCH 19/36] theme application logic

---
 Auto-Image.js         | 436 +++---------------------------------------
 auto-image-styles.css |   2 +-
 2 files changed, 31 insertions(+), 407 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 672616b..3e7f4a1 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -189,36 +189,38 @@
   }
 }
 
-  // Add this helper (place it after getCurrentTheme/switchTheme definitions)
-  function applyTheme() {
-    const theme = getCurrentTheme();
-    // Toggle theme class on documentElement so CSS vars cascade to our UI
-    document.documentElement.classList.remove('wplace-theme--classic', 'wplace-theme--neon');
-    document.documentElement.classList.add(
-      CONFIG.currentTheme === 'Neon Retro' ? 'wplace-theme--neon' : 'wplace-theme--classic'
-    );
+// Add this helper (place it after getCurrentTheme/switchTheme definitions)
+function applyTheme() {
+  const theme = getCurrentTheme();
+  // Toggle theme class on documentElement so CSS vars cascade to our UI
+  document.documentElement.classList.remove('wplace-theme--classic', 'wplace-theme--neon');
+  document.documentElement.classList.add(
+    CONFIG.currentTheme === 'Neon Retro' ? 'wplace-theme--neon' : 'wplace-theme--classic'
+  );
 
-    // Also set CSS variables explicitly in case you want runtime overrides
-    const root = document.documentElement;
-    const setVar = (k, v) => { try { root.style.setProperty(k, v); } catch {} };
+  // Also set CSS variables explicitly in case you want runtime overrides
+  const root = document.documentElement;
+  const setVar = (k, v) => { try { root.style.setProperty(k, v); } catch {} };
 
-    setVar('--wplace-primary', theme.primary);
-    setVar('--wplace-secondary', theme.secondary);
-    setVar('--wplace-accent', theme.accent);
-    setVar('--wplace-text', theme.text);
-    setVar('--wplace-highlight', theme.highlight);
-    setVar('--wplace-success', theme.success);
-    setVar('--wplace-error', theme.error);
-    setVar('--wplace-warning', theme.warning);
+  setVar('--wplace-primary', theme.primary);
+  setVar('--wplace-secondary', theme.secondary);
+  setVar('--wplace-accent', theme.accent);
+  setVar('--wplace-text', theme.text);
+  setVar('--wplace-highlight', theme.highlight);
+  setVar('--wplace-success', theme.success);
+  setVar('--wplace-error', theme.error);
+  setVar('--wplace-warning', theme.warning);
 
-    // Typography + look
-    setVar('--wplace-font', theme.fontFamily || "'Segoe UI', Roboto, sans-serif");
-    setVar('--wplace-radius', (('' + (theme.borderRadius || '12px'))));
-    setVar('--wplace-border-style', (('' + (theme.borderStyle || 'solid'))));
-    setVar('--wplace-border-width', (('' + (theme.borderWidth || '1px'))));
-    setVar('--wplace-backdrop', (('' + (theme.backdropFilter || 'blur(10px)'))));
-    setVar('--wplace-border-color', 'rgba(255,255,255,0.1)');
-  }
+  // Typography + look
+  setVar('--wplace-font', theme.fontFamily || "'Segoe UI', Roboto, sans-serif");
+  setVar('--wplace-radius', ('' + (theme.borderRadius || '12px')));
+  setVar('--wplace-border-style', (('' + (theme.borderStyle || 'solid'))));
+  setVar('--wplace-border-width', (('' + (theme.borderWidth || '1px'))));
+  setVar('--wplace-backdrop', (('' + (theme.backdropFilter || 'blur(10px)'))));
+  setVar('--wplace-border-color', 'rgba(255,255,255,0.1)');
+}
+
+  
 
   const saveThemePreference = () => {
     try {
@@ -3272,385 +3274,6 @@
     cssLink.setAttribute('data-wplace-theme', 'true');
     document.head.appendChild(cssLink);
 
-
-    // Apply theme-specific dynamic styles
-    const style = document.createElement("style")
-    style.setAttribute("data-wplace-theme-dynamic", "true")
-
-    style.textContent = `
-      /* Dynamic theme-specific styles */
-      ${theme.animations.glow ? `
-        .wplace-header { animation: neonGlow 2s ease-in-out infinite alternate; }
-        .fas, .fa { filter: drop-shadow(0 0 3px currentColor); }
-      ` : ""}
-
-      ${theme.animations.pixelBlink ? `
-        .wplace-btn:hover:not(:disabled) { animation: pixelBlink 0.5s infinite; }
-        .status-error { animation: pixelBlink 0.5s infinite; }
-        .wplace-progress-bar::after { animation: pixelBlink 1s infinite; }
-      ` : ""}
-
-      ${theme.animations.scanline ? `
-        #wplace-image-bot-container::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          height: 2px;
-          background: linear-gradient(90deg, transparent, ${theme.neon}, transparent);
-          animation: scanline 3s linear infinite;
-          z-index: 1;
-          pointer-events: none;
-        }
-      ` : ""}
-
-      /* Theme-specific container styles */
-      #wplace-image-bot-container {
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.primary} 0%, #1a1a1a 100%)`
-          : theme.primary
-        };
-        border: ${theme.borderWidth} ${theme.borderStyle} ${CONFIG.currentTheme === "Classic Autobot" ? theme.accent : theme.text};
-        border-radius: ${theme.borderRadius};
-        box-shadow: ${theme.boxShadow};
-        font-family: ${theme.fontFamily};
-        color: ${theme.text};
-        ${theme.backdropFilter ? `backdrop-filter: ${theme.backdropFilter};` : ""}
-        ${CONFIG.currentTheme === "Neon Retro" ? "image-rendering: pixelated;" : ""}
-      }
-
-      ${CONFIG.currentTheme === "Neon Retro" ? `
-        #wplace-image-bot-container::after {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background:
-            repeating-linear-gradient(
-              0deg,
-              transparent,
-              transparent 2px,
-              rgba(0, 255, 65, 0.03) 2px,
-              rgba(0, 255, 65, 0.03) 4px
-            );
-          pointer-events: none;
-          z-index: 1;
-        }
-      ` : ""}
-
-      #wplace-stats-container {
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.primary} 0%, #1a1a1a 100%)`
-          : theme.primary
-        };
-        border: ${theme.borderWidth} ${theme.borderStyle} ${CONFIG.currentTheme === "Classic Autobot" ? theme.accent : theme.text};
-        border-radius: ${theme.borderRadius};
-        box-shadow: ${theme.boxShadow};
-        font-family: ${theme.fontFamily};
-        color: ${theme.text};
-        ${theme.backdropFilter ? `backdrop-filter: ${theme.backdropFilter};` : ""}
-        ${CONFIG.currentTheme === "Neon Retro" ? "image-rendering: pixelated;" : ""}
-      }
-
-      .wplace-header {
-        padding: ${CONFIG.currentTheme === "Neon Retro" ? "8px 12px" : "8px 12px"};
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.secondary} 0%, #2a2a2a 100%)`
-          : theme.secondary
-        };
-        color: ${theme.highlight};
-        font-size: ${CONFIG.currentTheme === "Neon Retro" ? "11px" : "13px"};
-        font-weight: ${CONFIG.currentTheme === "Neon Retro" ? "normal" : "700"};
-        border-bottom: ${CONFIG.currentTheme === "Neon Retro" ? "2px" : "1px"} solid ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255,255,255,0.1)" : theme.text};
-        ${CONFIG.currentTheme === "Classic Autobot" ? "text-shadow: 0 1px 2px rgba(0,0,0,0.5);" : "text-transform: uppercase; letter-spacing: 1px;"}
-        font-family: ${theme.fontFamily};
-      }
-
-      .wplace-header-title { gap: ${CONFIG.currentTheme === "Neon Retro" ? "6px" : "6px"}; }
-      .wplace-header-controls { gap: ${CONFIG.currentTheme === "Neon Retro" ? "6px" : "6px"}; }
-
-      .wplace-header-btn {
-        background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255,255,255,0.1)" : theme.accent};
-        border: ${CONFIG.currentTheme === "Neon Retro" ? `2px solid ${theme.text}` : "none"};
-        color: ${theme.text};
-        border-radius: ${CONFIG.currentTheme === "Classic Autobot" ? "4px" : "0"};
-        width: ${CONFIG.currentTheme === "Classic Autobot" ? "18px" : "auto"};
-        height: ${CONFIG.currentTheme === "Classic Autobot" ? "18px" : "auto"};
-        padding: ${CONFIG.currentTheme === "Neon Retro" ? "4px 6px" : "0"};
-        font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "10px"};
-        font-family: ${theme.fontFamily};
-        ${CONFIG.currentTheme === "Neon Retro" ? "image-rendering: pixelated;" : ""}
-      }
-      .wplace-header-btn:hover {
-        background: ${CONFIG.currentTheme === "Classic Autobot" ? theme.accent : theme.text};
-        color: ${CONFIG.currentTheme === "Classic Autobot" ? theme.text : theme.primary};
-        ${CONFIG.currentTheme === "Neon Retro" ? `box-shadow: 0 0 10px ${theme.text};` : ""}
-      }
-
-      .wplace-content { padding: ${CONFIG.currentTheme === "Neon Retro" ? "12px" : "12px"}; }
-      .wplace-section { border-radius: ${theme.borderRadius}; }
-      .wplace-section-title { color: ${theme.highlight}; }
-
-      .wplace-btn {
-        padding: ${CONFIG.currentTheme === "Neon Retro" ? "12px 8px" : "8px 12px"};
-        border: ${CONFIG.currentTheme === "Neon Retro" ? "2px solid" : "none"};
-        border-radius: ${theme.borderRadius};
-        font-weight: ${CONFIG.currentTheme === "Neon Retro" ? "normal" : "500"};
-        gap: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "6px"};
-        font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "11px"};
-        font-family: ${theme.fontFamily};
-        ${CONFIG.currentTheme === "Neon Retro" ? "text-transform: uppercase; letter-spacing: 1px; image-rendering: pixelated;" : ""}
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.accent} 0%, #4a4a4a 100%)`
-          : theme.accent
-        };
-        ${CONFIG.currentTheme === "Classic Autobot" ? "border: 1px solid rgba(255,255,255,0.1);" : ""}
-      }
-
-      ${CONFIG.currentTheme === "Classic Autobot" ? `
-        .wplace-btn::before {
-          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
-          transition: left 0.5s ease;
-        }
-        .wplace-btn:hover:not(:disabled)::before { left: 100%; }
-        .wplace-btn:hover:not(:disabled) {
-          transform: translateY(-1px);
-          box-shadow: 0 4px 12px rgba(0,0,0,0.4);
-        }
-      ` : `
-        .wplace-btn:hover:not(:disabled) { box-shadow: 0 0 15px currentColor; }
-      `}
-
-      .wplace-btn-primary {
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.accent} 0%, #6a5acd 100%)`
-          : theme.accent
-        };
-        color: ${theme.text};
-        ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.text};` : ""}
-      }
-
-      .wplace-btn-upload {
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.secondary} 0%, #4a4a4a 100%)`
-          : theme.purple
-        };
-        color: ${theme.text};
-        ${CONFIG.currentTheme === "Classic Autobot"
-          ? `border: 1px dashed ${theme.highlight};`
-          : `border-color: ${theme.text}; border-style: dashed;`
-        }
-      }
-
-      .wplace-btn-start {
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.success} 0%, #228b22 100%)`
-          : theme.success
-        };
-        color: ${CONFIG.currentTheme === "Classic Autobot" ? "white" : theme.primary};
-        ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.success};` : ""}
-      }
-
-      .wplace-btn-stop {
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.error} 0%, #dc143c 100%)`
-          : theme.error
-        };
-        color: ${CONFIG.currentTheme === "Classic Autobot" ? "white" : theme.text};
-        ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.error};` : ""}
-      }
-
-      .wplace-btn-select {
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.highlight} 0%, #9370db 100%)`
-          : theme.highlight
-        };
-        color: ${CONFIG.currentTheme === "Classic Autobot" ? "white" : theme.primary};
-        ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.highlight};` : ""}
-      }
-
-      .wplace-btn-file {
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? "linear-gradient(135deg, #ff8c00 0%, #ff7f50 100%)"
-          : theme.warning
-        };
-        color: ${CONFIG.currentTheme === "Classic Autobot" ? "white" : theme.primary};
-        ${CONFIG.currentTheme === "Neon Retro" ? `border-color: ${theme.warning};` : ""}
-      }
-
-      .wplace-btn:disabled { opacity: ${CONFIG.currentTheme === "Classic Autobot" ? "0.5" : "0.3"}; }
-
-      .wplace-stats {
-        background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255,255,255,0.03)" : theme.secondary};
-        padding: ${CONFIG.currentTheme === "Neon Retro" ? "12px" : "8px"};
-        border: ${CONFIG.currentTheme === "Neon Retro" ? `2px solid ${theme.text}` : "1px solid rgba(255,255,255,0.1)"};
-        border-radius: ${theme.borderRadius};
-        margin-bottom: ${CONFIG.currentTheme === "Neon Retro" ? "15px" : "8px"};
-        ${CONFIG.currentTheme === "Neon Retro" ? "box-shadow: inset 0 0 10px rgba(0, 255, 65, 0.1);" : ""}
-      }
-
-      .wplace-stat-item {
-        padding: ${CONFIG.currentTheme === "Neon Retro" ? "6px 0" : "4px 0"};
-        font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "11px"};
-        ${CONFIG.currentTheme === "Neon Retro" ? "text-transform: uppercase; letter-spacing: 1px;" : ""}
-      }
-      .wplace-stat-label { font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "10px"}; }
-      .wplace-stat-value { color: ${theme.highlight}; }
-
-      .wplace-progress {
-        background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(0,0,0,0.3)" : theme.secondary};
-        border: ${CONFIG.currentTheme === "Neon Retro" ? `2px solid ${theme.text}` : "1px solid rgba(255,255,255,0.1)"};
-        border-radius: ${theme.borderRadius};
-        margin: ${CONFIG.currentTheme === "Neon Retro" ? "10px 0" : "8px 0"};
-        height: ${CONFIG.currentTheme === "Neon Retro" ? "16px" : "6px"};
-      }
-
-      ${CONFIG.currentTheme === "Neon Retro" ? `
-        .wplace-progress::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background:
-            repeating-linear-gradient(
-              45deg,
-              transparent,
-              transparent 2px,
-              rgba(0, 255, 65, 0.1) 2px,
-              rgba(0, 255, 65, 0.1) 4px
-            );
-          pointer-events: none;
-        }
-      ` : ""}
-
-      .wplace-progress-bar {
-        height: ${CONFIG.currentTheme === "Neon Retro" ? "100%" : "6px"};
-        background: ${CONFIG.currentTheme === "Classic Autobot"
-          ? `linear-gradient(135deg, ${theme.highlight} 0%, #9370db 100%)`
-          : `linear-gradient(90deg, ${theme.success}, ${theme.neon})`
-        };
-        transition: width ${CONFIG.currentTheme === "Neon Retro" ? "0.3s" : "0.5s"} ease;
-        ${CONFIG.currentTheme === "Neon Retro" ? `box-shadow: 0 0 10px ${theme.success};` : ""}
-      }
-
-      ${CONFIG.currentTheme === "Classic Autobot" ? `
-        .wplace-progress-bar::after {
-          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-          animation: shimmer 2s infinite;
-        }
-      ` : `
-        .wplace-progress-bar::after {
-          background: ${theme.text};
-        }
-      `}
-
-      .wplace-status {
-        padding: ${CONFIG.currentTheme === "Neon Retro" ? "10px" : "6px"};
-        border: ${CONFIG.currentTheme === "Neon Retro" ? "2px solid" : "1px solid"};
-        border-radius: ${theme.borderRadius};
-        font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "11px"};
-        ${CONFIG.currentTheme === "Neon Retro" ? "text-transform: uppercase; letter-spacing: 1px;" : ""}
-      }
-
-      .status-default {
-        background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255,255,255,0.1)" : theme.accent};
-        border-color: ${theme.text};
-        color: ${theme.text};
-      }
-      .status-success {
-        background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(0, 255, 0, 0.1)" : theme.success};
-        border-color: ${theme.success};
-        color: ${CONFIG.currentTheme === "Classic Autobot" ? theme.success : theme.primary};
-        box-shadow: 0 0 15px ${theme.success};
-      }
-      .status-error {
-        background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255, 0, 0, 0.1)" : theme.error};
-        border-color: ${theme.error};
-        color: ${CONFIG.currentTheme === "Classic Autobot" ? theme.error : theme.text};
-        box-shadow: 0 0 15px ${theme.error};
-      }
-      .status-warning {
-        background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255, 165, 0, 0.1)" : theme.warning};
-        border-color: ${theme.warning};
-        color: ${CONFIG.currentTheme === "Classic Autobot" ? "orange" : theme.primary};
-        box-shadow: 0 0 15px ${theme.warning};
-      }
-
-      /* Settings and other dynamic elements */
-      .resize-container {
-        background: ${theme.primary};
-        border: ${theme.borderWidth} ${theme.borderStyle} ${theme.text};
-        border-radius: ${theme.borderRadius};
-        box-shadow: ${CONFIG.currentTheme === "Classic Autobot" ? "0 0 20px rgba(0,0,0,0.5)" : "0 0 30px rgba(0, 255, 65, 0.5)"};
-        font-family: ${theme.fontFamily};
-      }
-
-      .resize-preview-wrapper { border: 1px solid ${theme.accent}; }
-      
-      .resize-controls label {
-        font-size: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "12px"};
-        ${CONFIG.currentTheme === "Neon Retro" ? "text-transform: uppercase; letter-spacing: 1px;" : ""}
-        color: ${theme.text};
-      }
-
-      .resize-slider {
-        height: ${CONFIG.currentTheme === "Neon Retro" ? "8px" : "4px"};
-        background: ${CONFIG.currentTheme === "Classic Autobot" ? "#ccc" : theme.secondary};
-        border: ${CONFIG.currentTheme === "Neon Retro" ? `2px solid ${theme.text}` : "none"};
-        border-radius: ${theme.borderRadius};
-      }
-
-      ${CONFIG.currentTheme === "Neon Retro" ? `
-        .resize-slider::-webkit-slider-thumb {
-          width: 16px;
-          height: 16px;
-          background: ${theme.highlight};
-          border: 2px solid ${theme.text};
-          border-radius: 0;
-          box-shadow: 0 0 5px ${theme.highlight};
-        }
-
-        .resize-slider::-moz-range-thumb {
-          width: 16px;
-          height: 16px;
-          background: ${theme.highlight};
-          border: 2px solid ${theme.text};
-          border-radius: 0;
-          box-shadow: 0 0 5px ${theme.highlight};
-        }
-      ` : ""}
-
-      .wplace-slider::-webkit-slider-thumb { background: ${theme.highlight}; }
-
-      ${CONFIG.currentTheme === "Neon Retro" ? `
-        input[type="checkbox"] {
-          width: 16px;
-          height: 16px;
-          border: 2px solid ${theme.text};
-          background: ${theme.secondary};
-        }
-        input[type="checkbox"]:checked { background: ${theme.success}; }
-        input[type="checkbox"]:checked::after { color: ${theme.primary}; }
-      ` : ""}
-
-      /* Additional theme-specific styles */
-      .wplace-btn.active,
-      .wplace-btn[aria-pressed="true"] {
-        background: ${theme.highlight} !important;
-        color: ${theme.primary} !important;
-        border-color: ${theme.text} !important;
-      }
-      
-      .wplace-btn.active i,
-      .wplace-btn[aria-pressed="true"] i { filter: drop-shadow(0 0 3px ${theme.primary}); }
-    `
-    document.head.appendChild(style)
-
     const container = document.createElement("div")
     container.id = "wplace-image-bot-container"
     container.innerHTML = `
@@ -6939,6 +6562,7 @@
 
   // Load theme preference immediately on startup before creating UI
   loadThemePreference()
+  applyTheme()
 
   createUI().then(() => {
     // Generate token automatically after UI is ready
diff --git a/auto-image-styles.css b/auto-image-styles.css
index 08d4998..466c157 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1152,4 +1152,4 @@
 
 .wplace-theme--neon .wplace-btn:hover:not(:disabled) {
   animation: pixelBlink 0.5s infinite;
-}
\ No newline at end of file
+}

From 37c0997d8473216ecc1074a8a4db1cd15be52873 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Mon, 25 Aug 2025 19:54:07 +0200
Subject: [PATCH 20/36] refactor: decouple CSS from Settings and Resize dialogs

Replace inline styles with semantic CSS classes for better maintainability
---
 Auto-Image.js         | 486 ++++++++++++----------------------
 auto-image-styles.css | 594 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 757 insertions(+), 323 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index 3e7f4a1..d20eba5 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -3455,168 +3455,82 @@ function applyTheme() {
     `;
 
     settingsContainer.innerHTML = `
-      <div class="wplace-settings-header" style="
-        background: ${theme.accent ? `${theme.accent}33` : 'rgba(255,255,255,0.1)'}; 
-        padding: 20px; 
-        border-bottom: 1px solid ${theme.accent || 'rgba(255,255,255,0.1)'}; 
-        cursor: move;
-        ${theme.animations?.scanline ? `
-          position: relative;
-          overflow: hidden;
-        ` : ''}
-      ">
-        ${theme.animations?.scanline ? `
-          <div style="
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, ${theme.neon || '#00ffff'}, transparent);
-            animation: scanline 2s linear infinite;
-          "></div>
-        ` : ''}
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-          <h3 style="
-            margin: 0; 
-            color: ${theme.text || 'white'}; 
-            font-size: 20px; 
-            font-weight: 300; 
-            display: flex; 
-            align-items: center; 
-            gap: 10px;
-            ${theme.animations?.glow ? `
-              text-shadow: 0 0 10px ${theme.highlight || theme.neon || '#00ffff'};
-            ` : ''}
-          ">
-            <i class="fas fa-cog" style="
-              font-size: 18px; 
-              animation: spin 2s linear infinite;
-              color: ${theme.highlight || theme.neon || '#00ffff'};
-            "></i>
+      <div class="wplace-settings-header">
+        <div class="wplace-settings-title-wrapper">
+          <h3 class="wplace-settings-title">
+            <i class="fas fa-cog wplace-settings-icon"></i>
             ${Utils.t("settings")}
           </h3>
-          <button id="closeSettingsBtn" style="
-            background: ${theme.accent ? `${theme.accent}66` : 'rgba(255,255,255,0.1)'};
-            color: ${theme.text || 'white'};
-            border: 1px solid ${theme.accent || 'rgba(255,255,255,0.2)'};
-            border-radius: ${theme.borderRadius === '0' ? '0' : '50%'};
-            width: 32px;
-            height: 32px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-            font-size: 14px;
-            font-weight: 300;
-            ${theme.animations?.glow ? `
-              box-shadow: 0 0 10px ${theme.error || '#ff0000'}33;
-            ` : ''}
-          " onmouseover="
-            this.style.background='${theme.error || '#ff0000'}66'; 
-            this.style.transform='scale(1.1)';
-            ${theme.animations?.glow ? `this.style.boxShadow='0 0 20px ${theme.error || '#ff0000'}';` : ''}
-          " onmouseout="
-            this.style.background='${theme.accent ? `${theme.accent}66` : 'rgba(255,255,255,0.1)'}'; 
-            this.style.transform='scale(1)';
-            ${theme.animations?.glow ? `this.style.boxShadow='0 0 10px ${theme.error || '#ff0000'}33';` : ''}
-          ">✕</button>
+          <button id="closeSettingsBtn" class="wplace-settings-close-btn">✕</button>
         </div>
       </div>
 
-      <div style="padding: 25px; max-height: 70vh; overflow-y: auto;">
+      <div class="wplace-settings-content">
         
         <!-- Token Source Selection -->
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 12px; color: white; font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 8px;">
-            <i class="fas fa-key" style="color: #4facfe; font-size: 16px;"></i>
+        <div class="wplace-settings-section">
+          <label class="wplace-settings-section-label">
+            <i class="fas fa-key wplace-icon-key"></i>
             Token Source
           </label>
-          <div style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; border: 1px solid rgba(255,255,255,0.1);">
-            <select id="tokenSourceSelect" style="
-              width: 100%;
-              padding: 12px 16px;
-              background: rgba(255,255,255,0.15);
-              color: white;
-              border: 1px solid rgba(255,255,255,0.2);
-              border-radius: 8px;
-              font-size: 14px;
-              outline: none;
-              cursor: pointer;
-              transition: all 0.3s ease;
-              font-family: inherit;
-              box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-            ">
-              <option value="generator" ${state.tokenSource === 'generator' ? 'selected' : ''} style="background: #2d3748; color: white; padding: 10px;">🤖 Automatic Token Generator (Recommended)</option>
-              <option value="hybrid" ${state.tokenSource === 'hybrid' ? 'selected' : ''} style="background: #2d3748; color: white; padding: 10px;">🔄 Generator + Auto Fallback</option>
-              <option value="manual" ${state.tokenSource === 'manual' ? 'selected' : ''} style="background: #2d3748; color: white; padding: 10px;">🎯 Manual Pixel Placement</option>
+          <div class="wplace-settings-section-wrapper">
+            <select id="tokenSourceSelect" class="wplace-settings-select">
+              <option value="generator" ${state.tokenSource === 'generator' ? 'selected' : ''} class="wplace-settings-option">🤖 Automatic Token Generator (Recommended)</option>
+              <option value="hybrid" ${state.tokenSource === 'hybrid' ? 'selected' : ''} class="wplace-settings-option">🔄 Generator + Auto Fallback</option>
+              <option value="manual" ${state.tokenSource === 'manual' ? 'selected' : ''} class="wplace-settings-option">🎯 Manual Pixel Placement</option>
             </select>
-            <p style="font-size: 12px; color: rgba(255,255,255,0.7); margin: 8px 0 0 0;">
+            <p class="wplace-settings-description">
               Generator mode creates tokens automatically. Hybrid mode falls back to manual when generator fails. Manual mode only uses pixel placement.
             </p>
           </div>
         </div>
 
         <!-- Automation Section -->
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 12px; color: white; font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 8px;">
-            <i class="fas fa-robot" style="color: #4facfe; font-size: 16px;"></i>
+        <div class="wplace-settings-section">
+          <label class="wplace-settings-section-label">
+            <i class="fas fa-robot wplace-icon-robot"></i>
             ${Utils.t("automation")}
           </label>
           <!-- Token generator is always enabled - settings moved to Token Source above -->
         </div>
 
         <!-- Overlay Settings Section -->
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 12px; color: ${theme.text || 'white'}; font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 8px;">
-            <i class="fas fa-eye" style="color: ${theme.highlight || '#48dbfb'}; font-size: 16px;"></i>
+        <div class="wplace-settings-section">
+          <label class="wplace-settings-section-label" style="color: ${theme.text || 'white'};">
+            <i class="fas fa-eye wplace-icon-eye" style="color: ${theme.highlight || '#48dbfb'};"></i>
             Overlay Settings
           </label>
-          <div style="
+          <div class="wplace-settings-section-wrapper wplace-overlay-wrapper" style="
             background: ${theme.accent ? `${theme.accent}20` : 'rgba(255,255,255,0.1)'}; 
             border-radius: ${theme.borderRadius || '12px'}; 
-            padding: 18px; 
             border: 1px solid ${theme.accent || 'rgba(255,255,255,0.1)'};
             ${theme.animations?.glow ? `
               box-shadow: 0 0 15px ${theme.accent || 'rgba(255,255,255,0.1)'}33;
             ` : ''}
           ">
               <!-- Opacity Slider -->
-              <div style="margin-bottom: 15px;">
-                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">
-                   <span style="font-weight: 500; font-size: 13px; color: ${theme.text || 'white'};">Overlay Opacity</span>
-                   <div id="overlayOpacityValue" style="
-                     min-width: 40px; 
-                     text-align: center; 
+              <div class="wplace-overlay-opacity-control">
+                <div class="wplace-overlay-opacity-header">
+                   <span class="wplace-overlay-opacity-label" style="color: ${theme.text || 'white'};">Overlay Opacity</span>
+                   <div id="overlayOpacityValue" class="wplace-overlay-opacity-value" style="
                      background: ${theme.secondary || 'rgba(0,0,0,0.2)'}; 
                      color: ${theme.text || 'white'};
-                     padding: 4px 8px; 
                      border-radius: ${theme.borderRadius === '0' ? '0' : '6px'}; 
-                     font-size: 12px;
                      border: 1px solid ${theme.accent || 'transparent'};
                    ">${Math.round(state.overlayOpacity * 100)}%</div>
                 </div>
-                <input type="range" id="overlayOpacitySlider" min="0.1" max="1" step="0.05" value="${state.overlayOpacity}" style="
-                  width: 100%; 
-                  -webkit-appearance: none; 
-                  height: 8px; 
+                <input type="range" id="overlayOpacitySlider" min="0.1" max="1" step="0.05" value="${state.overlayOpacity}" class="wplace-overlay-opacity-slider" style="
                   background: linear-gradient(to right, ${theme.highlight || '#48dbfb'} 0%, ${theme.purple || theme.neon || '#d3a4ff'} 100%); 
                   border-radius: ${theme.borderRadius === '0' ? '0' : '4px'}; 
-                  outline: none; 
-                  cursor: pointer;
                 ">
               </div>
               <!-- Blue Marble Toggle -->
-              <label for="enableBlueMarbleToggle" style="display: flex; align-items: center; justify-content: space-between; cursor: pointer;">
+              <label for="enableBlueMarbleToggle" class="wplace-blue-marble-toggle">
                   <div>
-                      <span style="font-weight: 500; color: ${theme.text || 'white'};">Blue Marble Effect</span>
-                      <p style="font-size: 12px; color: ${theme.text ? `${theme.text}BB` : 'rgba(255,255,255,0.7)'}; margin: 4px 0 0 0;">Renders a dithered "shredded" overlay.</p>
+                      <span class="wplace-blue-marble-title" style="color: ${theme.text || 'white'};">Blue Marble Effect</span>
+                      <p class="wplace-blue-marble-description" style="color: ${theme.text ? `${theme.text}BB` : 'rgba(255,255,255,0.7)'};">Renders a dithered "shredded" overlay.</p>
                   </div>
-                  <input type="checkbox" id="enableBlueMarbleToggle" ${state.blueMarbleEnabled ? 'checked' : ''} style="
-                    cursor: pointer; 
-                    width: 20px; 
-                    height: 20px;
+                  <input type="checkbox" id="enableBlueMarbleToggle" ${state.blueMarbleEnabled ? 'checked' : ''} class="wplace-blue-marble-checkbox" style="
                     accent-color: ${theme.highlight || '#48dbfb'};
                   "/>
               </label>
@@ -3624,211 +3538,137 @@ function applyTheme() {
         </div>
 
         <!-- Speed Control Section -->
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 12px; color: white; font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 8px;">
-            <i class="fas fa-tachometer-alt" style="color: #4facfe; font-size: 16px;"></i>
+        <div class="wplace-settings-section">
+          <label class="wplace-settings-section-label">
+            <i class="fas fa-tachometer-alt wplace-icon-speed"></i>
             ${Utils.t("paintingSpeed")}
           </label>
           
           <!-- Batch Mode Selection -->
-          <div style="margin-bottom: 15px;">
-            <label style="display: block; margin-bottom: 8px; color: rgba(255,255,255,0.9); font-weight: 500; font-size: 14px;">
-              <i class="fas fa-dice" style="color: #f093fb; margin-right: 6px;"></i>
+          <div class="wplace-batch-mode-selection">
+            <label class="wplace-batch-mode-label">
+              <i class="fas fa-dice wplace-icon-dice"></i>
               Batch Mode
             </label>
-            <select id="batchModeSelect" style="
-              width: 100%;
-              padding: 10px 12px;
-              background: rgba(255,255,255,0.15);
-              color: white;
-              border: 1px solid rgba(255,255,255,0.2);
-              border-radius: 8px;
-              font-size: 13px;
-              outline: none;
-              cursor: pointer;
-            ">
-              <option value="normal" style="background: #2d3748; color: white;">📦 Normal (Fixed Size)</option>
-              <option value="random" style="background: #2d3748; color: white;">🎲 Random (Range)</option>
+            <select id="batchModeSelect" class="wplace-batch-mode-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 Slider -->
-          <div id="normalBatchControls" style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px;">
-            <div style="display: flex; align-items: center; gap: 15px; margin-bottom: 10px;">
-              <input type="range" id="speedSlider" min="${CONFIG.PAINTING_SPEED.MIN}" max="${CONFIG.PAINTING_SPEED.MAX}" value="${CONFIG.PAINTING_SPEED.DEFAULT}"
-                style="
-                  flex: 1;
-                  height: 8px;
-                  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
-                  border-radius: 4px;
-                  outline: none;
-                  -webkit-appearance: none;
-                  cursor: pointer;
-                ">
-              <div id="speedValue" style="
-                min-width: 100px;
-                text-align: center;
-                background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-                padding: 8px 12px;
-                border-radius: 8px;
-                color: white;
-                font-weight: bold;
-                font-size: 13px;
-                box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3);
-                border: 1px solid rgba(255,255,255,0.2);
-              ">${CONFIG.PAINTING_SPEED.DEFAULT} (batch size)</div>
+          <div id="normalBatchControls" class="wplace-batch-controls wplace-normal-batch-controls">
+            <div class="wplace-speed-slider-container">
+              <input type="range" id="speedSlider" min="${CONFIG.PAINTING_SPEED.MIN}" max="${CONFIG.PAINTING_SPEED.MAX}" value="${CONFIG.PAINTING_SPEED.DEFAULT}" class="wplace-speed-slider">
+              <div id="speedValue" class="wplace-speed-value">${CONFIG.PAINTING_SPEED.DEFAULT} (batch size)</div>
             </div>
-            <div style="display: flex; justify-content: space-between; color: rgba(255,255,255,0.7); font-size: 11px; margin-top: 8px;">
-              <span><i class="fas fa-turtle"></i> ${CONFIG.PAINTING_SPEED.MIN}</span>
-              <span><i class="fas fa-rabbit"></i> ${CONFIG.PAINTING_SPEED.MAX}</span>
+            <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" style="display: none; background: rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; border: 1px solid rgba(255,255,255,0.1); margin-bottom: 15px;">
-            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
+          <div id="randomBatchControls" class="wplace-batch-controls wplace-random-batch-controls">
+            <div class="wplace-random-batch-grid">
               <div>
-                <label style="display: block; color: rgba(255,255,255,0.8); font-size: 12px; margin-bottom: 8px;">
-                  <i class="fas fa-arrow-down" style="color: #4facfe; margin-right: 4px;"></i>
+                <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}" style="
-                  width: 100%;
-                  padding: 10px 12px;
-                  background: rgba(255,255,255,0.1);
-                  color: white;
-                  border: 1px solid rgba(255,255,255,0.2);
-                  border-radius: 8px;
-                  font-size: 13px;
-                  outline: none;
-                ">
+                <input type="number" id="randomBatchMin" min="1" max="1000" value="${CONFIG.RANDOM_BATCH_RANGE.MIN}" class="wplace-random-batch-input">
               </div>
               <div>
-                <label style="display: block; color: rgba(255,255,255,0.8); font-size: 12px; margin-bottom: 8px;">
-                  <i class="fas fa-arrow-up" style="color: #00f2fe; margin-right: 4px;"></i>
+                <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}" style="
-                  width: 100%;
-                  padding: 10px 12px;
-                  background: rgba(255,255,255,0.1);
-                  color: white;
-                  border: 1px solid rgba(255,255,255,0.2);
-                  border-radius: 8px;
-                  font-size: 13px;
-                  outline: none;
-                ">
+                <input type="number" id="randomBatchMax" min="1" max="1000" value="${CONFIG.RANDOM_BATCH_RANGE.MAX}" class="wplace-random-batch-input">
               </div>
             </div>
-            <p style="font-size: 11px; color: rgba(255,255,255,0.6); margin: 8px 0 0 0; text-align: center;">
+            <p class="wplace-random-batch-description">
               🎲 Random batch size between min and max values
             </p>
           </div>
           
           <!-- Speed Control Toggle -->
-          <label style="display: flex; align-items: center; gap: 8px; color: white;">
-            <input type="checkbox" id="enableSpeedToggle" ${CONFIG.PAINTING_SPEED_ENABLED ? 'checked' : ''} style="cursor: pointer;"/>
+          <label class="wplace-speed-control-toggle">
+            <input type="checkbox" id="enableSpeedToggle" ${CONFIG.PAINTING_SPEED_ENABLED ? 'checked' : ''} class="wplace-speed-checkbox"/>
             <span>Enable painting speed limit (batch size control)</span>
           </label>
         </div>
 
         <!-- Notifications Section -->
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 12px; color: white; font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 8px;">
-            <i class="fas fa-bell" style="color: #ffd166; font-size: 16px;"></i>
+        <div class="wplace-settings-section">
+          <label class="wplace-settings-section-label">
+            <i class="fas fa-bell wplace-icon-bell"></i>
             Desktop Notifications
           </label>
-          <div style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; border: 1px solid rgba(255,255,255,0.1); display:flex; flex-direction:column; gap:10px;">
-            <label style="display:flex; align-items:center; justify-content:space-between;">
+          <div class="wplace-settings-section-wrapper wplace-notifications-wrapper">
+            <label class="wplace-notification-toggle">
               <span>Enable notifications</span>
-              <input type="checkbox" id="notifEnabledToggle" ${state.notificationsEnabled ? 'checked' : ''} style="width:18px; height:18px; cursor:pointer;" />
+              <input type="checkbox" id="notifEnabledToggle" ${state.notificationsEnabled ? 'checked' : ''} class="wplace-notification-checkbox" />
             </label>
-            <label style="display:flex; align-items:center; justify-content:space-between;">
+            <label class="wplace-notification-toggle">
               <span>Notify when charges reach threshold</span>
-              <input type="checkbox" id="notifOnChargesToggle" ${state.notifyOnChargesReached ? 'checked' : ''} style="width:18px; height:18px; cursor:pointer;" />
+              <input type="checkbox" id="notifOnChargesToggle" ${state.notifyOnChargesReached ? 'checked' : ''} class="wplace-notification-checkbox" />
             </label>
-            <label style="display:flex; align-items:center; justify-content:space-between;">
+            <label class="wplace-notification-toggle">
               <span>Only when tab is not focused</span>
-              <input type="checkbox" id="notifOnlyUnfocusedToggle" ${state.notifyOnlyWhenUnfocused ? 'checked' : ''} style="width:18px; height:18px; cursor:pointer;" />
+              <input type="checkbox" id="notifOnlyUnfocusedToggle" ${state.notifyOnlyWhenUnfocused ? 'checked' : ''} class="wplace-notification-checkbox" />
             </label>
-            <div style="display:flex; align-items:center; gap:10px;">
+            <div class="wplace-notification-interval">
               <span>Repeat every</span>
-              <input type="number" id="notifIntervalInput" min="1" max="60" value="${state.notificationIntervalMinutes}" style="width:70px; padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color:#fff;" />
+              <input type="number" id="notifIntervalInput" min="1" max="60" value="${state.notificationIntervalMinutes}" class="wplace-notification-interval-input" />
               <span>minute(s)</span>
             </div>
-            <div style="display:flex; gap:10px;">
-              <button id="notifRequestPermBtn" class="wplace-btn wplace-btn-secondary" style="flex:1;"><i class="fas fa-unlock"></i><span>Grant Permission</span></button>
-              <button id="notifTestBtn" class="wplace-btn" style="flex:1;"><i class="fas fa-bell"></i><span>Test</span></button>
+            <div class="wplace-notification-buttons">
+              <button id="notifRequestPermBtn" class="wplace-btn wplace-btn-secondary wplace-notification-perm-btn"><i class="fas fa-unlock"></i><span>Grant Permission</span></button>
+              <button id="notifTestBtn" class="wplace-btn wplace-notification-test-btn"><i class="fas fa-bell"></i><span>Test</span></button>
             </div>
           </div>
         </div>
 
         <!-- Theme Selection Section -->
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 12px; color: white; font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 8px;">
-            <i class="fas fa-palette" style="color: #f093fb; font-size: 16px;"></i>
+        <div class="wplace-settings-section">
+          <label class="wplace-settings-section-label">
+            <i class="fas fa-palette wplace-icon-palette"></i>
             ${Utils.t("themeSettings")}
           </label>
-          <div style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; border: 1px solid rgba(255,255,255,0.1);">
-            <select id="themeSelect" style="
-              width: 100%;
-              padding: 12px 16px;
-              background: rgba(255,255,255,0.15);
-              color: white;
-              border: 1px solid rgba(255,255,255,0.2);
-              border-radius: 8px;
-              font-size: 14px;
-              outline: none;
-              cursor: pointer;
-              transition: all 0.3s ease;
-              font-family: inherit;
-              box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-            ">
+          <div class="wplace-settings-section-wrapper">
+            <select id="themeSelect" class="wplace-settings-select">
               ${Object.keys(CONFIG.THEMES).map(themeName =>
-      `<option value="${themeName}" ${CONFIG.currentTheme === themeName ? 'selected' : ''} style="background: #2d3748; color: white; padding: 10px;">${themeName}</option>`
+      `<option value="${themeName}" ${CONFIG.currentTheme === themeName ? 'selected' : ''} class="wplace-settings-option">${themeName}</option>`
     ).join('')}
             </select>
           </div>
         </div>
 
         <!-- Language Selection Section -->
-        <div style="margin-bottom: 25px;">
-          <label style="display: block; margin-bottom: 12px; color: white; font-weight: 500; font-size: 16px; display: flex; align-items: center; gap: 8px;">
-            <i class="fas fa-globe" style="color: #ffeaa7; font-size: 16px;"></i>
+        <div class="wplace-settings-section">
+          <label class="wplace-settings-section-label">
+            <i class="fas fa-globe wplace-icon-globe"></i>
             ${Utils.t("language")}
           </label>
-          <div style="background: rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; border: 1px solid rgba(255,255,255,0.1);">
-            <select id="languageSelect" style="
-              width: 100%;
-              padding: 12px 16px;
-              background: rgba(255,255,255,0.15);
-              color: white;
-              border: 1px solid rgba(255,255,255,0.2);
-              border-radius: 8px;
-              font-size: 14px;
-              outline: none;
-              cursor: pointer;
-              transition: all 0.3s ease;
-              font-family: inherit;
-              box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-            ">
-              <option value="vi" ${state.language === 'vi' ? 'selected' : ''} style="background: #2d3748; color: white;">🇻🇳 Tiếng Việt</option>
-              <option value="id" ${state.language === 'id' ? 'selected' : ''} style="background: #2d3748; color: white;">🇮🇩 Bahasa Indonesia</option>
-              <option value="ru" ${state.language === 'ru' ? 'selected' : ''} style="background: #2d3748; color: white;">🇷🇺 Русский</option>
-              <option value="en" ${state.language === 'en' ? 'selected' : ''} style="background: #2d3748; color: white;">🇺🇸 English</option>
-              <option value="pt" ${state.language === 'pt' ? 'selected' : ''} style="background: #2d3748; color: white;">🇧🇷 Português</option>
-              <option value="fr" ${state.language === 'fr' ? 'selected' : ''} style="background: #2d3748; color: white;">🇫🇷 Français</option>
-              <option value="tr" ${state.language === 'tr' ? 'selected' : ''} style="background: #2d3748; color: white;">🇹🇷 Türkçe</option>
-              <option value="zh" ${state.language === 'zh' ? 'selected' : ''} style="background: #2d3748; color: white;">🇨🇳 简体中文</option>
-              <option value="zh-tw" ${state.language === 'zh-tw' ? 'selected' : ''} style="background: #2d3748; color: white;">🇹🇼 繁體中文</option>
-              <option value="ja" ${state.language === 'ja' ? 'selected' : ''} style="background: #2d3748; color: white;">🇯🇵 日本語</option>
-              <option value="ko" ${state.language === 'ko' ? 'selected' : ''} style="background: #2d3748; color: white;">🇰🇷 한국어</option>
+          <div class="wplace-settings-section-wrapper">
+            <select id="languageSelect" class="wplace-settings-select">
+              <option value="vi" ${state.language === 'vi' ? 'selected' : ''} class="wplace-settings-option">🇻🇳 Tiếng Việt</option>
+              <option value="id" ${state.language === 'id' ? 'selected' : ''} class="wplace-settings-option">🇮🇩 Bahasa Indonesia</option>
+              <option value="ru" ${state.language === 'ru' ? 'selected' : ''} class="wplace-settings-option">🇷🇺 Русский</option>
+              <option value="en" ${state.language === 'en' ? 'selected' : ''} class="wplace-settings-option">🇺🇸 English</option>
+              <option value="pt" ${state.language === 'pt' ? 'selected' : ''} class="wplace-settings-option">🇧🇷 Português</option>
+              <option value="fr" ${state.language === 'fr' ? 'selected' : ''} class="wplace-settings-option">🇫🇷 Français</option>
+              <option value="tr" ${state.language === 'tr' ? 'selected' : ''} class="wplace-settings-option">🇹🇷 Türkçe</option>
+              <option value="zh" ${state.language === 'zh' ? 'selected' : ''} class="wplace-settings-option">🇨🇳 简体中文</option>
+              <option value="zh-tw" ${state.language === 'zh-tw' ? 'selected' : ''} class="wplace-settings-option">🇹🇼 繁體中文</option>
+              <option value="ja" ${state.language === 'ja' ? 'selected' : ''} class="wplace-settings-option">🇯🇵 日本語</option>
+              <option value="ko" ${state.language === 'ko' ? 'selected' : ''} class="wplace-settings-option">🇰🇷 한국어</option>
               </select>
           </div>
         </div>
 
-        <div style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; margin-top: 10px;">
-             <button id="applySettingsBtn" style="
+        <div class="wplace-settings-footer">
+             <button id="applySettingsBtn" class="wplace-settings-apply-btn" style="
                 width: 100%;
                 ${CONFIG.CSS_CLASSES.BUTTON_PRIMARY}
              ">
@@ -3935,88 +3775,88 @@ function applyTheme() {
     const resizeContainer = document.createElement("div")
     resizeContainer.className = "resize-container"
     resizeContainer.innerHTML = `
-      <h3 style="margin-top: 0; color: ${theme.text}">${Utils.t("resizeImage")}</h3>
+      <h3 class="resize-dialog-title" style="color: ${theme.text}">${Utils.t("resizeImage")}</h3>
       <div class="resize-controls">
-        <label>
+        <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>
+        <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>
-        <label style="display: flex; align-items: center;">
+        <label class="resize-checkbox-label">
           <input type="checkbox" id="keepAspect" checked>
           Keep Aspect Ratio
         </label>
-        <label style="display: flex; align-items: center;">
+        <label class="resize-checkbox-label">
             <input type="checkbox" id="paintWhiteToggle" checked>
             Paint White Pixels
         </label>
         <div class="resize-zoom-controls">
-          <button id="zoomOutBtn" class="wplace-btn" title="Zoom Out" style="padding:4px 8px;"><i class="fas fa-search-minus"></i></button>
-          <input type="range" id="zoomSlider" class="resize-slider" min="0.1" max="20" value="1" step="0.05" style="max-width: 220px;">
-          <button id="zoomInBtn" class="wplace-btn" title="Zoom In" style="padding:4px 8px;"><i class="fas fa-search-plus"></i></button>
-          <button id="zoomFitBtn" class="wplace-btn" title="Fit to view" style="padding:4px 8px;">Fit</button>
-          <button id="zoomActualBtn" class="wplace-btn" title="Actual size (100%)" style="padding:4px 8px;">100%</button>
-          <button id="panModeBtn" class="wplace-btn" title="Pan (drag to move view)" style="padding:4px 8px;">
+          <button id="zoomOutBtn" class="wplace-btn resize-zoom-btn" title="Zoom Out"><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="Zoom In"><i class="fas fa-search-plus"></i></button>
+          <button id="zoomFitBtn" class="wplace-btn resize-zoom-btn" title="Fit to view">Fit</button>
+          <button id="zoomActualBtn" class="wplace-btn resize-zoom-btn" title="Actual size (100%)">100%</button>
+          <button id="panModeBtn" class="wplace-btn resize-zoom-btn" title="Pan (drag to move view)">
             <i class="fas fa-hand-paper"></i>
           </button>
-          <span id="zoomValue" style="margin-left:6px; min-width:48px; text-align:right; opacity:.85; font-size:12px;">100%</span>
-          <div id="cameraHelp" style="font-size:11px; opacity:.75; margin-left:auto;">
+          <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" style="position:relative; width:100%; height:100%; overflow:hidden;">
-            <div id="resizeCanvasStack" class="resize-canvas-stack" style="position:absolute; left:0; top:0; transform-origin: top left;">
+          <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 style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
-          <div>
-              <div style="display:flex; align-items:center; gap:6px; justify-content:space-between;">
-                <label style="font-size:12px; opacity:.85;">Brush</label>
-                <div style="display:flex; align-items:center; gap:6px;">
-                  <input id="maskBrushSize" type="range" min="1" max="7" step="1" value="1" style="width:120px;">
-                  <span id="maskBrushSizeValue" style="font-size:12px; opacity:.85; min-width:18px; text-align:center;">1</span>
+        <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="7" step="1" value="1" class="resize-tool-slider">
+                  <span id="maskBrushSizeValue" class="resize-tool-value">1</span>
                 </div>
               </div>
-            <div style="display:flex; align-items:center; gap:6px; justify-content:space-between;">
-              <label style="font-size:12px; opacity:.85;">Row/col size</label>
-              <div style="display:flex; align-items:center; gap:6px;">
-                <input id="rowColSize" type="range" min="1" max="7" step="1" value="1" style="width:120px;">
-                <span id="rowColSizeValue" style="font-size:12px; opacity:.85; min-width:18px; text-align:center;">1</span>
+            <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="7" step="1" value="1" class="resize-tool-slider">
+                <span id="rowColSizeValue" class="resize-tool-value">1</span>
               </div>
             </div>
           </div>
-          <div style="display:flex; align-items:center; gap:6px;">
-            <label style="font-size:12px; opacity:.85;">Mode</label>
-            <div class="mask-mode-group" style="display:flex; gap:6px;">
-              <button id="maskModeIgnore" class="wplace-btn" style="padding:4px 8px; font-size:12px;">Ignore</button>
-              <button id="maskModeUnignore" class="wplace-btn" style="padding:4px 8px; font-size:12px;">Unignore</button>
-              <button id="maskModeToggle" class="wplace-btn wplace-btn-primary" style="padding:4px 8px; font-size:12px;">Toggle</button>
+          <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" title="Clear all ignored pixels" style="padding:4px 8px; font-size:12px;">Clear</button>
-          <button id="invertMaskBtn" class="wplace-btn" title="Invert mask" style="padding:4px 8px; font-size:12px;">Invert</button>
-          <span style="opacity:.8; font-size:12px;">Shift = Row • Alt = Column</span>
+          <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" id="color-palette-section" style="margin-top: 15px;">
+      <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 style="display: flex; align-items: center; gap: 8px; font-size: 12px;">
-                      <input type="checkbox" id="showAllColorsToggle" style="cursor: pointer;">
+                  <label class="resize-color-toggle-label">
+                      <input type="checkbox" id="showAllColorsToggle" class="resize-color-checkbox">
                       <span>Show All Colors (including unavailable)</span>
                   </label>
               </div>
@@ -4028,50 +3868,50 @@ function applyTheme() {
           </div>
       </div>
 
-      <div class="wplace-section" id="advanced-color-section" style="margin-top: 15px;">
+      <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 style="display:flex; flex-direction:column; gap:10px;">
-          <label style="display:flex; flex-direction:column; gap:4px; font-size:12px;">
-            <span style="font-weight:600;">Algorithm</span>
-            <select id="colorAlgorithmSelect" style="padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color:#fff;">
+        <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':''}>Legacy (RGB)</option>
             </select>
           </label>
-          <label style="display:flex; align-items:center; justify-content:space-between; font-size:12px;">
-            <div style="flex:1;">
-              <span style="font-weight:600;">Chroma Penalty</span>
-              <div style="margin-top:2px; opacity:0.65;">Preserve vivid colors (Lab only)</div>
+          <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':''} style="width:18px; height:18px; cursor:pointer;" />
+            <input type="checkbox" id="enableChromaPenaltyToggle" ${state.enableChromaPenalty?'checked':''} class="resize-advanced-checkbox" />
           </label>
-          <div>
-            <div style="display:flex; justify-content:space-between; font-size:11px; margin-bottom:4px;">
+          <div class="resize-chroma-weight-control">
+            <div class="resize-chroma-weight-header">
               <span>Chroma Weight</span>
-              <span id="chromaWeightValue" style="background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:4px;">${state.chromaPenaltyWeight}</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}" style="width:100%;" />
+            <input type="range" id="chromaPenaltyWeightSlider" min="0" max="0.5" step="0.01" value="${state.chromaPenaltyWeight}" class="resize-chroma-weight-slider" />
           </div>
-          <label style="display:flex; align-items:center; justify-content:space-between; font-size:12px;">
-            <div style="flex:1;">
-              <span style="font-weight:600;">Enable Dithering</span>
-              <div style="margin-top:2px; opacity:0.65;">Floyd–Steinberg error diffusion in preview and applied output</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':''} style="width:18px; height:18px; cursor:pointer;" />
+            <input type="checkbox" id="enableDitheringToggle" ${state.ditheringEnabled?'checked':''} class="resize-advanced-checkbox" />
           </label>
-          <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
-            <label style="display:flex; flex-direction:column; gap:4px; font-size:12px;">
-              <span style="font-weight:600;">Transparency</span>
-              <input type="number" id="transparencyThresholdInput" min="0" max="255" value="${state.customTransparencyThreshold}" style="padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color:#fff;" />
+          <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 style="display:flex; flex-direction:column; gap:4px; font-size:12px;">
-              <span style="font-weight:600;">White Thresh</span>
-              <input type="number" id="whiteThresholdInput" min="200" max="255" value="${state.customWhiteThreshold}" style="padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color:#fff;" />
+            <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" style="background:linear-gradient(135deg,#ff6a6a,#ff4757); font-size:11px;">Reset Advanced</button>
+          <button id="resetAdvancedColorBtn" class="wplace-btn resize-reset-advanced-btn">Reset Advanced</button>
         </div>
       </div>
 
diff --git a/auto-image-styles.css b/auto-image-styles.css
index 466c157..f6ee173 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1153,3 +1153,597 @@
 .wplace-theme--neon .wplace-btn:hover:not(:disabled) {
   animation: pixelBlink 0.5s infinite;
 }
+
+/* ===================================== */
+/* Settings Dialog Styles               */
+/* ===================================== */
+
+/* Settings content container */
+.wplace-settings-content {
+  padding: 25px;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+/* Settings section containers */
+.wplace-settings-section {
+  margin-bottom: 25px;
+}
+
+/* Section labels */
+.wplace-settings-section-label {
+  display: block;
+  margin-bottom: 12px;
+  color: white;
+  font-weight: 500;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Icon colors */
+.wplace-icon-key {
+  color: #4facfe;
+  font-size: 16px;
+}
+
+.wplace-icon-robot {
+  color: #4facfe;
+  font-size: 16px;
+}
+
+.wplace-icon-speed {
+  color: #4facfe;
+  font-size: 16px;
+}
+
+.wplace-icon-bell {
+  color: #ffd166;
+  font-size: 16px;
+}
+
+.wplace-icon-palette {
+  color: #f093fb;
+  font-size: 16px;
+}
+
+.wplace-icon-globe {
+  color: #ffeaa7;
+  font-size: 16px;
+}
+
+/* Section wrapper styling */
+.wplace-settings-section-wrapper {
+  background: rgba(255,255,255,0.1);
+  border-radius: 12px;
+  padding: 18px;
+  border: 1px solid rgba(255,255,255,0.1);
+}
+
+/* Select dropdowns */
+.wplace-settings-select {
+  width: 100%;
+  padding: 12px 16px;
+  background: rgba(255,255,255,0.15);
+  color: white;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: inherit;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+}
+
+.wplace-settings-option {
+  background: #2d3748;
+  color: white;
+  padding: 10px;
+}
+
+/* Settings description text */
+.wplace-settings-description {
+  font-size: 12px;
+  color: rgba(255,255,255,0.7);
+  margin: 8px 0 0 0;
+}
+
+/* Batch Mode Controls */
+.wplace-batch-mode-selection {
+  margin-bottom: 15px;
+}
+
+.wplace-batch-mode-label {
+  display: block;
+  margin-bottom: 8px;
+  color: rgba(255,255,255,0.9);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.wplace-icon-dice {
+  color: #f093fb;
+  margin-right: 6px;
+}
+
+.wplace-batch-mode-select {
+  width: 100%;
+  padding: 10px 12px;
+  background: rgba(255,255,255,0.15);
+  color: white;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  font-size: 13px;
+  outline: none;
+  cursor: pointer;
+}
+
+/* Batch Controls */
+.wplace-batch-controls {
+  background: rgba(255,255,255,0.1);
+  border-radius: 12px;
+  padding: 18px;
+  border: 1px solid rgba(255,255,255,0.1);
+  margin-bottom: 15px;
+}
+
+.wplace-random-batch-controls {
+  display: none;
+}
+
+/* Speed Slider Container */
+.wplace-speed-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 10px;
+}
+
+.wplace-speed-slider {
+  flex: 1;
+  height: 8px;
+  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
+  border-radius: 4px;
+  outline: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+.wplace-speed-value {
+  min-width: 100px;
+  text-align: center;
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: white;
+  font-weight: bold;
+  font-size: 13px;
+  box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3);
+  border: 1px solid rgba(255,255,255,0.2);
+}
+
+.wplace-speed-labels {
+  display: flex;
+  justify-content: space-between;
+  color: rgba(255,255,255,0.7);
+  font-size: 11px;
+  margin-top: 8px;
+}
+
+/* Random Batch Controls */
+.wplace-random-batch-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 15px;
+}
+
+.wplace-random-batch-label {
+  display: block;
+  color: rgba(255,255,255,0.8);
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+
+.wplace-icon-min {
+  color: #4facfe;
+  margin-right: 4px;
+}
+
+.wplace-icon-max {
+  color: #00f2fe;
+  margin-right: 4px;
+}
+
+.wplace-random-batch-input {
+  width: 100%;
+  padding: 10px 12px;
+  background: rgba(255,255,255,0.1);
+  color: white;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  font-size: 13px;
+  outline: none;
+}
+
+.wplace-random-batch-description {
+  font-size: 11px;
+  color: rgba(255,255,255,0.6);
+  margin: 8px 0 0 0;
+  text-align: center;
+}
+
+/* Speed Control Toggle */
+.wplace-speed-control-toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: white;
+}
+
+.wplace-speed-checkbox {
+  cursor: pointer;
+}
+
+/* Overlay Settings */
+.wplace-overlay-opacity-control {
+  margin-bottom: 15px;
+}
+
+.wplace-overlay-opacity-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.wplace-overlay-opacity-label {
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.wplace-overlay-opacity-value {
+  min-width: 40px;
+  text-align: center;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.wplace-overlay-opacity-slider {
+  width: 100%;
+  -webkit-appearance: none;
+  height: 8px;
+  outline: none;
+  cursor: pointer;
+}
+
+.wplace-blue-marble-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.wplace-blue-marble-title {
+  font-weight: 500;
+}
+
+.wplace-blue-marble-description {
+  font-size: 12px;
+  margin: 4px 0 0 0;
+}
+
+.wplace-blue-marble-checkbox {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+
+/* Notifications */
+.wplace-notifications-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.wplace-notification-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.wplace-notification-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.wplace-notification-interval {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.wplace-notification-interval-input {
+  width: 70px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(255,255,255,0.2);
+  background: rgba(255,255,255,0.08);
+  color: #fff;
+}
+
+.wplace-notification-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.wplace-notification-perm-btn,
+.wplace-notification-test-btn {
+  flex: 1;
+}
+
+/* Settings Footer */
+.wplace-settings-footer {
+  border-top: 1px solid rgba(255,255,255,0.1);
+  padding-top: 20px;
+  margin-top: 10px;
+}
+
+.wplace-settings-apply-btn {
+  width: 100%;
+}
+
+/* ===================================== */
+/* Resize Dialog Styles                 */
+/* ===================================== */
+
+/* Resize dialog title */
+.resize-dialog-title {
+  margin-top: 0;
+}
+
+/* Resize control labels */
+.resize-control-label {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.resize-checkbox-label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 14px;
+  gap: 8px;
+}
+
+/* Zoom controls */
+.resize-zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 15px;
+  flex-wrap: wrap;
+}
+
+.resize-zoom-btn {
+  padding: 4px 8px;
+}
+
+.resize-zoom-slider {
+  max-width: 220px;
+}
+
+.resize-zoom-value {
+  margin-left: 6px;
+  min-width: 48px;
+  text-align: right;
+  opacity: 0.85;
+  font-size: 12px;
+}
+
+.resize-camera-help {
+  font-size: 11px;
+  opacity: 0.75;
+  margin-left: auto;
+}
+
+/* Canvas positioning */
+.resize-pan-stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.resize-canvas-positioned {
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform-origin: top left;
+}
+
+/* Resize tools */
+.resize-tools-container {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.resize-brush-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.resize-brush-control {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  justify-content: space-between;
+}
+
+.resize-tool-label {
+  font-size: 12px;
+  opacity: 0.85;
+}
+
+.resize-tool-input-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.resize-tool-slider {
+  width: 120px;
+}
+
+.resize-tool-value {
+  font-size: 12px;
+  opacity: 0.85;
+  min-width: 18px;
+  text-align: center;
+}
+
+.resize-mode-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.resize-mode-group {
+  display: flex;
+  gap: 6px;
+}
+
+.resize-mode-btn,
+.resize-clear-btn,
+.resize-invert-btn {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.resize-shortcut-help {
+  opacity: 0.8;
+  font-size: 12px;
+}
+
+/* Color palette section */
+.resize-color-palette-section {
+  margin-top: 15px;
+}
+
+.resize-color-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.resize-color-checkbox {
+  cursor: pointer;
+}
+
+/* Advanced color section */
+.resize-advanced-color-section {
+  margin-top: 15px;
+}
+
+.resize-advanced-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.resize-advanced-label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.resize-advanced-label-text {
+  font-weight: 600;
+}
+
+.resize-advanced-select {
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(255,255,255,0.15);
+  background: rgba(255,255,255,0.05);
+  color: #fff;
+}
+
+.resize-advanced-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.resize-advanced-toggle-content {
+  flex: 1;
+}
+
+.resize-advanced-description {
+  margin-top: 2px;
+  opacity: 0.65;
+}
+
+.resize-advanced-checkbox {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+
+.resize-chroma-weight-control {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.resize-chroma-weight-header {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  margin-bottom: 4px;
+}
+
+.resize-chroma-weight-value {
+  background: rgba(255,255,255,0.08);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.resize-chroma-weight-slider {
+  width: 100%;
+}
+
+.resize-threshold-controls {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.resize-threshold-label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.resize-threshold-input {
+  padding: 6px 8px;
+  border-radius: 6px;
+  border: 1px solid rgba(255,255,255,0.15);
+  background: rgba(255,255,255,0.05);
+  color: #fff;
+}
+
+.resize-reset-advanced-btn {
+  background: linear-gradient(135deg, #ff6a6a, #ff4757);
+  font-size: 11px;
+}

From 83241d6ed44e18622005adba0f562fbceeb9ecc8 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Tue, 26 Aug 2025 18:22:34 +0200
Subject: [PATCH 21/36] css should be good

---
 auto-image-styles.css | 325 +++++++++++++++++++++++++++---------------
 1 file changed, 211 insertions(+), 114 deletions(-)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index f6ee173..a4efd12 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -7,10 +7,10 @@
 /* Theme tokens (CSS vars)   */
 /* ========================= */
 
-/* Default = Classic Autobot */
+/* Default = Classic Autobot - exact upstream main values */
 :root {
-  --wplace-primary: #000000;
-  --wplace-secondary: #111111;
+  --wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+  --wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
   --wplace-accent: #222222;
   --wplace-text: #ffffff;
   --wplace-highlight: #775ce3;
@@ -21,15 +21,14 @@
   --wplace-radius: 12px;
   --wplace-border-style: solid;
   --wplace-border-width: 1px;
-  --wplace-border-color: rgba(255, 255, 255, 0.1);
-  --wplace-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
-    0 0 0 1px rgba(255, 255, 255, 0.1);
+  --wplace-border-color: #222222;
+  --wplace-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
   --wplace-backdrop: blur(10px);
   --wplace-font: 'Segoe UI', Roboto, sans-serif;
 
   --wplace-z-overlay: 10000;
-  --wplace-z-alert: 10001;
-  --wplace-z-settings: 100001;
+  --wplace-z-alert: 10002;
+  --wplace-z-settings: 10002;
 
   /* feature toggles */
   --wplace-scanline: 0;
@@ -38,8 +37,8 @@
 
 /* Optional theme class hooks (you can switch these on body or html) */
 .wplace-theme--classic {
-  --wplace-primary: #000000;
-  --wplace-secondary: #111111;
+  --wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+  --wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
   --wplace-accent: #222222;
   --wplace-text: #ffffff;
   --wplace-highlight: #775ce3;
@@ -48,8 +47,7 @@
   --wplace-warning: #ffaa00;
 
   --wplace-radius: 12px;
-  --wplace-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
-    0 0 0 1px rgba(255, 255, 255, 0.1);
+  --wplace-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
   --wplace-backdrop: blur(10px);
   --wplace-font: 'Segoe UI', Roboto, sans-serif;
 
@@ -158,7 +156,6 @@
 /* Align with JS structure   */
 /* ========================= */
 #wplace-image-bot-container {
-  /* Why fixed sizes/positions: matches JS expectations and preserves two-panel layout */
   position: fixed;
   top: 20px;
   left: 20px;
@@ -171,16 +168,15 @@
   overflow-x: hidden;
   transition: all 0.3s ease;
   user-select: none;
-  display: none; /* JS will set display: block inline when ready */
-
-  /* Theme hooks */
-  background: var(--wplace-primary);
-  color: var(--wplace-text);
-  border-radius: var(--wplace-radius);
-  box-shadow: var(--wplace-shadow);
-  font-family: var(--wplace-font);
-  backdrop-filter: var(--wplace-backdrop);
-  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
+  
+  /* Exact upstream main styling */
+  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+  color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
+  font-family: 'Segoe UI', Roboto, sans-serif;
+  backdrop-filter: blur(10px);
+  border: 1px solid #222222;
 }
 
 #wplace-image-bot-container.wplace-dragging {
@@ -215,14 +211,14 @@
   user-select: none;
   display: none;
 
-  /* Theme hooks */
-  background: var(--wplace-primary);
-  color: var(--wplace-text);
-  border-radius: var(--wplace-radius);
-  box-shadow: var(--wplace-shadow);
-  font-family: var(--wplace-font);
-  backdrop-filter: var(--wplace-backdrop);
-  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
+  /* Exact upstream main styling */
+  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+  color: #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
+  font-family: 'Segoe UI', Roboto, sans-serif;
+  backdrop-filter: blur(10px);
+  border: 1px solid #222222;
 }
 
 #wplace-stats-container.wplace-dragging {
@@ -241,20 +237,21 @@
 /* Header and content blocks */
 /* ========================= */
 .wplace-header {
+  padding: 8px 12px;
+  background: var(--wplace-secondary);
+  color: var(--wplace-highlight);
+  font-size: 13px;
+  font-weight: 700;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: move;
   user-select: none;
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
   transition: background 0.2s ease;
   position: relative;
   z-index: 2;
-  padding: 8px 12px;
-
-  /* Theme hooks */
-  background: var(--wplace-secondary);
-  color: var(--wplace-highlight);
-  border-bottom: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 .wplace-header-title {
@@ -269,27 +266,26 @@
 }
 
 .wplace-header-btn {
+  background: rgba(255,255,255,0.1);
+  border: none;
+  color: #ffffff;
   cursor: pointer;
+  border-radius: 4px;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  font-size: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
-  background: rgba(255, 255, 255, 0.1);
-  color: inherit;
-  border: none;
-  border-radius: 4px;
-  width: 18px;
-  height: 18px;
-  font-size: 10px;
-  /* Theme tweak */
-  background: var(--wplace-accent);
-  color: var(--wplace-text);
+  font-family: 'Segoe UI', Roboto, sans-serif;
 }
 
 .wplace-header-btn:hover {
+  background: #222222;
+  color: #ffffff;
   transform: scale(1.1);
-  background: var(--wplace-text);
-  color: var(--wplace-primary);
 }
 
 .wplace-content {
@@ -352,19 +348,24 @@
 }
 
 .wplace-btn {
+  padding: 8px 12px;
+  border: none;
+  border-radius: 12px;
+  font-weight: 500;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 6px;
+  font-size: 11px;
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
-  padding: 8px 12px;
-  border-radius: var(--wplace-radius);
-  border: none;
-  background: var(--wplace-accent);
-  color: var(--wplace-text);
-  font-family: var(--wplace-font);
+  font-family: 'Segoe UI', Roboto, sans-serif;
+  
+  background: linear-gradient(135deg, #222222 0%, #4a4a4a 100%);
+  border: 1px solid rgba(255,255,255,0.1);
+  color: #ffffff;
 }
 
 .wplace-btn::before {
@@ -374,16 +375,17 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: left 0.5s;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+  transition: left 0.5s ease;
 }
 
-.wplace-btn:hover::before {
+.wplace-btn:hover:not(:disabled)::before {
   left: 100%;
 }
 
 .wplace-btn:hover:not(:disabled) {
-  box-shadow: 0 0 15px currentColor;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
 }
 
 .wplace-btn:active:not(:disabled) {
@@ -391,7 +393,7 @@
 }
 
 .wplace-btn:disabled {
-  opacity: 0.3;
+  opacity: 0.5;
   cursor: not-allowed;
   transform: none !important;
   box-shadow: none !important;
@@ -406,31 +408,36 @@
   box-shadow: 0 0 15px #8e2de2;
 }
 
-/* button variants via theme */
-.wplace-btn-start {
-  background: var(--wplace-success);
-  color: #000;
-}
-
-.wplace-btn-stop {
-  background: var(--wplace-error);
-  color: #fff;
-}
-
-.wplace-btn-select {
-  background: var(--wplace-highlight);
-  color: #000;
+/* button variants - exact upstream main colors */
+.wplace-btn-primary {
+  background: linear-gradient(135deg, #222222 0%, #6a5acd 100%);
+  color: #ffffff;
 }
 
 .wplace-btn-upload {
-  background: var(--wplace-secondary);
-  border: 1px dashed var(--wplace-highlight);
-  color: var(--wplace-text);
+  background: linear-gradient(135deg, #111111 0%, #4a4a4a 100%);
+  color: #ffffff;
+  border: 1px dashed #775ce3;
+}
+
+.wplace-btn-start {
+  background: linear-gradient(135deg, #00ff00 0%, #228b22 100%);
+  color: white;
+}
+
+.wplace-btn-stop {
+  background: linear-gradient(135deg, #ff0000 0%, #dc143c 100%);
+  color: white;
+}
+
+.wplace-btn-select {
+  background: linear-gradient(135deg, #775ce3 0%, #9370db 100%);
+  color: white;
 }
 
 .wplace-btn-file {
-  background: var(--wplace-warning);
-  color: #000;
+  background: linear-gradient(135deg, #ff8c00 0%, #ff7f50 100%);
+  color: white;
 }
 
 /* ========================= */
@@ -498,27 +505,30 @@
 /* Progress */
 .wplace-progress {
   width: 100%;
-  overflow: hidden;
-  position: relative;
-  background: var(--wplace-secondary);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: var(--wplace-radius);
+  background: rgba(0,0,0,0.3);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 12px;
   margin: 8px 0;
+  overflow: hidden;
   height: 6px;
+  position: relative;
 }
 
 .wplace-progress-bar {
-  position: relative;
   height: 6px;
+  background: linear-gradient(135deg, #775ce3 0%, #9370db 100%);
   transition: width 0.5s ease;
-  background: linear-gradient(135deg, var(--wplace-highlight) 0%, #9370db 100%);
+  position: relative;
 }
 
 .wplace-progress-bar::after {
   content: '';
   position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
   animation: shimmer 2s infinite;
 }
 
@@ -536,30 +546,30 @@
 }
 
 .status-default {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: var(--wplace-border-color);
-  color: var(--wplace-text);
+  background: rgba(255,255,255,0.1);
+  border-color: #ffffff;
+  color: #ffffff;
 }
 
 .status-success {
   background: rgba(0, 255, 0, 0.1);
-  border-color: var(--wplace-success);
-  color: var(--wplace-success);
-  box-shadow: 0 0 15px currentColor;
+  border-color: #00ff00;
+  color: #00ff00;
+  box-shadow: 0 0 15px #00ff00;
 }
 
 .status-error {
   background: rgba(255, 0, 0, 0.1);
-  border-color: var(--wplace-error);
-  color: var(--wplace-error);
-  box-shadow: 0 0 15px currentColor;
+  border-color: #ff0000;
+  color: #ff0000;
+  box-shadow: 0 0 15px #ff0000;
 }
 
 .status-warning {
   background: rgba(255, 165, 0, 0.1);
-  border-color: var(--wplace-warning);
-  color: var(--wplace-warning);
-  box-shadow: 0 0 15px currentColor;
+  border-color: #ffaa00;
+  color: orange;
+  box-shadow: 0 0 15px #ffaa00;
 }
 
 /* ========================= */
@@ -571,29 +581,28 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: var(--wplace-z-overlay);
+  background: #000000;
+  padding: 20px;
+  border: 1px solid #ffffff;
+  border-radius: 12px;
+  z-index: 10000;
+  box-shadow: 0 0 20px rgba(0,0,0,0.5);
   width: 90%;
   max-width: 700px;
   max-height: 90%;
   overflow: auto;
-
-  /* Theme */
-  background: var(--wplace-primary);
-  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-text);
-  border-radius: var(--wplace-radius);
-  box-shadow: var(--wplace-shadow);
-  font-family: var(--wplace-font);
+  font-family: 'Segoe UI', Roboto, sans-serif;
 }
 
 .resize-preview-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid #222222;
+  background: rgba(0,0,0,0.2);
   margin: 15px 0;
   height: 300px;
   overflow: hidden;
-  border: 1px solid var(--wplace-accent);
 }
 
 .resize-canvas-stack {
@@ -634,13 +643,22 @@
 }
 
 .wplace-btn.active,
-.wplace-btn[aria-pressed='true'] {
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(0, 0, 0, 0.2) !important;
+.wplace-btn[aria-pressed="true"] {
+  background: #775ce3 !important;
+  color: #000000 !important;
+  border-color: #ffffff !important;
+  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2) !important;
 }
 
+.wplace-btn.active i,
+.wplace-btn[aria-pressed="true"] i { filter: drop-shadow(0 0 3px #000000); }
+
 .mask-mode-group .wplace-btn.active,
-.mask-mode-group .wplace-btn[aria-pressed='true'] {
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset, 0 0 6px rgba(0, 0, 0, 0.2);
+.mask-mode-group .wplace-btn[aria-pressed="true"] {
+  background: #775ce3;
+  color: #000000;
+  border-color: #ffffff;
+  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2);
 }
 
 .resize-controls {
@@ -652,6 +670,10 @@
 
 .resize-slider {
   width: 100%;
+  height: 4px;
+  background: #ccc;
+  border: none;
+  border-radius: 12px;
   outline: none;
   -webkit-appearance: none;
 }
@@ -1747,3 +1769,78 @@
   background: linear-gradient(135deg, #ff6a6a, #ff4757);
   font-size: 11px;
 }
+
+/* ===================================== */
+/* Additional styles for exact upstream match */
+/* ===================================== */
+
+/* Overlay styles exact match */
+.resize-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.8);
+  z-index: 9999;
+  display: none;
+}
+
+/* Settings animations */
+@keyframes settingsSlideIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+/* Font styling corrections */
+.resize-controls label {
+  font-size: 12px;
+  color: #ffffff;
+}
+
+.resize-dialog-title {
+  margin-top: 0;
+  color: #ffffff;
+}
+
+/* Ensure proper z-indexing */
+.resize-container {
+  z-index: 10000;
+}
+
+/* Missing button hover styles */
+.resize-tools button {
+  padding: 6px 10px;
+  border-radius: 6px;
+  border: 1px solid rgba(255,255,255,0.2);
+  background: rgba(255,255,255,0.06);
+  color: #fff;
+  cursor: pointer;
+}
+
+/* Canvas styling */
+.resize-canvas-stack {
+  position: relative;
+  transform-origin: center center;
+  display: inline-block;
+}
+
+.resize-base-canvas,
+.resize-mask-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+  image-rendering: pixelated;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+}
+
+.resize-mask-canvas {
+  pointer-events: auto;
+}

From a6fbe3114f8b495002725051406d7498984170f4 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Tue, 26 Aug 2025 18:38:23 +0200
Subject: [PATCH 22/36] css should be good

---
 auto-image-styles.css | 332 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 319 insertions(+), 13 deletions(-)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index a4efd12..25897fb 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -362,6 +362,7 @@
   position: relative;
   overflow: hidden;
   font-family: 'Segoe UI', Roboto, sans-serif;
+  font-weight: 500;
   
   background: linear-gradient(135deg, #222222 0%, #4a4a4a 100%);
   border: 1px solid rgba(255,255,255,0.1);
@@ -417,7 +418,7 @@
 .wplace-btn-upload {
   background: linear-gradient(135deg, #111111 0%, #4a4a4a 100%);
   color: #ffffff;
-  border: 1px dashed #775ce3;
+  border: 1px dashed #775ce3 !important;
 }
 
 .wplace-btn-start {
@@ -829,18 +830,20 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  z-index: var(--wplace-z-alert);
-  min-width: 400px;
-  max-width: 500px;
-
-  /* Theme */
-  background: var(--wplace-primary);
-  color: var(--wplace-text);
-  font-family: var(--wplace-font);
-  border-radius: var(--wplace-radius);
-  box-shadow: var(--wplace-shadow);
-  backdrop-filter: var(--wplace-backdrop);
-  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
+  background: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(17, 17, 17) 100%);
+  border: 1px solid rgb(34, 34, 34);
+  border-radius: 12px;
+  padding: 0px;
+  z-index: 10002;
+  display: none;
+  min-width: 420px;
+  max-width: 480px;
+  color: rgb(255, 255, 255);
+  font-family: "Segoe UI", Roboto, sans-serif;
+  box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 32px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
+  backdrop-filter: blur(10px);
+  overflow: hidden;
+  animation: 0.4s ease-out 0s 1 normal none running slideIn;
 }
 
 .wplace-settings {
@@ -1844,3 +1847,306 @@
 .resize-mask-canvas {
   pointer-events: auto;
 }
+
+/* Additional precision fixes for exact upstream main matching */
+.wplace-status.status-default {
+  color: #ffffff;
+  background: rgba(255,255,255,0.1);
+  border-color: #ffffff;
+}
+
+/* ===================================== */
+/* Settings Dialog - Exact Upstream Match */
+/* ===================================== */
+
+.wplace-settings-header {
+  background: #22222233;
+  padding: 20px;
+  border-bottom: 1px solid #222222;
+  cursor: move;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.wplace-settings-header h3 {
+  margin: 0;
+  color: #ffffff;
+  font-size: 20px;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.wplace-settings-header .fa-cog {
+  font-size: 18px;
+  animation: spin 2s linear infinite;
+  color: #775ce3;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.wplace-settings-close-btn {
+  background: #22222266;
+  color: #ffffff;
+  border: 1px solid #222222;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  font-size: 14px;
+  font-weight: 300;
+}
+
+.wplace-settings-close-btn:hover {
+  background: #ff000066;
+  transform: scale(1.1);
+}
+
+.wplace-settings-content {
+  padding: 25px;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.wplace-settings-section {
+  margin-bottom: 25px;
+}
+
+.wplace-settings-section-label {
+  display: block;
+  margin-bottom: 12px;
+  color: white;
+  font-weight: 500;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.wplace-settings-section-wrapper {
+  background: rgba(255,255,255,0.1);
+  border-radius: 12px;
+  padding: 18px;
+  border: 1px solid rgba(255,255,255,0.1);
+}
+
+.wplace-settings-select {
+  width: 100%;
+  padding: 12px 16px;
+  background: rgba(255,255,255,0.15);
+  color: white;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-family: inherit;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+}
+
+.wplace-settings-select option {
+  background: #2d3748;
+  color: white;
+  padding: 10px;
+}
+
+.wplace-settings-description {
+  font-size: 12px;
+  color: rgba(255,255,255,0.7);
+  margin: 8px 0 0 0;
+}
+
+.wplace-settings-footer {
+  border-top: 1px solid rgba(255,255,255,0.1);
+  padding-top: 20px;
+  margin-top: 10px;
+}
+
+.wplace-settings-apply-btn {
+  width: 100%;
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 16px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: center;
+}
+
+/* Icon colors for settings sections */
+.wplace-icon-key { color: #4facfe; font-size: 16px; }
+.wplace-icon-robot { color: #4facfe; font-size: 16px; }
+.wplace-icon-speed { color: #4facfe; font-size: 16px; }
+.wplace-icon-bell { color: #ffd166; font-size: 16px; }
+.wplace-icon-palette { color: #f093fb; font-size: 16px; }
+.wplace-icon-globe { color: #ffeaa7; font-size: 16px; }
+.wplace-icon-eye { color: #775ce3; font-size: 16px; }
+
+/* Overlay Settings Controls */
+.wplace-overlay-opacity-control {
+  margin-bottom: 15px;
+}
+
+.wplace-overlay-opacity-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.wplace-overlay-opacity-label {
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.wplace-overlay-opacity-value {
+  min-width: 40px;
+  text-align: center;
+  background: #111111;
+  color: #ffffff;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  border: 1px solid #222222;
+}
+
+.wplace-overlay-opacity-slider {
+  width: 100%;
+  -webkit-appearance: none;
+  height: 8px;
+  background: linear-gradient(to right, #775ce3 0%, #d3a4ff 100%);
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+}
+
+.wplace-overlay-opacity-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: white;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.3), 0 0 0 2px #4facfe;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.wplace-overlay-opacity-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.2);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 0 0 3px #4facfe;
+}
+
+.wplace-blue-marble-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+.wplace-blue-marble-title {
+  font-weight: 500;
+}
+
+.wplace-blue-marble-description {
+  font-size: 12px;
+  color: #ffffffBB;
+  margin: 4px 0 0 0;
+}
+
+.wplace-blue-marble-checkbox {
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  accent-color: #775ce3;
+}
+
+/* Batch Mode Controls */
+.wplace-batch-mode-selection {
+  margin-bottom: 15px;
+}
+
+.wplace-batch-mode-label {
+  display: block;
+  margin-bottom: 8px;
+  color: rgba(255,255,255,0.9);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+.wplace-icon-dice {
+  color: #f093fb;
+  margin-right: 6px;
+}
+
+.wplace-batch-mode-select {
+  width: 100%;
+  padding: 10px 12px;
+  background: rgba(255,255,255,0.15);
+  color: white;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  font-size: 13px;
+  outline: none;
+  cursor: pointer;
+}
+
+.wplace-batch-controls {
+  background: rgba(255,255,255,0.1);
+  border-radius: 12px;
+  padding: 18px;
+  border: 1px solid rgba(255,255,255,0.1);
+  margin-bottom: 15px;
+}
+
+.wplace-speed-slider-container {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 10px;
+}
+
+.wplace-speed-slider {
+  flex: 1;
+  height: 8px;
+  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
+  border-radius: 4px;
+  outline: none;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+
+.wplace-speed-value {
+  min-width: 100px;
+  text-align: center;
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  padding: 8px 12px;
+  border-radius: 8px;
+  color: white;
+  font-weight: bold;
+  font-size: 13px;
+  box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3);
+  border: 1px solid rgba(255,255,255,0.2);
+}
+
+.wplace-speed-labels {
+  display: flex;
+  justify-content: space-between;
+  color: rgba(255,255,255,0.7);
+  font-size: 11px;
+  margin-top: 8px;
+}

From 35be2afbcdf94c4e82458135c91ea45d09e240b6 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Tue, 26 Aug 2025 18:56:40 +0200
Subject: [PATCH 23/36] css should be good

---
 auto-image-styles.css | 29 ++++++++++++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index 25897fb..424fe49 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -843,7 +843,33 @@
   box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 32px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
   backdrop-filter: blur(10px);
   overflow: hidden;
-  animation: 0.4s ease-out 0s 1 normal none running slideIn;
+}
+
+#wplace-settings-container.show {
+  display: block;
+  animation: settingsSlideIn 0.4s ease-out;
+}
+
+@keyframes settingsSlideIn {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes settingsFadeOut {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
 }
 
 .wplace-settings {
@@ -1885,6 +1911,7 @@
   color: #775ce3;
 }
 
+/* Add spin animation for settings gear icon */
 @keyframes spin {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }

From b8992c2a8b0a7bc11d591196213eb558947280bd Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Tue, 26 Aug 2025 19:07:50 +0200
Subject: [PATCH 24/36] fix close button pos

---
 auto-image-styles.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index 424fe49..00f41b8 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1890,9 +1890,7 @@
   padding: 20px;
   border-bottom: 1px solid #222222;
   cursor: move;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  position: relative;
 }
 
 .wplace-settings-header h3 {
@@ -1918,6 +1916,9 @@
 }
 
 .wplace-settings-close-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
   background: #22222266;
   color: #ffffff;
   border: 1px solid #222222;

From 22faeffb0ddcdc5a6d2fbc7ce18cbf39217a59e6 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Tue, 26 Aug 2025 19:14:40 +0200
Subject: [PATCH 25/36] fix close button pos

---
 auto-image-styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index 00f41b8..ca005f6 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1917,8 +1917,8 @@
 
 .wplace-settings-close-btn {
   position: absolute;
-  top: 6px;
-  right: 6px;
+  top: 20px;
+  right: 20px;
   background: #22222266;
   color: #ffffff;
   border: 1px solid #222222;

From a02232246e48ee550332917d18f33819fa0bfe23 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Tue, 26 Aug 2025 20:17:32 +0200
Subject: [PATCH 26/36] themes decoupled claude limit reached test what it has
 build

---
 auto-image-styles.css | 552 ++++++-------------------------------
 themes/classic.css    | 616 ++++++++++++++++++++++++++++++++++++++++++
 themes/neon.css       | 304 +++++++++++++++++++++
 3 files changed, 1006 insertions(+), 466 deletions(-)
 create mode 100644 themes/classic.css
 create mode 100644 themes/neon.css

diff --git a/auto-image-styles.css b/auto-image-styles.css
index ca005f6..9dd632e 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -7,73 +7,13 @@
 /* Theme tokens (CSS vars)   */
 /* ========================= */
 
-/* Default = Classic Autobot - exact upstream main values */
-:root {
-  --wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
-  --wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
-  --wplace-accent: #222222;
-  --wplace-text: #ffffff;
-  --wplace-highlight: #775ce3;
-  --wplace-success: #00ff00;
-  --wplace-error: #ff0000;
-  --wplace-warning: #ffaa00;
+/* Import theme files - classic is default */
+@import url('https://staninna.github.io/WPlace-AutoBOT/themes/classic.css');
+@import url('https://staninna.github.io/WPlace-AutoBOT/themes/neon.css');
 
-  --wplace-radius: 12px;
-  --wplace-border-style: solid;
-  --wplace-border-width: 1px;
-  --wplace-border-color: #222222;
-  --wplace-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
-  --wplace-backdrop: blur(10px);
-  --wplace-font: 'Segoe UI', Roboto, sans-serif;
-
-  --wplace-z-overlay: 10000;
-  --wplace-z-alert: 10002;
-  --wplace-z-settings: 10002;
-
-  /* feature toggles */
-  --wplace-scanline: 0;
-  --wplace-pixel-blink: 0;
-}
-
-/* Optional theme class hooks (you can switch these on body or html) */
-.wplace-theme--classic {
-  --wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
-  --wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
-  --wplace-accent: #222222;
-  --wplace-text: #ffffff;
-  --wplace-highlight: #775ce3;
-  --wplace-success: #00ff00;
-  --wplace-error: #ff0000;
-  --wplace-warning: #ffaa00;
-
-  --wplace-radius: 12px;
-  --wplace-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
-  --wplace-backdrop: blur(10px);
-  --wplace-font: 'Segoe UI', Roboto, sans-serif;
-
-  --wplace-scanline: 0;
-  --wplace-pixel-blink: 0;
-}
-
-.wplace-theme--neon {
-  --wplace-primary: #1a1a2e;
-  --wplace-secondary: #16213e;
-  --wplace-accent: #0f3460;
-  --wplace-text: #00ff41;
-  --wplace-highlight: #ff6b35;
-  --wplace-success: #39ff14;
-  --wplace-error: #ff073a;
-  --wplace-warning: #ffff00;
-
-  --wplace-radius: 0;
-  --wplace-shadow: 0 0 20px rgba(0, 255, 65, 0.3),
-    inset 0 0 20px rgba(0, 255, 65, 0.1);
-  --wplace-backdrop: none;
-  --wplace-font: 'Press Start 2P', monospace;
-
-  --wplace-scanline: 1;
-  --wplace-pixel-blink: 1;
-}
+/* Theme classes are now defined in separate files */
+/* Classic theme: ./themes/classic.css */
+/* Neon theme: ./themes/neon.css */
 
 /* ========================= */
 /* Core animations (shared)  */
@@ -168,15 +108,7 @@
   overflow-x: hidden;
   transition: all 0.3s ease;
   user-select: none;
-  
-  /* Exact upstream main styling */
-  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
-  color: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
-  font-family: 'Segoe UI', Roboto, sans-serif;
-  backdrop-filter: blur(10px);
-  border: 1px solid #222222;
+  /* Theme-specific styling applied via theme files */
 }
 
 #wplace-image-bot-container.wplace-dragging {
@@ -210,15 +142,7 @@
   transition: all 0.3s ease;
   user-select: none;
   display: none;
-
-  /* Exact upstream main styling */
-  background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
-  color: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
-  font-family: 'Segoe UI', Roboto, sans-serif;
-  backdrop-filter: blur(10px);
-  border: 1px solid #222222;
+  /* Theme-specific styling applied via theme files */
 }
 
 #wplace-stats-container.wplace-dragging {
@@ -238,8 +162,6 @@
 /* ========================= */
 .wplace-header {
   padding: 8px 12px;
-  background: var(--wplace-secondary);
-  color: var(--wplace-highlight);
   font-size: 13px;
   font-weight: 700;
   display: flex;
@@ -248,10 +170,10 @@
   cursor: move;
   user-select: none;
   border-bottom: 1px solid rgba(255,255,255,0.1);
-  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
   transition: background 0.2s ease;
   position: relative;
   z-index: 2;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-header-title {
@@ -266,11 +188,8 @@
 }
 
 .wplace-header-btn {
-  background: rgba(255,255,255,0.1);
   border: none;
-  color: #ffffff;
   cursor: pointer;
-  border-radius: 4px;
   width: 18px;
   height: 18px;
   padding: 0;
@@ -279,13 +198,12 @@
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
-  font-family: 'Segoe UI', Roboto, sans-serif;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-header-btn:hover {
-  background: #222222;
-  color: #ffffff;
   transform: scale(1.1);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-content {
@@ -303,17 +221,13 @@
 .wplace-status-section {
   margin-bottom: 12px;
   padding: 8px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: var(--wplace-radius);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-section {
   margin-bottom: 12px;
   padding: 12px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: var(--wplace-radius);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-section-title {
@@ -325,7 +239,7 @@
   gap: 6px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: var(--wplace-highlight);
+  /* Theme-specific styling applied via theme files */
 }
 
 /* ========================= */
@@ -350,7 +264,6 @@
 .wplace-btn {
   padding: 8px 12px;
   border: none;
-  border-radius: 12px;
   font-weight: 500;
   cursor: pointer;
   display: flex;
@@ -361,12 +274,8 @@
   transition: all 0.3s ease;
   position: relative;
   overflow: hidden;
-  font-family: 'Segoe UI', Roboto, sans-serif;
   font-weight: 500;
-  
-  background: linear-gradient(135deg, #222222 0%, #4a4a4a 100%);
-  border: 1px solid rgba(255,255,255,0.1);
-  color: #ffffff;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-btn::before {
@@ -376,8 +285,8 @@
   left: -100%;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
   transition: left 0.5s ease;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-btn:hover:not(:disabled)::before {
@@ -386,7 +295,7 @@
 
 .wplace-btn:hover:not(:disabled) {
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-btn:active:not(:disabled) {
@@ -397,59 +306,22 @@
   opacity: 0.5;
   cursor: not-allowed;
   transform: none !important;
-  box-shadow: none !important;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-btn:disabled::before {
   display: none;
 }
 
-.wplace-btn-overlay.active {
-  background: linear-gradient(135deg, #29b6f6 0%, #8e2de2 100%);
-  box-shadow: 0 0 15px #8e2de2;
-}
-
-/* button variants - exact upstream main colors */
-.wplace-btn-primary {
-  background: linear-gradient(135deg, #222222 0%, #6a5acd 100%);
-  color: #ffffff;
-}
-
-.wplace-btn-upload {
-  background: linear-gradient(135deg, #111111 0%, #4a4a4a 100%);
-  color: #ffffff;
-  border: 1px dashed #775ce3 !important;
-}
-
-.wplace-btn-start {
-  background: linear-gradient(135deg, #00ff00 0%, #228b22 100%);
-  color: white;
-}
-
-.wplace-btn-stop {
-  background: linear-gradient(135deg, #ff0000 0%, #dc143c 100%);
-  color: white;
-}
-
-.wplace-btn-select {
-  background: linear-gradient(135deg, #775ce3 0%, #9370db 100%);
-  color: white;
-}
-
-.wplace-btn-file {
-  background: linear-gradient(135deg, #ff8c00 0%, #ff7f50 100%);
-  color: white;
-}
+/* Button variants moved to theme files */
 
 /* ========================= */
 /* Stats and progress        */
 /* ========================= */
 .wplace-stats {
   margin-bottom: 8px;
-  background: rgba(255, 255, 255, 0.03);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: var(--wplace-radius);
   padding: 8px;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-stat-item {
@@ -474,7 +346,7 @@
 
 .wplace-stat-value {
   font-weight: 600;
-  color: var(--wplace-highlight);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-colors-section {
@@ -489,37 +361,32 @@
   gap: 4px;
   margin-top: 8px;
   padding: 4px;
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
   max-height: 80px;
   overflow-y: auto;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-stat-color-swatch {
   width: 16px;
   height: 16px;
-  border-radius: 3px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
+  /* Theme-specific styling applied via theme files */
 }
 
 /* Progress */
 .wplace-progress {
   width: 100%;
-  background: rgba(0,0,0,0.3);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 12px;
   margin: 8px 0;
   overflow: hidden;
   height: 6px;
   position: relative;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-progress-bar {
   height: 6px;
-  background: linear-gradient(135deg, #775ce3 0%, #9370db 100%);
   transition: width 0.5s ease;
   position: relative;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-progress-bar::after {
@@ -529,8 +396,8 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
   animation: shimmer 2s infinite;
+  /* Theme-specific styling applied via theme files */
 }
 
 /* ========================= */
@@ -542,36 +409,11 @@
   overflow: hidden;
   padding: 6px;
   border: 1px solid;
-  border-radius: var(--wplace-radius);
   font-size: 11px;
+  /* Theme-specific styling applied via theme files */
 }
 
-.status-default {
-  background: rgba(255,255,255,0.1);
-  border-color: #ffffff;
-  color: #ffffff;
-}
-
-.status-success {
-  background: rgba(0, 255, 0, 0.1);
-  border-color: #00ff00;
-  color: #00ff00;
-  box-shadow: 0 0 15px #00ff00;
-}
-
-.status-error {
-  background: rgba(255, 0, 0, 0.1);
-  border-color: #ff0000;
-  color: #ff0000;
-  box-shadow: 0 0 15px #ff0000;
-}
-
-.status-warning {
-  background: rgba(255, 165, 0, 0.1);
-  border-color: #ffaa00;
-  color: orange;
-  box-shadow: 0 0 15px #ffaa00;
-}
+/* Status styling moved to theme files */
 
 /* ========================= */
 /* Resize dialog             */
@@ -582,28 +424,23 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: #000000;
   padding: 20px;
-  border: 1px solid #ffffff;
-  border-radius: 12px;
   z-index: 10000;
-  box-shadow: 0 0 20px rgba(0,0,0,0.5);
   width: 90%;
   max-width: 700px;
   max-height: 90%;
   overflow: auto;
-  font-family: 'Segoe UI', Roboto, sans-serif;
+  /* Theme-specific styling applied via theme files */
 }
 
 .resize-preview-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid #222222;
-  background: rgba(0,0,0,0.2);
   margin: 15px 0;
   height: 300px;
   overflow: hidden;
+  /* Theme-specific styling applied via theme files */
 }
 
 .resize-canvas-stack {
@@ -636,31 +473,11 @@
 
 .resize-tools button {
   padding: 6px 10px;
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  background: rgba(255, 255, 255, 0.06);
-  color: #fff;
   cursor: pointer;
+  /* Theme-specific styling applied via theme files */
 }
 
-.wplace-btn.active,
-.wplace-btn[aria-pressed="true"] {
-  background: #775ce3 !important;
-  color: #000000 !important;
-  border-color: #ffffff !important;
-  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2) !important;
-}
-
-.wplace-btn.active i,
-.wplace-btn[aria-pressed="true"] i { filter: drop-shadow(0 0 3px #000000); }
-
-.mask-mode-group .wplace-btn.active,
-.mask-mode-group .wplace-btn[aria-pressed="true"] {
-  background: #775ce3;
-  color: #000000;
-  border-color: #ffffff;
-  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2);
-}
+/* Button active states moved to theme files */
 
 .resize-controls {
   display: grid;
@@ -672,11 +489,10 @@
 .resize-slider {
   width: 100%;
   height: 4px;
-  background: #ccc;
   border: none;
-  border-radius: 12px;
   outline: none;
   -webkit-appearance: none;
+  /* Theme-specific styling applied via theme files */
 }
 
 .resize-zoom-controls {
@@ -700,9 +516,9 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.8);
   z-index: 9999;
   display: none;
+  /* Theme-specific styling applied via theme files */
 }
 
 /* ========================= */
@@ -726,29 +542,28 @@
 
 .wplace-color-item-name {
   font-size: 9px;
-  color: #ccc;
   text-align: center;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   width: 100%;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-color-swatch {
   width: 22px;
   height: 22px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  border-radius: 4px;
   cursor: pointer;
   transition: transform 0.1s ease, box-shadow 0.2s ease;
   position: relative;
   margin: 0 auto;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-color-swatch.unavailable {
-  border-color: #666;
   border-style: dashed;
   cursor: not-allowed;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-color-swatch:hover {
@@ -758,12 +573,12 @@
 
 .wplace-color-swatch:not(.active) {
   opacity: 0.3;
-  filter: grayscale(80%);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-color-swatch.unavailable:not(.active) {
   opacity: 0.2;
-  filter: grayscale(90%);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-color-swatch.active::after {
@@ -775,14 +590,14 @@
   color: white;
   font-size: 12px;
   font-weight: bold;
-  text-shadow: 0 0 3px black;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-color-divider {
   border: none;
   height: 1px;
-  background: rgba(255, 255, 255, 0.1);
   margin: 8px 0;
+  /* Theme-specific styling applied via theme files */
 }
 
 /* ========================= */
@@ -809,17 +624,16 @@
   -webkit-appearance: none;
   appearance: none;
   height: 4px;
-  background: #444;
-  border-radius: 2px;
   outline: none;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 14px;
   height: 14px;
-  border-radius: 50%;
   cursor: pointer;
+  /* Theme-specific styling applied via theme files */
 }
 
 /* ========================= */
@@ -830,19 +644,13 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(17, 17, 17) 100%);
-  border: 1px solid rgb(34, 34, 34);
-  border-radius: 12px;
   padding: 0px;
   z-index: 10002;
   display: none;
   min-width: 420px;
   max-width: 480px;
-  color: rgb(255, 255, 255);
-  font-family: "Segoe UI", Roboto, sans-serif;
-  box-shadow: rgba(0, 0, 0, 0.6) 0px 8px 32px, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px;
-  backdrop-filter: blur(10px);
   overflow: hidden;
+  /* Theme-specific styling applied via theme files */
 }
 
 #wplace-settings-container.show {
@@ -930,11 +738,11 @@
 .wplace-speed-slider {
   flex: 1;
   height: 6px;
-  border-radius: 3px;
   outline: none;
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-speed-slider::-webkit-slider-thumb {
@@ -942,17 +750,15 @@
   appearance: none;
   width: 18px;
   height: 18px;
-  border-radius: 50%;
   cursor: pointer;
-  border: 2px solid;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-speed-slider::-moz-range-thumb {
   width: 18px;
   height: 18px;
-  border-radius: 50%;
   cursor: pointer;
-  border: 2px solid;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-speed-display {
@@ -986,23 +792,17 @@
   bottom: 20px !important;
   right: 20px !important;
   z-index: 99999 !important;
-  background: rgba(0, 0, 0, 0.9) !important;
-  border-radius: 12px !important;
   padding: 20px !important;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
-  backdrop-filter: blur(10px) !important;
-  border: 1px solid rgba(255, 255, 255, 0.2) !important;
-  color: #fff !important;
-  font-family: 'Segoe UI', sans-serif !important;
   min-width: 300px !important;
   max-width: 400px !important;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-turnstile-title {
   font: 600 12px/1.3 'Segoe UI', sans-serif !important;
   margin-bottom: 8px !important;
   opacity: 0.9 !important;
-  color: #ffffff !important;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-turnstile-host {
@@ -1016,16 +816,14 @@
   right: 6px !important;
   font-size: 11px !important;
   background: transparent !important;
-  color: #ffffff !important;
-  border: 1px solid rgba(255, 255, 255, 0.2) !important;
-  border-radius: 6px !important;
   padding: 2px 6px !important;
   cursor: pointer !important;
   transition: background 0.2s ease !important;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-turnstile-hide-btn:hover {
-  background: rgba(255, 255, 255, 0.1) !important;
+  /* Theme-specific styling applied via theme files */
 }
 
 /* ========================= */
@@ -1037,36 +835,17 @@
   left: 50%;
   transform: translateX(-50%);
   padding: 12px 20px;
-  border-radius: var(--wplace-radius);
   color: white;
   font-weight: 600;
-  z-index: var(--wplace-z-alert);
+  z-index: 10002;
   max-width: 400px;
   text-align: center;
   animation: slideDown 0.3s ease-out;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-  font-family: 'Segoe UI', sans-serif;
+  /* Theme-specific styling applied via theme files */
 }
 
-.wplace-alert-info {
-  background: linear-gradient(135deg, #3498db, #2980b9);
-  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
-}
-
-.wplace-alert-success {
-  background: linear-gradient(135deg, #27ae60, #229954);
-  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
-}
-
-.wplace-alert-warning {
-  background: linear-gradient(135deg, #f39c12, #e67e22);
-  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
-}
-
-.wplace-alert-error {
-  background: linear-gradient(135deg, #e74c3c, #c0392b);
-  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
-}
+/* Alert styling moved to theme files */
 
 /* ========================= */
 /* Modal overlay helpers     */
@@ -1077,9 +856,9 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.8);
   z-index: 100002;
   display: none;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-overlay.show {
@@ -1122,26 +901,7 @@
   }
 }
 
-/* ========================= */
-/* Auto light/dark support   */
-/* ========================= */
- @media (prefers-color-scheme: light) {
-  .theme-auto {
-    --wplace-primary: #ffffff;
-    --wplace-secondary: #f5f5f5;
-    --wplace-accent: #007acc;
-    --wplace-text: #333333;
-  }
-}
-
- @media (prefers-color-scheme: dark) {
-  .theme-auto {
-    --wplace-primary: #1e1e1e;
-    --wplace-secondary: #2d2d30;
-    --wplace-accent: #775ce3;
-    --wplace-text: #ffffff;
-  }
-}
+/* Auto light/dark support moved to theme files */
 
 /* ===================================== */
 /* Settings container variants (optional)*/
@@ -1153,19 +913,14 @@
   transform: translate(-50%, -50%);
   z-index: 100001;
   display: none;
-  font-family: var(--wplace-font);
   min-width: 400px;
   max-width: 500px;
   max-height: 80vh;
   overflow-y: auto;
   animation: slideIn 0.3s ease-out;
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: var(--wplace-radius);
   padding: 0;
-  background: var(--wplace-primary);
-  color: var(--wplace-text);
-  box-shadow: var(--wplace-shadow);
-  backdrop-filter: var(--wplace-backdrop);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-settings-container-base.show {
@@ -1180,30 +935,14 @@
 }
 
 .wplace-settings-error {
-  background: rgba(255, 0, 0, 0.4) !important;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-stats-container.hidden {
   display: none;
 }
 
-/* Theme flourishes for Neon (scanline/pixel blink) */
-.wplace-theme--neon #wplace-image-bot-container::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, var(--wplace-text), transparent);
-  z-index: 1;
-  pointer-events: none;
-  animation: scanline 3s linear infinite;
-}
-
-.wplace-theme--neon .wplace-btn:hover:not(:disabled) {
-  animation: pixelBlink 0.5s infinite;
-}
+/* Theme-specific effects are now in separate theme files */
 
 /* ===================================== */
 /* Settings Dialog Styles               */
@@ -1235,63 +974,50 @@
 
 /* Icon colors */
 .wplace-icon-key {
-  color: #4facfe;
   font-size: 16px;
 }
 
 .wplace-icon-robot {
-  color: #4facfe;
   font-size: 16px;
 }
 
 .wplace-icon-speed {
-  color: #4facfe;
   font-size: 16px;
 }
 
 .wplace-icon-bell {
-  color: #ffd166;
   font-size: 16px;
 }
 
 .wplace-icon-palette {
-  color: #f093fb;
   font-size: 16px;
 }
 
 .wplace-icon-globe {
-  color: #ffeaa7;
   font-size: 16px;
 }
 
 /* Section wrapper styling */
 .wplace-settings-section-wrapper {
-  background: rgba(255,255,255,0.1);
-  border-radius: 12px;
   padding: 18px;
-  border: 1px solid rgba(255,255,255,0.1);
+  /* Theme-specific styling applied via theme files */
 }
 
 /* Select dropdowns */
 .wplace-settings-select {
   width: 100%;
   padding: 12px 16px;
-  background: rgba(255,255,255,0.15);
-  color: white;
-  border: 1px solid rgba(255,255,255,0.2);
-  border-radius: 8px;
   font-size: 14px;
   outline: none;
   cursor: pointer;
   transition: all 0.3s ease;
   font-family: inherit;
-  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-settings-option {
-  background: #2d3748;
-  color: white;
   padding: 10px;
+  /* Theme-specific styling applied via theme files */
 }
 
 /* Settings description text */
@@ -1333,11 +1059,9 @@
 
 /* Batch Controls */
 .wplace-batch-controls {
-  background: rgba(255,255,255,0.1);
-  border-radius: 12px;
   padding: 18px;
-  border: 1px solid rgba(255,255,255,0.1);
   margin-bottom: 15px;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-random-batch-controls {
@@ -1355,24 +1079,19 @@
 .wplace-speed-slider {
   flex: 1;
   height: 8px;
-  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
-  border-radius: 4px;
   outline: none;
   -webkit-appearance: none;
   cursor: pointer;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-speed-value {
   min-width: 100px;
   text-align: center;
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
   padding: 8px 12px;
-  border-radius: 8px;
-  color: white;
   font-weight: bold;
   font-size: 13px;
-  box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3);
-  border: 1px solid rgba(255,255,255,0.2);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-speed-labels {
@@ -1810,9 +1529,9 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.8);
   z-index: 9999;
   display: none;
+  /* Theme-specific styling applied via theme files */
 }
 
 /* Settings animations */
@@ -1875,124 +1594,34 @@
 }
 
 /* Additional precision fixes for exact upstream main matching */
-.wplace-status.status-default {
-  color: #ffffff;
-  background: rgba(255,255,255,0.1);
-  border-color: #ffffff;
-}
+/* Status default styling moved to theme files */
 
-/* ===================================== */
-/* Settings Dialog - Exact Upstream Match */
-/* ===================================== */
+/* Duplicate settings section removed - all settings styling moved to theme files */
 
-.wplace-settings-header {
-  background: #22222233;
-  padding: 20px;
-  border-bottom: 1px solid #222222;
-  cursor: move;
-  position: relative;
-}
-
-.wplace-settings-header h3 {
-  margin: 0;
-  color: #ffffff;
-  font-size: 20px;
-  font-weight: 300;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.wplace-settings-header .fa-cog {
-  font-size: 18px;
-  animation: spin 2s linear infinite;
-  color: #775ce3;
-}
-
-/* Add spin animation for settings gear icon */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-
-.wplace-settings-close-btn {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background: #22222266;
-  color: #ffffff;
-  border: 1px solid #222222;
-  border-radius: 50%;
-  width: 32px;
-  height: 32px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.3s ease;
-  font-size: 14px;
-  font-weight: 300;
-}
-
-.wplace-settings-close-btn:hover {
-  background: #ff000066;
-  transform: scale(1.1);
-}
-
-.wplace-settings-content {
-  padding: 25px;
-  max-height: 70vh;
-  overflow-y: auto;
-}
-
-.wplace-settings-section {
-  margin-bottom: 25px;
-}
-
-.wplace-settings-section-label {
-  display: block;
-  margin-bottom: 12px;
-  color: white;
-  font-weight: 500;
-  font-size: 16px;
-  display: flex;
+/* Settings header styling moved to theme files */
+/* All remaining settings styling moved to theme files */
   align-items: center;
   gap: 8px;
 }
 
 .wplace-settings-section-wrapper {
-  background: rgba(255,255,255,0.1);
-  border-radius: 12px;
   padding: 18px;
-  border: 1px solid rgba(255,255,255,0.1);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-settings-select {
   width: 100%;
   padding: 12px 16px;
-  background: rgba(255,255,255,0.15);
-  color: white;
-  border: 1px solid rgba(255,255,255,0.2);
-  border-radius: 8px;
   font-size: 14px;
   outline: none;
   cursor: pointer;
   transition: all 0.3s ease;
   font-family: inherit;
-  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+  /* Theme-specific styling applied via theme files */
 }
 
-.wplace-settings-select option {
-  background: #2d3748;
-  color: white;
-  padding: 10px;
-}
-
-.wplace-settings-description {
-  font-size: 12px;
-  color: rgba(255,255,255,0.7);
-  margin: 8px 0 0 0;
-}
+/* Settings select option styling moved to theme files */
+/* Settings description styling moved to theme files */
 
 .wplace-settings-footer {
   border-top: 1px solid rgba(255,255,255,0.1);
@@ -2002,10 +1631,7 @@
 
 .wplace-settings-apply-btn {
   width: 100%;
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  color: white;
   border: none;
-  border-radius: 8px;
   padding: 10px 16px;
   cursor: pointer;
   font-weight: 500;
@@ -2014,16 +1640,17 @@
   align-items: center;
   gap: 8px;
   justify-content: center;
+  /* Theme-specific styling applied via theme files */
 }
 
-/* Icon colors for settings sections */
-.wplace-icon-key { color: #4facfe; font-size: 16px; }
-.wplace-icon-robot { color: #4facfe; font-size: 16px; }
-.wplace-icon-speed { color: #4facfe; font-size: 16px; }
-.wplace-icon-bell { color: #ffd166; font-size: 16px; }
-.wplace-icon-palette { color: #f093fb; font-size: 16px; }
-.wplace-icon-globe { color: #ffeaa7; font-size: 16px; }
-.wplace-icon-eye { color: #775ce3; font-size: 16px; }
+/* Icon styling moved to theme files */
+.wplace-icon-key { font-size: 16px; }
+.wplace-icon-robot { font-size: 16px; }
+.wplace-icon-speed { font-size: 16px; }
+.wplace-icon-bell { font-size: 16px; }
+.wplace-icon-palette { font-size: 16px; }
+.wplace-icon-globe { font-size: 16px; }
+.wplace-icon-eye { font-size: 16px; }
 
 /* Overlay Settings Controls */
 .wplace-overlay-opacity-control {
@@ -2134,11 +1761,9 @@
 }
 
 .wplace-batch-controls {
-  background: rgba(255,255,255,0.1);
-  border-radius: 12px;
   padding: 18px;
-  border: 1px solid rgba(255,255,255,0.1);
   margin-bottom: 15px;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-speed-slider-container {
@@ -2151,24 +1776,19 @@
 .wplace-speed-slider {
   flex: 1;
   height: 8px;
-  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
-  border-radius: 4px;
   outline: none;
   -webkit-appearance: none;
   cursor: pointer;
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-speed-value {
   min-width: 100px;
   text-align: center;
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
   padding: 8px 12px;
-  border-radius: 8px;
-  color: white;
   font-weight: bold;
   font-size: 13px;
-  box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3);
-  border: 1px solid rgba(255,255,255,0.2);
+  /* Theme-specific styling applied via theme files */
 }
 
 .wplace-speed-labels {
diff --git a/themes/classic.css b/themes/classic.css
new file mode 100644
index 0000000..9396387
--- /dev/null
+++ b/themes/classic.css
@@ -0,0 +1,616 @@
+/* WPlace Auto-Image Bot - Classic Theme */
+/* Clean, modern UI with gradients and subtle effects */
+
+:root {
+  /* Classic theme colors - exact upstream main values */
+  --wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+  --wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
+  --wplace-accent: #222222;
+  --wplace-text: #ffffff;
+  --wplace-highlight: #775ce3;
+  --wplace-success: #00ff00;
+  --wplace-error: #ff0000;
+  --wplace-warning: #ffaa00;
+
+  /* UI properties */
+  --wplace-radius: 12px;
+  --wplace-border-style: solid;
+  --wplace-border-width: 1px;
+  --wplace-border-color: #222222;
+  --wplace-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
+  --wplace-backdrop: blur(10px);
+  --wplace-font: 'Segoe UI', Roboto, sans-serif;
+
+  /* Z-index layers */
+  --wplace-z-overlay: 10000;
+  --wplace-z-alert: 10002;
+  --wplace-z-settings: 10002;
+
+  /* Feature toggles */
+  --wplace-scanline: 0;
+  --wplace-pixel-blink: 0;
+}
+
+.wplace-theme--classic {
+  --wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+  --wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
+  --wplace-accent: #222222;
+  --wplace-text: #ffffff;
+  --wplace-highlight: #775ce3;
+  --wplace-success: #00ff00;
+  --wplace-error: #ff0000;
+  --wplace-warning: #ffaa00;
+
+  --wplace-radius: 12px;
+  --wplace-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
+  --wplace-backdrop: blur(10px);
+  --wplace-font: 'Segoe UI', Roboto, sans-serif;
+
+  --wplace-scanline: 0;
+  --wplace-pixel-blink: 0;
+}
+
+/* Classic theme container styling */
+:root #wplace-image-bot-container,
+.wplace-theme--classic #wplace-image-bot-container {
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  font-family: var(--wplace-font);
+  backdrop-filter: var(--wplace-backdrop);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
+}
+
+:root #wplace-stats-container,
+.wplace-theme--classic #wplace-stats-container {
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  font-family: var(--wplace-font);
+  backdrop-filter: var(--wplace-backdrop);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
+}
+
+:root #wplace-settings-container,
+.wplace-theme--classic #wplace-settings-container {
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  font-family: var(--wplace-font);
+  backdrop-filter: var(--wplace-backdrop);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
+}
+
+:root .wplace-header,
+.wplace-theme--classic .wplace-header {
+  background: var(--wplace-secondary);
+  color: var(--wplace-highlight);
+}
+
+:root .wplace-section-title,
+.wplace-theme--classic .wplace-section-title {
+  color: var(--wplace-highlight);
+}
+
+:root .wplace-stat-value,
+.wplace-theme--classic .wplace-stat-value {
+  color: var(--wplace-highlight);
+}
+
+:root .wplace-status-section,
+.wplace-theme--classic .wplace-status-section {
+  border-radius: var(--wplace-radius);
+}
+
+:root .wplace-section,
+.wplace-theme--classic .wplace-section {
+  border-radius: var(--wplace-radius);
+}
+
+:root .wplace-stats,
+.wplace-theme--classic .wplace-stats {
+  border-radius: var(--wplace-radius);
+}
+
+:root .wplace-status,
+.wplace-theme--classic .wplace-status {
+  border-radius: var(--wplace-radius);
+}
+
+:root .wplace-alert-base,
+.wplace-theme--classic .wplace-alert-base {
+  border-radius: var(--wplace-radius);
+}
+
+:root .wplace-settings-container-base,
+.wplace-theme--classic .wplace-settings-container-base {
+  font-family: var(--wplace-font);
+  border-radius: var(--wplace-radius);
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  box-shadow: var(--wplace-shadow);
+  backdrop-filter: var(--wplace-backdrop);
+}
+
+/* Button styling for classic theme */
+:root .wplace-btn,
+.wplace-theme--classic .wplace-btn {
+  background: linear-gradient(135deg, #222222 0%, #4a4a4a 100%);
+  border: 1px solid rgba(255,255,255,0.1);
+  color: var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  font-family: var(--wplace-font);
+}
+
+:root .wplace-btn::before,
+.wplace-theme--classic .wplace-btn::before {
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
+}
+
+:root .wplace-btn:hover:not(:disabled),
+.wplace-theme--classic .wplace-btn:hover:not(:disabled) {
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+
+:root .wplace-btn:disabled,
+.wplace-theme--classic .wplace-btn:disabled {
+  box-shadow: none !important;
+}
+
+:root .wplace-btn-overlay.active,
+.wplace-theme--classic .wplace-btn-overlay.active {
+  background: linear-gradient(135deg, #29b6f6 0%, #8e2de2 100%);
+  box-shadow: 0 0 15px #8e2de2;
+}
+
+/* Button variants - exact upstream main colors */
+:root .wplace-btn-primary,
+.wplace-theme--classic .wplace-btn-primary {
+  background: linear-gradient(135deg, #222222 0%, #6a5acd 100%);
+  color: var(--wplace-text);
+}
+
+:root .wplace-btn-upload,
+.wplace-theme--classic .wplace-btn-upload {
+  background: linear-gradient(135deg, #111111 0%, #4a4a4a 100%);
+  color: var(--wplace-text);
+  border: 1px dashed var(--wplace-highlight) !important;
+}
+
+:root .wplace-btn-start,
+.wplace-theme--classic .wplace-btn-start {
+  background: linear-gradient(135deg, var(--wplace-success) 0%, #228b22 100%);
+  color: white;
+}
+
+:root .wplace-btn-stop,
+.wplace-theme--classic .wplace-btn-stop {
+  background: linear-gradient(135deg, var(--wplace-error) 0%, #dc143c 100%);
+  color: white;
+}
+
+:root .wplace-btn-select,
+.wplace-theme--classic .wplace-btn-select {
+  background: linear-gradient(135deg, var(--wplace-highlight) 0%, #9370db 100%);
+  color: white;
+}
+
+:root .wplace-btn-file,
+.wplace-theme--classic .wplace-btn-file {
+  background: linear-gradient(135deg, #ff8c00 0%, #ff7f50 100%);
+  color: white;
+}
+
+:root .wplace-btn.active,
+:root .wplace-btn[aria-pressed="true"],
+.wplace-theme--classic .wplace-btn.active,
+.wplace-theme--classic .wplace-btn[aria-pressed="true"] {
+  background: var(--wplace-highlight) !important;
+  color: #000000 !important;
+  border-color: var(--wplace-text) !important;
+  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2) !important;
+}
+
+:root .wplace-btn.active i,
+:root .wplace-btn[aria-pressed="true"] i,
+.wplace-theme--classic .wplace-btn.active i,
+.wplace-theme--classic .wplace-btn[aria-pressed="true"] i { 
+  filter: drop-shadow(0 0 3px #000000); 
+}
+
+:root .mask-mode-group .wplace-btn.active,
+:root .mask-mode-group .wplace-btn[aria-pressed="true"],
+.wplace-theme--classic .mask-mode-group .wplace-btn.active,
+.wplace-theme--classic .mask-mode-group .wplace-btn[aria-pressed="true"] {
+  background: var(--wplace-highlight);
+  color: #000000;
+  border-color: var(--wplace-text);
+  box-shadow: 0 0 8px rgba(0,0,0,0.25) inset, 0 0 6px rgba(0,0,0,0.2);
+}
+
+/* Status styling for classic theme */
+:root .status-default,
+.wplace-theme--classic .status-default {
+  background: rgba(255,255,255,0.1);
+  border-color: var(--wplace-text);
+  color: var(--wplace-text);
+}
+
+:root .status-success,
+.wplace-theme--classic .status-success {
+  background: rgba(0, 255, 0, 0.1);
+  border-color: var(--wplace-success);
+  color: var(--wplace-success);
+  box-shadow: 0 0 15px var(--wplace-success);
+}
+
+:root .status-error,
+.wplace-theme--classic .status-error {
+  background: rgba(255, 0, 0, 0.1);
+  border-color: var(--wplace-error);
+  color: var(--wplace-error);
+  box-shadow: 0 0 15px var(--wplace-error);
+}
+
+:root .status-warning,
+.wplace-theme--classic .status-warning {
+  background: rgba(255, 165, 0, 0.1);
+  border-color: var(--wplace-warning);
+  color: var(--wplace-warning);
+  box-shadow: 0 0 15px var(--wplace-warning);
+}
+
+:root .wplace-status.status-default,
+.wplace-theme--classic .wplace-status.status-default {
+  color: var(--wplace-text);
+  background: rgba(255,255,255,0.1);
+  border-color: var(--wplace-text);
+}
+
+/* Alert styling for classic theme */
+:root .wplace-alert-info,
+.wplace-theme--classic .wplace-alert-info {
+  background: linear-gradient(135deg, #3498db, #2980b9);
+  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
+}
+
+:root .wplace-alert-success,
+.wplace-theme--classic .wplace-alert-success {
+  background: linear-gradient(135deg, #27ae60, #229954);
+  box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
+}
+
+:root .wplace-alert-warning,
+.wplace-theme--classic .wplace-alert-warning {
+  background: linear-gradient(135deg, #f39c12, #e67e22);
+  box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
+}
+
+:root .wplace-alert-error,
+.wplace-theme--classic .wplace-alert-error {
+  background: linear-gradient(135deg, #e74c3c, #c0392b);
+  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
+}
+
+/* Progress bar styling for classic theme */
+:root .wplace-progress,
+.wplace-theme--classic .wplace-progress {
+  background: rgba(0,0,0,0.3);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: var(--wplace-radius);
+}
+
+:root .wplace-progress-bar,
+.wplace-theme--classic .wplace-progress-bar {
+  background: linear-gradient(135deg, var(--wplace-highlight) 0%, #9370db 100%);
+}
+
+:root .wplace-progress-bar::after,
+.wplace-theme--classic .wplace-progress-bar::after {
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+}
+
+/* Header and sections styling for classic theme */
+:root .wplace-header-btn,
+.wplace-theme--classic .wplace-header-btn {
+  background: rgba(255,255,255,0.1);
+  color: var(--wplace-text);
+  border-radius: 4px;
+  font-family: var(--wplace-font);
+}
+
+:root .wplace-header-btn:hover,
+.wplace-theme--classic .wplace-header-btn:hover {
+  background: #222222;
+  color: var(--wplace-text);
+}
+
+:root .wplace-status-section,
+.wplace-theme--classic .wplace-status-section {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+:root .wplace-section,
+.wplace-theme--classic .wplace-section {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+:root .wplace-stats,
+.wplace-theme--classic .wplace-stats {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Font and typography for classic theme */
+:root .wplace-turnstile-overlay,
+.wplace-theme--classic .wplace-turnstile-overlay {
+  background: rgba(0, 0, 0, 0.9) !important;
+  border-radius: var(--wplace-radius) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
+  backdrop-filter: var(--wplace-backdrop) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  color: var(--wplace-text) !important;
+  font-family: var(--wplace-font) !important;
+}
+
+:root .wplace-alert-base,
+.wplace-theme--classic .wplace-alert-base {
+  font-family: var(--wplace-font);
+}
+
+/* Auto light/dark support for classic theme */
+@media (prefers-color-scheme: light) {
+  :root .theme-auto,
+  .wplace-theme--classic .theme-auto {
+    --wplace-primary: #ffffff;
+    --wplace-secondary: #f5f5f5;
+    --wplace-accent: #007acc;
+    --wplace-text: #333333;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root .theme-auto,
+  .wplace-theme--classic .theme-auto {
+    --wplace-primary: #1e1e1e;
+    --wplace-secondary: #2d2d30;
+    --wplace-accent: var(--wplace-highlight);
+    --wplace-text: #ffffff;
+  }
+}
+
+/* Border and color styling for classic theme */
+:root .wplace-color-item-name,
+.wplace-theme--classic .wplace-color-item-name {
+  color: #ccc;
+}
+
+:root .wplace-color-swatch,
+.wplace-theme--classic .wplace-color-swatch {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+}
+
+:root .wplace-stat-color-swatch,
+.wplace-theme--classic .wplace-stat-color-swatch {
+  border-radius: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
+}
+
+:root .resize-tools button,
+.wplace-theme--classic .resize-tools button {
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.06);
+  color: #fff;
+}
+
+:root .resize-slider,
+.wplace-theme--classic .resize-slider {
+  background: #ccc;
+  border-radius: var(--wplace-radius);
+}
+
+/* Text effects and filters for classic theme */
+:root .wplace-header,
+.wplace-theme--classic .wplace-header {
+  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+}
+
+:root .wplace-color-swatch:not(.active),
+.wplace-theme--classic .wplace-color-swatch:not(.active) {
+  filter: grayscale(80%);
+}
+
+:root .wplace-color-swatch.unavailable:not(.active),
+.wplace-theme--classic .wplace-color-swatch.unavailable:not(.active) {
+  filter: grayscale(90%);
+}
+
+:root .wplace-color-swatch.active::after,
+.wplace-theme--classic .wplace-color-swatch.active::after {
+  text-shadow: 0 0 3px black;
+}
+
+/* Icon colors for classic theme */
+:root .wplace-icon-key,
+.wplace-theme--classic .wplace-icon-key { 
+  color: #4facfe; 
+}
+
+:root .wplace-icon-robot,
+.wplace-theme--classic .wplace-icon-robot { 
+  color: #4facfe; 
+}
+
+:root .wplace-icon-speed,
+.wplace-theme--classic .wplace-icon-speed { 
+  color: #4facfe; 
+}
+
+:root .wplace-icon-bell,
+.wplace-theme--classic .wplace-icon-bell { 
+  color: #ffd166; 
+}
+
+:root .wplace-icon-palette,
+.wplace-theme--classic .wplace-icon-palette { 
+  color: #f093fb; 
+}
+
+:root .wplace-icon-globe,
+.wplace-theme--classic .wplace-icon-globe { 
+  color: #ffeaa7; 
+}
+
+:root .wplace-icon-eye,
+.wplace-theme--classic .wplace-icon-eye { 
+  color: var(--wplace-highlight); 
+}
+
+/* Form controls and sliders for classic theme */
+:root .wplace-slider,
+.wplace-theme--classic .wplace-slider {
+  background: #444;
+  border-radius: 2px;
+}
+
+:root .wplace-slider::-webkit-slider-thumb,
+.wplace-theme--classic .wplace-slider::-webkit-slider-thumb {
+  border-radius: 50%;
+}
+
+:root .wplace-speed-slider,
+.wplace-theme--classic .wplace-speed-slider {
+  border-radius: 3px;
+}
+
+:root .wplace-speed-slider::-webkit-slider-thumb,
+.wplace-theme--classic .wplace-speed-slider::-webkit-slider-thumb {
+  border-radius: 50%;
+  border: 2px solid;
+}
+
+:root .wplace-speed-slider::-moz-range-thumb,
+.wplace-theme--classic .wplace-speed-slider::-moz-range-thumb {
+  border-radius: 50%;
+  border: 2px solid;
+}
+
+:root .wplace-color-swatch.unavailable,
+.wplace-theme--classic .wplace-color-swatch.unavailable {
+  border-color: #666;
+}
+
+:root .wplace-turnstile-title,
+.wplace-theme--classic .wplace-turnstile-title {
+  color: var(--wplace-text) !important;
+}
+
+:root .wplace-turnstile-hide-btn,
+.wplace-theme--classic .wplace-turnstile-hide-btn {
+  color: var(--wplace-text) !important;
+  border: 1px solid rgba(255, 255, 255, 0.2) !important;
+  border-radius: 6px !important;
+}
+
+:root .wplace-turnstile-hide-btn:hover,
+.wplace-theme--classic .wplace-turnstile-hide-btn:hover {
+  background: rgba(255, 255, 255, 0.1) !important;
+}
+
+:root .wplace-settings-select,
+.wplace-theme--classic .wplace-settings-select {
+  background: rgba(255,255,255,0.15);
+  color: white;
+  border: 1px solid rgba(255,255,255,0.2);
+  border-radius: 8px;
+  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
+}
+
+:root .wplace-settings-option,
+.wplace-theme--classic .wplace-settings-option {
+  background: #2d3748;
+  color: white;
+}
+
+:root .wplace-stat-colors-grid,
+.wplace-theme--classic .wplace-stat-colors-grid {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+:root .resize-overlay,
+.wplace-theme--classic .resize-overlay {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+:root .wplace-overlay,
+.wplace-theme--classic .wplace-overlay {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+:root .wplace-settings-error,
+.wplace-theme--classic .wplace-settings-error {
+  background: rgba(255, 0, 0, 0.4) !important;
+}
+
+/* Settings sections and batch controls for classic theme */
+:root .wplace-settings-section-wrapper,
+.wplace-theme--classic .wplace-settings-section-wrapper {
+  background: rgba(255,255,255,0.1);
+  border-radius: var(--wplace-radius);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+
+:root .wplace-batch-controls,
+.wplace-theme--classic .wplace-batch-controls {
+  background: rgba(255,255,255,0.1);
+  border-radius: var(--wplace-radius);
+  border: 1px solid rgba(255,255,255,0.1);
+}
+
+:root .wplace-speed-slider,
+.wplace-theme--classic .wplace-speed-slider {
+  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
+  border-radius: 4px;
+}
+
+:root .wplace-speed-value,
+.wplace-theme--classic .wplace-speed-value {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  border-radius: 8px;
+  color: white;
+  box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3);
+  border: 1px solid rgba(255,255,255,0.2);
+}
+
+/* Additional elements for classic theme */
+:root .wplace-color-divider,
+.wplace-theme--classic .wplace-color-divider {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+:root .wplace-settings-select option,
+.wplace-theme--classic .wplace-settings-select option {
+  background: #2d3748;
+  color: white;
+}
+
+:root .wplace-settings-description,
+.wplace-theme--classic .wplace-settings-description {
+  color: rgba(255,255,255,0.7);
+}
+
+:root .wplace-settings-apply-btn,
+.wplace-theme--classic .wplace-settings-apply-btn {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+  border-radius: 8px;
+}
\ No newline at end of file
diff --git a/themes/neon.css b/themes/neon.css
new file mode 100644
index 0000000..6102aa9
--- /dev/null
+++ b/themes/neon.css
@@ -0,0 +1,304 @@
+/* WPlace Auto-Image Bot - Neon Theme */
+/* Retro cyberpunk aesthetic with green neon glow effects */
+
+.wplace-theme--neon {
+  /* Neon theme colors - matching upstream main neon theme */
+  --wplace-primary: #1a1a2e;
+  --wplace-secondary: #16213e;
+  --wplace-accent: #0f3460;
+  --wplace-text: #00ff41;
+  --wplace-highlight: #ff6b35;
+  --wplace-success: #39ff14;
+  --wplace-error: #ff073a;
+  --wplace-warning: #ffff00;
+
+  /* Neon UI properties */
+  --wplace-radius: 0;
+  --wplace-border-style: solid;
+  --wplace-border-width: 2px;
+  --wplace-border-color: #00ff41;
+  --wplace-shadow: 0 0 20px rgba(0, 255, 65, 0.3), inset 0 0 20px rgba(0, 255, 65, 0.1);
+  --wplace-backdrop: none;
+  --wplace-font: 'Press Start 2P', monospace, 'Courier New';
+
+  /* Z-index layers */
+  --wplace-z-overlay: 10000;
+  --wplace-z-alert: 10002;
+  --wplace-z-settings: 10002;
+
+  /* Feature toggles */
+  --wplace-scanline: 1;
+  --wplace-pixel-blink: 1;
+}
+
+/* Neon-specific styling overrides */
+.wplace-theme--neon #wplace-image-bot-container {
+  background: var(--wplace-primary) !important;
+  border: 2px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+  box-shadow: 0 0 20px var(--wplace-text), inset 0 0 20px rgba(0, 255, 65, 0.1) !important;
+  font-family: var(--wplace-font) !important;
+}
+
+.wplace-theme--neon #wplace-stats-container {
+  background: var(--wplace-primary) !important;
+  border: 2px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+  box-shadow: 0 0 20px var(--wplace-text), inset 0 0 20px rgba(0, 255, 65, 0.1) !important;
+  font-family: var(--wplace-font) !important;
+}
+
+.wplace-theme--neon .wplace-header {
+  background: var(--wplace-secondary) !important;
+  border-bottom: 1px solid var(--wplace-text) !important;
+  color: var(--wplace-text) !important;
+  text-shadow: 0 0 10px var(--wplace-text) !important;
+  font-family: var(--wplace-font) !important;
+}
+
+.wplace-theme--neon .wplace-section {
+  background: rgba(22, 33, 62, 0.5) !important;
+  border: 1px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+}
+
+.wplace-theme--neon .wplace-status-section {
+  background: rgba(22, 33, 62, 0.5) !important;
+  border: 1px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+}
+
+.wplace-theme--neon .wplace-section-title {
+  color: var(--wplace-text) !important;
+  text-shadow: 0 0 8px var(--wplace-text) !important;
+  text-transform: uppercase !important;
+  font-family: var(--wplace-font) !important;
+  font-size: 10px !important;
+}
+
+.wplace-theme--neon .wplace-btn {
+  background: var(--wplace-secondary) !important;
+  border: 1px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+  color: var(--wplace-text) !important;
+  text-shadow: 0 0 5px var(--wplace-text) !important;
+  font-family: var(--wplace-font) !important;
+  font-size: 9px !important;
+  text-transform: uppercase !important;
+}
+
+.wplace-theme--neon .wplace-btn:hover:not(:disabled) {
+  box-shadow: 0 0 15px var(--wplace-text), inset 0 0 15px rgba(0, 255, 65, 0.1) !important;
+  animation: neonGlow 1s ease-in-out infinite alternate !important;
+}
+
+.wplace-theme--neon .wplace-btn-start {
+  background: var(--wplace-secondary) !important;
+  border-color: var(--wplace-success) !important;
+  color: var(--wplace-success) !important;
+  text-shadow: 0 0 8px var(--wplace-success) !important;
+}
+
+.wplace-theme--neon .wplace-btn-stop {
+  background: var(--wplace-secondary) !important;
+  border-color: var(--wplace-error) !important;
+  color: var(--wplace-error) !important;
+  text-shadow: 0 0 8px var(--wplace-error) !important;
+}
+
+.wplace-theme--neon .wplace-btn-upload {
+  background: var(--wplace-secondary) !important;
+  border: 1px dashed var(--wplace-highlight) !important;
+  color: var(--wplace-highlight) !important;
+  text-shadow: 0 0 8px var(--wplace-highlight) !important;
+}
+
+.wplace-theme--neon .wplace-btn-select {
+  background: var(--wplace-secondary) !important;
+  border-color: var(--wplace-highlight) !important;
+  color: var(--wplace-highlight) !important;
+  text-shadow: 0 0 8px var(--wplace-highlight) !important;
+}
+
+.wplace-theme--neon .wplace-btn-file {
+  background: var(--wplace-secondary) !important;
+  border-color: var(--wplace-warning) !important;
+  color: var(--wplace-warning) !important;
+  text-shadow: 0 0 8px var(--wplace-warning) !important;
+}
+
+.wplace-theme--neon .wplace-progress {
+  background: rgba(0, 0, 0, 0.8) !important;
+  border: 1px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+}
+
+.wplace-theme--neon .wplace-progress-bar {
+  background: linear-gradient(90deg, var(--wplace-success) 0%, var(--wplace-text) 100%) !important;
+  box-shadow: 0 0 10px var(--wplace-success) !important;
+}
+
+.wplace-theme--neon .wplace-stat-value {
+  color: var(--wplace-text) !important;
+  text-shadow: 0 0 5px var(--wplace-text) !important;
+}
+
+.wplace-theme--neon .status-success {
+  background: rgba(57, 255, 20, 0.1) !important;
+  border-color: var(--wplace-success) !important;
+  color: var(--wplace-success) !important;
+  box-shadow: 0 0 15px var(--wplace-success) !important;
+  text-shadow: 0 0 8px var(--wplace-success) !important;
+}
+
+.wplace-theme--neon .status-error {
+  background: rgba(255, 7, 58, 0.1) !important;
+  border-color: var(--wplace-error) !important;
+  color: var(--wplace-error) !important;
+  box-shadow: 0 0 15px var(--wplace-error) !important;
+  text-shadow: 0 0 8px var(--wplace-error) !important;
+}
+
+.wplace-theme--neon .status-default {
+  background: rgba(0, 255, 65, 0.1) !important;
+  border-color: var(--wplace-text) !important;
+  color: var(--wplace-text) !important;
+  text-shadow: 0 0 5px var(--wplace-text) !important;
+}
+
+/* Settings dialog neon styling */
+.wplace-theme--neon #wplace-settings-container {
+  background: var(--wplace-primary) !important;
+  border: 2px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+  box-shadow: 0 0 30px var(--wplace-text), inset 0 0 30px rgba(0, 255, 65, 0.1) !important;
+  font-family: var(--wplace-font) !important;
+}
+
+.wplace-theme--neon .wplace-settings-header {
+  background: var(--wplace-secondary) !important;
+  border-bottom: 1px solid var(--wplace-text) !important;
+}
+
+.wplace-theme--neon .wplace-settings-header h3 {
+  color: var(--wplace-text) !important;
+  text-shadow: 0 0 10px var(--wplace-text) !important;
+  font-family: var(--wplace-font) !important;
+  font-size: 16px !important;
+  text-transform: uppercase !important;
+}
+
+.wplace-theme--neon .wplace-settings-close-btn {
+  background: var(--wplace-secondary) !important;
+  border: 1px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+  color: var(--wplace-text) !important;
+}
+
+.wplace-theme--neon .wplace-settings-close-btn:hover {
+  background: var(--wplace-error) !important;
+  box-shadow: 0 0 15px var(--wplace-error) !important;
+}
+
+.wplace-theme--neon .wplace-settings-section-wrapper {
+  background: rgba(22, 33, 62, 0.3) !important;
+  border: 1px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+}
+
+.wplace-theme--neon .wplace-settings-select {
+  background: var(--wplace-secondary) !important;
+  border: 1px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+  color: var(--wplace-text) !important;
+  font-family: var(--wplace-font) !important;
+  font-size: 11px !important;
+}
+
+.wplace-theme--neon .wplace-settings-section-label {
+  color: var(--wplace-text) !important;
+  text-shadow: 0 0 8px var(--wplace-text) !important;
+  font-family: var(--wplace-font) !important;
+  font-size: 12px !important;
+  text-transform: uppercase !important;
+}
+
+.wplace-theme--neon .wplace-speed-value {
+  background: var(--wplace-secondary) !important;
+  border: 1px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+  color: var(--wplace-text) !important;
+  text-shadow: 0 0 8px var(--wplace-text) !important;
+  font-family: var(--wplace-font) !important;
+  box-shadow: 0 0 10px rgba(0, 255, 65, 0.3) !important;
+}
+
+.wplace-theme--neon .wplace-overlay-opacity-value {
+  background: var(--wplace-secondary) !important;
+  border: 1px solid var(--wplace-text) !important;
+  border-radius: 0 !important;
+  color: var(--wplace-text) !important;
+  text-shadow: 0 0 5px var(--wplace-text) !important;
+}
+
+/* Scanline animation for neon theme */
+.wplace-theme--neon #wplace-image-bot-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--wplace-text), transparent);
+  z-index: 1;
+  pointer-events: none;
+  animation: scanline 3s linear infinite;
+  opacity: 0.7;
+}
+
+.wplace-theme--neon #wplace-stats-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--wplace-text), transparent);
+  z-index: 1;
+  pointer-events: none;
+  animation: scanline 4s linear infinite;
+  opacity: 0.7;
+}
+
+/* Pixel blinking animation for buttons */
+.wplace-theme--neon .wplace-btn:hover:not(:disabled) {
+  animation: pixelBlink 0.5s infinite, neonGlow 1s ease-in-out infinite alternate;
+}
+
+/* Text glow animations */
+@keyframes neonGlow {
+  0%, 100% {
+    text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor;
+  }
+  50% {
+    text-shadow: 0 0 2px currentColor, 0 0 5px currentColor, 0 0 8px currentColor;
+  }
+}
+
+@keyframes pixelBlink {
+  0%, 50% {
+    opacity: 1;
+  }
+  51%, 100% {
+    opacity: 0.7;
+  }
+}
+
+@keyframes scanline {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(400px);
+  }
+}
\ No newline at end of file

From 314278fd4ef12c243cf7488dd47f64a84ec01605 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Tue, 26 Aug 2025 23:33:47 +0200
Subject: [PATCH 27/36] css

---
 auto-image-styles.css | 231 +++++++++++++++++++++++++++++-------------
 themes/classic.css    |  74 ++++++++------
 themes/neon.css       |  44 ++++++++
 3 files changed, 250 insertions(+), 99 deletions(-)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index 9dd632e..03445c9 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -11,6 +11,82 @@
 @import url('https://staninna.github.io/WPlace-AutoBOT/themes/classic.css');
 @import url('https://staninna.github.io/WPlace-AutoBOT/themes/neon.css');
 
+/* Default :root CSS variables for 100% classic theme compliance */
+/* These ensure the bot works perfectly even if theme files fail to load */
+:root {
+  /* Classic theme colors - exact upstream main values */
+  --wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
+  --wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
+  --wplace-accent: #222222;
+  --wplace-text: #ffffff;
+  --wplace-highlight: #775ce3;
+  --wplace-highlight-secondary: #d3a4ff;
+  --wplace-success: #00ff00;
+  --wplace-error: #ff0000;
+  --wplace-warning: #ffaa00;
+
+  /* UI properties */
+  --wplace-radius: 12px;
+  --wplace-border-style: solid;
+  --wplace-border-width: 1px;
+  --wplace-border-color: #222222;
+  --wplace-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
+  --wplace-backdrop: blur(10px);
+  --wplace-font: 'Segoe UI', Roboto, sans-serif;
+
+  /* Z-index layers */
+  --wplace-z-overlay: 10000;
+  --wplace-z-alert: 10002;
+  --wplace-z-settings: 10002;
+
+  /* Feature toggles */
+  --wplace-scanline: 0;
+  --wplace-pixel-blink: 0;
+
+  /* Icon colors */
+  --wplace-icon-primary: #4facfe;
+  --wplace-icon-secondary: #00f2fe;
+  --wplace-icon-palette: #f093fb;
+  
+  /* Additional UI colors */
+  --wplace-danger: #ff6a6a;
+  --wplace-danger-dark: #ff4757;
+  --wplace-muted-text: #ffffffBB;
+  
+  /* Text variants */
+  --wplace-text-secondary: rgba(255,255,255,0.9);
+  --wplace-text-muted: rgba(255,255,255,0.7);
+  --wplace-text-dim: rgba(255,255,255,0.6);
+  --wplace-text-faded: rgba(255,255,255,0.8);
+  
+  /* Background variants */
+  --wplace-bg-input: rgba(255,255,255,0.15);
+  --wplace-bg-subtle: rgba(255,255,255,0.1);
+  --wplace-bg-faint: rgba(255,255,255,0.08);
+  --wplace-bg-ghost: rgba(255,255,255,0.06);
+  --wplace-bg-whisper: rgba(255,255,255,0.05);
+  
+  /* Border variants */
+  --wplace-border-subtle: rgba(255,255,255,0.2);
+  --wplace-border-faint: rgba(255,255,255,0.15);
+  --wplace-border-ghost: rgba(255,255,255,0.1);
+  --wplace-border-ultra-faint: rgba(255,255,255,0.05);
+  
+  /* Shadow variants */
+  --wplace-shadow-drag: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.2);
+  --wplace-shadow-notification: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --wplace-shadow-slider-thumb: 0 3px 6px rgba(0,0,0,0.3), 0 0 0 2px var(--wplace-icon-primary);
+  --wplace-shadow-slider-hover: 0 4px 8px rgba(0,0,0,0.4), 0 0 0 3px var(--wplace-icon-primary);
+  
+  /* Animation colors */
+  --wplace-pulse-start: rgba(0, 255, 0, 0.7);
+  --wplace-pulse-mid: rgba(0, 255, 0, 0);
+  --wplace-pulse-end: rgba(0, 255, 0, 0);
+  
+  /* Slider colors */
+  --wplace-slider-thumb-bg: white;
+}
+
 /* Theme classes are now defined in separate files */
 /* Classic theme: ./themes/classic.css */
 /* Neon theme: ./themes/neon.css */
@@ -50,13 +126,13 @@
 
  @keyframes pulse {
   0% {
-    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7);
+    box-shadow: 0 0 0 0 var(--wplace-pulse-start);
   }
   70% {
-    box-shadow: 0 0 0 10px rgba(0, 255, 0, 0);
+    box-shadow: 0 0 0 10px var(--wplace-pulse-mid);
   }
   100% {
-    box-shadow: 0 0 0 0 rgba(0, 255, 0, 0);
+    box-shadow: 0 0 0 0 var(--wplace-pulse-end);
   }
 }
 
@@ -108,12 +184,19 @@
   overflow-x: hidden;
   transition: all 0.3s ease;
   user-select: none;
-  /* Theme-specific styling applied via theme files */
+  /* Default classic theme styling for 100% compliance */
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  font-family: var(--wplace-font);
+  backdrop-filter: var(--wplace-backdrop);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 #wplace-image-bot-container.wplace-dragging {
   transition: none;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.2);
+  box-shadow: var(--wplace-shadow-drag);
   transform: scale(1.02);
   z-index: 9999;
 }
@@ -142,7 +225,14 @@
   transition: all 0.3s ease;
   user-select: none;
   display: none;
-  /* Theme-specific styling applied via theme files */
+  /* Default classic theme styling for 100% compliance */
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  font-family: var(--wplace-font);
+  backdrop-filter: var(--wplace-backdrop);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 #wplace-stats-container.wplace-dragging {
@@ -152,7 +242,7 @@
 /* Back-compat for legacy class (some earlier CSS used this) */
 .wplace-drag-active {
   transition: none !important;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
+  box-shadow: var(--wplace-shadow-drag) !important;
   transform: scale(1.02) !important;
   z-index: 9999 !important;
 }
@@ -169,7 +259,7 @@
   align-items: center;
   cursor: move;
   user-select: none;
-  border-bottom: 1px solid rgba(255,255,255,0.1);
+  border-bottom: 1px solid var(--wplace-border-ghost);
   transition: background 0.2s ease;
   position: relative;
   z-index: 2;
@@ -238,7 +328,7 @@
   align-items: center;
   gap: 6px;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 1px;
   /* Theme-specific styling applied via theme files */
 }
 
@@ -329,7 +419,7 @@
   justify-content: space-between;
   padding: 4px 0;
   font-size: 11px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid var(--wplace-border-ultra-faint);
 }
 
 .wplace-stat-item:last-child {
@@ -352,7 +442,7 @@
 .wplace-colors-section {
   margin-top: 10px;
   padding-top: 8px;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  border-top: 1px solid var(--wplace-border-ultra-faint);
 }
 
 .wplace-stat-colors-grid {
@@ -587,7 +677,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: white;
+  color: var(--wplace-text);
   font-size: 12px;
   font-weight: bold;
   /* Theme-specific styling applied via theme files */
@@ -650,7 +740,14 @@
   min-width: 420px;
   max-width: 480px;
   overflow: hidden;
-  /* Theme-specific styling applied via theme files */
+  /* Default classic theme styling for 100% compliance */
+  background: var(--wplace-primary);
+  color: var(--wplace-text);
+  border-radius: var(--wplace-radius);
+  box-shadow: var(--wplace-shadow);
+  font-family: var(--wplace-font);
+  backdrop-filter: var(--wplace-backdrop);
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 #wplace-settings-container.show {
@@ -835,13 +932,13 @@
   left: 50%;
   transform: translateX(-50%);
   padding: 12px 20px;
-  color: white;
+  color: var(--wplace-text);
   font-weight: 600;
   z-index: 10002;
   max-width: 400px;
   text-align: center;
   animation: slideDown 0.3s ease-out;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--wplace-shadow-notification);
   /* Theme-specific styling applied via theme files */
 }
 
@@ -918,7 +1015,7 @@
   max-height: 80vh;
   overflow-y: auto;
   animation: slideIn 0.3s ease-out;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid var(--wplace-border-ghost);
   padding: 0;
   /* Theme-specific styling applied via theme files */
 }
@@ -962,9 +1059,8 @@
 
 /* Section labels */
 .wplace-settings-section-label {
-  display: block;
   margin-bottom: 12px;
-  color: white;
+  color: var(--wplace-text);
   font-weight: 500;
   font-size: 16px;
   display: flex;
@@ -1023,7 +1119,7 @@
 /* Settings description text */
 .wplace-settings-description {
   font-size: 12px;
-  color: rgba(255,255,255,0.7);
+  color: var(--wplace-text-muted);
   margin: 8px 0 0 0;
 }
 
@@ -1035,22 +1131,22 @@
 .wplace-batch-mode-label {
   display: block;
   margin-bottom: 8px;
-  color: rgba(255,255,255,0.9);
+  color: var(--wplace-text-secondary);
   font-weight: 500;
   font-size: 14px;
 }
 
 .wplace-icon-dice {
-  color: #f093fb;
+  color: var(--wplace-icon-palette);
   margin-right: 6px;
 }
 
 .wplace-batch-mode-select {
   width: 100%;
   padding: 10px 12px;
-  background: rgba(255,255,255,0.15);
-  color: white;
-  border: 1px solid rgba(255,255,255,0.2);
+  background: var(--wplace-bg-input);
+  color: var(--wplace-text);
+  border: 1px solid var(--wplace-border-subtle);
   border-radius: 8px;
   font-size: 13px;
   outline: none;
@@ -1097,7 +1193,7 @@
 .wplace-speed-labels {
   display: flex;
   justify-content: space-between;
-  color: rgba(255,255,255,0.7);
+  color: var(--wplace-text-muted);
   font-size: 11px;
   margin-top: 8px;
 }
@@ -1111,27 +1207,27 @@
 
 .wplace-random-batch-label {
   display: block;
-  color: rgba(255,255,255,0.8);
+  color: var(--wplace-text-faded);
   font-size: 12px;
   margin-bottom: 8px;
 }
 
 .wplace-icon-min {
-  color: #4facfe;
+  color: var(--wplace-icon-primary);
   margin-right: 4px;
 }
 
 .wplace-icon-max {
-  color: #00f2fe;
+  color: var(--wplace-icon-secondary);
   margin-right: 4px;
 }
 
 .wplace-random-batch-input {
   width: 100%;
   padding: 10px 12px;
-  background: rgba(255,255,255,0.1);
-  color: white;
-  border: 1px solid rgba(255,255,255,0.2);
+  background: var(--wplace-bg-subtle);
+  color: var(--wplace-text);
+  border: 1px solid var(--wplace-border-subtle);
   border-radius: 8px;
   font-size: 13px;
   outline: none;
@@ -1139,7 +1235,7 @@
 
 .wplace-random-batch-description {
   font-size: 11px;
-  color: rgba(255,255,255,0.6);
+  color: var(--wplace-text-dim);
   margin: 8px 0 0 0;
   text-align: center;
 }
@@ -1149,7 +1245,7 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  color: white;
+  color: var(--wplace-text);
 }
 
 .wplace-speed-checkbox {
@@ -1239,9 +1335,9 @@
   width: 70px;
   padding: 6px 8px;
   border-radius: 6px;
-  border: 1px solid rgba(255,255,255,0.2);
-  background: rgba(255,255,255,0.08);
-  color: #fff;
+  border: 1px solid var(--wplace-border-subtle);
+  background: var(--wplace-bg-faint);
+  color: var(--wplace-text);
 }
 
 .wplace-notification-buttons {
@@ -1256,7 +1352,7 @@
 
 /* Settings Footer */
 .wplace-settings-footer {
-  border-top: 1px solid rgba(255,255,255,0.1);
+  border-top: 1px solid var(--wplace-border-ghost);
   padding-top: 20px;
   margin-top: 10px;
 }
@@ -1442,9 +1538,9 @@
 .resize-advanced-select {
   padding: 6px 8px;
   border-radius: 6px;
-  border: 1px solid rgba(255,255,255,0.15);
-  background: rgba(255,255,255,0.05);
-  color: #fff;
+  border: 1px solid var(--wplace-border-faint);
+  background: var(--wplace-bg-whisper);
+  color: var(--wplace-text);
 }
 
 .resize-advanced-toggle {
@@ -1483,7 +1579,7 @@
 }
 
 .resize-chroma-weight-value {
-  background: rgba(255,255,255,0.08);
+  background: var(--wplace-bg-faint);
   padding: 2px 6px;
   border-radius: 4px;
 }
@@ -1508,13 +1604,13 @@
 .resize-threshold-input {
   padding: 6px 8px;
   border-radius: 6px;
-  border: 1px solid rgba(255,255,255,0.15);
-  background: rgba(255,255,255,0.05);
-  color: #fff;
+  border: 1px solid var(--wplace-border-faint);
+  background: var(--wplace-bg-whisper);
+  color: var(--wplace-text);
 }
 
 .resize-reset-advanced-btn {
-  background: linear-gradient(135deg, #ff6a6a, #ff4757);
+  background: linear-gradient(135deg, var(--wplace-danger), var(--wplace-danger-dark));
   font-size: 11px;
 }
 
@@ -1549,12 +1645,12 @@
 /* Font styling corrections */
 .resize-controls label {
   font-size: 12px;
-  color: #ffffff;
+  color: var(--wplace-text);
 }
 
 .resize-dialog-title {
   margin-top: 0;
-  color: #ffffff;
+  color: var(--wplace-text);
 }
 
 /* Ensure proper z-indexing */
@@ -1566,9 +1662,9 @@
 .resize-tools button {
   padding: 6px 10px;
   border-radius: 6px;
-  border: 1px solid rgba(255,255,255,0.2);
-  background: rgba(255,255,255,0.06);
-  color: #fff;
+  border: 1px solid var(--wplace-border-subtle);
+  background: var(--wplace-bg-ghost);
+  color: var(--wplace-text);
   cursor: pointer;
 }
 
@@ -1600,9 +1696,6 @@
 
 /* Settings header styling moved to theme files */
 /* All remaining settings styling moved to theme files */
-  align-items: center;
-  gap: 8px;
-}
 
 .wplace-settings-section-wrapper {
   padding: 18px;
@@ -1624,7 +1717,7 @@
 /* Settings description styling moved to theme files */
 
 .wplace-settings-footer {
-  border-top: 1px solid rgba(255,255,255,0.1);
+  border-top: 1px solid var(--wplace-border-ghost);
   padding-top: 20px;
   margin-top: 10px;
 }
@@ -1672,19 +1765,19 @@
 .wplace-overlay-opacity-value {
   min-width: 40px;
   text-align: center;
-  background: #111111;
-  color: #ffffff;
+  background: var(--wplace-accent);
+  color: var(--wplace-text);
   padding: 4px 8px;
   border-radius: 6px;
   font-size: 12px;
-  border: 1px solid #222222;
+  border: var(--wplace-border-width) var(--wplace-border-style) var(--wplace-border-color);
 }
 
 .wplace-overlay-opacity-slider {
   width: 100%;
   -webkit-appearance: none;
   height: 8px;
-  background: linear-gradient(to right, #775ce3 0%, #d3a4ff 100%);
+  background: linear-gradient(to right, var(--wplace-highlight) 0%, var(--wplace-highlight-secondary) 100%);
   border-radius: 4px;
   outline: none;
   cursor: pointer;
@@ -1695,15 +1788,15 @@
   width: 18px;
   height: 18px;
   border-radius: 50%;
-  background: white;
-  box-shadow: 0 3px 6px rgba(0,0,0,0.3), 0 0 0 2px #4facfe;
+  background: var(--wplace-slider-thumb-bg);
+  box-shadow: var(--wplace-shadow-slider-thumb);
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .wplace-overlay-opacity-slider::-webkit-slider-thumb:hover {
   transform: scale(1.2);
-  box-shadow: 0 4px 8px rgba(0,0,0,0.4), 0 0 0 3px #4facfe;
+  box-shadow: var(--wplace-shadow-slider-hover);
 }
 
 .wplace-blue-marble-toggle {
@@ -1719,7 +1812,7 @@
 
 .wplace-blue-marble-description {
   font-size: 12px;
-  color: #ffffffBB;
+  color: var(--wplace-muted-text);
   margin: 4px 0 0 0;
 }
 
@@ -1727,7 +1820,7 @@
   cursor: pointer;
   width: 20px;
   height: 20px;
-  accent-color: #775ce3;
+  accent-color: var(--wplace-highlight);
 }
 
 /* Batch Mode Controls */
@@ -1738,22 +1831,22 @@
 .wplace-batch-mode-label {
   display: block;
   margin-bottom: 8px;
-  color: rgba(255,255,255,0.9);
+  color: var(--wplace-text-secondary);
   font-weight: 500;
   font-size: 14px;
 }
 
 .wplace-icon-dice {
-  color: #f093fb;
+  color: var(--wplace-icon-palette);
   margin-right: 6px;
 }
 
 .wplace-batch-mode-select {
   width: 100%;
   padding: 10px 12px;
-  background: rgba(255,255,255,0.15);
-  color: white;
-  border: 1px solid rgba(255,255,255,0.2);
+  background: var(--wplace-bg-input);
+  color: var(--wplace-text);
+  border: 1px solid var(--wplace-border-subtle);
   border-radius: 8px;
   font-size: 13px;
   outline: none;
@@ -1794,7 +1887,7 @@
 .wplace-speed-labels {
   display: flex;
   justify-content: space-between;
-  color: rgba(255,255,255,0.7);
+  color: var(--wplace-text-muted);
   font-size: 11px;
   margin-top: 8px;
 }
diff --git a/themes/classic.css b/themes/classic.css
index 9396387..3e1add8 100644
--- a/themes/classic.css
+++ b/themes/classic.css
@@ -1,36 +1,6 @@
 /* WPlace Auto-Image Bot - Classic Theme */
 /* Clean, modern UI with gradients and subtle effects */
 
-:root {
-  /* Classic theme colors - exact upstream main values */
-  --wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
-  --wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
-  --wplace-accent: #222222;
-  --wplace-text: #ffffff;
-  --wplace-highlight: #775ce3;
-  --wplace-success: #00ff00;
-  --wplace-error: #ff0000;
-  --wplace-warning: #ffaa00;
-
-  /* UI properties */
-  --wplace-radius: 12px;
-  --wplace-border-style: solid;
-  --wplace-border-width: 1px;
-  --wplace-border-color: #222222;
-  --wplace-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
-  --wplace-backdrop: blur(10px);
-  --wplace-font: 'Segoe UI', Roboto, sans-serif;
-
-  /* Z-index layers */
-  --wplace-z-overlay: 10000;
-  --wplace-z-alert: 10002;
-  --wplace-z-settings: 10002;
-
-  /* Feature toggles */
-  --wplace-scanline: 0;
-  --wplace-pixel-blink: 0;
-}
-
 .wplace-theme--classic {
   --wplace-primary: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
   --wplace-secondary: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
@@ -48,6 +18,50 @@
 
   --wplace-scanline: 0;
   --wplace-pixel-blink: 0;
+
+  /* Icon colors */
+  --wplace-icon-primary: #4facfe;
+  --wplace-icon-secondary: #00f2fe;
+  --wplace-icon-palette: #f093fb;
+  
+  /* Additional UI colors */
+  --wplace-danger: #ff6a6a;
+  --wplace-danger-dark: #ff4757;
+  --wplace-muted-text: #ffffffBB;
+  --wplace-highlight-secondary: #d3a4ff;
+  
+  /* Text variants */
+  --wplace-text-secondary: rgba(255,255,255,0.9);
+  --wplace-text-muted: rgba(255,255,255,0.7);
+  --wplace-text-dim: rgba(255,255,255,0.6);
+  --wplace-text-faded: rgba(255,255,255,0.8);
+  
+  /* Background variants */
+  --wplace-bg-input: rgba(255,255,255,0.15);
+  --wplace-bg-subtle: rgba(255,255,255,0.1);
+  --wplace-bg-faint: rgba(255,255,255,0.08);
+  --wplace-bg-ghost: rgba(255,255,255,0.06);
+  --wplace-bg-whisper: rgba(255,255,255,0.05);
+  
+  /* Border variants */
+  --wplace-border-subtle: rgba(255,255,255,0.2);
+  --wplace-border-faint: rgba(255,255,255,0.15);
+  --wplace-border-ghost: rgba(255,255,255,0.1);
+  --wplace-border-ultra-faint: rgba(255,255,255,0.05);
+  
+  /* Shadow variants */
+  --wplace-shadow-drag: 0 12px 40px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(255, 255, 255, 0.2);
+  --wplace-shadow-notification: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --wplace-shadow-slider-thumb: 0 3px 6px rgba(0,0,0,0.3), 0 0 0 2px var(--wplace-icon-primary);
+  --wplace-shadow-slider-hover: 0 4px 8px rgba(0,0,0,0.4), 0 0 0 3px var(--wplace-icon-primary);
+  
+  /* Animation colors */
+  --wplace-pulse-start: rgba(0, 255, 0, 0.7);
+  --wplace-pulse-mid: rgba(0, 255, 0, 0);
+  --wplace-pulse-end: rgba(0, 255, 0, 0);
+  
+  /* Slider colors */
+  --wplace-slider-thumb-bg: white;
 }
 
 /* Classic theme container styling */
diff --git a/themes/neon.css b/themes/neon.css
index 6102aa9..e483739 100644
--- a/themes/neon.css
+++ b/themes/neon.css
@@ -29,6 +29,50 @@
   /* Feature toggles */
   --wplace-scanline: 1;
   --wplace-pixel-blink: 1;
+
+  /* Icon colors - neon variants */
+  --wplace-icon-primary: #00ff41;
+  --wplace-icon-secondary: #39ff14;
+  --wplace-icon-palette: #ff6b35;
+  
+  /* Additional UI colors - neon variants */
+  --wplace-danger: #ff073a;
+  --wplace-danger-dark: #cc0531;
+  --wplace-muted-text: #00ff4180;
+  --wplace-highlight-secondary: #ffaa00;
+  
+  /* Text variants - neon style */
+  --wplace-text-secondary: #00ff41dd;
+  --wplace-text-muted: #00ff41bb;
+  --wplace-text-dim: #00ff4199;
+  --wplace-text-faded: #00ff41cc;
+  
+  /* Background variants - neon style */
+  --wplace-bg-input: rgba(0, 255, 65, 0.15);
+  --wplace-bg-subtle: rgba(0, 255, 65, 0.08);
+  --wplace-bg-faint: rgba(0, 255, 65, 0.05);
+  --wplace-bg-ghost: rgba(0, 255, 65, 0.03);
+  --wplace-bg-whisper: rgba(0, 255, 65, 0.02);
+  
+  /* Border variants - neon style */
+  --wplace-border-subtle: rgba(0, 255, 65, 0.4);
+  --wplace-border-faint: rgba(0, 255, 65, 0.25);
+  --wplace-border-ghost: rgba(0, 255, 65, 0.15);
+  --wplace-border-ultra-faint: rgba(0, 255, 65, 0.08);
+  
+  /* Shadow variants - neon style */
+  --wplace-shadow-drag: 0 12px 40px rgba(0, 255, 65, 0.6), 0 0 0 2px rgba(0, 255, 65, 0.8), 0 0 20px rgba(0, 255, 65, 0.3);
+  --wplace-shadow-notification: 0 4px 12px rgba(0, 255, 65, 0.4), 0 0 15px rgba(0, 255, 65, 0.2);
+  --wplace-shadow-slider-thumb: 0 3px 6px rgba(0, 255, 65, 0.5), 0 0 0 2px var(--wplace-icon-primary), 0 0 10px rgba(0, 255, 65, 0.3);
+  --wplace-shadow-slider-hover: 0 4px 8px rgba(0, 255, 65, 0.6), 0 0 0 3px var(--wplace-icon-primary), 0 0 15px rgba(0, 255, 65, 0.4);
+  
+  /* Animation colors - neon style */
+  --wplace-pulse-start: rgba(0, 255, 65, 0.8);
+  --wplace-pulse-mid: rgba(0, 255, 65, 0);
+  --wplace-pulse-end: rgba(0, 255, 65, 0);
+  
+  /* Slider colors - neon style */
+  --wplace-slider-thumb-bg: #00ff41;
 }
 
 /* Neon-specific styling overrides */

From f637e232dc59181117756e603f3b1e854ceb9796 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Tue, 26 Aug 2025 23:41:23 +0200
Subject: [PATCH 28/36] css

---
 auto-image-styles.css | 5 +++--
 themes/classic.css    | 1 +
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index 03445c9..5eafa93 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -83,8 +83,9 @@
   --wplace-pulse-mid: rgba(0, 255, 0, 0);
   --wplace-pulse-end: rgba(0, 255, 0, 0);
   
-  /* Slider colors */
+  /* Slider colors - defaults for classic compatibility */
   --wplace-slider-thumb-bg: white;
+  --wplace-slider-track-bg: linear-gradient(to right, var(--wplace-icon-primary) 0%, var(--wplace-icon-secondary) 100%);
 }
 
 /* Theme classes are now defined in separate files */
@@ -1777,7 +1778,7 @@
   width: 100%;
   -webkit-appearance: none;
   height: 8px;
-  background: linear-gradient(to right, var(--wplace-highlight) 0%, var(--wplace-highlight-secondary) 100%);
+  background: var(--wplace-slider-track-bg);
   border-radius: 4px;
   outline: none;
   cursor: pointer;
diff --git a/themes/classic.css b/themes/classic.css
index 3e1add8..50904f2 100644
--- a/themes/classic.css
+++ b/themes/classic.css
@@ -62,6 +62,7 @@
   
   /* Slider colors */
   --wplace-slider-thumb-bg: white;
+  --wplace-slider-track-bg: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
 }
 
 /* Classic theme container styling */

From cbce60c9ef8b5cdbe71db9ab112c0cd792d5f15e Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Tue, 26 Aug 2025 23:57:05 +0200
Subject: [PATCH 29/36] css

---
 auto-image-styles.css | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index 5eafa93..ad30e7e 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -840,7 +840,8 @@
   cursor: pointer;
   -webkit-appearance: none;
   appearance: none;
-  /* Theme-specific styling applied via theme files */
+  background: var(--wplace-slider-track-bg);
+  border-radius: 4px;
 }
 
 .wplace-speed-slider::-webkit-slider-thumb {
@@ -1179,7 +1180,8 @@
   outline: none;
   -webkit-appearance: none;
   cursor: pointer;
-  /* Theme-specific styling applied via theme files */
+  background: var(--wplace-slider-track-bg);
+  border-radius: 4px;
 }
 
 .wplace-speed-value {
@@ -1778,8 +1780,7 @@
   width: 100%;
   -webkit-appearance: none;
   height: 8px;
-  background: var(--wplace-slider-track-bg);
-  border-radius: 4px;
+  /* Theme-specific styling applied via theme files */
   outline: none;
   cursor: pointer;
 }
@@ -1873,7 +1874,8 @@
   outline: none;
   -webkit-appearance: none;
   cursor: pointer;
-  /* Theme-specific styling applied via theme files */
+  background: var(--wplace-slider-track-bg);
+  border-radius: 4px;
 }
 
 .wplace-speed-value {

From b363ad5b1e5caac2883b4eb893e1f3bff30640c8 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Wed, 27 Aug 2025 00:18:57 +0200
Subject: [PATCH 30/36] css

---
 auto-image-styles.css | 27 +++++++++++++--------------
 themes/classic.css    |  8 +++++++-
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index ad30e7e..baf5316 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -264,7 +264,10 @@
   transition: background 0.2s ease;
   position: relative;
   z-index: 2;
-  /* Theme-specific styling applied via theme files */
+  /* Default styling for 100% classic compliance */
+  background: var(--wplace-secondary);
+  color: var(--wplace-highlight);
+  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
 }
 
 .wplace-header-title {
@@ -289,12 +292,18 @@
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
-  /* Theme-specific styling applied via theme files */
+  /* Default styling for 100% classic compliance */
+  background: rgba(255,255,255,0.1);
+  color: var(--wplace-text);
+  border-radius: 4px;
+  font-family: var(--wplace-font);
 }
 
 .wplace-header-btn:hover {
   transform: scale(1.1);
-  /* Theme-specific styling applied via theme files */
+  /* Default styling for 100% classic compliance */
+  background: var(--wplace-accent);
+  color: var(--wplace-text);
 }
 
 .wplace-content {
@@ -1633,17 +1642,7 @@
   /* Theme-specific styling applied via theme files */
 }
 
-/* Settings animations */
-@keyframes settingsSlideIn {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
+/* Settings animations - removed duplicate, handled above */
 
 /* Font styling corrections */
 .resize-controls label {
diff --git a/themes/classic.css b/themes/classic.css
index 50904f2..806e85a 100644
--- a/themes/classic.css
+++ b/themes/classic.css
@@ -332,7 +332,7 @@
 :root .wplace-header-btn,
 .wplace-theme--classic .wplace-header-btn {
   background: rgba(255,255,255,0.1);
-  color: var(--wplace-text);
+  color: var(--wplace-highlight);
   border-radius: 4px;
   font-family: var(--wplace-font);
 }
@@ -597,6 +597,12 @@
   border-radius: 4px;
 }
 
+:root .wplace-overlay-opacity-slider,
+.wplace-theme--classic .wplace-overlay-opacity-slider {
+  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
+  border-radius: 4px;
+}
+
 :root .wplace-speed-value,
 .wplace-theme--classic .wplace-speed-value {
   background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

From e36fec1bd000f615690225c0cf917486427cfe55 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Wed, 27 Aug 2025 00:29:23 +0200
Subject: [PATCH 31/36] css

---
 auto-image-styles.css | 56 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/auto-image-styles.css b/auto-image-styles.css
index baf5316..14bf8c1 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -1644,6 +1644,62 @@
 
 /* Settings animations - removed duplicate, handled above */
 
+/* Settings Header Styling */
+.wplace-settings-header {
+  background: var(--wplace-accent);
+  padding: 20px;
+  border-bottom: 1px solid var(--wplace-border-color);
+  cursor: move;
+}
+
+.wplace-settings-title-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.wplace-settings-title {
+  margin: 0;
+  color: var(--wplace-text);
+  font-size: 20px;
+  font-weight: 300;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.wplace-settings-icon {
+  font-size: 18px;
+  color: var(--wplace-highlight);
+  animation: spin 2s linear infinite;
+}
+
+.wplace-settings-close-btn {
+  background: rgba(34, 34, 34, 0.4);
+  color: var(--wplace-text);
+  border: 1px solid var(--wplace-border-color);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  font-size: 14px;
+  font-weight: 300;
+}
+
+.wplace-settings-close-btn:hover {
+  background: rgba(255, 0, 0, 0.4);
+  transform: scale(1.1);
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 /* Font styling corrections */
 .resize-controls label {
   font-size: 12px;

From 19a8b4d8046506e3913880a5a1aacce70de0ad2e Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Wed, 27 Aug 2025 00:35:24 +0200
Subject: [PATCH 32/36] css

---
 themes/classic.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/themes/classic.css b/themes/classic.css
index 806e85a..cd1a45b 100644
--- a/themes/classic.css
+++ b/themes/classic.css
@@ -634,4 +634,13 @@
   background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
   color: white;
   border-radius: 8px;
+}
+
+/* Resize dialog styling for classic theme */
+:root .resize-container,
+.wplace-theme--classic .resize-container {
+  background: #000000;
+  border: 1px solid #ffffff;
+  border-radius: 12px;
+  box-shadow: 0 0 20px rgba(0,0,0,0.5);
 }
\ No newline at end of file

From 3a18560dc09e3c986fe613776dc03c030631b7ec Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Wed, 27 Aug 2025 00:51:38 +0200
Subject: [PATCH 33/36] css

---
 themes/neon.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/themes/neon.css b/themes/neon.css
index e483739..2676c14 100644
--- a/themes/neon.css
+++ b/themes/neon.css
@@ -345,4 +345,13 @@
   100% {
     transform: translateY(400px);
   }
+}
+
+/* Resize dialog styling for neon theme */
+.wplace-theme--neon .resize-container {
+  background: #1a1a2e !important;
+  border: 3px solid #00ff41 !important;
+  border-radius: 0 !important;
+  box-shadow: 0 0 30px rgba(0, 255, 65, 0.5) !important;
+  font-family: 'Press Start 2P', monospace !important;
 }
\ No newline at end of file

From 66e349b0859fa096aaf618af997020611b81539b Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Wed, 27 Aug 2025 01:07:30 +0200
Subject: [PATCH 34/36] try new theme

---
 Auto-Image.js           |  21 +++
 auto-image-styles.css   |   1 +
 themes/ocean-depths.css | 388 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 410 insertions(+)
 create mode 100644 themes/ocean-depths.css

diff --git a/Auto-Image.js b/Auto-Image.js
index d20eba5..36dae3d 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -170,6 +170,27 @@
           pixelBlink: true,
         },
       },
+      "Ocean Depths": {
+        primary: "#0d1b2a",
+        secondary: "#1b263b",
+        accent: "#415a77",
+        text: "#e0e1dd",
+        highlight: "#00b4d8",
+        success: "#06ffa5",
+        error: "#ff006e",
+        warning: "#ffbe0b",
+        fontFamily: "'Inter', 'Segoe UI', sans-serif",
+        borderRadius: "8px",
+        borderStyle: "solid",
+        borderWidth: "1px",
+        boxShadow: "0 8px 32px rgba(0, 180, 216, 0.2), 0 0 0 1px rgba(224, 225, 221, 0.1)",
+        backdropFilter: "blur(12px)",
+        animations: {
+          glow: false,
+          scanline: false,
+          pixelBlink: false,
+        },
+      },
     },
     currentTheme: "Classic Autobot",
   }
diff --git a/auto-image-styles.css b/auto-image-styles.css
index 14bf8c1..61e5d63 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -10,6 +10,7 @@
 /* Import theme files - classic is default */
 @import url('https://staninna.github.io/WPlace-AutoBOT/themes/classic.css');
 @import url('https://staninna.github.io/WPlace-AutoBOT/themes/neon.css');
+@import url('https://staninna.github.io/WPlace-AutoBOT/themes/ocean-depths.css');
 
 /* Default :root CSS variables for 100% classic theme compliance */
 /* These ensure the bot works perfectly even if theme files fail to load */
diff --git a/themes/ocean-depths.css b/themes/ocean-depths.css
new file mode 100644
index 0000000..485d5cf
--- /dev/null
+++ b/themes/ocean-depths.css
@@ -0,0 +1,388 @@
+/* WPlace Auto-Image Bot - Ocean Depths Theme */
+/* Deep sea aesthetic with calming blues, subtle waves, and marine colors */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+.wplace-theme--ocean-depths {
+  /* === CORE COLORS === */
+  --wplace-primary: #0d1b2a;           /* Deep ocean dark blue */
+  --wplace-secondary: #1b263b;         /* Mid-ocean blue */
+  --wplace-accent: #415a77;            /* Lighter ocean blue */
+  --wplace-text: #e0e1dd;              /* Pearl white */
+  --wplace-highlight: #00b4d8;         /* Bright cyan */
+  --wplace-success: #06ffa5;           /* Sea foam green */
+  --wplace-error: #ff006e;             /* Deep coral pink */
+  --wplace-warning: #ffbe0b;           /* Golden yellow */
+
+  /* === UI PROPERTIES === */
+  --wplace-radius: 8px;
+  --wplace-border-style: solid;
+  --wplace-border-width: 1px;
+  --wplace-border-color: #415a77;
+  --wplace-shadow: 0 8px 32px rgba(0, 180, 216, 0.2), 0 0 0 1px rgba(224, 225, 221, 0.1);
+  --wplace-backdrop: blur(12px);
+  --wplace-font: 'Inter', 'Segoe UI', sans-serif;
+
+  /* === EXTENDED COLOR PALETTE === */
+  /* Icon colors */
+  --wplace-icon-primary: #00b4d8;      /* Bright ocean blue */
+  --wplace-icon-secondary: #90e0ef;    /* Light cyan */
+  --wplace-icon-palette: #06ffa5;      /* Sea foam green */
+  
+  /* Additional UI colors */
+  --wplace-danger: #ff006e;            /* Deep coral */
+  --wplace-danger-dark: #d90368;       /* Darker coral */
+  --wplace-muted-text: rgba(224, 225, 221, 0.7);
+  --wplace-highlight-secondary: #caf0f8;
+  
+  /* Text variants */
+  --wplace-text-secondary: rgba(224, 225, 221, 0.9);
+  --wplace-text-muted: rgba(224, 225, 221, 0.7);
+  --wplace-text-dim: rgba(224, 225, 221, 0.6);
+  --wplace-text-faded: rgba(224, 225, 221, 0.8);
+  
+  /* Background variants with ocean blues */
+  --wplace-bg-input: rgba(0, 180, 216, 0.15);
+  --wplace-bg-subtle: rgba(65, 90, 119, 0.2);
+  --wplace-bg-faint: rgba(65, 90, 119, 0.12);
+  --wplace-bg-ghost: rgba(65, 90, 119, 0.08);
+  --wplace-bg-whisper: rgba(65, 90, 119, 0.05);
+  
+  /* Border variants */
+  --wplace-border-subtle: rgba(144, 224, 239, 0.3);
+  --wplace-border-faint: rgba(144, 224, 239, 0.2);
+  --wplace-border-ghost: rgba(144, 224, 239, 0.15);
+  --wplace-border-ultra-faint: rgba(144, 224, 239, 0.08);
+  
+  /* Shadow variants with ocean blues */
+  --wplace-shadow-drag: 0 12px 40px rgba(0, 180, 216, 0.4), 0 0 0 2px rgba(144, 224, 239, 0.3);
+  --wplace-shadow-notification: 0 4px 12px rgba(0, 180, 216, 0.3);
+  --wplace-shadow-slider-thumb: 0 3px 6px rgba(0, 180, 216, 0.4), 0 0 0 2px var(--wplace-icon-primary);
+  --wplace-shadow-slider-hover: 0 4px 8px rgba(0, 180, 216, 0.5), 0 0 0 3px var(--wplace-icon-primary);
+  
+  /* Animation colors */
+  --wplace-pulse-start: rgba(6, 255, 165, 0.7);
+  --wplace-pulse-mid: rgba(6, 255, 165, 0);
+  --wplace-pulse-end: rgba(6, 255, 165, 0);
+  
+  /* Slider colors */
+  --wplace-slider-thumb-bg: #00b4d8;
+  --wplace-slider-track-bg: linear-gradient(to right, #00b4d8 0%, #90e0ef 100%);
+}
+
+/* === COMPONENT STYLING === */
+
+/* Main container with ocean wave effect */
+.wplace-theme--ocean-depths #wplace-image-bot-container {
+  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
+  color: var(--wplace-text) !important;
+  border: 1px solid rgba(0, 180, 216, 0.3) !important;
+  border-radius: 8px !important;
+  box-shadow: 0 8px 32px rgba(0, 180, 216, 0.2), 0 0 0 1px rgba(224, 225, 221, 0.1) !important;
+  font-family: 'Inter', 'Segoe UI', sans-serif !important;
+  backdrop-filter: blur(12px) !important;
+  position: relative;
+}
+
+/* Subtle wave animation overlay */
+.wplace-theme--ocean-depths #wplace-image-bot-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    radial-gradient(circle at 20% 80%, rgba(0, 180, 216, 0.1) 0%, transparent 50%),
+    radial-gradient(circle at 80% 20%, rgba(144, 224, 239, 0.08) 0%, transparent 50%),
+    radial-gradient(circle at 40% 40%, rgba(6, 255, 165, 0.05) 0%, transparent 50%);
+  border-radius: 8px;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Stats container */
+.wplace-theme--ocean-depths #wplace-stats-container {
+  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
+  border: 1px solid rgba(0, 180, 216, 0.3) !important;
+  border-radius: 8px !important;
+  box-shadow: 0 8px 32px rgba(0, 180, 216, 0.2) !important;
+  font-family: 'Inter', 'Segoe UI', sans-serif !important;
+}
+
+/* Settings dialog */
+.wplace-theme--ocean-depths #wplace-settings-container {
+  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
+  border: 1px solid rgba(0, 180, 216, 0.3) !important;
+  border-radius: 8px !important;
+  box-shadow: 0 16px 48px rgba(0, 180, 216, 0.3), 0 0 0 1px rgba(224, 225, 221, 0.1) !important;
+  font-family: 'Inter', 'Segoe UI', sans-serif !important;
+  backdrop-filter: blur(16px) !important;
+}
+
+/* Resize dialog */
+.wplace-theme--ocean-depths .resize-container {
+  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
+  border: 1px solid rgba(0, 180, 216, 0.3) !important;
+  border-radius: 8px !important;
+  box-shadow: 0 16px 48px rgba(0, 180, 216, 0.3), 0 0 0 1px rgba(224, 225, 221, 0.1) !important;
+  font-family: 'Inter', 'Segoe UI', sans-serif !important;
+  backdrop-filter: blur(16px) !important;
+}
+
+/* Headers with ocean gradient */
+.wplace-theme--ocean-depths .wplace-header {
+  background: linear-gradient(135deg, #1b263b 0%, #415a77 100%) !important;
+  color: var(--wplace-text) !important;
+  border-bottom: 1px solid rgba(0, 180, 216, 0.3) !important;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+}
+
+/* Settings header */
+.wplace-theme--ocean-depths .wplace-settings-header {
+  background: linear-gradient(135deg, #1b263b 0%, #415a77 100%) !important;
+  border-bottom: 1px solid rgba(0, 180, 216, 0.3) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-settings-title {
+  color: var(--wplace-text) !important;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-settings-close-btn {
+  background: rgba(65, 90, 119, 0.3) !important;
+  border: 1px solid rgba(0, 180, 216, 0.4) !important;
+  border-radius: 6px !important;
+  color: var(--wplace-text) !important;
+  transition: all 0.3s ease !important;
+}
+
+.wplace-theme--ocean-depths .wplace-settings-close-btn:hover {
+  background: rgba(255, 0, 110, 0.2) !important;
+  border-color: var(--wplace-error) !important;
+  box-shadow: 0 0 12px rgba(255, 0, 110, 0.3) !important;
+}
+
+/* Section titles */
+.wplace-theme--ocean-depths .wplace-section-title {
+  color: var(--wplace-highlight) !important;
+  text-shadow: 0 0 8px rgba(0, 180, 216, 0.3) !important;
+  font-weight: 600 !important;
+}
+
+/* Buttons with ocean styling */
+.wplace-theme--ocean-depths .wplace-btn {
+  background: linear-gradient(135deg, #1b263b 0%, #415a77 100%) !important;
+  border: 1px solid rgba(0, 180, 216, 0.4) !important;
+  border-radius: 8px !important;
+  color: var(--wplace-text) !important;
+  font-family: 'Inter', 'Segoe UI', sans-serif !important;
+  font-weight: 500 !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #415a77 0%, #778da9 100%) !important;
+  box-shadow: 0 8px 24px rgba(0, 180, 216, 0.3), 0 0 0 1px rgba(0, 180, 216, 0.5) !important;
+  transform: translateY(-1px) !important;
+}
+
+/* Button variants with ocean colors */
+.wplace-theme--ocean-depths .wplace-btn-start {
+  background: linear-gradient(135deg, #06ffa5 0%, #00b4d8 100%) !important;
+  color: #0d1b2a !important;
+  font-weight: 600 !important;
+}
+
+.wplace-theme--ocean-depths .wplace-btn-start:hover:not(:disabled) {
+  box-shadow: 0 8px 24px rgba(6, 255, 165, 0.4) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-btn-stop {
+  background: linear-gradient(135deg, #ff006e 0%, #d90368 100%) !important;
+  color: white !important;
+  font-weight: 600 !important;
+}
+
+.wplace-theme--ocean-depths .wplace-btn-stop:hover:not(:disabled) {
+  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.4) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-btn-upload {
+  background: rgba(65, 90, 119, 0.3) !important;
+  border: 2px dashed var(--wplace-highlight) !important;
+  color: var(--wplace-highlight) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-btn-upload:hover:not(:disabled) {
+  background: rgba(0, 180, 216, 0.1) !important;
+  box-shadow: 0 8px 24px rgba(0, 180, 216, 0.2) !important;
+}
+
+/* Progress bars with ocean waves */
+.wplace-theme--ocean-depths .wplace-progress {
+  background: rgba(13, 27, 42, 0.8) !important;
+  border: 1px solid rgba(0, 180, 216, 0.3) !important;
+  border-radius: 8px !important;
+}
+
+.wplace-theme--ocean-depths .wplace-progress-bar {
+  background: linear-gradient(90deg, #00b4d8 0%, #06ffa5 50%, #90e0ef 100%) !important;
+  box-shadow: 0 0 12px rgba(0, 180, 216, 0.4) !important;
+  position: relative;
+  overflow: hidden;
+}
+
+.wplace-theme--ocean-depths .wplace-progress-bar::after {
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
+  animation: waveShimmer 2s ease-in-out infinite !important;
+}
+
+/* Status indicators with ocean colors */
+.wplace-theme--ocean-depths .status-success {
+  background: rgba(6, 255, 165, 0.15) !important;
+  border-color: var(--wplace-success) !important;
+  color: var(--wplace-success) !important;
+  box-shadow: 0 0 15px rgba(6, 255, 165, 0.3) !important;
+  text-shadow: 0 0 8px rgba(6, 255, 165, 0.5) !important;
+}
+
+.wplace-theme--ocean-depths .status-error {
+  background: rgba(255, 0, 110, 0.15) !important;
+  border-color: var(--wplace-error) !important;
+  color: var(--wplace-error) !important;
+  box-shadow: 0 0 15px rgba(255, 0, 110, 0.3) !important;
+  text-shadow: 0 0 8px rgba(255, 0, 110, 0.5) !important;
+}
+
+.wplace-theme--ocean-depths .status-default {
+  background: rgba(0, 180, 216, 0.15) !important;
+  border-color: var(--wplace-highlight) !important;
+  color: var(--wplace-highlight) !important;
+  text-shadow: 0 0 5px rgba(0, 180, 216, 0.3) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-stat-value {
+  color: var(--wplace-highlight) !important;
+  text-shadow: 0 0 8px rgba(0, 180, 216, 0.3) !important;
+  font-weight: 600 !important;
+}
+
+/* Sections with subtle ocean depth effect */
+.wplace-theme--ocean-depths .wplace-section {
+  background: rgba(27, 38, 59, 0.4) !important;
+  border: 1px solid rgba(0, 180, 216, 0.2) !important;
+  border-radius: 8px !important;
+  backdrop-filter: blur(8px) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-status-section {
+  background: rgba(27, 38, 59, 0.4) !important;
+  border: 1px solid rgba(0, 180, 216, 0.2) !important;
+  border-radius: 8px !important;
+}
+
+.wplace-theme--ocean-depths .wplace-settings-section-wrapper {
+  background: rgba(27, 38, 59, 0.3) !important;
+  border: 1px solid rgba(0, 180, 216, 0.2) !important;
+  border-radius: 8px !important;
+}
+
+/* Form controls with ocean styling */
+.wplace-theme--ocean-depths .wplace-settings-select {
+  background: rgba(27, 38, 59, 0.8) !important;
+  border: 1px solid rgba(0, 180, 216, 0.4) !important;
+  border-radius: 8px !important;
+  color: var(--wplace-text) !important;
+  font-family: 'Inter', 'Segoe UI', sans-serif !important;
+  box-shadow: 0 2px 8px rgba(0, 180, 216, 0.1) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-settings-select:focus {
+  border-color: var(--wplace-highlight) !important;
+  box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.3) !important;
+}
+
+/* Sliders with ocean wave gradient */
+.wplace-theme--ocean-depths .wplace-speed-slider {
+  background: linear-gradient(to right, #00b4d8 0%, #90e0ef 100%) !important;
+  border-radius: 8px !important;
+}
+
+.wplace-theme--ocean-depths .wplace-overlay-opacity-slider {
+  background: linear-gradient(to right, #00b4d8 0%, #90e0ef 100%) !important;
+  border-radius: 8px !important;
+}
+
+.wplace-theme--ocean-depths .wplace-speed-value {
+  background: linear-gradient(135deg, #00b4d8 0%, #06ffa5 100%) !important;
+  border-radius: 8px !important;
+  color: #0d1b2a !important;
+  font-weight: 600 !important;
+  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3) !important;
+  border: 1px solid rgba(144, 224, 239, 0.3) !important;
+}
+
+/* Settings labels with ocean glow */
+.wplace-theme--ocean-depths .wplace-settings-section-label {
+  color: var(--wplace-highlight) !important;
+  text-shadow: 0 0 8px rgba(0, 180, 216, 0.3) !important;
+  font-family: 'Inter', 'Segoe UI', sans-serif !important;
+  font-weight: 600 !important;
+}
+
+/* Icon colors for ocean theme */
+.wplace-theme--ocean-depths .wplace-icon-key { color: #00b4d8; }
+.wplace-theme--ocean-depths .wplace-icon-robot { color: #00b4d8; }
+.wplace-theme--ocean-depths .wplace-icon-speed { color: #00b4d8; }
+.wplace-theme--ocean-depths .wplace-icon-bell { color: #ffbe0b; }
+.wplace-theme--ocean-depths .wplace-icon-palette { color: #06ffa5; }
+.wplace-theme--ocean-depths .wplace-icon-globe { color: #90e0ef; }
+.wplace-theme--ocean-depths .wplace-icon-eye { color: #00b4d8; }
+
+/* Ocean wave animations */
+@keyframes waveShimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(200%);
+  }
+  100% {
+    transform: translateX(300%);
+  }
+}
+
+@keyframes oceanPulse {
+  0%, 100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.05);
+  }
+}
+
+/* Hover effects with gentle ocean motion */
+.wplace-theme--ocean-depths .wplace-btn:hover:not(:disabled) {
+  animation: oceanPulse 2s ease-in-out infinite;
+}
+
+/* Color swatches with ocean depth effect */
+.wplace-theme--ocean-depths .wplace-color-swatch {
+  border: 1px solid rgba(0, 180, 216, 0.3) !important;
+  border-radius: 6px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
+}
+
+.wplace-theme--ocean-depths .wplace-color-swatch:hover {
+  box-shadow: 0 4px 16px rgba(0, 180, 216, 0.3) !important;
+  transform: translateY(-1px);
+}
+
+.wplace-theme--ocean-depths .wplace-stat-colors-grid {
+  background: rgba(13, 27, 42, 0.6) !important;
+  border-radius: 8px !important;
+  border: 1px solid rgba(0, 180, 216, 0.2) !important;
+}
\ No newline at end of file

From 40b8d3ab455f5d1e92e3d73fcba32381d28e4939 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Wed, 27 Aug 2025 01:13:32 +0200
Subject: [PATCH 35/36] classic light theme

---
 Auto-Image.js            |  42 ++---
 auto-image-styles.css    |   2 +-
 themes/classic-light.css | 346 ++++++++++++++++++++++++++++++++++
 themes/ocean-depths.css  | 388 ---------------------------------------
 4 files changed, 368 insertions(+), 410 deletions(-)
 create mode 100644 themes/classic-light.css
 delete mode 100644 themes/ocean-depths.css

diff --git a/Auto-Image.js b/Auto-Image.js
index 36dae3d..cedfc19 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -146,6 +146,27 @@
           pixelBlink: false,
         },
       },
+      "Classic Light": {
+        primary: "#ffffff",
+        secondary: "#f8f9fa",
+        accent: "#e9ecef",
+        text: "#212529",
+        highlight: "#6f42c1",
+        success: "#28a745",
+        error: "#dc3545",
+        warning: "#ffc107",
+        fontFamily: "'Segoe UI', Roboto, sans-serif",
+        borderRadius: "12px",
+        borderStyle: "solid",
+        borderWidth: "1px",
+        boxShadow: "0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.08)",
+        backdropFilter: "blur(10px)",
+        animations: {
+          glow: false,
+          scanline: false,
+          pixelBlink: false,
+        },
+      },
       "Neon Retro": {
         primary: "#1a1a2e",
         secondary: "#16213e",
@@ -170,27 +191,6 @@
           pixelBlink: true,
         },
       },
-      "Ocean Depths": {
-        primary: "#0d1b2a",
-        secondary: "#1b263b",
-        accent: "#415a77",
-        text: "#e0e1dd",
-        highlight: "#00b4d8",
-        success: "#06ffa5",
-        error: "#ff006e",
-        warning: "#ffbe0b",
-        fontFamily: "'Inter', 'Segoe UI', sans-serif",
-        borderRadius: "8px",
-        borderStyle: "solid",
-        borderWidth: "1px",
-        boxShadow: "0 8px 32px rgba(0, 180, 216, 0.2), 0 0 0 1px rgba(224, 225, 221, 0.1)",
-        backdropFilter: "blur(12px)",
-        animations: {
-          glow: false,
-          scanline: false,
-          pixelBlink: false,
-        },
-      },
     },
     currentTheme: "Classic Autobot",
   }
diff --git a/auto-image-styles.css b/auto-image-styles.css
index 61e5d63..5220478 100644
--- a/auto-image-styles.css
+++ b/auto-image-styles.css
@@ -9,8 +9,8 @@
 
 /* Import theme files - classic is default */
 @import url('https://staninna.github.io/WPlace-AutoBOT/themes/classic.css');
+@import url('https://staninna.github.io/WPlace-AutoBOT/themes/classic-light.css');
 @import url('https://staninna.github.io/WPlace-AutoBOT/themes/neon.css');
-@import url('https://staninna.github.io/WPlace-AutoBOT/themes/ocean-depths.css');
 
 /* Default :root CSS variables for 100% classic theme compliance */
 /* These ensure the bot works perfectly even if theme files fail to load */
diff --git a/themes/classic-light.css b/themes/classic-light.css
new file mode 100644
index 0000000..9984226
--- /dev/null
+++ b/themes/classic-light.css
@@ -0,0 +1,346 @@
+/* WPlace Auto-Image Bot - Classic Light Theme */
+/* Clean, bright theme based on classic design with light backgrounds */
+
+.wplace-theme--classic-light {
+  /* === CORE COLORS === */
+  --wplace-primary: #ffffff;           /* Clean white */
+  --wplace-secondary: #f8f9fa;         /* Light gray */
+  --wplace-accent: #e9ecef;            /* Lighter gray */
+  --wplace-text: #212529;              /* Dark text */
+  --wplace-highlight: #6f42c1;         /* Purple highlight */
+  --wplace-success: #28a745;           /* Bootstrap green */
+  --wplace-error: #dc3545;             /* Bootstrap red */
+  --wplace-warning: #ffc107;           /* Bootstrap yellow */
+
+  /* === UI PROPERTIES === */
+  --wplace-radius: 8px;
+  --wplace-border-style: solid;
+  --wplace-border-width: 1px;
+  --wplace-border-color: #415a77;
+  --wplace-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
+  --wplace-backdrop: blur(10px);
+  --wplace-font: 'Segoe UI', Roboto, sans-serif;
+
+  /* === EXTENDED COLOR PALETTE === */
+  /* Icon colors */
+  --wplace-icon-primary: #4facfe;      /* Light blue */
+  --wplace-icon-secondary: #00f2fe;    /* Cyan */
+  --wplace-icon-palette: #f093fb;      /* Pink */
+  
+  /* Additional UI colors */
+  --wplace-danger: #dc3545;            /* Bootstrap red */
+  --wplace-danger-dark: #c82333;       /* Darker red */
+  --wplace-muted-text: rgba(33, 37, 41, 0.7);
+  --wplace-highlight-secondary: #d3a4ff;
+  
+  /* Text variants */
+  --wplace-text-secondary: rgba(33, 37, 41, 0.9);
+  --wplace-text-muted: rgba(33, 37, 41, 0.7);
+  --wplace-text-dim: rgba(33, 37, 41, 0.6);
+  --wplace-text-faded: rgba(33, 37, 41, 0.8);
+  
+  /* Background variants */
+  --wplace-bg-input: rgba(0, 0, 0, 0.08);
+  --wplace-bg-subtle: rgba(0, 0, 0, 0.05);
+  --wplace-bg-faint: rgba(0, 0, 0, 0.03);
+  --wplace-bg-ghost: rgba(0, 0, 0, 0.02);
+  --wplace-bg-whisper: rgba(0, 0, 0, 0.01);
+  
+  /* Border variants */
+  --wplace-border-subtle: rgba(0, 0, 0, 0.2);
+  --wplace-border-faint: rgba(0, 0, 0, 0.15);
+  --wplace-border-ghost: rgba(0, 0, 0, 0.1);
+  --wplace-border-ultra-faint: rgba(0, 0, 0, 0.05);
+  
+  /* Shadow variants */
+  --wplace-shadow-drag: 0 12px 40px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(111, 66, 193, 0.3);
+  --wplace-shadow-notification: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --wplace-shadow-slider-thumb: 0 3px 6px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--wplace-icon-primary);
+  --wplace-shadow-slider-hover: 0 4px 8px rgba(0, 0, 0, 0.25), 0 0 0 3px var(--wplace-icon-primary);
+  
+  /* Animation colors */
+  --wplace-pulse-start: rgba(40, 167, 69, 0.7);
+  --wplace-pulse-mid: rgba(40, 167, 69, 0);
+  --wplace-pulse-end: rgba(40, 167, 69, 0);
+  
+  /* Slider colors */
+  --wplace-slider-thumb-bg: #6f42c1;
+  --wplace-slider-track-bg: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
+}
+
+/* === COMPONENT STYLING === */
+
+/* Main container with clean light styling */
+.wplace-theme--classic-light #wplace-image-bot-container {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
+  color: var(--wplace-text) !important;
+  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
+  font-family: 'Segoe UI', Roboto, sans-serif !important;
+  backdrop-filter: blur(10px) !important;
+}
+
+
+/* Stats container */
+.wplace-theme--classic-light #wplace-stats-container {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
+  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
+  font-family: 'Segoe UI', Roboto, sans-serif !important;
+}
+
+/* Settings dialog */
+.wplace-theme--classic-light #wplace-settings-container {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
+  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
+  font-family: 'Segoe UI', Roboto, sans-serif !important;
+  backdrop-filter: blur(10px) !important;
+}
+
+/* Resize dialog */
+.wplace-theme--classic-light .resize-container {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
+  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
+  font-family: 'Segoe UI', Roboto, sans-serif !important;
+  backdrop-filter: blur(10px) !important;
+}
+
+/* Headers with light gradient */
+.wplace-theme--classic-light .wplace-header {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
+  color: var(--wplace-highlight) !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
+  text-shadow: none !important;
+}
+
+/* Settings header */
+.wplace-theme--classic-light .wplace-settings-header {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
+}
+
+.wplace-theme--classic-light .wplace-settings-title {
+  color: var(--wplace-text) !important;
+  text-shadow: none !important;
+}
+
+.wplace-theme--classic-light .wplace-settings-close-btn {
+  background: rgba(0, 0, 0, 0.05) !important;
+  border: 1px solid rgba(0, 0, 0, 0.2) !important;
+  border-radius: 50% !important;
+  color: var(--wplace-text) !important;
+  transition: all 0.3s ease !important;
+}
+
+.wplace-theme--classic-light .wplace-settings-close-btn:hover {
+  background: rgba(220, 53, 69, 0.1) !important;
+  border-color: var(--wplace-error) !important;
+  box-shadow: 0 0 12px rgba(220, 53, 69, 0.3) !important;
+}
+
+/* Section titles */
+.wplace-theme--classic-light .wplace-section-title {
+  color: var(--wplace-highlight) !important;
+  text-shadow: none !important;
+  font-weight: 600 !important;
+}
+
+/* Buttons with light styling */
+.wplace-theme--classic-light .wplace-btn {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
+  border: 1px solid rgba(0, 0, 0, 0.2) !important;
+  border-radius: 12px !important;
+  color: var(--wplace-text) !important;
+  font-family: 'Segoe UI', Roboto, sans-serif !important;
+  font-weight: 500 !important;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.wplace-theme--classic-light .wplace-btn:hover:not(:disabled) {
+  background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+  transform: translateY(-1px) !important;
+}
+
+/* Button variants with classic light colors */
+.wplace-theme--classic-light .wplace-btn-start {
+  background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
+  color: white !important;
+  font-weight: 600 !important;
+}
+
+.wplace-theme--classic-light .wplace-btn-start:hover:not(:disabled) {
+  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4) !important;
+}
+
+.wplace-theme--classic-light .wplace-btn-stop {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
+  color: white !important;
+  font-weight: 600 !important;
+}
+
+.wplace-theme--classic-light .wplace-btn-stop:hover:not(:disabled) {
+  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4) !important;
+}
+
+.wplace-theme--classic-light .wplace-btn-upload {
+  background: rgba(111, 66, 193, 0.1) !important;
+  border: 2px dashed var(--wplace-highlight) !important;
+  color: var(--wplace-highlight) !important;
+}
+
+.wplace-theme--classic-light .wplace-btn-upload:hover:not(:disabled) {
+  background: rgba(111, 66, 193, 0.15) !important;
+  box-shadow: 0 4px 12px rgba(111, 66, 193, 0.2) !important;
+}
+
+/* Progress bars with clean light styling */
+.wplace-theme--classic-light .wplace-progress {
+  background: rgba(0, 0, 0, 0.1) !important;
+  border: 1px solid rgba(0, 0, 0, 0.15) !important;
+  border-radius: 12px !important;
+}
+
+.wplace-theme--classic-light .wplace-progress-bar {
+  background: linear-gradient(135deg, #6f42c1 0%, #9370db 100%) !important;
+  box-shadow: none !important;
+}
+
+.wplace-theme--classic-light .wplace-progress-bar::after {
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
+}
+
+/* Status indicators with light colors */
+.wplace-theme--classic-light .status-success {
+  background: rgba(40, 167, 69, 0.1) !important;
+  border-color: var(--wplace-success) !important;
+  color: var(--wplace-success) !important;
+  box-shadow: 0 0 15px rgba(40, 167, 69, 0.2) !important;
+  text-shadow: none !important;
+}
+
+.wplace-theme--classic-light .status-error {
+  background: rgba(220, 53, 69, 0.1) !important;
+  border-color: var(--wplace-error) !important;
+  color: var(--wplace-error) !important;
+  box-shadow: 0 0 15px rgba(220, 53, 69, 0.2) !important;
+  text-shadow: none !important;
+}
+
+.wplace-theme--classic-light .status-default {
+  background: rgba(111, 66, 193, 0.1) !important;
+  border-color: var(--wplace-highlight) !important;
+  color: var(--wplace-highlight) !important;
+  text-shadow: none !important;
+}
+
+.wplace-theme--classic-light .wplace-stat-value {
+  color: var(--wplace-highlight) !important;
+  text-shadow: none !important;
+  font-weight: 600 !important;
+}
+
+/* Sections with light styling */
+.wplace-theme--classic-light .wplace-section {
+  background: rgba(0, 0, 0, 0.03) !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  border-radius: 12px !important;
+}
+
+.wplace-theme--classic-light .wplace-status-section {
+  background: rgba(0, 0, 0, 0.03) !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  border-radius: 12px !important;
+}
+
+.wplace-theme--classic-light .wplace-settings-section-wrapper {
+  background: rgba(0, 0, 0, 0.03) !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+  border-radius: 12px !important;
+}
+
+/* Form controls with light styling */
+.wplace-theme--classic-light .wplace-settings-select {
+  background: #ffffff !important;
+  border: 1px solid rgba(0, 0, 0, 0.2) !important;
+  border-radius: 8px !important;
+  color: var(--wplace-text) !important;
+  font-family: 'Segoe UI', Roboto, sans-serif !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+.wplace-theme--classic-light .wplace-settings-select:focus {
+  border-color: var(--wplace-highlight) !important;
+  box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.3) !important;
+}
+
+/* Sliders with classic gradient */
+.wplace-theme--classic-light .wplace-speed-slider {
+  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
+  border-radius: 4px !important;
+}
+
+.wplace-theme--classic-light .wplace-overlay-opacity-slider {
+  background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%) !important;
+  border-radius: 4px !important;
+}
+
+.wplace-theme--classic-light .wplace-speed-value {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
+  border-radius: 8px !important;
+  color: white !important;
+  font-weight: 600 !important;
+  box-shadow: 0 3px 10px rgba(79, 172, 254, 0.3) !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Settings labels */
+.wplace-theme--classic-light .wplace-settings-section-label {
+  color: var(--wplace-highlight) !important;
+  text-shadow: none !important;
+  font-family: 'Segoe UI', Roboto, sans-serif !important;
+  font-weight: 600 !important;
+}
+
+/* Icon colors for classic light theme */
+.wplace-theme--classic-light .wplace-icon-key { color: #4facfe; }
+.wplace-theme--classic-light .wplace-icon-robot { color: #4facfe; }
+.wplace-theme--classic-light .wplace-icon-speed { color: #4facfe; }
+.wplace-theme--classic-light .wplace-icon-bell { color: #ffc107; }
+.wplace-theme--classic-light .wplace-icon-palette { color: #f093fb; }
+.wplace-theme--classic-light .wplace-icon-globe { color: #ffeaa7; }
+.wplace-theme--classic-light .wplace-icon-eye { color: #6f42c1; }
+
+/* Clean light theme animations */
+@keyframes lightShimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(200%);
+  }
+}
+
+/* Color swatches with light styling */
+.wplace-theme--classic-light .wplace-color-swatch {
+  border: 1px solid rgba(0, 0, 0, 0.2) !important;
+  border-radius: 4px !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+.wplace-theme--classic-light .wplace-color-swatch:hover {
+  box-shadow: 0 4px 16px rgba(111, 66, 193, 0.3) !important;
+  transform: translateY(-1px);
+}
+
+.wplace-theme--classic-light .wplace-stat-colors-grid {
+  background: rgba(0, 0, 0, 0.05) !important;
+  border-radius: 8px !important;
+  border: 1px solid rgba(0, 0, 0, 0.1) !important;
+}
\ No newline at end of file
diff --git a/themes/ocean-depths.css b/themes/ocean-depths.css
deleted file mode 100644
index 485d5cf..0000000
--- a/themes/ocean-depths.css
+++ /dev/null
@@ -1,388 +0,0 @@
-/* WPlace Auto-Image Bot - Ocean Depths Theme */
-/* Deep sea aesthetic with calming blues, subtle waves, and marine colors */
-
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
-.wplace-theme--ocean-depths {
-  /* === CORE COLORS === */
-  --wplace-primary: #0d1b2a;           /* Deep ocean dark blue */
-  --wplace-secondary: #1b263b;         /* Mid-ocean blue */
-  --wplace-accent: #415a77;            /* Lighter ocean blue */
-  --wplace-text: #e0e1dd;              /* Pearl white */
-  --wplace-highlight: #00b4d8;         /* Bright cyan */
-  --wplace-success: #06ffa5;           /* Sea foam green */
-  --wplace-error: #ff006e;             /* Deep coral pink */
-  --wplace-warning: #ffbe0b;           /* Golden yellow */
-
-  /* === UI PROPERTIES === */
-  --wplace-radius: 8px;
-  --wplace-border-style: solid;
-  --wplace-border-width: 1px;
-  --wplace-border-color: #415a77;
-  --wplace-shadow: 0 8px 32px rgba(0, 180, 216, 0.2), 0 0 0 1px rgba(224, 225, 221, 0.1);
-  --wplace-backdrop: blur(12px);
-  --wplace-font: 'Inter', 'Segoe UI', sans-serif;
-
-  /* === EXTENDED COLOR PALETTE === */
-  /* Icon colors */
-  --wplace-icon-primary: #00b4d8;      /* Bright ocean blue */
-  --wplace-icon-secondary: #90e0ef;    /* Light cyan */
-  --wplace-icon-palette: #06ffa5;      /* Sea foam green */
-  
-  /* Additional UI colors */
-  --wplace-danger: #ff006e;            /* Deep coral */
-  --wplace-danger-dark: #d90368;       /* Darker coral */
-  --wplace-muted-text: rgba(224, 225, 221, 0.7);
-  --wplace-highlight-secondary: #caf0f8;
-  
-  /* Text variants */
-  --wplace-text-secondary: rgba(224, 225, 221, 0.9);
-  --wplace-text-muted: rgba(224, 225, 221, 0.7);
-  --wplace-text-dim: rgba(224, 225, 221, 0.6);
-  --wplace-text-faded: rgba(224, 225, 221, 0.8);
-  
-  /* Background variants with ocean blues */
-  --wplace-bg-input: rgba(0, 180, 216, 0.15);
-  --wplace-bg-subtle: rgba(65, 90, 119, 0.2);
-  --wplace-bg-faint: rgba(65, 90, 119, 0.12);
-  --wplace-bg-ghost: rgba(65, 90, 119, 0.08);
-  --wplace-bg-whisper: rgba(65, 90, 119, 0.05);
-  
-  /* Border variants */
-  --wplace-border-subtle: rgba(144, 224, 239, 0.3);
-  --wplace-border-faint: rgba(144, 224, 239, 0.2);
-  --wplace-border-ghost: rgba(144, 224, 239, 0.15);
-  --wplace-border-ultra-faint: rgba(144, 224, 239, 0.08);
-  
-  /* Shadow variants with ocean blues */
-  --wplace-shadow-drag: 0 12px 40px rgba(0, 180, 216, 0.4), 0 0 0 2px rgba(144, 224, 239, 0.3);
-  --wplace-shadow-notification: 0 4px 12px rgba(0, 180, 216, 0.3);
-  --wplace-shadow-slider-thumb: 0 3px 6px rgba(0, 180, 216, 0.4), 0 0 0 2px var(--wplace-icon-primary);
-  --wplace-shadow-slider-hover: 0 4px 8px rgba(0, 180, 216, 0.5), 0 0 0 3px var(--wplace-icon-primary);
-  
-  /* Animation colors */
-  --wplace-pulse-start: rgba(6, 255, 165, 0.7);
-  --wplace-pulse-mid: rgba(6, 255, 165, 0);
-  --wplace-pulse-end: rgba(6, 255, 165, 0);
-  
-  /* Slider colors */
-  --wplace-slider-thumb-bg: #00b4d8;
-  --wplace-slider-track-bg: linear-gradient(to right, #00b4d8 0%, #90e0ef 100%);
-}
-
-/* === COMPONENT STYLING === */
-
-/* Main container with ocean wave effect */
-.wplace-theme--ocean-depths #wplace-image-bot-container {
-  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
-  color: var(--wplace-text) !important;
-  border: 1px solid rgba(0, 180, 216, 0.3) !important;
-  border-radius: 8px !important;
-  box-shadow: 0 8px 32px rgba(0, 180, 216, 0.2), 0 0 0 1px rgba(224, 225, 221, 0.1) !important;
-  font-family: 'Inter', 'Segoe UI', sans-serif !important;
-  backdrop-filter: blur(12px) !important;
-  position: relative;
-}
-
-/* Subtle wave animation overlay */
-.wplace-theme--ocean-depths #wplace-image-bot-container::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: 
-    radial-gradient(circle at 20% 80%, rgba(0, 180, 216, 0.1) 0%, transparent 50%),
-    radial-gradient(circle at 80% 20%, rgba(144, 224, 239, 0.08) 0%, transparent 50%),
-    radial-gradient(circle at 40% 40%, rgba(6, 255, 165, 0.05) 0%, transparent 50%);
-  border-radius: 8px;
-  pointer-events: none;
-  z-index: 0;
-}
-
-/* Stats container */
-.wplace-theme--ocean-depths #wplace-stats-container {
-  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
-  border: 1px solid rgba(0, 180, 216, 0.3) !important;
-  border-radius: 8px !important;
-  box-shadow: 0 8px 32px rgba(0, 180, 216, 0.2) !important;
-  font-family: 'Inter', 'Segoe UI', sans-serif !important;
-}
-
-/* Settings dialog */
-.wplace-theme--ocean-depths #wplace-settings-container {
-  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
-  border: 1px solid rgba(0, 180, 216, 0.3) !important;
-  border-radius: 8px !important;
-  box-shadow: 0 16px 48px rgba(0, 180, 216, 0.3), 0 0 0 1px rgba(224, 225, 221, 0.1) !important;
-  font-family: 'Inter', 'Segoe UI', sans-serif !important;
-  backdrop-filter: blur(16px) !important;
-}
-
-/* Resize dialog */
-.wplace-theme--ocean-depths .resize-container {
-  background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%) !important;
-  border: 1px solid rgba(0, 180, 216, 0.3) !important;
-  border-radius: 8px !important;
-  box-shadow: 0 16px 48px rgba(0, 180, 216, 0.3), 0 0 0 1px rgba(224, 225, 221, 0.1) !important;
-  font-family: 'Inter', 'Segoe UI', sans-serif !important;
-  backdrop-filter: blur(16px) !important;
-}
-
-/* Headers with ocean gradient */
-.wplace-theme--ocean-depths .wplace-header {
-  background: linear-gradient(135deg, #1b263b 0%, #415a77 100%) !important;
-  color: var(--wplace-text) !important;
-  border-bottom: 1px solid rgba(0, 180, 216, 0.3) !important;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
-}
-
-/* Settings header */
-.wplace-theme--ocean-depths .wplace-settings-header {
-  background: linear-gradient(135deg, #1b263b 0%, #415a77 100%) !important;
-  border-bottom: 1px solid rgba(0, 180, 216, 0.3) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-settings-title {
-  color: var(--wplace-text) !important;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-settings-close-btn {
-  background: rgba(65, 90, 119, 0.3) !important;
-  border: 1px solid rgba(0, 180, 216, 0.4) !important;
-  border-radius: 6px !important;
-  color: var(--wplace-text) !important;
-  transition: all 0.3s ease !important;
-}
-
-.wplace-theme--ocean-depths .wplace-settings-close-btn:hover {
-  background: rgba(255, 0, 110, 0.2) !important;
-  border-color: var(--wplace-error) !important;
-  box-shadow: 0 0 12px rgba(255, 0, 110, 0.3) !important;
-}
-
-/* Section titles */
-.wplace-theme--ocean-depths .wplace-section-title {
-  color: var(--wplace-highlight) !important;
-  text-shadow: 0 0 8px rgba(0, 180, 216, 0.3) !important;
-  font-weight: 600 !important;
-}
-
-/* Buttons with ocean styling */
-.wplace-theme--ocean-depths .wplace-btn {
-  background: linear-gradient(135deg, #1b263b 0%, #415a77 100%) !important;
-  border: 1px solid rgba(0, 180, 216, 0.4) !important;
-  border-radius: 8px !important;
-  color: var(--wplace-text) !important;
-  font-family: 'Inter', 'Segoe UI', sans-serif !important;
-  font-weight: 500 !important;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-btn:hover:not(:disabled) {
-  background: linear-gradient(135deg, #415a77 0%, #778da9 100%) !important;
-  box-shadow: 0 8px 24px rgba(0, 180, 216, 0.3), 0 0 0 1px rgba(0, 180, 216, 0.5) !important;
-  transform: translateY(-1px) !important;
-}
-
-/* Button variants with ocean colors */
-.wplace-theme--ocean-depths .wplace-btn-start {
-  background: linear-gradient(135deg, #06ffa5 0%, #00b4d8 100%) !important;
-  color: #0d1b2a !important;
-  font-weight: 600 !important;
-}
-
-.wplace-theme--ocean-depths .wplace-btn-start:hover:not(:disabled) {
-  box-shadow: 0 8px 24px rgba(6, 255, 165, 0.4) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-btn-stop {
-  background: linear-gradient(135deg, #ff006e 0%, #d90368 100%) !important;
-  color: white !important;
-  font-weight: 600 !important;
-}
-
-.wplace-theme--ocean-depths .wplace-btn-stop:hover:not(:disabled) {
-  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.4) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-btn-upload {
-  background: rgba(65, 90, 119, 0.3) !important;
-  border: 2px dashed var(--wplace-highlight) !important;
-  color: var(--wplace-highlight) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-btn-upload:hover:not(:disabled) {
-  background: rgba(0, 180, 216, 0.1) !important;
-  box-shadow: 0 8px 24px rgba(0, 180, 216, 0.2) !important;
-}
-
-/* Progress bars with ocean waves */
-.wplace-theme--ocean-depths .wplace-progress {
-  background: rgba(13, 27, 42, 0.8) !important;
-  border: 1px solid rgba(0, 180, 216, 0.3) !important;
-  border-radius: 8px !important;
-}
-
-.wplace-theme--ocean-depths .wplace-progress-bar {
-  background: linear-gradient(90deg, #00b4d8 0%, #06ffa5 50%, #90e0ef 100%) !important;
-  box-shadow: 0 0 12px rgba(0, 180, 216, 0.4) !important;
-  position: relative;
-  overflow: hidden;
-}
-
-.wplace-theme--ocean-depths .wplace-progress-bar::after {
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
-  animation: waveShimmer 2s ease-in-out infinite !important;
-}
-
-/* Status indicators with ocean colors */
-.wplace-theme--ocean-depths .status-success {
-  background: rgba(6, 255, 165, 0.15) !important;
-  border-color: var(--wplace-success) !important;
-  color: var(--wplace-success) !important;
-  box-shadow: 0 0 15px rgba(6, 255, 165, 0.3) !important;
-  text-shadow: 0 0 8px rgba(6, 255, 165, 0.5) !important;
-}
-
-.wplace-theme--ocean-depths .status-error {
-  background: rgba(255, 0, 110, 0.15) !important;
-  border-color: var(--wplace-error) !important;
-  color: var(--wplace-error) !important;
-  box-shadow: 0 0 15px rgba(255, 0, 110, 0.3) !important;
-  text-shadow: 0 0 8px rgba(255, 0, 110, 0.5) !important;
-}
-
-.wplace-theme--ocean-depths .status-default {
-  background: rgba(0, 180, 216, 0.15) !important;
-  border-color: var(--wplace-highlight) !important;
-  color: var(--wplace-highlight) !important;
-  text-shadow: 0 0 5px rgba(0, 180, 216, 0.3) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-stat-value {
-  color: var(--wplace-highlight) !important;
-  text-shadow: 0 0 8px rgba(0, 180, 216, 0.3) !important;
-  font-weight: 600 !important;
-}
-
-/* Sections with subtle ocean depth effect */
-.wplace-theme--ocean-depths .wplace-section {
-  background: rgba(27, 38, 59, 0.4) !important;
-  border: 1px solid rgba(0, 180, 216, 0.2) !important;
-  border-radius: 8px !important;
-  backdrop-filter: blur(8px) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-status-section {
-  background: rgba(27, 38, 59, 0.4) !important;
-  border: 1px solid rgba(0, 180, 216, 0.2) !important;
-  border-radius: 8px !important;
-}
-
-.wplace-theme--ocean-depths .wplace-settings-section-wrapper {
-  background: rgba(27, 38, 59, 0.3) !important;
-  border: 1px solid rgba(0, 180, 216, 0.2) !important;
-  border-radius: 8px !important;
-}
-
-/* Form controls with ocean styling */
-.wplace-theme--ocean-depths .wplace-settings-select {
-  background: rgba(27, 38, 59, 0.8) !important;
-  border: 1px solid rgba(0, 180, 216, 0.4) !important;
-  border-radius: 8px !important;
-  color: var(--wplace-text) !important;
-  font-family: 'Inter', 'Segoe UI', sans-serif !important;
-  box-shadow: 0 2px 8px rgba(0, 180, 216, 0.1) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-settings-select:focus {
-  border-color: var(--wplace-highlight) !important;
-  box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.3) !important;
-}
-
-/* Sliders with ocean wave gradient */
-.wplace-theme--ocean-depths .wplace-speed-slider {
-  background: linear-gradient(to right, #00b4d8 0%, #90e0ef 100%) !important;
-  border-radius: 8px !important;
-}
-
-.wplace-theme--ocean-depths .wplace-overlay-opacity-slider {
-  background: linear-gradient(to right, #00b4d8 0%, #90e0ef 100%) !important;
-  border-radius: 8px !important;
-}
-
-.wplace-theme--ocean-depths .wplace-speed-value {
-  background: linear-gradient(135deg, #00b4d8 0%, #06ffa5 100%) !important;
-  border-radius: 8px !important;
-  color: #0d1b2a !important;
-  font-weight: 600 !important;
-  box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3) !important;
-  border: 1px solid rgba(144, 224, 239, 0.3) !important;
-}
-
-/* Settings labels with ocean glow */
-.wplace-theme--ocean-depths .wplace-settings-section-label {
-  color: var(--wplace-highlight) !important;
-  text-shadow: 0 0 8px rgba(0, 180, 216, 0.3) !important;
-  font-family: 'Inter', 'Segoe UI', sans-serif !important;
-  font-weight: 600 !important;
-}
-
-/* Icon colors for ocean theme */
-.wplace-theme--ocean-depths .wplace-icon-key { color: #00b4d8; }
-.wplace-theme--ocean-depths .wplace-icon-robot { color: #00b4d8; }
-.wplace-theme--ocean-depths .wplace-icon-speed { color: #00b4d8; }
-.wplace-theme--ocean-depths .wplace-icon-bell { color: #ffbe0b; }
-.wplace-theme--ocean-depths .wplace-icon-palette { color: #06ffa5; }
-.wplace-theme--ocean-depths .wplace-icon-globe { color: #90e0ef; }
-.wplace-theme--ocean-depths .wplace-icon-eye { color: #00b4d8; }
-
-/* Ocean wave animations */
-@keyframes waveShimmer {
-  0% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(200%);
-  }
-  100% {
-    transform: translateX(300%);
-  }
-}
-
-@keyframes oceanPulse {
-  0%, 100% {
-    opacity: 0.6;
-    transform: scale(1);
-  }
-  50% {
-    opacity: 0.8;
-    transform: scale(1.05);
-  }
-}
-
-/* Hover effects with gentle ocean motion */
-.wplace-theme--ocean-depths .wplace-btn:hover:not(:disabled) {
-  animation: oceanPulse 2s ease-in-out infinite;
-}
-
-/* Color swatches with ocean depth effect */
-.wplace-theme--ocean-depths .wplace-color-swatch {
-  border: 1px solid rgba(0, 180, 216, 0.3) !important;
-  border-radius: 6px !important;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
-}
-
-.wplace-theme--ocean-depths .wplace-color-swatch:hover {
-  box-shadow: 0 4px 16px rgba(0, 180, 216, 0.3) !important;
-  transform: translateY(-1px);
-}
-
-.wplace-theme--ocean-depths .wplace-stat-colors-grid {
-  background: rgba(13, 27, 42, 0.6) !important;
-  border-radius: 8px !important;
-  border: 1px solid rgba(0, 180, 216, 0.2) !important;
-}
\ No newline at end of file

From 59bf96dc3ed6224f94b33f22f6a8a6179d53c575 Mon Sep 17 00:00:00 2001
From: Staninna <26458805+Staninna@users.noreply.github.com>
Date: Wed, 27 Aug 2025 01:19:19 +0200
Subject: [PATCH 36/36] classic light theme + claude limit reached

---
 Auto-Image.js            | 14 ++++++++++----
 themes/classic-light.css | 15 +++++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/Auto-Image.js b/Auto-Image.js
index cedfc19..c30b847 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -214,10 +214,16 @@
 function applyTheme() {
   const theme = getCurrentTheme();
   // Toggle theme class on documentElement so CSS vars cascade to our UI
-  document.documentElement.classList.remove('wplace-theme--classic', 'wplace-theme--neon');
-  document.documentElement.classList.add(
-    CONFIG.currentTheme === 'Neon Retro' ? 'wplace-theme--neon' : 'wplace-theme--classic'
-  );
+  document.documentElement.classList.remove('wplace-theme--classic', 'wplace-theme--classic-light', 'wplace-theme--neon');
+  
+  let themeClass = 'wplace-theme--classic'; // default
+  if (CONFIG.currentTheme === 'Neon Retro') {
+    themeClass = 'wplace-theme--neon';
+  } else if (CONFIG.currentTheme === 'Classic Light') {
+    themeClass = 'wplace-theme--classic-light';
+  }
+  
+  document.documentElement.classList.add(themeClass);
 
   // Also set CSS variables explicitly in case you want runtime overrides
   const root = document.documentElement;
diff --git a/themes/classic-light.css b/themes/classic-light.css
index 9984226..3ad47b7 100644
--- a/themes/classic-light.css
+++ b/themes/classic-light.css
@@ -89,6 +89,21 @@
   border-radius: 12px !important;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
   font-family: 'Segoe UI', Roboto, sans-serif !important;
+  color: var(--wplace-text) !important;
+}
+
+/* Comprehensive text and element styling for light theme */
+.wplace-theme--classic-light * {
+  color: var(--wplace-text) !important;
+}
+
+.wplace-theme--classic-light .wplace-status,
+.wplace-theme--classic-light .wplace-stats,
+.wplace-theme--classic-light .wplace-section,
+.wplace-theme--classic-light .wplace-controls,
+.wplace-theme--classic-light .wplace-data-management,
+.wplace-theme--classic-light .wplace-cooldown-settings {
+  color: var(--wplace-text) !important;
 }
 
 /* Settings dialog */