diff --git a/js/comfy/layout.js b/js/comfy/layout.js
index 3dd9974..57c6087 100644
--- a/js/comfy/layout.js
+++ b/js/comfy/layout.js
@@ -689,39 +689,9 @@ export function syncRuntimePreviewButton() {
     if (!dock) {
         dock = document.createElement("div");
         dock.className = "comfy-sidebar-runtime-preview-dock";
-        Object.assign(dock.style, {
-            position: "sticky",
-            bottom: "0px",
-            left: "0px",
-            width: "100%",
-            padding: "8px 12px",
-            boxSizing: "border-box",
-            background: "var(--comfy-menu-bg, #181818)",
-            borderTop: "1px solid var(--border-color, rgba(255, 255, 255, 0.12))",
-            zIndex: "20",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            marginTop: "auto"
-        });
 
         const btn = document.createElement("button");
         btn.className = "comfy-sidebar-runtime-preview-btn";
-        Object.assign(btn.style, {
-            width: "100%",
-            height: "34px",
-            borderRadius: "6px",
-            cursor: "pointer",
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: "8px",
-            fontSize: "12px",
-            fontWeight: "600",
-            fontFamily: "sans-serif",
-            transition: "all 0.15s ease",
-            outline: "none"
-        });
 
         btn.onclick = (e) => {
             e.preventDefault();
@@ -737,6 +707,7 @@ export function syncRuntimePreviewButton() {
     const btn = dock.querySelector(".comfy-sidebar-runtime-preview-btn");
     if (btn) {
         const active = isRuntimePreviewEnabled();
+        btn.classList.toggle("active", active);
 
         const lucidePlay = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><polygon points="6 3 20 12 6 21 6 3"/></svg>`;
         const lucideEye = `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.7;flex-shrink:0;"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>`;
@@ -744,17 +715,9 @@ export function syncRuntimePreviewButton() {
         const lucideSquare = `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity:0.5;flex-shrink:0;"><rect width="18" height="18" x="3" y="3" rx="2"/></svg>`;
 
         if (active) {
-            btn.style.background = "rgba(59, 130, 246, 0.18)";
-            btn.style.border = "1px solid #3b82f6";
-            btn.style.color = "#93c5fd";
-            btn.style.boxShadow = "0 0 8px rgba(59, 130, 246, 0.35)";
             btn.innerHTML = `<span style="display:flex;align-items:center;gap:7px;">${lucidePlay}<span>Runtime Preview</span></span>${lucideSquareCheck}`;
             btn.title = "Runtime Preview is ON (auto-tracking live generation). Click to turn OFF.";
         } else {
-            btn.style.background = "rgba(255, 255, 255, 0.05)";
-            btn.style.border = "1px solid var(--border-color, rgba(255, 255, 255, 0.15))";
-            btn.style.color = "var(--desc-color, #aaa)";
-            btn.style.boxShadow = "none";
             btn.innerHTML = `<span style="display:flex;align-items:center;gap:7px;">${lucideEye}<span>Runtime Preview</span></span>${lucideSquare}`;
             btn.title = "Click to turn ON Runtime Preview (auto-focus live generation).";
         }
diff --git a/js/utils/styles.js b/js/utils/styles.js
index 0479a75..f3cc90e 100644
--- a/js/utils/styles.js
+++ b/js/utils/styles.js
@@ -861,6 +861,63 @@ export function injectStyles() {
             from { transform: rotate(0deg); }
             to { transform: rotate(360deg); }
         }
+
+        /* Runtime Preview Dock in Properties Panel */
+        .comfy-sidebar-runtime-preview-dock {
+            position: sticky;
+            bottom: 0px;
+            left: 0px;
+            width: 100%;
+            padding: 8px 12px;
+            box-sizing: border-box;
+            background: color-mix(in srgb, var(--card, var(--bg-color, var(--comfy-menu-bg, #181818))) 85%, transparent);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border-top: 1px solid var(--border, var(--border-color, rgba(255, 255, 255, 0.12)));
+            z-index: 20;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-top: auto;
+        }
+
+        .comfy-sidebar-runtime-preview-btn {
+            width: 100%;
+            height: 34px;
+            border-radius: 6px;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            font-size: 12px;
+            font-weight: 600;
+            font-family: inherit;
+            transition: all 0.15s ease-in-out;
+            outline: none;
+            box-sizing: border-box;
+            background: var(--card, var(--secondary, rgba(255, 255, 255, 0.05)));
+            border: 1px solid var(--border, var(--border-color, rgba(255, 255, 255, 0.15)));
+            color: var(--muted-foreground, var(--desc-color, #aaa));
+            box-shadow: none;
+        }
+
+        .comfy-sidebar-runtime-preview-btn:hover {
+            border-color: color-mix(in srgb, var(--primary, var(--p-primary-color, #ea580c)) 65%, var(--border, #666) 35%);
+            color: var(--foreground, #fff);
+            background: color-mix(in srgb, var(--primary, var(--p-primary-color, #ea580c)) 8%, var(--card, rgba(255, 255, 255, 0.08)) 92%);
+        }
+
+        .comfy-sidebar-runtime-preview-btn.active {
+            background: color-mix(in srgb, var(--primary, var(--p-primary-color, var(--primary-color, #ea580c))) 18%, transparent) !important;
+            border: 1px solid var(--primary, var(--p-primary-color, var(--primary-color, #ea580c))) !important;
+            color: var(--primary, var(--p-primary-color, var(--primary-color, #ea580c))) !important;
+            box-shadow: 0 0 10px color-mix(in srgb, var(--primary, var(--p-primary-color, var(--primary-color, #ea580c))) 35%, transparent) !important;
+        }
+
+        .comfy-sidebar-runtime-preview-btn.active:hover {
+            filter: brightness(1.1);
+        }
     `;
     document.head.appendChild(style);
 }
\ No newline at end of file
diff --git a/pyproject.toml b/pyproject.toml
index 584fbc7..8602781 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,7 +1,7 @@
 [project]
 name = "comfy-sidebar"
 description = "A compact and powerful layout overhaul for ComfyUI that makes generation results easier to browse, preview, compare, and manage."
-version = "1.8.1"
+version = "1.8.2"
 license = { file = "LICENSE" }
 dependencies = [
     "send2trash>=1.8.0",