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] 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