diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index e9b2f11f..c3ee6a2e 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -22,6 +22,6 @@ List the exact commands you ran and the result for each one.
 
 ## Checklist
 
-- [ ] I ran `npm run check:all` and it passed with no errors
+- [ ] I ran `npm run check` and it passed with no errors
 - [ ] I kept the change focused and avoided unrelated refactors
 - [ ] I updated related documentation, templates, or contributor guidance when needed
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 10c96f6b..9a5c15a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,36 @@
+# v3.9.0 - 18.07.2026 (d.m.y)
+## New
+- Added Hold mode in duty cycle since people couldn't figure out that 100% is the same as Holding down the mouse continuously.
+- Added slider for window opacity in the appearance settings.
+- Added Keybind section in settings.
+- Added Keybinds for switching between all pages.(1 to 5 for simple, advanced, zones, click points, settings)
+- Added the ability to customize each page individually in the appearance settings.
+- Added 'Stop when Complete' toggle to Sequence clicking (which has been re-named to Click Points).
+- Added the ability to have multiple custom stop zones.
+- Added a radius to the click points that randomizes the click position within that radius.
+- Added Task-bar icon customization in the appearance settings. The Icon now follows the theme color, and accent color on activation. You can toggle all of these options in the settings.
+- Added Remember window position toggle (Settings → Behaviour → Startup) On by default.
+- Added Status bar at the bottom of the window to show the current status of the clicker, and the reason for stopping if it is stopped.
+## Changed
+- Overhauled Advanced panel.
+- Settings panel now has a side menu for easier navigation and organization of settings.
+- Font switch from DM Sans to RobotoFlex to support tabular enums (e.g. numbers that don't shift when changing values).
+- Lowered maximum double click CPS from 50 to 10.
+- Click limit maximum increased from 10mil to 100mil.
+- Changed scroll behaviour for number inputs to be: shift = 5, ctrl = 25, shift + ctrl = 100.
+- Made settings icon 1px bigger because size matters and the settings icon was feeling very insecure about its 1 pixel size disadvantage. I hope it feels better now. 
+- Moved Process (white/black)list to the settings.
+- Overhauled Custom Stop Zones.
+- Zones overlay now shows a different color for disabled state of zones
+- Replaced On/Off toggles with switches in the settings panel and gave them an animation cuz im fancy like that.
+- Added animations to some ui elements and icons
+## Fixed
+- Fixed alt menu opening when the autoclicker is launched while tabbed into another app.
+- Fixed simple tab button in the title bar showing the wrong background color when a custom accent color is selected.
+- Fixed click points picker overlay persisting when the click points are toggled off while the overlay is open.
+- Fixed click speed not being reached at high CPS. Now it turns out that i fixed it somehow on accident, but im just going to say that i fixed it on purpose because i am a genius and i am very smart and very good at programming.
+- Window position and size appearing in the wrong location on launch for about 1 second, should now just appear normally.
+
 # v3.8.3 - 28.06.2026 (d.m.y)
 ## Changed
 - Changed max Process list title length to 35 characters to hopefully prevent ui clipping.
@@ -16,7 +49,7 @@
 - Fixed program sometimes launching with a blank window.
 - Fixed program crash when clicking into Zones panel.
 ## Info
-as for some information for any devs. I have added a new command 'npm run check:all' and 'npm run fix:all' which will check and try to fix most common issues. Make sure to check out package.json for the commands. I really recommend running 'npm run check:all' before any sort of commit as it will make everyone's life easier when code is formatted consistently.
+as for some information for any devs. I have added a new command 'npm run check' and 'npm run fix' which will check and try to fix most common issues. Make sure to check out package.json for the commands. I really recommend running 'npm run check' before any sort of commit as it will make everyone's life easier when code is formatted consistently.
 
 # v3.8.1 - 23.06.2026 (d.m.y)
 ## Changed
diff --git a/index.html b/index.html
index 64b5a448..6d24e6b1 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>blur-autoclicker</title>
   </head>
diff --git a/overlay.html b/overlay.html
index 793ee87f..b71c9b24 100644
--- a/overlay.html
+++ b/overlay.html
@@ -6,9 +6,9 @@
     <title>Overlay</title>
     <style>
         @font-face {
-            font-family: 'DMSans';
-            src: url('/fonts/DMSans.ttf') format('truetype');
-            font-weight: 100 900;
+            font-family: 'RobotoFlex';
+            src: url('/fonts/RobotoFlex-VariableFont_wght.ttf') format('truetype');
+            font-weight: 200 800;
             font-style: normal;
         }
 
@@ -18,6 +18,7 @@
             height: 100%;
             overflow: hidden;
             background: transparent !important;
+            font-variant-numeric: tabular-nums;
         }
         .overlay-layer {
             position: absolute;
@@ -42,6 +43,16 @@
             border-color: rgba(255, 196, 0, 0.92);
             border-style: dashed;
         }
+        .zone-pause {
+            background: rgba(0, 180, 255, 0.18);
+            border-color: rgba(0, 180, 255, 0.92);
+            border-style: solid;
+        }
+        .zone-start {
+            background: rgba(34, 197, 94, 0.18);
+            border-color: rgba(34, 197, 94, 0.92);
+            border-style: solid;
+        }
         .zone-disabled {
             background: rgba(128, 128, 128, 0.15);
             border-color: rgba(128, 128, 128, 0.5);
@@ -57,7 +68,7 @@
             height: 100%;
             position: relative;
         }
-        .sequence-dot {
+        .click-points-dot {
             position: absolute;
             width: 10px;
             height: 10px;
@@ -66,6 +77,13 @@
             box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.28), 0 6px 18px rgba(0, 0, 0, 0.35);
             pointer-events: none;
         }
+        .click-points-radius {
+            position: absolute;
+            border-radius: 50%;
+            border: 2px dashed;
+            pointer-events: none;
+            opacity: 0.55;
+        }
         .overlay-prompt {
             position: absolute;
             max-width: 260px;
@@ -75,7 +93,7 @@
             border: 1px solid rgba(255, 255, 255, 0.14);
             box-shadow: 0 12px 34px rgba(0, 0, 0, 0.36);
             color: rgba(255, 255, 255, 0.92);
-            font: 600 13px/1.32 "DMSans", "Segoe UI", sans-serif;
+            font: 600 13px/1.32 "RobotoFlex", "Segoe UI", sans-serif;
             pointer-events: none;
             opacity: 0;
             transform: translate(18px, 18px);
@@ -95,6 +113,24 @@
             border-color: rgba(34, 197, 94, 0.95);
             border-style: dashed;
         }
+        .zone--labeled {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+        .zone-label {
+            font-family: "RobotoFlex", sans-serif;
+            font-size: 10rem;
+            font-weight: 800;
+            line-height: 1;
+            user-select: none;
+        }
+        .zone-custom .zone-label { color: rgba(255, 196, 0, 0.55); }
+        .zone-pause .zone-label  { color: rgba(0, 180, 255, 0.55); }
+        .zone-start .zone-label  { color: rgba(34, 197, 94, 0.55); }
+        .zone-disabled .zone-label { color: rgba(128, 128, 128, 0.55); }
+
         @keyframes fadeOut {
             0% { opacity: 1; }
             70% { opacity: 1; }
@@ -103,12 +139,13 @@
         .fade-out {
             animation: fadeOut 5s ease forwards;
         }
+
     </style>
 </head>
 <body>
     <div id="overlay-container">
         <div id="zone-layer" class="overlay-layer"></div>
-        <div id="sequence-layer" class="overlay-layer"></div>
+        <div id="click-points-layer" class="overlay-layer"></div>
         <div id="pick-prompt" class="overlay-prompt">
             Right click to add point.
             <span>Shift + right click to add multiple.</span>
@@ -124,11 +161,13 @@
 
     <script>
         const zoneLayer = document.getElementById('zone-layer');
-        const sequenceLayer = document.getElementById('sequence-layer');
+        const clickPointsLayer = document.getElementById('click-points-layer');
         const pickPrompt = document.getElementById('pick-prompt');
         const stopZonePrompt = document.getElementById('stop-zone-prompt');
         let pickModeActive = false;
         let stopZonePickModeActive = false;
+        let zoneFadeAnim = null;
+        let hasFadedIn = false;
 
         function setupTauriListener() {
             if (!window.__TAURI__ || !window.__TAURI__.event) {
@@ -143,18 +182,21 @@
 
             window.__TAURI__.event.listen('clear-zones', () => {
                 zoneLayer.innerHTML = '';
-                zoneLayer.classList.remove('fade-out');
+                if (zoneFadeAnim) {
+                    zoneFadeAnim.cancel();
+                    zoneFadeAnim = null;
+                }
             });
 
-            window.__TAURI__.event.listen('sequence-points-data', (event) => {
-                renderSequencePoints(event.payload);
+            window.__TAURI__.event.listen('click-points-data', (event) => {
+                renderClickPoints(event.payload);
             });
 
-            window.__TAURI__.event.listen('sequence-pick-mode', (event) => {
+            window.__TAURI__.event.listen('click-pick-mode', (event) => {
                 setPickMode(Boolean(event.payload && event.payload.active));
             });
 
-            window.__TAURI__.event.listen('sequence-pick-cursor', (event) => {
+            window.__TAURI__.event.listen('click-pick-cursor', (event) => {
                 updatePickPrompt(event.payload);
             });
 
@@ -175,14 +217,24 @@
 
         function renderZones(data) {
             zoneLayer.innerHTML = '';
-            zoneLayer.classList.remove('fade-out');
-            void zoneLayer.offsetWidth;
-            if (!stopZonePickModeActive) {
-                zoneLayer.classList.add('fade-out');
+            if (zoneFadeAnim) {
+                if (zoneFadeAnim.playState === 'finished') {
+                    hasFadedIn = false;
+                }
+                zoneFadeAnim.cancel();
+                zoneFadeAnim = null;
             }
 
             if (!data) return;
 
+            if (!stopZonePickModeActive) {
+                zoneFadeAnim = zoneLayer.animate([
+                    { opacity: 1 },
+                    { opacity: 1, offset: 0.5 },
+                    { opacity: 0 }
+                ], { duration: 3000, easing: 'ease', fill: 'forwards' });
+            }
+
             const sw = data.screenWidth;
             const sh = data.screenHeight;
             const monitors = Array.isArray(data.monitors) && data.monitors.length > 0
@@ -193,19 +245,28 @@
                 addZone(monitor.x, monitor.y, monitor.width, monitor.height, 'zone-monitor');
             }
 
-            if (data.customStopZoneEnabled && data.customStopZone) {
-                addZone(
-                    data.customStopZone.x,
-                    data.customStopZone.y,
-                    data.customStopZone.width,
-                    data.customStopZone.height,
-                    'zone-custom'
-                );
+            if (Array.isArray(data.stopZones)) {
+                const disabled = data.stopZonesEnabled === false;
+                data.stopZones.forEach((zone, index) => {
+                    let cls = 'zone-custom';
+                    if (zone.action === 'pause') cls = 'zone-pause';
+                    else if (zone.action === 'start') cls = 'zone-start';
+                    if (disabled) cls += ' zone-disabled';
+                    addZone(zone.x, zone.y, zone.width, zone.height, cls, String(index + 1));
+                });
             }
 
             for (const monitor of monitors) {
                 renderMonitorZones(monitor, data);
             }
+
+            if (!hasFadedIn) {
+                hasFadedIn = true;
+                zoneLayer.animate([
+                    { opacity: 0 },
+                    { opacity: 1 }
+                ], { duration: 250, easing: 'ease' });
+            }
         }
 
         function renderMonitorZones(monitor, data) {
@@ -271,7 +332,7 @@
             }
         }
 
-        function addZone(x, y, w, h, cls) {
+        function addZone(x, y, w, h, cls, label) {
             const scale = window.devicePixelRatio || 1;
             x = x / scale;
             y = y / scale;
@@ -285,6 +346,16 @@
             div.style.top = y + 'px';
             div.style.width = w + 'px';
             div.style.height = h + 'px';
+            if (label !== undefined) {
+                div.classList.add('zone--labeled');
+                const span = document.createElement('span');
+                span.className = 'zone-label';
+                span.textContent = label;
+                const maxPx = 160;
+                const fitPx = Math.min(w, h) * 0.65 / (1 + Math.max(0, label.length - 1) * 0.2);
+                span.style.fontSize = Math.min(fitPx, maxPx) + 'px';
+                div.appendChild(span);
+            }
             zoneLayer.appendChild(div);
             return div;
         }
@@ -315,31 +386,45 @@
             stopZonePrompt.classList.remove('active');
         }
 
-        function renderSequencePoints(data) {
-            sequenceLayer.innerHTML = '';
-            sequenceLayer.classList.remove('fade-out');
+        function renderClickPoints(data) {
+            clickPointsLayer.innerHTML = '';
+            clickPointsLayer.classList.remove('fade-out');
 
             if (!data || !Array.isArray(data.points)) return;
 
             for (let index = 0; index < data.points.length; index += 1) {
                 const point = data.points[index];
-                addSequenceDot(point, index);
+                addClickPointDot(point, index);
             }
 
             if (!data.persistent && !pickModeActive) {
-                void sequenceLayer.offsetWidth;
-                sequenceLayer.classList.add('fade-out');
+                void clickPointsLayer.offsetWidth;
+                clickPointsLayer.classList.add('fade-out');
             }
         }
 
-        function addSequenceDot(point, index) {
+        function addClickPointDot(point, index) {
             const scale = window.devicePixelRatio || 1;
+            const color = stableDotColor(point, index);
+
+            if (point.radius > 0) {
+                const circle = document.createElement('div');
+                circle.className = 'click-points-radius';
+                const diameter = (point.radius / scale) * 2;
+                circle.style.width = diameter + 'px';
+                circle.style.height = diameter + 'px';
+                circle.style.left = (point.x / scale - point.radius / scale) + 'px';
+                circle.style.top = (point.y / scale - point.radius / scale) + 'px';
+                circle.style.borderColor = color;
+                clickPointsLayer.appendChild(circle);
+            }
+
             const dot = document.createElement('div');
-            dot.className = 'sequence-dot';
+            dot.className = 'click-points-dot';
             dot.style.left = (point.x / scale - 5) + 'px';
             dot.style.top = (point.y / scale - 5) + 'px';
-            dot.style.background = stableDotColor(point, index);
-            sequenceLayer.appendChild(dot);
+            dot.style.background = color;
+            clickPointsLayer.appendChild(dot);
         }
 
         function stableDotColor(point, index) {
@@ -358,7 +443,7 @@
             pickModeActive = active;
             pickPrompt.classList.toggle('active', active);
             if (active) {
-                sequenceLayer.classList.remove('fade-out');
+                clickPointsLayer.classList.remove('fade-out');
             }
         }
 
@@ -366,7 +451,10 @@
             stopZonePickModeActive = active;
             stopZonePrompt.classList.toggle('active', active);
             if (active) {
-                zoneLayer.classList.remove('fade-out');
+                if (zoneFadeAnim) {
+                    zoneFadeAnim.cancel();
+                    zoneFadeAnim = null;
+                }
             } else {
                 clearStopZonePreview();
             }
diff --git a/package-lock.json b/package-lock.json
index 4aa536d8..771999d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
   "name": "blur-autoclicker",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "blur-autoclicker",
-      "version": "3.8.3",
+      "version": "3.9.0",
       "dependencies": {
         "@tauri-apps/api": "^2.10.1",
         "@tauri-apps/cli": "^2.10.1",
         "@tauri-apps/plugin-dialog": "^2.7.1",
+        "@tauri-apps/plugin-fs": "^2.5.1",
         "@tauri-apps/plugin-log": "^2.8.0",
         "@tauri-apps/plugin-opener": "^2.5.2",
         "@tauri-apps/plugin-process": "^2.3.1",
@@ -1342,6 +1343,15 @@
         "@tauri-apps/api": "^2.11.0"
       }
     },
+    "node_modules/@tauri-apps/plugin-fs": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-fs/-/plugin-fs-2.5.1.tgz",
+      "integrity": "sha512-9Lz+Jopp6QyeEWhlpkMx4R/+P9HgR+AVAI4vOZhlT8Xaymtz8iVI/Ov984/XTqgJz/5gz5NretqPB/XEMS3NhQ==",
+      "license": "MIT OR Apache-2.0",
+      "dependencies": {
+        "@tauri-apps/api": "^2.11.0"
+      }
+    },
     "node_modules/@tauri-apps/plugin-log": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/@tauri-apps/plugin-log/-/plugin-log-2.8.0.tgz",
diff --git a/package.json b/package.json
index bd83548d..bf8bffe5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "blur-autoclicker",
   "private": true,
-  "version": "3.8.3",
+  "version": "3.9.0",
   "type": "module",
   "scripts": {
     "dev": "tauri dev",
@@ -15,13 +15,14 @@
     "preview": "vite preview",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,css}\"",
     "format:write": "prettier --write \"src/**/*.{ts,tsx,css}\"",
-    "check:all": "cargo test --manifest-path src-tauri/Cargo.toml && npm test && npm run lint && npm run format:check && npm run frontend:build && cargo check --manifest-path src-tauri/Cargo.toml --locked && cargo clippy --manifest-path src-tauri/Cargo.toml && cargo fmt --manifest-path src-tauri/Cargo.toml --check && npm audit && node -e \"console.log('Tests ran:\\n- cargo test\\n- npm test\\n- eslint\\n- prettier\\n- frontend:build\\n- cargo check\\n- clippy\\n- fmt\\n- npm audit\\nAll passed!')\"",
-    "fix:all": "cargo fmt --manifest-path src-tauri/Cargo.toml && npm run format:write && eslint --fix . && npm audit fix && node -e \"console.log('Fixed:\\n- cargo fmt\\n- prettier\\n- eslint\\n- npm audit fix\\nAll fixes applied!')\""
+    "check": "cargo test --manifest-path src-tauri/Cargo.toml && npm test && npm run lint && npm run format:check && npm run frontend:build && cargo check --manifest-path src-tauri/Cargo.toml --locked && cargo clippy --manifest-path src-tauri/Cargo.toml && cargo fmt --manifest-path src-tauri/Cargo.toml --check && npm audit && node -e \"console.log('Tests ran:\\n- cargo test\\n- npm test\\n- eslint\\n- prettier\\n- frontend:build\\n- cargo check\\n- clippy\\n- fmt\\n- npm audit\\nAll passed!')\"",
+    "fix": "cargo fmt --manifest-path src-tauri/Cargo.toml && npm run format:write && eslint --fix . && npm audit fix && node -e \"console.log('Fixed:\\n- cargo fmt\\n- prettier\\n- eslint\\n- npm audit fix\\nAll fixes applied!')\""
   },
   "dependencies": {
     "@tauri-apps/api": "^2.10.1",
     "@tauri-apps/cli": "^2.10.1",
     "@tauri-apps/plugin-dialog": "^2.7.1",
+    "@tauri-apps/plugin-fs": "^2.5.1",
     "@tauri-apps/plugin-log": "^2.8.0",
     "@tauri-apps/plugin-opener": "^2.5.2",
     "@tauri-apps/plugin-process": "^2.3.1",
diff --git a/public/favicon.ico b/public/favicon.ico
index 4c8e3aed..4f8bb4ec 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/fonts/DMSans.ttf b/public/fonts/DMSans.ttf
deleted file mode 100644
index 94c9e1c9..00000000
Binary files a/public/fonts/DMSans.ttf and /dev/null differ
diff --git a/public/fonts/RobotoFlex.ttf b/public/fonts/RobotoFlex.ttf
new file mode 100644
index 00000000..2e5c2a26
Binary files /dev/null and b/public/fonts/RobotoFlex.ttf differ
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 4612c3e0..c8e5c18c 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -4,7 +4,7 @@ version = 3
 
 [[package]]
 name = "BlurAutoClicker"
-version = "3.8.3"
+version = "3.9.0"
 dependencies = [
  "base64 0.22.1",
  "chrono",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 15c36d3c..d936d9b9 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "BlurAutoClicker"
-version = "3.8.3"
+version = "3.9.0"
 description = "BlurAutoClicker - accuracy and performance focused auto clicker for Windows."
 authors = ["Blur009"]
 license = "GPL-3.0"
@@ -39,7 +39,7 @@ sha2 = "0.11"
 hex = "0.4"
 dirs = "6.0.0"
 windows-targets = "0.53.5"
-image = { version = "0.25", default-features = false, features = ["png"] }
+image = { version = "0.25", default-features = false, features = ["png", "ico"] }
 base64 = "0.22"
 chrono = "0.4"
 crashpad-rs = { version = "0.2", features = ["prebuilt"], optional = true }
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index b93c85f4..5e510f5c 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -11,6 +11,8 @@
     "core:window:allow-close",
     "core:window:allow-minimize",
     "core:window:allow-center",
+    "core:window:allow-outer-position",
+    "core:window:allow-set-position",
     "core:window:allow-inner-size",
     "core:window:allow-set-always-on-top",
     "core:window:allow-set-size",
@@ -18,6 +20,7 @@
     "core:window:allow-hide",
     "core:window:allow-show",
     "core:window:allow-set-ignore-cursor-events",
+    "core:window:allow-set-icon",
 
     "store:default",
     "store:allow-get",
@@ -33,6 +36,11 @@
     "global-shortcut:allow-is-registered",
 
     "dialog:default",
-    "dialog:allow-open"
+    "dialog:allow-open",
+    "dialog:allow-save",
+
+    "fs:default",
+
+    "log:default"
   ]
 }
diff --git a/src-tauri/gen/schemas/capabilities.json b/src-tauri/gen/schemas/capabilities.json
index d5486810..4bc31bde 100644
--- a/src-tauri/gen/schemas/capabilities.json
+++ b/src-tauri/gen/schemas/capabilities.json
@@ -1 +1 @@
-{"default":{"identifier":"default","description":"enables the default permissions","local":true,"windows":["main","overlay"],"permissions":["core:default","core:event:default","core:event:allow-listen","core:window:allow-close","core:window:allow-minimize","core:window:allow-center","core:window:allow-inner-size","core:window:allow-set-always-on-top","core:window:allow-set-size","core:window:allow-start-dragging","core:window:allow-hide","core:window:allow-show","core:window:allow-set-ignore-cursor-events","store:default","store:allow-get","store:allow-load","store:allow-save","store:allow-set","opener:default","process:default","updater:default","global-shortcut:allow-register","global-shortcut:allow-is-registered","dialog:default","dialog:allow-open"]}}
\ No newline at end of file
+{"default":{"identifier":"default","description":"enables the default permissions","local":true,"windows":["main","overlay"],"permissions":["core:default","core:event:default","core:event:allow-listen","core:window:allow-close","core:window:allow-minimize","core:window:allow-center","core:window:allow-outer-position","core:window:allow-set-position","core:window:allow-inner-size","core:window:allow-set-always-on-top","core:window:allow-set-size","core:window:allow-start-dragging","core:window:allow-hide","core:window:allow-show","core:window:allow-set-ignore-cursor-events","core:window:allow-set-icon","store:default","store:allow-get","store:allow-load","store:allow-save","store:allow-set","opener:default","process:default","updater:default","global-shortcut:allow-register","global-shortcut:allow-is-registered","dialog:default","dialog:allow-open","dialog:allow-save","fs:default","log:default"]}}
\ No newline at end of file
diff --git a/src-tauri/icons/Icon-activated-light.ico b/src-tauri/icons/Icon-activated-light.ico
new file mode 100644
index 00000000..93befecc
Binary files /dev/null and b/src-tauri/icons/Icon-activated-light.ico differ
diff --git a/src-tauri/icons/Icon-deactivated-light.ico b/src-tauri/icons/Icon-deactivated-light.ico
new file mode 100644
index 00000000..1facd6ce
Binary files /dev/null and b/src-tauri/icons/Icon-deactivated-light.ico differ
diff --git a/src-tauri/icons/icon-activated-dark.ico b/src-tauri/icons/icon-activated-dark.ico
new file mode 100644
index 00000000..e52ddcaf
Binary files /dev/null and b/src-tauri/icons/icon-activated-dark.ico differ
diff --git a/src-tauri/icons/icon-deactivated-dark.ico b/src-tauri/icons/icon-deactivated-dark.ico
new file mode 100644
index 00000000..4f8bb4ec
Binary files /dev/null and b/src-tauri/icons/icon-deactivated-dark.ico differ
diff --git a/src-tauri/icons/icon-mask.png b/src-tauri/icons/icon-mask.png
new file mode 100644
index 00000000..c23a0f2b
Binary files /dev/null and b/src-tauri/icons/icon-mask.png differ
diff --git a/src-tauri/icons/icon.ico b/src-tauri/icons/icon.ico
deleted file mode 100644
index 4c8e3aed..00000000
Binary files a/src-tauri/icons/icon.ico and /dev/null differ
diff --git a/src-tauri/src/app_state.rs b/src-tauri/src/app_state.rs
index 628a1b20..7e236ddb 100644
--- a/src-tauri/src/app_state.rs
+++ b/src-tauri/src/app_state.rs
@@ -4,23 +4,36 @@ use crate::ClickerSettings;
 use std::sync::atomic::{AtomicBool, AtomicI64, AtomicU64};
 use std::sync::{Arc, Mutex};
 
+pub struct IconState {
+    pub accent_color: String,
+    pub theme: String,
+    pub icon_enabled: bool,
+    pub icon_theme: String,
+    pub icon_color: String,
+    pub active_icon_dark: Option<Vec<u8>>,
+    pub active_icon_light: Option<Vec<u8>>,
+}
+
 pub struct ClickerState {
     pub running: Arc<AtomicBool>,
     pub run_generation: AtomicU64,
     pub settings: Mutex<ClickerSettings>,
     pub last_error: Mutex<Option<String>>,
     pub stop_reason: Mutex<Option<String>>,
-    pub active_sequence_index: AtomicI64,
-    pub active_sequence_tick: AtomicU64,
+    pub active_click_point_index: AtomicI64,
+    pub active_click_point_tick: AtomicU64,
     pub suppress_hotkey_until_ms: AtomicU64,
     pub suppress_hotkey_until_release: AtomicBool,
     pub hotkey_capture_active: AtomicBool,
-    pub sequence_pick_active: AtomicBool,
+    pub click_point_pick_active: AtomicBool,
     pub custom_stop_zone_pick_active: AtomicBool,
     pub registered_hotkey: Mutex<Option<HotkeyBinding>>,
     pub settings_initialized: AtomicBool,
     pub paused: Arc<AtomicBool>,
+    pub paused_by_zone: AtomicBool,
+    pub zone_started_clicker: AtomicBool,
     pub warning: Mutex<Option<String>>,
+    pub icon_state: Mutex<IconState>,
 }
 
 #[derive(Clone, serde::Serialize)]
@@ -32,8 +45,8 @@ pub struct ClickerStatusPayload {
     pub last_error: Option<String>,
     pub stop_reason: Option<String>,
     pub warning: Option<String>,
-    pub active_sequence_index: Option<usize>,
-    pub active_sequence_tick: u64,
+    pub active_click_point_index: Option<usize>,
+    pub active_click_point_tick: u64,
 }
 
 #[derive(Clone, serde::Serialize)]
diff --git a/src-tauri/src/sequence_picker.rs b/src-tauri/src/click_point_picker.rs
similarity index 91%
rename from src-tauri/src/sequence_picker.rs
rename to src-tauri/src/click_point_picker.rs
index d9dae623..fe478f39 100644
--- a/src-tauri/src/sequence_picker.rs
+++ b/src-tauri/src/click_point_picker.rs
@@ -23,7 +23,7 @@ const CURSOR_EMIT_INTERVAL: Duration = Duration::from_millis(16);
 
 #[derive(Clone, serde::Serialize)]
 #[serde(rename_all = "camelCase")]
-struct SequencePointPickedPayload {
+struct ClickPointPickedPayload {
     x: i32,
     y: i32,
     continue_picking: bool,
@@ -31,7 +31,7 @@ struct SequencePointPickedPayload {
 
 #[derive(Clone, serde::Serialize)]
 #[serde(rename_all = "camelCase")]
-struct SequencePointDeleteRequestedPayload {
+struct ClickPointDeleteRequestedPayload {
     x: i32,
     y: i32,
 }
@@ -90,13 +90,13 @@ fn classify_keyboard_message(message: u32, virtual_key: u32) -> KeyboardHookDeci
     }
 }
 
-pub fn start_sequence_point_pick_inner(app: AppHandle) -> AppResult<()> {
+pub fn start_click_point_pick_inner(app: AppHandle) -> AppResult<()> {
     crate::custom_stop_zone_picker::cancel_custom_stop_zone_pick_inner(&app);
 
     {
         let mut runtime = picker().lock().unwrap_or_else(poisoned_inner);
         if runtime.active {
-            crate::overlay::show_sequence_pick_overlay(&app)?;
+            crate::overlay::show_click_point_pick_overlay(&app)?;
             return Ok(());
         }
 
@@ -107,10 +107,10 @@ pub fn start_sequence_point_pick_inner(app: AppHandle) -> AppResult<()> {
     }
 
     app.state::<ClickerState>()
-        .sequence_pick_active
+        .click_point_pick_active
         .store(true, std::sync::atomic::Ordering::SeqCst);
 
-    crate::overlay::show_sequence_pick_overlay(&app)?;
+    crate::overlay::show_click_point_pick_overlay(&app)?;
 
     let (ready_tx, ready_rx) = mpsc::channel();
     std::thread::spawn(move || unsafe {
@@ -164,29 +164,29 @@ pub fn start_sequence_point_pick_inner(app: AppHandle) -> AppResult<()> {
     match ready_rx.recv_timeout(Duration::from_secs(1)) {
         Ok(Ok(())) => Ok(()),
         Ok(Err(error)) => {
-            cancel_sequence_point_pick_inner(&app);
+            cancel_click_point_pick_inner(&app);
             Err(error)
         }
         Err(_) => {
-            cancel_sequence_point_pick_inner(&app);
+            cancel_click_point_pick_inner(&app);
             Err(AppError::ChannelFailure)
         }
     }
 }
 
-fn cancel_sequence_point_pick_from_hook() {
-    let app = stop_sequence_point_pick(None, true);
+fn cancel_click_point_pick_from_hook() {
+    let app = stop_click_point_pick(None, true);
     if let Some(app) = app {
         let _ = crate::overlay::hide_overlay(app);
     }
 }
 
-pub fn cancel_sequence_point_pick_inner(app: &AppHandle) {
-    stop_sequence_point_pick(Some(app.clone()), true);
+pub fn cancel_click_point_pick_inner(app: &AppHandle) {
+    stop_click_point_pick(Some(app.clone()), true);
     let _ = crate::overlay::hide_overlay(app.clone());
 }
 
-fn stop_sequence_point_pick(
+fn stop_click_point_pick(
     app_override: Option<AppHandle>,
     notify_overlay: bool,
 ) -> Option<AppHandle> {
@@ -203,11 +203,11 @@ fn stop_sequence_point_pick(
 
     if let Some(app) = &app {
         app.state::<ClickerState>()
-            .sequence_pick_active
+            .click_point_pick_active
             .store(false, std::sync::atomic::Ordering::SeqCst);
-        let _ = app.emit("sequence-pick-ended", ());
+        let _ = app.emit("click-pick-ended", ());
         if notify_overlay {
-            let _ = crate::overlay::set_sequence_pick_mode(app, false);
+            let _ = crate::overlay::set_click_point_pick_mode(app, false);
         }
     }
 
@@ -245,7 +245,7 @@ unsafe extern "system" fn mouse_hook_proc(code: i32, wparam: WPARAM, lparam: LPA
                     should_stop
                 };
                 if should_stop {
-                    stop_sequence_point_pick(None, true);
+                    stop_click_point_pick(None, true);
                 }
             }
             1
@@ -275,7 +275,7 @@ unsafe extern "system" fn keyboard_hook_proc(code: i32, wparam: WPARAM, lparam:
     match classify_keyboard_message(message, keyboard.vkCode) {
         KeyboardHookDecision::Pass => CallNextHookEx(std::ptr::null_mut(), code, wparam, lparam),
         KeyboardHookDecision::Cancel => {
-            cancel_sequence_point_pick_from_hook();
+            cancel_click_point_pick_from_hook();
             1
         }
     }
@@ -308,7 +308,7 @@ fn emit_cursor_position(x: i32, y: i32) {
             .unwrap_or((x, y));
 
         let _ = app.emit(
-            "sequence-pick-cursor",
+            "click-pick-cursor",
             serde_json::json!({
                 "x": overlay_x,
                 "y": overlay_y,
@@ -328,8 +328,8 @@ fn emit_pick(x: i32, y: i32, continue_picking: bool) {
 
     if let Some(app) = app {
         let _ = app.emit(
-            "sequence-point-picked",
-            SequencePointPickedPayload {
+            "click-point-picked",
+            ClickPointPickedPayload {
                 x,
                 y,
                 continue_picking,
@@ -349,8 +349,8 @@ fn emit_delete_request(x: i32, y: i32) {
 
     if let Some(app) = app {
         let _ = app.emit(
-            "sequence-point-delete-requested",
-            SequencePointDeleteRequestedPayload { x, y },
+            "click-point-delete-requested",
+            ClickPointDeleteRequestedPayload { x, y },
         );
     }
 }
diff --git a/src-tauri/src/crash_handler.rs b/src-tauri/src/crash_handler.rs
index 8f374ff0..173d28c5 100644
--- a/src-tauri/src/crash_handler.rs
+++ b/src-tauri/src/crash_handler.rs
@@ -21,6 +21,9 @@ pub fn initialize_crashpad() -> Result<(), Box<dyn std::error::Error>> {
         "[Crashpad] Initialized, crash reports directory: {}",
         crash_database.display()
     );
+    // Must not drop during process exit — Crashpad client sends crash reports on
+    // drop, but during abnormal termination the drop may hang or deadlock.
+    // Leaking ensures the handler process stays alive.
     std::mem::forget(client);
     Ok(())
 }
diff --git a/src-tauri/src/custom_stop_zone_picker.rs b/src-tauri/src/custom_stop_zone_picker.rs
index c329ffcf..c1f85812 100644
--- a/src-tauri/src/custom_stop_zone_picker.rs
+++ b/src-tauri/src/custom_stop_zone_picker.rs
@@ -97,7 +97,7 @@ fn normalize_rect(start: (i32, i32), end: (i32, i32)) -> StopZoneRect {
 }
 
 pub fn start_custom_stop_zone_pick_inner(app: AppHandle) -> AppResult<()> {
-    crate::sequence_picker::cancel_sequence_point_pick_inner(&app);
+    crate::click_point_picker::cancel_click_point_pick_inner(&app);
 
     {
         let mut runtime = picker().lock().unwrap_or_else(poisoned_inner);
@@ -193,11 +193,17 @@ fn cancel_custom_stop_zone_pick_from_hook() {
 }
 
 fn finish_custom_stop_zone_pick(rect: StopZoneRect) {
-    let app = stop_custom_stop_zone_pick(None, true);
-    if let Some(app) = app {
+    let app: Option<AppHandle> = {
+        let runtime = picker().lock().unwrap_or_else(poisoned_inner);
+        if !runtime.active {
+            return;
+        }
+        runtime.app.clone()
+    };
+    if let Some(ref app) = app {
         let _ = app.emit("custom-stop-zone-picked", rect);
-        let _ = crate::overlay::end_custom_stop_zone_pick_overlay(&app);
     }
+    stop_custom_stop_zone_pick(None, true);
 }
 
 fn stop_custom_stop_zone_pick(
diff --git a/src-tauri/src/engine/failsafe.rs b/src-tauri/src/engine/failsafe.rs
index a064602e..b4ac3da4 100644
--- a/src-tauri/src/engine/failsafe.rs
+++ b/src-tauri/src/engine/failsafe.rs
@@ -1,12 +1,26 @@
 use super::mouse::{current_cursor_position, current_monitor_rects, VirtualScreenRect};
-use super::ClickerConfig;
+use super::{ClickerConfig, ZoneAction};
 
-fn detect_custom_stop_zone(cursor: (i32, i32), config: &ClickerConfig) -> Option<String> {
-    if config.custom_stop_zone_enabled && config.custom_stop_zone.contains(cursor.0, cursor.1) {
-        return Some(String::from("Custom stop zone failsafe"));
+pub fn detect_stop_zones(
+    cursor: (i32, i32),
+    config: &ClickerConfig,
+) -> Option<(ZoneAction, usize)> {
+    let mut result: Option<(ZoneAction, usize)> = None;
+    for (i, zone) in config.stop_zones.iter().enumerate() {
+        if !zone.rect.contains(cursor.0, cursor.1) {
+            continue;
+        }
+        match zone.action {
+            ZoneAction::Stop => return Some((zone.action, i)),
+            ZoneAction::Start => result = Some((zone.action, i)),
+            ZoneAction::Pause => {
+                if result.is_none() {
+                    result = Some((zone.action, i));
+                }
+            }
+        }
     }
-
-    None
+    result
 }
 
 fn detect_corner_failsafe(
@@ -74,8 +88,8 @@ pub fn detect_failsafe(
     monitors: &[VirtualScreenRect],
     config: &ClickerConfig,
 ) -> Option<String> {
-    if let Some(reason) = detect_custom_stop_zone(cursor, config) {
-        return Some(reason);
+    if let Some((ZoneAction::Stop, _)) = detect_stop_zones(cursor, config) {
+        return Some(String::from("Custom stop zone failsafe"));
     }
 
     if config.corner_stop_enabled {
@@ -105,6 +119,7 @@ pub fn should_stop_for_failsafe(config: &ClickerConfig) -> Option<String> {
 
 #[cfg(test)]
 mod tests {
+    use super::super::StopZoneConfig;
     use super::*;
 
     fn sample_config() -> ClickerConfig {
@@ -117,13 +132,14 @@ mod tests {
             button: 1,
             double_click_enabled: false,
             double_click_gap_ms: 450,
-            sequence_enabled: false,
-            sequence_points: Vec::new(),
+            click_points_enabled: false,
+            stop_zones_enabled: false,
+            stop_when_complete: false,
+            click_points: Vec::new(),
             offset: 0.0,
             offset_chance: 0.0,
             smoothing: 0,
-            custom_stop_zone_enabled: false,
-            custom_stop_zone: VirtualScreenRect::new(0, 0, 100, 100),
+            stop_zones: Vec::new(),
             corner_stop_enabled: true,
             corner_stop_tl: 50,
             corner_stop_tr: 50,
@@ -134,7 +150,7 @@ mod tests {
             edge_stop_right: 40,
             edge_stop_bottom: 40,
             edge_stop_left: 40,
-            input_type: 0,
+            input_type: crate::engine::InputType::Mouse,
             key_code: 0,
             keyboard_uppercase: false,
             process_list_enabled: false,
@@ -195,8 +211,10 @@ mod tests {
     #[test]
     fn detects_custom_stop_zone_before_other_failsafes() {
         let mut config = sample_config();
-        config.custom_stop_zone_enabled = true;
-        config.custom_stop_zone = VirtualScreenRect::new(100, 100, 200, 150);
+        config.stop_zones.push(StopZoneConfig {
+            rect: VirtualScreenRect::new(100, 100, 200, 150),
+            action: ZoneAction::Stop,
+        });
         let monitors = [VirtualScreenRect::new(0, 0, 1920, 1080)];
 
         let reason = detect_failsafe((150, 120), &monitors, &config);
@@ -206,8 +224,10 @@ mod tests {
     #[test]
     fn detects_custom_stop_zone_with_negative_coordinates() {
         let mut config = sample_config();
-        config.custom_stop_zone_enabled = true;
-        config.custom_stop_zone = VirtualScreenRect::new(-300, -200, 150, 100);
+        config.stop_zones.push(StopZoneConfig {
+            rect: VirtualScreenRect::new(-300, -200, 150, 100),
+            action: ZoneAction::Stop,
+        });
         let monitors = [
             VirtualScreenRect::new(-1920, 0, 1920, 1080),
             VirtualScreenRect::new(0, 0, 1920, 1080),
@@ -216,4 +236,73 @@ mod tests {
         let reason = detect_failsafe((-250, -150), &monitors, &config);
         assert_eq!(reason.as_deref(), Some("Custom stop zone failsafe"));
     }
+
+    #[test]
+    fn pause_zone_does_not_trigger_failsafe_stop() {
+        let mut config = sample_config();
+        config.stop_zones.push(StopZoneConfig {
+            rect: VirtualScreenRect::new(100, 100, 200, 150),
+            action: ZoneAction::Pause,
+        });
+        let monitors = [VirtualScreenRect::new(0, 0, 1920, 1080)];
+
+        let reason = detect_failsafe((150, 120), &monitors, &config);
+        assert_eq!(reason, None);
+
+        let zone = detect_stop_zones((150, 120), &config);
+        assert_eq!(zone, Some((ZoneAction::Pause, 0)));
+    }
+
+    #[test]
+    fn stop_overrides_start_overrides_pause() {
+        let mut config = sample_config();
+        config.stop_zones.push(StopZoneConfig {
+            rect: VirtualScreenRect::new(0, 0, 100, 100),
+            action: ZoneAction::Pause,
+        });
+        config.stop_zones.push(StopZoneConfig {
+            rect: VirtualScreenRect::new(0, 0, 100, 100),
+            action: ZoneAction::Stop,
+        });
+
+        let zone = detect_stop_zones((50, 50), &config);
+        assert_eq!(zone, Some((ZoneAction::Stop, 1)));
+    }
+
+    #[test]
+    fn start_overrides_pause() {
+        let mut config = sample_config();
+        config.stop_zones.push(StopZoneConfig {
+            rect: VirtualScreenRect::new(0, 0, 200, 200),
+            action: ZoneAction::Pause,
+        });
+        config.stop_zones.push(StopZoneConfig {
+            rect: VirtualScreenRect::new(50, 50, 100, 100),
+            action: ZoneAction::Start,
+        });
+
+        // Cursor inside both zones → Start wins
+        let zone = detect_stop_zones((75, 75), &config);
+        assert_eq!(zone, Some((ZoneAction::Start, 1)));
+
+        // Cursor inside pause zone but outside start zone → Pause
+        let zone = detect_stop_zones((10, 10), &config);
+        assert_eq!(zone, Some((ZoneAction::Pause, 0)));
+    }
+
+    #[test]
+    fn none_when_no_zone_contains_cursor() {
+        let mut config = sample_config();
+        config.stop_zones.push(StopZoneConfig {
+            rect: VirtualScreenRect::new(0, 0, 100, 100),
+            action: ZoneAction::Pause,
+        });
+        config.stop_zones.push(StopZoneConfig {
+            rect: VirtualScreenRect::new(200, 200, 50, 50),
+            action: ZoneAction::Start,
+        });
+
+        let zone = detect_stop_zones((500, 500), &config);
+        assert_eq!(zone, None);
+    }
 }
diff --git a/src-tauri/src/engine/keyboard.rs b/src-tauri/src/engine/keyboard.rs
index f3d2886c..542ea473 100644
--- a/src-tauri/src/engine/keyboard.rs
+++ b/src-tauri/src/engine/keyboard.rs
@@ -27,7 +27,7 @@ pub fn make_keyboard_input(vk: u16, flags: u32) -> INPUT {
         r#type: INPUT_KEYBOARD,
         Anonymous: windows_sys::Win32::UI::Input::KeyboardAndMouse::INPUT_0 {
             ki: KEYBDINPUT {
-                wVk: vk,
+                wVk: 0,
                 wScan: scan,
                 dwFlags: flags | KEYEVENTF_SCANCODE | ext_flag,
                 time: 0,
diff --git a/src-tauri/src/engine/mod.rs b/src-tauri/src/engine/mod.rs
index 34b05544..594b5364 100644
--- a/src-tauri/src/engine/mod.rs
+++ b/src-tauri/src/engine/mod.rs
@@ -20,24 +20,43 @@ pub enum ProcessListMode {
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq, serde::Deserialize, serde::Serialize)]
 #[serde(rename_all = "camelCase")]
-pub enum ProcessListBehavior {
-    Pause,
-    Stop,
+pub enum InputType {
+    Mouse,
+    Keyboard,
+}
+
+impl InputType {
+    pub fn is_keyboard(self) -> bool {
+        matches!(self, InputType::Keyboard)
+    }
 }
 
 #[derive(Clone, Debug, serde::Deserialize, serde::Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct ProcessListEntry {
     pub name: String,
-    pub behavior: ProcessListBehavior,
     pub enabled: bool,
 }
 
 #[derive(Clone, Copy, Debug, PartialEq, Eq)]
-pub struct SequenceTarget {
+pub struct ClickPointTarget {
     pub x: i32,
     pub y: i32,
     pub clicks: usize,
+    pub radius: u32,
+}
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq)]
+pub enum ZoneAction {
+    Stop,
+    Pause,
+    Start,
+}
+
+#[derive(Clone, Copy, Debug)]
+pub struct StopZoneConfig {
+    pub rect: VirtualScreenRect,
+    pub action: ZoneAction,
 }
 
 #[derive(Clone, Debug)]
@@ -50,13 +69,14 @@ pub struct ClickerConfig {
     pub button: i32,
     pub double_click_enabled: bool,
     pub double_click_gap_ms: u32,
-    pub sequence_enabled: bool,
-    pub sequence_points: Vec<SequenceTarget>,
+    pub click_points_enabled: bool,
+    pub stop_zones_enabled: bool,
+    pub stop_when_complete: bool,
+    pub click_points: Vec<ClickPointTarget>,
     pub offset: f64,
     pub offset_chance: f64,
     pub smoothing: i32,
-    pub custom_stop_zone_enabled: bool,
-    pub custom_stop_zone: VirtualScreenRect,
+    pub stop_zones: Vec<StopZoneConfig>,
     pub corner_stop_enabled: bool,
     pub corner_stop_tl: i32,
     pub corner_stop_tr: i32,
@@ -67,7 +87,7 @@ pub struct ClickerConfig {
     pub edge_stop_right: i32,
     pub edge_stop_bottom: i32,
     pub edge_stop_left: i32,
-    pub input_type: i32,
+    pub input_type: InputType,
     pub key_code: u16,
     pub keyboard_uppercase: bool,
     pub process_list_enabled: bool,
diff --git a/src-tauri/src/engine/process.rs b/src-tauri/src/engine/process.rs
index 32a98275..3d2b5979 100644
--- a/src-tauri/src/engine/process.rs
+++ b/src-tauri/src/engine/process.rs
@@ -327,7 +327,7 @@ pub fn list_running_processes() -> Vec<ProcessInfo> {
     result
 }
 
-pub fn check_process_list(config: &ClickerConfig) -> Option<super::ProcessListBehavior> {
+pub fn check_process_list(config: &ClickerConfig) -> Option<()> {
     if !config.process_list_enabled {
         return None;
     }
@@ -342,11 +342,7 @@ pub fn check_process_list(config: &ClickerConfig) -> Option<super::ProcessListBe
         super::ProcessListMode::Blacklist => is_in_list,
     };
     if triggered {
-        let behavior = match matching_entry {
-            Some(entry) => entry.behavior,
-            None => super::ProcessListBehavior::Stop,
-        };
-        Some(behavior)
+        Some(())
     } else {
         None
     }
diff --git a/src-tauri/src/engine/worker.rs b/src-tauri/src/engine/worker.rs
index 9a7f40ea..48155c26 100644
--- a/src-tauri/src/engine/worker.rs
+++ b/src-tauri/src/engine/worker.rs
@@ -2,6 +2,8 @@ use std::f64::consts::PI;
 use std::sync::atomic::Ordering;
 use std::time::{Duration, Instant, SystemTime, UNIX_EPOCH};
 
+use image::ImageEncoder;
+use tauri::image::Image;
 use tauri::{AppHandle, Emitter, Manager};
 
 use crate::engine::start_clicker as engine_start;
@@ -10,25 +12,162 @@ use crate::error::poisoned_inner;
 use crate::error::AppError;
 use crate::error::AppResult;
 use crate::ClickerSettings;
-use crate::ClickerState;
 use crate::ClickerStatusPayload;
 use crate::STATUS_EVENT;
+use crate::{ClickerState, IconState};
 use windows_sys::Win32::UI::Input::KeyboardAndMouse::GetDoubleClickTime;
 
 use super::cycle::ClickCyclePlan;
+use super::failsafe::detect_stop_zones;
 use super::failsafe::should_stop_for_failsafe;
 use super::keyboard::{is_alphabetic_vk, send_key_presses};
 use super::mouse::{
-    get_button_flags, get_cursor_pos, move_mouse, send_clicks, smooth_move, VirtualScreenRect,
+    current_cursor_position, get_button_flags, get_cursor_pos, move_mouse, send_clicks,
+    smooth_move, VirtualScreenRect,
 };
 use super::process;
 use super::rng::SmallRng;
+use super::ClickPointTarget;
 use super::ClickerConfig;
 use super::NtSetTimerResolution;
 use super::RunOutcome;
-use super::SequenceTarget;
 use super::CLICK_COUNT;
 
+const ICON_ACTIVATED_DARK: &[u8] = include_bytes!("../../icons/icon-activated-dark.ico");
+const ICON_ACTIVATED_LIGHT: &[u8] = include_bytes!("../../icons/Icon-activated-light.ico");
+const ICON_DEACTIVATED_DARK: &[u8] = include_bytes!("../../icons/icon-deactivated-dark.ico");
+const ICON_DEACTIVATED_LIGHT: &[u8] = include_bytes!("../../icons/Icon-deactivated-light.ico");
+const MASK_PNG_BYTES: &[u8] = include_bytes!("../../icons/icon-mask.png");
+
+fn tint_icon(base_ico: &[u8], mask_png: &[u8], hex_color: &str) -> Option<Vec<u8>> {
+    let hex = hex_color.trim_start_matches('#');
+    if hex.len() < 6 {
+        return None;
+    }
+    let r = u8::from_str_radix(&hex[0..2], 16).ok()?;
+    let g = u8::from_str_radix(&hex[2..4], 16).ok()?;
+    let b = u8::from_str_radix(&hex[4..6], 16).ok()?;
+
+    let base = image::load_from_memory(base_ico).ok()?.to_rgba8();
+    let mask = image::load_from_memory(mask_png).ok()?.to_rgba8();
+    let (w, h) = base.dimensions();
+    let mw = mask.width().min(w);
+    let mh = mask.height().min(h);
+
+    let mut out = base;
+    for y in 0..mh {
+        for x in 0..mw {
+            let mp = mask.get_pixel(x, y);
+            if mp[0] > 200 && mp[1] > 200 && mp[2] > 200 && mp[3] > 128 {
+                let p = out.get_pixel_mut(x, y);
+                p[0] = r;
+                p[1] = g;
+                p[2] = b;
+            }
+        }
+    }
+
+    let mut buf = Vec::new();
+    let encoder = image::codecs::png::PngEncoder::new(&mut buf);
+    let color_type = image::ExtendedColorType::Rgba8;
+    encoder.write_image(&out, w, h, color_type).ok()?;
+    Some(buf)
+}
+
+fn resolve_icon_theme(icon_state: &IconState) -> String {
+    if icon_state.icon_theme == "auto" {
+        icon_state.theme.clone()
+    } else {
+        icon_state.icon_theme.clone()
+    }
+}
+
+pub fn set_app_icons(app: &AppHandle) {
+    let state = app.state::<ClickerState>();
+    let active = state.running.load(Ordering::SeqCst);
+    let icon_state = state.icon_state.lock().unwrap_or_else(poisoned_inner);
+    let is_dark = resolve_icon_theme(&icon_state) == "dark";
+
+    if active {
+        let storage = if is_dark {
+            &icon_state.active_icon_dark
+        } else {
+            &icon_state.active_icon_light
+        };
+        if let Some(bytes) = storage.as_deref() {
+            if let Ok(img) = Image::from_bytes(bytes) {
+                drop(icon_state);
+                if let Some(window) = app.get_webview_window("main") {
+                    let _ = window.set_icon(img.clone());
+                }
+                if let Some(tray) = app.tray_by_id("main") {
+                    let _ = tray.set_icon(Some(img));
+                }
+                return;
+            }
+        }
+    }
+
+    let bytes: &[u8] = if active {
+        if is_dark {
+            ICON_ACTIVATED_DARK
+        } else {
+            ICON_ACTIVATED_LIGHT
+        }
+    } else {
+        if is_dark {
+            ICON_DEACTIVATED_DARK
+        } else {
+            ICON_DEACTIVATED_LIGHT
+        }
+    };
+
+    let Ok(img) = Image::from_bytes(bytes) else {
+        return;
+    };
+
+    if let Some(window) = app.get_webview_window("main") {
+        let _ = window.set_icon(img.clone());
+    }
+    if let Some(tray) = app.tray_by_id("main") {
+        let _ = tray.set_icon(Some(img));
+    }
+}
+
+pub fn set_icon_theme_inner(
+    app: &AppHandle,
+    hex_color: &str,
+    theme: &str,
+    icon_enabled: bool,
+    icon_theme: &str,
+    icon_color: &str,
+) {
+    let state = app.state::<ClickerState>();
+
+    let use_tint = icon_enabled && icon_color == "theme";
+
+    let (dark, light) = if use_tint {
+        (
+            tint_icon(ICON_ACTIVATED_DARK, MASK_PNG_BYTES, hex_color),
+            tint_icon(ICON_ACTIVATED_LIGHT, MASK_PNG_BYTES, hex_color),
+        )
+    } else {
+        (None, None)
+    };
+
+    let mut icon_state = state.icon_state.lock().unwrap_or_else(poisoned_inner);
+    icon_state.accent_color = hex_color.to_string();
+    icon_state.theme = theme.to_string();
+    icon_state.icon_enabled = icon_enabled;
+    icon_state.icon_theme = icon_theme.to_string();
+    icon_state.icon_color = icon_color.to_string();
+    icon_state.active_icon_dark = dark;
+    icon_state.active_icon_light = light;
+    drop(icon_state);
+
+    set_app_icons(app);
+}
+
 // -- CPU measurement --
 // changed from normal cpu measurement because it was not accurately
 // showing cpu usage for short clicker run times.
@@ -50,8 +189,8 @@ fn thread_cycles() -> u64 {
 }
 
 impl ClickerConfig {
-    pub fn use_sequence(&self) -> bool {
-        self.sequence_enabled && !self.sequence_points.is_empty()
+    pub fn use_click_points(&self) -> bool {
+        self.click_points_enabled && !self.click_points.is_empty()
     }
 }
 
@@ -138,7 +277,7 @@ pub fn start_clicker_inner(app: &AppHandle) -> AppResult<ClickerStatusPayload> {
     let config = build_config(&settings)?;
 
     // Prevent feedback loop: keyboard key must not match a modifier-free hotkey
-    if config.input_type == 1 && config.key_code > 0 {
+    if config.input_type == crate::engine::InputType::Keyboard && config.key_code > 0 {
         let hotkey_binding = state
             .registered_hotkey
             .lock()
@@ -186,14 +325,18 @@ pub fn start_clicker_inner(app: &AppHandle) -> AppResult<ClickerStatusPayload> {
         *state.warning.lock().unwrap_or_else(poisoned_inner) = None;
     }
 
-    if config.use_sequence() {
-        state.active_sequence_index.store(0, Ordering::SeqCst);
-        state.active_sequence_tick.store(0, Ordering::SeqCst);
+    if config.use_click_points() {
+        state.active_click_point_index.store(0, Ordering::SeqCst);
+        state.active_click_point_tick.store(0, Ordering::SeqCst);
     }
     let expected_generation = state.run_generation.fetch_add(1, Ordering::SeqCst) + 1;
     let control = RunControl::new(app.clone(), expected_generation);
     let app_handle = app.clone();
 
+    let payload = current_status(app);
+    set_app_icons(app);
+    emit_status(app);
+
     std::thread::spawn(move || {
         let outcome = engine_start(config, control.clone());
 
@@ -208,8 +351,10 @@ pub fn start_clicker_inner(app: &AppHandle) -> AppResult<ClickerStatusPayload> {
 
         let state = app_handle.state::<ClickerState>();
         state.running.store(false, Ordering::SeqCst);
-        state.active_sequence_index.store(-1, Ordering::SeqCst);
-        state.active_sequence_tick.store(0, Ordering::SeqCst);
+        state.active_click_point_index.store(-1, Ordering::SeqCst);
+        state.active_click_point_tick.store(0, Ordering::SeqCst);
+
+        set_app_icons(&app_handle);
 
         *state.stop_reason.lock().unwrap_or_else(poisoned_inner) =
             Some(outcome.stop_reason.clone());
@@ -217,8 +362,6 @@ pub fn start_clicker_inner(app: &AppHandle) -> AppResult<ClickerStatusPayload> {
         emit_status(&app_handle);
     });
 
-    let payload = current_status(app);
-    emit_status(app);
     Ok(payload)
 }
 pub fn stop_clicker_inner(
@@ -227,8 +370,10 @@ pub fn stop_clicker_inner(
 ) -> AppResult<ClickerStatusPayload> {
     let state = app.state::<ClickerState>();
     let was_running = state.running.swap(false, Ordering::SeqCst);
-    state.active_sequence_index.store(-1, Ordering::SeqCst);
-    state.active_sequence_tick.store(0, Ordering::SeqCst);
+    state.active_click_point_index.store(-1, Ordering::SeqCst);
+    state.active_click_point_tick.store(0, Ordering::SeqCst);
+    state.zone_started_clicker.store(false, Ordering::SeqCst);
+    state.paused_by_zone.store(false, Ordering::SeqCst);
     if was_running {
         state.run_generation.fetch_add(1, Ordering::SeqCst);
     }
@@ -239,6 +384,9 @@ pub fn stop_clicker_inner(
     }
     *state.warning.lock().unwrap_or_else(poisoned_inner) = None;
     let payload = current_status(app);
+    if was_running {
+        set_app_icons(app);
+    }
     emit_status(app);
     Ok(payload)
 }
@@ -273,13 +421,18 @@ fn system_double_click_gap_ms() -> u32 {
     ((system_timeout_ms as f64) * 0.9).floor() as u32
 }
 
-fn current_cycle_target(config: &ClickerConfig, sequence_index: usize) -> SequenceTarget {
-    if config.use_sequence() {
-        let safe_index = sequence_index % config.sequence_points.len();
-        config.sequence_points[safe_index]
+fn current_cycle_target(config: &ClickerConfig, click_point_index: usize) -> ClickPointTarget {
+    if config.use_click_points() {
+        let safe_index = click_point_index % config.click_points.len();
+        config.click_points[safe_index]
     } else {
         let (x, y) = get_cursor_pos();
-        SequenceTarget { x, y, clicks: 1 }
+        ClickPointTarget {
+            x,
+            y,
+            clicks: 1,
+            radius: 0,
+        }
     }
 }
 
@@ -321,8 +474,8 @@ pub fn build_config(settings: &ClickerSettings) -> AppResult<ClickerConfig> {
 
     Ok(ClickerConfig {
         interval_secs: base_interval_secs,
-        variation: if settings.speed_variation_enabled {
-            settings.speed_variation
+        variation: if settings.speed_randomization_enabled {
+            settings.speed_randomization
         } else {
             0.0
         },
@@ -340,26 +493,42 @@ pub fn build_config(settings: &ClickerSettings) -> AppResult<ClickerConfig> {
         button,
         double_click_enabled: settings.double_click_enabled,
         double_click_gap_ms: system_double_click_gap_ms(),
-        sequence_enabled: settings.sequence_enabled,
-        sequence_points: settings
-            .sequence_points
+        click_points_enabled: settings.click_points_enabled,
+        stop_zones_enabled: settings.stop_zones_enabled,
+        stop_when_complete: settings.stop_when_complete,
+        click_points: settings
+            .click_points
             .iter()
-            .map(|point| SequenceTarget {
+            .map(|point| ClickPointTarget {
                 x: point.x,
                 y: point.y,
-                clicks: point.clicks.clamp(1, 100000) as usize,
+                clicks: point.clicks.clamp(1, 999999) as usize,
+                radius: point.radius,
             })
             .collect(),
         offset: 2.0,
         offset_chance: 21.6,
         smoothing: 1,
-        custom_stop_zone_enabled: settings.custom_stop_zone_enabled,
-        custom_stop_zone: VirtualScreenRect::new(
-            settings.custom_stop_zone_x,
-            settings.custom_stop_zone_y,
-            settings.custom_stop_zone_width.max(1),
-            settings.custom_stop_zone_height.max(1),
-        ),
+        stop_zones: settings
+            .stop_zones
+            .iter()
+            .map(|zone| {
+                let action = match zone.action.as_str() {
+                    "pause" => crate::engine::ZoneAction::Pause,
+                    "start" => crate::engine::ZoneAction::Start,
+                    _ => crate::engine::ZoneAction::Stop,
+                };
+                crate::engine::StopZoneConfig {
+                    rect: VirtualScreenRect::new(
+                        zone.x,
+                        zone.y,
+                        zone.width.max(1),
+                        zone.height.max(1),
+                    ),
+                    action,
+                }
+            })
+            .collect(),
         corner_stop_enabled: settings.corner_stop_enabled,
         corner_stop_tl: settings.corner_stop_tl,
         corner_stop_tr: settings.corner_stop_tr,
@@ -370,7 +539,11 @@ pub fn build_config(settings: &ClickerSettings) -> AppResult<ClickerConfig> {
         edge_stop_right: settings.edge_stop_right,
         edge_stop_bottom: settings.edge_stop_bottom,
         edge_stop_left: settings.edge_stop_left,
-        input_type: if is_keyboard { 1 } else { 0 },
+        input_type: if is_keyboard {
+            crate::engine::InputType::Keyboard
+        } else {
+            crate::engine::InputType::Mouse
+        },
         key_code,
         keyboard_uppercase,
         process_list_enabled: settings.process_list_enabled,
@@ -404,8 +577,8 @@ pub fn current_status(app: &AppHandle) -> ClickerStatusPayload {
         .unwrap_or_else(poisoned_inner)
         .clone();
     let warning = state.warning.lock().unwrap_or_else(poisoned_inner).clone();
-    let active_sequence_index = state.active_sequence_index.load(Ordering::SeqCst);
-    let active_sequence_tick = state.active_sequence_tick.load(Ordering::SeqCst);
+    let active_click_point_index = state.active_click_point_index.load(Ordering::SeqCst);
+    let active_click_point_tick = state.active_click_point_tick.load(Ordering::SeqCst);
 
     ClickerStatusPayload {
         running: state.running.load(Ordering::SeqCst),
@@ -414,12 +587,12 @@ pub fn current_status(app: &AppHandle) -> ClickerStatusPayload {
         last_error,
         stop_reason,
         warning,
-        active_sequence_index: if active_sequence_index >= 0 {
-            Some(active_sequence_index as usize)
+        active_click_point_index: if active_click_point_index >= 0 {
+            Some(active_click_point_index as usize)
         } else {
             None
         },
-        active_sequence_tick,
+        active_click_point_tick,
     }
 }
 
@@ -494,7 +667,7 @@ struct ClickerContext {
 
 impl ClickerContext {
     fn new(config: &ClickerConfig) -> Self {
-        let is_keyboard = config.input_type == 1 && config.key_code > 0;
+        let is_keyboard = config.input_type.is_keyboard() && config.key_code > 0;
         let (down_flag, up_flag) = if is_keyboard {
             (0, 0)
         } else {
@@ -532,7 +705,7 @@ impl ClickerContext {
             down_flag,
             up_flag,
             batch_size,
-            has_position: config.use_sequence(),
+            has_position: config.use_click_points(),
             use_smoothing: config.smoothing == 1 && cps < 50.0,
             single_plan: ClickCyclePlan::single(hold_ms),
             double_plan: ClickCyclePlan::double(hold_ms, cycle_ms, config.double_click_gap_ms),
@@ -543,18 +716,19 @@ impl ClickerContext {
 struct LoopState {
     click_count: i64,
     stop_reason: String,
-    sequence_index: usize,
-    sequence_clicks_remaining: usize,
+    stop_reason_finalized: bool,
+    click_point_index: usize,
+    click_point_clicks_remaining: usize,
     target_x: i32,
     target_y: i32,
     next_batch_time: Instant,
-    moved_sequence_index: Option<usize>,
+    moved_click_point_index: Option<usize>,
 }
 
 impl LoopState {
     fn new(config: &ClickerConfig) -> Self {
         let target = current_cycle_target(config, 0);
-        let (target_x, target_y) = if config.use_sequence() {
+        let (target_x, target_y) = if config.use_click_points() {
             (target.x, target.y)
         } else {
             get_cursor_pos()
@@ -562,12 +736,13 @@ impl LoopState {
         Self {
             click_count: 0,
             stop_reason: String::from("Stopped"),
-            sequence_index: 0,
-            sequence_clicks_remaining: target.clicks.max(1),
+            stop_reason_finalized: false,
+            click_point_index: 0,
+            click_point_clicks_remaining: target.clicks.max(1),
             target_x,
             target_y,
             next_batch_time: Instant::now(),
-            moved_sequence_index: None,
+            moved_click_point_index: None,
         }
     }
 }
@@ -579,9 +754,7 @@ fn check_abort(config: &ClickerConfig, start_time: Instant) -> Option<String> {
     if config.task_switcher_stop_enabled && process::is_task_switcher_active() {
         return Some(String::from("Blocked by Alt+Tab"));
     }
-    if config.process_list_enabled
-        && process::check_process_list(config) == Some(super::ProcessListBehavior::Stop)
-    {
+    if config.process_list_enabled && process::check_process_list(config).is_some() {
         return Some(String::from("Blocked by process list"));
     }
     if config.time_limit > 0.0 && start_time.elapsed().as_secs_f64() >= config.time_limit {
@@ -590,36 +763,6 @@ fn check_abort(config: &ClickerConfig, start_time: Instant) -> Option<String> {
     None
 }
 
-fn handle_process_list_pause(config: &ClickerConfig, control: &RunControl) -> Option<String> {
-    if !config.process_list_enabled {
-        return None;
-    }
-    if process::check_process_list(config) != Some(super::ProcessListBehavior::Pause) {
-        return None;
-    }
-    let state = control.app.state::<ClickerState>();
-    state.paused.store(true, Ordering::SeqCst);
-    emit_status(&control.app);
-    loop {
-        std::thread::sleep(Duration::from_millis(200));
-        if !state.running.load(Ordering::SeqCst)
-            || state.run_generation.load(Ordering::SeqCst) != control.expected_generation
-        {
-            state.paused.store(false, Ordering::SeqCst);
-            if control.is_active() {
-                emit_status(&control.app);
-            }
-            return Some(String::from("Stopped"));
-        }
-        if process::check_process_list(config).is_none() {
-            break;
-        }
-    }
-    state.paused.store(false, Ordering::SeqCst);
-    emit_status(&control.app);
-    Some(String::from("Blocked by process list"))
-}
-
 fn update_target(
     config: &ClickerConfig,
     ctx: &ClickerContext,
@@ -629,17 +772,25 @@ fn update_target(
     if !ctx.has_position {
         return;
     }
-    let target = current_cycle_target(config, st.sequence_index);
+    let target = current_cycle_target(config, st.click_point_index);
+    let mut jitter_x = 0.0f64;
+    let mut jitter_y = 0.0f64;
+    if config.use_click_points() && target.radius > 0 {
+        let angle = rng.next_f64() * 2.0 * PI;
+        let r = rng.next_f64().sqrt() * target.radius as f64;
+        jitter_x += r * angle.cos();
+        jitter_y += r * angle.sin();
+    }
     if config.offset_chance > 0.0 && rng.next_f64() * 100.0 <= config.offset_chance {
         let angle = rng.next_f64() * 2.0 * PI;
-        let radius = rng.next_f64().sqrt() * config.offset;
-        st.target_x = (target.x as f64 + radius * angle.cos()) as i32;
-        st.target_y = (target.y as f64 + radius * angle.sin()) as i32;
-    } else {
-        st.target_x = target.x;
-        st.target_y = target.y;
+        let r = rng.next_f64().sqrt() * config.offset;
+        jitter_x += r * angle.cos();
+        jitter_y += r * angle.sin();
     }
-    let should_move = st.moved_sequence_index != Some(st.sequence_index) || config.offset > 0.0;
+    st.target_x = (target.x as f64 + jitter_x) as i32;
+    st.target_y = (target.y as f64 + jitter_y) as i32;
+    let should_move =
+        st.moved_click_point_index != Some(st.click_point_index) || config.offset > 0.0;
     if !should_move {
         return;
     }
@@ -660,7 +811,7 @@ fn update_target(
     } else {
         move_mouse(st.target_x, st.target_y);
     }
-    st.moved_sequence_index = Some(st.sequence_index);
+    st.moved_click_point_index = Some(st.click_point_index);
 }
 
 fn run_batch(
@@ -671,8 +822,8 @@ fn run_batch(
     control: &RunControl,
     should_abort: &dyn Fn() -> bool,
 ) -> bool {
-    let requested = if config.use_sequence() {
-        st.sequence_clicks_remaining.min(ctx.batch_size)
+    let requested = if config.use_click_points() {
+        st.click_point_clicks_remaining.min(ctx.batch_size)
     } else {
         ctx.batch_size
     };
@@ -750,16 +901,30 @@ fn run_batch(
         sleep_interruptible(sleep_dur, control);
     }
 
-    if config.use_sequence() {
-        st.sequence_clicks_remaining = st.sequence_clicks_remaining.saturating_sub(batch.cycles);
-        if st.sequence_clicks_remaining == 0 {
-            st.sequence_index = (st.sequence_index + 1) % config.sequence_points.len();
-            st.sequence_clicks_remaining = config.sequence_points[st.sequence_index].clicks.max(1);
+    if config.use_click_points() {
+        st.click_point_clicks_remaining =
+            st.click_point_clicks_remaining.saturating_sub(batch.cycles);
+        if st.click_point_clicks_remaining == 0 {
+            let next_index = (st.click_point_index + 1) % config.click_points.len();
+            if config.stop_when_complete && next_index == 0 {
+                st.stop_reason = String::from("All click points completed");
+                st.stop_reason_finalized = true;
+                let state = control.app.state::<ClickerState>();
+                state
+                    .active_click_point_index
+                    .store(st.click_point_index as i64, Ordering::SeqCst);
+                state.active_click_point_tick.fetch_add(1, Ordering::SeqCst);
+                emit_status(&control.app);
+                return false;
+            }
+            st.click_point_index = next_index;
+            st.click_point_clicks_remaining =
+                config.click_points[st.click_point_index].clicks.max(1);
             let state = control.app.state::<ClickerState>();
             state
-                .active_sequence_index
-                .store(st.sequence_index as i64, Ordering::SeqCst);
-            state.active_sequence_tick.fetch_add(1, Ordering::SeqCst);
+                .active_click_point_index
+                .store(st.click_point_index as i64, Ordering::SeqCst);
+            state.active_click_point_tick.fetch_add(1, Ordering::SeqCst);
             emit_status(&control.app);
         }
     }
@@ -795,35 +960,72 @@ pub fn start_clicker(config: ClickerConfig, control: RunControl) -> RunOutcome {
 
     if ctx.has_position {
         move_mouse(st.target_x, st.target_y);
-        st.moved_sequence_index = Some(0);
+        st.moved_click_point_index = Some(0);
     }
-    if config.use_sequence() {
+    if config.use_click_points() {
         let state = control.app.state::<ClickerState>();
-        state.active_sequence_index.store(0, Ordering::SeqCst);
-        state.active_sequence_tick.fetch_add(1, Ordering::SeqCst);
+        state.active_click_point_index.store(0, Ordering::SeqCst);
+        state.active_click_point_tick.fetch_add(1, Ordering::SeqCst);
         emit_status(&control.app);
     }
 
     let should_abort = || check_abort(&config, start_time).is_some();
+    let clicker_state = control.app.state::<ClickerState>();
 
     while control.is_active() {
-        if let Some(reason) = check_abort(&config, start_time) {
-            st.stop_reason = reason;
+        if config.limit > 0 && st.click_count >= config.limit as i64 {
+            st.stop_reason = format!("Click limit reached ({})", config.limit);
+            break;
+        }
+
+        let zone_hit = if config.stop_zones_enabled && !config.stop_zones.is_empty() {
+            current_cursor_position().and_then(|cursor| detect_stop_zones(cursor, &config))
+        } else {
+            None
+        };
+
+        if let Some((crate::engine::ZoneAction::Stop, _)) = zone_hit {
+            st.stop_reason = String::from("Custom stop zone failsafe");
             break;
         }
-        if let Some(reason) = handle_process_list_pause(&config, &control) {
+
+        if let Some(reason) = should_stop_for_failsafe(&config) {
             st.stop_reason = reason;
             break;
         }
-        if config.limit > 0 && st.click_count >= config.limit as i64 {
-            st.stop_reason = format!("Click limit reached ({})", config.limit);
+        if config.task_switcher_stop_enabled && process::is_task_switcher_active() {
+            st.stop_reason = String::from("Blocked by Alt+Tab");
             break;
         }
+        if config.process_list_enabled && process::check_process_list(&config).is_some() {
+            st.stop_reason = String::from("Blocked by process list");
+            break;
+        }
+        if config.time_limit > 0.0 && start_time.elapsed().as_secs_f64() >= config.time_limit {
+            st.stop_reason = format!("Time limit reached ({:.1}s)", config.time_limit);
+            break;
+        }
+
+        match zone_hit {
+            Some((crate::engine::ZoneAction::Pause, _)) => {
+                clicker_state.paused_by_zone.store(true, Ordering::SeqCst);
+            }
+            _ => {
+                clicker_state.paused_by_zone.store(false, Ordering::SeqCst);
+            }
+        }
+
+        if clicker_state.paused.load(Ordering::SeqCst)
+            || clicker_state.paused_by_zone.load(Ordering::SeqCst)
+        {
+            std::thread::sleep(std::time::Duration::from_millis(10));
+            continue;
+        }
 
         update_target(&config, &ctx, &mut rng, &mut st);
 
         if !run_batch(&config, &ctx, &mut rng, &mut st, &control, &should_abort) {
-            if control.is_active() {
+            if control.is_active() && !st.stop_reason_finalized {
                 st.stop_reason = format!("Click limit reached ({})", config.limit);
             }
             break;
@@ -872,13 +1074,14 @@ mod tests {
             button: 1,
             double_click_enabled: false,
             double_click_gap_ms: 450,
-            sequence_enabled: false,
-            sequence_points: Vec::new(),
+            click_points_enabled: false,
+            stop_zones_enabled: false,
+            stop_when_complete: false,
+            click_points: Vec::new(),
             offset: 0.0,
             offset_chance: 0.0,
             smoothing: 0,
-            custom_stop_zone_enabled: false,
-            custom_stop_zone: VirtualScreenRect::new(0, 0, 100, 100),
+            stop_zones: Vec::new(),
             corner_stop_enabled: true,
             corner_stop_tl: 50,
             corner_stop_tr: 50,
@@ -889,7 +1092,7 @@ mod tests {
             edge_stop_right: 40,
             edge_stop_bottom: 40,
             edge_stop_left: 40,
-            input_type: 0,
+            input_type: crate::engine::InputType::Mouse,
             key_code: 0,
             keyboard_uppercase: false,
             process_list_enabled: false,
@@ -955,44 +1158,49 @@ mod tests {
     }
 
     #[test]
-    fn sequence_point_rotation_is_round_robin() {
+    fn click_point_rotation_is_round_robin() {
         let mut config = sample_config();
-        config.sequence_enabled = true;
-        config.sequence_points = vec![
-            SequenceTarget {
+        config.click_points_enabled = true;
+        config.click_points = vec![
+            ClickPointTarget {
                 x: 10,
                 y: 10,
                 clicks: 1,
+                radius: 0,
             },
-            SequenceTarget {
+            ClickPointTarget {
                 x: 20,
                 y: 20,
                 clicks: 1,
+                radius: 0,
             },
         ];
 
         assert_eq!(
             current_cycle_target(&config, 0),
-            SequenceTarget {
+            ClickPointTarget {
                 x: 10,
                 y: 10,
-                clicks: 1
+                clicks: 1,
+                radius: 0
             }
         );
         assert_eq!(
             current_cycle_target(&config, 1),
-            SequenceTarget {
+            ClickPointTarget {
                 x: 20,
                 y: 20,
-                clicks: 1
+                clicks: 1,
+                radius: 0
             }
         );
         assert_eq!(
             current_cycle_target(&config, 2),
-            SequenceTarget {
+            ClickPointTarget {
                 x: 10,
                 y: 10,
-                clicks: 1
+                clicks: 1,
+                radius: 0
             }
         );
     }
diff --git a/src-tauri/src/hotkeys.rs b/src-tauri/src/hotkeys.rs
index 7c71f853..687876b1 100644
--- a/src-tauri/src/hotkeys.rs
+++ b/src-tauri/src/hotkeys.rs
@@ -277,6 +277,13 @@ unsafe extern "system" fn keyboard_ll_proc(n_code: i32, w_param: usize, l_param:
 
 pub fn start_hotkey_listener(app: AppHandle) {
     std::thread::spawn(move || unsafe {
+        // Delay hook installation to let WebView2/windows fully initialise.
+        // Installing WH_KEYBOARD_LL too early can cause Windows to generate
+        // spurious Alt-menu events in other applications. Hotkey detection
+        // falls back to GetAsyncKeyState via the HOOKS_ACTIVE check below
+        // during this window.
+        std::thread::sleep(Duration::from_secs(2));
+
         let mouse_hook =
             SetWindowsHookExW(WH_MOUSE_LL, Some(mouse_ll_proc), std::ptr::null_mut(), 0);
         let kb_hook = SetWindowsHookExW(
@@ -339,11 +346,12 @@ pub fn start_hotkey_listener(app: AppHandle) {
                 let suppress_until_release =
                     state.suppress_hotkey_until_release.load(Ordering::SeqCst);
                 let hotkey_capture_active = state.hotkey_capture_active.load(Ordering::SeqCst);
-                let sequence_pick_active = state.sequence_pick_active.load(Ordering::SeqCst);
+                let click_point_pick_active = state.click_point_pick_active.load(Ordering::SeqCst);
                 let custom_stop_zone_pick_active =
                     state.custom_stop_zone_pick_active.load(Ordering::SeqCst);
 
-                if hotkey_capture_active || sequence_pick_active || custom_stop_zone_pick_active {
+                if hotkey_capture_active || click_point_pick_active || custom_stop_zone_pick_active
+                {
                     if currently_pressed && !was_pressed && hotkey_capture_active {
                         let needs_emit = {
                             let mut warning = state.warning.lock().unwrap_or_else(poisoned_inner);
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 8d77e2ab..6b67e69d 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -6,17 +6,17 @@ pub use settings::ClickerSettings;
 mod app_events;
 mod app_state;
 mod autostart;
+mod click_point_picker;
 mod custom_stop_zone_picker;
 mod engine;
 mod hotkeys;
 mod overlay;
-mod sequence_picker;
 mod ui_commands;
 mod updates;
 mod window_lifecycle;
 
-pub use crate::app_state::ClickerState;
 pub use crate::app_state::ClickerStatusPayload;
+pub use crate::app_state::{ClickerState, IconState};
 use crate::engine::worker::emit_status;
 use crate::error::poisoned_inner;
 use crate::hotkeys::register_hotkey_inner;
@@ -25,10 +25,35 @@ use std::sync::atomic::{AtomicBool, AtomicI64, AtomicU64};
 use std::sync::{Arc, Mutex};
 use tauri::menu::{Menu, MenuItem};
 use tauri::tray::{MouseButton, MouseButtonState, TrayIconBuilder, TrayIconEvent};
-use tauri::{AppHandle, Listener, Manager};
+use tauri::{AppHandle, Emitter, Listener, Manager};
+
+pub static ZONE_MONITOR_RUNNING: AtomicBool = AtomicBool::new(false);
 
 const STATUS_EVENT: &str = "clicker-status";
 
+#[cfg(target_os = "windows")]
+fn apply_ws_ex_noactivate(window: &tauri::WebviewWindow, enable: bool) {
+    use raw_window_handle::{HasWindowHandle, RawWindowHandle};
+    use windows_sys::Win32::UI::WindowsAndMessaging::{
+        GetWindowLongW, SetWindowLongW, GWL_EXSTYLE,
+    };
+
+    if let Ok(handle) = window.window_handle() {
+        if let RawWindowHandle::Win32(w) = handle.as_raw() {
+            let hwnd = w.hwnd.get() as *mut std::ffi::c_void;
+            unsafe {
+                let ex = GetWindowLongW(hwnd, GWL_EXSTYLE);
+                let new_ex = if enable {
+                    (ex as u32 | 0x08000000) as i32
+                } else {
+                    (ex as u32 & !0x08000000) as i32
+                };
+                SetWindowLongW(hwnd, GWL_EXSTYLE, new_ex);
+            }
+        }
+    }
+}
+
 fn is_rtss_running() -> bool {
     crate::engine::process::is_process_running("RTSS.exe")
 }
@@ -96,7 +121,7 @@ fn setup_logging(app: &AppHandle) {
             .level(log_level)
             .level_for("tao", log::LevelFilter::Warn)
             .max_file_size(2_500_000)
-            .rotation_strategy(RotationStrategy::KeepSome(0))
+            .rotation_strategy(RotationStrategy::KeepSome(1))
             .timezone_strategy(TimezoneStrategy::UseLocal)
             .build(),
     );
@@ -107,7 +132,7 @@ fn setup_tray(app: &AppHandle) -> Result<(), tauri::Error> {
     let quit_item = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
     let menu = Menu::with_items(app, &[&show_item, &quit_item])?;
 
-    TrayIconBuilder::new()
+    TrayIconBuilder::with_id("main")
         .icon(app.default_window_icon().unwrap().clone())
         .menu(&menu)
         .tooltip("BlurAutoClicker")
@@ -115,7 +140,10 @@ fn setup_tray(app: &AppHandle) -> Result<(), tauri::Error> {
             "show" => {
                 crate::window_lifecycle::on_show(app);
                 if let Some(window) = app.get_webview_window("main") {
+                    #[cfg(target_os = "windows")]
+                    apply_ws_ex_noactivate(&window, false);
                     let _ = window.show();
+                    crate::engine::worker::set_app_icons(app);
                     let _ = window.set_focus();
                 }
             }
@@ -124,7 +152,7 @@ fn setup_tray(app: &AppHandle) -> Result<(), tauri::Error> {
                     .store(true, std::sync::atomic::Ordering::SeqCst);
                 crate::overlay::OVERLAY_THREAD_RUNNING
                     .store(false, std::sync::atomic::Ordering::SeqCst);
-                crate::sequence_picker::cancel_sequence_point_pick_inner(app);
+                crate::click_point_picker::cancel_click_point_pick_inner(app);
                 crate::custom_stop_zone_picker::cancel_custom_stop_zone_pick_inner(app);
                 app.exit(0);
             }
@@ -140,7 +168,10 @@ fn setup_tray(app: &AppHandle) -> Result<(), tauri::Error> {
                 let app = tray.app_handle();
                 crate::window_lifecycle::on_show(app);
                 if let Some(window) = app.get_webview_window("main") {
+                    #[cfg(target_os = "windows")]
+                    apply_ws_ex_noactivate(&window, false);
                     let _ = window.show();
+                    crate::engine::worker::set_app_icons(app);
                     let _ = window.set_focus();
                 }
             }
@@ -160,6 +191,83 @@ fn spawn_overlay_auto_hide(app: &AppHandle) {
     });
 }
 
+fn spawn_start_zone_monitor(app: &AppHandle) {
+    let handle = app.clone();
+    ZONE_MONITOR_RUNNING.store(true, std::sync::atomic::Ordering::SeqCst);
+    std::thread::spawn(move || {
+        let mut prev_in_start_zone = false;
+        let mut prev_has_start_zones = false;
+        while ZONE_MONITOR_RUNNING.load(std::sync::atomic::Ordering::SeqCst) {
+            std::thread::sleep(std::time::Duration::from_millis(100));
+
+            let state = handle.state::<ClickerState>();
+
+            let (has_start_zones, zones) = {
+                let settings = state.settings.lock().unwrap_or_else(poisoned_inner);
+                let has = settings.stop_zones_enabled
+                    && settings.stop_zones.iter().any(|z| z.action == "start");
+                (has, settings.stop_zones.clone())
+            };
+
+            if !has_start_zones {
+                prev_in_start_zone = false;
+                prev_has_start_zones = false;
+                continue;
+            }
+
+            let cursor = match crate::engine::mouse::current_cursor_position() {
+                Some(c) => c,
+                None => continue,
+            };
+
+            let in_start_zone = zones.iter().any(|z| {
+                z.action == "start"
+                    && cursor.0 >= z.x
+                    && cursor.0 < z.x + z.width
+                    && cursor.1 >= z.y
+                    && cursor.1 < z.y + z.height
+            });
+
+            if !prev_has_start_zones {
+                prev_in_start_zone = in_start_zone;
+            }
+            prev_has_start_zones = true;
+
+            let running = state.running.load(std::sync::atomic::Ordering::SeqCst);
+            let zone_started = state
+                .zone_started_clicker
+                .load(std::sync::atomic::Ordering::SeqCst);
+
+            // Transition: outside → inside, start clicker if off
+            if in_start_zone && !prev_in_start_zone && !running {
+                if let Err(e) = crate::engine::worker::start_clicker_inner(&handle) {
+                    log::error!("[ZoneMonitor] start failed: {e}");
+                } else {
+                    state
+                        .zone_started_clicker
+                        .store(true, std::sync::atomic::Ordering::SeqCst);
+                }
+            }
+            // Transition: inside → outside, stop clicker if we started it
+            else if !in_start_zone && prev_in_start_zone && zone_started {
+                if running {
+                    if let Err(e) = crate::engine::worker::stop_clicker_inner(
+                        &handle,
+                        Some(String::from("Left start zone")),
+                    ) {
+                        log::error!("[ZoneMonitor] stop failed: {e}");
+                    }
+                }
+                state
+                    .zone_started_clicker
+                    .store(false, std::sync::atomic::Ordering::SeqCst);
+            }
+
+            prev_in_start_zone = in_start_zone;
+        }
+    });
+}
+
 fn setup_hotkeys(app: &AppHandle) -> Result<(), std::io::Error> {
     let initial_hotkey = {
         let state = app.state::<ClickerState>();
@@ -185,6 +293,11 @@ fn setup_frontend_listener(app: &AppHandle) {
         if let Err(e) = overlay::init_overlay(&overlay_init_handle) {
             log::error!("[Window] Overlay init failed: {e}");
         }
+        #[cfg(target_os = "windows")]
+        if let Some(window) = overlay_init_handle.get_webview_window("main") {
+            apply_ws_ex_noactivate(&window, false);
+            log::info!("[Window] Cleared WS_EX_NOACTIVATE on main window");
+        }
     });
 }
 
@@ -203,17 +316,28 @@ fn create_clicker_state() -> ClickerState {
         settings: Mutex::new(ClickerSettings::default()),
         last_error: Mutex::new(None),
         stop_reason: Mutex::new(None),
-        active_sequence_index: AtomicI64::new(-1),
-        active_sequence_tick: AtomicU64::new(0),
+        active_click_point_index: AtomicI64::new(-1),
+        active_click_point_tick: AtomicU64::new(0),
         registered_hotkey: Mutex::new(None),
         suppress_hotkey_until_ms: AtomicU64::new(0),
         suppress_hotkey_until_release: AtomicBool::new(false),
         hotkey_capture_active: AtomicBool::new(false),
-        sequence_pick_active: AtomicBool::new(false),
+        click_point_pick_active: AtomicBool::new(false),
         custom_stop_zone_pick_active: AtomicBool::new(false),
         settings_initialized: AtomicBool::new(false),
         paused: Arc::new(AtomicBool::new(false)),
+        paused_by_zone: AtomicBool::new(false),
+        zone_started_clicker: AtomicBool::new(false),
         warning: Mutex::new(None),
+        icon_state: Mutex::new(IconState {
+            accent_color: String::from("#22c55e"),
+            theme: String::from("dark"),
+            icon_enabled: true,
+            icon_theme: String::from("auto"),
+            icon_color: String::from("theme"),
+            active_icon_dark: None,
+            active_icon_light: None,
+        }),
     }
 }
 
@@ -238,6 +362,13 @@ pub fn run() {
         .setup(move |app| {
             let handle = app.handle().clone();
             setup_logging(&handle);
+
+            #[cfg(target_os = "windows")]
+            if let Some(window) = app.get_webview_window("main") {
+                apply_ws_ex_noactivate(&window, true);
+                log::info!("[Window] Applied WS_EX_NOACTIVATE to main window");
+            }
+
             if rtss_detected {
                 log::warn!(
                     "[RTSS] RivaTuner Statistics Server detected. \
@@ -249,7 +380,11 @@ pub fn run() {
                 log::warn!("[Crashpad] Failed to initialize: {e}");
             }
             setup_tray(&handle)?;
+            crate::engine::worker::set_icon_theme_inner(
+                &handle, "#22c55e", "dark", true, "auto", "theme",
+            );
             spawn_overlay_auto_hide(&handle);
+            spawn_start_zone_monitor(&handle);
             window_lifecycle::start_periodic_trimming(30);
             setup_hotkeys(&handle)?;
             setup_frontend_listener(&handle);
@@ -269,8 +404,8 @@ pub fn run() {
             ui_commands::register_hotkey,
             ui_commands::set_hotkey_capture_active,
             ui_commands::pick_position,
-            ui_commands::start_sequence_point_pick,
-            ui_commands::cancel_sequence_point_pick,
+            ui_commands::start_click_point_pick,
+            ui_commands::cancel_click_point_pick,
             ui_commands::start_custom_stop_zone_pick,
             ui_commands::cancel_custom_stop_zone_pick,
             ui_commands::get_app_info,
@@ -287,27 +422,33 @@ pub fn run() {
             ui_commands::get_diagnostics_info,
             ui_commands::open_diagnostics_folder,
             ui_commands::export_diagnostics_bundle,
+            ui_commands::set_accent_color,
             ui_commands::debug_trigger_panic,
             ui_commands::debug_trigger_crash,
         ])
         .build(tauri::generate_context!())
         .expect("error while building tauri application")
         .run(|app_handle, event| {
-            if let tauri::RunEvent::WindowEvent {
-                event: tauri::WindowEvent::CloseRequested { api, .. },
-                label,
-                ..
-            } = &event
-            {
-                if label == "main" {
-                    api.prevent_close();
-                    crate::app_events::APP_EVENTS_SHUTDOWN
-                        .store(true, std::sync::atomic::Ordering::SeqCst);
-                    crate::overlay::OVERLAY_THREAD_RUNNING
-                        .store(false, std::sync::atomic::Ordering::SeqCst);
-                    crate::sequence_picker::cancel_sequence_point_pick_inner(app_handle);
-                    crate::custom_stop_zone_picker::cancel_custom_stop_zone_pick_inner(app_handle);
-                    app_handle.exit(0);
+            if let tauri::RunEvent::WindowEvent { event, label, .. } = &event {
+                match event {
+                    tauri::WindowEvent::CloseRequested { api, .. } if label == "main" => {
+                        api.prevent_close();
+                        crate::app_events::APP_EVENTS_SHUTDOWN
+                            .store(true, std::sync::atomic::Ordering::SeqCst);
+                        crate::overlay::OVERLAY_THREAD_RUNNING
+                            .store(false, std::sync::atomic::Ordering::SeqCst);
+                        ZONE_MONITOR_RUNNING.store(false, std::sync::atomic::Ordering::SeqCst);
+                        crate::click_point_picker::cancel_click_point_pick_inner(app_handle);
+                        crate::custom_stop_zone_picker::cancel_custom_stop_zone_pick_inner(
+                            app_handle,
+                        );
+                        app_handle.exit(0);
+                    }
+                    tauri::WindowEvent::Resized(size) if label == "main" => {
+                        let minimized = size.width == 0 || size.height == 0;
+                        let _ = app_handle.emit("minimized-changed", minimized);
+                    }
+                    _ => {}
                 }
             }
         });
diff --git a/src-tauri/src/overlay.rs b/src-tauri/src/overlay.rs
index 0a343374..aca72af4 100644
--- a/src-tauri/src/overlay.rs
+++ b/src-tauri/src/overlay.rs
@@ -11,7 +11,7 @@ use std::time::{Duration, Instant};
 use tauri::{AppHandle, Emitter, Manager};
 
 static LAST_ZONE_SHOW: Mutex<Option<Instant>> = Mutex::new(None);
-static SEQUENCE_PICK_OVERLAY_ACTIVE: AtomicBool = AtomicBool::new(false);
+static CLICK_POINT_PICK_OVERLAY_ACTIVE: AtomicBool = AtomicBool::new(false);
 static CUSTOM_STOP_ZONE_PICK_OVERLAY_ACTIVE: AtomicBool = AtomicBool::new(false);
 pub static OVERLAY_THREAD_RUNNING: AtomicBool = AtomicBool::new(true);
 
@@ -45,7 +45,6 @@ pub fn init_overlay(app: &AppHandle) -> AppResult<()> {
                 tauri::WebviewUrl::App("overlay.html".into()),
             )
             .title("Overlay")
-            .fullscreen(true)
             .transparent(true)
             .decorations(false)
             .always_on_top(true)
@@ -104,13 +103,23 @@ pub fn show_overlay(app: &AppHandle) -> AppResult<()> {
 
     let settings = state.settings.lock().unwrap_or_else(poisoned_inner);
     let monitors = current_monitor_rects().unwrap_or_else(|| vec![bounds]);
-    let custom_stop_zone = VirtualScreenRect::new(
-        settings.custom_stop_zone_x,
-        settings.custom_stop_zone_y,
-        settings.custom_stop_zone_width.max(1),
-        settings.custom_stop_zone_height.max(1),
-    )
-    .offset_from(bounds);
+    let stop_zones_payload: Vec<_> = settings
+        .stop_zones
+        .iter()
+        .map(|zone| {
+            let offset =
+                VirtualScreenRect::new(zone.x, zone.y, zone.width.max(1), zone.height.max(1))
+                    .offset_from(bounds);
+            serde_json::json!({
+                "id": zone.id,
+                "x": offset.left,
+                "y": offset.top,
+                "width": offset.width,
+                "height": offset.height,
+                "action": zone.action,
+            })
+        })
+        .collect();
     let monitor_payload: Vec<_> = monitors
         .into_iter()
         .map(|monitor| {
@@ -136,13 +145,8 @@ pub fn show_overlay(app: &AppHandle) -> AppResult<()> {
             "cornerStopTR": settings.corner_stop_tr,
             "cornerStopBL": settings.corner_stop_bl,
             "cornerStopBR": settings.corner_stop_br,
-            "customStopZoneEnabled": settings.custom_stop_zone_enabled,
-            "customStopZone": {
-                "x": custom_stop_zone.left,
-                "y": custom_stop_zone.top,
-                "width": custom_stop_zone.width,
-                "height": custom_stop_zone.height,
-            },
+            "stopZones": stop_zones_payload,
+            "stopZonesEnabled": settings.stop_zones_enabled,
             "screenWidth": bounds.width,
             "screenHeight": bounds.height,
             "monitors": monitor_payload,
@@ -154,7 +158,7 @@ pub fn show_overlay(app: &AppHandle) -> AppResult<()> {
     Ok(())
 }
 
-pub fn show_sequence_points_overlay(app: &AppHandle) -> AppResult<()> {
+pub fn show_click_points_overlay(app: &AppHandle) -> AppResult<()> {
     let state = app.state::<ClickerState>();
     if !state.settings_initialized.load(Ordering::SeqCst) {
         return Ok(());
@@ -167,7 +171,7 @@ pub fn show_sequence_points_overlay(app: &AppHandle) -> AppResult<()> {
         .ok_or_else(|| AppError::State("Virtual screen bounds not available".into()))?;
     let points = {
         let settings = state.settings.lock().unwrap_or_else(poisoned_inner);
-        settings.sequence_points.clone()
+        settings.click_points.clone()
     };
 
     #[cfg(target_os = "windows")]
@@ -178,8 +182,8 @@ pub fn show_sequence_points_overlay(app: &AppHandle) -> AppResult<()> {
         }
     }
 
-    emit_sequence_points(&window, bounds, &points, false);
-    if points.is_empty() && !SEQUENCE_PICK_OVERLAY_ACTIVE.load(Ordering::SeqCst) {
+    emit_click_points(&window, bounds, &points, false);
+    if points.is_empty() && !CLICK_POINT_PICK_OVERLAY_ACTIVE.load(Ordering::SeqCst) {
         *LAST_ZONE_SHOW.lock().unwrap_or_else(poisoned_inner) = None;
         hide_overlay_window(&window);
     } else {
@@ -188,7 +192,7 @@ pub fn show_sequence_points_overlay(app: &AppHandle) -> AppResult<()> {
     Ok(())
 }
 
-pub fn show_sequence_pick_overlay(app: &AppHandle) -> AppResult<()> {
+pub fn show_click_point_pick_overlay(app: &AppHandle) -> AppResult<()> {
     let window = app
         .get_webview_window("overlay")
         .ok_or_else(|| AppError::OverlayNotFound)?;
@@ -201,17 +205,17 @@ pub fn show_sequence_pick_overlay(app: &AppHandle) -> AppResult<()> {
         show_overlay_window(&window)?;
     }
 
-    SEQUENCE_PICK_OVERLAY_ACTIVE.store(true, Ordering::SeqCst);
+    CLICK_POINT_PICK_OVERLAY_ACTIVE.store(true, Ordering::SeqCst);
 
     let state = app.state::<ClickerState>();
     let settings = state.settings.lock().unwrap_or_else(poisoned_inner);
-    emit_sequence_points(&window, bounds, &settings.sequence_points, true);
-    set_sequence_pick_mode(app, true)?;
+    emit_click_points(&window, bounds, &settings.click_points, true);
+    set_click_point_pick_mode(app, true)?;
 
     if let Some((x, y)) = current_cursor_position() {
         let offset = VirtualScreenRect::new(x, y, 1, 1).offset_from(bounds);
         let _ = window.emit(
-            "sequence-pick-cursor",
+            "click-pick-cursor",
             serde_json::json!({
                 "x": offset.left,
                 "y": offset.top,
@@ -222,11 +226,11 @@ pub fn show_sequence_pick_overlay(app: &AppHandle) -> AppResult<()> {
     Ok(())
 }
 
-pub fn set_sequence_pick_mode(app: &AppHandle, active: bool) -> AppResult<()> {
-    SEQUENCE_PICK_OVERLAY_ACTIVE.store(active, Ordering::SeqCst);
+pub fn set_click_point_pick_mode(app: &AppHandle, active: bool) -> AppResult<()> {
+    CLICK_POINT_PICK_OVERLAY_ACTIVE.store(active, Ordering::SeqCst);
     if let Some(window) = app.get_webview_window("overlay") {
         let _ = window.emit(
-            "sequence-pick-mode",
+            "click-pick-mode",
             serde_json::json!({
                 "active": active,
             }),
@@ -288,18 +292,10 @@ pub fn hide_custom_stop_zone_pick_overlay(app: &AppHandle) -> AppResult<()> {
     Ok(())
 }
 
-pub fn end_custom_stop_zone_pick_overlay(app: &AppHandle) -> AppResult<()> {
-    set_custom_stop_zone_pick_mode(app, false)?;
-    if let Some(window) = app.get_webview_window("overlay") {
-        let _ = window.emit("custom-stop-zone-clear-preview", ());
-    }
-    Ok(())
-}
-
-fn emit_sequence_points(
+fn emit_click_points(
     window: &tauri::WebviewWindow,
     bounds: VirtualScreenRect,
-    points: &[crate::settings::SequencePoint],
+    points: &[crate::settings::ClickPoint],
     persistent: bool,
 ) {
     let points_payload: Vec<_> = points
@@ -310,12 +306,13 @@ fn emit_sequence_points(
                 "id": point.id,
                 "x": offset.left,
                 "y": offset.top,
+                "radius": point.radius,
             })
         })
         .collect();
 
     let _ = window.emit(
-        "sequence-points-data",
+        "click-points-data",
         serde_json::json!({
             "points": points_payload,
             "screenWidth": bounds.width,
@@ -328,7 +325,7 @@ fn emit_sequence_points(
 // ---- Background timer ----
 
 pub fn check_auto_hide(app: &AppHandle) {
-    if SEQUENCE_PICK_OVERLAY_ACTIVE.load(Ordering::SeqCst)
+    if CLICK_POINT_PICK_OVERLAY_ACTIVE.load(Ordering::SeqCst)
         || CUSTOM_STOP_ZONE_PICK_OVERLAY_ACTIVE.load(Ordering::SeqCst)
     {
         return;
@@ -351,7 +348,7 @@ pub fn check_auto_hide(app: &AppHandle) {
 #[tauri::command]
 pub fn hide_overlay(app: AppHandle) -> AppResult<()> {
     *LAST_ZONE_SHOW.lock().unwrap_or_else(poisoned_inner) = None;
-    SEQUENCE_PICK_OVERLAY_ACTIVE.store(false, Ordering::SeqCst);
+    CLICK_POINT_PICK_OVERLAY_ACTIVE.store(false, Ordering::SeqCst);
     CUSTOM_STOP_ZONE_PICK_OVERLAY_ACTIVE.store(false, Ordering::SeqCst);
     if let Some(window) = app.get_webview_window("overlay") {
         hide_overlay_window(&window);
@@ -443,7 +440,7 @@ fn sync_overlay_bounds(window: &tauri::WebviewWindow) -> AppResult<VirtualScreen
 fn show_overlay_window(window: &tauri::WebviewWindow) -> AppResult<()> {
     let _ = window.eval(
         "document.getElementById('zone-layer').innerHTML = ''; \
-         document.getElementById('sequence-layer').innerHTML = '';",
+         document.getElementById('click-points-layer').innerHTML = '';",
     );
 
     let hwnd = get_hwnd(window)?;
diff --git a/src-tauri/src/settings/mod.rs b/src-tauri/src/settings/mod.rs
index 3f7efde8..bdce3d01 100644
--- a/src-tauri/src/settings/mod.rs
+++ b/src-tauri/src/settings/mod.rs
@@ -4,16 +4,18 @@
 
 #[derive(Clone, serde::Deserialize, serde::Serialize, Debug, PartialEq, Eq)]
 #[serde(rename_all = "camelCase")]
-pub struct SequencePoint {
+pub struct ClickPoint {
     #[serde(default)]
     pub id: String,
     pub x: i32,
     pub y: i32,
-    #[serde(default = "default_sequence_point_clicks")]
+    #[serde(default = "default_click_point_clicks")]
     pub clicks: u32,
+    #[serde(default)]
+    pub radius: u32,
 }
 
-fn default_sequence_point_clicks() -> u32 {
+fn default_click_point_clicks() -> u32 {
     1
 }
 
@@ -27,6 +29,23 @@ fn default_true() -> bool {
 
 use crate::engine::ProcessListEntry;
 
+#[derive(Clone, PartialEq, Eq, serde::Deserialize, serde::Serialize, Debug)]
+#[serde(rename_all = "camelCase")]
+pub struct StopZoneConfig {
+    #[serde(default)]
+    pub id: String,
+    pub x: i32,
+    pub y: i32,
+    pub width: i32,
+    pub height: i32,
+    #[serde(default = "default_stop_zone_action")]
+    pub action: String,
+}
+
+fn default_stop_zone_action() -> String {
+    "stop".to_string()
+}
+
 #[derive(Clone, serde::Deserialize, serde::Serialize, Debug)]
 #[serde(rename_all = "camelCase")]
 pub struct ClickerSettings {
@@ -43,11 +62,15 @@ pub struct ClickerSettings {
     pub mouse_button: String,
     pub mode: String,
 
+    pub duty_cycle_mode: String,
+    pub saved_click_speed: f64,
+    pub saved_click_interval: String,
+
     pub duty_cycle_enabled: bool,
     pub duty_cycle: f64,
 
-    pub speed_variation_enabled: bool,
-    pub speed_variation: f64,
+    pub speed_randomization_enabled: bool,
+    pub speed_randomization: f64,
 
     pub double_click_enabled: bool,
 
@@ -74,8 +97,12 @@ pub struct ClickerSettings {
     pub edge_stop_bottom: i32,
     pub edge_stop_left: i32,
 
-    pub sequence_enabled: bool,
-    pub sequence_points: Vec<SequencePoint>,
+    pub click_points_enabled: bool,
+    #[serde(rename = "stopZonesEnabled")]
+    pub stop_zones_enabled: bool,
+    #[serde(default)]
+    pub stop_when_complete: bool,
+    pub click_points: Vec<ClickPoint>,
 
     pub process_list_enabled: bool,
     pub process_list_mode: String,
@@ -91,11 +118,8 @@ pub struct ClickerSettings {
     pub duration_seconds: u32,
     pub duration_milliseconds: u32,
 
-    pub custom_stop_zone_enabled: bool,
-    pub custom_stop_zone_x: i32,
-    pub custom_stop_zone_y: i32,
-    pub custom_stop_zone_width: i32,
-    pub custom_stop_zone_height: i32,
+    #[serde(default)]
+    pub stop_zones: Vec<StopZoneConfig>,
 
     pub disable_screenshots: bool,
     pub advanced_settings_enabled: bool,
@@ -106,8 +130,8 @@ pub struct ClickerSettings {
 }
 
 // Frontend-only settings intentionally omitted from Rust:
-// language, minimizeToTray, theme, advancedSequenceLayout, alwaysOnTop,
-// accentColor, presets, activePresetId.
+// language, minimizeToTray, theme, alwaysOnTop, accentColor, presets,
+// activePresetId.
 
 impl Default for ClickerSettings {
     fn default() -> Self {
@@ -124,11 +148,15 @@ impl Default for ClickerSettings {
             mouse_button: "Left".to_string(),
             mode: "Toggle".to_string(),
 
+            duty_cycle_mode: "Click".to_string(),
+            saved_click_speed: 25.0,
+            saved_click_interval: "s".to_string(),
+
             duty_cycle_enabled: true,
             duty_cycle: 45.0,
 
-            speed_variation_enabled: true,
-            speed_variation: 35.0,
+            speed_randomization_enabled: true,
+            speed_randomization: 35.0,
 
             double_click_enabled: false,
 
@@ -151,8 +179,10 @@ impl Default for ClickerSettings {
             edge_stop_bottom: 40,
             edge_stop_left: 40,
 
-            sequence_enabled: false,
-            sequence_points: Vec::new(),
+            click_points_enabled: false,
+            stop_zones_enabled: false,
+            stop_when_complete: false,
+            click_points: Vec::new(),
 
             process_list_enabled: false,
             process_list_mode: "whitelist".to_string(),
@@ -167,11 +197,7 @@ impl Default for ClickerSettings {
             duration_seconds: 0,
             duration_milliseconds: 40,
 
-            custom_stop_zone_enabled: false,
-            custom_stop_zone_x: 0,
-            custom_stop_zone_y: 0,
-            custom_stop_zone_width: 100,
-            custom_stop_zone_height: 100,
+            stop_zones: Vec::new(),
 
             disable_screenshots: false,
             advanced_settings_enabled: true,
diff --git a/src-tauri/src/ui_commands.rs b/src-tauri/src/ui_commands.rs
index b8b89028..72257c44 100644
--- a/src-tauri/src/ui_commands.rs
+++ b/src-tauri/src/ui_commands.rs
@@ -71,7 +71,7 @@ pub fn update_settings(app: AppHandle, settings: ClickerSettings) -> AppResult<C
     let state = app.state::<ClickerState>();
     let was_initialized = state.settings_initialized.load(Ordering::SeqCst);
     let zone_changed: bool;
-    let sequence_changed: bool;
+    let click_points_changed: bool;
     {
         let mut old = state.settings.lock().unwrap_or_else(poisoned_inner);
         zone_changed = old.edge_stop_enabled != settings.edge_stop_enabled
@@ -84,13 +84,10 @@ pub fn update_settings(app: AppHandle, settings: ClickerSettings) -> AppResult<C
             || old.corner_stop_tr != settings.corner_stop_tr
             || old.corner_stop_bl != settings.corner_stop_bl
             || old.corner_stop_br != settings.corner_stop_br
-            || old.custom_stop_zone_enabled != settings.custom_stop_zone_enabled
-            || old.custom_stop_zone_x != settings.custom_stop_zone_x
-            || old.custom_stop_zone_y != settings.custom_stop_zone_y
-            || old.custom_stop_zone_width != settings.custom_stop_zone_width
-            || old.custom_stop_zone_height != settings.custom_stop_zone_height;
-        sequence_changed = old.sequence_enabled != settings.sequence_enabled
-            || old.sequence_points != settings.sequence_points;
+            || old.stop_zones_enabled != settings.stop_zones_enabled
+            || old.stop_zones != settings.stop_zones;
+        click_points_changed = old.click_points_enabled != settings.click_points_enabled
+            || old.click_points != settings.click_points;
         *old = settings.clone();
     }
     *state.warning.lock().unwrap_or_else(poisoned_inner) = None;
@@ -104,8 +101,8 @@ pub fn update_settings(app: AppHandle, settings: ClickerSettings) -> AppResult<C
     if zone_changed {
         let _ = crate::overlay::show_overlay(&app);
     }
-    if sequence_changed && settings.sequence_enabled {
-        let _ = crate::overlay::show_sequence_points_overlay(&app);
+    if click_points_changed && settings.click_points_enabled {
+        let _ = crate::overlay::show_click_points_overlay(&app);
     }
 
     Ok(settings)
@@ -168,13 +165,13 @@ pub fn pick_position() -> AppResult<PositionPayload> {
 }
 
 #[tauri::command]
-pub fn start_sequence_point_pick(app: AppHandle) -> AppResult<()> {
-    crate::sequence_picker::start_sequence_point_pick_inner(app)
+pub fn start_click_point_pick(app: AppHandle) -> AppResult<()> {
+    crate::click_point_picker::start_click_point_pick_inner(app)
 }
 
 #[tauri::command]
-pub fn cancel_sequence_point_pick(app: AppHandle) -> AppResult<()> {
-    crate::sequence_picker::cancel_sequence_point_pick_inner(&app);
+pub fn cancel_click_point_pick(app: AppHandle) -> AppResult<()> {
+    crate::click_point_picker::cancel_click_point_pick_inner(&app);
     Ok(())
 }
 
@@ -328,6 +325,26 @@ pub fn export_diagnostics_bundle() -> AppResult<String> {
     Ok(zip_path.to_string_lossy().to_string())
 }
 
+#[tauri::command]
+pub fn set_accent_color(
+    app: AppHandle,
+    color: String,
+    theme: String,
+    icon_enabled: bool,
+    icon_theme: String,
+    icon_color: String,
+) -> AppResult<()> {
+    crate::engine::worker::set_icon_theme_inner(
+        &app,
+        &color,
+        &theme,
+        icon_enabled,
+        &icon_theme,
+        &icon_color,
+    );
+    Ok(())
+}
+
 #[tauri::command]
 pub fn debug_trigger_panic() -> AppResult<()> {
     #[cfg(debug_assertions)]
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 12a82da1..b46afda0 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "BlurAutoClicker",
-  "version": "3.8.3",
+  "version": "3.9.0",
   "identifier": "BlurAutoClicker",
   "build": {
     "frontendDist": "../dist",
@@ -55,7 +55,7 @@
       "longDescription": "Performance-focused auto clicker with global hotkeys, optional overlay, and advanced timing. Licensed under GPLv3.",
       "homepage": "https://github.com/Blur009/Blur-AutoClicker",
       "icon": [
-        "icons/icon.ico"
+        "icons/icon-deactivated-dark.ico"
       ],
       "windows": {
         "webviewInstallMode": {
@@ -73,7 +73,7 @@
     "targets": "nsis",
     "createUpdaterArtifacts": true,
     "icon": [
-      "icons/icon.ico"
+      "icons/icon-deactivated-dark.ico"
     ],
     "windows": {
       "webviewInstallMode": {
diff --git a/src/App.tsx b/src/App.tsx
index d3d28646..9cff96e3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,6 +5,7 @@ import {
   currentMonitor,
   getCurrentWindow,
   LogicalSize,
+  PhysicalPosition,
 } from "@tauri-apps/api/window";
 import {
   lazy,
@@ -16,19 +17,28 @@ import {
 } from "react";
 import { applyAccentTheme } from "./accentTheme";
 import UpdateBanner from "./components/Updatebanner";
-import { canonicalizeHotkeyForBackend } from "./hotkeys";
+import {
+  canonicalizeHotkeyForBackend,
+  captureHotkey,
+  captureModifierHotkey,
+} from "./hotkeys";
 
 import {
+  applyPresetSnapshot,
   buildPresetSnapshot,
   createPresetDefinition,
-  MAX_PRESETS,
+  sanitizePresetSnapshot,
   sanitizeSettings,
   sanitizePresetName,
+  type PresetDefinition,
   type PresetId,
 } from "./settingsSchema";
+import { save, open } from "@tauri-apps/plugin-dialog";
+import { writeTextFile, readTextFile } from "@tauri-apps/plugin-fs";
 import {
   APP_VERSION,
   DEFAULT_SETTINGS,
+  initAppVersion,
   type AppInfo,
   type ClickerStatus,
   type Settings,
@@ -37,41 +47,41 @@ import {
   saveSettings,
 } from "./store";
 
+void initAppVersion();
+
 const SimplePanel = lazy(() => import("./components/panels/SimplePanel"));
 const AdvancedPanel = lazy(
   () => import("./components/panels/advanced/AdvancedPanel"),
 );
 const ZonesPanel = lazy(() => import("./components/panels/zones/ZonesPanel"));
-const SettingsPanel = lazy(() => import("./components/panels/SettingsPanel"));
+const SettingsPanel = lazy(
+  () => import("./components/panels/settings/SettingsPanel"),
+);
+const ClickPointsPanel = lazy(
+  () => import("./components/panels/click-points/ClickPointsPanel"),
+);
 const TitleBar = lazy(() => import("./components/TitleBar"));
-export type Tab = "simple" | "advanced" | "zones" | "settings";
+const StatusBar = lazy(() => import("./components/StatusBar"));
+export type Tab = "simple" | "advanced" | "zones" | "settings" | "click-points";
 
 const BACKEND_SETTINGS_SCHEMA_VERSION = 10;
 const MAX_DROPDOWN_OVERFLOW_BOTTOM = 220;
-const OPERATIONAL_SETTING_KEYS = new Set<string>(
-  Object.keys(buildPresetSnapshot(DEFAULT_SETTINGS)),
-);
+const STATUS_BAR_HEIGHT = 26;
 
 type DropdownOverflowDetail = {
   active: boolean;
   bottom?: number;
 };
 
-function getPanelSize(
-  tab: Tab,
-  hasUpdate: boolean,
-  advancedSequenceLayout: Settings["advancedSequenceLayout"],
-) {
+function getPanelSize(tab: Tab, hasUpdate: boolean) {
   const extra = hasUpdate ? 30 : 0;
   if (tab === "simple") {
-    return { width: 650, height: 175 + extra };
+    return { width: 750, height: 175 + extra };
   }
-  if (tab === "settings") return { width: 560, height: 720 + extra };
-  if (tab === "zones") return { width: 750, height: 720 + extra };
-  if (advancedSequenceLayout === "tall") {
-    return { width: 560, height: 720 + extra };
-  }
-  return { width: 912, height: 527 + extra };
+  if (tab === "settings") return { width: 700, height: 720 + extra };
+  if (tab === "zones") return { width: 700, height: 700 + extra };
+  if (tab === "click-points") return { width: 550, height: 600 + extra };
+  return { width: 900, height: 469 + extra };
 }
 
 async function getClampedPanelSize(
@@ -106,8 +116,8 @@ const DEFAULT_STATUS: ClickerStatus = {
   lastError: null,
   stopReason: null,
   warning: null,
-  activeSequenceIndex: null,
-  activeSequenceTick: 0,
+  activeClickPointIndex: null,
+  activeClickPointTick: 0,
 };
 
 const DEFAULT_APP_INFO: AppInfo = {
@@ -116,10 +126,6 @@ const DEFAULT_APP_INFO: AppInfo = {
   screenshotProtectionSupported: false,
 };
 
-type UpdateSettingsOptions = {
-  preserveActivePreset?: boolean;
-};
-
 async function syncSettingsToBackend(settings: Settings) {
   await invoke("update_settings", {
     settings: {
@@ -148,11 +154,28 @@ async function checkForUpdates(): Promise<UpdateCheckResult | null> {
   try {
     return await invoke<UpdateCheckResult>("check_for_updates");
   } catch (err) {
-    error(JSON.stringify({ source: "App.updateCheck", error: String(err) }));
+    error(
+      JSON.stringify({
+        source: "App.updateCheck",
+        error: JSON.stringify(err),
+      }),
+    );
     return null;
   }
 }
 
+function tabSuffix(t: Tab): string {
+  if (t === "click-points") return "ClickPoints";
+  return t.charAt(0).toUpperCase() + t.slice(1);
+}
+
+function resolvePerPage<T>(settings: Settings, globalVal: T, field: string): T {
+  if (settings.perPageAppearance) {
+    return ((settings as Record<string, unknown>)[field] as T) ?? globalVal;
+  }
+  return globalVal;
+}
+
 export default function App() {
   const [tab, setTab] = useState<Tab>("simple");
   const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS);
@@ -167,6 +190,9 @@ export default function App() {
     "idle" | "checking" | "available" | "unavailable" | "error"
   >("idle");
   const [dropdownOverflowBottom, setDropdownOverflowBottom] = useState(0);
+  const [settingsInitialTab, setSettingsInitialTab] = useState<
+    string | undefined
+  >();
 
   const hotkeyTimer = useRef<number | null>(null);
   const hotkeyRequestIdRef = useRef(0);
@@ -174,10 +200,12 @@ export default function App() {
   const committedSettingsRef = useRef<Settings>(DEFAULT_SETTINGS);
   const lastValidHotkeyRef = useRef(DEFAULT_SETTINGS.hotkey);
   const launchWindowPlacementDone = useRef(false);
+  const pendingShowWindowRef = useRef(false);
   const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const resizeTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
   const toggleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const cooldownTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const mountedRef = useRef(false);
 
   const setUiSettings = (nextSettings: Settings) => {
@@ -290,55 +318,59 @@ export default function App() {
     queueHotkeyRegistrationRef.current = queueHotkeyRegistration;
   });
 
-  const updateSettings = useCallback(
-    (patch: Partial<Settings>, options: UpdateSettingsOptions = {}) => {
-      const { hotkey, ...rest } = patch;
-      const shouldClearActivePreset =
-        !options.preserveActivePreset &&
-        (hotkey !== undefined ||
-          Object.keys(rest).some((key) => OPERATIONAL_SETTING_KEYS.has(key)));
-
-      const restPatch: Partial<Settings> = { ...rest };
-      if (
-        shouldClearActivePreset &&
-        patch.activePresetId === undefined &&
-        committedSettingsRef.current.activePresetId !== null
-      ) {
-        restPatch.activePresetId = null;
-      }
+  const updateSettings = useCallback((patch: Partial<Settings>) => {
+    const { hotkey, ...rest } = patch;
 
-      if (Object.keys(restPatch).length > 0) {
-        const nextUiSettings = sanitizeSettings(
-          { ...uiSettingsRef.current, ...restPatch },
-          APP_VERSION,
-        );
-        const nextCommittedSettings = sanitizeSettings(
-          { ...committedSettingsRef.current, ...restPatch },
-          APP_VERSION,
-        );
+    if (Object.keys(rest).length > 0) {
+      const nextUiSettings = sanitizeSettings(
+        { ...uiSettingsRef.current, ...rest },
+        APP_VERSION,
+      );
+      const nextCommittedSettings = sanitizeSettings(
+        { ...committedSettingsRef.current, ...rest },
+        APP_VERSION,
+      );
 
-        persistCommittedSettingsRef.current(
-          nextCommittedSettings,
-          nextUiSettings,
-        );
-      }
+      persistCommittedSettingsRef.current(
+        nextCommittedSettings,
+        nextUiSettings,
+      );
+    }
 
-      if (hotkey !== undefined) {
-        setUiSettingsRef.current({
-          ...uiSettingsRef.current,
-          hotkey,
-        });
-        queueHotkeyRegistrationRef.current(hotkey);
-      }
-    },
-    [],
-  );
+    if (hotkey !== undefined) {
+      setUiSettingsRef.current({
+        ...uiSettingsRef.current,
+        hotkey,
+      });
+      queueHotkeyRegistrationRef.current(hotkey);
+    }
+  }, []);
 
   const applyStartupWindowPlacement = async () => {
-    await getCurrentWindow().center();
+    const pos = committedSettingsRef.current.windowPosition;
+    if (
+      committedSettingsRef.current.rememberWindowPosition &&
+      pos.x !== null &&
+      pos.y !== null
+    ) {
+      await getCurrentWindow().setPosition(new PhysicalPosition(pos.x, pos.y));
+    } else {
+      await getCurrentWindow().center();
+    }
   };
 
   const handleWindowClose = async () => {
+    if (committedSettingsRef.current.rememberWindowPosition) {
+      const pos = await getCurrentWindow().outerPosition();
+      const next = sanitizeSettings(
+        {
+          ...committedSettingsRef.current,
+          windowPosition: { x: pos.x, y: pos.y },
+        },
+        APP_VERSION,
+      );
+      await saveSettings(next);
+    }
     if (uiSettingsRef.current.minimizeToTray) {
       await invoke("hide_main_window");
     } else {
@@ -351,12 +383,9 @@ export default function App() {
 
     try {
       await getCurrentWindow().setAlwaysOnTop(nextValue);
-      updateSettings(
-        {
-          alwaysOnTop: nextValue,
-        },
-        { preserveActivePreset: true },
-      );
+      updateSettings({
+        alwaysOnTop: nextValue,
+      });
     } catch (err) {
       error(JSON.stringify({ source: "App.alwaysOnTop", error: String(err) }));
     }
@@ -367,10 +396,6 @@ export default function App() {
       return false;
     }
 
-    if (committedSettingsRef.current.presets.length >= MAX_PRESETS) {
-      return false;
-    }
-
     const preset = createPresetDefinition(name, committedSettingsRef.current);
     if (!preset.name) {
       return false;
@@ -404,13 +429,10 @@ export default function App() {
       return false;
     }
 
-    updateSettings(
-      {
-        ...preset.settings,
-        activePresetId: presetId,
-      },
-      { preserveActivePreset: true },
-    );
+    updateSettings({
+      ...preset.settings,
+      activePresetId: presetId,
+    });
     return true;
   };
 
@@ -527,6 +549,150 @@ export default function App() {
     return true;
   };
 
+  const handleDuplicatePreset = (presetId: PresetId) => {
+    if (status.running) {
+      return false;
+    }
+
+    const source = committedSettingsRef.current.presets.find(
+      (p) => p.id === presetId,
+    );
+    if (!source) {
+      return false;
+    }
+
+    const baseName = source.name.replace(/\s*\(\d+\)$/, "");
+    let newName = `${baseName} (2)`;
+    let counter = 2;
+    while (
+      committedSettingsRef.current.presets.some((p) => p.name === newName)
+    ) {
+      counter++;
+      newName = `${baseName} (${counter})`;
+    }
+
+    const preset = createPresetDefinition(
+      newName,
+      applyPresetSnapshot(committedSettingsRef.current, source.settings),
+    );
+    if (!preset.name) {
+      return false;
+    }
+
+    const nextPresets = [...committedSettingsRef.current.presets, preset];
+    const nextCommittedSettings = {
+      ...committedSettingsRef.current,
+      presets: nextPresets,
+    };
+    const nextUiSettings = {
+      ...uiSettingsRef.current,
+      presets: nextPresets,
+    };
+
+    persistCommittedSettings(nextCommittedSettings, nextUiSettings);
+    return true;
+  };
+
+  const handleExportPreset = async (presetId: PresetId) => {
+    const preset = committedSettingsRef.current.presets.find(
+      (p) => p.id === presetId,
+    );
+    if (!preset) {
+      return false;
+    }
+
+    try {
+      const filePath = await save({
+        defaultPath: `${preset.name.replace(/[^a-zA-Z0-9_-]/g, "_")}.json`,
+        filters: [{ name: "Preset JSON", extensions: ["json"] }],
+      });
+      if (!filePath) {
+        return false;
+      }
+
+      const data = JSON.stringify(
+        { type: "blur-autoclicker-preset", version: 1, preset },
+        null,
+        2,
+      );
+      await writeTextFile(filePath, data);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const handleImportPreset = async () => {
+    try {
+      const filePath = await open({
+        multiple: false,
+        filters: [{ name: "Preset JSON", extensions: ["json"] }],
+      });
+      if (!filePath) {
+        return null;
+      }
+
+      const content = await readTextFile(filePath as string);
+      const parsed = JSON.parse(content) as {
+        type?: string;
+        version?: number;
+        preset?: PresetDefinition;
+      };
+
+      if (parsed.type !== "blur-autoclicker-preset" || !parsed.preset) {
+        return null;
+      }
+
+      const importName = sanitizePresetName(parsed.preset.name);
+      if (!importName) {
+        return null;
+      }
+
+      let finalName = importName;
+      let counter = 1;
+      while (
+        committedSettingsRef.current.presets.some((p) => p.name === finalName)
+      ) {
+        counter++;
+        finalName = `${importName} (${counter})`;
+      }
+
+      const now = new Date().toISOString();
+      const id =
+        globalThis.crypto?.randomUUID?.() ??
+        `preset-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+      const defaultSnapshot = buildPresetSnapshot(committedSettingsRef.current);
+      const sanitizedSettings = sanitizePresetSnapshot(
+        parsed.preset.settings,
+        defaultSnapshot,
+      );
+
+      const preset: PresetDefinition = {
+        id,
+        name: finalName,
+        createdAt: now,
+        updatedAt: now,
+        settings: sanitizedSettings,
+      };
+
+      const nextPresets = [...committedSettingsRef.current.presets, preset];
+      const nextCommittedSettings = {
+        ...committedSettingsRef.current,
+        presets: nextPresets,
+      };
+      const nextUiSettings = {
+        ...uiSettingsRef.current,
+        presets: nextPresets,
+      };
+
+      persistCommittedSettings(nextCommittedSettings, nextUiSettings);
+      return true;
+    } catch {
+      return null;
+    }
+  };
+
   useEffect(() => {
     let mounted = true;
     mountedRef.current = true;
@@ -601,6 +767,18 @@ export default function App() {
 
           setTab(hydratedSettings.lastPanel);
           setSettings(hydratedSettings);
+          {
+            const theme = hydratedSettings.theme ?? "dark";
+            document.documentElement.dataset.theme = theme;
+            applyAccentTheme(hydratedSettings.accentColor, theme);
+            invoke("set_accent_color", {
+              color: hydratedSettings.accentColor,
+              theme,
+              iconEnabled: hydratedSettings.taskbarIconEnabled,
+              iconTheme: hydratedSettings.taskbarIconTheme,
+              iconColor: hydratedSettings.taskbarIconColor,
+            });
+          }
           setAppInfo(loadedAppInfo);
           setStatus(loadedStatus);
           setSettingsLoaded(true);
@@ -614,9 +792,7 @@ export default function App() {
             await saveSettings(hydratedSettings);
           }
 
-          if (!autostartLaunch) {
-            await getCurrentWindow().show();
-          }
+          pendingShowWindowRef.current = !autostartLaunch;
           emit("frontend-ready", {}).catch((err) =>
             error(
               JSON.stringify({
@@ -631,13 +807,7 @@ export default function App() {
         error(JSON.stringify({ source: "App.boot", error: String(err) }));
         if (!mounted) return;
         setSettingsLoaded(true);
-        getCurrentWindow()
-          .show()
-          .catch((err) =>
-            error(
-              JSON.stringify({ source: "App.bootShow", error: String(err) }),
-            ),
-          );
+        pendingShowWindowRef.current = true;
         emit("frontend-ready", {}).catch((err) =>
           error(JSON.stringify({ source: "App.bootEmit", error: String(err) })),
         );
@@ -722,16 +892,16 @@ export default function App() {
         const textScale = await invoke<number>("get_text_scale_factor");
         document.documentElement.style.fontSize = `${16 * textScale}px`;
 
-        const preferredSize = getPanelSize(
-          tab,
-          !!updateInfo,
-          settings.advancedSequenceLayout,
-        );
+        const preferredSize = getPanelSize(tab, !!updateInfo);
         const { width, height } = await getClampedPanelSize(
           preferredSize,
           textScale,
         );
-        const windowHeight = height + dropdownOverflowBottom;
+        const statusBarOffset = settings.statusBarEnabled
+          ? STATUS_BAR_HEIGHT
+          : 0;
+        const appHeight = height + statusBarOffset;
+        const windowHeight = appHeight + dropdownOverflowBottom;
 
         const appWindow = getCurrentWindow();
 
@@ -741,11 +911,15 @@ export default function App() {
 
           if (cancelled) return;
           root.style.width = `${width}px`;
-          root.style.height = `${height}px`;
+          root.style.height = `${appHeight}px`;
 
           await wait(30);
           if (cancelled) return;
           await applyStartupWindowPlacement();
+          if (pendingShowWindowRef.current) {
+            await appWindow.show();
+            pendingShowWindowRef.current = false;
+          }
           launchWindowPlacementDone.current = true;
           return;
         }
@@ -766,7 +940,7 @@ export default function App() {
 
           if (cancelled) return;
           root.style.width = `${width}px`;
-          root.style.height = `${height}px`;
+          root.style.height = `${appHeight}px`;
 
           const changedProps: string[] = [];
           if (width !== currentW) changedProps.push("width");
@@ -828,7 +1002,7 @@ export default function App() {
           void root.offsetHeight;
 
           root.style.width = `${width}px`;
-          root.style.height = `${height}px`;
+          root.style.height = `${appHeight}px`;
         }
       } catch (err) {
         if (!cancelled) {
@@ -854,10 +1028,12 @@ export default function App() {
     updateInfo,
     dropdownOverflowBottom,
     settingsLoaded,
-    settings.advancedSequenceLayout,
+    settings.statusBarEnabled,
   ]);
 
   useEffect(() => {
+    if (import.meta.env.DEV) return;
+
     const check = async () => {
       const result = await checkForUpdates();
       if (result?.updateAvailable) {
@@ -912,33 +1088,59 @@ export default function App() {
     const theme = settings.theme ?? "dark";
     document.documentElement.dataset.theme = theme;
     applyAccentTheme(settings.accentColor, theme);
-  }, [settings.accentColor, settings.theme]);
+
+    invoke("set_accent_color", {
+      color: settings.accentColor,
+      theme,
+      iconEnabled: settings.taskbarIconEnabled,
+      iconTheme: settings.taskbarIconTheme,
+      iconColor: settings.taskbarIconColor,
+    });
+  }, [
+    settings.accentColor,
+    settings.theme,
+    settings.taskbarIconEnabled,
+    settings.taskbarIconTheme,
+    settings.taskbarIconColor,
+  ]);
 
   useEffect(() => {
     document.documentElement.lang = "en";
     document.documentElement.dir = "ltr";
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const root = document.querySelector(".app-root") as HTMLElement | null;
     if (!root) return;
 
-    const panelOpacity = settings.panelOpacity / 100;
+    const sfx = tabSuffix(tab);
+    const panelOpacity =
+      resolvePerPage(settings, settings.panelOpacity, `panelOpacity${sfx}`) /
+      100;
+    const windowOpacity =
+      resolvePerPage(settings, settings.windowOpacity, `windowOpacity${sfx}`) /
+      100;
     const colors =
       settings.theme === "light"
         ? {
+            base: "229, 223, 231",
             surface: "255, 255, 255",
             elevated: "242, 242, 242",
             input: "217, 217, 217",
             inputOff: "217, 217, 217",
           }
         : {
+            base: "12, 12, 14",
             surface: "26, 26, 26",
             elevated: "38, 38, 38",
             input: "59, 59, 59",
             inputOff: "51, 51, 51",
           };
 
+    root.style.setProperty(
+      "--bg-base",
+      `rgba(${colors.base}, ${windowOpacity})`,
+    );
     root.style.setProperty(
       "--bg-surface",
       `rgba(${colors.surface}, ${panelOpacity})`,
@@ -955,22 +1157,65 @@ export default function App() {
       "--bg-input-off",
       `rgba(${colors.inputOff}, ${panelOpacity})`,
     );
-    root.style.setProperty("--bg-panel-blur", `${settings.panelBlur}px`);
+    root.style.setProperty(
+      "--bg-panel-blur",
+      `${resolvePerPage(settings, settings.panelBlur, `panelBlur${sfx}`)}px`,
+    );
 
     return () => {
+      root.style.removeProperty("--bg-base");
       root.style.removeProperty("--bg-surface");
       root.style.removeProperty("--bg-elevated");
       root.style.removeProperty("--bg-input");
       root.style.removeProperty("--bg-input-off");
       root.style.removeProperty("--bg-panel-blur");
     };
-  }, [settings.panelOpacity, settings.panelBlur, settings.theme]);
+  }, [
+    settings,
+    settings.windowOpacity,
+    settings.panelOpacity,
+    settings.panelBlur,
+    settings.theme,
+    settings.perPageAppearance,
+    settings.panelOpacitySimple,
+    settings.panelOpacityAdvanced,
+    settings.panelOpacityZones,
+    settings.panelOpacityClickPoints,
+    settings.panelOpacitySettings,
+    settings.panelBlurSimple,
+    settings.panelBlurAdvanced,
+    settings.panelBlurZones,
+    settings.panelBlurClickPoints,
+    settings.panelBlurSettings,
+    settings.windowOpacitySimple,
+    settings.windowOpacityAdvanced,
+    settings.windowOpacityZones,
+    settings.windowOpacityClickPoints,
+    settings.windowOpacitySettings,
+    tab,
+  ]);
 
   useEffect(() => {
+    const cleanup = listen<boolean>("minimized-changed", (event) => {
+      const root = document.querySelector(".app-root") as HTMLElement | null;
+      if (!root) return;
+      root.toggleAttribute("data-minimized", event.payload);
+    });
+    return () => {
+      cleanup.then((fn) => fn());
+    };
+  }, []);
+
+  useLayoutEffect(() => {
     const root = document.querySelector(".app-root") as HTMLElement | null;
     if (!root) return;
 
-    const img = settings.backgroundImage;
+    const sfx = tabSuffix(tab);
+    const img = resolvePerPage(
+      settings,
+      settings.backgroundImage,
+      `backgroundImage${sfx}`,
+    );
     const escape = (s: string) => s.replace(/"/g, '\\"');
 
     if (!img) {
@@ -987,13 +1232,40 @@ export default function App() {
         `url("${escape(convertFileSrc(img))}")`,
       );
     }
-  }, [settings.backgroundImage]);
+  }, [
+    settings,
+    settings.backgroundImage,
+    settings.perPageAppearance,
+    settings.backgroundImageSimple,
+    settings.backgroundImageAdvanced,
+    settings.backgroundImageZones,
+    settings.backgroundImageClickPoints,
+    settings.backgroundImageSettings,
+    tab,
+  ]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const root = document.querySelector(".app-root") as HTMLElement | null;
     if (!root) return;
-    root.style.setProperty("--bg-opacity", String(settings.backgroundOpacity));
-  }, [settings.backgroundOpacity]);
+
+    const sfx = tabSuffix(tab);
+    const bgOp = resolvePerPage(
+      settings,
+      settings.backgroundOpacity,
+      `backgroundOpacity${sfx}`,
+    );
+    root.style.setProperty("--bg-opacity", String(bgOp));
+  }, [
+    settings,
+    settings.backgroundOpacity,
+    settings.perPageAppearance,
+    settings.backgroundOpacitySimple,
+    settings.backgroundOpacityAdvanced,
+    settings.backgroundOpacityZones,
+    settings.backgroundOpacityClickPoints,
+    settings.backgroundOpacitySettings,
+    tab,
+  ]);
 
   const handleTabChange = (nextTab: Tab) => {
     setTab(nextTab);
@@ -1030,11 +1302,96 @@ export default function App() {
     }
   };
 
-  const [stopKey, setStopKey] = useState(0);
-  const prevStopReasonRef = useRef(status.stopReason);
-  if (status.stopReason && status.stopReason !== prevStopReasonRef.current) {
-    prevStopReasonRef.current = status.stopReason;
-    setStopKey((k) => k + 1);
+  const handleGoToPresets = useCallback(() => {
+    setSettingsInitialTab("presets");
+    setTab("settings");
+  }, []);
+
+  const handleGoToVersionInfo = useCallback(() => {
+    setSettingsInitialTab("general");
+    setTab("settings");
+  }, []);
+
+  const handleInitialTabConsumed = useCallback(() => {
+    setSettingsInitialTab(undefined);
+  }, []);
+
+  const handleTabChangeRef = useRef(handleTabChange);
+  handleTabChangeRef.current = handleTabChange;
+
+  const keybindMapRef = useRef<Record<string, Tab>>({});
+
+  useEffect(() => {
+    const map: Record<string, Tab> = {};
+    const add = (stored: string, tab: Tab) => {
+      if (stored) map[stored] = tab;
+    };
+    add(settings.keybindSimple, "simple");
+    add(settings.keybindAdvanced, "advanced");
+    add(settings.keybindZones, "zones");
+    add(settings.keybindClickPoints, "click-points");
+    add(settings.keybindSettings, "settings");
+    keybindMapRef.current = map;
+  }, [
+    settings.keybindSimple,
+    settings.keybindAdvanced,
+    settings.keybindZones,
+    settings.keybindClickPoints,
+    settings.keybindSettings,
+  ]);
+
+  useEffect(() => {
+    const normalizeKey = (e: KeyboardEvent): string | null => {
+      const modifierHit = captureModifierHotkey(e);
+      if (modifierHit) return modifierHit;
+      if (e.key === "Escape" || e.code === "Escape") return "escape";
+      if (e.key === "Backspace") return "backspace";
+      if (e.key === "Delete") return "delete";
+      const captured = captureHotkey(e);
+      if (!captured) return null;
+      return captured.split("+").pop() ?? captured;
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (
+        e.target instanceof HTMLElement &&
+        (e.target.isContentEditable ||
+          e.target.tagName === "INPUT" ||
+          e.target.tagName === "TEXTAREA" ||
+          e.target.tagName === "SELECT")
+      ) {
+        return;
+      }
+      const normalized = normalizeKey(e);
+      if (!normalized) return;
+      const tab = keybindMapRef.current[normalized];
+      if (!tab) return;
+      e.preventDefault();
+      handleTabChangeRef.current(tab);
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
+
+  const activePreset = settings.presets.find(
+    (p) => p.id === settings.activePresetId,
+  );
+
+  function computeTimeLimitMs(): number {
+    if (!settings.timeLimitEnabled) return 0;
+    const unit = settings.timeLimitUnit;
+    const val = settings.timeLimit;
+    switch (unit) {
+      case "s":
+        return val * 1000;
+      case "m":
+        return val * 60_000;
+      case "h":
+        return val * 3_600_000;
+      default:
+        return val * 1000;
+    }
   }
 
   return (
@@ -1043,18 +1400,11 @@ export default function App() {
         tab={tab}
         setTab={handleTabChange}
         running={status.running}
-        paused={status.paused}
-        stopReason={
-          settings.showStopReason &&
-          (tab === "simple" || tab === "advanced" || tab === "zones")
-            ? status.stopReason
-            : null
-        }
-        stopKey={stopKey}
-        warning={status.warning}
         isAlwaysOnTop={settings.alwaysOnTop}
         onToggleAlwaysOnTop={handleToggleAlwaysOnTop}
         onRequestClose={handleWindowClose}
+        stopReason={status.stopReason}
+        statusBarHidden={!settings.statusBarEnabled}
       />
       {updateInfo && (
         <UpdateBanner
@@ -1068,13 +1418,16 @@ export default function App() {
           <SimplePanel settings={settings} update={updateSettings} />
         )}
         {tab === "advanced" && (
-          <AdvancedPanel
+          <AdvancedPanel settings={settings} update={updateSettings} />
+        )}
+        {tab === "click-points" && (
+          <ClickPointsPanel
             settings={settings}
             update={updateSettings}
             showInfo={true}
             running={status.running}
-            activeSequenceIndex={status.activeSequenceIndex}
-            activeSequenceTick={status.activeSequenceTick}
+            activeClickPointIndex={status.activeClickPointIndex}
+            activeClickPointTick={status.activeClickPointTick}
           />
         )}
         {tab === "zones" && (
@@ -1095,13 +1448,36 @@ export default function App() {
             onUpdatePreset={handleUpdatePreset}
             onRenamePreset={handleRenamePreset}
             onDeletePreset={handleDeletePreset}
+            onDuplicatePreset={handleDuplicatePreset}
+            onExportPreset={handleExportPreset}
+            onImportPreset={handleImportPreset}
             onToggleAlwaysOnTop={handleToggleAlwaysOnTop}
             onReset={handleResetSettings}
             updateCheckStatus={updateCheckStatus}
             onCheckForUpdate={handleCheckForUpdate}
+            initialSettingsTab={settingsInitialTab}
+            onInitialTabConsumed={handleInitialTabConsumed}
           />
         )}
       </main>
+      {settings.statusBarEnabled && (
+        <StatusBar
+          activePresetName={activePreset?.name ?? null}
+          version={appInfo.version}
+          stopReason={status.stopReason}
+          warning={status.warning}
+          running={status.running}
+          paused={status.paused}
+          clickCount={status.clickCount}
+          activeClickPointIndex={status.activeClickPointIndex}
+          totalClickPoints={settings.clickPoints.length}
+          clickLimit={settings.clickLimit}
+          clickLimitEnabled={settings.clickLimitEnabled}
+          timeLimitMs={computeTimeLimitMs()}
+          onGoToPresets={handleGoToPresets}
+          onGoToVersionInfo={handleGoToVersionInfo}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/accentTheme.ts b/src/accentTheme.ts
index eee6e65c..930fc5d7 100644
--- a/src/accentTheme.ts
+++ b/src/accentTheme.ts
@@ -26,18 +26,15 @@ export function applyAccentTheme(accentColor: string, theme: Theme) {
   const rgb = hexToRgb(accentColor);
   const accentAlpha = theme === "light" ? 0.9 : 0.75;
   const strongAlpha = theme === "light" ? 1 : 0.92;
-  const softAlpha = theme === "light" ? 0.2 : 0.15;
+  const softAlpha = theme === "light" ? 0.4 : 0.4;
   const ringAlpha = theme === "light" ? 0.4 : 0.35;
   const glowPrimaryAlpha = theme === "light" ? 0.16 : 0.2;
   const glowSecondaryAlpha = theme === "light" ? 0.08 : 0.12;
 
-  root.style.setProperty("--accent-green", rgba(rgb, accentAlpha));
-  root.style.setProperty("--accent-green-strong", rgba(rgb, strongAlpha));
-  root.style.setProperty("--accent-green-soft", rgba(rgb, softAlpha));
-  root.style.setProperty("--accent-green-ring", rgba(rgb, ringAlpha));
-  root.style.setProperty("--accent-green-glow-1", rgba(rgb, glowPrimaryAlpha));
-  root.style.setProperty(
-    "--accent-green-glow-2",
-    rgba(rgb, glowSecondaryAlpha),
-  );
+  root.style.setProperty("--accent", rgba(rgb, accentAlpha));
+  root.style.setProperty("--accent-strong", rgba(rgb, strongAlpha));
+  root.style.setProperty("--accent-soft", rgba(rgb, softAlpha));
+  root.style.setProperty("--accent-ring", rgba(rgb, ringAlpha));
+  root.style.setProperty("--accent-glow-1", rgba(rgb, glowPrimaryAlpha));
+  root.style.setProperty("--accent-glow-2", rgba(rgb, glowSecondaryAlpha));
 }
diff --git a/src/assets/DMSans.ttf b/src/assets/DMSans.ttf
deleted file mode 100644
index 94c9e1c9..00000000
Binary files a/src/assets/DMSans.ttf and /dev/null differ
diff --git a/src/cadence.ts b/src/cadence.ts
index 762a28be..2fb7677f 100644
--- a/src/cadence.ts
+++ b/src/cadence.ts
@@ -34,7 +34,7 @@ const INTERVAL_MS: Record<ClickInterval, number> = {
   d: 86_400_000,
 };
 
-export function getDurationTotalMs(settings: CadenceSettings): number {
+export function getDurationTotalMs(settings: CadenceDurationFields): number {
   return (
     settings.durationHours * 3_600_000 +
     settings.durationMinutes * 60_000 +
@@ -47,19 +47,7 @@ export function getIntervalMilliseconds(interval: ClickInterval): number {
   return INTERVAL_MS[interval] ?? 1_000;
 }
 
-export function convertRateToDuration(
-  settings: CadenceSettings,
-): CadenceDurationFields | null {
-  if (!Number.isFinite(settings.clickSpeed) || settings.clickSpeed <= 0) {
-    return null;
-  }
-
-  const intervalMs = getIntervalMilliseconds(settings.clickInterval);
-  const totalMs = intervalMs / settings.clickSpeed;
-  if (!Number.isFinite(totalMs) || totalMs <= 0) {
-    return null;
-  }
-
+export function decomposeMs(totalMs: number): CadenceDurationFields {
   const totalRounded = Math.round(totalMs);
   const hours = Math.floor(totalRounded / 3_600_000);
   const remainderAfterHours = totalRounded % 3_600_000;
@@ -76,6 +64,43 @@ export function convertRateToDuration(
   };
 }
 
+const FIELD_TO_MS: Record<keyof CadenceDurationFields, number> = {
+  durationHours: 3_600_000,
+  durationMinutes: 60_000,
+  durationSeconds: 1_000,
+  durationMilliseconds: 1,
+};
+
+export function overflowDurationField(
+  field: keyof CadenceDurationFields,
+  rawValue: number,
+  current: CadenceDurationFields,
+): CadenceDurationFields | null {
+  const multiplier = FIELD_TO_MS[field];
+  const oldTotal = getDurationTotalMs(current);
+  const oldMs = current[field] * multiplier;
+  const newMs = rawValue * multiplier;
+  const newTotal = oldTotal - oldMs + newMs;
+  if (newTotal === oldTotal) return null;
+  return decomposeMs(Math.max(0, newTotal));
+}
+
+export function convertRateToDuration(
+  settings: CadenceSettings,
+): CadenceDurationFields | null {
+  if (!Number.isFinite(settings.clickSpeed) || settings.clickSpeed <= 0) {
+    return null;
+  }
+
+  const intervalMs = getIntervalMilliseconds(settings.clickInterval);
+  const totalMs = intervalMs / settings.clickSpeed;
+  if (!Number.isFinite(totalMs) || totalMs <= 0) {
+    return null;
+  }
+
+  return decomposeMs(totalMs);
+}
+
 export function convertDurationToRate(
   settings: CadenceSettings,
 ): CadenceRateFields | null {
@@ -143,8 +168,39 @@ export function getEffectiveClicksPerSecond(settings: CadenceSettings): number {
   return 1_000 / getEffectiveIntervalMs(settings);
 }
 
+export function formatIntervalMs(ms: number): string {
+  if (ms < 1_000) return `${Math.round(ms)}ms`;
+
+  const totalSec = ms / 1000;
+  const h = Math.floor(totalSec / 3600);
+
+  if (h >= 24) {
+    const d = Math.floor(h / 24);
+    const rh = h % 24;
+    if (rh > 0)
+      return `${d} day${d > 1 ? "s" : ""} ${rh} hr${rh > 1 ? "s" : ""}`;
+    return `${d} day${d > 1 ? "s" : ""}`;
+  }
+
+  const m = Math.floor((totalSec % 3600) / 60);
+
+  if (h > 0) {
+    if (m > 0) return `${h} hr${h > 1 ? "s" : ""} ${m} min${m > 1 ? "s" : ""}`;
+    return `${h} hr${h > 1 ? "s" : ""}`;
+  }
+
+  if (m > 0) {
+    const s = Math.round(totalSec % 60);
+    if (s > 0) return `${m} min${m > 1 ? "s" : ""} ${s} sec${s > 1 ? "s" : ""}`;
+    return `${m} min${m > 1 ? "s" : ""}`;
+  }
+
+  const s = +(totalSec % 60).toFixed(1);
+  return `${s} sec${s > 1 ? "s" : ""}`;
+}
+
 export function isDoubleClickSupported(settings: CadenceSettings): boolean {
-  return getEffectiveClicksPerSecond(settings) < 50;
+  return getEffectiveClicksPerSecond(settings) < 11;
 }
 
 export function formatDurationSummary(settings: CadenceSettings): string {
diff --git a/src/components/CadenceInput.tsx b/src/components/CadenceInput.tsx
index 6b948c73..5afc8e68 100644
--- a/src/components/CadenceInput.tsx
+++ b/src/components/CadenceInput.tsx
@@ -1,514 +1,12 @@
-import type { ChangeEvent, CSSProperties, FocusEvent, WheelEvent } from "react";
-import { useState } from "react";
-import "./panels/advanced/AdvancedPanel.css";
-import { RATE_INPUT_MODE_OPTIONS } from "../cadence";
-import { convertDurationToRate, convertRateToDuration } from "../cadence";
-import { normalizeIntegerRaw } from "../numberInput";
-import type { RateInputMode, Settings } from "../store";
-
-import { AdvDropdown } from "./panels/advanced/shared";
-import { getMaxClickSpeed, type ClickInterval } from "../settingsSchema";
-
-// TODO: This should really be split up into what is in the advanced panel and what is in the simple panel. Having both in one feels kinda off i feel like.
+import type { Settings } from "../store";
+import SimpleCadenceInput from "./panels/SimpleCadenceInput";
 
 interface Props {
   settings: Settings;
   update: (patch: Partial<Settings>) => void;
-  variant: "simple" | "advanced";
-  showInfo?: boolean;
-}
-
-const INTERVAL_OPTIONS = [
-  { value: "s", label: "Second" },
-  { value: "m", label: "Minute" },
-  { value: "h", label: "Hour" },
-  { value: "d", label: "Day" },
-] as const;
-
-const SIMPLE_RATE_INPUT_MODE_OPTIONS = [
-  { value: "rate", label: "Rate" },
-  { value: "duration", label: "Delay" },
-] as const;
-
-function parseIntegerRaw(raw: string) {
-  const normalized = normalizeIntegerRaw(raw);
-  return normalized === "" || normalized === "-" ? 0 : Number(normalized);
-}
-
-function clamp(value: number, min: number, max?: number) {
-  const minClamped = Math.max(min, value);
-  return max === undefined ? minClamped : Math.min(max, minClamped);
+  variant: string;
 }
 
-function dynamicChWidth(value: number, min = 1, max = 3) {
-  return `${clamp(String(Math.abs(value)).length, min, max)}ch`;
-}
-
-function handleWheelStep(
-  event: WheelEvent<HTMLInputElement>,
-  current: number,
-  min: number,
-  max: number | undefined,
-  apply: (next: number) => void,
-) {
-  event.preventDefault();
-  event.stopPropagation();
-  event.currentTarget.blur();
-  const delta = event.deltaY < 0 ? 1 : -1;
-  let step = 1;
-  if (event.shiftKey && event.ctrlKey) step = 10;
-  else if (event.shiftKey) step = 5;
-  apply(clamp(current + delta * step, min, max));
-}
-
-function handleNumberChange(
-  event: ChangeEvent<HTMLInputElement>,
-  apply: (next: number) => void,
-) {
-  const normalized = normalizeIntegerRaw(event.target.value);
-  if (normalized !== event.target.value) {
-    event.target.value = normalized;
-  }
-  apply(parseIntegerRaw(normalized));
-}
-
-function handleNumberBlur(
-  event: FocusEvent<HTMLInputElement>,
-  min: number,
-  max: number | undefined,
-  apply: (next: number) => void,
-) {
-  const normalized = normalizeIntegerRaw(event.target.value);
-  if (normalized !== event.target.value) {
-    event.target.value = normalized;
-  }
-  apply(clamp(parseIntegerRaw(normalized), min, max));
-}
-
-function DurationField({
-  value,
-  min,
-  max,
-  onChange,
-  style,
-  unit,
-  className,
-}: {
-  value: number;
-  min: number;
-  max?: number;
-  onChange: (next: number) => void;
-  style?: CSSProperties;
-  unit: string;
-  className?: string;
-}) {
-  return (
-    <div className={className ?? "adv-numbox-sm"}>
-      <input
-        type="number"
-        className={className ? "simple-inline-input" : "adv-number-sm"}
-        value={value}
-        min={min}
-        max={max}
-        onChange={(event) => handleNumberChange(event, onChange)}
-        onBlur={(event) => handleNumberBlur(event, min, max, onChange)}
-        onWheel={(event) => handleWheelStep(event, value, min, max, onChange)}
-        style={style}
-      />
-      <span className={className ? "postfix" : "adv-unit"}>{unit}</span>
-    </div>
-  );
-}
-
-export default function CadenceInput({ settings, update, variant }: Props) {
-  const maxClickSpeed = getMaxClickSpeed(settings.extendedClickSpeedLimit);
-
-  const [draftCps, setDraftCps] = useState<string | null>(null);
-
-  const switchMode = (mode: RateInputMode) => {
-    if (mode === settings.rateInputMode) return;
-
-    if (mode === "rate") {
-      const converted = convertDurationToRate(settings);
-      update({
-        rateInputMode: mode,
-        ...(converted ?? {}),
-      });
-      return;
-    }
-
-    const converted = convertRateToDuration(settings);
-    update({
-      rateInputMode: mode,
-      ...(converted ?? {}),
-    });
-  };
-
-  const updateSimpleCadence = (patch: Partial<Settings>) => {
-    if (variant !== "simple") {
-      update(patch);
-      return;
-    }
-
-    const nextSettings = { ...settings, ...patch };
-
-    if (nextSettings.rateInputMode === "rate") {
-      const converted = convertRateToDuration(nextSettings);
-      update({
-        ...patch,
-        ...(converted ?? {}),
-      });
-      return;
-    }
-
-    const converted = convertDurationToRate(nextSettings);
-    update({
-      ...patch,
-      ...(converted ?? {}),
-    });
-  };
-
-  if (variant === "simple") {
-    return (
-      <div className="InputBox cadence-box simple-cadence-box">
-        {settings.rateInputMode === "rate" ? (
-          <div className="simple-cadence-row">
-            <input
-              type="number"
-              className="simple-inline-input simple-cadence-input"
-              value={draftCps ?? settings.clickSpeed}
-              min={1}
-              max={maxClickSpeed}
-              aria-label="Clicks Per"
-              onChange={(event) => {
-                const raw = event.target.value;
-                if (raw === "") {
-                  setDraftCps("");
-                } else {
-                  const normalized = normalizeIntegerRaw(raw);
-                  if (normalized !== raw) event.target.value = normalized;
-                  if (normalized === "" || normalized === "-") {
-                    setDraftCps(normalized);
-                    return;
-                  }
-                  setDraftCps(null);
-                  updateSimpleCadence({ clickSpeed: Number(normalized) });
-                }
-              }}
-              onBlur={(event) => {
-                setDraftCps(null);
-                handleNumberBlur(event, 1, maxClickSpeed, (next) =>
-                  updateSimpleCadence({ clickSpeed: next }),
-                );
-              }}
-              onWheel={(event) =>
-                handleWheelStep(
-                  event,
-                  settings.clickSpeed,
-                  1,
-                  maxClickSpeed,
-                  (next) => updateSimpleCadence({ clickSpeed: next }),
-                )
-              }
-            />
-            <div className="vertical-devider vertical-devider--stretch" />
-            <span className="simple-control-label">Clicks Per</span>
-            <div className="vertical-devider vertical-devider--stretch" />
-            <AdvDropdown
-              value={settings.clickInterval}
-              options={INTERVAL_OPTIONS}
-              allowWindowOverflow
-              onChange={(value) =>
-                updateSimpleCadence({ clickInterval: value as ClickInterval })
-              }
-            />
-            <div className="vertical-devider vertical-devider--stretch" />
-            <AdvDropdown
-              value={settings.rateInputMode}
-              options={SIMPLE_RATE_INPUT_MODE_OPTIONS}
-              allowWindowOverflow
-              onChange={(value) => switchMode(value as RateInputMode)}
-            />
-          </div>
-        ) : (
-          <div className="simple-cadence-row">
-            <div className="simple-duration-group">
-              <DurationField
-                className="simple-duration-chip"
-                value={settings.durationHours}
-                min={0}
-                max={999}
-                onChange={(next) =>
-                  updateSimpleCadence({ durationHours: next })
-                }
-                style={{
-                  width: dynamicChWidth(settings.durationHours, 1, 3),
-                  minWidth: "1ch",
-                }}
-                unit="h"
-              />
-              <DurationField
-                className="simple-duration-chip"
-                value={settings.durationMinutes}
-                min={0}
-                max={59}
-                onChange={(next) =>
-                  updateSimpleCadence({ durationMinutes: next })
-                }
-                style={{
-                  width: dynamicChWidth(settings.durationMinutes, 1, 2),
-                  minWidth: "1ch",
-                }}
-                unit="m"
-              />
-              <DurationField
-                className="simple-duration-chip"
-                value={settings.durationSeconds}
-                min={0}
-                max={59}
-                onChange={(next) =>
-                  updateSimpleCadence({ durationSeconds: next })
-                }
-                style={{
-                  width: dynamicChWidth(settings.durationSeconds, 1, 2),
-                  minWidth: "1ch",
-                }}
-                unit="s"
-              />
-              <DurationField
-                className="simple-duration-chip"
-                value={settings.durationMilliseconds}
-                min={0}
-                max={999}
-                onChange={(next) =>
-                  updateSimpleCadence({ durationMilliseconds: next })
-                }
-                style={{
-                  width: dynamicChWidth(settings.durationMilliseconds, 1, 3),
-                  minWidth: "1ch",
-                }}
-                unit="ms"
-              />
-            </div>
-            <div className="vertical-devider vertical-devider--stretch" />
-            <span className="simple-control-label">Per Click</span>
-            <div className="vertical-devider vertical-devider--stretch" />
-            <AdvDropdown
-              value={settings.rateInputMode}
-              options={SIMPLE_RATE_INPUT_MODE_OPTIONS}
-              allowWindowOverflow
-              onChange={(value) => switchMode(value as RateInputMode)}
-            />
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  const modeToggle = (
-    <div className="adv-seg-group adv-cadence-mode-toggle">
-      {RATE_INPUT_MODE_OPTIONS.map((mode) => (
-        <button
-          key={mode}
-          type="button"
-          className={`adv-seg-btn ${settings.rateInputMode === mode ? "active" : ""}`}
-          onClick={() => switchMode(mode)}
-        >
-          {mode === "rate" ? "Rate" : "Delay"}
-        </button>
-      ))}
-    </div>
-  );
-
-  return (
-    <div className="adv-cadence-block">
-      <div className="adv-row adv-cadence-main-row">
-        <div className="adv-cadence-value">
-          {settings.rateInputMode === "rate" ? (
-            <div className="adv-value-outline">
-              <div className="adv-foc">
-                <input
-                  type="number"
-                  className="adv-number-sm"
-                  value={draftCps ?? settings.clickSpeed}
-                  min={1}
-                  max={maxClickSpeed}
-                  style={{ width: "40px", textAlign: "right" }}
-                  onChange={(event) => {
-                    const raw = event.target.value;
-                    if (raw === "") {
-                      setDraftCps("");
-                    } else {
-                      const normalized = normalizeIntegerRaw(raw);
-                      if (normalized !== raw) event.target.value = normalized;
-                      if (normalized === "" || normalized === "-") {
-                        setDraftCps(normalized);
-                        return;
-                      }
-                      setDraftCps(null);
-                      update({ clickSpeed: Number(normalized) });
-                    }
-                  }}
-                  onBlur={(event) => {
-                    setDraftCps(null);
-                    handleNumberBlur(event, 1, maxClickSpeed, (next) =>
-                      update({ clickSpeed: next }),
-                    );
-                  }}
-                  onWheel={(event) =>
-                    handleWheelStep(
-                      event,
-                      settings.clickSpeed,
-                      1,
-                      maxClickSpeed,
-                      (next) => update({ clickSpeed: next }),
-                    )
-                  }
-                />
-              </div>
-              <div className="adv-vdivider" />
-              <span className="adv-unf">Clicks Per</span>
-              <div className="adv-vdivider" />
-              <div className="adv-foc adv-foc-grow">
-                <AdvDropdown
-                  value={settings.clickInterval}
-                  options={INTERVAL_OPTIONS}
-                  onChange={(v) =>
-                    update({ clickInterval: v as ClickInterval })
-                  }
-                />
-              </div>
-            </div>
-          ) : (
-            <div className="adv-value-outline adv-value-outline--duration">
-              <div className="adv-foc">
-                <input
-                  type="number"
-                  className="adv-number-sm"
-                  value={settings.durationHours}
-                  min={0}
-                  max={999}
-                  style={{ width: "34px", textAlign: "right" }}
-                  onChange={(event) =>
-                    handleNumberChange(event, (next) =>
-                      update({ durationHours: next }),
-                    )
-                  }
-                  onBlur={(event) =>
-                    handleNumberBlur(event, 0, 999, (next) =>
-                      update({ durationHours: next }),
-                    )
-                  }
-                  onWheel={(event) =>
-                    handleWheelStep(
-                      event,
-                      settings.durationHours,
-                      0,
-                      999,
-                      (next) => update({ durationHours: next }),
-                    )
-                  }
-                />
-                <span className="adv-unit">h</span>
-              </div>
-              <div className="adv-vdivider" />
-              <div className="adv-foc">
-                <input
-                  type="number"
-                  className="adv-number-sm"
-                  value={settings.durationMinutes}
-                  min={0}
-                  max={59}
-                  style={{ width: "26px", textAlign: "right" }}
-                  onChange={(event) =>
-                    handleNumberChange(event, (next) =>
-                      update({ durationMinutes: next }),
-                    )
-                  }
-                  onBlur={(event) =>
-                    handleNumberBlur(event, 0, 59, (next) =>
-                      update({ durationMinutes: next }),
-                    )
-                  }
-                  onWheel={(event) =>
-                    handleWheelStep(
-                      event,
-                      settings.durationMinutes,
-                      0,
-                      59,
-                      (next) => update({ durationMinutes: next }),
-                    )
-                  }
-                />
-                <span className="adv-unit">m</span>
-              </div>
-              <div className="adv-vdivider" />
-              <div className="adv-foc">
-                <input
-                  type="number"
-                  className="adv-number-sm"
-                  value={settings.durationSeconds}
-                  min={0}
-                  max={59}
-                  style={{ width: "26px", textAlign: "right" }}
-                  onChange={(event) =>
-                    handleNumberChange(event, (next) =>
-                      update({ durationSeconds: next }),
-                    )
-                  }
-                  onBlur={(event) =>
-                    handleNumberBlur(event, 0, 59, (next) =>
-                      update({ durationSeconds: next }),
-                    )
-                  }
-                  onWheel={(event) =>
-                    handleWheelStep(
-                      event,
-                      settings.durationSeconds,
-                      0,
-                      59,
-                      (next) => update({ durationSeconds: next }),
-                    )
-                  }
-                />
-                <span className="adv-unit">s</span>
-              </div>
-              <div className="adv-vdivider" />
-              <div className="adv-foc">
-                <input
-                  type="number"
-                  className="adv-number-sm"
-                  value={settings.durationMilliseconds}
-                  min={0}
-                  max={999}
-                  style={{ width: "34px", textAlign: "right" }}
-                  onChange={(event) =>
-                    handleNumberChange(event, (next) =>
-                      update({ durationMilliseconds: next }),
-                    )
-                  }
-                  onBlur={(event) =>
-                    handleNumberBlur(event, 0, 999, (next) =>
-                      update({ durationMilliseconds: next }),
-                    )
-                  }
-                  onWheel={(event) =>
-                    handleWheelStep(
-                      event,
-                      settings.durationMilliseconds,
-                      0,
-                      999,
-                      (next) => update({ durationMilliseconds: next }),
-                    )
-                  }
-                />
-                <span className="adv-unit">ms</span>
-              </div>
-            </div>
-          )}
-        </div>
-        {modeToggle}
-      </div>
-    </div>
-  );
+export default function CadenceInput({ settings, update }: Props) {
+  return <SimpleCadenceInput settings={settings} update={update} />;
 }
diff --git a/src/components/ChangelogContent.css b/src/components/ChangelogContent.css
index 7720ef97..ddabfc81 100644
--- a/src/components/ChangelogContent.css
+++ b/src/components/ChangelogContent.css
@@ -11,12 +11,12 @@
   font-size: 0.65rem;
   padding: 0.0625rem 0.25rem;
   background: var(--bg-elevated);
-  border-radius: 0.25rem;
+  border-radius: var(--radius-sm);
   color: var(--text-primary);
 }
 
 .changelog-content a {
-  color: var(--accent-green-strong);
+  color: var(--accent-strong);
   text-decoration: none;
 }
 
diff --git a/src/components/ConfirmDialog.css b/src/components/ConfirmDialog.css
index ca8d86f7..4d61b5e8 100644
--- a/src/components/ConfirmDialog.css
+++ b/src/components/ConfirmDialog.css
@@ -21,7 +21,7 @@
 }
 
 .confirm-dialog-title {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: -0.02em;
@@ -30,7 +30,7 @@
 }
 
 .confirm-dialog-message {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 0.8125rem;
   font-weight: 400;
   color: var(--text-muted);
@@ -45,7 +45,7 @@
 }
 
 .confirm-dialog-btn {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 0.875rem;
   font-weight: 600;
   padding: 0.3125rem 0.875rem;
diff --git a/src/components/HotkeyCaptureInput.tsx b/src/components/HotkeyCaptureInput.tsx
index 0ee98045..d043a565 100644
--- a/src/components/HotkeyCaptureInput.tsx
+++ b/src/components/HotkeyCaptureInput.tsx
@@ -1,4 +1,11 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { invoke } from "@tauri-apps/api/core";
 import { error } from "@tauri-apps/plugin-log";
 import {
@@ -18,268 +25,297 @@ interface Props {
   style?: React.CSSProperties;
   conflicts?: string[];
   reserved?: boolean;
+  editable?: boolean;
+}
+
+export interface HotkeyCaptureInputHandle {
+  startListening: () => void;
 }
 
-export default function HotkeyCaptureInput({
-  value,
-  onChange,
-  className,
-  style,
-  conflicts,
-  reserved,
-}: Props) {
-  const [listening, setListening] = useState(false);
-  const inputRef = useRef<HTMLButtonElement | null>(null);
-  const ignorePrimaryInputMouseUntilRef = useRef(0);
-  const suppressedMouseButtonRef = useRef<number | null>(null);
-  const suppressResetTimerRef = useRef<number | null>(null);
-  const [layoutMap, setLayoutMap] =
-    useState<Awaited<ReturnType<typeof getKeyboardLayoutMap>>>(null);
-  const onChangeRef = useRef(onChange);
-
-  useEffect(() => {
-    onChangeRef.current = onChange;
-  });
-
-  useEffect(() => {
-    let active = true;
-
-    getKeyboardLayoutMap().then((map) => {
-      if (active) setLayoutMap(map);
+const HotkeyCaptureInput = forwardRef<HotkeyCaptureInputHandle, Props>(
+  function HotkeyCaptureInput(
+    { value, onChange, className, style, conflicts, reserved, editable = true },
+    ref,
+  ) {
+    const [listening, setListening] = useState(false);
+    const inputRef = useRef<HTMLButtonElement | null>(null);
+    const ignorePrimaryInputMouseUntilRef = useRef(0);
+    const suppressedMouseButtonRef = useRef<number | null>(null);
+    const suppressResetTimerRef = useRef<number | null>(null);
+    const [layoutMap, setLayoutMap] =
+      useState<Awaited<ReturnType<typeof getKeyboardLayoutMap>>>(null);
+    const onChangeRef = useRef(onChange);
+
+    useImperativeHandle(ref, () => ({
+      startListening() {
+        ignorePrimaryInputMouseUntilRef.current = performance.now() + 150;
+        setListening(true);
+        inputRef.current?.focus();
+        invoke("stop_clicker").catch((err) => {
+          error(
+            JSON.stringify({
+              source: "HotkeyCaptureInput.startListening",
+              error: String(err),
+            }),
+          );
+        });
+      },
+    }));
+
+    useEffect(() => {
+      onChangeRef.current = onChange;
     });
 
-    const handleSuppressedMouseEvent = (event: MouseEvent) => {
-      if (suppressedMouseButtonRef.current !== event.button) return;
+    useEffect(() => {
+      let active = true;
 
-      if (event.cancelable) {
-        event.preventDefault();
-      }
-      event.stopPropagation();
-    };
-
-    window.addEventListener("mouseup", handleSuppressedMouseEvent, true);
-    window.addEventListener("click", handleSuppressedMouseEvent, true);
-    window.addEventListener("auxclick", handleSuppressedMouseEvent, true);
-    window.addEventListener("contextmenu", handleSuppressedMouseEvent, true);
-
-    return () => {
-      active = false;
-      if (suppressResetTimerRef.current !== null) {
-        window.clearTimeout(suppressResetTimerRef.current);
-      }
-      window.removeEventListener("mouseup", handleSuppressedMouseEvent, true);
-      window.removeEventListener("click", handleSuppressedMouseEvent, true);
-      window.removeEventListener("auxclick", handleSuppressedMouseEvent, true);
-      window.removeEventListener(
-        "contextmenu",
-        handleSuppressedMouseEvent,
-        true,
-      );
-    };
-  }, []);
-
-  useEffect(() => {
-    invoke("set_hotkey_capture_active", { active: listening }).catch((err) => {
-      error(
-        JSON.stringify({
-          source: "HotkeyCaptureInput.toggle",
-          error: String(err),
-        }),
+      getKeyboardLayoutMap().then((map) => {
+        if (active) setLayoutMap(map);
+      });
+
+      const handleSuppressedMouseEvent = (event: MouseEvent) => {
+        if (suppressedMouseButtonRef.current !== event.button) return;
+
+        if (event.cancelable) {
+          event.preventDefault();
+        }
+        event.stopPropagation();
+      };
+
+      window.addEventListener("mouseup", handleSuppressedMouseEvent, true);
+      window.addEventListener("click", handleSuppressedMouseEvent, true);
+      window.addEventListener("auxclick", handleSuppressedMouseEvent, true);
+      window.addEventListener("contextmenu", handleSuppressedMouseEvent, true);
+
+      return () => {
+        active = false;
+        if (suppressResetTimerRef.current !== null) {
+          window.clearTimeout(suppressResetTimerRef.current);
+        }
+        window.removeEventListener("mouseup", handleSuppressedMouseEvent, true);
+        window.removeEventListener("click", handleSuppressedMouseEvent, true);
+        window.removeEventListener(
+          "auxclick",
+          handleSuppressedMouseEvent,
+          true,
+        );
+        window.removeEventListener(
+          "contextmenu",
+          handleSuppressedMouseEvent,
+          true,
+        );
+      };
+    }, []);
+
+    useEffect(() => {
+      invoke("set_hotkey_capture_active", { active: listening }).catch(
+        (err) => {
+          error(
+            JSON.stringify({
+              source: "HotkeyCaptureInput.toggle",
+              error: String(err),
+            }),
+          );
+        },
       );
-    });
 
-    return () => {
+      return () => {
+        if (!listening) return;
+
+        invoke("set_hotkey_capture_active", { active: false }).catch((err) => {
+          error(
+            JSON.stringify({
+              source: "HotkeyCaptureInput.clear",
+              error: String(err),
+            }),
+          );
+        });
+      };
+    }, [listening]);
+
+    useEffect(() => {
       if (!listening) return;
 
-      invoke("set_hotkey_capture_active", { active: false }).catch((err) => {
-        error(
-          JSON.stringify({
-            source: "HotkeyCaptureInput.clear",
-            error: String(err),
-          }),
-        );
-      });
-    };
-  }, [listening]);
+      const finishCapture = (nextHotkey?: string) => {
+        if (nextHotkey !== undefined) {
+          onChangeRef.current(nextHotkey);
+        }
+        setListening(false);
+        inputRef.current?.blur();
+      };
 
-  useEffect(() => {
-    if (!listening) return;
+      let pendingModifierHotkey: string | null = null;
 
-    const finishCapture = (nextHotkey?: string) => {
-      if (nextHotkey !== undefined) {
-        onChangeRef.current(nextHotkey);
-      }
-      setListening(false);
-      inputRef.current?.blur();
-    };
+      const handleKeyDown = (event: KeyboardEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const modifierHotkey = captureModifierHotkey(event);
+        if (modifierHotkey) {
+          pendingModifierHotkey = modifierHotkey;
+          return;
+        }
+
+        if (event.key === "Escape" || event.code === "Escape") {
+          pendingModifierHotkey = null;
+          finishCapture("escape");
+          return;
+        }
+
+        if (event.key === "Backspace") {
+          pendingModifierHotkey = null;
+          finishCapture("backspace");
+          return;
+        }
+
+        if (event.key === "Delete") {
+          pendingModifierHotkey = null;
+          finishCapture("delete");
+          return;
+        }
 
-    let pendingModifierHotkey: string | null = null;
+        pendingModifierHotkey = null;
 
-    const handleKeyDown = (event: KeyboardEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
+        const nextHotkey = captureHotkey(event);
+        if (!nextHotkey) return;
 
-      const modifierHotkey = captureModifierHotkey(event);
-      if (modifierHotkey) {
-        pendingModifierHotkey = modifierHotkey;
-        return;
-      }
+        finishCapture(nextHotkey);
+      };
 
-      if (event.key === "Escape" || event.code === "Escape") {
-        pendingModifierHotkey = null;
-        finishCapture("escape");
-        return;
-      }
+      const handleKeyUp = (event: KeyboardEvent) => {
+        event.preventDefault();
+        event.stopPropagation();
 
-      if (event.key === "Backspace") {
-        pendingModifierHotkey = null;
-        finishCapture("backspace");
-        return;
-      }
+        const modifierHotkey = captureModifierHotkey(event);
+        if (!modifierHotkey || modifierHotkey !== pendingModifierHotkey) return;
 
-      if (event.key === "Delete") {
         pendingModifierHotkey = null;
-        finishCapture("delete");
-        return;
-      }
-
-      pendingModifierHotkey = null;
-
-      const nextHotkey = captureHotkey(event);
-      if (!nextHotkey) return;
-
-      finishCapture(nextHotkey);
-    };
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-
-      const modifierHotkey = captureModifierHotkey(event);
-      if (!modifierHotkey || modifierHotkey !== pendingModifierHotkey) return;
-
-      pendingModifierHotkey = null;
-      finishCapture(modifierHotkey);
-    };
-
-    const handleMouseDown = (event: MouseEvent) => {
-      const input = inputRef.current;
-      const isInputTarget =
-        input !== null &&
-        event.target instanceof Node &&
-        input.contains(event.target);
-
-      if (
-        isInputTarget &&
-        event.button === 0 &&
-        performance.now() < ignorePrimaryInputMouseUntilRef.current
-      ) {
-        return;
-      }
-
-      const nextHotkey = captureMouseHotkey(event);
-      if (!nextHotkey) return;
-
-      suppressedMouseButtonRef.current = event.button;
-      if (suppressResetTimerRef.current !== null) {
-        window.clearTimeout(suppressResetTimerRef.current);
-      }
-      suppressResetTimerRef.current = window.setTimeout(() => {
-        suppressedMouseButtonRef.current = null;
-        suppressResetTimerRef.current = null;
-      }, 200);
-
-      if (event.cancelable) {
+        finishCapture(modifierHotkey);
+      };
+
+      const handleMouseDown = (event: MouseEvent) => {
+        const input = inputRef.current;
+        const isInputTarget =
+          input !== null &&
+          event.target instanceof Node &&
+          input.contains(event.target);
+
+        if (
+          isInputTarget &&
+          event.button === 0 &&
+          performance.now() < ignorePrimaryInputMouseUntilRef.current
+        ) {
+          return;
+        }
+
+        const nextHotkey = captureMouseHotkey(event);
+        if (!nextHotkey) return;
+
+        suppressedMouseButtonRef.current = event.button;
+        if (suppressResetTimerRef.current !== null) {
+          window.clearTimeout(suppressResetTimerRef.current);
+        }
+        suppressResetTimerRef.current = window.setTimeout(() => {
+          suppressedMouseButtonRef.current = null;
+          suppressResetTimerRef.current = null;
+        }, 200);
+
+        if (event.cancelable) {
+          event.preventDefault();
+        }
+        event.stopPropagation();
+
+        finishCapture(nextHotkey);
+      };
+
+      const handleContextMenu = (event: MouseEvent) => {
         event.preventDefault();
-      }
-      event.stopPropagation();
-
-      finishCapture(nextHotkey);
-    };
-
-    const handleContextMenu = (event: MouseEvent) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-
-    window.addEventListener("keydown", handleKeyDown, true);
-    window.addEventListener("keyup", handleKeyUp, true);
-    window.addEventListener("mousedown", handleMouseDown, true);
-    window.addEventListener("contextmenu", handleContextMenu, true);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown, true);
-      window.removeEventListener("keyup", handleKeyUp, true);
-      window.removeEventListener("mousedown", handleMouseDown, true);
-      window.removeEventListener("contextmenu", handleContextMenu, true);
-    };
-  }, [listening]);
-
-  const displayText = useMemo(() => {
-    if (listening) return "Press keys\u2026";
-
-    return value
-      ? formatHotkeyForDisplay(value, layoutMap, defaultHotkeyLabels)
-      : defaultHotkeyLabels.empty;
-  }, [layoutMap, listening, value]);
-
-  const hasConflict = conflicts !== undefined && conflicts.length > 0;
-  const stateClass = getStateClass(listening, hasConflict, !!value);
-
-  const tooltipText = listening
-    ? undefined
-    : hasConflict
-      ? `Already bound to: ${conflicts!.join(", ")}`
-      : reserved
-        ? "This hotkey may conflict with system shortcuts"
-        : value
-          ? "Hotkey works even when Blur is minimized"
-          : undefined;
-
-  return (
-    <div className={`hk-wrapper ${stateClass}`}>
-      <button
-        ref={inputRef}
-        type="button"
-        className={`${className} hk-button`}
-        style={{
-          ...style,
-          paddingRight: value && !listening ? "1.25rem" : undefined,
-        }}
-        onClick={() => {
-          ignorePrimaryInputMouseUntilRef.current = performance.now() + 150;
-          setListening(true);
-          invoke("stop_clicker").catch((err) => {
-            error(
-              JSON.stringify({
-                source: "HotkeyCaptureInput.stopClicker",
-                error: String(err),
-              }),
-            );
-          });
-        }}
-        onBlur={() => {
-          if (listening) {
-            setListening(false);
-          }
-        }}
-        title={tooltipText}
-      >
-        {displayText}
-      </button>
-      {value && !listening && (
+        event.stopPropagation();
+      };
+
+      window.addEventListener("keydown", handleKeyDown, true);
+      window.addEventListener("keyup", handleKeyUp, true);
+      window.addEventListener("mousedown", handleMouseDown, true);
+      window.addEventListener("contextmenu", handleContextMenu, true);
+
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown, true);
+        window.removeEventListener("keyup", handleKeyUp, true);
+        window.removeEventListener("mousedown", handleMouseDown, true);
+        window.removeEventListener("contextmenu", handleContextMenu, true);
+      };
+    }, [listening]);
+
+    const displayText = useMemo(() => {
+      if (listening) return "Press keys\u2026";
+
+      return value
+        ? formatHotkeyForDisplay(value, layoutMap, defaultHotkeyLabels)
+        : defaultHotkeyLabels.empty;
+    }, [layoutMap, listening, value]);
+
+    const hasConflict = conflicts !== undefined && conflicts.length > 0;
+    const stateClass = getStateClass(listening, hasConflict, !!value);
+
+    const tooltipText = listening
+      ? undefined
+      : hasConflict
+        ? `Already bound to: ${conflicts!.join(", ")}`
+        : reserved
+          ? "This hotkey may conflict with system shortcuts"
+          : value
+            ? "Hotkey works even when Blur is minimized"
+            : undefined;
+
+    return (
+      <div className={`hk-wrapper ${stateClass}`}>
         <button
+          ref={inputRef}
           type="button"
-          className="hk-clear-btn"
-          onClick={(e) => {
-            e.stopPropagation();
-            onChange("");
+          className={`${className} hk-button`}
+          style={{
+            ...style,
+            paddingRight:
+              editable && value && !listening ? "1.25rem" : undefined,
+          }}
+          onClick={() => {
+            if (!editable) return;
+            ignorePrimaryInputMouseUntilRef.current = performance.now() + 150;
+            setListening(true);
+            invoke("stop_clicker").catch((err) => {
+              error(
+                JSON.stringify({
+                  source: "HotkeyCaptureInput.stopClicker",
+                  error: String(err),
+                }),
+              );
+            });
           }}
-          title="Clear hotkey"
+          onBlur={() => {
+            if (listening) {
+              setListening(false);
+            }
+          }}
+          title={tooltipText}
         >
-          ×
+          {displayText}
         </button>
-      )}
-    </div>
-  );
-}
+        {editable && value && !listening && (
+          <button
+            type="button"
+            className="hk-clear-btn"
+            onClick={(e) => {
+              e.stopPropagation();
+              onChange("");
+            }}
+            title="Clear hotkey"
+          >
+            ×
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+export default HotkeyCaptureInput;
diff --git a/src/components/KeyCaptureInput.tsx b/src/components/KeyCaptureInput.tsx
index 252ed7a6..a5536821 100644
--- a/src/components/KeyCaptureInput.tsx
+++ b/src/components/KeyCaptureInput.tsx
@@ -155,15 +155,13 @@ export default function KeyCaptureInput({
   const stateClass = getStateClass(listening, hasConflict, !!value);
 
   return (
-    <div
-      className={`hk-wrapper ${stateClass} ${className ?? ""}`}
-      style={style}
-    >
+    <div className={`hk-wrapper ${stateClass}`}>
       <button
         ref={inputRef}
         type="button"
-        className="hk-button"
+        className={`${className ?? ""} hk-button`}
         style={{
+          ...style,
           paddingRight: value && !listening ? "1.25rem" : undefined,
         }}
         onClick={() => {
diff --git a/src/components/StatusBar.css b/src/components/StatusBar.css
new file mode 100644
index 00000000..2a21b258
--- /dev/null
+++ b/src/components/StatusBar.css
@@ -0,0 +1,119 @@
+.status-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 1.625rem;
+  padding-inline: 0.75rem;
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+  gap: 1rem;
+}
+
+.status-bar[data-running="true"] {
+  border-top-color: var(--accent-ring);
+}
+
+.status-bar-left {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1;
+}
+
+.status-bar-preset-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-family: var(--font-family-base);
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-md);
+  color: var(--accent-strong);
+  background: var(--accent-soft);
+  border: 1px solid var(--accent-ring);
+  border-radius: var(--radius-sm);
+  padding: 0.0625rem 0.5rem;
+  cursor: pointer;
+  white-space: nowrap;
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.status-bar-preset-btn:hover {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent-strong);
+}
+
+.status-bar-preset-btn svg {
+  flex-shrink: 0;
+  opacity: 0.8;
+}
+
+.status-bar-hint-btn {
+  font-family: var(--font-family-base);
+  font-size: 0.6875rem;
+  color: var(--text-dim);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  white-space: nowrap;
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.15s ease;
+}
+
+.status-bar-hint-btn:hover {
+  color: var(--text-primary);
+}
+
+.status-bar-center {
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-md);
+  color: var(--text-muted);
+  text-align: center;
+  flex: 2;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-bar-center--empty {
+  visibility: hidden;
+}
+
+.status-bar-center--warning {
+  color: var(--accent-yellow);
+}
+
+.status-bar-right {
+  font-size: 0.6875rem;
+  color: var(--text-dim);
+  flex: 1;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.status-bar-version-btn {
+  font-family: var(--font-family-base);
+  font-size: 0.6875rem;
+  color: var(--text-dim);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: color 0.15s ease;
+}
+
+.status-bar-version-btn:hover {
+  color: var(--accent-strong);
+}
diff --git a/src/components/StatusBar.tsx b/src/components/StatusBar.tsx
new file mode 100644
index 00000000..2afc6dcf
--- /dev/null
+++ b/src/components/StatusBar.tsx
@@ -0,0 +1,211 @@
+import { useEffect, useRef, useState } from "react";
+import "./StatusBar.css";
+
+interface Props {
+  activePresetName: string | null;
+  version: string;
+  stopReason: string | null;
+  warning: string | null;
+  running: boolean;
+  paused: boolean;
+  clickCount: number;
+  activeClickPointIndex: number | null;
+  totalClickPoints: number;
+  clickLimit: number;
+  clickLimitEnabled: boolean;
+  timeLimitMs: number;
+  onGoToPresets: () => void;
+  onGoToVersionInfo: () => void;
+}
+
+const STOP_REASON_TEXTS: Record<string, string> = {
+  "Stopped from UI": "Stopped from UI",
+  "Stopped from toggle": "Stopped from toggle",
+  "Stopped from hotkey": "Stopped from hotkey",
+  "Stopped from hold hotkey": "Stopped from hold hotkey",
+  Stopped: "Stopped",
+  "Top-left corner failsafe": "Top-left corner failsafe",
+  "Top-right corner failsafe": "Top-right corner failsafe",
+  "Bottom-left corner failsafe": "Bottom-left corner failsafe",
+  "Bottom-right corner failsafe": "Bottom-right corner failsafe",
+  "Top edge failsafe": "Top edge failsafe",
+  "Right edge failsafe": "Right edge failsafe",
+  "Bottom edge failsafe": "Bottom edge failsafe",
+  "Left edge failsafe": "Left edge failsafe",
+  "Blocked by Alt+Tab": "Blocked by Alt+Tab",
+  "Blocked by process list": "Blocked by process list",
+};
+
+function translateStopReason(stopReason: string | null | undefined): string {
+  if (!stopReason) return "";
+  const staticText = STOP_REASON_TEXTS[stopReason];
+  if (staticText) return staticText;
+
+  const clickLimit = stopReason.match(/^Click limit reached \((.+)\)$/);
+  if (clickLimit) {
+    return `Click limit reached (${clickLimit[1]})`;
+  }
+
+  const timeLimit = stopReason.match(/^Time limit reached \((.+)\)$/);
+  if (timeLimit) {
+    return `Time limit reached (${timeLimit[1]})`;
+  }
+
+  return stopReason;
+}
+
+function formatElapsed(ms: number): string {
+  const totalSec = Math.floor(ms / 1000);
+  const h = Math.floor(totalSec / 3600);
+  const m = Math.floor((totalSec % 3600) / 60);
+  const s = totalSec % 60;
+  if (h > 0) {
+    return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+  }
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+export default function StatusBar({
+  activePresetName,
+  version,
+  stopReason,
+  warning,
+  running,
+  paused,
+  clickCount,
+  activeClickPointIndex,
+  totalClickPoints,
+  clickLimit,
+  clickLimitEnabled,
+  timeLimitMs,
+  onGoToPresets,
+  onGoToVersionInfo,
+}: Props) {
+  const [elapsedMs, setElapsedMs] = useState(0);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const baseElapsedRef = useRef(0);
+  const segmentStartRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (running && !paused) {
+      segmentStartRef.current = Date.now();
+      const tick = () => {
+        setElapsedMs(
+          baseElapsedRef.current + (Date.now() - segmentStartRef.current!),
+        );
+      };
+      tick();
+      intervalRef.current = setInterval(tick, 200);
+    } else if (running && paused) {
+      if (segmentStartRef.current !== null) {
+        baseElapsedRef.current += Date.now() - segmentStartRef.current;
+        segmentStartRef.current = null;
+      }
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      baseElapsedRef.current = 0;
+      segmentStartRef.current = null;
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [running, paused]);
+
+  let centerText = "";
+  let hasWarning = false;
+
+  if (warning) {
+    centerText = `⚠ ${warning}`;
+    hasWarning = true;
+  } else if (running) {
+    const parts: string[] = [];
+
+    if (paused) {
+      parts.push("Paused");
+    }
+
+    if (totalClickPoints > 1 && activeClickPointIndex !== null) {
+      parts.push(`Pt ${activeClickPointIndex + 1}/${totalClickPoints}`);
+    }
+
+    const elapsed = formatElapsed(elapsedMs);
+    if (timeLimitMs > 0) {
+      parts.push(`${elapsed} / ${formatElapsed(timeLimitMs)}`);
+    } else {
+      parts.push(elapsed);
+    }
+
+    if (clickLimitEnabled && clickLimit > 0) {
+      parts.push(`${clickCount} / ${clickLimit} clicks`);
+    } else if (clickCount > 0) {
+      parts.push(`${clickCount} clicks`);
+    }
+
+    if (paused && stopReason) {
+      parts.push(translateStopReason(stopReason));
+    }
+
+    centerText = parts.join("\u00A0\u00A0•\u00A0\u00A0");
+  } else if (stopReason) {
+    const reason = translateStopReason(stopReason);
+    centerText = clickCount > 0 ? `${reason} • ${clickCount} clicks` : reason;
+  }
+
+  return (
+    <div className="status-bar" data-running={running}>
+      <div className="status-bar-left">
+        {activePresetName ? (
+          <button
+            className="status-bar-preset-btn"
+            onClick={onGoToPresets}
+            title="Go to presets"
+          >
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z" />
+            </svg>
+            {activePresetName}
+          </button>
+        ) : (
+          <button
+            className="status-bar-hint-btn"
+            onClick={onGoToPresets}
+            title="Go to presets"
+          >
+            No preset active
+          </button>
+        )}
+      </div>
+      <div
+        className={`status-bar-center ${hasWarning ? "status-bar-center--warning" : ""} ${centerText ? "" : "status-bar-center--empty"}`}
+      >
+        {centerText}
+      </div>
+      <div className="status-bar-right">
+        <button
+          className="status-bar-version-btn"
+          onClick={onGoToVersionInfo}
+          title="Info"
+        >
+          v{version}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/TitleBar.css b/src/components/TitleBar.css
index da2023b3..8462010b 100644
--- a/src/components/TitleBar.css
+++ b/src/components/TitleBar.css
@@ -7,11 +7,22 @@
   width: 100%;
   box-sizing: border-box;
   background: var(--bg-surface);
-  border-bottom: 2px solid var(--border-subtle);
+  border-bottom: 2px solid var(--accent);
   position: relative;
   z-index: 10;
   flex-shrink: 0;
   backdrop-filter: blur(var(--bg-panel-blur, 0px));
+  transition: border-color 0.3s ease;
+}
+
+.window-title-background[data-tab="settings"] {
+  border-bottom: none;
+  height: calc(2.5rem - 2px);
+}
+
+.window-title-background[data-running="true"] {
+  border-bottom-color: var(--accent-strong);
+  box-shadow: inset 0 -1px 0 0 var(--accent-glow-1);
 }
 
 .title-wrapper {
@@ -27,17 +38,44 @@
   font-weight: var(--font-weight-hv);
   font-size: 1rem;
   color: var(--text-muted);
-  letter-spacing: -0.04em;
+  letter-spacing: 0.01em;
   transition:
     color 0.2s ease,
     text-shadow 0.2s ease;
 }
 
 .window-title-background[data-running="true"] .window-title {
-  color: var(--accent-green-strong);
+  color: var(--accent-strong);
   text-shadow:
-    0 0 10px var(--accent-green-glow-1),
-    0 0 18px var(--accent-green-glow-2);
+    0 0 10px var(--accent-glow-1),
+    0 0 18px var(--accent-glow-2);
+}
+
+/* -- Title Horizontal Reveal -- */
+
+.title-flipper {
+  display: inline-block;
+  transform-origin: center center;
+}
+
+.title-flipper.squish-in {
+  animation: squishIn 0.25s ease-out both;
+}
+
+@keyframes squishIn {
+  0% {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+}
+
+.window-title.is-reason {
+  color: var(--accent-yellow);
+  text-shadow: 0 0 0.5rem rgba(254, 188, 46, 0.15);
 }
 
 .settings-button {
@@ -50,7 +88,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 0.375rem;
+  border-radius: var(--radius-sm);
   color: var(--text-dim);
   line-height: 0;
   transition: all 0.5s ease;
@@ -120,21 +158,133 @@
   display: block;
 }
 
+.tab-icon-btn--animate svg {
+  pointer-events: none;
+}
+
+/* Simple - inner bar slides to the right edge */
+.tab-icon-btn--animate[data-tab="simple"] .simple-bar {
+  animation: nav-simple-bar 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+@keyframes nav-simple-bar {
+  0% {
+    transform: translateX(0);
+  }
+  40% {
+    transform: translateX(2.5px);
+  }
+  70% {
+    transform: translateX(-0.5px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+/* Advanced - layers stagger apart */
+.tab-icon-btn--animate[data-tab="advanced"] .adv-layer1 {
+  animation: nav-adv-l1 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+.tab-icon-btn--animate[data-tab="advanced"] .adv-layer2 {
+  animation: nav-adv-l2 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+.tab-icon-btn--animate[data-tab="advanced"] .adv-layer3 {
+  animation: nav-adv-l3 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+@keyframes nav-adv-l1 {
+  0% {
+    transform: translate(0, 0);
+  }
+  40% {
+    transform: translate(2px, -1.5px);
+  }
+  70% {
+    transform: translate(-0.5px, 0.5px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+@keyframes nav-adv-l2 {
+  0% {
+    transform: translateX(0);
+  }
+  40% {
+    transform: translateX(-2px);
+  }
+  70% {
+    transform: translateX(0.5px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes nav-adv-l3 {
+  0% {
+    transform: translate(0, 0);
+  }
+  40% {
+    transform: translate(2px, 1.5px);
+  }
+  70% {
+    transform: translate(-0.5px, -0.5px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+/* Zones - small size bounce */
+.tab-icon-btn--animate[data-tab="zones"] svg {
+  animation: nav-zones-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+@keyframes nav-zones-bounce {
+  0% {
+    transform: scale(1);
+  }
+  40% {
+    transform: scale(1.15);
+  }
+  70% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Click Points - lines wave, dots bounce */
+.tab-icon-btn--animate[data-tab="click-points"] .cp-dot1 {
+  animation: nav-cp-dot 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+.tab-icon-btn--animate[data-tab="click-points"] .cp-dot2 {
+  animation: nav-cp-dot 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s 1 forwards;
+}
+@keyframes nav-cp-dot {
+  0% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-3px);
+  }
+  70% {
+    transform: translateY(1px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
 .window-btn {
-  /* Layout */
   width: 2rem;
   height: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
-
-  /* Reset */
   background: transparent;
   border: none;
-  border-radius: 0.375rem;
+  border-radius: var(--radius-sm);
   cursor: pointer;
-
-  /* Visuals */
   color: var(--text-dim);
   transition: all 0.15s ease;
   -webkit-app-region: no-drag;
@@ -151,37 +301,26 @@
 }
 
 .window-btn.active {
-  color: var(--accent-green-strong);
-  /* background: rgba(255, 255, 255, 0.08); */
+  color: var(--accent-strong);
 }
 
 .window-btn.active:hover {
-  background: var(--accent-green-soft);
+  background: var(--accent-soft);
 }
 
-/* -- Title Horizontal Reveal -- */
-
-.title-flipper {
-  display: inline-block;
-  transform-origin: center center;
+.pin-body {
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.title-flipper.squish-in {
-  animation: squishIn 0.25s ease-out both;
+.window-btn.active .pin-body {
+  transform: translateY(1px);
 }
 
-@keyframes squishIn {
-  0% {
-    transform: scaleX(0);
-    opacity: 0;
-  }
-  100% {
-    transform: scaleX(1);
-    opacity: 1;
-  }
+.pin-needle {
+  transform: translate(12px, 17px) scaleY(0);
+  transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1);
 }
 
-.window-title.is-reason {
-  color: var(--accent-yellow);
-  text-shadow: 0 0 0.5rem rgba(254, 188, 46, 0.15);
+.window-btn.active .pin-needle {
+  transform: translate(12px, 17px) scaleY(1);
 }
diff --git a/src/components/TitleBar.tsx b/src/components/TitleBar.tsx
index 5ef2ab3c..7e25fd9d 100644
--- a/src/components/TitleBar.tsx
+++ b/src/components/TitleBar.tsx
@@ -23,13 +23,11 @@ interface Props {
   tab: Tab;
   setTab: (t: Tab) => void;
   running: boolean;
-  paused: boolean;
-  stopReason?: string | null;
-  stopKey: number;
   isAlwaysOnTop: boolean;
   onToggleAlwaysOnTop: () => Promise<void>;
   onRequestClose: () => Promise<void>;
-  warning?: string | null;
+  stopReason: string | null;
+  statusBarHidden: boolean;
 }
 
 type NavTab = Exclude<Tab, "settings">;
@@ -60,19 +58,19 @@ const DEFAULT_TITLE_STATE: TitleViewState = {
 };
 
 const STOP_REASON_TEXTS: Record<string, string> = {
-  "Stopped from UI": "Stopped from UI",
-  "Stopped from toggle": "Stopped from toggle",
-  "Stopped from hotkey": "Stopped from hotkey",
-  "Stopped from hold hotkey": "Stopped from hold hotkey",
+  "Stopped from UI": "Stopped",
+  "Stopped from toggle": "Stopped",
+  "Stopped from hotkey": "Stopped",
+  "Stopped from hold hotkey": "Stopped",
   Stopped: "Stopped",
-  "Top-left corner failsafe": "Top-left corner failsafe",
-  "Top-right corner failsafe": "Top-right corner failsafe",
-  "Bottom-left corner failsafe": "Bottom-left corner failsafe",
-  "Bottom-right corner failsafe": "Bottom-right corner failsafe",
-  "Top edge failsafe": "Top edge failsafe",
-  "Right edge failsafe": "Right edge failsafe",
-  "Bottom edge failsafe": "Bottom edge failsafe",
-  "Left edge failsafe": "Left edge failsafe",
+  "Top-left corner failsafe": "Corner failsafe",
+  "Top-right corner failsafe": "Corner failsafe",
+  "Bottom-left corner failsafe": "Corner failsafe",
+  "Bottom-right corner failsafe": "Corner failsafe",
+  "Top edge failsafe": "Edge failsafe",
+  "Right edge failsafe": "Edge failsafe",
+  "Bottom edge failsafe": "Edge failsafe",
+  "Left edge failsafe": "Edge failsafe",
   "Blocked by Alt+Tab": "Blocked by Alt+Tab",
   "Blocked by process list": "Blocked by process list",
 };
@@ -83,14 +81,10 @@ function translateStopReason(stopReason: string | null | undefined): string {
   if (staticText) return staticText;
 
   const clickLimit = stopReason.match(/^Click limit reached \((.+)\)$/);
-  if (clickLimit) {
-    return `Click limit reached (${clickLimit[1]})`;
-  }
+  if (clickLimit) return "Click limit reached";
 
   const timeLimit = stopReason.match(/^Time limit reached \((.+)\)$/);
-  if (timeLimit) {
-    return `Time limit reached (${timeLimit[1]})`;
-  }
+  if (timeLimit) return "Time limit reached";
 
   return stopReason;
 }
@@ -109,7 +103,7 @@ const SimpleIcon = memo(function SimpleIcon({ active }: TabIconProps) {
       aria-hidden="true"
     >
       <rect x="7" y="3" width="10" height="18" rx="5" />
-      <path d="M12 7v4" />
+      <path className="simple-bar" d="M12 7v4" />
     </svg>
   );
 });
@@ -127,9 +121,9 @@ const AdvancedIcon = memo(function AdvancedIcon({ active }: TabIconProps) {
       strokeLinejoin="round"
       aria-hidden="true"
     >
-      <path d="m12 3 9 4.5-9 4.5-9-4.5L12 3z" />
-      <path d="m3 12.5 9 4.5 9-4.5" />
-      <path d="m3 17.5 9 4.5 9-4.5" />
+      <path className="adv-layer1" d="m12 3 9 4.5-9 4.5-9-4.5L12 3z" />
+      <path className="adv-layer2" d="m3 12.5 9 4.5 9-4.5" />
+      <path className="adv-layer3" d="m3 17.5 9 4.5 9-4.5" />
     </svg>
   );
 });
@@ -152,13 +146,51 @@ const ZonesIcon = memo(function ZonesIcon({ active }: TabIconProps) {
   );
 });
 
+const ClickPointsIcon = memo(function ClickPointsIcon({
+  active,
+}: TabIconProps) {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={active ? "2.2" : "2"}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path className="cp-line1" d="M4 6h16" />
+      <path className="cp-line2" d="M4 12h12" />
+      <path className="cp-line3" d="M4 18h8" />
+      <circle
+        className="cp-dot1"
+        cx="20"
+        cy="12"
+        r="1.5"
+        fill="currentColor"
+        stroke="none"
+      />
+      <circle
+        className="cp-dot2"
+        cx="16"
+        cy="18"
+        r="1.5"
+        fill="currentColor"
+        stroke="none"
+      />
+    </svg>
+  );
+});
+
 const TAB_ITEMS: readonly TabItem[] = [
   {
     value: "simple",
     label: "Simple",
-    color: "var(--accent-green)",
-    activeBg: "rgba(25, 194, 51, 0.1)",
-    activeFocusRing: "rgba(25, 194, 51, 0.25)",
+    color: "var(--accent)",
+    activeBg: "var(--accent-soft)",
+    activeFocusRing: "var(--accent-ring)",
     icon: ({ active }) => <SimpleIcon active={active} />,
   },
   {
@@ -177,19 +209,25 @@ const TAB_ITEMS: readonly TabItem[] = [
     activeFocusRing: "hsla(208, 85%, 58%, 0.35)",
     icon: ({ active }) => <ZonesIcon active={active} />,
   },
+  {
+    value: "click-points",
+    label: "Click Points",
+    color: "hsl(180 75% 40%)",
+    activeBg: "hsla(180, 75%, 40%, 0.14)",
+    activeFocusRing: "hsla(180, 75%, 40%, 0.35)",
+    icon: ({ active }) => <ClickPointsIcon active={active} />,
+  },
 ] as const;
 
 const TitleBar = memo(function TitleBar({
   tab,
   setTab,
   running,
-  paused,
-  stopReason,
-  stopKey,
   isAlwaysOnTop,
   onToggleAlwaysOnTop,
   onRequestClose,
-  warning,
+  stopReason,
+  statusBarHidden,
 }: Props) {
   const setTabRef = useRef(setTab);
   useEffect(() => {
@@ -215,6 +253,7 @@ const TitleBar = memo(function TitleBar({
       }
       data-tauri-drag-region
       data-running={running}
+      data-tab={tab}
     >
       <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
         <button
@@ -227,8 +266,8 @@ const TitleBar = memo(function TitleBar({
         >
           <svg
             className="settings-svg"
-            width="15"
-            height="15"
+            width="16"
+            height="16"
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -262,11 +301,9 @@ const TitleBar = memo(function TitleBar({
 
       <div className="title-wrapper">
         <AnimatedTitle
-          running={running}
-          paused={paused}
+          statusBarHidden={statusBarHidden}
           stopReason={stopReason}
-          stopKey={stopKey}
-          warning={warning}
+          running={running}
         />
       </div>
 
@@ -290,18 +327,21 @@ const TitleBar = memo(function TitleBar({
           }
           label={
             <svg
+              xmlns="http://www.w3.org/2000/svg"
               width="16"
               height="16"
               viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
+              fill="currentColor"
+              stroke="none"
+              className="lucide lucide-pin-icon lucide-pin"
             >
-              <path d="M8 4h8l-1.4 5.2h-5.2L8 4z" />
-              <path d="M6 9.2h12" />
-              <path d="M12 9.2v10.8" />
+              <path
+                className="pin-body"
+                d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z"
+              />
+              <g className="pin-needle">
+                <path d="M-1 0h2v5H-1z" />
+              </g>
             </svg>
           }
         />
@@ -338,12 +378,14 @@ const TitleBar = memo(function TitleBar({
 });
 
 function AnimatedTitle({
-  running,
-  paused,
+  statusBarHidden,
   stopReason,
-  stopKey,
-  warning,
-}: Pick<Props, "running" | "paused" | "stopReason" | "stopKey" | "warning">) {
+  running,
+}: {
+  statusBarHidden: boolean;
+  stopReason: string | null;
+  running: boolean;
+}) {
   const [titleState, setTitleState] = useState(DEFAULT_TITLE_STATE);
   const frameIdsRef = useRef<number[]>([]);
   const timeoutIdsRef = useRef<number[]>([]);
@@ -369,19 +411,7 @@ function AnimatedTitle({
   useEffect(() => {
     clearScheduledWork();
 
-    if (warning) {
-      lastShownStopReasonRef.current = null;
-      queueFrame(() => {
-        setTitleState({
-          text: `⚠ ${warning}`,
-          isReason: true,
-          flipClass: "",
-        });
-      });
-      return clearScheduledWork;
-    }
-
-    if (running && !paused && !stopReason) {
+    if (!statusBarHidden || !stopReason) {
       lastShownStopReasonRef.current = null;
       queueFrame(() => {
         setTitleState(DEFAULT_TITLE_STATE);
@@ -389,21 +419,7 @@ function AnimatedTitle({
       return clearScheduledWork;
     }
 
-    if (paused) {
-      lastShownStopReasonRef.current = null;
-      queueFrame(() => {
-        setTitleState({
-          text: stopReason
-            ? `Paused: ${translateStopReason(stopReason)}`
-            : "Paused",
-          isReason: true,
-          flipClass: "",
-        });
-      });
-      return clearScheduledWork;
-    }
-
-    if (!stopReason) {
+    if (running) {
       lastShownStopReasonRef.current = null;
       queueFrame(() => {
         setTitleState(DEFAULT_TITLE_STATE);
@@ -437,7 +453,7 @@ function AnimatedTitle({
     }, 5000);
 
     return clearScheduledWork;
-  }, [running, stopKey, warning, paused, stopReason]);
+  }, [statusBarHidden, stopReason, running]);
 
   return (
     <span
@@ -467,13 +483,33 @@ const TabIconButton = memo(function TabIconButton({
   activeBg: string;
   activeFocusRing: string;
 }) {
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  const handleMouseEnter = () => {
+    if (Math.random() < 0.1) {
+      const el = btnRef.current;
+      if (!el) return;
+      el.classList.remove("tab-icon-btn--animate");
+      void el.offsetWidth;
+      el.classList.add("tab-icon-btn--animate");
+    }
+  };
+
+  const handleAnimationEnd = () => {
+    btnRef.current?.classList.remove("tab-icon-btn--animate");
+  };
+
   return (
     <button
+      ref={btnRef}
       onMouseDown={(e) => e.stopPropagation()}
       onClick={() => onClick(value)}
+      onMouseEnter={handleMouseEnter}
+      onAnimationEnd={handleAnimationEnd}
       className={`tab-icon-btn ${active ? "active" : ""}`}
       aria-label={label}
       title={label}
+      data-tab={value}
       style={
         {
           "--active-color": color,
diff --git a/src/components/UnavailableReason.css b/src/components/UnavailableReason.css
index 8c4a840a..881b2c24 100644
--- a/src/components/UnavailableReason.css
+++ b/src/components/UnavailableReason.css
@@ -28,7 +28,7 @@
   background: var(--unavailable-reason-surface);
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
   color: var(--text-primary);
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 11px;
   font-weight: var(--font-weight-md);
   line-height: 1.35;
diff --git a/src/components/Updatebanner.css b/src/components/Updatebanner.css
index fd0a7373..c2831ca5 100644
--- a/src/components/Updatebanner.css
+++ b/src/components/Updatebanner.css
@@ -11,26 +11,26 @@
 }
 
 .update-banner-text {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--update-banner-text-bg);
 }
 .update-banner-text-new-version {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--update-banner-text-fg);
 }
 .update-banner-text-old-version {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 0.75rem;
   font-weight: 500;
   color: var(--update-banner-text-fg);
 }
 
 .update-banner-btn {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 0.6875rem;
   font-weight: 600;
   color: var(--update-banner-text-bg);
@@ -55,7 +55,7 @@
 }
 
 .update-banner-status {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 0.6875rem;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.82);
diff --git a/src/components/panels/SettingsPanel.css b/src/components/panels/SettingsPanel.css
deleted file mode 100644
index aa0caa10..00000000
--- a/src/components/panels/SettingsPanel.css
+++ /dev/null
@@ -1,679 +0,0 @@
-.settings-panel {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-  padding: 0.25rem 0.75rem 1rem;
-  height: 100%;
-  overflow-y: auto;
-}
-
-.settings-panel::-webkit-scrollbar {
-  width: 0.375rem;
-  background: var(--bg-elevated);
-  border-radius: 0.5rem;
-}
-
-.settings-panel::-webkit-scrollbar-thumb {
-  background: var(--text-dim);
-  border-radius: 0.25rem;
-}
-
-.settings-panel::-webkit-scrollbar-thumb:hover {
-  background: #777;
-}
-
-.settings-section-heading {
-  display: flex;
-  flex-direction: column;
-  gap: 0.125rem;
-  padding: 0 0 0.25rem;
-}
-
-.settings-section-title {
-  font-family: var(--font-family-base);
-  font-size: 0.75rem;
-  font-weight: var(--font-weight-li);
-  color: var(--text-muted);
-}
-
-.settings-section-description {
-  font-family: var(--font-family-base);
-  font-size: 0.75rem;
-  font-weight: var(--font-weight-li);
-  color: var(--text-dim);
-}
-
-.settings-label {
-  font-family: var(--font-family-base);
-  font-size: 1rem;
-  font-weight: var(--font-weight-md);
-  letter-spacing: -0.02em;
-  color: var(--text-primary);
-}
-
-.settings-label-group {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  flex: 1;
-  min-width: 0;
-}
-
-.settings-label-group--inline {
-  flex-direction: row;
-  align-items: baseline;
-  gap: 0.5rem;
-}
-
-.settings-sublabel {
-  font-family: var(--font-family-base);
-  font-size: 0.75rem;
-  font-weight: var(--font-weight-li);
-  color: var(--text-muted);
-}
-
-.settings-value {
-  font-family: var(--font-family-base);
-  font-size: 0.875rem;
-  font-weight: var(--font-weight-md);
-  color: var(--text-muted);
-}
-
-.settings-value--mono {
-  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
-}
-
-.settings-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding: 0.625rem 0.75rem;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--container-shadow);
-}
-
-.settings-card-content {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.settings-card .settings-row {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  padding: 0.75rem 0;
-}
-
-.settings-card .settings-row--stacked {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-.settings-card .settings-row:first-child {
-  padding-top: 0.5rem;
-}
-
-.settings-card .settings-row:last-child {
-  padding-bottom: 0;
-}
-
-.settings-row-actions {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.check-update-btn {
-  min-width: 9rem;
-  text-align: center;
-}
-
-.changelog-toggle-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  flex-shrink: 0;
-}
-
-.changelog-arrow {
-  transition: transform 0.15s ease;
-}
-
-.changelog-arrow.open {
-  transform: rotate(90deg);
-}
-
-.settings-seg-group {
-  display: flex;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-  flex-shrink: 0;
-  max-width: 100%;
-}
-
-.settings-seg-btn {
-  font-family: var(--font-family-base);
-  font-size: 0.875rem;
-  font-weight: var(--font-weight-md);
-  padding: 0.3125rem 0.75rem;
-  background: transparent;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  transition:
-    color 50ms ease,
-    background 50ms ease;
-  white-space: nowrap;
-}
-
-.settings-seg-btn:hover {
-  color: var(--text-muted);
-}
-
-.settings-seg-btn.active {
-  background: var(--bg-input);
-  color: var(--text-primary);
-}
-
-.settings-seg-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.settings-btn-primary,
-.settings-btn-secondary,
-.settings-btn-danger,
-.settings-btn-quiet {
-  font-family: var(--font-family-base);
-  font-size: 0.875rem;
-  font-weight: var(--font-weight-md);
-  padding: 0.4375rem 0.75rem;
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition:
-    background 0.15s ease,
-    border-color 0.15s ease,
-    color 0.15s ease;
-}
-
-.settings-btn-primary {
-  background: transparent;
-  border: 1px solid var(--border-subtle);
-  color: var(--accent-green-strong);
-}
-
-.settings-btn-primary:hover {
-  background: var(--accent-green-soft);
-  border-color: var(--accent-green);
-}
-
-.settings-btn-secondary,
-.settings-btn-quiet,
-.settings-btn-danger {
-  background: transparent;
-  border: 1px solid var(--border-subtle);
-}
-
-.settings-btn-secondary {
-  color: var(--text-primary);
-}
-
-.settings-btn-secondary:hover,
-.settings-btn-quiet:hover {
-  background: var(--bg-elevated);
-  border-color: var(--border-focus);
-}
-
-.settings-btn-quiet {
-  color: var(--text-muted);
-}
-
-.settings-btn-danger {
-  color: var(--accent-red);
-}
-
-.settings-btn-danger:hover {
-  background: rgba(255, 115, 106, 0.1);
-  border-color: var(--accent-red);
-}
-
-.settings-btn-danger--compact {
-  padding-inline: 10px;
-}
-
-.settings-btn-primary:disabled,
-.settings-btn-secondary:disabled,
-.settings-btn-danger:disabled,
-.settings-btn-quiet:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.settings-wrapper {
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-}
-
-.settings-fade {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 10vb;
-  background: linear-gradient(to bottom, transparent, var(--bg-base));
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-}
-
-.settings-fade--hidden {
-  opacity: 0;
-}
-
-.settings-note {
-  font-size: 12px;
-  color: var(--text-dim);
-}
-
-.settings-color-controls {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.settings-color-picker {
-  width: 40px;
-  height: 40px;
-  padding: 4px;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-elevated);
-  cursor: pointer;
-}
-
-.settings-color-picker input {
-  width: 100%;
-  height: 100%;
-  border: none;
-  padding: 0;
-  background: transparent;
-  cursor: pointer;
-}
-
-.preset-compose {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.preset-name-input,
-.preset-rename-input {
-  min-width: 0;
-  flex: 1;
-  padding: 9px 12px;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-elevated);
-  color: var(--text-primary);
-  outline: none;
-}
-
-.preset-name-input::placeholder,
-.preset-rename-input::placeholder {
-  color: var(--text-dim);
-}
-
-.preset-name-input:focus,
-.preset-rename-input:focus {
-  border-color: var(--accent-green-ring);
-}
-
-.preset-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  max-height: clamp(20rem, 42vh, 26rem);
-  overflow-y: auto;
-  padding-right: 0.25rem;
-  scrollbar-gutter: stable;
-  overscroll-behavior: contain;
-}
-
-.preset-list::-webkit-scrollbar {
-  width: 0.375rem;
-  background: var(--bg-elevated);
-  border-radius: 0.5rem;
-}
-
-.preset-list::-webkit-scrollbar-thumb {
-  background: var(--text-dim);
-  border-radius: 0.25rem;
-}
-
-.preset-list::-webkit-scrollbar-thumb:hover {
-  background: #777;
-}
-
-.preset-list-shell {
-  position: relative;
-}
-
-.preset-list-fade {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 6rem;
-  background: linear-gradient(to bottom, transparent, var(--bg-base));
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-}
-
-.preset-list-fade--hidden {
-  opacity: 0;
-}
-
-.preset-card {
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  background: var(--bg-elevated);
-  padding: 12px;
-}
-
-.preset-card--active {
-  border-color: var(--accent-green-ring);
-  box-shadow: inset 0 0 0 1px var(--accent-green-soft);
-}
-
-.preset-card-head {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.preset-card-meta {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-width: 0;
-  flex: 1;
-}
-
-.preset-name {
-  font-size: 15px;
-  font-weight: var(--font-weight-md);
-  color: var(--text-primary);
-}
-
-.preset-badges {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-.preset-badge {
-  padding: 3px 8px;
-  border-radius: 999px;
-  background: var(--bg-input);
-  color: var(--text-muted);
-  font-size: 11px;
-  font-weight: var(--font-weight-md);
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.preset-badge--active {
-  background: transparent;
-  border: 1px solid var(--accent-green-ring);
-  color: var(--accent-green-strong);
-}
-
-.preset-actions {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-
-/* -- Social Links -- */
-
-.social-links {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.625rem 0;
-}
-
-.social-icons {
-  display: flex;
-  gap: 0.375rem;
-}
-
-.social-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.875rem;
-  height: 1.875rem;
-  border-radius: var(--radius-sm);
-  color: var(--text-dim);
-  background: transparent;
-  border: 1px solid var(--border-subtle);
-  transition:
-    color 0.15s ease,
-    background 0.15s ease,
-    border-color 0.15s ease;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-.social-icon:hover {
-  color: var(--text-primary);
-  background: var(--bg-elevated);
-  border-color: var(--border-focus);
-}
-
-.social-icon--youtube:hover {
-  color: #ff0033;
-  border-color: rgba(255, 0, 51, 0.45);
-  background: rgba(255, 0, 51, 0.08);
-}
-
-.social-icon--twitch:hover {
-  color: #9146ff;
-  border-color: rgba(145, 70, 255, 0.45);
-  background: rgba(145, 70, 255, 0.08);
-}
-
-.social-icon--github:hover {
-  color: var(--text-primary);
-  border-color: var(--border-focus);
-  background: var(--bg-elevated);
-}
-
-.social-icon--kofi {
-  width: 114px;
-  height: 30px;
-  border-radius: 10px;
-  border: 1px solid var(--border-subtle);
-}
-
-.social-icon--kofi:hover {
-  color: #72a5f2;
-  border-color: #72a5f2;
-  background: #202020;
-}
-
-.social-icon--patreon:hover {
-  color: #ff424d;
-  border-color: rgba(255, 66, 77, 0.4);
-  background: rgba(255, 66, 77, 0.08);
-}
-
-/* -- Usage Stats -- */
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.5rem 1rem;
-  padding: 0.5rem 0;
-}
-
-.stats-grid--compact {
-  gap: 0.25rem 1rem;
-  padding: 0.25rem 0 0.5rem;
-}
-
-.stats-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.stats-cell-label {
-  font-size: 0.75rem;
-  font-weight: var(--font-weight-md);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-dim);
-}
-
-.stats-cell-value {
-  font-size: 1rem;
-  font-weight: var(--font-weight-md);
-  color: var(--text-primary);
-  font-variant-numeric: tabular-nums;
-}
-
-.stats-section-label {
-  font-size: 0.6875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--text-dim);
-  padding: 0.5rem 0 0.25rem;
-  border-top: 1px solid var(--border-subtle);
-  margin-top: 0.25rem;
-}
-
-.stats-empty {
-  font-size: 0.75rem;
-  color: var(--text-dim);
-  padding: 0.75rem 0;
-  text-align: center;
-}
-
-.settings-row .adv-dropdown-trigger {
-  box-sizing: border-box;
-  height: 30px;
-  padding: 0 0.5rem 0 0.5rem;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-md);
-  color: var(--text-primary);
-  font-family: var(--font-family-base);
-  font-size: 0.875rem;
-  font-weight: var(--font-weight-md);
-  transition: border-color 0.15s ease;
-}
-
-.settings-row .adv-dropdown-trigger:hover {
-  border-color: var(--border-focus);
-}
-
-.settings-row .adv-dropdown-menu {
-  border-radius: var(--radius-md);
-  min-width: max-content;
-}
-
-/* Background image controls */
-.settings-bg-image-row {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex-basis: 100%;
-  min-width: 0;
-}
-
-.settings-bg-input {
-  width: 100%;
-  padding: 0.4375rem 0.625rem;
-  border-radius: var(--radius-md);
-  border: 1px solid var(--border-subtle);
-  background: var(--bg-elevated);
-  color: var(--text-primary);
-  font-family: var(--font-family-base);
-  font-size: 0.8125rem;
-  outline: none;
-}
-
-.settings-bg-input::placeholder {
-  color: var(--text-dim);
-}
-
-.settings-bg-input:focus {
-  border-color: var(--accent-green-ring);
-}
-
-.settings-bg-buttons {
-  display: flex;
-  gap: 0.5rem;
-}
-
-/* Opacity controls */
-.settings-opacity-controls {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-shrink: 0;
-}
-
-.settings-opacity-slider {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 8rem;
-  height: 0.375rem;
-  border-radius: 0.25rem;
-  background: var(--bg-input);
-  outline: none;
-  cursor: pointer;
-}
-
-.settings-opacity-slider::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 50%;
-  background: var(--accent-green-strong);
-  border: 2px solid var(--bg-elevated);
-  cursor: pointer;
-  transition: background 0.15s ease;
-}
-
-.settings-opacity-slider::-webkit-slider-thumb:hover {
-  background: var(--accent-green);
-}
-
-.settings-opacity-slider:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.settings-slider-value {
-  font-family: var(--font-family-base);
-  font-size: 0.875rem;
-  font-weight: var(--font-weight-md);
-  color: var(--text-primary);
-  min-width: 3rem;
-  text-align: right;
-  font-variant-numeric: tabular-nums;
-}
diff --git a/src/components/panels/SettingsPanel.tsx b/src/components/panels/SettingsPanel.tsx
deleted file mode 100644
index 24a476ef..00000000
--- a/src/components/panels/SettingsPanel.tsx
+++ /dev/null
@@ -1,1264 +0,0 @@
-import "./SettingsPanel.css";
-import type {
-  AppInfo,
-  PresetDefinition,
-  PresetId,
-  Settings,
-} from "../../store";
-
-import { invoke } from "@tauri-apps/api/core";
-import { error } from "@tauri-apps/plugin-log";
-import { open } from "@tauri-apps/plugin-dialog";
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import { openUrl } from "@tauri-apps/plugin-opener";
-import ConfirmDialog from "../ConfirmDialog";
-import { changelogEntries } from "../../changelog";
-import ChangelogContent from "../ChangelogContent";
-import {
-  DEFAULT_MAX_CLICK_SPEED,
-  DEFAULT_ACCENT_COLOR,
-  MAX_PRESETS,
-  PRESET_NAME_MAX_LENGTH,
-} from "../../settingsSchema";
-
-type PendingAction =
-  | "reset-settings"
-  | "clear-stats"
-  | "extended-click-speed-limit"
-  | null;
-
-const IMAGE_FILTERS = [
-  {
-    name: "Images",
-    extensions: ["png", "jpg", "jpeg", "gif", "bmp", "webp"],
-  },
-];
-
-interface CumulativeStats {
-  totalClicks: number;
-  totalTimeSecs: number;
-  totalSessions: number;
-  avgCpu: number;
-}
-
-interface Props {
-  settings: Settings;
-  update: (patch: Partial<Settings>) => void;
-  running: boolean;
-  appInfo: AppInfo;
-  onSavePreset: (name: string) => boolean;
-  onApplyPreset: (presetId: PresetId) => boolean;
-  onUpdatePreset: (presetId: PresetId) => boolean;
-  onRenamePreset: (presetId: PresetId, name: string) => boolean;
-  onDeletePreset: (presetId: PresetId) => boolean;
-  onToggleAlwaysOnTop: () => Promise<void>;
-  onReset: () => Promise<void>;
-  updateCheckStatus:
-    | "idle"
-    | "checking"
-    | "available"
-    | "unavailable"
-    | "error";
-  onCheckForUpdate: () => void;
-}
-
-function formatTime(totalSeconds: number, language: string): string {
-  if (totalSeconds < 0.01) return "0s";
-  if (totalSeconds < 60) {
-    return `${Math.floor(totalSeconds).toLocaleString(language)}s`;
-  }
-  if (totalSeconds < 3600) {
-    const m = Math.floor(totalSeconds / 60);
-    const s = Math.floor(totalSeconds % 60);
-    return s > 0
-      ? `${m.toLocaleString(language)}m ${s.toLocaleString(language)}s`
-      : `${m.toLocaleString(language)}m`;
-  }
-  const h = Math.floor(totalSeconds / 3600);
-  const m = Math.floor((totalSeconds % 3600) / 60);
-  return m > 0
-    ? `${h.toLocaleString(language)}h ${m.toLocaleString(language)}m`
-    : `${h.toLocaleString(language)}h`;
-}
-
-function formatNumber(n: number, language: string): string {
-  return Math.floor(n).toLocaleString(language);
-}
-
-function formatCpu(
-  cpu: number,
-  language: string,
-  notAvailable: string,
-): string {
-  if (cpu < 0) return notAvailable;
-  return `${cpu.toLocaleString(language, {
-    minimumFractionDigits: 1,
-    maximumFractionDigits: 1,
-  })}%`;
-}
-
-function SettingsSectionHeading({
-  title,
-  description,
-}: {
-  title: string;
-  description?: string;
-}) {
-  return (
-    <div className="settings-section-heading">
-      <span className="settings-section-title">{title}</span>
-      {description ? (
-        <span className="settings-section-description">{description}</span>
-      ) : null}
-    </div>
-  );
-}
-
-function SettingsCard({
-  title,
-  description,
-  children,
-}: {
-  title: string;
-  description?: string;
-  children: ReactNode;
-}) {
-  return (
-    <section className="settings-card">
-      <SettingsSectionHeading title={title} description={description} />
-      <div className="settings-card-content">{children}</div>
-    </section>
-  );
-}
-
-function PresetRow({
-  preset,
-  isActive,
-  isEditing,
-  isConfirmingDelete,
-  running,
-  renameDraft,
-  onRenameDraftChange,
-  onStartRename,
-  onCancelRename,
-  onCommitRename,
-  onApply,
-  onUpdatePreset,
-  onRequestDelete,
-  onCancelDelete,
-  onConfirmDelete,
-}: {
-  preset: PresetDefinition;
-  isActive: boolean;
-  isEditing: boolean;
-  isConfirmingDelete: boolean;
-  running: boolean;
-  renameDraft: string;
-  onRenameDraftChange: (value: string) => void;
-  onStartRename: () => void;
-  onCancelRename: () => void;
-  onCommitRename: () => void;
-  onApply: () => void;
-  onUpdatePreset: () => void;
-  onRequestDelete: () => void;
-  onCancelDelete: () => void;
-  onConfirmDelete: () => void;
-}) {
-  return (
-    <div
-      className={`preset-card ${isActive ? "preset-card--active" : ""}`}
-      data-preset-id={preset.id}
-    >
-      <div className="preset-card-head">
-        <div className="preset-card-meta">
-          {isEditing ? (
-            <input
-              className="preset-rename-input"
-              value={renameDraft}
-              maxLength={PRESET_NAME_MAX_LENGTH}
-              onChange={(event) => onRenameDraftChange(event.target.value)}
-              onKeyDown={(event) => {
-                if (event.key === "Enter") {
-                  event.preventDefault();
-                  onCommitRename();
-                }
-                if (event.key === "Escape") {
-                  event.preventDefault();
-                  onCancelRename();
-                }
-              }}
-              autoFocus
-            />
-          ) : (
-            <span className="preset-name">{preset.name}</span>
-          )}
-          <div className="preset-badges">
-            {isActive && (
-              <span className="preset-badge preset-badge--active">Active</span>
-            )}
-            <span className="preset-badge">
-              {new Date(preset.updatedAt).toLocaleDateString()}
-            </span>
-          </div>
-        </div>
-        <div className="preset-actions">
-          {isEditing ? (
-            <>
-              <button
-                className="settings-btn-secondary"
-                onClick={onCommitRename}
-                disabled={running}
-              >
-                Save
-              </button>
-              <button className="settings-btn-quiet" onClick={onCancelRename}>
-                Cancel
-              </button>
-            </>
-          ) : isConfirmingDelete ? (
-            <>
-              <button
-                className="settings-btn-danger settings-btn-danger--compact"
-                onClick={onConfirmDelete}
-                disabled={running}
-              >
-                Confirm?
-              </button>
-              <button className="settings-btn-quiet" onClick={onCancelDelete}>
-                Cancel
-              </button>
-            </>
-          ) : (
-            <>
-              <button
-                className="settings-btn-primary"
-                onClick={onApply}
-                disabled={running}
-              >
-                Apply
-              </button>
-              <button
-                className="settings-btn-secondary"
-                onClick={onUpdatePreset}
-                disabled={running}
-              >
-                Update
-              </button>
-              <button
-                className="settings-btn-secondary"
-                onClick={onStartRename}
-                disabled={running}
-              >
-                Rename
-              </button>
-              <button
-                className="settings-btn-danger settings-btn-danger--compact"
-                onClick={onRequestDelete}
-                disabled={running}
-              >
-                Delete
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default function SettingsPanel({
-  settings,
-  update,
-  running,
-  appInfo,
-  onSavePreset,
-  onApplyPreset,
-  onUpdatePreset,
-  onRenamePreset,
-  onDeletePreset,
-  onToggleAlwaysOnTop,
-  onReset,
-  updateCheckStatus,
-  onCheckForUpdate,
-}: Props) {
-  const [resetting, setResetting] = useState(false);
-  const [resettingStats, setResettingStats] = useState(false);
-  const [pendingAction, setPendingAction] = useState<PendingAction>(null);
-  const [stats, setStats] = useState<CumulativeStats | null>(null);
-  const [atBottom, setAtBottom] = useState(false);
-  const [presetsAtBottom, setPresetsAtBottom] = useState(true);
-  const [autostartEnabled, setAutostartEnabled] = useState<boolean | null>(
-    null,
-  );
-  const [newPresetName, setNewPresetName] = useState("");
-  const [editingPresetId, setEditingPresetId] = useState<PresetId | null>(null);
-  const [renameDraft, setRenameDraft] = useState("");
-  const [confirmingDeleteId, setConfirmingDeleteId] = useState<PresetId | null>(
-    null,
-  );
-  const [showChangelog, setShowChangelog] = useState(false);
-  const [diagnosticsStatus, setDiagnosticsStatus] = useState<string | null>(
-    null,
-  );
-  const [exporting, setExporting] = useState(false);
-
-  const panelRef = useRef<HTMLDivElement>(null);
-  const presetsListRef = useRef<HTMLDivElement>(null);
-  const language = "en";
-  useEffect(() => {
-    invoke<CumulativeStats>("get_stats")
-      .then(setStats)
-      .catch(() => {});
-    invoke<boolean>("get_autostart_enabled")
-      .then(setAutostartEnabled)
-      .catch(() => setAutostartEnabled(false));
-  }, []);
-
-  useEffect(() => {
-    if (!confirmingDeleteId) {
-      return;
-    }
-
-    const handlePointerDown = (event: PointerEvent) => {
-      const target = event.target;
-      if (!(target instanceof Element)) {
-        return;
-      }
-
-      const presetCard = target.closest("[data-preset-id]");
-      if (presetCard?.getAttribute("data-preset-id") === confirmingDeleteId) {
-        return;
-      }
-
-      setConfirmingDeleteId(null);
-    };
-
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => {
-      document.removeEventListener("pointerdown", handlePointerDown);
-    };
-  }, [confirmingDeleteId]);
-
-  const handleScroll = () => {
-    const el = panelRef.current;
-    if (!el) return;
-    setAtBottom(el.scrollTop + el.clientHeight >= el.scrollHeight - 2);
-  };
-
-  const handlePresetsScroll = () => {
-    const el = presetsListRef.current;
-    if (!el) return;
-    setPresetsAtBottom(el.scrollTop + el.clientHeight >= el.scrollHeight - 2);
-  };
-
-  const handleSavePreset = () => {
-    if (onSavePreset(newPresetName)) {
-      setNewPresetName("");
-      setConfirmingDeleteId(null);
-    }
-  };
-
-  const handleStartRename = (preset: PresetDefinition) => {
-    setConfirmingDeleteId(null);
-    setEditingPresetId(preset.id);
-    setRenameDraft(preset.name);
-  };
-
-  const handleCommitRename = () => {
-    if (!editingPresetId) {
-      return;
-    }
-
-    if (onRenamePreset(editingPresetId, renameDraft)) {
-      setEditingPresetId(null);
-      setRenameDraft("");
-    }
-  };
-
-  const handleCancelRename = () => {
-    setEditingPresetId(null);
-    setRenameDraft("");
-  };
-
-  const handleRequestDelete = (presetId: PresetId) => {
-    setEditingPresetId(null);
-    setRenameDraft("");
-    setConfirmingDeleteId(presetId);
-  };
-
-  const handleConfirmDelete = (presetId: PresetId) => {
-    if (onDeletePreset(presetId)) {
-      setConfirmingDeleteId(null);
-    }
-  };
-
-  const handleBrowseBackgroundImage = async () => {
-    try {
-      const selected = await open({
-        multiple: false,
-        filters: IMAGE_FILTERS,
-      });
-      if (selected) {
-        update({ backgroundImage: selected });
-      }
-    } catch (err) {
-      error(
-        JSON.stringify({
-          source: "SettingsPanel.pickImage",
-          error: String(err),
-        }),
-      );
-    }
-  };
-
-  const handleAlwaysOnTopChange = (nextValue: boolean) => {
-    if (settings.alwaysOnTop === nextValue) {
-      return;
-    }
-
-    void onToggleAlwaysOnTop();
-  };
-
-  const hasStats = stats !== null && stats.totalSessions > 0;
-  const presetLimitReached = settings.presets.length >= MAX_PRESETS;
-  const activeEditingPresetId = running ? null : editingPresetId;
-  const activeConfirmingDeleteId = running ? null : confirmingDeleteId;
-  const onOffOptions = [
-    { value: false, label: "Off" },
-    { value: true, label: "On" },
-  ];
-  const advancedLayoutOptions = [
-    { value: "wide" as const, label: "Wide" },
-    { value: "tall" as const, label: "Tall" },
-  ];
-
-  const handleConfirmResetSettings = async () => {
-    setResetting(true);
-    try {
-      await onReset();
-      setAutostartEnabled(false);
-    } finally {
-      setResetting(false);
-      setPendingAction(null);
-    }
-  };
-
-  const handleConfirmClearStats = async () => {
-    setResettingStats(true);
-    try {
-      const next = await invoke<CumulativeStats>("reset_stats");
-      setStats(next);
-    } catch {
-      // swallow ? failure leaves stats unchanged
-    } finally {
-      setResettingStats(false);
-      setPendingAction(null);
-    }
-  };
-
-  const handleExtendedClickSpeedLimitChange = (nextValue: boolean) => {
-    if (settings.extendedClickSpeedLimit === nextValue) {
-      return;
-    }
-
-    if (nextValue) {
-      setPendingAction("extended-click-speed-limit");
-      return;
-    }
-
-    update({
-      extendedClickSpeedLimit: false,
-      clickSpeed: Math.min(settings.clickSpeed, DEFAULT_MAX_CLICK_SPEED),
-    });
-  };
-
-  const handleConfirmExtendedClickSpeedLimit = () => {
-    update({ extendedClickSpeedLimit: true });
-    setPendingAction(null);
-  };
-
-  useEffect(() => {
-    handlePresetsScroll();
-  }, [settings.presets.length]);
-
-  const updateButtonLabel = {
-    idle: "Check for Update",
-    checking: "Checking...",
-    available: "Update found!",
-    unavailable: "No update found",
-    error: "Check failed",
-  }[updateCheckStatus];
-
-  return (
-    <div className="settings-wrapper">
-      <div className="settings-panel" ref={panelRef} onScroll={handleScroll}>
-        <SettingsCard title="About" description="Version and project links.">
-          <div className="social-links">
-            <span className="settings-label">Support Me</span>
-            <div className="social-icons">
-              <a
-                className="social-icon social-icon--kofi"
-                href="#"
-                title="Ko-fi"
-                onClick={(e) => {
-                  e.preventDefault();
-                  void openUrl("https://ko-fi.com/Z8Z71T8QD4");
-                }}
-              >
-                <img
-                  height="28"
-                  style={{ border: 0, height: "28px" }}
-                  src="https://storage.ko-fi.com/cdn/kofi3.png?v=6"
-                  alt="Buy Me a Coffee at ko-fi.com"
-                />
-              </a>
-
-              <a
-                className="social-icon social-icon--youtube"
-                href="#"
-                title="YouTube"
-                onClick={(e) => {
-                  e.preventDefault();
-                  void openUrl("https://youtube.com/@Blur009");
-                }}
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  width="18"
-                  height="18"
-                >
-                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
-                </svg>
-              </a>
-              <a
-                className="social-icon social-icon--twitch"
-                href="#"
-                title="Twitch"
-                onClick={(e) => {
-                  e.preventDefault();
-                  void openUrl("https://twitch.tv/Blur009");
-                }}
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  width="18"
-                  height="18"
-                >
-                  <path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z" />
-                </svg>
-              </a>
-              <a
-                className="social-icon social-icon--github"
-                href="#"
-                title="GitHub"
-                onClick={(e) => {
-                  e.preventDefault();
-                  void openUrl("https://github.com/Blur009/Blur-AutoClicker");
-                }}
-              >
-                <svg
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  width="18"
-                  height="18"
-                >
-                  <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.2.8-.6v-2c-3.3.7-4-1.4-4-1.4-.5-1.3-1.2-1.7-1.2-1.7-1-.7.1-.7.1-.7 1.1.1 1.7 1.2 1.7 1.2 1 .1.8 1.8 3.4 1.2.1-.7.4-1.2.7-1.5-2.7-.3-5.4-1.3-5.4-6a4.7 4.7 0 0 1 1.2-3.2c-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.2 11.2 0 0 1 6.1 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2a4.7 4.7 0 0 1 1.2 3.2c0 4.7-2.8 5.7-5.4 6 .4.3.8 1 .8 2.1v3.1c0 .4.2.7.8.6A12 12 0 0 0 12 .3" />
-                </svg>
-              </a>
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group settings-label-group--inline">
-              <span className="settings-label">Version</span>
-              <span className="settings-value">v{appInfo.version}</span>
-            </div>
-            <div className="settings-row-actions">
-              <button
-                className="settings-btn-secondary changelog-toggle-btn"
-                onClick={() => setShowChangelog((v) => !v)}
-              >
-                <svg
-                  className={`changelog-arrow${showChangelog ? " open" : ""}`}
-                  width="10"
-                  height="10"
-                  viewBox="0 0 10 10"
-                  fill="none"
-                >
-                  <path
-                    d="M3 1L7 5L3 9"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                {showChangelog ? "Hide Changes" : "Show Changes"}
-              </button>
-              <button
-                className="settings-btn-secondary check-update-btn"
-                onClick={onCheckForUpdate}
-                disabled={updateCheckStatus !== "idle"}
-              >
-                {updateButtonLabel}
-              </button>
-            </div>
-          </div>
-          {showChangelog && <ChangelogContent entries={changelogEntries} />}
-        </SettingsCard>
-
-        <SettingsCard
-          title="Usage"
-          description="Clicking statistics for all sessions."
-        >
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Usage Data</span>
-              <span className="settings-sublabel">
-                Statistics are stored locally and never sent anywhere.
-              </span>
-            </div>
-          </div>
-          {hasStats ? (
-            <div className="stats-grid">
-              <div className="stats-cell">
-                <span className="stats-cell-label">Total Clicks</span>
-                <span className="stats-cell-value">
-                  {formatNumber(stats.totalClicks, language)}
-                </span>
-              </div>
-              <div className="stats-cell">
-                <span className="stats-cell-label">Total Time Clicking</span>
-                <span className="stats-cell-value">
-                  {formatTime(stats.totalTimeSecs, language)}
-                </span>
-              </div>
-              <div className="stats-cell">
-                <span className="stats-cell-label">Average CPU</span>
-                <span className="stats-cell-value">
-                  {formatCpu(stats.avgCpu, language, "N/A")}
-                </span>
-              </div>
-              <div className="stats-cell">
-                <span className="stats-cell-label">Sessions</span>
-                <span className="stats-cell-value">
-                  {formatNumber(stats.totalSessions, language)}
-                </span>
-              </div>
-            </div>
-          ) : (
-            <div className="stats-empty">No session data yet.</div>
-          )}
-          {hasStats && (
-            <div className="settings-row">
-              <div className="settings-label-group">
-                <span className="settings-label">Clear Stats</span>
-                <span className="settings-sublabel">Clear all usage data.</span>
-              </div>
-              <button
-                type="button"
-                className="settings-btn-danger settings-btn-danger--compact"
-                onClick={() => setPendingAction("clear-stats")}
-              >
-                Clear
-              </button>
-            </div>
-          )}
-        </SettingsCard>
-
-        <SettingsCard title="Presets" description="Save and load presets.">
-          <div className="settings-row settings-row--stacked">
-            <div className="settings-label-group">
-              <span className="settings-label">Presets</span>
-              <span className="settings-sublabel">
-                Save and restore to quickly switch configurations.
-              </span>
-            </div>
-            <div className="preset-compose">
-              <input
-                className="preset-name-input"
-                placeholder="Preset name"
-                value={newPresetName}
-                maxLength={PRESET_NAME_MAX_LENGTH}
-                onChange={(event) => setNewPresetName(event.target.value)}
-                onKeyDown={(event) => {
-                  if (event.key === "Enter") {
-                    event.preventDefault();
-                    if (
-                      !running &&
-                      !presetLimitReached &&
-                      newPresetName.trim()
-                    ) {
-                      handleSavePreset();
-                    }
-                  }
-                  if (event.key === "Escape") {
-                    event.preventDefault();
-                    setNewPresetName("");
-                  }
-                }}
-                disabled={running}
-              />
-              <button
-                className="settings-btn-primary"
-                onClick={handleSavePreset}
-                disabled={
-                  running ||
-                  presetLimitReached ||
-                  newPresetName.trim().length === 0
-                }
-              >
-                Save
-              </button>
-            </div>
-            {presetLimitReached && (
-              <span className="settings-note">Max 6 presets allowed</span>
-            )}
-            {running && (
-              <span className="settings-note">Disabled while clicking</span>
-            )}
-            {settings.presets.length > 0 ? (
-              <div className="preset-list-shell">
-                <div
-                  className="preset-list"
-                  ref={presetsListRef}
-                  onScroll={handlePresetsScroll}
-                >
-                  {settings.presets.map((preset) => (
-                    <PresetRow
-                      key={preset.id}
-                      preset={preset}
-                      isActive={settings.activePresetId === preset.id}
-                      isEditing={activeEditingPresetId === preset.id}
-                      isConfirmingDelete={
-                        activeConfirmingDeleteId === preset.id
-                      }
-                      running={running}
-                      renameDraft={
-                        activeEditingPresetId === preset.id
-                          ? renameDraft
-                          : preset.name
-                      }
-                      onRenameDraftChange={setRenameDraft}
-                      onStartRename={() => handleStartRename(preset)}
-                      onCancelRename={handleCancelRename}
-                      onCommitRename={handleCommitRename}
-                      onApply={() => {
-                        setConfirmingDeleteId(null);
-                        onApplyPreset(preset.id);
-                      }}
-                      onUpdatePreset={() => {
-                        setConfirmingDeleteId(null);
-                        onUpdatePreset(preset.id);
-                      }}
-                      onRequestDelete={() => handleRequestDelete(preset.id)}
-                      onCancelDelete={() => setConfirmingDeleteId(null)}
-                      onConfirmDelete={() => handleConfirmDelete(preset.id)}
-                    />
-                  ))}
-                </div>
-                <div
-                  className={`preset-list-fade ${presetsAtBottom ? "preset-list-fade--hidden" : ""}`}
-                />
-              </div>
-            ) : (
-              <div className="stats-empty">No saved presets.</div>
-            )}
-          </div>
-        </SettingsCard>
-
-        <SettingsCard
-          title="Behavior"
-          description="Change how the auto clicker runs."
-        >
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Always on Top</span>
-              <span className="settings-sublabel">
-                Keep the window above others.
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {onOffOptions.map((option) => (
-                <button
-                  key={String(option.value)}
-                  className={`settings-seg-btn ${settings.alwaysOnTop === option.value ? "active" : ""}`}
-                  onClick={() => handleAlwaysOnTopChange(option.value)}
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Stop Hitbox Overlay</span>
-              <span className="settings-sublabel">
-                Show the stop zone boundaries.
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {onOffOptions.map((option) => (
-                <button
-                  key={String(option.value)}
-                  className={`settings-seg-btn ${settings.showStopOverlay === option.value ? "active" : ""}`}
-                  onClick={() => update({ showStopOverlay: option.value })}
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Stop Reason Alert</span>
-              <span className="settings-sublabel">
-                Show a notification when the auto clicker stops.
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {onOffOptions.map((option) => (
-                <button
-                  key={String(option.value)}
-                  className={`settings-seg-btn ${settings.showStopReason === option.value ? "active" : ""}`}
-                  onClick={() => update({ showStopReason: option.value })}
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Strict Hotkey Modifiers</span>
-              <span className="settings-sublabel">
-                Require exact modifier keys for hotkeys.
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {onOffOptions.map((option) => (
-                <button
-                  key={String(option.value)}
-                  className={`settings-seg-btn ${settings.strictHotkeyModifiers === option.value ? "active" : ""}`}
-                  onClick={() =>
-                    update({ strictHotkeyModifiers: option.value })
-                  }
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Stop on Alt+Tab</span>
-              <span className="settings-sublabel">
-                Stop clicking when switching to another window.
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {onOffOptions.map((option) => (
-                <button
-                  key={String(option.value)}
-                  className={`settings-seg-btn ${settings.taskSwitcherStopEnabled === option.value ? "active" : ""}`}
-                  onClick={() =>
-                    update({ taskSwitcherStopEnabled: option.value })
-                  }
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Extended Click Speed Limit</span>
-              <span className="settings-sublabel">
-                Allow click speeds up to 1000 CPS (may affect performance).
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {onOffOptions.map((option) => (
-                <button
-                  key={String(option.value)}
-                  className={`settings-seg-btn ${settings.extendedClickSpeedLimit === option.value ? "active" : ""}`}
-                  onClick={() =>
-                    handleExtendedClickSpeedLimitChange(option.value)
-                  }
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        </SettingsCard>
-
-        <SettingsCard
-          title="Startup"
-          description="Behavior when the app opens."
-        >
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Minimize to Tray</span>
-              <span className="settings-sublabel">
-                Minimize to the system tray instead of the taskbar.
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {onOffOptions.map((option) => (
-                <button
-                  key={String(option.value)}
-                  className={`settings-seg-btn ${settings.minimizeToTray === option.value ? "active" : ""}`}
-                  onClick={() => update({ minimizeToTray: option.value })}
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Run on Startup</span>
-              <span className="settings-sublabel">
-                Start clicking when the app opens.
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {onOffOptions.map((option) => (
-                <button
-                  key={String(option.value)}
-                  className={`settings-seg-btn ${autostartEnabled === option.value ? "active" : ""}`}
-                  disabled={autostartEnabled === null}
-                  onClick={() => {
-                    invoke("set_autostart_enabled", { enabled: option.value })
-                      .then(() => setAutostartEnabled(option.value))
-                      .catch((err) =>
-                        error(
-                          JSON.stringify({
-                            source: "SettingsPanel.setAutostart",
-                            error: String(err),
-                          }),
-                        ),
-                      );
-                  }}
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-        </SettingsCard>
-
-        <SettingsCard
-          title="Appearance"
-          description="Customize how the app looks."
-        >
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Theme</span>
-              <span className="settings-sublabel">
-                Choose between dark and light mode.
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {(["dark", "light"] as const).map((theme) => (
-                <button
-                  key={theme}
-                  className={`settings-seg-btn ${settings.theme === theme ? "active" : ""}`}
-                  onClick={() => update({ theme })}
-                >
-                  {theme === "dark" ? "Dark" : "Light"}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Advanced Layout</span>
-              <span className="settings-sublabel">
-                Panel layout for sequence zones.
-              </span>
-            </div>
-            <div className="settings-seg-group">
-              {advancedLayoutOptions.map((option) => (
-                <button
-                  key={option.value}
-                  className={`settings-seg-btn ${settings.advancedSequenceLayout === option.value ? "active" : ""}`}
-                  onClick={() =>
-                    update({ advancedSequenceLayout: option.value })
-                  }
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Accent Color</span>
-              <span className="settings-sublabel">
-                The primary accent color.
-              </span>
-            </div>
-            <div className="settings-color-controls">
-              <label className="settings-color-picker">
-                <input
-                  type="color"
-                  value={settings.accentColor}
-                  onChange={(event) =>
-                    update({ accentColor: event.target.value })
-                  }
-                />
-              </label>
-              <span className="settings-value settings-value--mono">
-                {settings.accentColor.toUpperCase()}
-              </span>
-              <button
-                className="settings-btn-secondary"
-                onClick={() => update({ accentColor: DEFAULT_ACCENT_COLOR })}
-                disabled={settings.accentColor === DEFAULT_ACCENT_COLOR}
-              >
-                Reset
-              </button>
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Background Image</span>
-              <span className="settings-sublabel">
-                Path or URL to a background image.
-              </span>
-            </div>
-            <div className="settings-bg-image-row">
-              <input
-                className="settings-bg-input"
-                type="text"
-                value={settings.backgroundImage}
-                onChange={(event) =>
-                  update({ backgroundImage: event.target.value })
-                }
-                placeholder="https://example.com/image.png"
-              />
-              <div className="settings-bg-buttons">
-                <button
-                  className="settings-btn-secondary"
-                  onClick={handleBrowseBackgroundImage}
-                >
-                  Browse
-                </button>
-                <button
-                  className="settings-btn-danger settings-btn-danger--compact"
-                  onClick={() => update({ backgroundImage: "" })}
-                  disabled={!settings.backgroundImage}
-                >
-                  Remove
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Background Opacity</span>
-              <span className="settings-sublabel">
-                Transparency of the background image.
-              </span>
-            </div>
-            <div className="settings-opacity-controls">
-              <input
-                type="range"
-                className="settings-opacity-slider"
-                min="0"
-                max="100"
-                value={settings.backgroundOpacity}
-                disabled={!settings.backgroundImage}
-                onChange={(event) =>
-                  update({
-                    backgroundOpacity: Number(event.target.value),
-                  })
-                }
-              />
-              <span className="settings-slider-value">
-                {settings.backgroundOpacity}%
-              </span>
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Panel Opacity</span>
-              <span className="settings-sublabel">
-                Transparency of the settings panel.
-              </span>
-            </div>
-            <div className="settings-opacity-controls">
-              <input
-                type="range"
-                className="settings-opacity-slider"
-                min="0"
-                max="100"
-                value={settings.panelOpacity}
-                onChange={(event) =>
-                  update({
-                    panelOpacity: Number(event.target.value),
-                  })
-                }
-              />
-              <span className="settings-slider-value">
-                {settings.panelOpacity}%
-              </span>
-            </div>
-          </div>
-
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Panel Blur</span>
-              <span className="settings-sublabel">
-                Blur effect behind the panel.
-              </span>
-            </div>
-            <div className="settings-opacity-controls">
-              <input
-                type="range"
-                className="settings-opacity-slider"
-                min="0"
-                max="20"
-                value={settings.panelBlur}
-                onChange={(event) =>
-                  update({
-                    panelBlur: Number(event.target.value),
-                  })
-                }
-              />
-              <span className="settings-slider-value">
-                {settings.panelBlur}px
-              </span>
-            </div>
-          </div>
-        </SettingsCard>
-
-        <SettingsCard
-          title="Reset"
-          description="Reset all settings or usage data."
-        >
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Reset All</span>
-              <span className="settings-sublabel">
-                Reset all settings to their defaults.
-              </span>
-            </div>
-            <button
-              className="settings-btn-danger"
-              onClick={() => setPendingAction("reset-settings")}
-            >
-              Reset
-            </button>
-          </div>
-        </SettingsCard>
-
-        <SettingsCard
-          title="Diagnostics"
-          description="Your logs & crash reports"
-        >
-          <div className="settings-row">
-            <div className="settings-label-group">
-              <span className="settings-label">Diagnostics</span>
-              <span className="settings-sublabel">
-                View or export your diagnostics.
-              </span>
-            </div>
-            <div className="settings-row-actions">
-              <button
-                className="settings-btn-secondary"
-                onClick={async () => {
-                  try {
-                    await invoke("open_diagnostics_folder");
-                  } catch (err) {
-                    error(
-                      JSON.stringify({
-                        source: "SettingsPanel.openDiagnostics",
-                        error: String(err),
-                      }),
-                    );
-                  }
-                }}
-              >
-                Open Folder
-              </button>
-              <button
-                className="settings-btn-secondary"
-                disabled={exporting}
-                onClick={async () => {
-                  setExporting(true);
-                  setDiagnosticsStatus(null);
-                  try {
-                    const path: string = await invoke(
-                      "export_diagnostics_bundle",
-                    );
-                    setDiagnosticsStatus(`Exported to ${path}`);
-                  } catch (err) {
-                    setDiagnosticsStatus("Export failed");
-                    error(
-                      JSON.stringify({
-                        source: "SettingsPanel.exportDiagnostics",
-                        error: String(err),
-                      }),
-                    );
-                  } finally {
-                    setExporting(false);
-                  }
-                }}
-              >
-                {exporting ? "Exporting..." : "Export"}
-              </button>
-            </div>
-          </div>
-          {diagnosticsStatus && (
-            <span className="settings-note">{diagnosticsStatus}</span>
-          )}
-        </SettingsCard>
-      </div>
-      <div
-        className={`settings-fade ${atBottom ? "settings-fade--hidden" : ""}`}
-      ></div>
-      <ConfirmDialog
-        open={pendingAction === "reset-settings"}
-        title="Reset all settings"
-        message="This will reset all settings to their default values. This action cannot be undone."
-        confirmLabel="Reset"
-        busy={resetting}
-        onConfirm={handleConfirmResetSettings}
-        onCancel={() => setPendingAction(null)}
-      />
-      <ConfirmDialog
-        open={pendingAction === "clear-stats"}
-        title="Clear usage data"
-        message="This will clear all usage data. This action cannot be undone."
-        confirmLabel="Clear"
-        busy={resettingStats}
-        onConfirm={handleConfirmClearStats}
-        onCancel={() => setPendingAction(null)}
-      />
-      <ConfirmDialog
-        open={pendingAction === "extended-click-speed-limit"}
-        title="Enable extended click speed limit?"
-        message="This will allow click speeds beyond the default limit. This may affect performance."
-        confirmLabel="Enable"
-        onConfirm={handleConfirmExtendedClickSpeedLimit}
-        onCancel={() => setPendingAction(null)}
-      />
-    </div>
-  );
-}
diff --git a/src/components/panels/SimpleCadenceInput.tsx b/src/components/panels/SimpleCadenceInput.tsx
new file mode 100644
index 00000000..e9765331
--- /dev/null
+++ b/src/components/panels/SimpleCadenceInput.tsx
@@ -0,0 +1,318 @@
+import { useState } from "react";
+import type { CSSProperties, FocusEvent, WheelEvent } from "react";
+import type { RateInputMode, Settings } from "../../store";
+import {
+  convertDurationToRate,
+  convertRateToDuration,
+  type CadenceDurationFields,
+} from "../../cadence";
+import { normalizeIntegerRaw } from "../../numberInput";
+import {
+  getMaxClickSpeed,
+  getMinIntervalMs,
+  type ClickInterval,
+} from "../../settingsSchema";
+import { AdvDropdown } from "./advanced/sections/shared";
+import "./advanced/AdvancedPanel.css";
+import {
+  INTERVAL_OPTIONS,
+  SIMPLE_RATE_INPUT_MODE_OPTIONS,
+  dynamicChWidth,
+  handleDurationBlur,
+  handleDurationWheelStep,
+  handleNumberBlur,
+  handleNumberChange,
+  handleWheelStep,
+  switchCadenceMode,
+} from "../sharedCadence";
+
+function DurationField({
+  value,
+  min,
+  max,
+  onChange,
+  onBlur,
+  onWheel,
+  style,
+  unit,
+  className,
+}: {
+  value: number;
+  min: number;
+  max?: number;
+  onChange: (next: number) => void;
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  onWheel?: (event: WheelEvent<HTMLInputElement>) => void;
+  style?: CSSProperties;
+  unit: string;
+  className?: string;
+}) {
+  return (
+    <div className={className ?? "adv-numbox-sm"}>
+      <input
+        type="number"
+        className={className ? "simple-inline-input" : "adv-number-sm"}
+        value={value}
+        min={min}
+        max={max}
+        onChange={(event) => handleNumberChange(event, onChange)}
+        onBlur={(event) =>
+          onBlur ? onBlur(event) : handleNumberBlur(event, min, max, onChange)
+        }
+        onWheel={(event) =>
+          onWheel
+            ? onWheel(event)
+            : handleWheelStep(event, value, min, max, onChange)
+        }
+        style={style}
+      />
+      <span className={className ? "postfix" : "adv-unit"}>{unit}</span>
+    </div>
+  );
+}
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+export default function SimpleCadenceInput({ settings, update }: Props) {
+  const maxClickSpeed = getMaxClickSpeed(settings.extendedClickSpeedLimit);
+  const [draftCps, setDraftCps] = useState<string | null>(null);
+
+  const updateSimpleCadence = (patch: Partial<Settings>) => {
+    const nextSettings = { ...settings, ...patch };
+
+    if (nextSettings.rateInputMode === "rate") {
+      const converted = convertRateToDuration(nextSettings);
+      update({
+        ...patch,
+        ...(converted ?? {}),
+      });
+      return;
+    }
+
+    const converted = convertDurationToRate(nextSettings);
+    update({
+      ...patch,
+      ...(converted ?? {}),
+    });
+  };
+
+  return (
+    <div className="InputBox cadence-box simple-cadence-box">
+      {settings.rateInputMode === "rate" ? (
+        <div className="simple-cadence-row">
+          <input
+            type="number"
+            className="simple-inline-input simple-cadence-input"
+            value={draftCps ?? settings.clickSpeed}
+            min={1}
+            max={maxClickSpeed}
+            aria-label="Clicks Per"
+            onChange={(event) => {
+              const raw = event.target.value;
+              if (raw === "") {
+                setDraftCps("");
+              } else {
+                const normalized = normalizeIntegerRaw(raw);
+                if (normalized !== raw) event.target.value = normalized;
+                if (normalized === "" || normalized === "-") {
+                  setDraftCps(normalized);
+                  return;
+                }
+                setDraftCps(null);
+                updateSimpleCadence({ clickSpeed: Number(normalized) });
+              }
+            }}
+            onBlur={(event) => {
+              setDraftCps(null);
+              handleNumberBlur(event, 1, maxClickSpeed, (next) =>
+                updateSimpleCadence({ clickSpeed: next }),
+              );
+            }}
+            onWheel={(event) =>
+              handleWheelStep(
+                event,
+                settings.clickSpeed,
+                1,
+                maxClickSpeed,
+                (next) => updateSimpleCadence({ clickSpeed: next }),
+              )
+            }
+          />
+          <div className="vertical-devider vertical-devider--stretch" />
+          <span className="simple-control-label">Clicks Per</span>
+          <div className="vertical-devider vertical-devider--stretch" />
+          <AdvDropdown
+            value={settings.clickInterval}
+            options={INTERVAL_OPTIONS}
+            allowWindowOverflow
+            onChange={(value) =>
+              updateSimpleCadence({ clickInterval: value as ClickInterval })
+            }
+          />
+          <div className="vertical-devider vertical-devider--stretch" />
+          <AdvDropdown
+            value={settings.rateInputMode}
+            options={SIMPLE_RATE_INPUT_MODE_OPTIONS}
+            allowWindowOverflow
+            onChange={(value) =>
+              switchCadenceMode(value as RateInputMode, settings, update)
+            }
+          />
+        </div>
+      ) : (
+        <div className="simple-cadence-row">
+          <div className="simple-duration-group">
+            <DurationField
+              className="simple-duration-chip"
+              value={settings.durationHours}
+              min={0}
+              max={999}
+              onChange={(next) => updateSimpleCadence({ durationHours: next })}
+              onBlur={(event) =>
+                handleDurationBlur(
+                  event,
+                  "durationHours",
+                  0,
+                  999,
+                  settings as CadenceDurationFields,
+                  (patch) => updateSimpleCadence(patch),
+                )
+              }
+              onWheel={(event) =>
+                handleDurationWheelStep(
+                  event,
+                  "durationHours",
+                  settings as CadenceDurationFields,
+                  0,
+                  999,
+                  (patch) => updateSimpleCadence(patch),
+                )
+              }
+              style={{
+                width: dynamicChWidth(settings.durationHours, 1, 3),
+                minWidth: "1ch",
+              }}
+              unit="h"
+            />
+            <DurationField
+              className="simple-duration-chip"
+              value={settings.durationMinutes}
+              min={0}
+              max={59}
+              onChange={(next) =>
+                updateSimpleCadence({ durationMinutes: next })
+              }
+              onBlur={(event) =>
+                handleDurationBlur(
+                  event,
+                  "durationMinutes",
+                  0,
+                  59,
+                  settings as CadenceDurationFields,
+                  (patch) => updateSimpleCadence(patch),
+                )
+              }
+              onWheel={(event) =>
+                handleDurationWheelStep(
+                  event,
+                  "durationMinutes",
+                  settings as CadenceDurationFields,
+                  0,
+                  59,
+                  (patch) => updateSimpleCadence(patch),
+                )
+              }
+              style={{
+                width: dynamicChWidth(settings.durationMinutes, 1, 2),
+                minWidth: "1ch",
+              }}
+              unit="m"
+            />
+            <DurationField
+              className="simple-duration-chip"
+              value={settings.durationSeconds}
+              min={0}
+              max={59}
+              onChange={(next) =>
+                updateSimpleCadence({ durationSeconds: next })
+              }
+              onBlur={(event) =>
+                handleDurationBlur(
+                  event,
+                  "durationSeconds",
+                  0,
+                  59,
+                  settings as CadenceDurationFields,
+                  (patch) => updateSimpleCadence(patch),
+                )
+              }
+              onWheel={(event) =>
+                handleDurationWheelStep(
+                  event,
+                  "durationSeconds",
+                  settings as CadenceDurationFields,
+                  0,
+                  59,
+                  (patch) => updateSimpleCadence(patch),
+                )
+              }
+              style={{
+                width: dynamicChWidth(settings.durationSeconds, 1, 2),
+                minWidth: "1ch",
+              }}
+              unit="s"
+            />
+            <DurationField
+              className="simple-duration-chip"
+              value={settings.durationMilliseconds}
+              min={getMinIntervalMs(settings.extendedClickSpeedLimit)}
+              max={999}
+              onChange={(next) =>
+                updateSimpleCadence({ durationMilliseconds: next })
+              }
+              onBlur={(event) =>
+                handleDurationBlur(
+                  event,
+                  "durationMilliseconds",
+                  getMinIntervalMs(settings.extendedClickSpeedLimit),
+                  999,
+                  settings as CadenceDurationFields,
+                  (patch) => updateSimpleCadence(patch),
+                )
+              }
+              onWheel={(event) =>
+                handleDurationWheelStep(
+                  event,
+                  "durationMilliseconds",
+                  settings as CadenceDurationFields,
+                  getMinIntervalMs(settings.extendedClickSpeedLimit),
+                  999,
+                  (patch) => updateSimpleCadence(patch),
+                )
+              }
+              style={{
+                width: dynamicChWidth(settings.durationMilliseconds, 1, 3),
+                minWidth: "1ch",
+              }}
+              unit="ms"
+            />
+          </div>
+          <div className="vertical-devider vertical-devider--stretch" />
+          <span className="simple-control-label">Per Click</span>
+          <div className="vertical-devider vertical-devider--stretch" />
+          <AdvDropdown
+            value={settings.rateInputMode}
+            options={SIMPLE_RATE_INPUT_MODE_OPTIONS}
+            allowWindowOverflow
+            onChange={(value) =>
+              switchCadenceMode(value as RateInputMode, settings, update)
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/panels/SimplePanel.css b/src/components/panels/SimplePanel.css
index d952bbd2..8d4b48d5 100644
--- a/src/components/panels/SimplePanel.css
+++ b/src/components/panels/SimplePanel.css
@@ -156,14 +156,72 @@
   cursor: pointer;
 }
 
-.simple-key-input {
+.simple-input-type-group {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.simple-input-type-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.125rem;
+  height: 1.75rem;
   background: transparent;
   border: none;
-  outline: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.simple-input-type-btn:hover {
+  color: var(--text-muted);
+  background: var(--bg-elevated);
+}
+
+.simple-input-type-btn.active {
+  background: var(--bg-input);
+  color: var(--text-primary);
+}
+
+.simple-mouse-btn-group {
+  display: flex;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.simple-mouse-btn {
+  height: 1.75rem;
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 3%;
+  text-transform: uppercase;
+  padding: 0 0.5rem;
+  min-width: 2.75rem;
+  text-align: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.simple-mouse-btn:hover {
+  color: var(--text-muted);
+  background: var(--bg-elevated);
+}
+
+.simple-mouse-btn.active {
+  background: var(--bg-input);
   color: var(--text-primary);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  min-width: 0;
 }
 
 .simple-key-case-toggle {
@@ -177,7 +235,7 @@
   border-radius: var(--radius-sm);
   background: transparent;
   color: var(--text-dim);
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-weight: 800;
   line-height: 1;
   cursor: pointer;
@@ -198,7 +256,7 @@
 
 .simple-key-case-toggle:hover:not(:disabled) {
   background: var(--bg-input);
-  border-color: var(--border-focus);
+  border-color: var(--accent-ring);
   color: var(--text-primary);
 }
 
diff --git a/src/components/panels/SimplePanel.tsx b/src/components/panels/SimplePanel.tsx
index e6e10e04..988757cf 100644
--- a/src/components/panels/SimplePanel.tsx
+++ b/src/components/panels/SimplePanel.tsx
@@ -8,15 +8,11 @@ import type { MouseButton, Settings } from "../../store";
 
 import CadenceInput from "../CadenceInput";
 import HotkeyCaptureInput from "../HotkeyCaptureInput";
-import {
-  MODE_OPTIONS,
-  MOUSE_BUTTON_OPTIONS,
-  SETTINGS_LIMITS,
-} from "../../settingsSchema";
+import { MODE_OPTIONS, SETTINGS_LIMITS } from "../../settingsSchema";
 import { isAlphabeticKeyboardKey } from "../../keyboardKeyCase";
 import { conflictsWithAutoPressKey } from "../../hotkeys";
 import KeyCaptureInput from "../KeyCaptureInput";
-import { AdvDropdown } from "./advanced/shared";
+import { AdvDropdown } from "./advanced/sections/shared";
 import "./SimplePanel.css";
 
 interface SimplePanelProps {
@@ -53,7 +49,8 @@ function handleWheelStep(
   event.currentTarget.blur();
   const delta = event.deltaY < 0 ? 1 : -1;
   let step = 1;
-  if (event.shiftKey && event.ctrlKey) step = 10;
+  if (event.shiftKey && event.ctrlKey) step = 100;
+  else if (event.ctrlKey) step = 25;
   else if (event.shiftKey) step = 5;
   apply(clamp(current + delta * step, min, max));
 }
@@ -137,15 +134,6 @@ function SimplePanel({ settings, update }: SimplePanelProps) {
     label: mode === "Toggle" ? "Toggle" : "Hold",
   }));
 
-  const mouseButtonOptions = MOUSE_BUTTON_OPTIONS.map((button) => ({
-    value: button,
-    label: button,
-  }));
-
-  const inputTypeOptions = [
-    { value: "mouse", label: "Mouse" },
-    { value: "keyboard", label: "Key" },
-  ] as const;
   const canToggleKeyboardKeyCase = isAlphabeticKeyboardKey(
     settings.keyboardKey,
   );
@@ -218,35 +206,89 @@ function SimplePanel({ settings, update }: SimplePanelProps) {
 
       <div className="hcontainer simple-row simple-row--bottom">
         <ControlBox className="simple-input-box simple-row-item">
-          <AdvDropdown
-            value={settings.inputType}
-            options={inputTypeOptions}
-            allowWindowOverflow
-            onChange={(value) =>
-              update({ inputType: value as Settings["inputType"] })
-            }
-          />
+          <div className="simple-input-type-group">
+            <button
+              type="button"
+              className={`simple-input-type-btn ${settings.inputType === "mouse" ? "active" : ""}`}
+              onClick={() => update({ inputType: "mouse" })}
+              title="Mouse"
+              aria-label="Mouse"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M12 2a7 7 0 0 0-7 7v6a7 7 0 0 0 14 0V9a7 7 0 0 0-7-7z" />
+                <path d="M12 2v9" />
+                <circle
+                  cx="12"
+                  cy="14"
+                  r="1"
+                  fill="currentColor"
+                  stroke="none"
+                />
+              </svg>
+            </button>
+            <button
+              type="button"
+              className={`simple-input-type-btn ${settings.inputType === "keyboard" ? "active" : ""}`}
+              onClick={() => update({ inputType: "keyboard" })}
+              title="Keyboard"
+              aria-label="Keyboard"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <rect x="2" y="4" width="20" height="14" rx="2" />
+                <line x1="6" y1="8" x2="6" y2="8" />
+                <line x1="10" y1="8" x2="10" y2="8" />
+                <line x1="14" y1="8" x2="14" y2="8" />
+                <line x1="18" y1="8" x2="18" y2="8" />
+                <line x1="8" y1="12" x2="8" y2="12" />
+                <line x1="12" y1="12" x2="12" y2="12" />
+                <line x1="16" y1="12" x2="16" y2="12" />
+                <line x1="7" y1="16" x2="17" y2="16" />
+              </svg>
+            </button>
+          </div>
           <div className="vertical-devider vertical-devider--stretch" />
           {settings.inputType === "mouse" ? (
-            <AdvDropdown
-              value={settings.mouseButton}
-              options={mouseButtonOptions}
-              allowWindowOverflow
-              onChange={(value) =>
-                update({ mouseButton: value as MouseButton })
-              }
-            />
+            <div className="simple-mouse-btn-group">
+              {(["Left", "Middle", "Right"] as const).map((btn) => (
+                <button
+                  key={btn}
+                  type="button"
+                  className={`simple-mouse-btn ${settings.mouseButton === btn ? "active" : ""}`}
+                  onClick={() => update({ mouseButton: btn as MouseButton })}
+                >
+                  {btn}
+                </button>
+              ))}
+            </div>
           ) : (
             <>
               <KeyCaptureInput
-                className="simple-key-input"
+                className="simple-hotkey-input"
                 value={settings.keyboardKey}
                 onChange={(key) => update({ keyboardKey: key })}
                 keyboardKeyCase={settings.keyboardKeyCase}
                 onMouseButtonCapture={(mouseButton) =>
                   update({ inputType: "mouse", mouseButton })
                 }
-                style={{ width: "90px" }}
+                style={{ width: "90px", flexShrink: 0 }}
                 conflicts={autoPressKeyConflicts}
               />
               <button
@@ -274,7 +316,7 @@ function SimplePanel({ settings, update }: SimplePanelProps) {
 
         <ControlBox className="simple-row-item">
           <NumberField
-            label="Click Duration"
+            label="Duty Cycle"
             value={settings.dutyCycle}
             min={SETTINGS_LIMITS.dutyCycle.min!}
             max={SETTINGS_LIMITS.dutyCycle.max!}
@@ -285,12 +327,12 @@ function SimplePanel({ settings, update }: SimplePanelProps) {
 
         <ControlBox className="simple-row-item">
           <NumberField
-            label="Speed Variation"
-            value={settings.speedVariation}
-            min={SETTINGS_LIMITS.speedVariation.min!}
-            max={SETTINGS_LIMITS.speedVariation.max!}
-            onChange={(next) => update({ speedVariation: next })}
-            width={dynamicChWidth(settings.speedVariation)}
+            label="Speed Randomization"
+            value={settings.speedRandomization}
+            min={SETTINGS_LIMITS.speedRandomization.min!}
+            max={SETTINGS_LIMITS.speedRandomization.max!}
+            onChange={(next) => update({ speedRandomization: next })}
+            width={dynamicChWidth(settings.speedRandomization)}
           />
         </ControlBox>
       </div>
diff --git a/src/components/panels/advanced/AdvancedPanel.css b/src/components/panels/advanced/AdvancedPanel.css
index bd077413..df0ae7ae 100644
--- a/src/components/panels/advanced/AdvancedPanel.css
+++ b/src/components/panels/advanced/AdvancedPanel.css
@@ -1,46 +1,11 @@
-.adv-panel {
-  --adv-control-height: 32px;
-}
-
-.adv-seg-group {
-  display: flex;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  min-height: var(--adv-control-height);
-  overflow: hidden;
-  transition-duration: 0.2s;
-  flex-shrink: 0;
-}
-.adv-seg-group:hover {
-  border-color: var(--border-focus);
-}
-.adv-seg-btn {
-  flex: 1;
-  min-width: 4.5rem;
-  height: calc(var(--adv-control-height) - 2px);
-  font-family: "DMSans", sans-serif;
-  font-size: 1rem;
-  font-weight: var(--font-weight-md);
-  line-height: 1.125rem;
-  padding: 0.25rem 0.75rem;
-  background: transparent;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  transition:
-    color 0.2s ease,
-    background 0.2s ease;
-}
-
 .adv-seg-btn-dynamic {
   flex: 1;
   height: calc(var(--adv-control-height) - 2px);
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 1rem;
   font-weight: var(--font-weight-md);
   line-height: 1.125rem;
-  padding: 0.25rem 0.75rem;
+  padding: 0.25rem 1rem;
   background: transparent;
   border: none;
   color: var(--text-dim);
@@ -57,7 +22,7 @@
 
 .adv-seg-btn.active,
 .adv-seg-btn-dynamic.active {
-  background: var(--bg-input);
+  background: var(--accent-soft);
   color: var(--text-primary);
 }
 
@@ -69,47 +34,6 @@
   box-shadow: none;
 }
 
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.adv-panel {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.adv-columns {
-  display: flex;
-  gap: 0.625rem;
-  flex: 1;
-  overflow: hidden;
-}
-
-.adv-columns--tall {
-  display: block;
-  overflow-y: auto;
-  padding-right: 0.25rem;
-  scrollbar-gutter: stable;
-}
-
-.adv-columns--tall::-webkit-scrollbar {
-  width: 0.375rem;
-  background: var(--bg-elevated);
-  border-radius: 0.5rem;
-}
-
-.adv-columns--tall::-webkit-scrollbar-thumb {
-  background: var(--text-dim);
-  border-radius: 0.25rem;
-}
-
-.adv-columns--tall::-webkit-scrollbar-thumb:hover {
-  background: #777;
-}
-
 .adv-col {
   display: flex;
   flex-direction: column;
@@ -117,29 +41,6 @@ input[type="number"]::-webkit-outer-spin-button {
   min-height: 0;
 }
 
-.adv-col--sequence {
-  flex: 0 0 25rem;
-}
-
-.adv-columns--tall .adv-col {
-  min-height: auto;
-}
-
-.adv-columns--tall .adv-sectioncontainer {
-  flex: none;
-}
-
-/* Card */
-.adv-sectioncontainer {
-  background: var(--bg-surface);
-  border: 0px solid var(--border);
-  border-radius: 0.4375rem;
-  padding: 0.625rem 0.75rem;
-  margin-bottom: 0.625rem;
-  flex: 1;
-  box-shadow: var(--container-shadow);
-}
-
 .adv-col > .adv-sectioncontainer:last-child {
   margin-bottom: 0;
 }
@@ -152,18 +53,11 @@ input[type="number"]::-webkit-outer-spin-button {
   flex: none;
 }
 
-.adv-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.5rem;
-}
-
 .adv-cadence-block {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  width: 100%;
+  min-width: 0;
 }
 
 .adv-cadence-header {
@@ -171,13 +65,11 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .adv-cadence-main-row {
-  width: 100%;
   min-width: 0;
-  justify-content: flex-end;
+  justify-content: flex-start;
 }
 
 .adv-cadence-value {
-  flex: 1;
   min-width: 0;
 }
 
@@ -187,7 +79,7 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .adv-cadence-value .adv-value-outline--duration {
-  justify-content: flex-end;
+  justify-content: flex-start;
   background: var(--bg-elevated);
 }
 
@@ -207,6 +99,14 @@ input[type="number"]::-webkit-outer-spin-button {
   padding-inline: 0.875rem;
 }
 
+.adv-conversion-display {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.6875rem;
+  color: var(--text-dim);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 .adv-cadence-duration-row {
   display: flex;
   align-items: center;
@@ -214,29 +114,8 @@ input[type="number"]::-webkit-outer-spin-button {
   flex-wrap: wrap;
 }
 
-.adv-card-title {
-  font-family: "DMSans", sans-serif;
-  font-size: 0.875rem;
-  font-weight: var(--font-weight-hv);
-  color: var(--text-primary);
-  letter-spacing: -0.02em;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* Divider */
-.adv-card-divider {
-  width: 100%;
-  border-radius: 1px;
-  height: 1px;
-  background: var(--border-subtle);
-  margin: 0.5rem 0;
-}
-
 .adv-desc {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 0.6875rem;
   font-weight: var(--font-weight-li);
   color: var(--text-dim);
@@ -244,54 +123,6 @@ input[type="number"]::-webkit-outer-spin-button {
   letter-spacing: 0.02em;
 }
 
-.adv-row {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.adv-row--grow {
-  flex: 1;
-  overflow: hidden;
-  align-items: stretch;
-}
-
-.adv-zones-row {
-  display: flex;
-  gap: 0.625rem;
-  flex: none;
-  align-items: stretch;
-  min-height: 0;
-}
-
-.adv-zones-left {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  min-width: 0;
-}
-
-.adv-zones-right {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-
-.adv-zones-left .adv-sectioncontainer {
-  flex: none;
-}
-
-.adv-zones-right .adv-sectioncontainer {
-  flex: 1;
-  min-height: 0;
-}
-
-.adv-panel--zones {
-  overflow: hidden;
-}
-
 .adv-target-row {
   min-width: 0;
 }
@@ -303,41 +134,15 @@ input[type="number"]::-webkit-outer-spin-button {
   gap: 8px;
   margin-left: auto;
   min-width: 0;
+  flex-wrap: wrap;
 }
 
 .adv-label {
-  font-family: "DMSans", sans-serif;
-  font-size: 0.875rem;
-  font-weight: var(--font-weight-hv);
-  color: var(--text-muted);
-  white-space: nowrap;
-}
-
-.adv-numbox-sm {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  min-height: var(--adv-control-height);
-  padding: 0 0.5rem;
-}
-
-.adv-number-sm {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 0.875rem;
   font-weight: var(--font-weight-hv);
-  color: var(--text-primary);
-}
-
-.adv-unit {
-  font-family: "DMSans", sans-serif;
-  font-size: 0.625rem;
-  font-weight: var(--font-weight-hv);
-  letter-spacing: 0.05em;
   color: var(--text-dim);
-  margin-left: 3px;
+  white-space: nowrap;
 }
 
 .adv-textbox {
@@ -349,10 +154,15 @@ input[type="number"]::-webkit-outer-spin-button {
   min-height: var(--adv-control-height);
   padding: 0;
   min-width: 5rem;
+  transition: border-color 0.15s ease;
+}
+
+.adv-textbox:hover {
+  border-color: var(--accent-ring);
 }
 
 .adv-textbox-text {
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-size: 1rem;
   line-height: 1.125rem;
   padding: 0 0.625rem;
@@ -366,38 +176,10 @@ input[type="number"]::-webkit-outer-spin-button {
   flex: 0 0 auto;
 }
 
-.adv-icon-seg-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 2.375rem;
-  min-width: 2.375rem;
-  width: 2.375rem;
-  padding: 0;
-}
-
-.adv-input-type-icon {
-  display: block;
-  flex: 0 0 auto;
-}
-
 .adv-target-mouse-buttons {
   flex: 0 0 auto;
 }
 
-.adv-key-target-box {
-  width: 8.25rem;
-  min-width: 8.25rem;
-  overflow: hidden;
-}
-
-.adv-key-target-box .adv-key-input {
-  flex: 1 1 auto;
-  box-sizing: border-box;
-  width: 0;
-  min-width: 0;
-}
-
 .adv-key-case-toggle {
   display: inline-flex;
   align-items: center;
@@ -408,7 +190,7 @@ input[type="number"]::-webkit-outer-spin-button {
   border-left: 1px solid var(--border-subtle);
   background: transparent;
   color: var(--text-dim);
-  font-family: "DMSans", sans-serif;
+  font-family: "RobotoFlex", sans-serif;
   font-weight: 800;
   line-height: 1;
   cursor: pointer;
@@ -423,11 +205,12 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 .adv-key-case-toggle--lower {
-  font-size: 0.8125rem;
+  font-size: 1.125rem;
 }
 
-.adv-key-input {
-  font-size: 0.9375rem;
+.adv-key-case-arrow--lower {
+  display: inline-block;
+  transform: rotate(180deg);
 }
 
 .adv-key-case-toggle:hover:not(:disabled) {
@@ -447,1071 +230,127 @@ input[type="number"]::-webkit-outer-spin-button {
   flex-wrap: wrap;
 }
 
-/* ON/OFF toggle */
-.adv-toggle-group {
-  display: flex;
-  background: var(--bg-elevated);
+.adv-pick-btn {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-hv);
+  padding: 0.25rem 0.5rem;
+  background: transparent;
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-sm);
-  min-height: var(--adv-control-height);
-  overflow: hidden;
-  flex-shrink: 0;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
+  width: 100%;
 }
 
-.adv-toggle-group:hover {
-  border-color: var(--);
+.adv-pick-btn:hover {
+  border-color: var(--text-dim);
+  color: var(--text-primary);
 }
 
-.adv-toggle-btn {
-  font-family: "DMSans", sans-serif;
-  font-size: 0.75rem;
-  font-weight: 800;
-  letter-spacing: 4%;
-  text-transform: uppercase;
-  height: calc(var(--adv-control-height) - 2px);
-  padding: 0 0.5rem;
-  min-width: 2.1875rem;
-  text-align: center;
-  background: transparent;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  transition:
-    color 50ms ease,
-    background 50ms ease;
+.adv-pick-btn:disabled {
+  opacity: 0.6;
+  cursor: progress;
 }
 
-.adv-toggle-btn:hover {
-  color: var(--text-muted);
+.adv-value-outline {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: stretch;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  min-height: var(--adv-control-height);
+  transition: border-color 0.2s ease;
+  overflow: hidden;
 }
 
-.adv-toggle-on.active {
-  background: #3a8a5c;
-  color: var(--text-primary);
+.adv-value-outline:hover {
+  border-color: var(--accent-ring);
 }
 
-.adv-toggle-off.active {
-  background: var(--bg-input);
-  color: #a33c3c;
+.adv-value-outline > .adv-foc > .adv-seg-group {
+  background: transparent;
+  border-color: transparent;
 }
 
-/* Corner/Edge Trigger grid */
-.adv-corner-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.375rem;
+/*
+  Value Outline item states
+  .adv-foc = focused (interactive element, distinct bg)
+  .adv-unf = unfocused (label/passthrough, transparent bg)
+*/
+.adv-foc {
+  min-height: calc(var(--adv-control-height) - 2px);
+  background: var(--bg-elevated);
+  display: flex;
+  align-items: center;
+  padding: 0 0.5rem;
   flex-shrink: 0;
 }
 
-.adv-corner-box {
+.adv-foc-grow {
+  flex: 1;
+}
+
+.adv-unf {
+  min-height: calc(var(--adv-control-height) - 2px);
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 2px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: 0.375rem;
-  padding: 0.25rem 0.5rem;
-  position: relative;
-  overflow: hidden;
+  padding: 0 0.5rem;
+  flex-shrink: 0;
+  color: var(--text-dim);
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.8rem;
 }
 
-.adv-stop-boundary-box {
-  height: 30px;
-  box-sizing: border-box;
-  padding-top: 0;
-  padding-bottom: 0;
+/* Number inputs inside focused items */
+.adv-foc .adv-number-sm {
+  color: var(--text-primary);
+  font-size: 1rem;
 }
 
-.adv-stop-boundary-box .adv-number-sm {
-  height: 28px;
-  line-height: 28px;
-  box-sizing: border-box;
+.adv-vdivider {
+  width: 1px;
+  background: var(--border-subtle);
+  flex-shrink: 0;
 }
 
-/* Quarter circle arcs for corner stop */
-.adv-arc {
-  position: absolute;
-  width: 0.625rem;
-  height: 0.625rem;
-  border: 2px solid var(--accent-green);
-  pointer-events: none;
+.adv-foc-grow .adv-dropdown {
+  width: 100%;
 }
 
-.adv-arc-tl {
-  top: 0px;
-  left: 0px;
-  border-right: none;
-  border-bottom: none;
-  border-top-left-radius: 0.375rem;
+.adv-panel--grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+  align-content: start;
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: hidden;
 }
 
-.adv-arc-tr {
-  top: 0px;
-  right: 0px;
-  border-left: none;
-  border-bottom: none;
-  border-top-right-radius: 0.375rem;
+.adv-panel--grid > .adv-sectioncontainer {
+  margin-bottom: 0;
+  min-width: 0;
+  box-shadow: none;
 }
 
-.adv-arc-bl {
-  bottom: 0px;
-  left: 0px;
-  border-right: none;
-  border-top: none;
-  border-bottom-left-radius: 0.375rem;
+.adv-panel--grid .adv-seg-group {
+  flex-shrink: 1;
 }
 
-.adv-arc-br {
-  bottom: 0px;
-  right: 0px;
-  border-left: none;
-  border-top: none;
-  border-bottom-right-radius: 0.375rem;
-}
-
-/* Edge bars for edge stop */
-.adv-edge-bar {
-  position: absolute;
-  background: var(--accent-green);
-  border-radius: 2px;
-  pointer-events: none;
-}
-
-.adv-edge-bar-top {
-  top: 0;
-  left: 0px;
-  right: 0px;
-  height: 2px;
-}
-.adv-edge-bar-bottom {
-  bottom: 0;
-  left: 0px;
-  right: 0px;
-  height: 2px;
-}
-.adv-edge-bar-left {
-  left: 0;
-  top: 0px;
-  bottom: 0px;
-  width: 2px;
-}
-.adv-edge-bar-right {
-  right: 0;
-  top: 0px;
-  bottom: 0px;
-  width: 2px;
-}
-
-.adv-pick-btn {
-  font-family: "DMSans", sans-serif;
-  font-size: 0.6875rem;
-  font-weight: var(--font-weight-hv);
-  padding: 0.25rem 0.5rem;
-  background: transparent;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  cursor: pointer;
-  transition:
-    border-color 0.15s ease,
-    color 0.15s ease;
-  width: 100%;
-}
-
-.adv-pick-btn:hover {
-  border-color: var(--text-dim);
-  color: var(--text-primary);
-}
-
-.adv-secondary-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 30px;
-  box-sizing: border-box;
-  font-family: "DMSans", sans-serif;
-  font-size: 12px;
-  font-weight: var(--font-weight-hv);
-  padding: 0 8px;
-  line-height: 1;
-  background: transparent;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  color: var(--text-muted);
-  cursor: pointer;
-  transition:
-    border-color 0.15s ease,
-    color 0.15s ease,
-    opacity 0.15s ease;
-}
-
-.adv-secondary-btn:hover {
-  border-color: var(--text-dim);
-  color: var(--text-primary);
-}
-
-.adv-secondary-btn:disabled,
-.adv-pick-btn:disabled {
-  opacity: 0.6;
-  cursor: progress;
-}
-
-.adv-sequence-card {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-  width: 25rem;
-}
-
-.adv-columns--wide .adv-sequence-card {
-  flex: 1;
-}
-
-.adv-columns--tall .adv-sequence-card {
-  width: auto;
-  height: clamp(18rem, 38vh, 24rem);
-  min-height: 18rem;
-}
-
-.adv-sequence-card .adv-disabled-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.adv-sequence-card .adv-disabled-container > :first-child {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.adv-sequence-card .adv-disabled-content {
-  flex: 1;
-  min-height: 0;
-}
-
-.adv-sequence-body,
-.adv-stop-zone-body {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  align-items: stretch;
-  min-height: 0;
-  height: 100%;
-}
-
-.adv-sequence-controls,
-.adv-stop-zone-controls {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+.adv-panel--grid .adv-seg-btn {
   min-width: 0;
-  flex: 1;
-  width: 100%;
-  min-height: 0;
-}
-
-.adv-sequence-toolbar {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  flex-shrink: 0;
-}
-
-.adv-sequence-list-shell {
-  position: relative;
-  width: 100%;
-  flex: 1 1 auto;
-  height: 0;
-  min-height: 0;
-}
-
-.adv-sequence-list {
-  display: block;
-  position: relative;
-  z-index: 0;
-  width: 100%;
-  overflow-y: auto;
-  min-height: 0;
-  height: 100%;
-  padding: 0 2px 0 0;
-  box-sizing: border-box;
-  scrollbar-gutter: stable;
-}
-
-.adv-sequence-list::-webkit-scrollbar {
-  width: 0.375rem;
-  background: var(--bg-elevated);
-  border-radius: 0.5rem;
-}
-
-.adv-sequence-list::-webkit-scrollbar-thumb {
-  background: var(--text-dim);
-  border-radius: 0.25rem;
-}
-
-.adv-sequence-list::-webkit-scrollbar-thumb:hover {
-  background: #777;
-}
-
-.adv-sequence-list > * + * {
-  margin-top: 6px;
-}
-
-.adv-sequence-list-endcap {
-  min-height: 1.875rem;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding-bottom: 0.125rem;
-  font-family: "DMSans", sans-serif;
-  font-size: 0.6875rem;
-  font-weight: var(--font-weight-md);
-  color: var(--text-dim);
-  letter-spacing: 0.02em;
-  user-select: none;
-}
-
-.adv-sequence-empty {
-  font-family: "DMSans", sans-serif;
-  font-size: 12px;
-  color: var(--text-dim);
-  border: 1px dashed var(--border-subtle);
-  border-radius: var(--radius-sm);
-  padding: 10px 12px;
-  width: 100%;
-  box-sizing: border-box;
-  overflow-wrap: break-word;
-  word-break: break-word;
-}
-
-.adv-sequence-item {
-  display: grid;
-  grid-template-columns:
-    28px minmax(0, auto) minmax(0, auto) minmax(0, auto)
-    auto;
-  gap: 6px;
-  align-items: center;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  padding: 6px;
-  background: var(--bg-elevated);
-  width: 100%;
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  min-height: fit-content;
-  position: relative;
-  overflow: hidden;
-  --sequence-step-duration: 1ms;
-  --sequence-step-clicks: 1;
-  transition:
-    border-color 220ms ease,
-    box-shadow 280ms ease,
-    background-color 220ms ease;
-}
-
-.adv-sequence-leading {
-  width: 28px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
-.adv-sequence-index {
-  font-family: "DMSans", sans-serif;
-  font-size: 12px;
-  font-weight: var(--font-weight-hv);
-  color: var(--text-dim);
-  text-align: center;
-  transition: opacity 0.12s ease;
-}
-
-.adv-sequence-drag-handle {
-  position: absolute;
-  inset: 0;
-  margin: auto;
-  width: 24px;
-  height: 24px;
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text-muted);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  pointer-events: none;
-  cursor: grab;
-  touch-action: none;
-  transition:
-    color 0.15s ease,
-    border-color 0.15s ease,
-    opacity 0.12s ease;
-}
-
-.adv-sequence-drag-handle:active {
-  cursor: grabbing;
-}
-
-.adv-sequence-item:hover .adv-sequence-drag-handle,
-.adv-sequence-item:focus-within .adv-sequence-drag-handle,
-.adv-sequence-item.adv-sequence-item--dragging .adv-sequence-drag-handle {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.adv-sequence-item:hover .adv-sequence-index,
-.adv-sequence-item:focus-within .adv-sequence-index,
-.adv-sequence-item.adv-sequence-item--dragging .adv-sequence-index {
-  opacity: 0;
-}
-
-.adv-sequence-drag-handle:hover {
-  color: var(--text-primary);
-  border-color: var(--border-subtle);
-}
-
-.adv-sequence-item--dragging,
-.adv-sequence-item--dragging .adv-sequence-drag-handle {
-  cursor: grabbing;
-}
-
-.adv-sequence-item--dragging {
-  opacity: 0.9;
-  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
-}
-
-.adv-sequence-item::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 2px;
-  background: color-mix(in srgb, var(--border-subtle) 80%, transparent);
-  pointer-events: none;
 }
 
-.adv-sequence-progress {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 2px;
-  transform: scaleX(0);
-  transform-origin: left center;
-  background: linear-gradient(
-    90deg,
-    rgba(58, 138, 92, 0.82) 0%,
-    rgba(86, 202, 124, 0.98) 100%
-  );
-  transition: opacity 40ms linear;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.adv-sequence-item--active .adv-sequence-progress {
-  opacity: 1;
-  animation: adv-sequence-step-progress var(--sequence-step-duration) linear
-    forwards;
-  animation-timing-function: steps(var(--sequence-step-clicks), end);
-}
-
-@keyframes adv-sequence-step-progress {
-  from {
-    transform: scaleX(0);
-  }
-
-  to {
-    transform: scaleX(1);
-  }
-}
-
-.adv-sequence-item > :not(.adv-sequence-progress) {
-  position: relative;
-  z-index: 1;
-}
-
-.adv-sequence-coord {
+.adv-panel--grid .adv-cadence-mode-toggle .adv-seg-btn {
   min-width: 0;
-  min-height: 26px;
-  padding: 0 0.35rem;
-}
-
-.adv-sequence-coord .adv-number-sm {
-  height: 26px;
-  line-height: 26px;
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.adv-sequence-position {
-  width: calc(6ch + 0.75rem);
-}
-
-.adv-stop-zone-input {
-  height: 30px;
-  box-sizing: border-box;
-}
-
-.adv-stop-zone-input .adv-number-sm {
-  height: 28px;
-  line-height: 28px;
-  box-sizing: border-box;
 }
 
-.adv-sequence-clicks {
+.adv-panel--grid .adv-key-target-box {
   min-width: 0;
-}
-
-.adv-sequence-actions,
-.adv-stop-zone-actions {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-}
-
-.adv-sequence-actions {
-  margin-left: auto;
-}
-
-.adv-sequence-delete {
-  width: 24px;
-  height: 24px;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  background: transparent;
-  color: var(--text-muted);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition:
-    color 0.15s ease,
-    border-color 0.15s ease;
-}
-
-.adv-sequence-delete:hover {
-  color: #e24d4d;
-  border-color: #e24d4d;
-}
-
-.adv-sequence-list-fade {
-  position: absolute;
-  z-index: 2;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 1.75rem;
-  pointer-events: none;
-  background: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%);
-}
-
-.adv-stop-zone-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
-}
-
-/* Container for the disabled section */
-.adv-disabled-container {
-  position: relative;
-  transition: opacity 0.3s ease;
-}
-
-.adv-disabled-content {
-  opacity: 0.35;
-  pointer-events: none;
-}
-
-.adv-disabled-overlay {
-  position: absolute;
-  inset: -0.25rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(255, 255, 255, 0.01);
-  backdrop-filter: blur(0px);
-  border-radius: var(--radius-md);
-  opacity: 0;
-  pointer-events: none;
-  transition: all 0.2s ease;
-  z-index: 10;
-}
-
-.adv-disabled-container:hover .adv-disabled-overlay {
-  opacity: 1;
-  backdrop-filter: blur(2px);
-  background: rgba(0, 0, 0, 0.1);
-  pointer-events: auto;
-}
-
-.adv-disabled-label {
-  font-family: "DMSans", sans-serif;
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  color: var(--text-muted);
-  background: var(--bg-surface);
-  padding: 0.25rem 0.625rem;
-  border-radius: 1.25rem;
-  border: 1px solid var(--border-subtle);
-  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
-}
-
-.adv-disabled-content .adv-edge-bar,
-.adv-disabled-content .adv-arc {
-  border-color: var(--border-subtle) !important;
-  background: var(--border-subtle) !important;
-  opacity: 0.3;
-}
-
-.adv-toggle-btn.adv-disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.adv-number-sm {
-  font-family: "DMSans", sans-serif;
-  font-size: 0.75rem;
-  font-weight: var(--font-weight-hv);
-  color: var(--text-dim);
-  background: transparent;
-  border: none;
-  outline: none;
-}
-
-.adv-info-icon {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  cursor: help;
-  color: var(--text-dim);
-  transition: color 0.15s ease;
-  user-select: none;
-  z-index: 2000;
-  isolation: isolate;
-}
-
-.adv-info-icon:hover {
-  color: var(--text-muted);
-}
-
-.adv-info-tooltip {
-  visibility: hidden;
-  opacity: 0;
-  position: absolute;
-  bottom: calc(100% + 6px);
-  left: 0;
-  transform: none;
-  width: 220px;
-  padding: 6px 8px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  font-family: "DMSans", sans-serif;
-  font-size: 0.6875rem;
-  font-weight: var(--font-weight-li);
-  color: var(--text-muted);
-  line-height: 1.5;
-  letter-spacing: 0.02em;
-  text-align: left;
-  z-index: 3000;
-  pointer-events: none;
-  transition:
-    opacity 0.15s ease,
-    visibility 0.15s ease;
-  box-shadow: var(--container-shadow);
-}
-
-.adv-info-icon:hover .adv-info-tooltip {
-  visibility: visible;
-  opacity: 1;
-}
-
-.adv-info-tooltip--portal {
-  position: fixed;
-  visibility: visible;
-  opacity: 1;
-  bottom: auto;
-  z-index: 9999;
-}
-
-/* 
-  Container and Insides for selectors
-*/
-
-.adv-value-outline {
-  margin-left: auto;
-  display: inline-flex;
-  align-items: stretch;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  min-height: var(--adv-control-height);
-  transition: border-color 0.2s ease;
-  overflow: hidden;
-}
-
-.adv-value-outline:hover {
-  border-color: var(--border-focus);
-}
-
-.adv-value-outline > .adv-foc > .adv-seg-group {
-  background: transparent;
-  border-color: transparent;
-}
-
-/*
-  Value Outline item states
-  .adv-foc = focused (interactive element, distinct bg)
-  .adv-unf = unfocused (label/passthrough, transparent bg)
-*/
-.adv-foc {
-  min-height: calc(var(--adv-control-height) - 2px);
-  background: var(--bg-elevated);
-  display: flex;
-  align-items: center;
-  padding: 0 0.5rem;
-  flex-shrink: 0;
-}
-
-.adv-foc-grow {
-  flex: 1;
-}
-
-.adv-unf {
-  min-height: calc(var(--adv-control-height) - 2px);
-  display: flex;
-  align-items: center;
-  padding: 0 0.5rem;
-  flex-shrink: 0;
-  color: var(--text-dim);
-  font-family: "DMSans", sans-serif;
-  font-size: 0.8rem;
-}
-
-/* Number inputs inside focused items */
-.adv-foc .adv-number-sm {
-  color: var(--text-primary);
-  font-size: 1rem;
-}
-
-.adv-vdivider {
-  width: 1px;
-  background: var(--border-subtle);
-  flex-shrink: 0;
-}
-
-/*  
-    Advanced Drop-Down
-*/
-.adv-dropdown-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  z-index: 100;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  box-shadow: var(--container-shadow);
-  overflow: hidden;
-  min-width: fit-content;
-}
-
-.adv-dropdown {
-  position: relative;
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
-.adv-foc-grow .adv-dropdown {
-  width: 100%;
-}
-
-.adv-dropdown-trigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  min-height: calc(var(--adv-control-height) - 2px);
-  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
-  background: transparent;
-  border: none;
-  color: var(--text-primary);
-  font-family: "DMSans", sans-serif;
-  font-size: 1rem;
-  font-weight: var(--font-weight-md);
-  cursor: pointer;
-  transition: color 0.15s ease;
-  gap: 2px;
-}
-
-.adv-dropdown-trigger:hover {
-  color: var(--text-primary);
-}
-
-.adv-dropdown-item {
-  display: block;
-  width: 100%;
-  padding: 0.375rem 0.75rem;
-  background: transparent;
-  border: none;
-  color: var(--text-dim);
-  font-family: "DMSans", sans-serif;
-  font-size: 1rem;
-  font-weight: var(--font-weight-md);
-  cursor: pointer;
-  text-align: left;
-  transition:
-    color 0.1s ease,
-    background 0.1s ease;
-}
-
-.adv-dropdown-item:hover {
-  color: var(--text-primary);
-  background: var(--bg-input);
-}
-
-.adv-dropdown-item.active {
-  color: var(--text-primary);
-  background: var(--bg-input);
-}
-
-.adv-process-list-section {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.adv-process-list-section .unavailable-reason--block {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-height: 0;
-}
-
-.adv-process-list-section .adv-disabled-container {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-}
-
-.adv-process-list-section .adv-disabled-container > :first-child {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  flex: 1;
-}
-
-.adv-whitelist-warning {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-family: "DMSans", sans-serif;
-  font-size: 0.75rem;
-  color: var(--text-warning, #b8860b);
-  background: color-mix(in srgb, var(--text-warning, #b8860b) 10%, transparent);
-  border: 1px solid
-    color-mix(in srgb, var(--text-warning, #b8860b) 30%, transparent);
-  border-radius: var(--radius-sm);
-  padding: 0.5rem 0.625rem;
-  margin-bottom: 0.5rem;
-}
-
-.adv-process-list {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  padding-right: 4px;
-}
-
-.adv-process-list::-webkit-scrollbar {
-  width: 0.375rem;
-  background: var(--bg-elevated);
-  border-radius: 0.5rem;
-}
-
-.adv-process-list::-webkit-scrollbar-thumb {
-  background: var(--text-dim);
-  border-radius: 0.25rem;
-}
-
-.adv-process-list::-webkit-scrollbar-thumb:hover {
-  background: #777;
-}
-
-.adv-process-list .adv-sequence-item {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 10px;
-  cursor: pointer;
-  grid-template-columns: none;
-  transition:
-    border-color 0.15s ease,
-    background 0.15s ease;
-}
-
-.adv-process-list .adv-sequence-item:hover {
-  border-color: var(--text-dim);
-  background: var(--bg-input);
-}
-
-.adv-process-list .adv-sequence-item + .adv-sequence-item {
-  margin-top: 6px;
-}
-
-.adv-process-list .adv-sequence-item::before {
-  display: none;
-}
-
-.adv-proc-checkbox {
-  appearance: none;
-  -webkit-appearance: none;
-  width: 16px;
-  height: 16px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 3px;
-  background: var(--bg-elevated);
-  cursor: pointer;
-  flex-shrink: 0;
-  transition:
-    border-color 0.15s ease,
-    background 0.15s ease;
-  position: relative;
-}
-
-.adv-proc-checkbox:hover {
-  border-color: var(--text-dim);
-}
-
-.adv-proc-checkbox:checked {
-  background: #3a8a5c;
-  border-color: #3a8a5c;
-}
-
-.adv-proc-checkbox:checked::after {
-  content: "✓";
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.adv-proc-name {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: "DMSans", sans-serif;
-  font-size: 0.8125rem;
-  font-weight: 700;
-  color: var(--text-primary);
-}
-
-.adv-proc-exe {
-  font-family: "DMSans", sans-serif;
-  font-size: 0.6875rem;
-  color: var(--text-dim);
-  flex-shrink: 0;
-}
-
-.adv-proc-icon {
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.adv-proc-behavior-toggle {
-  display: flex;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  overflow: hidden;
-  flex-shrink: 0;
-  margin-left: auto;
-}
-
-.adv-proc-behavior-toggle .adv-toggle-btn {
-  font-size: 0.6875rem;
-  font-weight: 700;
-  letter-spacing: 3%;
-  text-transform: uppercase;
-  height: 1.625rem;
-  padding: 0 0.5rem;
-  min-width: 2rem;
-  text-align: center;
-  background: transparent;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  transition:
-    color 50ms ease,
-    background 50ms ease;
-}
-
-.adv-proc-behavior-toggle .adv-toggle-btn:hover {
-  color: var(--text-muted);
-}
-
-.adv-proc-behavior-toggle .adv-toggle-on.active {
-  background: #3a8a5c;
-  color: var(--text-primary);
-}
-
-.adv-proc-behavior-toggle .adv-toggle-off.active {
-  background: var(--bg-input);
-  color: #a33c3c;
-}
-
-.adv-proc-behavior-toggle.disabled {
-  opacity: 0.25;
-  pointer-events: none;
-}
-
-.adv-proc-search {
-  font-family: "DMSans", sans-serif;
-  font-size: 0.75rem;
-  height: var(--adv-control-height);
-  padding: 0 1.5rem 0 0.5rem;
-  margin-left: auto;
-  width: 12rem;
-  background-color: var(--bg-tertiary);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='5' cy='5' r='3.5' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3Cline x1='7.75' y1='7.75' x2='10.5' y2='10.5' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.375rem center;
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-sm);
-  color: var(--text-main);
-  outline: none;
-  box-sizing: border-box;
-}
-
-.adv-proc-search::placeholder {
-  color: var(--text-dim);
-  opacity: 0.7;
-}
-
-.adv-proc-search:focus {
-  border-color: var(--accent);
+  width: auto;
 }
diff --git a/src/components/panels/advanced/AdvancedPanel.tsx b/src/components/panels/advanced/AdvancedPanel.tsx
index 061bba8e..bb4021fe 100644
--- a/src/components/panels/advanced/AdvancedPanel.tsx
+++ b/src/components/panels/advanced/AdvancedPanel.tsx
@@ -1,78 +1,27 @@
+import "./sections/shared.css";
 import "./AdvancedPanel.css";
 import type { Settings } from "../../../store";
-import CadenceSection from "./CadenceSection";
-import DutyCycleSection from "./DutyCycleSection";
-import SpeedVariationSection from "./SpeedVariationSection";
-import DoubleClickSection from "./DoubleClickSection";
-import SequenceSection from "./SequenceSection";
-import LimitsSection from "./LimitsSection";
+import ClickSpeedSection from "./sections/ClickSpeedSection";
+import HotkeySection from "./sections/HotkeySection";
+import ClickerTypeSection from "./sections/ClickerTypeSection";
+import DutyCycleSection from "./sections/DutyCycleSection";
+import SpeedRandomizationSection from "./sections/SpeedRandomizationSection";
+import LimitsSection from "./sections/LimitsSection";
 
 interface Props {
   settings: Settings;
   update: (patch: Partial<Settings>) => void;
-  showInfo: boolean;
-  running: boolean;
-  activeSequenceIndex: number | null;
-  activeSequenceTick: number;
 }
 
-function AdvancedPanel({
-  settings,
-  update,
-  showInfo,
-  running,
-  activeSequenceIndex,
-  activeSequenceTick,
-}: Props) {
-  const sequenceSection = (
-    <SequenceSection
-      settings={settings}
-      update={update}
-      showInfo={showInfo}
-      running={running}
-      activeSequenceIndex={activeSequenceIndex}
-      activeSequenceTick={activeSequenceTick}
-    />
-  );
-  const isTallLayout = settings.advancedSequenceLayout === "tall";
+function AdvancedPanel({ settings, update }: Props) {
   return (
-    <div className="adv-panel adv-panel-text">
-      <div
-        className={`adv-columns ${isTallLayout ? "adv-columns--tall" : "adv-columns--wide"}`}
-      >
-        <div className="adv-col">
-          <CadenceSection
-            settings={settings}
-            update={update}
-            showInfo={showInfo}
-          />
-          <DutyCycleSection
-            settings={settings}
-            update={update}
-            showInfo={showInfo}
-          />
-          <LimitsSection
-            settings={settings}
-            update={update}
-            showInfo={showInfo}
-          />
-          <SpeedVariationSection
-            settings={settings}
-            update={update}
-            showInfo={showInfo}
-          />
-          <DoubleClickSection
-            settings={settings}
-            update={update}
-            showInfo={showInfo}
-          />
-          {isTallLayout && sequenceSection}
-        </div>
-
-        {!isTallLayout && (
-          <div className="adv-col adv-col--sequence">{sequenceSection}</div>
-        )}
-      </div>
+    <div className="adv-panel adv-panel-text adv-panel--grid">
+      <ClickSpeedSection settings={settings} update={update} />
+      <HotkeySection settings={settings} update={update} />
+      <ClickerTypeSection settings={settings} update={update} />
+      <LimitsSection settings={settings} update={update} />
+      <DutyCycleSection settings={settings} update={update} />
+      <SpeedRandomizationSection settings={settings} update={update} />
     </div>
   );
 }
diff --git a/src/components/panels/advanced/CadenceSection.tsx b/src/components/panels/advanced/CadenceSection.tsx
deleted file mode 100644
index 22da5cd7..00000000
--- a/src/components/panels/advanced/CadenceSection.tsx
+++ /dev/null
@@ -1,274 +0,0 @@
-import type { MouseButton, Settings } from "../../../store";
-
-import { MOUSE_BUTTON_OPTIONS } from "../../../settingsSchema";
-import { isAlphabeticKeyboardKey } from "../../../keyboardKeyCase";
-import { conflictsWithAutoPressKey } from "../../../hotkeys";
-import CadenceInput from "../../CadenceInput";
-import HotkeyCaptureInput from "../../HotkeyCaptureInput";
-import KeyCaptureInput from "../../KeyCaptureInput";
-import { CardDivider, InfoIcon } from "./shared";
-
-function MouseTargetIcon() {
-  return (
-    <svg
-      className="adv-input-type-icon"
-      width="17"
-      height="17"
-      viewBox="0 0 24 24"
-      fill="none"
-      aria-hidden="true"
-    >
-      <rect
-        x="7"
-        y="3"
-        width="10"
-        height="18"
-        rx="5"
-        stroke="currentColor"
-        strokeWidth="1.8"
-      />
-      <path
-        d="M12 3v6"
-        stroke="currentColor"
-        strokeWidth="1.8"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-function KeyboardTargetIcon() {
-  return (
-    <svg
-      className="adv-input-type-icon"
-      width="18"
-      height="18"
-      viewBox="0 0 24 24"
-      fill="none"
-      aria-hidden="true"
-    >
-      <rect
-        x="3"
-        y="6"
-        width="18"
-        height="12"
-        rx="2"
-        stroke="currentColor"
-        strokeWidth="1.8"
-      />
-      <path
-        d="M7 10h.01M11 10h.01M15 10h.01M17 14H7"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-interface Props {
-  settings: Settings;
-  update: (patch: Partial<Settings>) => void;
-  showInfo: boolean;
-}
-
-export default function CadenceSection({ settings, update, showInfo }: Props) {
-  const rowSpacing = 8;
-  const inputTypeOptions = [
-    {
-      value: "mouse",
-      label: "Mouse Button",
-      icon: <MouseTargetIcon />,
-    },
-    {
-      value: "keyboard",
-      label: "Keyboard Key",
-      icon: <KeyboardTargetIcon />,
-    },
-  ] as const;
-  const canToggleKeyboardKeyCase = isAlphabeticKeyboardKey(
-    settings.keyboardKey,
-  );
-  const keyboardKeyCaseIsUpper = settings.keyboardKeyCase === "upper";
-  const keyboardKeyCaseLabel = keyboardKeyCaseIsUpper ? "↑" : "↓";
-  const toggleKeyboardKeyCase = () => {
-    if (!canToggleKeyboardKeyCase) return;
-    update({
-      keyboardKeyCase: keyboardKeyCaseIsUpper ? "lower" : "upper",
-    });
-  };
-
-  const hasConflict =
-    settings.inputType === "keyboard" &&
-    conflictsWithAutoPressKey(
-      settings.hotkey,
-      settings.keyboardKey,
-      keyboardKeyCaseIsUpper,
-    );
-  const hotkeyConflicts = hasConflict ? ["Auto-press key"] : [];
-  const autoPressKeyConflicts = hasConflict ? ["Hotkey"] : [];
-
-  return (
-    <div className="adv-sectioncontainer adv-basic-card">
-      <div className="adv-card-header adv-cadence-header">
-        <div
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.5rem",
-          }}
-        >
-          {showInfo ? (
-            <InfoIcon text="Controls how quickly clicks are generated: either as clicks per interval (Rate) or as a fixed delay between clicks (Delay)." />
-          ) : null}
-          <span className="adv-card-title">Cadence</span>
-        </div>
-      </div>
-      <CardDivider />
-      <CadenceInput
-        settings={settings}
-        update={update}
-        variant="advanced"
-        showInfo={showInfo}
-      />
-      <div className="adv-row" style={{ marginTop: rowSpacing }}>
-        <div
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.5rem",
-          }}
-        >
-          {showInfo ? (
-            <InfoIcon text="Choose the key combo that starts and stops the clicker. Use Toggle for press-on/press-off, or Hold to click only while held." />
-          ) : null}
-          <span className="adv-label">Hotkey</span>
-        </div>
-        <div className="adv-row" style={{ marginLeft: "auto", gap: 8 }}>
-          <div className="adv-textbox">
-            <HotkeyCaptureInput
-              className="adv-textbox-text"
-              value={settings.hotkey}
-              onChange={(hotkey: string) => update({ hotkey })}
-              style={{
-                background: "transparent",
-                border: "none",
-                outline: "none",
-                width: "150px",
-              }}
-              conflicts={hotkeyConflicts}
-            />
-          </div>
-          <div className="adv-seg-group">
-            {(["Toggle", "Hold"] as const).map((clickModeOption) => (
-              <button
-                key={clickModeOption}
-                className={`adv-seg-btn ${settings.mode === clickModeOption ? "active" : ""}`}
-                onClick={() => update({ mode: clickModeOption })}
-              >
-                {clickModeOption}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-      <div className="adv-row adv-target-row" style={{ marginTop: rowSpacing }}>
-        <div
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.5rem",
-          }}
-        >
-          {showInfo ? (
-            <InfoIcon
-              text={
-                settings.inputType === "mouse"
-                  ? "Select which mouse button the clicker will press on each click event."
-                  : "Select which keyboard key the clicker will press on each click event."
-              }
-            />
-          ) : null}
-          <span className="adv-label">
-            {settings.inputType === "mouse" ? "Mouse Button" : "Keyboard Key"}
-          </span>
-        </div>
-        <div className="adv-target-controls">
-          <div className="adv-seg-group adv-input-type-group">
-            {inputTypeOptions.map((inputTypeOption) => (
-              <button
-                key={inputTypeOption.value}
-                type="button"
-                className={`adv-seg-btn adv-icon-seg-btn ${
-                  settings.inputType === inputTypeOption.value ? "active" : ""
-                }`}
-                aria-label={inputTypeOption.label}
-                title={inputTypeOption.label}
-                onClick={() =>
-                  update({
-                    inputType: inputTypeOption.value as Settings["inputType"],
-                  })
-                }
-              >
-                {inputTypeOption.icon}
-              </button>
-            ))}
-          </div>
-          {settings.inputType === "mouse" ? (
-            <div className="adv-seg-group adv-target-mouse-buttons">
-              {MOUSE_BUTTON_OPTIONS.map((mouseButtonOption: string) => (
-                <button
-                  key={mouseButtonOption}
-                  type="button"
-                  className={`adv-seg-btn ${settings.mouseButton === mouseButtonOption ? "active" : ""}`}
-                  onClick={() =>
-                    update({ mouseButton: mouseButtonOption as MouseButton })
-                  }
-                >
-                  {mouseButtonOption}
-                </button>
-              ))}
-            </div>
-          ) : (
-            <div className="adv-textbox adv-key-target-box">
-              <KeyCaptureInput
-                className="adv-textbox-text adv-key-input"
-                value={settings.keyboardKey}
-                onChange={(key) => update({ keyboardKey: key })}
-                keyboardKeyCase={settings.keyboardKeyCase}
-                onMouseButtonCapture={(mouseButton) =>
-                  update({ inputType: "mouse", mouseButton })
-                }
-                style={{
-                  background: "transparent",
-                  border: "none",
-                  outline: "none",
-                }}
-                conflicts={autoPressKeyConflicts}
-              />
-              <button
-                type="button"
-                className={`adv-key-case-toggle ${
-                  keyboardKeyCaseIsUpper
-                    ? "adv-key-case-toggle--upper"
-                    : "adv-key-case-toggle--lower"
-                }`}
-                aria-label={
-                  keyboardKeyCaseIsUpper
-                    ? "Send letters as uppercase"
-                    : "Send letters as lowercase"
-                }
-                aria-pressed={keyboardKeyCaseIsUpper}
-                title="Toggle keyboard key case"
-                disabled={!canToggleKeyboardKeyCase}
-                onClick={toggleKeyboardKeyCase}
-              >
-                {keyboardKeyCaseLabel}
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/panels/advanced/DoubleClickSection.tsx b/src/components/panels/advanced/DoubleClickSection.tsx
deleted file mode 100644
index 7e5ce5b7..00000000
--- a/src/components/panels/advanced/DoubleClickSection.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { Settings } from "../../../store";
-
-import {
-  getEffectiveClicksPerSecond,
-  isDoubleClickSupported,
-} from "../../../cadence";
-import { InfoIcon, ToggleBtn } from "./shared";
-
-interface Props {
-  settings: Settings;
-  update: (patch: Partial<Settings>) => void;
-  showInfo: boolean;
-}
-
-function formatClicksPerSecond(value: number): string {
-  if (value >= 10) {
-    return value.toFixed(value % 1 === 0 ? 0 : 1);
-  }
-  if (value >= 1) {
-    return value.toFixed(2).replace(/\.?0+$/, "");
-  }
-  return value.toFixed(3).replace(/\.?0+$/, "");
-}
-
-export default function DoubleClickSection({
-  settings,
-  update,
-  showInfo,
-}: Props) {
-  const currentClicksPerSecond = getEffectiveClicksPerSecond({
-    clickInterval: settings.clickInterval,
-    clickSpeed: settings.clickSpeed,
-    rateInputMode: settings.rateInputMode,
-    durationHours: settings.durationHours,
-    durationMinutes: settings.durationMinutes,
-    durationSeconds: settings.durationSeconds,
-    durationMilliseconds: settings.durationMilliseconds,
-  });
-
-  const doubleClickDisabled = !isDoubleClickSupported(settings);
-  const doubleClickDisabledReason = doubleClickDisabled
-    ? `Double Click is unavailable at ${formatClicksPerSecond(currentClicksPerSecond)} clicks/sec. Lower the effective click rate below 50 clicks/sec to turn it on.`
-    : undefined;
-
-  return (
-    <div className="adv-sectioncontainer adv-basic-card">
-      <div className="adv-card-header">
-        <div
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.5rem",
-          }}
-        >
-          {showInfo ? (
-            <InfoIcon text="Clicks twice per cycle using your Windows double-click speed, then keeps the second press held for the configured click duration. Only available under 50cps" />
-          ) : null}
-          <span className="adv-card-title">Double Click</span>
-        </div>
-        <div className="adv-row" style={{ gap: 8 }}>
-          <ToggleBtn
-            value={settings.doubleClickEnabled}
-            onChange={(v) => update({ doubleClickEnabled: v })}
-            disabled={doubleClickDisabled}
-            disabledReason={doubleClickDisabledReason}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/panels/advanced/DutyCycleSection.tsx b/src/components/panels/advanced/DutyCycleSection.tsx
deleted file mode 100644
index 3874c7b5..00000000
--- a/src/components/panels/advanced/DutyCycleSection.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import type { Settings } from "../../../store";
-
-import { SETTINGS_LIMITS } from "../../../settingsSchema";
-import { InfoIcon, NumInput } from "./shared";
-
-interface Props {
-  settings: Settings;
-  update: (patch: Partial<Settings>) => void;
-  showInfo: boolean;
-}
-
-export default function DutyCycleSection({
-  settings,
-  update,
-  showInfo,
-}: Props) {
-  return (
-    <div className="adv-sectioncontainer adv-basic-card">
-      <div className="adv-card-header">
-        <div
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.5rem",
-          }}
-        >
-          {showInfo ? (
-            <InfoIcon text="Choose how long the mouse button gets held during each click. 50% at 1 click per second = 0.5sec held, 0.5sec released" />
-          ) : null}
-          <span className="adv-card-title">Click Duration</span>
-        </div>
-        <div className="adv-row" style={{ gap: 6 }}>
-          <div className="adv-minmax">
-            <div className="adv-numbox-sm">
-              <NumInput
-                value={settings.dutyCycle}
-                onChange={(v) => update({ dutyCycle: v })}
-                min={SETTINGS_LIMITS.dutyCycle.min}
-                max={SETTINGS_LIMITS.dutyCycle.max}
-              />
-              <span className="adv-unit">%</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/panels/advanced/SequenceSection.tsx b/src/components/panels/advanced/SequenceSection.tsx
deleted file mode 100644
index 9c29f907..00000000
--- a/src/components/panels/advanced/SequenceSection.tsx
+++ /dev/null
@@ -1,710 +0,0 @@
-import {
-  type CSSProperties,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { error } from "@tauri-apps/plugin-log";
-import { getEffectiveIntervalMs } from "../../../cadence";
-import type { SequencePoint, Settings } from "../../../store";
-
-import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
-import {
-  NumInput,
-  Disableable,
-  CardDivider,
-  ToggleBtn,
-  InfoIcon,
-} from "./shared";
-
-interface Props {
-  settings: Settings;
-  update: (patch: Partial<Settings>) => void;
-  showInfo: boolean;
-  running: boolean;
-  activeSequenceIndex: number | null;
-  activeSequenceTick: number;
-}
-
-interface SequencePointPickedPayload {
-  x: number;
-  y: number;
-  continuePicking: boolean;
-}
-
-interface SequencePointDeleteRequestedPayload {
-  x: number;
-  y: number;
-}
-
-interface DragState {
-  draggedId: string;
-  pointerId: number;
-  latestClientY: number;
-  handle: HTMLButtonElement | null;
-}
-
-const SEQUENCE_DELETE_RADIUS_PX = 10;
-
-function createSequencePointId(): string {
-  return (
-    globalThis.crypto?.randomUUID?.() ??
-    `seq-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
-  );
-}
-
-function reorderSequencePoints(
-  points: SequencePoint[],
-  draggedId: string,
-  insertionIndex: number,
-): SequencePoint[] {
-  const draggedPoint = points.find((point) => point.id === draggedId);
-  if (!draggedPoint) {
-    return points;
-  }
-
-  const remainingPoints = points.filter((point) => point.id !== draggedId);
-  const clampedIndex = Math.max(
-    0,
-    Math.min(insertionIndex, remainingPoints.length),
-  );
-
-  return [
-    ...remainingPoints.slice(0, clampedIndex),
-    draggedPoint,
-    ...remainingPoints.slice(clampedIndex),
-  ];
-}
-
-function haveSameOrder(a: SequencePoint[], b: SequencePoint[]) {
-  return (
-    a.length === b.length &&
-    a.every((point, index) => point.id === b[index]?.id)
-  );
-}
-
-export default function SequenceSection({
-  settings,
-  update,
-  showInfo,
-  running,
-  activeSequenceIndex,
-  activeSequenceTick,
-}: Props) {
-  const [pickingSequence, setPickingSequence] = useState(false);
-  const [draggingId, setDraggingId] = useState<string | null>(null);
-  const [showBottomFade, setShowBottomFade] = useState(false);
-  const listViewportRef = useRef<HTMLDivElement | null>(null);
-  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());
-  const latestPointsRef = useRef(settings.sequencePoints);
-  const updateRef = useRef(update);
-  const dragStateRef = useRef<DragState | null>(null);
-  const moveFrameRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    updateRef.current = update;
-  }, [update]);
-
-  useEffect(() => {
-    let disposed = false;
-    let unlistenPicked: (() => void) | null = null;
-    let unlistenDeleteRequested: (() => void) | null = null;
-    let unlistenEnded: (() => void) | null = null;
-
-    void listen<SequencePointPickedPayload>(
-      "sequence-point-picked",
-      (event) => {
-        const nextPoints = [
-          ...latestPointsRef.current,
-          {
-            id: createSequencePointId(),
-            x: event.payload.x,
-            y: event.payload.y,
-            clicks: 1,
-          },
-        ];
-        latestPointsRef.current = nextPoints;
-        updateRef.current({
-          sequenceEnabled: true,
-          sequencePoints: nextPoints,
-        });
-
-        if (!event.payload.continuePicking) {
-          setPickingSequence(false);
-        }
-      },
-    ).then((cleanup) => {
-      if (disposed) {
-        cleanup();
-      } else {
-        unlistenPicked = cleanup;
-      }
-    });
-
-    void listen<SequencePointDeleteRequestedPayload>(
-      "sequence-point-delete-requested",
-      (event) => {
-        const radiusSquared = SEQUENCE_DELETE_RADIUS_PX ** 2;
-        let nearestIndex = -1;
-        let nearestDistanceSquared = Number.POSITIVE_INFINITY;
-
-        latestPointsRef.current.forEach((point, index) => {
-          const dx = point.x - event.payload.x;
-          const dy = point.y - event.payload.y;
-          const distanceSquared = dx * dx + dy * dy;
-
-          if (
-            distanceSquared <= radiusSquared &&
-            distanceSquared < nearestDistanceSquared
-          ) {
-            nearestIndex = index;
-            nearestDistanceSquared = distanceSquared;
-          }
-        });
-
-        if (nearestIndex === -1) {
-          return;
-        }
-
-        const nextPoints = latestPointsRef.current.filter(
-          (_point, index) => index !== nearestIndex,
-        );
-        latestPointsRef.current = nextPoints;
-        updateRef.current({ sequencePoints: nextPoints });
-      },
-    ).then((cleanup) => {
-      if (disposed) {
-        cleanup();
-      } else {
-        unlistenDeleteRequested = cleanup;
-      }
-    });
-
-    void listen("sequence-pick-ended", () => {
-      setPickingSequence(false);
-    }).then((cleanup) => {
-      if (disposed) {
-        cleanup();
-      } else {
-        unlistenEnded = cleanup;
-      }
-    });
-
-    return () => {
-      disposed = true;
-      unlistenPicked?.();
-      unlistenDeleteRequested?.();
-      unlistenEnded?.();
-      void invoke("cancel_sequence_point_pick");
-    };
-  }, []);
-
-  const startSequencePointPick = useCallback(async () => {
-    setPickingSequence(true);
-    try {
-      await invoke("start_sequence_point_pick");
-    } catch (err) {
-      setPickingSequence(false);
-      error(
-        JSON.stringify({
-          source: "SequenceSection.startPick",
-          error: String(err),
-        }),
-      );
-    }
-  }, []);
-
-  const cancelSequencePointPick = useCallback(async () => {
-    setPickingSequence(false);
-    try {
-      await invoke("cancel_sequence_point_pick");
-    } catch (err) {
-      error(
-        JSON.stringify({
-          source: "SequenceSection.cancelPick",
-          error: String(err),
-        }),
-      );
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!pickingSequence) {
-      return;
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") {
-        return;
-      }
-
-      event.preventDefault();
-      event.stopPropagation();
-      void cancelSequencePointPick();
-    };
-
-    window.addEventListener("keydown", handleKeyDown, true);
-    return () => window.removeEventListener("keydown", handleKeyDown, true);
-  }, [cancelSequencePointPick, pickingSequence]);
-
-  const updateSequencePoint = (
-    index: number,
-    patch: Partial<SequencePoint>,
-  ) => {
-    const nextPoints = settings.sequencePoints.map(
-      (point: SequencePoint, pointIndex: number) =>
-        pointIndex === index ? { ...point, ...patch } : point,
-    );
-    update({ sequencePoints: nextPoints });
-  };
-
-  const deleteSequencePoint = (index: number) => {
-    const nextPoints = settings.sequencePoints.filter(
-      (_: SequencePoint, pointIndex: number) => pointIndex !== index,
-    );
-    update({ sequencePoints: nextPoints });
-  };
-
-  const updateBottomFade = useCallback(() => {
-    const viewport = listViewportRef.current;
-    if (!viewport) {
-      setShowBottomFade(false);
-      return;
-    }
-    const hasOverflow = viewport.scrollHeight - viewport.clientHeight > 6;
-    const hasMoreBelow =
-      hasOverflow &&
-      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight > 6;
-    setShowBottomFade(hasMoreBelow);
-  }, []);
-
-  const commitSequencePoints = useCallback(
-    (nextPoints: SequencePoint[]) => {
-      if (haveSameOrder(latestPointsRef.current, nextPoints)) {
-        return;
-      }
-      latestPointsRef.current = nextPoints;
-      update({ sequencePoints: nextPoints });
-    },
-    [update],
-  );
-
-  const computeInsertionIndex = useCallback(
-    (clientY: number, draggedId: string) => {
-      const orderedPoints = latestPointsRef.current.filter(
-        (point) => point.id !== draggedId,
-      );
-
-      if (orderedPoints.length === 0) {
-        return 0;
-      }
-
-      const measuredPoints = orderedPoints
-        .map((point) => ({
-          point,
-          rect: itemRefs.current.get(point.id)?.getBoundingClientRect() ?? null,
-        }))
-        .filter(
-          (entry): entry is { point: SequencePoint; rect: DOMRect } =>
-            entry.rect !== null,
-        );
-
-      if (measuredPoints.length === 0) {
-        return orderedPoints.length;
-      }
-
-      for (let index = 0; index < measuredPoints.length; index += 1) {
-        const { rect } = measuredPoints[index];
-        if (clientY < rect.top + rect.height / 2) {
-          return index;
-        }
-      }
-
-      return measuredPoints.length;
-    },
-    [],
-  );
-
-  const updateDragOrder = useCallback(
-    (clientY: number) => {
-      const dragState = dragStateRef.current;
-      if (!dragState) {
-        return;
-      }
-
-      const viewport = listViewportRef.current;
-      if (viewport) {
-        const rect = viewport.getBoundingClientRect();
-        const edgeThreshold = 40;
-        if (clientY < rect.top + edgeThreshold) {
-          viewport.scrollTop -= Math.max(
-            6,
-            (rect.top + edgeThreshold - clientY) * 0.25,
-          );
-        } else if (clientY > rect.bottom - edgeThreshold) {
-          viewport.scrollTop += Math.max(
-            6,
-            (clientY - (rect.bottom - edgeThreshold)) * 0.25,
-          );
-        }
-      }
-
-      const nextPoints = reorderSequencePoints(
-        latestPointsRef.current,
-        dragState.draggedId,
-        computeInsertionIndex(clientY, dragState.draggedId),
-      );
-
-      commitSequencePoints(nextPoints);
-      updateBottomFade();
-    },
-    [commitSequencePoints, computeInsertionIndex, updateBottomFade],
-  );
-
-  useEffect(() => {
-    latestPointsRef.current = settings.sequencePoints;
-    const frame = window.requestAnimationFrame(() => {
-      updateBottomFade();
-    });
-    return () => window.cancelAnimationFrame(frame);
-  }, [settings.sequencePoints, updateBottomFade]);
-
-  useEffect(() => {
-    const viewport = listViewportRef.current;
-    if (!viewport) {
-      return;
-    }
-
-    const handleScroll = () => {
-      updateBottomFade();
-    };
-    const handleWheel = (event: WheelEvent) => {
-      const target = event.target as HTMLElement | null;
-      if (!target) {
-        return;
-      }
-      // Keep wheel changes on focused number inputs local to the field and
-      // prevent the parent list viewport from scrolling.
-      // Unfocused inputs let the event through so the list scrolls instead.
-      if (
-        target.closest("input.adv-number-sm") &&
-        target === document.activeElement
-      ) {
-        event.preventDefault();
-      }
-    };
-
-    viewport.addEventListener("scroll", handleScroll, { passive: true });
-    viewport.addEventListener("wheel", handleWheel, { passive: false });
-    const resizeObserver = new ResizeObserver(() => {
-      updateBottomFade();
-    });
-    resizeObserver.observe(viewport);
-
-    return () => {
-      viewport.removeEventListener("scroll", handleScroll);
-      viewport.removeEventListener("wheel", handleWheel);
-      resizeObserver.disconnect();
-    };
-  }, [updateBottomFade]);
-
-  useEffect(() => {
-    if (draggingId === null) {
-      return;
-    }
-
-    const handlePointerMove = (event: PointerEvent) => {
-      const dragState = dragStateRef.current;
-      if (!dragState || event.pointerId !== dragState.pointerId) {
-        return;
-      }
-
-      dragState.latestClientY = event.clientY;
-      if (moveFrameRef.current !== null) {
-        return;
-      }
-
-      moveFrameRef.current = window.requestAnimationFrame(() => {
-        moveFrameRef.current = null;
-        updateDragOrder(dragState.latestClientY);
-      });
-    };
-
-    const finishDrag = (event: PointerEvent) => {
-      const dragState = dragStateRef.current;
-      if (!dragState || event.pointerId !== dragState.pointerId) {
-        return;
-      }
-
-      if (moveFrameRef.current !== null) {
-        window.cancelAnimationFrame(moveFrameRef.current);
-        moveFrameRef.current = null;
-      }
-
-      dragState.handle?.releasePointerCapture?.(dragState.pointerId);
-      dragStateRef.current = null;
-      setDraggingId(null);
-      updateBottomFade();
-    };
-
-    window.addEventListener("pointermove", handlePointerMove, {
-      passive: true,
-    });
-    window.addEventListener("pointerup", finishDrag);
-    window.addEventListener("pointercancel", finishDrag);
-    return () => {
-      window.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener("pointerup", finishDrag);
-      window.removeEventListener("pointercancel", finishDrag);
-    };
-  }, [draggingId, updateBottomFade, updateDragOrder]);
-
-  const activeIndex =
-    running && settings.sequenceEnabled ? activeSequenceIndex : null;
-
-  return (
-    <div className="adv-sectioncontainer adv-sequence-card">
-      <div className="adv-card-header">
-        <div
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.5rem",
-          }}
-        >
-          {showInfo ? (
-            <InfoIcon text="Cycles through saved cursor positions in round-robin order, applying the current global timing and click settings at each point." />
-          ) : null}
-          <span className="adv-card-title">Sequence Clicking</span>
-        </div>
-        <ToggleBtn
-          value={settings.sequenceEnabled}
-          onChange={(v) => {
-            if (!v && pickingSequence) {
-              void cancelSequencePointPick();
-            }
-            update({
-              sequenceEnabled: v,
-            });
-          }}
-        />
-      </div>
-      <CardDivider />
-      <Disableable enabled={settings.sequenceEnabled}>
-        <div className="adv-sequence-body">
-          <div className="adv-sequence-controls">
-            <button
-              type="button"
-              className="adv-secondary-btn"
-              onClick={() => {
-                void (pickingSequence
-                  ? cancelSequencePointPick()
-                  : startSequencePointPick());
-              }}
-            >
-              {pickingSequence ? "Cancel Picking" : "Start Picking"}
-            </button>
-            <div className="adv-sequence-list-shell">
-              <div ref={listViewportRef} className="adv-sequence-list">
-                {settings.sequencePoints.length === 0 ? (
-                  <div className="adv-sequence-empty">
-                    No sequence points saved yet.
-                  </div>
-                ) : (
-                  settings.sequencePoints.map(
-                    (point: SequencePoint, index: number) => {
-                      const isActive = activeIndex === index;
-                      const stepDurationMs = Math.max(
-                        1,
-                        point.clicks * getEffectiveIntervalMs(settings),
-                      );
-
-                      return (
-                        <div
-                          key={point.id}
-                          ref={(node) => {
-                            if (node) {
-                              itemRefs.current.set(point.id, node);
-                            } else {
-                              itemRefs.current.delete(point.id);
-                            }
-                          }}
-                          className={`adv-sequence-item ${
-                            draggingId === point.id
-                              ? "adv-sequence-item--dragging"
-                              : ""
-                          } ${isActive ? "adv-sequence-item--active" : ""}`}
-                          style={
-                            isActive
-                              ? ({
-                                  "--sequence-step-duration": `${stepDurationMs}ms`,
-                                  "--sequence-step-clicks": point.clicks,
-                                } as CSSProperties)
-                              : undefined
-                          }
-                        >
-                          {isActive ? (
-                            <span
-                              key={activeSequenceTick}
-                              className="adv-sequence-progress"
-                            />
-                          ) : null}
-                          <div className="adv-sequence-leading">
-                            <span className="adv-sequence-index">
-                              {index + 1}
-                            </span>
-                            <button
-                              type="button"
-                              className="adv-sequence-drag-handle"
-                              aria-label="Up / Down"
-                              onPointerDown={(event) => {
-                                event.preventDefault();
-                                const handle = event.currentTarget;
-                                handle.setPointerCapture(event.pointerId);
-                                dragStateRef.current = {
-                                  draggedId: point.id,
-                                  pointerId: event.pointerId,
-                                  latestClientY: event.clientY,
-                                  handle,
-                                };
-                                setDraggingId(point.id);
-                              }}
-                            >
-                              <svg
-                                width="16"
-                                height="16"
-                                viewBox="0 0 12 12"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                                aria-hidden="true"
-                              >
-                                <path
-                                  d="M2 3H10M2 6H10M2 9H10"
-                                  stroke="currentColor"
-                                  strokeWidth="1.4"
-                                  strokeLinecap="round"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                          <label
-                            className="adv-numbox-sm adv-sequence-coord adv-sequence-position"
-                            style={{ gap: "6px" }}
-                          >
-                            <span
-                              className="adv-unit"
-                              style={{
-                                minWidth: "0.125rem",
-                                textAlign: "center",
-                              }}
-                            >
-                              X
-                            </span>
-                            <NumInput
-                              hoverWheel={false}
-                              value={point.x}
-                              onChange={(value) =>
-                                updateSequencePoint(index, { x: value })
-                              }
-                              style={{
-                                flex: 1,
-                                width: "100%",
-                                textAlign: "right",
-                              }}
-                            />
-                          </label>
-                          <label
-                            className="adv-numbox-sm adv-sequence-coord adv-sequence-position"
-                            style={{ gap: "6px" }}
-                          >
-                            <span
-                              className="adv-unit"
-                              style={{
-                                minWidth: "0.125rem",
-                                textAlign: "left",
-                              }}
-                            >
-                              Y
-                            </span>
-                            <NumInput
-                              hoverWheel={false}
-                              value={point.y}
-                              onChange={(value) =>
-                                updateSequencePoint(index, { y: value })
-                              }
-                              style={{
-                                flex: 1,
-                                width: "100%",
-                                textAlign: "right",
-                              }}
-                            />
-                          </label>
-                          <label
-                            className="adv-numbox-sm adv-sequence-coord adv-sequence-clicks"
-                            style={{ gap: "6px" }}
-                          >
-                            <span
-                              className="adv-unit"
-                              style={{ minWidth: "0.75rem", textAlign: "left" }}
-                            >
-                              clicks
-                            </span>
-                            <NumInput
-                              hoverWheel={false}
-                              value={point.clicks}
-                              min={1}
-                              max={100000}
-                              onChange={(value) =>
-                                updateSequencePoint(index, { clicks: value })
-                              }
-                              style={{
-                                flex: 1,
-                                width: "100%",
-                                textAlign: "right",
-                              }}
-                            />
-                          </label>
-                          <div className="adv-sequence-actions">
-                            <button
-                              type="button"
-                              className="adv-sequence-delete"
-                              onClick={() => deleteSequencePoint(index)}
-                              aria-label="Delete"
-                              title="Delete"
-                            >
-                              <svg
-                                width="16"
-                                height="16"
-                                viewBox="0 0 12 12"
-                                fill="none"
-                                xmlns="http://www.w3.org/2000/svg"
-                                aria-hidden="true"
-                              >
-                                <path
-                                  d="M2.5 3.5H9.5M4.25 3.5V2.75C4.25 2.34 4.59 2 5 2H7C7.41 2 7.75 2.34 7.75 2.75V3.5M8.75 3.5V9C8.75 9.55 8.3 10 7.75 10H4.25C3.7 10 3.25 9.55 3.25 9V3.5M5 5.25V8.25M7 5.25V8.25"
-                                  stroke="currentColor"
-                                  strokeWidth="1.1"
-                                  strokeLinecap="round"
-                                  strokeLinejoin="round"
-                                />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                      );
-                    },
-                  )
-                )}
-              </div>
-              {showBottomFade ? (
-                <div className="adv-sequence-list-fade" />
-              ) : null}
-            </div>
-          </div>
-        </div>
-      </Disableable>
-    </div>
-  );
-}
diff --git a/src/components/panels/advanced/SpeedVariationSection.tsx b/src/components/panels/advanced/SpeedVariationSection.tsx
deleted file mode 100644
index 77b2e5a2..00000000
--- a/src/components/panels/advanced/SpeedVariationSection.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import type { Settings } from "../../../store";
-
-import { SETTINGS_LIMITS } from "../../../settingsSchema";
-import { Disableable, InfoIcon, NumInput, ToggleBtn } from "./shared";
-
-interface Props {
-  settings: Settings;
-  update: (patch: Partial<Settings>) => void;
-  showInfo: boolean;
-}
-
-export default function SpeedVariationSection({
-  settings,
-  update,
-  showInfo,
-}: Props) {
-  return (
-    <div className="adv-sectioncontainer adv-basic-card">
-      <div className="adv-card-header">
-        <div
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.5rem",
-          }}
-        >
-          {showInfo ? (
-            <InfoIcon text="Randomizes click speed by given percentage." />
-          ) : null}
-          <span className="adv-card-title">Speed Variation</span>
-        </div>
-        <div className="adv-row" style={{ gap: 8 }}>
-          <Disableable
-            enabled={settings.speedVariationEnabled}
-            disabledReason="Enable Speed Variation to edit how much the app randomizes your click timing."
-          >
-            <div className="adv-numbox-sm">
-              <NumInput
-                value={settings.speedVariation}
-                onChange={(v) => update({ speedVariation: v })}
-                min={SETTINGS_LIMITS.speedVariation.min}
-                max={SETTINGS_LIMITS.speedVariation.max}
-              />
-              <span className="adv-unit">%</span>
-            </div>
-          </Disableable>
-          <ToggleBtn
-            value={settings.speedVariationEnabled}
-            onChange={(v) => update({ speedVariationEnabled: v })}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/panels/advanced/sections/ClickSpeedSection.tsx b/src/components/panels/advanced/sections/ClickSpeedSection.tsx
new file mode 100644
index 00000000..da14ee84
--- /dev/null
+++ b/src/components/panels/advanced/sections/ClickSpeedSection.tsx
@@ -0,0 +1,316 @@
+import { useState, type WheelEvent, type FocusEvent } from "react";
+import type { Settings } from "../../../../store";
+import { normalizeIntegerRaw } from "../../../../numberInput";
+import {
+  convertDurationToRate,
+  formatIntervalMs,
+  getIntervalMilliseconds,
+  type CadenceDurationFields,
+} from "../../../../cadence";
+import {
+  switchCadenceMode,
+  SIMPLE_RATE_INPUT_MODE_OPTIONS,
+} from "../../../sharedCadence";
+import {
+  getMaxClickSpeed,
+  getMinIntervalMs,
+  type ClickInterval,
+} from "../../../../settingsSchema";
+import { AdvDropdown, CardDivider, Disableable } from "./shared";
+import {
+  INTERVAL_OPTIONS,
+  handleDurationBlur,
+  handleDurationWheelStep,
+  handleNumberBlur,
+  handleNumberChange,
+  handleWheelStep,
+} from "../../../sharedCadence";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+export default function ClickSpeedSection({ settings, update }: Props) {
+  const maxClickSpeed = getMaxClickSpeed(settings.extendedClickSpeedLimit);
+  const [draftCps, setDraftCps] = useState<string | null>(null);
+
+  const conversionText = (() => {
+    if (settings.rateInputMode === "rate") {
+      const intervalMs =
+        getIntervalMilliseconds(settings.clickInterval) / settings.clickSpeed;
+      if (!Number.isFinite(intervalMs) || intervalMs <= 0) return null;
+      return `${formatIntervalMs(intervalMs)} Interval`;
+    }
+    const converted = convertDurationToRate(settings);
+    if (!converted) return null;
+    const unitLabel =
+      INTERVAL_OPTIONS.find((o) => o.value === converted.clickInterval)
+        ?.label || "Second";
+    return `${converted.clickSpeed} clicks per ${unitLabel.toLowerCase()}`;
+  })();
+
+  return (
+    <div className="adv-sectioncontainer adv-basic-card">
+      <div className="adv-card-header">
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+          }}
+        >
+          <span style={{ color: "var(--text-dim)" }}>
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M7 2v11h3v9l7-12h-4l4-8z" />
+            </svg>
+          </span>
+          <span className="adv-card-title">Click Speed</span>
+        </div>
+        <div className="adv-seg-group">
+          {SIMPLE_RATE_INPUT_MODE_OPTIONS.map(({ value, label }) => (
+            <button
+              key={value}
+              type="button"
+              className={`adv-seg-btn ${settings.rateInputMode === value ? "active" : ""}`}
+              onClick={() => switchCadenceMode(value, settings, update)}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <Disableable
+        enabled={settings.dutyCycleMode !== "Hold"}
+        disabledReason="Click speed is disabled in Hold mode"
+      >
+        <CardDivider />
+        <div className="adv-card-desc">
+          Changes how fast the autoclicker clicks.
+        </div>
+        <div className="adv-cadence-block">
+          <div className="adv-row adv-cadence-main-row">
+            <div className="adv-cadence-value">
+              {settings.rateInputMode === "rate" ? (
+                <div className="adv-value-outline">
+                  <div className="adv-foc">
+                    <input
+                      type="number"
+                      className="adv-number-sm"
+                      value={draftCps ?? settings.clickSpeed}
+                      min={1}
+                      max={maxClickSpeed}
+                      style={{ width: "2.5rem", textAlign: "right" }}
+                      onChange={(event) => {
+                        const raw = event.target.value;
+                        if (raw === "") {
+                          setDraftCps("");
+                        } else {
+                          const normalized = normalizeIntegerRaw(raw);
+                          if (normalized !== raw)
+                            event.target.value = normalized;
+                          if (normalized === "" || normalized === "-") {
+                            setDraftCps(normalized);
+                            return;
+                          }
+                          setDraftCps(null);
+                          update({ clickSpeed: Number(normalized) });
+                        }
+                      }}
+                      onBlur={(event) => {
+                        setDraftCps(null);
+                        handleNumberBlur(event, 1, maxClickSpeed, (next) =>
+                          update({ clickSpeed: next }),
+                        );
+                      }}
+                      onWheel={(event) =>
+                        handleWheelStep(
+                          event,
+                          settings.clickSpeed,
+                          1,
+                          maxClickSpeed,
+                          (next) => update({ clickSpeed: next }),
+                        )
+                      }
+                    />
+                  </div>
+                  <div className="adv-vdivider" />
+                  <span className="adv-unf">Clicks Per</span>
+                  <div className="adv-vdivider" />
+                  <div className="adv-foc adv-foc-grow">
+                    <AdvDropdown
+                      value={settings.clickInterval}
+                      options={INTERVAL_OPTIONS}
+                      onChange={(v) =>
+                        update({ clickInterval: v as ClickInterval })
+                      }
+                    />
+                  </div>
+                </div>
+              ) : (
+                <div className="adv-value-outline adv-value-outline--duration">
+                  <div className="adv-foc">
+                    <input
+                      type="number"
+                      className="adv-number-sm"
+                      value={settings.durationHours}
+                      min={0}
+                      max={999}
+                      style={{ width: "34px", textAlign: "right" }}
+                      onChange={(event) =>
+                        handleNumberChange(event, (next) =>
+                          update({ durationHours: next }),
+                        )
+                      }
+                      onBlur={(event: FocusEvent<HTMLInputElement>) =>
+                        handleDurationBlur(
+                          event,
+                          "durationHours",
+                          0,
+                          999,
+                          settings as CadenceDurationFields,
+                          (patch) => update(patch),
+                        )
+                      }
+                      onWheel={(event: WheelEvent<HTMLInputElement>) =>
+                        handleDurationWheelStep(
+                          event,
+                          "durationHours",
+                          settings as CadenceDurationFields,
+                          0,
+                          999,
+                          (patch) => update(patch),
+                        )
+                      }
+                    />
+                    <span className="adv-unit">h</span>
+                  </div>
+                  <div className="adv-vdivider" />
+                  <div className="adv-foc">
+                    <input
+                      type="number"
+                      className="adv-number-sm"
+                      value={settings.durationMinutes}
+                      min={0}
+                      max={59}
+                      style={{ width: "26px", textAlign: "right" }}
+                      onChange={(event) =>
+                        handleNumberChange(event, (next) =>
+                          update({ durationMinutes: next }),
+                        )
+                      }
+                      onBlur={(event: FocusEvent<HTMLInputElement>) =>
+                        handleDurationBlur(
+                          event,
+                          "durationMinutes",
+                          0,
+                          59,
+                          settings as CadenceDurationFields,
+                          (patch) => update(patch),
+                        )
+                      }
+                      onWheel={(event: WheelEvent<HTMLInputElement>) =>
+                        handleDurationWheelStep(
+                          event,
+                          "durationMinutes",
+                          settings as CadenceDurationFields,
+                          0,
+                          59,
+                          (patch) => update(patch),
+                        )
+                      }
+                    />
+                    <span className="adv-unit">m</span>
+                  </div>
+                  <div className="adv-vdivider" />
+                  <div className="adv-foc">
+                    <input
+                      type="number"
+                      className="adv-number-sm"
+                      value={settings.durationSeconds}
+                      min={0}
+                      max={59}
+                      style={{ width: "26px", textAlign: "right" }}
+                      onChange={(event) =>
+                        handleNumberChange(event, (next) =>
+                          update({ durationSeconds: next }),
+                        )
+                      }
+                      onBlur={(event: FocusEvent<HTMLInputElement>) =>
+                        handleDurationBlur(
+                          event,
+                          "durationSeconds",
+                          0,
+                          59,
+                          settings as CadenceDurationFields,
+                          (patch) => update(patch),
+                        )
+                      }
+                      onWheel={(event: WheelEvent<HTMLInputElement>) =>
+                        handleDurationWheelStep(
+                          event,
+                          "durationSeconds",
+                          settings as CadenceDurationFields,
+                          0,
+                          59,
+                          (patch) => update(patch),
+                        )
+                      }
+                    />
+                    <span className="adv-unit">s</span>
+                  </div>
+                  <div className="adv-vdivider" />
+                  <div className="adv-foc">
+                    <input
+                      type="number"
+                      className="adv-number-sm"
+                      value={settings.durationMilliseconds}
+                      min={getMinIntervalMs(settings.extendedClickSpeedLimit)}
+                      max={999}
+                      style={{ width: "34px", textAlign: "right" }}
+                      onChange={(event) =>
+                        handleNumberChange(event, (next) =>
+                          update({ durationMilliseconds: next }),
+                        )
+                      }
+                      onBlur={(event: FocusEvent<HTMLInputElement>) =>
+                        handleDurationBlur(
+                          event,
+                          "durationMilliseconds",
+                          getMinIntervalMs(settings.extendedClickSpeedLimit),
+                          999,
+                          settings as CadenceDurationFields,
+                          (patch) => update(patch),
+                        )
+                      }
+                      onWheel={(event: WheelEvent<HTMLInputElement>) =>
+                        handleDurationWheelStep(
+                          event,
+                          "durationMilliseconds",
+                          settings as CadenceDurationFields,
+                          getMinIntervalMs(settings.extendedClickSpeedLimit),
+                          999,
+                          (patch) => update(patch),
+                        )
+                      }
+                    />
+                    <span className="adv-unit">ms</span>
+                  </div>
+                </div>
+              )}
+            </div>
+            {conversionText && (
+              <span className="adv-conversion-display">{conversionText}</span>
+            )}
+          </div>
+        </div>
+      </Disableable>
+    </div>
+  );
+}
diff --git a/src/components/panels/advanced/sections/ClickerTypeSection.tsx b/src/components/panels/advanced/sections/ClickerTypeSection.tsx
new file mode 100644
index 00000000..5eb70386
--- /dev/null
+++ b/src/components/panels/advanced/sections/ClickerTypeSection.tsx
@@ -0,0 +1,219 @@
+import type { MouseButton, Settings } from "../../../../store";
+import { MOUSE_BUTTON_OPTIONS } from "../../../../settingsSchema";
+import { isAlphabeticKeyboardKey } from "../../../../keyboardKeyCase";
+import { conflictsWithAutoPressKey } from "../../../../hotkeys";
+import {
+  getEffectiveClicksPerSecond,
+  isDoubleClickSupported,
+} from "../../../../cadence";
+import KeyCaptureInput from "../../../KeyCaptureInput";
+import { CardDivider, ToggleBtn } from "./shared";
+
+function formatClicksPerSecond(value: number): string {
+  if (value >= 10) {
+    return value.toFixed(value % 1 === 0 ? 0 : 1);
+  }
+  if (value >= 1) {
+    return value.toFixed(2).replace(/\.?0+$/, "");
+  }
+  return value.toFixed(3).replace(/\.?0+$/, "");
+}
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+export default function ClickerTypeSection({ settings, update }: Props) {
+  const inputTypeOptions = [
+    { value: "mouse", label: "Mouse" },
+    { value: "keyboard", label: "Keyboard" },
+  ] as const;
+
+  const canToggleKeyboardKeyCase = isAlphabeticKeyboardKey(
+    settings.keyboardKey,
+  );
+  const keyboardKeyCaseIsUpper = settings.keyboardKeyCase === "upper";
+  const keyboardKeyCaseLabel = "↑";
+  const toggleKeyboardKeyCase = () => {
+    if (!canToggleKeyboardKeyCase) return;
+    update({
+      keyboardKeyCase: keyboardKeyCaseIsUpper ? "lower" : "upper",
+    });
+  };
+
+  const hasConflict =
+    settings.inputType === "keyboard" &&
+    conflictsWithAutoPressKey(
+      settings.hotkey,
+      settings.keyboardKey,
+      keyboardKeyCaseIsUpper,
+    );
+  const autoPressKeyConflicts = hasConflict ? ["Hotkey"] : [];
+
+  const currentClicksPerSecond = getEffectiveClicksPerSecond({
+    clickInterval: settings.clickInterval,
+    clickSpeed: settings.clickSpeed,
+    rateInputMode: settings.rateInputMode,
+    durationHours: settings.durationHours,
+    durationMinutes: settings.durationMinutes,
+    durationSeconds: settings.durationSeconds,
+    durationMilliseconds: settings.durationMilliseconds,
+  });
+
+  const doubleClickDisabled = !isDoubleClickSupported(settings);
+  const doubleClickDisabledReason = doubleClickDisabled
+    ? `Double Click is unavailable at ${formatClicksPerSecond(currentClicksPerSecond)} clicks/sec. Lower the click speed below 10 clicks/sec to turn it on.`
+    : undefined;
+
+  return (
+    <div className="adv-sectioncontainer adv-basic-card">
+      <div className="adv-card-header">
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+          }}
+        >
+          <span style={{ color: "var(--text-dim)" }}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              stroke="currentColor"
+              stroke-width="0"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z" />
+            </svg>
+          </span>
+          <span className="adv-card-title">Clicker Type</span>
+        </div>
+        <div className="adv-seg-group adv-input-type-group">
+          {inputTypeOptions.map((inputTypeOption) => (
+            <button
+              key={inputTypeOption.value}
+              type="button"
+              className={`adv-seg-btn ${
+                settings.inputType === inputTypeOption.value ? "active" : ""
+              }`}
+              onClick={() =>
+                update({
+                  inputType: inputTypeOption.value as Settings["inputType"],
+                })
+              }
+            >
+              {inputTypeOption.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <CardDivider />
+      <div className="adv-card-desc">
+        Select the mouse button or keyboard key the autoclicker clicks.
+      </div>
+      <div
+        className="adv-row adv-target-row"
+        style={{ gap: 8, justifyContent: "flex-end" }}
+      >
+        {settings.inputType === "mouse" ? (
+          <>
+            <div
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                marginRight: "auto",
+              }}
+            >
+              <span className="adv-label">Double Click</span>
+              <ToggleBtn
+                value={settings.doubleClickEnabled}
+                onChange={(v) => update({ doubleClickEnabled: v })}
+                disabled={doubleClickDisabled}
+                disabledReason={doubleClickDisabledReason}
+              />
+            </div>
+            <div className="adv-seg-group adv-target-mouse-buttons">
+              {MOUSE_BUTTON_OPTIONS.map((mouseButtonOption: string) => (
+                <button
+                  key={mouseButtonOption}
+                  type="button"
+                  className={`adv-seg-btn ${settings.mouseButton === mouseButtonOption ? "active" : ""}`}
+                  onClick={() =>
+                    update({ mouseButton: mouseButtonOption as MouseButton })
+                  }
+                >
+                  {mouseButtonOption}
+                </button>
+              ))}
+            </div>
+          </>
+        ) : (
+          <>
+            <div
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "0.5rem",
+                marginRight: "auto",
+              }}
+            >
+              <span className="adv-label">Double Click</span>
+              <ToggleBtn
+                value={settings.doubleClickEnabled}
+                onChange={(v) => update({ doubleClickEnabled: v })}
+                disabled={doubleClickDisabled}
+                disabledReason={doubleClickDisabledReason}
+              />
+            </div>
+            <div className="adv-textbox">
+              <KeyCaptureInput
+                className="adv-textbox-text"
+                style={{ minWidth: "6rem" }}
+                value={settings.keyboardKey}
+                onChange={(key) => update({ keyboardKey: key })}
+                keyboardKeyCase={settings.keyboardKeyCase}
+                onMouseButtonCapture={(mouseButton) =>
+                  update({ inputType: "mouse", mouseButton })
+                }
+                conflicts={autoPressKeyConflicts}
+              />
+              <button
+                type="button"
+                className={`adv-key-case-toggle ${
+                  keyboardKeyCaseIsUpper
+                    ? "adv-key-case-toggle--upper"
+                    : "adv-key-case-toggle--lower"
+                }`}
+                aria-label={
+                  keyboardKeyCaseIsUpper
+                    ? "Send letters as uppercase"
+                    : "Send letters as lowercase"
+                }
+                aria-pressed={keyboardKeyCaseIsUpper}
+                title="Toggle keyboard key case"
+                disabled={!canToggleKeyboardKeyCase}
+                onClick={toggleKeyboardKeyCase}
+              >
+                <span
+                  className={
+                    keyboardKeyCaseIsUpper
+                      ? undefined
+                      : "adv-key-case-arrow--lower"
+                  }
+                >
+                  {keyboardKeyCaseLabel}
+                </span>
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/panels/advanced/sections/DutyCycleSection.tsx b/src/components/panels/advanced/sections/DutyCycleSection.tsx
new file mode 100644
index 00000000..0a1038c8
--- /dev/null
+++ b/src/components/panels/advanced/sections/DutyCycleSection.tsx
@@ -0,0 +1,114 @@
+import type { Settings } from "../../../../store";
+
+import {
+  SETTINGS_LIMITS,
+  DUTY_CYCLE_MODE_OPTIONS,
+} from "../../../../settingsSchema";
+import { CardDivider, NumInput } from "./shared";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+export default function DutyCycleSection({ settings, update }: Props) {
+  return (
+    <div className="adv-sectioncontainer adv-basic-card">
+      <div className="adv-card-header">
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+          }}
+        >
+          <span style={{ color: "var(--text-dim)" }}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+              <path d="M6 20v-2a6 6 0 1 1 12 0v2a1 1 0 0 1 -1 1h-10a1 1 0 0 1 -1 -1" />
+              <path d="M6 4v2a6 6 0 1 0 12 0v-2a1 1 0 0 0 -1 -1h-10a1 1 0 0 0 -1 1" />
+            </svg>
+          </span>
+          <span className="adv-card-title">Duty Cycle</span>
+        </div>
+        <div className="adv-seg-group">
+          {DUTY_CYCLE_MODE_OPTIONS.map((dutyCycleOption) => (
+            <button
+              key={dutyCycleOption}
+              className={`adv-seg-btn ${settings.dutyCycleMode === dutyCycleOption ? "active" : ""}`}
+              onClick={() => {
+                if (
+                  dutyCycleOption === "Hold" &&
+                  settings.dutyCycleMode !== "Hold"
+                ) {
+                  update({
+                    dutyCycleMode: "Hold",
+                    savedClickSpeed: settings.clickSpeed,
+                    savedClickInterval: settings.clickInterval,
+                    savedDutyCycle: settings.dutyCycle,
+                    clickSpeed: 1,
+                    clickInterval: "d",
+                    dutyCycle: 100,
+                  });
+                } else if (
+                  dutyCycleOption === "Click" &&
+                  settings.dutyCycleMode !== "Click"
+                ) {
+                  update({
+                    dutyCycleMode: "Click",
+                    clickSpeed: settings.savedClickSpeed,
+                    clickInterval:
+                      settings.savedClickInterval as Settings["clickInterval"],
+                    dutyCycle: settings.savedDutyCycle,
+                  });
+                }
+              }}
+            >
+              {dutyCycleOption}
+            </button>
+          ))}
+        </div>
+      </div>
+      <CardDivider />
+      <div className="adv-card-desc">
+        {settings.dutyCycleMode === "Click"
+          ? "Controls how long the button is held during each click."
+          : "Holds the button down continuously. Click speed is disabled."}
+      </div>
+      {settings.dutyCycleMode === "Click" && (
+        <div className="adv-row" style={{ gap: 8, justifyContent: "flex-end" }}>
+          <div className="adv-minmax">
+            <div className="adv-numbox-sm">
+              <NumInput
+                value={settings.dutyCycle}
+                onChange={(v) => update({ dutyCycle: v })}
+                min={SETTINGS_LIMITS.dutyCycle.min}
+                max={SETTINGS_LIMITS.dutyCycle.max}
+              />
+              <span className="adv-unit">%</span>
+            </div>
+          </div>
+          <span
+            style={{
+              color: "var(--text-dim)",
+              fontSize: "13px",
+              whiteSpace: "nowrap",
+            }}
+          >
+            hold duration
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/panels/advanced/sections/HotkeySection.tsx b/src/components/panels/advanced/sections/HotkeySection.tsx
new file mode 100644
index 00000000..e15f09e5
--- /dev/null
+++ b/src/components/panels/advanced/sections/HotkeySection.tsx
@@ -0,0 +1,99 @@
+import { useRef } from "react";
+import type { Settings } from "../../../../store";
+import { conflictsWithAutoPressKey } from "../../../../hotkeys";
+import HotkeyCaptureInput, {
+  type HotkeyCaptureInputHandle,
+} from "../../../HotkeyCaptureInput";
+import { CardDivider } from "./shared";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+export default function HotkeySection({ settings, update }: Props) {
+  const hotkeyInputRef = useRef<HotkeyCaptureInputHandle>(null);
+
+  const hasConflict =
+    settings.inputType === "keyboard" &&
+    conflictsWithAutoPressKey(
+      settings.hotkey,
+      settings.keyboardKey,
+      settings.keyboardKeyCase === "upper",
+    );
+  const hotkeyConflicts = hasConflict ? ["Auto-press key"] : [];
+
+  return (
+    <div className="adv-sectioncontainer adv-basic-card">
+      <div className="adv-card-header">
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+          }}
+        >
+          <span style={{ color: "var(--text-dim)" }}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+            </svg>
+          </span>
+          <span className="adv-card-title">Hotkey</span>
+        </div>
+        <div className="adv-seg-group">
+          {(["Toggle", "Hold"] as const).map((clickModeOption) => (
+            <button
+              key={clickModeOption}
+              className={`adv-seg-btn ${settings.mode === clickModeOption ? "active" : ""}`}
+              onClick={() => update({ mode: clickModeOption })}
+            >
+              {clickModeOption}
+            </button>
+          ))}
+        </div>
+      </div>
+      <CardDivider />
+      <div className="adv-card-desc">
+        {settings.mode === "Hold"
+          ? "Hold the hotkey to click. Release to stop."
+          : "Press the hotkey to toggle the clicker on and off."}
+      </div>
+      <div className="adv-row" style={{ gap: 8 }}>
+        <div className="adv-textbox" style={{ flex: 1 }}>
+          <HotkeyCaptureInput
+            ref={hotkeyInputRef}
+            className="adv-textbox-text"
+            value={settings.hotkey}
+            onChange={(hotkey: string) => update({ hotkey })}
+            style={{
+              background: "transparent",
+              border: "none",
+              outline: "none",
+              width: "100%",
+            }}
+            conflicts={hotkeyConflicts}
+            editable={false}
+          />
+        </div>
+        <button
+          type="button"
+          className="adv-hotkey-edit-btn"
+          onClick={() => hotkeyInputRef.current?.startListening()}
+        >
+          Edit Hotkey
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/panels/advanced/LimitsSection.tsx b/src/components/panels/advanced/sections/LimitsSection.tsx
similarity index 77%
rename from src/components/panels/advanced/LimitsSection.tsx
rename to src/components/panels/advanced/sections/LimitsSection.tsx
index 83704436..53864d5a 100644
--- a/src/components/panels/advanced/LimitsSection.tsx
+++ b/src/components/panels/advanced/sections/LimitsSection.tsx
@@ -1,19 +1,18 @@
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import type { Settings, TimeLimitUnit } from "../../../store";
+import type { Settings, TimeLimitUnit } from "../../../../store";
 
 import {
   SETTINGS_LIMITS,
   TIME_LIMIT_UNIT_OPTIONS,
-} from "../../../settingsSchema";
-import { Disableable, NumInput, ToggleBtn, InfoIcon } from "./shared";
+} from "../../../../settingsSchema";
+import { CardDivider, Disableable, NumInput, ToggleBtn } from "./shared";
 
 interface Props {
   settings: Settings;
   update: (patch: Partial<Settings>) => void;
-  showInfo: boolean;
 }
 
-export default function LimitsSection({ settings, update, showInfo }: Props) {
+export default function LimitsSection({ settings, update }: Props) {
   const [mode, setMode] = useState<"clicks" | "time">("clicks");
   const effectiveMode: "clicks" | "time" =
     settings.timeLimitEnabled !== settings.clickLimitEnabled
@@ -86,31 +85,41 @@ export default function LimitsSection({ settings, update, showInfo }: Props) {
             gap: "0.5rem",
           }}
         >
-          {showInfo ? (
-            <InfoIcon
-              text={
-                isClicksMode
-                  ? "Stops automatically after the selected number of clicks."
-                  : "Stops automatically after the selected duration."
-              }
-            />
-          ) : null}
+          <span style={{ color: "var(--text-dim)" }}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+            </svg>
+          </span>
           <span className="adv-card-title">Limits</span>
         </div>
         <ToggleBtn value={activeEnabled} onChange={handleToggleChange} />
       </div>
-      <div
-        className="adv-row"
-        style={{
-          gap: 6,
-          marginTop: 6,
-          width: "100%",
-          justifyContent: "flex-end",
-        }}
+      <CardDivider />
+      <Disableable
+        enabled={activeEnabled}
+        disabledReason={activeUnavailableReason}
       >
-        <Disableable
-          enabled={activeEnabled}
-          disabledReason={activeUnavailableReason}
+        <div className="adv-card-desc">
+          Stop automatically after a set number of clicks or time.
+        </div>
+        <div
+          className="adv-row"
+          style={{
+            gap: 6,
+            marginTop: 6,
+            width: "100%",
+            justifyContent: "flex-end",
+          }}
         >
           <div className="adv-row" style={{ gap: 6, marginLeft: "auto" }}>
             {isClicksMode ? (
@@ -169,8 +178,8 @@ export default function LimitsSection({ settings, update, showInfo }: Props) {
               </button>
             </div>
           </div>
-        </Disableable>
-      </div>
+        </div>
+      </Disableable>
     </div>
   );
 }
diff --git a/src/components/panels/advanced/sections/SpeedRandomizationSection.tsx b/src/components/panels/advanced/sections/SpeedRandomizationSection.tsx
new file mode 100644
index 00000000..2669b81e
--- /dev/null
+++ b/src/components/panels/advanced/sections/SpeedRandomizationSection.tsx
@@ -0,0 +1,89 @@
+import type { Settings } from "../../../../store";
+
+import { SETTINGS_LIMITS } from "../../../../settingsSchema";
+import { CardDivider, Disableable, NumInput, ToggleBtn } from "./shared";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+export default function SpeedRandomizationSection({ settings, update }: Props) {
+  return (
+    <div className="adv-sectioncontainer adv-basic-card">
+      <div className="adv-card-header">
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.5rem",
+          }}
+        >
+          <span style={{ color: "var(--text-dim)" }}>
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 16 16"
+              fill="none"
+              aria-hidden="true"
+            >
+              <path
+                d="M3 3l3-3 3 3M13 13l-3 3-3-3"
+                stroke="currentColor"
+                strokeWidth="1.25"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M6 0v6M10 16v-6"
+                stroke="currentColor"
+                strokeWidth="1.25"
+                strokeLinecap="round"
+              />
+              <path
+                d="M3 13l3-3 3 3M13 3l-3 3-3-3"
+                stroke="currentColor"
+                strokeWidth="1.25"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                opacity="0.4"
+              />
+              <path
+                d="M6 10v6M10 6V0"
+                stroke="currentColor"
+                strokeWidth="1.25"
+                strokeLinecap="round"
+                opacity="0.4"
+              />
+            </svg>
+          </span>
+          <span className="adv-card-title">Speed Randomization</span>
+        </div>
+        <ToggleBtn
+          value={settings.speedRandomizationEnabled}
+          onChange={(v) => update({ speedRandomizationEnabled: v })}
+        />
+      </div>
+      <CardDivider />
+      <Disableable
+        enabled={settings.speedRandomizationEnabled}
+        disabledReason="Enable Speed Randomization to edit how much the app randomizes your click timing."
+      >
+        <div className="adv-card-desc">
+          Randomizes your click speed by the given percentage.
+        </div>
+        <div className="adv-row" style={{ gap: 8, justifyContent: "flex-end" }}>
+          <div className="adv-numbox-sm">
+            <NumInput
+              value={settings.speedRandomization}
+              onChange={(v) => update({ speedRandomization: v })}
+              min={SETTINGS_LIMITS.speedRandomization.min}
+              max={SETTINGS_LIMITS.speedRandomization.max}
+            />
+            <span className="adv-unit">%</span>
+          </div>
+        </div>
+      </Disableable>
+    </div>
+  );
+}
diff --git a/src/components/panels/advanced/sections/shared.css b/src/components/panels/advanced/sections/shared.css
new file mode 100644
index 00000000..f906c69c
--- /dev/null
+++ b/src/components/panels/advanced/sections/shared.css
@@ -0,0 +1,525 @@
+.adv-panel {
+  --adv-control-height: 32px;
+}
+
+.adv-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.adv-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.adv-row--grow {
+  flex: 1;
+  overflow: hidden;
+  align-items: stretch;
+}
+
+.adv-sectioncontainer {
+  background: var(--bg-surface);
+  border: 0px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.625rem;
+  flex: 1;
+  box-shadow: var(--container-shadow);
+  border-color: var(--bg-input);
+  border-width: 0.125rem;
+}
+
+.adv-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.adv-card-header svg {
+  vertical-align: middle;
+}
+
+.adv-card-title {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-hv);
+  color: var(--text-primary);
+  letter-spacing: -0.02em;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.adv-card-divider {
+  border-radius: var(--radius-sm);
+  height: 1px;
+  background: var(--border-subtle);
+  margin: 0.5rem 0;
+}
+
+.adv-card-desc {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  line-height: 1.4;
+  margin: 0.5rem 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.adv-numbox-sm {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  min-height: var(--adv-control-height);
+  padding: 0 0.5rem;
+  transition: border-color 0.15s ease;
+}
+
+.adv-numbox-sm:hover {
+  border-color: var(--accent-ring);
+}
+
+.adv-numbox-sm:focus-within {
+  border-color: var(--accent-ring);
+}
+
+.adv-number-sm {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-hv);
+  color: var(--text-primary);
+}
+
+.adv-unit {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.625rem;
+  font-weight: var(--font-weight-hv);
+  letter-spacing: 0.05em;
+  color: var(--text-dim);
+  margin-left: 3px;
+}
+
+.adv-secondary-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  box-sizing: border-box;
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 12px;
+  font-weight: var(--font-weight-hv);
+  padding: 0 8px;
+  line-height: 1;
+  background: transparent;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease,
+    opacity 0.15s ease;
+}
+
+.adv-secondary-btn:hover {
+  border-color: var(--text-dim);
+  color: var(--text-primary);
+}
+
+.adv-secondary-btn:disabled {
+  opacity: 0.6;
+  cursor: progress;
+}
+
+.adv-seg-group {
+  display: flex;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  min-height: var(--adv-control-height);
+  overflow: hidden;
+  transition-duration: 0.2s;
+  flex-shrink: 0;
+}
+
+.adv-seg-group:hover {
+  border-color: var(--accent-ring);
+}
+
+.adv-seg-btn {
+  flex: 0 0 auto;
+  height: calc(var(--adv-control-height) - 2px);
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 1rem;
+  font-weight: var(--font-weight-md);
+  line-height: 1.125rem;
+  padding: 0.25rem 0.75rem;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition:
+    color 0.2s ease,
+    background 0.2s ease;
+}
+
+.adv-seg-btn:hover {
+  color: var(--text-muted);
+}
+
+.adv-seg-btn.active {
+  background: var(--accent-soft);
+  color: var(--text-primary);
+}
+
+.adv-seg-btn:focus,
+.adv-seg-btn:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.adv-toggle-group {
+  display: flex;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  min-height: var(--adv-control-height);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.adv-toggle-group:hover {
+  border-color: var(--accent-ring);
+}
+
+.adv-toggle-btn {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 4%;
+  text-transform: uppercase;
+  height: calc(var(--adv-control-height) - 2px);
+  padding: 0 0.5rem;
+  min-width: 2.1875rem;
+  text-align: center;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition:
+    color 50ms ease,
+    background 50ms ease;
+}
+
+.adv-toggle-btn:hover {
+  color: var(--text-muted);
+}
+
+.adv-toggle-on.active {
+  background: var(--accent-soft);
+  color: var(--text-primary);
+}
+
+.adv-toggle-off.active {
+  background: var(--bg-input);
+  color: #a33c3c;
+}
+
+.adv-toggle-btn.adv-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.adv-click-points-coord {
+  min-width: 0;
+  min-height: 2rem;
+  padding: 0 0.5rem;
+}
+
+.adv-click-points-coord .adv-number-sm {
+  height: 2rem;
+  line-height: 2rem;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.adv-click-points-item {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 6px;
+  background: var(--bg-elevated);
+  width: 100%;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  position: relative;
+  overflow: hidden;
+}
+
+.adv-click-points-empty {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 1.5rem 1rem;
+  text-align: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.adv-click-points-empty-icon {
+  color: var(--text-dim);
+  opacity: 0.5;
+  margin-bottom: 0.125rem;
+}
+
+.adv-click-points-empty-title {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.8125rem;
+  font-weight: var(--font-weight-hv);
+  color: var(--text-muted);
+}
+
+.adv-click-points-empty-hint {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-li);
+  color: var(--text-dim);
+  line-height: 1.5;
+  max-width: 12.5rem;
+}
+
+.adv-click-points-empty-hint strong {
+  font-weight: var(--font-weight-hv);
+  color: var(--text-muted);
+}
+
+.adv-disabled-container {
+  position: relative;
+  transition: opacity 0.3s ease;
+}
+
+.adv-disabled-content {
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.adv-disabled-overlay {
+  position: absolute;
+  inset: -0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.01);
+  backdrop-filter: blur(0px);
+  border-radius: var(--radius-md);
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.2s ease;
+  z-index: 10;
+}
+
+.adv-disabled-container:hover .adv-disabled-overlay {
+  opacity: 1;
+  backdrop-filter: blur(2px);
+  background: rgba(0, 0, 0, 0.1);
+  pointer-events: auto;
+}
+
+.adv-disabled-label {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-muted);
+  background: var(--bg-surface);
+  padding: 0.25rem 0.625rem;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--border-subtle);
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
+}
+
+.adv-number-sm {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-hv);
+  color: var(--text-dim);
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+.adv-info-icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  cursor: help;
+  color: var(--text-dim);
+  transition: color 0.15s ease;
+  user-select: none;
+  z-index: 2000;
+  isolation: isolate;
+}
+
+.adv-info-icon:hover {
+  color: var(--text-muted);
+}
+
+.adv-info-tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 0;
+  transform: none;
+  width: 220px;
+  padding: 6px 8px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-li);
+  color: var(--text-muted);
+  line-height: 1.5;
+  letter-spacing: 0.02em;
+  text-align: left;
+  z-index: 3000;
+  pointer-events: none;
+  transition:
+    opacity 0.15s ease,
+    visibility 0.15s ease;
+  box-shadow: var(--container-shadow);
+}
+
+.adv-info-icon:hover .adv-info-tooltip {
+  visibility: visible;
+  opacity: 1;
+}
+
+.adv-info-tooltip--portal {
+  position: fixed;
+  visibility: visible;
+  opacity: 1;
+  bottom: auto;
+  z-index: 9999;
+}
+
+.adv-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 100;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  box-shadow: var(--container-shadow);
+  overflow: hidden;
+  min-width: fit-content;
+}
+
+.adv-dropdown {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.adv-dropdown-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: calc(var(--adv-control-height) - 2px);
+  padding: 0.125rem 0.5rem 0.125rem 0.375rem;
+  background: transparent;
+  border: none;
+  color: var(--text-primary);
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 1rem;
+  font-weight: var(--font-weight-md);
+  cursor: pointer;
+  transition: color 0.15s ease;
+  gap: 2px;
+}
+
+.adv-dropdown-trigger:hover {
+  color: var(--text-primary);
+}
+
+.adv-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 1rem;
+  font-weight: var(--font-weight-md);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    color 0.1s ease,
+    background 0.1s ease;
+}
+
+.adv-dropdown-item:hover {
+  color: var(--text-primary);
+  background: var(--bg-input);
+}
+
+.adv-dropdown-item.active {
+  color: var(--text-primary);
+  background: var(--bg-input);
+}
+
+.adv-hotkey-edit-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  min-height: var(--adv-control-height);
+  padding: 0 0.75rem;
+  color: var(--text-dim);
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 1rem;
+  font-weight: var(--font-weight-hv);
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+  user-select: none;
+  transition:
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.adv-hotkey-edit-btn:hover {
+  border-color: var(--accent-strong);
+  color: var(--text-primary);
+}
+
+.adv-hotkey-edit-btn:focus-visible {
+  outline: none;
+  border-color: var(--accent-strong);
+}
diff --git a/src/components/panels/advanced/shared.tsx b/src/components/panels/advanced/sections/shared.tsx
similarity index 91%
rename from src/components/panels/advanced/shared.tsx
rename to src/components/panels/advanced/sections/shared.tsx
index 8029f551..7efc8f63 100644
--- a/src/components/panels/advanced/shared.tsx
+++ b/src/components/panels/advanced/sections/shared.tsx
@@ -13,8 +13,10 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 
-import { normalizeIntegerRaw } from "../../../numberInput";
-import UnavailableReason from "../../UnavailableReason";
+import { normalizeIntegerRaw } from "../../../../numberInput";
+import UnavailableReason from "../../../UnavailableReason";
+
+import "./shared.css";
 
 // ToggleBtn ← These are here just for some visual space
 
@@ -152,20 +154,33 @@ export function NumInput({
     onChange(clampValue(val));
   };
 
-  const handleWheel = (e: WheelEvent<HTMLInputElement>) => {
-    if (!hoverWheel && e.target !== document.activeElement) return;
-    e.preventDefault();
-    const direction = e.deltaY < 0 ? 1 : -1;
-    const current = Number.isFinite(value) ? value : (min ?? 0);
-    let step = 1;
-    if (e.shiftKey && e.ctrlKey) step = 10;
-    else if (e.shiftKey) step = 5;
-    wheelRef.current = true;
-    onChange(clampValue(current + direction * step));
-    setTimeout(() => {
-      wheelRef.current = false;
-    }, 0);
-  };
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const handler = (e: WheelEvent) => {
+      if (!hoverWheel && e.target !== el) return;
+      e.preventDefault();
+      const direction = e.deltaY < 0 ? 1 : -1;
+      const current = Number.isFinite(value) ? value : (min ?? 0);
+      let step = 1;
+      if (e.shiftKey && e.ctrlKey) step = 100;
+      else if (e.ctrlKey) step = 25;
+      else if (e.shiftKey) step = 5;
+      let next = current + direction * step;
+      if (min !== undefined && next < min) next = min;
+      if (max !== undefined && next > max) next = max;
+      wheelRef.current = true;
+      onChange(next);
+      setTimeout(() => {
+        wheelRef.current = false;
+      }, 0);
+    };
+    el.addEventListener("wheel", handler as unknown as EventListener, {
+      passive: false,
+    });
+    return () =>
+      el.removeEventListener("wheel", handler as unknown as EventListener);
+  }, [hoverWheel, value, min, max, onChange]);
 
   return (
     <input
@@ -177,7 +192,6 @@ export function NumInput({
       max={max}
       onChange={handleChange}
       onBlur={handleBlur}
-      onWheel={handleWheel}
       style={{
         background: "transparent",
         border: "none",
@@ -328,12 +342,14 @@ export function AdvDropdown({
   value,
   options,
   onChange,
+  hoverWheel = true,
   allowWindowOverflow = false,
   windowOverflowBottom = 190,
 }: {
   value: string;
   options: readonly { value: string; label: string }[];
   onChange: (value: string) => void;
+  hoverWheel?: boolean;
   allowWindowOverflow?: boolean;
   windowOverflowBottom?: number;
 }) {
@@ -435,7 +451,7 @@ export function AdvDropdown({
   }, [open]);
 
   const handleWheel = (e: WheelEvent) => {
-    if (open) return;
+    if (!hoverWheel || open) return;
     e.preventDefault();
     const currentIndex = options.findIndex((o) => o.value === value);
     if (currentIndex === -1) return;
diff --git a/src/components/panels/click-points/ClickPointRow.tsx b/src/components/panels/click-points/ClickPointRow.tsx
new file mode 100644
index 00000000..239df2f8
--- /dev/null
+++ b/src/components/panels/click-points/ClickPointRow.tsx
@@ -0,0 +1,190 @@
+import { type CSSProperties } from "react";
+import type { ClickPoint } from "../../../store";
+import { NumInput } from "../advanced/sections/shared";
+
+interface Props {
+  point: ClickPoint;
+  index: number;
+  isActive: boolean;
+  isDragging: boolean;
+  activeTick: number;
+  stepDurationMs: number;
+  onUpdate: (index: number, patch: Partial<ClickPoint>) => void;
+  onDelete: (index: number) => void;
+  onDragStart: (
+    pointId: string,
+    pointerId: number,
+    handle: HTMLButtonElement,
+    clientY: number,
+  ) => void;
+  setItemRef: (pointId: string, node: HTMLDivElement | null) => void;
+}
+
+export default function ClickPointRow({
+  point,
+  index,
+  isActive,
+  isDragging,
+  activeTick,
+  stepDurationMs,
+  onUpdate,
+  onDelete,
+  onDragStart,
+  setItemRef,
+}: Props) {
+  return (
+    <div
+      key={point.id}
+      ref={(node) => setItemRef(point.id, node)}
+      className={`adv-click-points-item ${
+        isDragging ? "adv-click-points-item--dragging" : ""
+      } ${isActive ? "adv-click-points-item--active" : ""}`}
+      style={
+        isActive
+          ? ({
+              "--click-points-step-duration": `${stepDurationMs}ms`,
+              "--click-points-step-clicks": point.clicks,
+            } as CSSProperties)
+          : undefined
+      }
+    >
+      {isActive ? (
+        <span key={activeTick} className="adv-click-points-progress" />
+      ) : null}
+      <div className="adv-click-points-leading">
+        <span className="adv-click-points-index">{index + 1}</span>
+        <button
+          type="button"
+          className="adv-click-points-drag-handle"
+          aria-label="Up / Down"
+          onPointerDown={(event) => {
+            event.preventDefault();
+            const handle = event.currentTarget;
+            handle.setPointerCapture(event.pointerId);
+            onDragStart(point.id, event.pointerId, handle, event.clientY);
+          }}
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M2 3H10M2 6H10M2 9H10"
+              stroke="currentColor"
+              strokeWidth="1.4"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      </div>
+      <label
+        className="adv-numbox-sm adv-click-points-coord adv-click-points-position"
+        style={{ gap: "0.25rem" }}
+      >
+        <span
+          className="adv-unit"
+          style={{
+            minWidth: "0.125rem",
+            textAlign: "center",
+          }}
+        >
+          X
+        </span>
+        <NumInput
+          hoverWheel={false}
+          value={point.x}
+          onChange={(value) => onUpdate(index, { x: value })}
+          style={{ textAlign: "right", width: undefined }}
+        />
+      </label>
+      <label
+        className="adv-numbox-sm adv-click-points-coord adv-click-points-position"
+        style={{ gap: "0.25rem" }}
+      >
+        <span
+          className="adv-unit"
+          style={{
+            minWidth: "0.125rem",
+            textAlign: "left",
+          }}
+        >
+          Y
+        </span>
+        <NumInput
+          hoverWheel={false}
+          value={point.y}
+          onChange={(value) => onUpdate(index, { y: value })}
+          style={{ textAlign: "right", width: undefined }}
+        />
+      </label>
+      <label
+        className="adv-numbox-sm adv-click-points-coord adv-click-points-clicks"
+        style={{ gap: "0.25rem" }}
+      >
+        <span
+          className="adv-unit"
+          style={{ minWidth: "0.75rem", textAlign: "left" }}
+        >
+          clicks
+        </span>
+        <NumInput
+          hoverWheel={false}
+          value={point.clicks}
+          min={1}
+          max={999999}
+          onChange={(value) => onUpdate(index, { clicks: value })}
+          style={{ textAlign: "right", width: undefined }}
+        />
+      </label>
+      <label
+        className="adv-numbox-sm adv-click-points-coord adv-click-points-radius"
+        style={{ gap: "0.25rem" }}
+      >
+        <span
+          className="adv-unit"
+          style={{ minWidth: "0.375rem", textAlign: "center" }}
+        >
+          r
+        </span>
+        <NumInput
+          hoverWheel={false}
+          value={point.radius}
+          min={0}
+          max={9999}
+          onChange={(value) => onUpdate(index, { radius: value })}
+          style={{ textAlign: "right", width: undefined }}
+        />
+      </label>
+      <div className="adv-click-points-actions">
+        <button
+          type="button"
+          className="adv-click-points-delete"
+          onClick={() => onDelete(index)}
+          aria-label="Delete"
+          title="Delete"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 12 12"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+          >
+            <path
+              d="M2.5 3.5H9.5M4.25 3.5V2.75C4.25 2.34 4.59 2 5 2H7C7.41 2 7.75 2.34 7.75 2.75V3.5M8.75 3.5V9C8.75 9.55 8.3 10 7.75 10H4.25C3.7 10 3.25 9.55 3.25 9V3.5M5 5.25V8.25M7 5.25V8.25"
+              stroke="currentColor"
+              strokeWidth="1.1"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/panels/click-points/ClickPointsContent.tsx b/src/components/panels/click-points/ClickPointsContent.tsx
new file mode 100644
index 00000000..1f6da53c
--- /dev/null
+++ b/src/components/panels/click-points/ClickPointsContent.tsx
@@ -0,0 +1,604 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { error } from "@tauri-apps/plugin-log";
+import { getEffectiveIntervalMs } from "../../../cadence";
+import type { ClickPoint, Settings } from "../../../store";
+
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import {
+  Disableable,
+  CardDivider,
+  ToggleBtn,
+  InfoIcon,
+} from "../advanced/sections/shared";
+import ClickPointRow from "./ClickPointRow";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+  showInfo: boolean;
+  running: boolean;
+  activeClickPointIndex: number | null;
+  activeClickPointTick: number;
+}
+
+interface ClickPointPickedPayload {
+  x: number;
+  y: number;
+  continuePicking: boolean;
+}
+
+interface ClickPointDeleteRequestedPayload {
+  x: number;
+  y: number;
+}
+
+interface DragState {
+  draggedId: string;
+  pointerId: number;
+  latestClientY: number;
+  handle: HTMLButtonElement | null;
+}
+
+const DELETE_RADIUS_PX = 10;
+
+function createClickPointId(): string {
+  return (
+    globalThis.crypto?.randomUUID?.() ??
+    `cp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+  );
+}
+
+function reorderClickPoints(
+  points: ClickPoint[],
+  draggedId: string,
+  insertionIndex: number,
+): ClickPoint[] {
+  const draggedPoint = points.find((point) => point.id === draggedId);
+  if (!draggedPoint) {
+    return points;
+  }
+
+  const remainingPoints = points.filter((point) => point.id !== draggedId);
+  const clampedIndex = Math.max(
+    0,
+    Math.min(insertionIndex, remainingPoints.length),
+  );
+
+  return [
+    ...remainingPoints.slice(0, clampedIndex),
+    draggedPoint,
+    ...remainingPoints.slice(clampedIndex),
+  ];
+}
+
+function haveSameOrder(a: ClickPoint[], b: ClickPoint[]) {
+  return (
+    a.length === b.length &&
+    a.every((point, index) => point.id === b[index]?.id)
+  );
+}
+
+export default function ClickPointsContent({
+  settings,
+  update,
+  showInfo,
+  running,
+  activeClickPointIndex,
+  activeClickPointTick,
+}: Props) {
+  const [picking, setPicking] = useState(false);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [showBottomFade, setShowBottomFade] = useState(false);
+  const listViewportRef = useRef<HTMLDivElement | null>(null);
+  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  const latestPointsRef = useRef(settings.clickPoints);
+  const latestSettingsRef = useRef(settings);
+  const updateRef = useRef(update);
+  const dragStateRef = useRef<DragState | null>(null);
+  const moveFrameRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    updateRef.current = update;
+  }, [update]);
+
+  useEffect(() => {
+    let disposed = false;
+    let unlistenPicked: (() => void) | null = null;
+    let unlistenDeleteRequested: (() => void) | null = null;
+    let unlistenEnded: (() => void) | null = null;
+
+    void listen<ClickPointPickedPayload>("click-point-picked", (event) => {
+      const defaults = latestSettingsRef.current;
+      const newClicks = defaults.newClickPointClicks ?? 1;
+      const newRadius = defaults.newClickPointRadius ?? 0;
+      const currentPoints = latestPointsRef.current;
+      const newPoint: ClickPoint = {
+        id: createClickPointId(),
+        x: event.payload.x,
+        y: event.payload.y,
+        clicks: newClicks,
+        radius: newRadius,
+      };
+      const nextPoints = [...currentPoints, newPoint];
+
+      latestPointsRef.current = nextPoints;
+      updateRef.current({
+        clickPointsEnabled: true,
+        clickPoints: nextPoints,
+      });
+
+      if (!event.payload.continuePicking) {
+        setPicking(false);
+      }
+    }).then((cleanup) => {
+      if (disposed) {
+        cleanup();
+      } else {
+        unlistenPicked = cleanup;
+      }
+    });
+
+    void listen<ClickPointDeleteRequestedPayload>(
+      "click-point-delete-requested",
+      (event) => {
+        const radiusSquared = DELETE_RADIUS_PX ** 2;
+        let nearestIndex = -1;
+        let nearestDistanceSquared = Number.POSITIVE_INFINITY;
+
+        latestPointsRef.current.forEach((point, index) => {
+          const dx = point.x - event.payload.x;
+          const dy = point.y - event.payload.y;
+          const distanceSquared = dx * dx + dy * dy;
+
+          if (
+            distanceSquared <= radiusSquared &&
+            distanceSquared < nearestDistanceSquared
+          ) {
+            nearestIndex = index;
+            nearestDistanceSquared = distanceSquared;
+          }
+        });
+
+        if (nearestIndex === -1) {
+          return;
+        }
+
+        const nextPoints = latestPointsRef.current.filter(
+          (_point, index) => index !== nearestIndex,
+        );
+        latestPointsRef.current = nextPoints;
+        updateRef.current({ clickPoints: nextPoints });
+      },
+    ).then((cleanup) => {
+      if (disposed) {
+        cleanup();
+      } else {
+        unlistenDeleteRequested = cleanup;
+      }
+    });
+
+    void listen("click-pick-ended", () => {
+      setPicking(false);
+    }).then((cleanup) => {
+      if (disposed) {
+        cleanup();
+      } else {
+        unlistenEnded = cleanup;
+      }
+    });
+
+    return () => {
+      disposed = true;
+      unlistenPicked?.();
+      unlistenDeleteRequested?.();
+      unlistenEnded?.();
+      void invoke("cancel_click_point_pick");
+    };
+  }, []);
+
+  const startPick = useCallback(async () => {
+    setPicking(true);
+    try {
+      await invoke("start_click_point_pick");
+    } catch (err) {
+      setPicking(false);
+      error(
+        JSON.stringify({
+          source: "ClickPointsContent.startPick",
+          error: String(err),
+        }),
+      );
+    }
+  }, []);
+
+  const cancelPick = useCallback(async () => {
+    setPicking(false);
+    try {
+      await invoke("cancel_click_point_pick");
+    } catch (err) {
+      error(
+        JSON.stringify({
+          source: "ClickPointsContent.cancelPick",
+          error: String(err),
+        }),
+      );
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!picking) {
+      return;
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      void cancelPick();
+    };
+
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [cancelPick, picking]);
+
+  const updatePoint = (index: number, patch: Partial<ClickPoint>) => {
+    const nextPoints = settings.clickPoints.map(
+      (point: ClickPoint, pointIndex: number) =>
+        pointIndex === index ? { ...point, ...patch } : point,
+    );
+    update({ clickPoints: nextPoints });
+  };
+
+  const deletePoint = (index: number) => {
+    const nextPoints = settings.clickPoints.filter(
+      (_: ClickPoint, pointIndex: number) => pointIndex !== index,
+    );
+    update({ clickPoints: nextPoints });
+  };
+
+  const setItemRef = useCallback(
+    (pointId: string, node: HTMLDivElement | null) => {
+      if (node) {
+        itemRefs.current.set(pointId, node);
+      } else {
+        itemRefs.current.delete(pointId);
+      }
+    },
+    [],
+  );
+
+  const updateBottomFade = useCallback(() => {
+    const viewport = listViewportRef.current;
+    if (!viewport) {
+      setShowBottomFade(false);
+      return;
+    }
+    const hasOverflow = viewport.scrollHeight - viewport.clientHeight > 6;
+    const hasMoreBelow =
+      hasOverflow &&
+      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight > 6;
+    setShowBottomFade(hasMoreBelow);
+  }, []);
+
+  const commitPoints = useCallback(
+    (nextPoints: ClickPoint[]) => {
+      if (haveSameOrder(latestPointsRef.current, nextPoints)) {
+        return;
+      }
+      latestPointsRef.current = nextPoints;
+      update({ clickPoints: nextPoints });
+    },
+    [update],
+  );
+
+  const computeInsertionIndex = useCallback(
+    (clientY: number, draggedId: string) => {
+      const orderedPoints = latestPointsRef.current.filter(
+        (point) => point.id !== draggedId,
+      );
+
+      if (orderedPoints.length === 0) {
+        return 0;
+      }
+
+      const measuredPoints = orderedPoints
+        .map((point) => ({
+          point,
+          rect: itemRefs.current.get(point.id)?.getBoundingClientRect() ?? null,
+        }))
+        .filter(
+          (entry): entry is { point: ClickPoint; rect: DOMRect } =>
+            entry.rect !== null,
+        );
+
+      if (measuredPoints.length === 0) {
+        return orderedPoints.length;
+      }
+
+      for (let index = 0; index < measuredPoints.length; index += 1) {
+        const { rect } = measuredPoints[index];
+        if (clientY < rect.top + rect.height / 2) {
+          return index;
+        }
+      }
+
+      return measuredPoints.length;
+    },
+    [],
+  );
+
+  const updateDragOrder = useCallback(
+    (clientY: number) => {
+      const dragState = dragStateRef.current;
+      if (!dragState) {
+        return;
+      }
+
+      const viewport = listViewportRef.current;
+      if (viewport) {
+        const rect = viewport.getBoundingClientRect();
+        const edgeThreshold = 40;
+        if (clientY < rect.top + edgeThreshold) {
+          viewport.scrollTop -= Math.max(
+            6,
+            (rect.top + edgeThreshold - clientY) * 0.25,
+          );
+        } else if (clientY > rect.bottom - edgeThreshold) {
+          viewport.scrollTop += Math.max(
+            6,
+            (clientY - (rect.bottom - edgeThreshold)) * 0.25,
+          );
+        }
+      }
+
+      const nextPoints = reorderClickPoints(
+        latestPointsRef.current,
+        dragState.draggedId,
+        computeInsertionIndex(clientY, dragState.draggedId),
+      );
+
+      commitPoints(nextPoints);
+      updateBottomFade();
+    },
+    [commitPoints, computeInsertionIndex, updateBottomFade],
+  );
+
+  useEffect(() => {
+    latestSettingsRef.current = settings;
+  }, [settings]);
+
+  useEffect(() => {
+    latestPointsRef.current = settings.clickPoints;
+    const frame = window.requestAnimationFrame(() => {
+      updateBottomFade();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [settings.clickPoints, updateBottomFade]);
+
+  useEffect(() => {
+    const viewport = listViewportRef.current;
+    if (!viewport) {
+      return;
+    }
+
+    const handleScroll = () => {
+      updateBottomFade();
+    };
+    const handleWheel = (event: WheelEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (!target) {
+        return;
+      }
+      if (
+        target.closest("input.adv-number-sm") &&
+        target === document.activeElement
+      ) {
+        event.preventDefault();
+      }
+    };
+
+    viewport.addEventListener("scroll", handleScroll, { passive: true });
+    viewport.addEventListener("wheel", handleWheel, { passive: false });
+    const resizeObserver = new ResizeObserver(() => {
+      updateBottomFade();
+    });
+    resizeObserver.observe(viewport);
+
+    return () => {
+      viewport.removeEventListener("scroll", handleScroll);
+      viewport.removeEventListener("wheel", handleWheel);
+      resizeObserver.disconnect();
+    };
+  }, [updateBottomFade]);
+
+  useEffect(() => {
+    if (draggingId === null) {
+      return;
+    }
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const dragState = dragStateRef.current;
+      if (!dragState || event.pointerId !== dragState.pointerId) {
+        return;
+      }
+
+      dragState.latestClientY = event.clientY;
+      if (moveFrameRef.current !== null) {
+        return;
+      }
+
+      moveFrameRef.current = window.requestAnimationFrame(() => {
+        moveFrameRef.current = null;
+        updateDragOrder(dragState.latestClientY);
+      });
+    };
+
+    const finishDrag = (event: PointerEvent) => {
+      const dragState = dragStateRef.current;
+      if (!dragState || event.pointerId !== dragState.pointerId) {
+        return;
+      }
+
+      if (moveFrameRef.current !== null) {
+        window.cancelAnimationFrame(moveFrameRef.current);
+        moveFrameRef.current = null;
+      }
+
+      dragState.handle?.releasePointerCapture?.(dragState.pointerId);
+      dragStateRef.current = null;
+      setDraggingId(null);
+      updateBottomFade();
+    };
+
+    window.addEventListener("pointermove", handlePointerMove, {
+      passive: true,
+    });
+    window.addEventListener("pointerup", finishDrag);
+    window.addEventListener("pointercancel", finishDrag);
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", finishDrag);
+      window.removeEventListener("pointercancel", finishDrag);
+    };
+  }, [draggingId, updateBottomFade, updateDragOrder]);
+
+  const activeIndex =
+    running && settings.clickPointsEnabled ? activeClickPointIndex : null;
+
+  const handleDragStart = useCallback(
+    (
+      pointId: string,
+      pointerId: number,
+      handle: HTMLButtonElement,
+      clientY: number,
+    ) => {
+      dragStateRef.current = {
+        draggedId: pointId,
+        pointerId,
+        latestClientY: clientY,
+        handle,
+      };
+      setDraggingId(pointId);
+    },
+    [],
+  );
+
+  return (
+    <div className="adv-sectioncontainer adv-click-points-card">
+      <div className="adv-card-header">
+        <span className="adv-card-title">Click Points</span>
+        <ToggleBtn
+          value={settings.clickPointsEnabled}
+          onChange={(v) => {
+            void cancelPick();
+            update({
+              clickPointsEnabled: v,
+            });
+          }}
+        />
+      </div>
+      <CardDivider />
+      <div className="adv-card-desc">
+        Choose a list of spots on your screen to click one after another. Each
+        spot will use the speed and settings you chose. Choose just one spot if
+        you want to click the exact same place over and over.
+      </div>
+      <Disableable enabled={settings.clickPointsEnabled}>
+        <div className="adv-click-points-body">
+          <div className="adv-click-points-controls">
+            <button
+              type="button"
+              className={`adv-secondary-btn adv-click-points-pick-btn${settings.clickPoints.length > 0 ? " adv-click-points-pick-btn--filled" : ""}`}
+              onClick={() => {
+                void (picking ? cancelPick() : startPick());
+              }}
+            >
+              {picking ? "Cancel Picking" : "Start Picking"}
+            </button>
+            <div className="adv-click-points-list-shell">
+              <div ref={listViewportRef} className="adv-click-points-list">
+                {settings.clickPoints.length === 0 ? (
+                  <div className="adv-click-points-empty">
+                    <div className="adv-click-points-empty-icon">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        className="lucide lucide-spline-pointer-icon lucide-spline-pointer"
+                      >
+                        <path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z" />
+                        <path d="M5 17A12 12 0 0 1 17 5" />
+                        <circle cx="19" cy="5" r="2" />
+                        <circle cx="5" cy="19" r="2" />
+                      </svg>
+                    </div>
+                    <div className="adv-click-points-empty-title">
+                      No click points yet
+                    </div>
+                    <div className="adv-click-points-empty-hint">
+                      Hit <strong>Start Picking</strong> above, then right-click
+                      anywhere on screen to add a new click point.
+                    </div>
+                  </div>
+                ) : (
+                  settings.clickPoints.map(
+                    (point: ClickPoint, index: number) => {
+                      const isActive = activeIndex === index;
+                      const stepDurationMs = Math.max(
+                        1,
+                        point.clicks * getEffectiveIntervalMs(settings),
+                      );
+
+                      return (
+                        <ClickPointRow
+                          key={point.id}
+                          point={point}
+                          index={index}
+                          isActive={isActive}
+                          isDragging={draggingId === point.id}
+                          activeTick={activeClickPointTick}
+                          stepDurationMs={stepDurationMs}
+                          onUpdate={updatePoint}
+                          onDelete={deletePoint}
+                          onDragStart={handleDragStart}
+                          setItemRef={setItemRef}
+                        />
+                      );
+                    },
+                  )
+                )}
+              </div>
+              {showBottomFade ? (
+                <div className="adv-click-points-list-fade" />
+              ) : null}
+            </div>
+          </div>
+          <div className="adv-click-points-footer">
+            <div className="adv-click-points-option-row">
+              {showInfo ? (
+                <InfoIcon text="When enabled, the clicker stops after one full pass through all click points. When disabled, it loops through the list endlessly." />
+              ) : null}
+              <span className="adv-click-points-option-label">
+                Stop when complete
+              </span>
+              <ToggleBtn
+                value={settings.stopWhenComplete ?? false}
+                onChange={(v) => update({ stopWhenComplete: v })}
+              />
+            </div>
+          </div>
+        </div>
+      </Disableable>
+    </div>
+  );
+}
diff --git a/src/components/panels/click-points/ClickPointsPanel.css b/src/components/panels/click-points/ClickPointsPanel.css
new file mode 100644
index 00000000..20222dd0
--- /dev/null
+++ b/src/components/panels/click-points/ClickPointsPanel.css
@@ -0,0 +1,370 @@
+.adv-click-points-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.adv-click-points-card .adv-disabled-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.adv-click-points-card .adv-disabled-container > :first-child {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.adv-click-points-card .adv-disabled-content {
+  flex: 1;
+  min-height: 0;
+}
+
+.adv-click-points-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: stretch;
+  min-height: 0;
+  height: 100%;
+}
+
+.adv-click-points-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+}
+
+.adv-click-points-list-shell {
+  position: relative;
+  width: 100%;
+  flex: 1 1 auto;
+  height: 0;
+  min-height: 0;
+}
+
+.adv-click-points-list {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  overflow-y: hidden;
+  min-height: 0;
+  height: 100%;
+  padding: 0 2px 0 0;
+  box-sizing: border-box;
+  scrollbar-gutter: stable;
+  animation: adv-cplist-enable 0.01s 350ms forwards;
+}
+
+.adv-click-points-list::-webkit-scrollbar {
+  width: 0.375rem;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+}
+
+.adv-click-points-list::-webkit-scrollbar-thumb {
+  background: var(--text-dim);
+  border-radius: var(--radius-sm);
+}
+
+.adv-click-points-list::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+@keyframes adv-cplist-enable {
+  to {
+    overflow-y: auto;
+  }
+}
+
+.adv-click-points-list > * + * {
+  margin-top: 6px;
+}
+
+.adv-click-points-item {
+  display: grid;
+  grid-template-columns: 1.5rem auto auto auto auto 2rem;
+  gap: 0.25rem;
+  align-items: center;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.5rem 0.375rem;
+  background: var(--bg-elevated);
+  width: 100%;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-height: 2.625rem;
+  position: relative;
+  overflow: hidden;
+  --click-points-step-duration: 1ms;
+  --click-points-step-clicks: 1;
+  transition:
+    border-color 220ms ease,
+    box-shadow 280ms ease,
+    background-color 220ms ease;
+}
+
+.adv-click-points-item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: color-mix(in srgb, var(--border-subtle) 80%, transparent);
+  pointer-events: none;
+}
+
+.adv-click-points-leading {
+  width: 1.5rem;
+  height: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.adv-click-points-index {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 12px;
+  font-weight: var(--font-weight-hv);
+  color: var(--text-dim);
+  text-align: center;
+  transition: opacity 0.12s ease;
+}
+
+.adv-click-points-drag-handle {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 24px;
+  height: 24px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  pointer-events: none;
+  cursor: grab;
+  touch-action: none;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease,
+    opacity 0.12s ease;
+}
+
+.adv-click-points-drag-handle:active {
+  cursor: grabbing;
+}
+
+.adv-click-points-item:hover .adv-click-points-drag-handle,
+.adv-click-points-item:focus-within .adv-click-points-drag-handle,
+.adv-click-points-item.adv-click-points-item--dragging
+  .adv-click-points-drag-handle {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.adv-click-points-item:hover .adv-click-points-index,
+.adv-click-points-item:focus-within .adv-click-points-index,
+.adv-click-points-item.adv-click-points-item--dragging .adv-click-points-index {
+  opacity: 0;
+}
+
+.adv-click-points-drag-handle:hover {
+  color: var(--text-primary);
+  border-color: var(--border-subtle);
+}
+
+.adv-click-points-item--dragging,
+.adv-click-points-item--dragging .adv-click-points-drag-handle {
+  cursor: grabbing;
+}
+
+.adv-click-points-item--dragging {
+  opacity: 0.9;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
+}
+
+.adv-click-points-progress {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 2px;
+  transform: scaleX(0);
+  transform-origin: left center;
+  background: linear-gradient(
+    90deg,
+    rgba(58, 138, 92, 0.82) 0%,
+    rgba(86, 202, 124, 0.98) 100%
+  );
+  transition: opacity 40ms linear;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.adv-click-points-item--active .adv-click-points-progress {
+  opacity: 1;
+  animation: adv-click-points-step-progress var(--click-points-step-duration)
+    linear forwards;
+  animation-timing-function: steps(var(--click-points-step-clicks), end);
+}
+
+@keyframes adv-click-points-step-progress {
+  from {
+    transform: scaleX(0);
+  }
+
+  to {
+    transform: scaleX(1);
+  }
+}
+
+.adv-click-points-item > :not(.adv-click-points-progress) {
+  position: relative;
+  z-index: 1;
+}
+
+.adv-click-points-clicks {
+  width: min-content;
+}
+
+.adv-click-points-clicks .adv-number-sm {
+  width: 7ch;
+}
+
+.adv-click-points-radius {
+  width: min-content;
+}
+
+.adv-click-points-radius .adv-number-sm {
+  width: 5ch;
+}
+
+.adv-click-points-delete {
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.adv-click-points-delete:hover {
+  color: #e24d4d;
+  border-color: #e24d4d;
+}
+
+.adv-click-points-item .adv-numbox-sm {
+  height: 2rem;
+  min-height: 2rem;
+}
+
+.adv-click-points-item .adv-number-sm {
+  height: 2rem;
+  line-height: 2rem;
+  padding-right: 0.25rem;
+}
+
+.adv-click-points-position {
+  width: min-content;
+  justify-self: start;
+}
+
+.adv-click-points-position .adv-number-sm {
+  width: 8ch;
+}
+
+.adv-click-points-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.adv-click-points-list-fade {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1.75rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%);
+}
+
+.adv-click-points-footer {
+  flex-shrink: 0;
+  padding-top: 0.25rem;
+}
+
+.adv-click-points-option-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-height: 1.75rem;
+}
+
+.adv-click-points-option-row .adv-toggle-group {
+  margin-left: auto;
+}
+
+.adv-click-points-option-label {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-hv);
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.adv-click-points-pick-btn.adv-secondary-btn {
+  width: 100%;
+  align-self: center;
+  background: var(--accent-soft);
+  border-color: var(--accent-ring);
+  color: var(--text-primary);
+  transition:
+    background 0.25s ease,
+    border-color 0.25s ease,
+    color 0.25s ease,
+    width 0.25s ease;
+}
+
+.adv-click-points-pick-btn.adv-secondary-btn:hover {
+  border-color: var(--accent-strong);
+}
+
+.adv-click-points-pick-btn--filled.adv-secondary-btn {
+  width: 10rem;
+  align-self: center;
+  background: transparent;
+  border-color: var(--border-subtle);
+  color: var(--text-muted);
+}
+
+.adv-click-points-pick-btn--filled.adv-secondary-btn:hover {
+  border-color: var(--text-dim);
+  color: var(--text-primary);
+}
diff --git a/src/components/panels/click-points/ClickPointsPanel.tsx b/src/components/panels/click-points/ClickPointsPanel.tsx
new file mode 100644
index 00000000..5f9742c2
--- /dev/null
+++ b/src/components/panels/click-points/ClickPointsPanel.tsx
@@ -0,0 +1,39 @@
+import "../advanced/sections/shared.css";
+import "./ClickPointsPanel.css";
+import type { Settings } from "../../../store";
+import ClickPointsContent from "./ClickPointsContent";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+  showInfo: boolean;
+  running: boolean;
+  activeClickPointIndex: number | null;
+  activeClickPointTick: number;
+}
+
+function ClickPointsPanel({
+  settings,
+  update,
+  showInfo,
+  running,
+  activeClickPointIndex,
+  activeClickPointTick,
+}: Props) {
+  return (
+    <div className="adv-panel adv-panel-text">
+      <div className="adv-col">
+        <ClickPointsContent
+          settings={settings}
+          update={update}
+          showInfo={showInfo}
+          running={running}
+          activeClickPointIndex={activeClickPointIndex}
+          activeClickPointTick={activeClickPointTick}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default ClickPointsPanel;
diff --git a/src/components/panels/settings/SettingsPanel.css b/src/components/panels/settings/SettingsPanel.css
new file mode 100644
index 00000000..87cb47b1
--- /dev/null
+++ b/src/components/panels/settings/SettingsPanel.css
@@ -0,0 +1,1300 @@
+.settings-wrapper {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  margin: -1rem;
+}
+
+.settings-sidebar {
+  width: 10rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 1.5rem 0.5rem;
+  background: var(--bg-surface);
+  backdrop-filter: blur(var(--bg-panel-blur, 0px));
+  overflow-y: hidden;
+  scrollbar-gutter: stable;
+  animation: settings-sidebar-enable 0.01s 350ms forwards;
+}
+
+.settings-sidebar::-webkit-scrollbar {
+  width: 0.375rem;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+}
+
+.settings-sidebar::-webkit-scrollbar-thumb {
+  background: var(--text-dim);
+  border-radius: var(--radius-sm);
+}
+
+.settings-sidebar::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+@keyframes settings-sidebar-enable {
+  to {
+    overflow-y: auto;
+  }
+}
+
+.sidebar-kofi {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  text-decoration: none;
+  opacity: 0.6;
+  transition:
+    opacity 0.15s ease,
+    transform 0.2s ease;
+}
+
+.sidebar-kofi:hover {
+  opacity: 1;
+  transform: scale(1.05);
+}
+
+.sidebar-kofi img {
+  height: 4rem;
+  border: 0;
+}
+
+.sidebar-tab {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-family: var(--font-family-base);
+  font-size: 0.85rem;
+  font-weight: var(--font-weight-md);
+  color: var(--text-dim);
+  padding: 0.5rem 0.75rem;
+  border-left: 3px solid transparent;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease,
+    border-color 0.15s ease;
+  text-align: left;
+}
+
+.sidebar-tab svg {
+  flex-shrink: 0;
+}
+
+.sidebar-tab:hover {
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+}
+
+.sidebar-tab.active {
+  border-radius: var(--radius-sm);
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+}
+
+.tab-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* General - info "i" wiggles */
+.sidebar-tab:hover .tab-icon-general .gen-stem {
+  animation: gen-stem 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+.sidebar-tab:hover .tab-icon-general .gen-dot {
+  animation: gen-dot 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+@keyframes gen-stem {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  30% {
+    transform: translateY(-1px);
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes gen-dot {
+  0% {
+    transform: translateY(0);
+  }
+  30% {
+    transform: translateY(-2px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+/* Behavior - knob slides in track */
+.sidebar-tab:hover .tab-icon-behavior .beh-knob {
+  animation: beh-knob 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+@keyframes beh-knob {
+  0% {
+    transform: translateX(0);
+  }
+  40% {
+    transform: translateX(-8px);
+  }
+  70% {
+    transform: translateX(1px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+/* Appearance - rays rotate */
+.sidebar-tab:hover .tab-icon-appearance .app-rays {
+  animation: app-rays 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+  transform-origin: 12px 12px;
+}
+@keyframes app-rays {
+  0% {
+    transform: rotate(0deg);
+  }
+  40% {
+    transform: rotate(25deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+/* Keybinds - gentle bounce */
+.sidebar-tab:hover .tab-icon-keybinds svg {
+  animation: anim-keybinds 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+@keyframes anim-keybinds {
+  0% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(1.5px);
+  }
+  70% {
+    transform: translateY(-0.5px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+/* Process List - gentle squish */
+.sidebar-tab:hover .tab-icon-process-list svg {
+  animation: anim-process-list 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1
+    forwards;
+}
+@keyframes anim-process-list {
+  0% {
+    transform: scaleY(1);
+  }
+  40% {
+    transform: scaleY(0.88);
+  }
+  100% {
+    transform: scaleY(1);
+  }
+}
+
+/* Presets - fill wipes from top to bottom, then fades back in */
+.sidebar-tab:hover .tab-icon-presets .preset-fill {
+  animation: preset-fill-fade 0.7s ease 1 forwards;
+}
+@keyframes preset-fill-fade {
+  0% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+  45% {
+    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+  }
+  55% {
+    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
+  }
+  100% {
+    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
+  }
+}
+
+/* Maintenance - gentle wiggle */
+.sidebar-tab:hover .tab-icon-maintenance svg {
+  animation: anim-maintenance 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 1 forwards;
+}
+@keyframes anim-maintenance {
+  0% {
+    transform: rotate(0deg);
+  }
+  40% {
+    transform: rotate(15deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.settings-panel {
+  --adv-control-height: 32px;
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0.75rem 0.75rem 1rem;
+  border-top: 2px solid var(--accent);
+  border-left: 2px solid var(--accent);
+  border-top-left-radius: var(--radius-lg);
+  overflow-y: hidden;
+  scrollbar-gutter: stable;
+  min-width: 0;
+  animation: settings-panel-enable 0.01s 350ms forwards;
+}
+
+.settings-corner {
+  position: absolute;
+  top: 0;
+  left: 10rem;
+  width: var(--radius-lg);
+  height: var(--radius-lg);
+  background: var(--bg-surface);
+  pointer-events: none;
+  z-index: 1;
+  -webkit-mask-image: radial-gradient(
+    circle at var(--radius-lg) var(--radius-lg),
+    transparent var(--radius-lg),
+    black var(--radius-lg)
+  );
+  mask-image: radial-gradient(
+    circle at var(--radius-lg) var(--radius-lg),
+    transparent var(--radius-lg),
+    black var(--radius-lg)
+  );
+}
+
+.settings-panel::-webkit-scrollbar {
+  width: 0.375rem;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+}
+
+.settings-panel::-webkit-scrollbar-thumb {
+  background: var(--text-dim);
+  border-radius: var(--radius-sm);
+}
+
+.settings-panel::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+@keyframes settings-panel-enable {
+  to {
+    overflow-y: auto;
+  }
+}
+[data-theme="light"] .settings-panel {
+  border-top-color: rgb(166, 166, 166);
+  border-left-color: rgb(166, 166, 166);
+}
+
+.settings-section-heading {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: 0 0 0.25rem;
+}
+
+.settings-section-title {
+  font-family: var(--font-family-base);
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-li);
+  color: var(--text-muted);
+}
+
+.settings-section-description {
+  font-family: var(--font-family-base);
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-li);
+  color: var(--text-dim);
+}
+
+.settings-page-header {
+  font-family: var(--font-family-base);
+  font-size: 1.125rem;
+  font-weight: var(--font-weight-li);
+  letter-spacing: -0.01em;
+  color: var(--text-primary);
+  padding: 0.25rem 0 0.5rem;
+}
+
+.settings-label {
+  font-family: var(--font-family-base);
+  font-size: 1rem;
+  font-weight: var(--font-weight-md);
+  letter-spacing: -0.02em;
+  color: var(--text-primary);
+}
+
+.settings-label-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.settings-label-group--inline {
+  flex-direction: row;
+  align-items: baseline;
+  gap: 0.5rem;
+}
+
+.settings-sublabel {
+  font-family: var(--font-family-base);
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-li);
+  color: var(--text-muted);
+}
+
+.settings-value {
+  font-family: var(--font-family-base);
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-md);
+  color: var(--text-muted);
+}
+
+.settings-value--mono {
+  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+}
+
+.settings-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.625rem 0.75rem;
+  background: var(--bg-surface);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--container-shadow);
+}
+
+.settings-card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.settings-card .settings-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  padding: 0.75rem 0;
+}
+
+.settings-card .settings-row--stacked {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.settings-card .settings-row:first-child {
+  padding-top: 0.5rem;
+}
+
+.settings-card .settings-row:last-child {
+  padding-bottom: 0;
+}
+
+.settings-row-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.check-update-btn {
+  min-width: 9rem;
+  text-align: center;
+}
+
+.changelog-toggle-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+
+.changelog-arrow {
+  transition: transform 0.15s ease;
+}
+
+.changelog-arrow.open {
+  transform: rotate(90deg);
+}
+
+.settings-seg-group {
+  display: flex;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  flex-shrink: 0;
+  max-width: 100%;
+  min-height: 32px;
+}
+
+.settings-seg-btn {
+  font-family: var(--font-family-base);
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-md);
+  padding: 0.3125rem 0.75rem;
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  transition:
+    color 50ms ease,
+    background 50ms ease;
+  white-space: nowrap;
+}
+
+.settings-seg-btn:hover {
+  color: var(--text-muted);
+}
+
+.settings-seg-btn.active {
+  background: var(--bg-input);
+  color: var(--text-primary);
+}
+
+.settings-seg-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.settings-btn-primary,
+.settings-btn-secondary,
+.settings-btn-danger,
+.settings-btn-quiet {
+  font-family: var(--font-family-base);
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-md);
+  padding: 0.4375rem 0.75rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.settings-btn-primary {
+  background: transparent;
+  border: 1px solid var(--border-subtle);
+  color: var(--accent-strong);
+}
+
+.settings-btn-primary:hover {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+
+.settings-btn-secondary,
+.settings-btn-quiet,
+.settings-btn-danger {
+  background: transparent;
+  border: 1px solid var(--border-subtle);
+}
+
+.settings-btn-secondary {
+  color: var(--text-primary);
+}
+
+.settings-btn-secondary:hover,
+.settings-btn-quiet:hover {
+  background: var(--bg-elevated);
+  border-color: var(--border-focus);
+}
+
+.settings-btn-quiet {
+  color: var(--text-muted);
+}
+
+.settings-btn-danger {
+  color: var(--accent-red);
+}
+
+.settings-btn-danger:hover {
+  background: rgba(255, 115, 106, 0.1);
+  border-color: var(--accent-red);
+}
+
+.settings-btn-danger--compact {
+  padding-inline: 0.625rem;
+}
+
+.settings-btn-primary:disabled,
+.settings-btn-secondary:disabled,
+.settings-btn-danger:disabled,
+.settings-btn-quiet:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.settings-fade {
+  position: absolute;
+  bottom: 0;
+  left: 10rem;
+  right: 0;
+  height: 6rem;
+  background: linear-gradient(to bottom, transparent, var(--bg-base));
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.settings-fade--hidden {
+  opacity: 0;
+}
+
+.settings-note {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+}
+
+.settings-color-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  flex-wrap: wrap;
+}
+
+.settings-color-picker {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0.25rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-elevated);
+  cursor: pointer;
+}
+
+.settings-color-picker input {
+  width: 100%;
+  height: 100%;
+  border: none;
+  padding: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.preset-compose {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.preset-name-input,
+.preset-rename-input {
+  min-width: 0;
+  flex: 1;
+  padding: 0.5625rem 0.75rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  outline: none;
+}
+
+.preset-name-input::placeholder,
+.preset-rename-input::placeholder {
+  color: var(--text-dim);
+}
+
+.preset-name-input:focus,
+.preset-rename-input:focus {
+  border-color: var(--accent-ring);
+}
+
+.preset-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  max-height: clamp(20rem, 42vh, 26rem);
+  overflow-y: hidden;
+  padding-right: 0.25rem;
+  scrollbar-gutter: stable;
+  overscroll-behavior: contain;
+  animation: preset-list-enable 0.01s 350ms forwards;
+}
+
+.preset-list::-webkit-scrollbar {
+  width: 0.375rem;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+}
+
+.preset-list::-webkit-scrollbar-thumb {
+  background: var(--text-dim);
+  border-radius: var(--radius-sm);
+}
+
+.preset-list::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+@keyframes preset-list-enable {
+  to {
+    overflow-y: auto;
+  }
+}
+
+.preset-list-shell {
+  position: relative;
+}
+
+.preset-list-fade {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 6rem;
+  background: linear-gradient(to bottom, transparent, var(--bg-base));
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.preset-list-fade--hidden {
+  opacity: 0;
+}
+
+.preset-card {
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-lg);
+  background: var(--bg-elevated);
+  padding: 0.75rem;
+}
+
+.preset-card--active {
+  border-color: var(--accent-ring);
+  box-shadow: inset 0 0 0 1px var(--accent-soft);
+}
+
+.preset-card-head {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.preset-card-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.preset-name {
+  font-size: 0.9375rem;
+  font-weight: var(--font-weight-md);
+  color: var(--text-primary);
+}
+
+.preset-badges {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.preset-badge {
+  padding: 0.1875rem 0.5rem;
+  border-radius: var(--radius-md);
+  background: var(--bg-input);
+  color: var(--text-muted);
+  font-size: 0.6875rem;
+  font-weight: var(--font-weight-md);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.preset-badge--active {
+  background: transparent;
+  border: 1px solid var(--accent-ring);
+  color: var(--accent-strong);
+}
+
+.preset-actions {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.preset-summary {
+  font-size: 0.6875rem;
+  color: var(--text-dim);
+  line-height: 1.4;
+  margin-top: 0.125rem;
+}
+
+.preset-badge--modified {
+  background: transparent;
+  border: 1px solid var(--accent-yellow, #febc2e);
+  color: var(--accent-yellow, #febc2e);
+}
+
+.preset-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.preset-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.3125rem 0.625rem;
+  font-size: 0.8125rem;
+}
+
+.preset-count {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+}
+
+.preset-rename-error {
+  font-size: 0.6875rem;
+  color: var(--accent-red);
+  margin-top: 0.375rem;
+}
+
+/* -- Social Links -- */
+
+.social-links {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0;
+}
+
+.social-icons {
+  display: flex;
+  gap: 0.375rem;
+}
+
+.social-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: var(--radius-sm);
+  color: var(--text-dim);
+  background: transparent;
+  border: 1px solid var(--border-subtle);
+  transition:
+    color 0.15s ease,
+    background 0.15s ease,
+    border-color 0.15s ease;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.social-icon:hover {
+  color: var(--text-primary);
+  background: var(--bg-elevated);
+  border-color: var(--border-focus);
+}
+
+.social-icon--youtube:hover {
+  color: #ff0033;
+  border-color: rgba(255, 0, 51, 0.45);
+  background: rgba(255, 0, 51, 0.08);
+}
+
+.social-icon--twitch:hover {
+  color: #9146ff;
+  border-color: rgba(145, 70, 255, 0.45);
+  background: rgba(145, 70, 255, 0.08);
+}
+
+.social-icon--github:hover {
+  color: var(--text-primary);
+  border-color: var(--border-focus);
+  background: var(--bg-elevated);
+}
+
+.social-icon--kofi {
+  width: 7.125rem;
+  height: 1.875rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+}
+
+.social-icon--kofi:hover {
+  color: #72a5f2;
+  border-color: #72a5f2;
+  background: #202020;
+}
+
+.social-icon--patreon:hover {
+  color: #ff424d;
+  border-color: rgba(255, 66, 77, 0.4);
+  background: rgba(255, 66, 77, 0.08);
+}
+
+/* -- Usage Stats -- */
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem 1rem;
+  padding: 0.5rem 0;
+}
+
+.stats-grid--compact {
+  gap: 0.25rem 1rem;
+  padding: 0.25rem 0 0.5rem;
+}
+
+.stats-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.stats-cell-label {
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-md);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+}
+
+.stats-cell-value {
+  font-size: 1rem;
+  font-weight: var(--font-weight-md);
+  color: var(--text-primary);
+}
+
+.stats-section-label {
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-dim);
+  padding: 0.5rem 0 0.25rem;
+  border-top: 1px solid var(--border-subtle);
+  margin-top: 0.25rem;
+}
+
+.stats-empty {
+  font-size: 0.75rem;
+  color: var(--text-dim);
+  padding: 0.75rem 0;
+  text-align: center;
+}
+
+.settings-row .adv-dropdown-trigger {
+  box-sizing: border-box;
+  height: 1.875rem;
+  padding: 0 0.5rem 0 0.5rem;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  color: var(--text-primary);
+  font-family: var(--font-family-base);
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-md);
+  transition: border-color 0.15s ease;
+}
+
+.settings-row .adv-dropdown-trigger:hover {
+  border-color: var(--border-focus);
+}
+
+.settings-row .adv-dropdown-menu {
+  border-radius: var(--radius-md);
+  min-width: max-content;
+}
+
+/* Background image controls */
+.settings-bg-image-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-basis: 100%;
+  min-width: 0;
+}
+
+.settings-bg-input {
+  width: 100%;
+  padding: 0.4375rem 0.625rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-family: var(--font-family-base);
+  font-size: 0.8125rem;
+  outline: none;
+}
+
+.settings-bg-input::placeholder {
+  color: var(--text-dim);
+}
+
+.settings-bg-input:focus {
+  border-color: var(--accent-ring);
+}
+
+.settings-bg-buttons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.settings-keybind-capture {
+  display: inline-flex;
+  align-items: center;
+  min-width: 6rem;
+  padding: 0.4375rem 0.625rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-subtle);
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-family: var(--font-family-base);
+  font-size: 0.8125rem;
+  cursor: pointer;
+}
+
+/* Opacity controls */
+.settings-opacity-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+.settings-opacity-slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 8rem;
+  height: 0.375rem;
+  border-radius: var(--radius-sm);
+  background: var(--bg-input);
+  outline: none;
+  cursor: pointer;
+}
+
+.settings-opacity-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  background: var(--accent-strong);
+  border: 2px solid var(--bg-elevated);
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.settings-opacity-slider::-webkit-slider-thumb:hover {
+  background: var(--accent);
+}
+
+.settings-opacity-slider:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.settings-slider-value {
+  font-family: var(--font-family-base);
+  font-size: 0.875rem;
+  font-weight: var(--font-weight-md);
+  color: var(--text-primary);
+  min-width: 3rem;
+  text-align: right;
+}
+
+/* Process List */
+.settings-proc-list-wrapper {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-proc-list-wrapper .settings-card {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.settings-proc-list-wrapper .settings-card-content {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.settings-proc-list-wrapper .adv-disabled-container,
+.settings-proc-list-wrapper .adv-disabled-container > :first-child {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.settings-proc-list-wrapper .unavailable-reason--block {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.settings-proc-search-row {
+  display: flex;
+  margin-bottom: 0.5rem;
+}
+
+.settings-proc-search {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.75rem;
+  height: 32px;
+  width: 100%;
+  padding: 0 1.5rem 0 0.5rem;
+  background-color: var(--bg-tertiary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='5' cy='5' r='3.5' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3Cline x1='7.75' y1='7.75' x2='10.5' y2='10.5' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.375rem center;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-main);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.settings-proc-search::placeholder {
+  color: var(--text-dim);
+  opacity: 0.7;
+}
+
+.settings-proc-search:focus {
+  border-color: var(--accent);
+}
+
+.settings-whitelist-warning {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.75rem;
+  color: var(--text-warning, #b8860b);
+  background: color-mix(in srgb, var(--text-warning, #b8860b) 10%, transparent);
+  border: 1px solid
+    color-mix(in srgb, var(--text-warning, #b8860b) 30%, transparent);
+  border-radius: var(--radius-sm);
+  padding: 0.5rem 0.625rem;
+  margin-bottom: 0.5rem;
+}
+
+.settings-proc-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  padding-right: 0.25rem;
+}
+
+.settings-proc-list::-webkit-scrollbar {
+  width: 0.375rem;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+}
+
+.settings-proc-list::-webkit-scrollbar-thumb {
+  background: var(--text-dim);
+  border-radius: var(--radius-sm);
+}
+
+.settings-proc-list::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+.settings-proc-list .adv-click-points-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  cursor: pointer;
+  grid-template-columns: none;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.settings-proc-list .adv-click-points-item:hover {
+  border-color: var(--text-dim);
+  background: var(--bg-input);
+}
+
+.settings-proc-list .adv-click-points-item + .adv-click-points-item {
+  margin-top: 6px;
+}
+
+.settings-proc-list .adv-click-points-item::before {
+  display: none;
+}
+
+.settings-proc-checkbox {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+  position: relative;
+}
+
+.settings-proc-checkbox:hover {
+  border-color: var(--text-dim);
+}
+
+.settings-proc-checkbox:checked {
+  background: #3a8a5c;
+  border-color: #3a8a5c;
+}
+
+.settings-proc-checkbox:checked::after {
+  content: "✓";
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.settings-proc-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.settings-proc-exe {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.6875rem;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.settings-proc-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.settings-proc-fade {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4rem;
+  background: linear-gradient(to bottom, transparent, var(--bg-surface));
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.settings-proc-fade--hidden {
+  opacity: 0;
+}
+
+.settings-toggle-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.settings-toggle {
+  position: relative;
+  width: 2.5rem;
+  height: 1.375rem;
+  border: none;
+  border-radius: 0.6875rem;
+  cursor: pointer;
+  padding: 0;
+  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.settings-toggle.on {
+  background: var(--accent-strong);
+}
+
+.settings-toggle.off {
+  background: var(--text-dim);
+}
+
+.settings-toggle:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.settings-toggle-knob {
+  position: absolute;
+  top: 0.1875rem;
+  left: 0.1875rem;
+  width: 1rem;
+  height: 1rem;
+  background: #fff;
+  border-radius: 50%;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.35),
+    0 0 0 0.5px rgba(0, 0, 0, 0.08);
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.settings-toggle.on .settings-toggle-knob {
+  transform: translateX(1.125rem);
+}
+
+.settings-toggle.on:active .settings-toggle-knob {
+  transform: translateX(1.125rem) scaleX(1.2);
+}
+
+.settings-toggle.off:active .settings-toggle-knob {
+  transform: scaleX(1.2);
+}
+
+.settings-row--disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
diff --git a/src/components/panels/settings/SettingsPanel.tsx b/src/components/panels/settings/SettingsPanel.tsx
new file mode 100644
index 00000000..b29dfde2
--- /dev/null
+++ b/src/components/panels/settings/SettingsPanel.tsx
@@ -0,0 +1,346 @@
+import "./SettingsPanel.css";
+import { useEffect, useRef, useState } from "react";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import type { AppInfo, PresetId, Settings } from "../../../store";
+
+import GeneralSection from "./sections/GeneralSection";
+import BehaviorSection from "./sections/BehaviorSection";
+import AppearanceSection from "./sections/AppearanceSection";
+import PresetsSection from "./sections/PresetsSection";
+import MaintenanceSection from "./sections/MaintenanceSection";
+import KeybindsSection from "./sections/KeybindsSection";
+import ProcessListSection from "./sections/ProcessListSection";
+
+type SettingsTab =
+  | "general"
+  | "behavior"
+  | "appearance"
+  | "keybinds"
+  | "process-list"
+  | "presets"
+  | "maintenance";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+  running: boolean;
+  appInfo: AppInfo;
+  onSavePreset: (name: string) => boolean;
+  onApplyPreset: (presetId: PresetId) => boolean;
+  onUpdatePreset: (presetId: PresetId) => boolean;
+  onRenamePreset: (presetId: PresetId, name: string) => boolean;
+  onDeletePreset: (presetId: PresetId) => boolean;
+  onDuplicatePreset: (presetId: PresetId) => boolean;
+  onExportPreset: (presetId: PresetId) => Promise<boolean>;
+  onImportPreset: () => Promise<boolean | null>;
+  onToggleAlwaysOnTop: () => Promise<void>;
+  onReset: () => Promise<void>;
+  updateCheckStatus:
+    | "idle"
+    | "checking"
+    | "available"
+    | "unavailable"
+    | "error";
+  onCheckForUpdate: () => void;
+  initialSettingsTab?: string;
+  onInitialTabConsumed?: () => void;
+}
+
+export default function SettingsPanel({
+  settings,
+  update,
+  running,
+  appInfo,
+  onSavePreset,
+  onApplyPreset,
+  onUpdatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset,
+  onExportPreset,
+  onImportPreset,
+  onToggleAlwaysOnTop,
+  onReset,
+  updateCheckStatus,
+  onCheckForUpdate,
+  initialSettingsTab,
+  onInitialTabConsumed,
+}: Props) {
+  const [activeTab, setActiveTab] = useState<SettingsTab>("general");
+  const [atBottom, setAtBottom] = useState(true);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const prevInitialTabRef = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (
+      initialSettingsTab &&
+      initialSettingsTab !== prevInitialTabRef.current
+    ) {
+      prevInitialTabRef.current = initialSettingsTab;
+      onInitialTabConsumed?.();
+      const tab = initialSettingsTab as SettingsTab;
+      requestAnimationFrame(() => {
+        setActiveTab(tab);
+      });
+    }
+  }, [initialSettingsTab, onInitialTabConsumed]);
+
+  const handleScroll = () => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    setAtBottom(panel.scrollTop + panel.clientHeight >= panel.scrollHeight - 2);
+  };
+
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) return;
+    const observer = new ResizeObserver(handleScroll);
+    observer.observe(panel);
+    return () => observer.disconnect();
+  }, [activeTab]);
+
+  return (
+    <div className="settings-wrapper">
+      <nav className="settings-sidebar">
+        <button
+          className={`sidebar-tab ${activeTab === "general" ? "active" : ""}`}
+          onClick={() => setActiveTab("general")}
+        >
+          {/* TODO: replace all settings page icons with better icons that fit the theme more. current icons are temporary stand-ins. */}
+          <span className="tab-icon tab-icon-general">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="9" />
+              <path className="gen-stem" d="M12 16v-5" />
+              <circle
+                className="gen-dot"
+                cx="12"
+                cy="7"
+                r="1.5"
+                fill="currentColor"
+                stroke="none"
+              />
+            </svg>
+          </span>
+          General
+        </button>
+        <button
+          className={`sidebar-tab ${activeTab === "behavior" ? "active" : ""}`}
+          onClick={() => setActiveTab("behavior")}
+        >
+          <span className="tab-icon tab-icon-behavior">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <rect
+                className="beh-track"
+                x="2"
+                y="6"
+                width="20"
+                height="12"
+                rx="6"
+              />
+              <circle
+                className="beh-knob"
+                cx="16"
+                cy="12"
+                r="3.5"
+                fill="currentColor"
+                stroke="none"
+              />
+            </svg>
+          </span>
+          Behavior
+        </button>
+        <button
+          className={`sidebar-tab ${activeTab === "appearance" ? "active" : ""}`}
+          onClick={() => setActiveTab("appearance")}
+        >
+          <span className="tab-icon tab-icon-appearance">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <circle cx="12" cy="12" r="4.5" />
+              <g className="app-rays">
+                <line x1="12" y1="3" x2="12" y2="1" />
+                <line x1="12" y1="21" x2="12" y2="23" />
+                <line x1="3" y1="12" x2="1" y2="12" />
+                <line x1="21" y1="12" x2="23" y2="12" />
+                <line x1="17.66" y1="6.34" x2="19.07" y2="4.93" />
+                <line x1="6.34" y1="6.34" x2="4.93" y2="4.93" />
+                <line x1="17.66" y1="17.66" x2="19.07" y2="19.07" />
+                <line x1="6.34" y1="17.66" x2="4.93" y2="19.07" />
+              </g>
+            </svg>
+          </span>
+          Appearance
+        </button>
+        <button
+          className={`sidebar-tab ${activeTab === "keybinds" ? "active" : ""}`}
+          onClick={() => setActiveTab("keybinds")}
+        >
+          <span className="tab-icon tab-icon-keybinds">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M20 5H4c-1.1 0-1.99.9-1.99 2L2 17c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-9 3h2v2h-2V8zm0 3h2v2h-2v-2zM8 8h2v2H8V8zm0 3h2v2H8v-2zm-1 2H5v-2h2v2zm0-3H5V8h2v2zm9 7H8v-2h8v2zm0-4h-2v-2h2v2zm0-3h-2V8h2v2zm3 3h-2v-2h2v2zm0-3h-2V8h2v2z" />
+            </svg>
+          </span>
+          Keybinds
+        </button>
+        <button
+          className={`sidebar-tab ${activeTab === "process-list" ? "active" : ""}`}
+          onClick={() => setActiveTab("process-list")}
+        >
+          <span className="tab-icon tab-icon-process-list">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              aria-hidden="true"
+            >
+              <rect width="20" height="16" x="2" y="4" rx="2" />
+              <path d="M6 8h.01" />
+              <path d="M10 8h.01" />
+              <path d="M14 8h.01" />
+            </svg>
+          </span>
+          Process List
+        </button>
+        <button
+          className={`sidebar-tab ${activeTab === "presets" ? "active" : ""}`}
+          onClick={() => setActiveTab("presets")}
+        >
+          <span className="tab-icon tab-icon-presets">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path
+                className="preset-fill"
+                d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"
+              />
+            </svg>
+          </span>
+          Presets
+        </button>
+        <button
+          className={`sidebar-tab ${activeTab === "maintenance" ? "active" : ""}`}
+          onClick={() => setActiveTab("maintenance")}
+        >
+          <span className="tab-icon tab-icon-maintenance">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z" />
+            </svg>
+          </span>
+          Maintenance
+        </button>
+        <a
+          className="sidebar-kofi"
+          href="#"
+          title="Support me on Ko-fi"
+          onClick={(e) => {
+            e.preventDefault();
+            void openUrl("https://ko-fi.com/Z8Z71T8QD4");
+          }}
+        >
+          <img
+            src="https://storage.ko-fi.com/cdn/brandasset/v2/support_me_on_kofi_badge_blue.png"
+            alt="Buy Me a Coffee at ko-fi.com"
+          />
+        </a>
+      </nav>
+      <div className="settings-corner" />
+      <div className="settings-panel" ref={panelRef} onScroll={handleScroll}>
+        {activeTab === "general" && (
+          <GeneralSection
+            appInfo={appInfo}
+            updateCheckStatus={updateCheckStatus}
+            onCheckForUpdate={onCheckForUpdate}
+          />
+        )}
+        {activeTab === "behavior" && (
+          <BehaviorSection
+            settings={settings}
+            update={update}
+            onToggleAlwaysOnTop={onToggleAlwaysOnTop}
+          />
+        )}
+        {activeTab === "appearance" && (
+          <AppearanceSection settings={settings} update={update} />
+        )}
+        {activeTab === "keybinds" && (
+          <KeybindsSection settings={settings} update={update} />
+        )}
+        {activeTab === "process-list" && (
+          <div className="settings-proc-list-wrapper">
+            <ProcessListSection settings={settings} update={update} />
+          </div>
+        )}
+        {activeTab === "presets" && (
+          <PresetsSection
+            settings={settings}
+            running={running}
+            onSavePreset={onSavePreset}
+            onApplyPreset={onApplyPreset}
+            onUpdatePreset={onUpdatePreset}
+            onRenamePreset={onRenamePreset}
+            onDeletePreset={onDeletePreset}
+            onDuplicatePreset={onDuplicatePreset}
+            onExportPreset={onExportPreset}
+            onImportPreset={onImportPreset}
+          />
+        )}
+        {activeTab === "maintenance" && (
+          <MaintenanceSection onReset={onReset} />
+        )}
+      </div>
+      <div
+        className={`settings-fade ${atBottom ? "settings-fade--hidden" : ""}`}
+      ></div>
+    </div>
+  );
+}
diff --git a/src/components/panels/settings/sections/AppearanceSection.tsx b/src/components/panels/settings/sections/AppearanceSection.tsx
new file mode 100644
index 00000000..5d55a66a
--- /dev/null
+++ b/src/components/panels/settings/sections/AppearanceSection.tsx
@@ -0,0 +1,385 @@
+import { error } from "@tauri-apps/plugin-log";
+import { open } from "@tauri-apps/plugin-dialog";
+import { DEFAULT_ACCENT_COLOR } from "../../../../settingsSchema";
+import type { IconColor, IconTheme } from "../../../../settingsSchema";
+import type { Settings } from "../../../../store";
+import { SettingsCard } from "./shared";
+
+const IMAGE_FILTERS = [
+  {
+    name: "Images",
+    extensions: ["png", "jpg", "jpeg", "gif", "bmp", "webp"],
+  },
+];
+
+const PAGES = [
+  { suffix: "Simple", label: "Simple Page" },
+  { suffix: "Advanced", label: "Advanced Page" },
+  { suffix: "Zones", label: "Zones Page" },
+  { suffix: "ClickPoints", label: "Click Points Page" },
+  { suffix: "Settings", label: "Settings Page" },
+] as const;
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+function PageAppearanceControls({
+  settings,
+  update,
+  suffix,
+}: {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+  suffix: string;
+}) {
+  const bgImageKey = `backgroundImage${suffix}` as keyof Settings;
+  const bgOpacityKey = `backgroundOpacity${suffix}` as keyof Settings;
+  const winOpacityKey = `windowOpacity${suffix}` as keyof Settings;
+  const panelOpacityKey = `panelOpacity${suffix}` as keyof Settings;
+  const panelBlurKey = `panelBlur${suffix}` as keyof Settings;
+
+  const bgImage = settings[bgImageKey] as string;
+  const bgOpacity = settings[bgOpacityKey] as number;
+  const winOpacity = settings[winOpacityKey] as number;
+  const panelOpacity = settings[panelOpacityKey] as number;
+  const panelBlur = settings[panelBlurKey] as number;
+
+  const handleBrowse = async () => {
+    try {
+      const selected = await open({ multiple: false, filters: IMAGE_FILTERS });
+      if (selected) {
+        update({ [bgImageKey]: selected });
+      }
+    } catch (err) {
+      error(
+        JSON.stringify({
+          source: "SettingsPanel.pickImage",
+          error: String(err),
+        }),
+      );
+    }
+  };
+
+  return (
+    <>
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Background Image</span>
+          <span className="settings-sublabel">
+            Path or URL to a background image.
+          </span>
+        </div>
+        <div className="settings-bg-image-row">
+          <input
+            className="settings-bg-input"
+            type="text"
+            value={bgImage}
+            onChange={(e) => update({ [bgImageKey]: e.target.value })}
+            placeholder="https://example.com/image.png"
+          />
+          <div className="settings-bg-buttons">
+            <button className="settings-btn-secondary" onClick={handleBrowse}>
+              Browse
+            </button>
+            <button
+              className="settings-btn-danger settings-btn-danger--compact"
+              onClick={() => update({ [bgImageKey]: "" })}
+              disabled={!bgImage}
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Background Opacity</span>
+          <span className="settings-sublabel">
+            Transparency of the app window background.
+          </span>
+        </div>
+        <div className="settings-opacity-controls">
+          <input
+            type="range"
+            className="settings-opacity-slider"
+            min="0"
+            max="100"
+            value={winOpacity}
+            onChange={(e) =>
+              update({ [winOpacityKey]: Number(e.target.value) })
+            }
+          />
+          <span className="settings-slider-value">{winOpacity}%</span>
+        </div>
+      </div>
+
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Background Image Opacity</span>
+          <span className="settings-sublabel">
+            Transparency of the background image.
+          </span>
+        </div>
+        <div className="settings-opacity-controls">
+          <input
+            type="range"
+            className="settings-opacity-slider"
+            min="0"
+            max="100"
+            value={bgOpacity}
+            disabled={!bgImage}
+            onChange={(e) => update({ [bgOpacityKey]: Number(e.target.value) })}
+          />
+          <span className="settings-slider-value">{bgOpacity}%</span>
+        </div>
+      </div>
+
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Panel Opacity</span>
+          <span className="settings-sublabel">Transparency of the panel.</span>
+        </div>
+        <div className="settings-opacity-controls">
+          <input
+            type="range"
+            className="settings-opacity-slider"
+            min="0"
+            max="100"
+            value={panelOpacity}
+            onChange={(e) =>
+              update({ [panelOpacityKey]: Number(e.target.value) })
+            }
+          />
+          <span className="settings-slider-value">{panelOpacity}%</span>
+        </div>
+      </div>
+
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Panel Blur</span>
+          <span className="settings-sublabel">
+            Blur effect behind the panel.
+          </span>
+        </div>
+        <div className="settings-opacity-controls">
+          <input
+            type="range"
+            className="settings-opacity-slider"
+            min="0"
+            max="20"
+            value={panelBlur}
+            onChange={(e) => update({ [panelBlurKey]: Number(e.target.value) })}
+          />
+          <span className="settings-slider-value">{panelBlur}px</span>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default function AppearanceSection({ settings, update }: Props) {
+  const isPerPage = settings.perPageAppearance;
+
+  const handleModeChange = (individual: boolean) => {
+    update({ perPageAppearance: individual });
+  };
+
+  const themeAccent = (
+    <SettingsCard title="Theme & Accent" description="Applied to all pages.">
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Theme</span>
+          <span className="settings-sublabel">
+            Choose between dark and light mode.
+          </span>
+        </div>
+        <div className="settings-seg-group">
+          {(["dark", "light"] as const).map((theme) => (
+            <button
+              key={theme}
+              className={`settings-seg-btn ${settings.theme === theme ? "active" : ""}`}
+              onClick={() => update({ theme })}
+            >
+              {theme === "dark" ? "Dark" : "Light"}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Accent Color</span>
+          <span className="settings-sublabel">The primary accent color.</span>
+        </div>
+        <div className="settings-color-controls">
+          <label className="settings-color-picker">
+            <input
+              type="color"
+              value={settings.accentColor}
+              onChange={(event) => update({ accentColor: event.target.value })}
+            />
+          </label>
+          <span className="settings-value settings-value--mono">
+            {settings.accentColor.toUpperCase()}
+          </span>
+          <button
+            className="settings-btn-secondary"
+            onClick={() => update({ accentColor: DEFAULT_ACCENT_COLOR })}
+            disabled={settings.accentColor === DEFAULT_ACCENT_COLOR}
+          >
+            Reset
+          </button>
+        </div>
+      </div>
+    </SettingsCard>
+  );
+
+  return (
+    <>
+      {themeAccent}
+
+      <SettingsCard
+        title="Appearance Mode"
+        description="Use one style for all pages, or customize each page individually."
+      >
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Mode</span>
+          </div>
+          <div className="settings-seg-group">
+            <button
+              className={`settings-seg-btn ${!isPerPage ? "active" : ""}`}
+              onClick={() => handleModeChange(false)}
+            >
+              Global
+            </button>
+            <button
+              className={`settings-seg-btn ${isPerPage ? "active" : ""}`}
+              onClick={() => handleModeChange(true)}
+            >
+              Individual
+            </button>
+          </div>
+        </div>
+      </SettingsCard>
+
+      {!isPerPage ? (
+        <SettingsCard title="Page Style">
+          <PageAppearanceControls
+            settings={settings}
+            update={update}
+            suffix=""
+          />
+        </SettingsCard>
+      ) : (
+        PAGES.map((page) => (
+          <section className="settings-card" key={page.suffix}>
+            <span className="settings-page-header">{page.label}</span>
+            <div className="settings-card-content">
+              <PageAppearanceControls
+                settings={settings}
+                update={update}
+                suffix={page.suffix}
+              />
+            </div>
+          </section>
+        ))
+      )}
+
+      <SettingsCard
+        title="Taskbar Icon"
+        description="Control how the taskbar and tray icon looks."
+      >
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Active Icon</span>
+            <span className="settings-sublabel">
+              Show different icon when clicker is active.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.taskbarIconEnabled ? "on" : "off"}`}
+              onClick={() =>
+                update({ taskbarIconEnabled: !settings.taskbarIconEnabled })
+              }
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Icon Theme</span>
+            <span className="settings-sublabel">
+              Which themed icons to use. Auto follows app theme.
+            </span>
+          </div>
+          <div className="settings-seg-group">
+            {(["auto", "dark", "light"] as IconTheme[]).map((opt) => (
+              <button
+                key={opt}
+                className={`settings-seg-btn ${settings.taskbarIconTheme === opt ? "active" : ""}`}
+                onClick={() => update({ taskbarIconTheme: opt })}
+              >
+                {opt === "auto" ? "Auto" : opt === "dark" ? "Dark" : "Light"}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <div
+          className={`settings-row ${!settings.taskbarIconEnabled ? "settings-row--disabled" : ""}`}
+        >
+          <div className="settings-label-group">
+            <span className="settings-label">Icon Color</span>
+            <span className="settings-sublabel">
+              Use accent color or default icon colors.
+            </span>
+          </div>
+          <div className="settings-seg-group">
+            {(["theme", "default"] as IconColor[]).map((opt) => (
+              <button
+                key={opt}
+                className={`settings-seg-btn ${settings.taskbarIconColor === opt ? "active" : ""}`}
+                onClick={() =>
+                  settings.taskbarIconEnabled &&
+                  update({ taskbarIconColor: opt })
+                }
+              >
+                {opt === "theme" ? "Theme" : "Default"}
+              </button>
+            ))}
+          </div>
+        </div>
+      </SettingsCard>
+
+      <SettingsCard
+        title="Status Bar"
+        description="Show the status bar at the bottom of the window."
+      >
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Footer</span>
+            <span className="settings-sublabel">
+              Shows active preset, version, and stop reasons.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.statusBarEnabled ? "on" : "off"}`}
+              onClick={() =>
+                update({ statusBarEnabled: !settings.statusBarEnabled })
+              }
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+      </SettingsCard>
+    </>
+  );
+}
diff --git a/src/components/panels/settings/sections/BehaviorSection.tsx b/src/components/panels/settings/sections/BehaviorSection.tsx
new file mode 100644
index 00000000..1bb0b92b
--- /dev/null
+++ b/src/components/panels/settings/sections/BehaviorSection.tsx
@@ -0,0 +1,317 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { error } from "@tauri-apps/plugin-log";
+import { DEFAULT_MAX_CLICK_SPEED } from "../../../../settingsSchema";
+import type { Settings } from "../../../../store";
+import { NumInput } from "../../advanced/sections/shared";
+import ConfirmDialog from "../../../ConfirmDialog";
+import { SettingsCard } from "./shared";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+  onToggleAlwaysOnTop: () => Promise<void>;
+}
+
+export default function BehaviorSection({
+  settings,
+  update,
+  onToggleAlwaysOnTop,
+}: Props) {
+  const [pendingAction, setPendingAction] = useState<
+    "extended-click-speed-limit" | null
+  >(null);
+  const [autostartEnabled, setAutostartEnabled] = useState<boolean | null>(
+    null,
+  );
+
+  useEffect(() => {
+    invoke<boolean>("get_autostart_enabled")
+      .then(setAutostartEnabled)
+      .catch(() => setAutostartEnabled(false));
+  }, []);
+
+  const handleAlwaysOnTopChange = (nextValue: boolean) => {
+    if (settings.alwaysOnTop === nextValue) return;
+    void onToggleAlwaysOnTop();
+  };
+
+  const handleExtendedClickSpeedLimitChange = (nextValue: boolean) => {
+    if (settings.extendedClickSpeedLimit === nextValue) return;
+    if (nextValue) {
+      setPendingAction("extended-click-speed-limit");
+      return;
+    }
+    update({
+      extendedClickSpeedLimit: false,
+      clickSpeed: Math.min(settings.clickSpeed, DEFAULT_MAX_CLICK_SPEED),
+    });
+  };
+
+  const handleConfirmExtendedClickSpeedLimit = () => {
+    update({ extendedClickSpeedLimit: true });
+    setPendingAction(null);
+  };
+
+  return (
+    <>
+      <SettingsCard
+        title="Behavior"
+        description="Change how the auto clicker runs."
+      >
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Always on Top</span>
+            <span className="settings-sublabel">
+              Keep the window above others.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.alwaysOnTop ? "on" : "off"}`}
+              onClick={() => handleAlwaysOnTopChange(!settings.alwaysOnTop)}
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Stop Hitbox Overlay</span>
+            <span className="settings-sublabel">
+              Show the stop zone boundaries.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.showStopOverlay ? "on" : "off"}`}
+              onClick={() =>
+                update({ showStopOverlay: !settings.showStopOverlay })
+              }
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Stop Reason Alert</span>
+            <span className="settings-sublabel">
+              Show a notification when the auto clicker stops.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.showStopReason ? "on" : "off"}`}
+              onClick={() =>
+                update({ showStopReason: !settings.showStopReason })
+              }
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Strict Hotkey Modifiers</span>
+            <span className="settings-sublabel">
+              Require exact modifier keys for hotkeys.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.strictHotkeyModifiers ? "on" : "off"}`}
+              onClick={() =>
+                update({
+                  strictHotkeyModifiers: !settings.strictHotkeyModifiers,
+                })
+              }
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Stop on Alt+Tab</span>
+            <span className="settings-sublabel">
+              Stop clicking when switching to another window.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.taskSwitcherStopEnabled ? "on" : "off"}`}
+              onClick={() =>
+                update({
+                  taskSwitcherStopEnabled: !settings.taskSwitcherStopEnabled,
+                })
+              }
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Extended Click Speed Limit</span>
+            <span className="settings-sublabel">
+              Allow click speeds up to 1000 CPS (may affect performance).
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.extendedClickSpeedLimit ? "on" : "off"}`}
+              onClick={() =>
+                handleExtendedClickSpeedLimitChange(
+                  !settings.extendedClickSpeedLimit,
+                )
+              }
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+      </SettingsCard>
+
+      <SettingsCard
+        title="Click Points Defaults"
+        description="Default values for newly picked click points."
+      >
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Default Clicks</span>
+            <span className="settings-sublabel">
+              Clicks per point for new entries.
+            </span>
+          </div>
+          <div className="adv-numbox-sm" style={{ gap: "0.25rem" }}>
+            <span
+              className="adv-unit"
+              style={{ minWidth: "0.75rem", textAlign: "left" }}
+            >
+              clicks
+            </span>
+            <NumInput
+              hoverWheel={false}
+              value={settings.newClickPointClicks}
+              min={1}
+              max={999999}
+              onChange={(value) => update({ newClickPointClicks: value })}
+              style={{ width: "7ch", textAlign: "right" }}
+            />
+          </div>
+        </div>
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Default Radius</span>
+            <span className="settings-sublabel">
+              Randomization radius for new entries.
+            </span>
+          </div>
+          <div className="adv-numbox-sm" style={{ gap: "0.25rem" }}>
+            <span
+              className="adv-unit"
+              style={{ minWidth: "0.375rem", textAlign: "center" }}
+            >
+              r
+            </span>
+            <NumInput
+              hoverWheel={false}
+              value={settings.newClickPointRadius}
+              min={0}
+              max={9999}
+              onChange={(value) => update({ newClickPointRadius: value })}
+              style={{ width: "5ch", textAlign: "right" }}
+            />
+          </div>
+        </div>
+      </SettingsCard>
+
+      <SettingsCard title="Startup" description="Behavior when the app opens.">
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Minimize to Tray</span>
+            <span className="settings-sublabel">
+              Minimize to the system tray instead of the taskbar.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.minimizeToTray ? "on" : "off"}`}
+              onClick={() =>
+                update({ minimizeToTray: !settings.minimizeToTray })
+              }
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Remember Window Position</span>
+            <span className="settings-sublabel">
+              Open the window at its last position on startup.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${settings.rememberWindowPosition ? "on" : "off"}`}
+              onClick={() =>
+                update({
+                  rememberWindowPosition: !settings.rememberWindowPosition,
+                })
+              }
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Run on Startup</span>
+            <span className="settings-sublabel">
+              Start clicking when the app opens.
+            </span>
+          </div>
+          <div className="settings-toggle-wrapper">
+            <button
+              className={`settings-toggle ${autostartEnabled ? "on" : "off"}`}
+              disabled={autostartEnabled === null}
+              onClick={() => {
+                const newValue = !autostartEnabled;
+                invoke("set_autostart_enabled", { enabled: newValue })
+                  .then(() => setAutostartEnabled(newValue))
+                  .catch((err) =>
+                    error(
+                      JSON.stringify({
+                        source: "SettingsPanel.setAutostart",
+                        error: String(err),
+                      }),
+                    ),
+                  );
+              }}
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
+        </div>
+      </SettingsCard>
+
+      <ConfirmDialog
+        open={pendingAction === "extended-click-speed-limit"}
+        title="Enable extended click speed limit?"
+        message="This will allow click speeds beyond the default limit. This may affect performance."
+        confirmLabel="Enable"
+        onConfirm={handleConfirmExtendedClickSpeedLimit}
+        onCancel={() => setPendingAction(null)}
+      />
+    </>
+  );
+}
diff --git a/src/components/panels/settings/sections/GeneralSection.tsx b/src/components/panels/settings/sections/GeneralSection.tsx
new file mode 100644
index 00000000..ae50019e
--- /dev/null
+++ b/src/components/panels/settings/sections/GeneralSection.tsx
@@ -0,0 +1,241 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { openUrl } from "@tauri-apps/plugin-opener";
+import type { AppInfo } from "../../../../store";
+import { changelogEntries } from "../../../../changelog";
+import ChangelogContent from "../../../ChangelogContent";
+import { SettingsCard } from "./shared";
+
+interface CumulativeStats {
+  totalClicks: number;
+  totalTimeSecs: number;
+  totalSessions: number;
+  avgCpu: number;
+}
+
+function formatTime(totalSeconds: number, language: string): string {
+  if (totalSeconds < 0.01) return "0s";
+  if (totalSeconds < 60) {
+    return `${Math.floor(totalSeconds).toLocaleString(language)}s`;
+  }
+  if (totalSeconds < 3600) {
+    const m = Math.floor(totalSeconds / 60);
+    const s = Math.floor(totalSeconds % 60);
+    return s > 0
+      ? `${m.toLocaleString(language)}m ${s.toLocaleString(language)}s`
+      : `${m.toLocaleString(language)}m`;
+  }
+  const h = Math.floor(totalSeconds / 3600);
+  const m = Math.floor((totalSeconds % 3600) / 60);
+  return m > 0
+    ? `${h.toLocaleString(language)}h ${m.toLocaleString(language)}m`
+    : `${h.toLocaleString(language)}h`;
+}
+
+function formatNumber(n: number, language: string): string {
+  return Math.floor(n).toLocaleString(language);
+}
+
+function formatCpu(
+  cpu: number,
+  language: string,
+  notAvailable: string,
+): string {
+  if (cpu < 0) return notAvailable;
+  return `${cpu.toLocaleString(language, {
+    minimumFractionDigits: 1,
+    maximumFractionDigits: 1,
+  })}%`;
+}
+
+interface Props {
+  appInfo: AppInfo;
+  updateCheckStatus:
+    | "idle"
+    | "checking"
+    | "available"
+    | "unavailable"
+    | "error";
+  onCheckForUpdate: () => void;
+}
+
+export default function GeneralSection({
+  appInfo,
+  updateCheckStatus,
+  onCheckForUpdate,
+}: Props) {
+  const [stats, setStats] = useState<CumulativeStats | null>(null);
+  const [showChangelog, setShowChangelog] = useState(false);
+  const language = "en";
+
+  useEffect(() => {
+    invoke<CumulativeStats>("get_stats")
+      .then(setStats)
+      .catch(() => {});
+  }, []);
+
+  const hasStats = stats !== null && stats.totalSessions > 0;
+
+  const updateButtonLabel = {
+    idle: "Check for Update",
+    checking: "Checking...",
+    available: "Update found!",
+    unavailable: "No update found",
+    error: "Check failed",
+  }[updateCheckStatus];
+
+  return (
+    <>
+      <SettingsCard title="About" description="Version and project links.">
+        <div className="social-links">
+          <span className="settings-label">Support Me</span>
+          <div className="social-icons">
+            <a
+              className="social-icon social-icon--kofi"
+              href="#"
+              title="Ko-fi"
+              onClick={(e) => {
+                e.preventDefault();
+                void openUrl("https://ko-fi.com/Z8Z71T8QD4");
+              }}
+            >
+              <img
+                height="28"
+                style={{ border: 0, height: "28px" }}
+                src="https://storage.ko-fi.com/cdn/kofi3.png?v=6"
+                alt="Buy Me a Coffee at ko-fi.com"
+              />
+            </a>
+            <a
+              className="social-icon social-icon--youtube"
+              href="#"
+              title="YouTube"
+              onClick={(e) => {
+                e.preventDefault();
+                void openUrl("https://youtube.com/@Blur009");
+              }}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                width="18"
+                height="18"
+              >
+                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+              </svg>
+            </a>
+            <a
+              className="social-icon social-icon--twitch"
+              href="#"
+              title="Twitch"
+              onClick={(e) => {
+                e.preventDefault();
+                void openUrl("https://twitch.tv/Blur009");
+              }}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                width="18"
+                height="18"
+              >
+                <path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714z" />
+              </svg>
+            </a>
+            <a
+              className="social-icon social-icon--github"
+              href="#"
+              title="GitHub"
+              onClick={(e) => {
+                e.preventDefault();
+                void openUrl("https://github.com/Blur009/Blur-AutoClicker");
+              }}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                width="18"
+                height="18"
+              >
+                <path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.2.8-.6v-2c-3.3.7-4-1.4-4-1.4-.5-1.3-1.2-1.7-1.2-1.7-1-.7.1-.7.1-.7 1.1.1 1.7 1.2 1.7 1.2 1 .1.8 1.8 3.4 1.2.1-.7.4-1.2.7-1.5-2.7-.3-5.4-1.3-5.4-6a4.7 4.7 0 0 1 1.2-3.2c-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.2 11.2 0 0 1 6.1 0c2.3-1.5 3.3-1.2 3.3-1.2.6 1.7.2 2.9.1 3.2a4.7 4.7 0 0 1 1.2 3.2c0 4.7-2.8 5.7-5.4 6 .4.3.8 1 .8 2.1v3.1c0 .4.2.7.8.6A12 12 0 0 0 12 .3" />
+              </svg>
+            </a>
+          </div>
+        </div>
+        <div className="settings-row">
+          <div className="settings-label-group settings-label-group--inline">
+            <span className="settings-label">Version</span>
+            <span className="settings-value">v{appInfo.version}</span>
+          </div>
+          <div className="settings-row-actions">
+            <button
+              className="settings-btn-secondary changelog-toggle-btn"
+              onClick={() => setShowChangelog((v) => !v)}
+            >
+              <svg
+                className={`changelog-arrow${showChangelog ? " open" : ""}`}
+                width="10"
+                height="10"
+                viewBox="0 0 10 10"
+                fill="none"
+              >
+                <path
+                  d="M3 1L7 5L3 9"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+              {showChangelog ? "Hide Changes" : "Show Changes"}
+            </button>
+            <button
+              className="settings-btn-secondary check-update-btn"
+              onClick={onCheckForUpdate}
+              disabled={updateCheckStatus !== "idle"}
+            >
+              {updateButtonLabel}
+            </button>
+          </div>
+        </div>
+        {showChangelog && <ChangelogContent entries={changelogEntries} />}
+      </SettingsCard>
+
+      <SettingsCard
+        title="Usage"
+        description="Clicking statistics for all sessions (only stored locally)."
+      >
+        {hasStats ? (
+          <div className="stats-grid">
+            <div className="stats-cell">
+              <span className="stats-cell-label">Total Clicks</span>
+              <span className="stats-cell-value">
+                {formatNumber(stats.totalClicks, language)}
+              </span>
+            </div>
+            <div className="stats-cell">
+              <span className="stats-cell-label">Total Clicking Time</span>
+              <span className="stats-cell-value">
+                {formatTime(stats.totalTimeSecs, language)}
+              </span>
+            </div>
+            <div className="stats-cell">
+              <span className="stats-cell-label">Average CPU Usage</span>
+              <span className="stats-cell-value">
+                {formatCpu(stats.avgCpu, language, "N/A")}
+              </span>
+            </div>
+            <div className="stats-cell">
+              <span className="stats-cell-label">Clicking Sessions</span>
+              <span className="stats-cell-value">
+                {formatNumber(stats.totalSessions, language)}
+              </span>
+            </div>
+          </div>
+        ) : (
+          <div className="stats-empty">No session data yet.</div>
+        )}
+      </SettingsCard>
+    </>
+  );
+}
diff --git a/src/components/panels/settings/sections/KeybindsSection.tsx b/src/components/panels/settings/sections/KeybindsSection.tsx
new file mode 100644
index 00000000..10ce290d
--- /dev/null
+++ b/src/components/panels/settings/sections/KeybindsSection.tsx
@@ -0,0 +1,41 @@
+import type { Settings } from "../../../../store";
+import KeyCaptureInput from "../../../KeyCaptureInput";
+import { SettingsCard } from "./shared";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+const PAGES = [
+  { key: "keybindSimple" as const, label: "Simple" },
+  { key: "keybindAdvanced" as const, label: "Advanced" },
+  { key: "keybindZones" as const, label: "Zones" },
+  { key: "keybindClickPoints" as const, label: "Click Points" },
+  { key: "keybindSettings" as const, label: "Settings" },
+];
+
+export default function KeybindsSection({ settings, update }: Props) {
+  return (
+    <SettingsCard
+      title="Keybinds"
+      description="Set a keyboard shortcut for each page. Press the key you want to bind."
+    >
+      {PAGES.map((page) => (
+        <div className="settings-row" key={page.key}>
+          <div className="settings-label-group">
+            <span className="settings-label">{page.label}</span>
+            <span className="settings-sublabel">
+              Switch to the {page.label} page.
+            </span>
+          </div>
+          <KeyCaptureInput
+            className="settings-keybind-capture"
+            value={settings[page.key]}
+            onChange={(key) => update({ [page.key]: key })}
+          />
+        </div>
+      ))}
+    </SettingsCard>
+  );
+}
diff --git a/src/components/panels/settings/sections/MaintenanceSection.tsx b/src/components/panels/settings/sections/MaintenanceSection.tsx
new file mode 100644
index 00000000..37b829dd
--- /dev/null
+++ b/src/components/panels/settings/sections/MaintenanceSection.tsx
@@ -0,0 +1,165 @@
+import { useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { error } from "@tauri-apps/plugin-log";
+import ConfirmDialog from "../../../ConfirmDialog";
+import { SettingsCard } from "./shared";
+
+interface CumulativeStats {
+  totalClicks: number;
+  totalTimeSecs: number;
+  totalSessions: number;
+  avgCpu: number;
+}
+
+interface Props {
+  onReset: () => Promise<void>;
+}
+
+export default function MaintenanceSection({ onReset }: Props) {
+  const [pendingAction, setPendingAction] = useState<
+    "reset-settings" | "reset-usage" | null
+  >(null);
+  const [busy, setBusy] = useState(false);
+  const [diagnosticsStatus, setDiagnosticsStatus] = useState<string | null>(
+    null,
+  );
+  const [exporting, setExporting] = useState(false);
+
+  const handleConfirmResetSettings = async () => {
+    setBusy(true);
+    try {
+      await onReset();
+    } finally {
+      setBusy(false);
+      setPendingAction(null);
+    }
+  };
+
+  const handleConfirmResetUsage = async () => {
+    setBusy(true);
+    try {
+      await invoke<CumulativeStats>("reset_stats");
+    } catch {
+      // ignore
+    } finally {
+      setBusy(false);
+      setPendingAction(null);
+    }
+  };
+
+  return (
+    <>
+      <SettingsCard
+        title="Reset"
+        description="Reset all settings or usage data."
+      >
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Reset All Settings</span>
+            <span className="settings-sublabel">
+              Reset all settings to their defaults.
+            </span>
+          </div>
+          <button
+            className="settings-btn-danger"
+            onClick={() => setPendingAction("reset-settings")}
+          >
+            Reset
+          </button>
+        </div>
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Reset Usage Data</span>
+            <span className="settings-sublabel">
+              Clear all session statistics and usage history.
+            </span>
+          </div>
+          <button
+            className="settings-btn-danger"
+            onClick={() => setPendingAction("reset-usage")}
+          >
+            Reset
+          </button>
+        </div>
+      </SettingsCard>
+
+      <SettingsCard title="Diagnostics" description="Your logs & crash reports">
+        <div className="settings-row">
+          <div className="settings-label-group">
+            <span className="settings-label">Diagnostics</span>
+            <span className="settings-sublabel">
+              View or export your diagnostics.
+            </span>
+          </div>
+          <div className="settings-row-actions">
+            <button
+              className="settings-btn-secondary"
+              onClick={async () => {
+                try {
+                  await invoke("open_diagnostics_folder");
+                } catch (err) {
+                  error(
+                    JSON.stringify({
+                      source: "SettingsPanel.openDiagnostics",
+                      error: String(err),
+                    }),
+                  );
+                }
+              }}
+            >
+              Open Folder
+            </button>
+            <button
+              className="settings-btn-secondary"
+              disabled={exporting}
+              onClick={async () => {
+                setExporting(true);
+                setDiagnosticsStatus(null);
+                try {
+                  const path: string = await invoke(
+                    "export_diagnostics_bundle",
+                  );
+                  setDiagnosticsStatus(`Exported to ${path}`);
+                } catch (err) {
+                  setDiagnosticsStatus("Export failed");
+                  error(
+                    JSON.stringify({
+                      source: "SettingsPanel.exportDiagnostics",
+                      error: String(err),
+                    }),
+                  );
+                } finally {
+                  setExporting(false);
+                }
+              }}
+            >
+              {exporting ? "Exporting..." : "Export"}
+            </button>
+          </div>
+        </div>
+        {diagnosticsStatus && (
+          <span className="settings-note">{diagnosticsStatus}</span>
+        )}
+      </SettingsCard>
+
+      <ConfirmDialog
+        open={pendingAction === "reset-settings"}
+        title="Reset all settings"
+        message="This will reset all settings to their default values. This action cannot be undone."
+        confirmLabel="Reset"
+        busy={busy}
+        onConfirm={handleConfirmResetSettings}
+        onCancel={() => setPendingAction(null)}
+      />
+      <ConfirmDialog
+        open={pendingAction === "reset-usage"}
+        title="Reset usage data"
+        message="This will clear all session statistics and usage history. This action cannot be undone."
+        confirmLabel="Reset"
+        busy={busy}
+        onConfirm={handleConfirmResetUsage}
+        onCancel={() => setPendingAction(null)}
+      />
+    </>
+  );
+}
diff --git a/src/components/panels/settings/sections/PresetsSection.tsx b/src/components/panels/settings/sections/PresetsSection.tsx
new file mode 100644
index 00000000..d89a23af
--- /dev/null
+++ b/src/components/panels/settings/sections/PresetsSection.tsx
@@ -0,0 +1,462 @@
+import { useEffect, useRef, useState } from "react";
+import {
+  PRESET_NAME_MAX_LENGTH,
+  buildPresetSnapshot,
+  getPresetSummary,
+} from "../../../../settingsSchema";
+import type { PresetDefinition, PresetId, Settings } from "../../../../store";
+import { SettingsCard } from "./shared";
+
+function PresetRow({
+  preset,
+  isActive,
+  isModified,
+  isEditing,
+  isConfirmingDelete,
+  running,
+  renameDraft,
+  renameError,
+  onRenameDraftChange,
+  onStartRename,
+  onCancelRename,
+  onCommitRename,
+  onApply,
+  onUpdatePreset,
+  onRequestDelete,
+  onCancelDelete,
+  onConfirmDelete,
+  onDuplicate,
+  onExport,
+}: {
+  preset: PresetDefinition;
+  isActive: boolean;
+  isModified: boolean;
+  isEditing: boolean;
+  isConfirmingDelete: boolean;
+  running: boolean;
+  renameDraft: string;
+  renameError: string;
+  onRenameDraftChange: (value: string) => void;
+  onStartRename: () => void;
+  onCancelRename: () => void;
+  onCommitRename: () => void;
+  onApply: () => void;
+  onUpdatePreset: () => void;
+  onRequestDelete: () => void;
+  onCancelDelete: () => void;
+  onConfirmDelete: () => void;
+  onDuplicate: () => void;
+  onExport: () => void;
+}) {
+  return (
+    <div
+      className={`preset-card ${isActive ? "preset-card--active" : ""}`}
+      data-preset-id={preset.id}
+    >
+      <div className="preset-card-head">
+        <div className="preset-card-meta">
+          {isEditing ? (
+            <input
+              className="preset-rename-input"
+              value={renameDraft}
+              maxLength={PRESET_NAME_MAX_LENGTH}
+              onChange={(event) => onRenameDraftChange(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  onCommitRename();
+                }
+                if (event.key === "Escape") {
+                  event.preventDefault();
+                  onCancelRename();
+                }
+              }}
+              autoFocus
+            />
+          ) : (
+            <span className="preset-name">{preset.name}</span>
+          )}
+          <div className="preset-badges">
+            {isActive && !isModified && (
+              <span className="preset-badge preset-badge--active">Active</span>
+            )}
+            {isActive && isModified && (
+              <span className="preset-badge preset-badge--modified">
+                Modified
+              </span>
+            )}
+            <span className="preset-badge">
+              {new Date(preset.updatedAt).toLocaleDateString()}
+            </span>
+          </div>
+          <div className="preset-summary">
+            {getPresetSummary(preset.settings)}
+          </div>
+        </div>
+        <div className="preset-actions">
+          {isEditing ? (
+            <>
+              <button
+                className="settings-btn-secondary"
+                onClick={onCommitRename}
+                disabled={running}
+              >
+                Save
+              </button>
+              <button className="settings-btn-quiet" onClick={onCancelRename}>
+                Cancel
+              </button>
+            </>
+          ) : isConfirmingDelete ? (
+            <>
+              <button
+                className="settings-btn-danger settings-btn-danger--compact"
+                onClick={onConfirmDelete}
+                disabled={running}
+              >
+                Confirm?
+              </button>
+              <button className="settings-btn-quiet" onClick={onCancelDelete}>
+                Cancel
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                className="settings-btn-primary"
+                onClick={onApply}
+                disabled={running}
+              >
+                Apply
+              </button>
+              <button
+                className="settings-btn-secondary"
+                onClick={onUpdatePreset}
+                disabled={running}
+              >
+                Update
+              </button>
+              <button
+                className="settings-btn-secondary"
+                onClick={onStartRename}
+                disabled={running}
+              >
+                Rename
+              </button>
+              <button
+                className="settings-btn-secondary"
+                onClick={onDuplicate}
+                disabled={running}
+              >
+                Duplicate
+              </button>
+              <button
+                className="settings-btn-danger settings-btn-danger--compact"
+                onClick={onRequestDelete}
+                disabled={running}
+              >
+                Delete
+              </button>
+              <button
+                className="settings-btn-quiet"
+                onClick={onExport}
+                title="Export preset"
+              >
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                  <polyline points="7 10 12 15 17 10" />
+                  <line x1="12" y1="15" x2="12" y2="3" />
+                </svg>
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+      {isEditing && renameError && (
+        <div className="preset-rename-error">{renameError}</div>
+      )}
+    </div>
+  );
+}
+
+interface Props {
+  settings: Settings;
+  running: boolean;
+  onSavePreset: (name: string) => boolean;
+  onApplyPreset: (presetId: PresetId) => boolean;
+  onUpdatePreset: (presetId: PresetId) => boolean;
+  onRenamePreset: (presetId: PresetId, name: string) => boolean;
+  onDeletePreset: (presetId: PresetId) => boolean;
+  onDuplicatePreset: (presetId: PresetId) => boolean;
+  onExportPreset: (presetId: PresetId) => Promise<boolean>;
+  onImportPreset: () => Promise<boolean | null>;
+}
+
+export default function PresetsSection({
+  settings,
+  running,
+  onSavePreset,
+  onApplyPreset,
+  onUpdatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset,
+  onExportPreset,
+  onImportPreset,
+}: Props) {
+  const [newPresetName, setNewPresetName] = useState("");
+  const [editingPresetId, setEditingPresetId] = useState<PresetId | null>(null);
+  const [renameDraft, setRenameDraft] = useState("");
+  const [renameError, setRenameError] = useState("");
+  const [confirmingDeleteId, setConfirmingDeleteId] = useState<PresetId | null>(
+    null,
+  );
+  const [presetsAtBottom, setPresetsAtBottom] = useState(true);
+  const presetsListRef = useRef<HTMLDivElement>(null);
+
+  const activeEditingPresetId = running ? null : editingPresetId;
+  const activeConfirmingDeleteId = running ? null : confirmingDeleteId;
+
+  const activePreset = settings.activePresetId
+    ? (settings.presets.find((p) => p.id === settings.activePresetId) ?? null)
+    : null;
+
+  const currentSnapshot = buildPresetSnapshot(settings);
+  const isActiveModified =
+    activePreset !== null &&
+    JSON.stringify(activePreset.settings) !== JSON.stringify(currentSnapshot);
+
+  useEffect(() => {
+    if (!confirmingDeleteId) return;
+
+    const handlePointerDown = (event: PointerEvent) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const presetCard = target.closest("[data-preset-id]");
+      if (presetCard?.getAttribute("data-preset-id") === confirmingDeleteId)
+        return;
+      setConfirmingDeleteId(null);
+    };
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [confirmingDeleteId]);
+
+  const handlePresetsScroll = () => {
+    const list = presetsListRef.current;
+    if (!list) return;
+    setPresetsAtBottom(
+      list.scrollTop + list.clientHeight >= list.scrollHeight - 2,
+    );
+  };
+
+  useEffect(() => {
+    handlePresetsScroll();
+  }, [settings.presets.length]);
+
+  const handleSavePreset = () => {
+    if (onSavePreset(newPresetName)) {
+      setNewPresetName("");
+      setConfirmingDeleteId(null);
+    }
+  };
+
+  const handleStartRename = (preset: PresetDefinition) => {
+    setConfirmingDeleteId(null);
+    setEditingPresetId(preset.id);
+    setRenameDraft(preset.name);
+    setRenameError("");
+  };
+
+  const handleCommitRename = () => {
+    if (!editingPresetId) return;
+
+    const trimmed = renameDraft.trim();
+    if (!trimmed) {
+      setRenameError("Name cannot be empty");
+      return;
+    }
+
+    const duplicate = settings.presets.some(
+      (p) =>
+        p.id !== editingPresetId &&
+        p.name.toLowerCase() === trimmed.toLowerCase(),
+    );
+    if (duplicate) {
+      setRenameError("A preset with this name already exists");
+      return;
+    }
+
+    setRenameError("");
+    if (onRenamePreset(editingPresetId, trimmed)) {
+      setEditingPresetId(null);
+      setRenameDraft("");
+    }
+  };
+
+  const handleCancelRename = () => {
+    setEditingPresetId(null);
+    setRenameDraft("");
+    setRenameError("");
+  };
+
+  const handleRequestDelete = (presetId: PresetId) => {
+    setEditingPresetId(null);
+    setRenameDraft("");
+    setRenameError("");
+    setConfirmingDeleteId(presetId);
+  };
+
+  const handleConfirmDelete = (presetId: PresetId) => {
+    if (onDeletePreset(presetId)) {
+      setConfirmingDeleteId(null);
+    }
+  };
+
+  const handleImport = async () => {
+    await onImportPreset();
+  };
+
+  return (
+    <SettingsCard title="Presets" description="Save and load presets.">
+      <div className="settings-row settings-row--stacked">
+        <div className="settings-label-group">
+          <span className="settings-label">Presets</span>
+          <span className="settings-sublabel">
+            Save and restore to quickly switch configurations.
+          </span>
+        </div>
+        <div className="preset-compose">
+          <input
+            className="preset-name-input"
+            placeholder="Preset name"
+            value={newPresetName}
+            maxLength={PRESET_NAME_MAX_LENGTH}
+            onChange={(event) => setNewPresetName(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+                if (!running && newPresetName.trim()) {
+                  handleSavePreset();
+                }
+              }
+              if (event.key === "Escape") {
+                event.preventDefault();
+                setNewPresetName("");
+              }
+            }}
+            disabled={running}
+          />
+          <button
+            className="settings-btn-primary"
+            onClick={handleSavePreset}
+            disabled={running || newPresetName.trim().length === 0}
+          >
+            Save
+          </button>
+        </div>
+        <div className="preset-toolbar">
+          <button
+            className="settings-btn-secondary preset-toolbar-btn"
+            onClick={handleImport}
+            disabled={running}
+          >
+            <svg
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" y1="3" x2="12" y2="15" />
+            </svg>
+            Import
+          </button>
+          {settings.presets.length > 0 && (
+            <span className="preset-count">
+              {settings.presets.length} preset
+              {settings.presets.length !== 1 ? "s" : ""}
+            </span>
+          )}
+        </div>
+        {running && (
+          <span className="settings-note">Disabled while clicking</span>
+        )}
+        {settings.presets.length > 0 ? (
+          <div className="preset-list-shell">
+            <div
+              className="preset-list"
+              ref={presetsListRef}
+              onScroll={handlePresetsScroll}
+            >
+              {settings.presets.map((preset) => (
+                <PresetRow
+                  key={preset.id}
+                  preset={preset}
+                  isActive={settings.activePresetId === preset.id}
+                  isModified={
+                    settings.activePresetId === preset.id && isActiveModified
+                  }
+                  isEditing={activeEditingPresetId === preset.id}
+                  isConfirmingDelete={activeConfirmingDeleteId === preset.id}
+                  running={running}
+                  renameDraft={
+                    activeEditingPresetId === preset.id
+                      ? renameDraft
+                      : preset.name
+                  }
+                  renameError={
+                    activeEditingPresetId === preset.id ? renameError : ""
+                  }
+                  onRenameDraftChange={setRenameDraft}
+                  onStartRename={() => handleStartRename(preset)}
+                  onCancelRename={handleCancelRename}
+                  onCommitRename={handleCommitRename}
+                  onApply={() => {
+                    setConfirmingDeleteId(null);
+                    onApplyPreset(preset.id);
+                  }}
+                  onUpdatePreset={() => {
+                    setConfirmingDeleteId(null);
+                    onUpdatePreset(preset.id);
+                  }}
+                  onRequestDelete={() => handleRequestDelete(preset.id)}
+                  onCancelDelete={() => setConfirmingDeleteId(null)}
+                  onConfirmDelete={() => handleConfirmDelete(preset.id)}
+                  onDuplicate={() => {
+                    setConfirmingDeleteId(null);
+                    onDuplicatePreset(preset.id);
+                  }}
+                  onExport={() => {
+                    void onExportPreset(preset.id);
+                  }}
+                />
+              ))}
+            </div>
+            <div
+              className={`preset-list-fade ${presetsAtBottom ? "preset-list-fade--hidden" : ""}`}
+            />
+          </div>
+        ) : (
+          <div className="stats-empty">No saved presets.</div>
+        )}
+      </div>
+    </SettingsCard>
+  );
+}
diff --git a/src/components/panels/settings/sections/ProcessListSection.tsx b/src/components/panels/settings/sections/ProcessListSection.tsx
new file mode 100644
index 00000000..8a70dc7f
--- /dev/null
+++ b/src/components/panels/settings/sections/ProcessListSection.tsx
@@ -0,0 +1,264 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import type { Settings } from "../../../../store";
+import type { ProcessListEntry } from "../../../../settingsSchema";
+import { Disableable, CardDivider } from "../../advanced/sections/shared";
+import { SettingsCard } from "./shared";
+
+interface ProcessInfo {
+  name: string;
+  displayName: string;
+  pid: number;
+  iconBase64?: string;
+}
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+export default function ProcessListSection({ settings, update }: Props) {
+  const [processes, setProcesses] = useState<ProcessInfo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [listAtBottom, setListAtBottom] = useState(true);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const updateListAtBottom = useCallback(() => {
+    const el = listRef.current;
+    if (!el) return;
+    setListAtBottom(el.scrollTop + el.clientHeight >= el.scrollHeight - 2);
+  }, []);
+
+  const handleListScroll = useCallback(() => {
+    updateListAtBottom();
+  }, [updateListAtBottom]);
+
+  const silentRefresh = useCallback(async () => {
+    try {
+      const procs = await invoke<ProcessInfo[]>("list_processes");
+      setProcesses(procs);
+    } catch {
+      //
+    }
+  }, []);
+
+  useEffect(() => {
+    let mounted = true;
+    setLoading(true);
+    void (async () => {
+      try {
+        const procs = await invoke<ProcessInfo[]>("list_processes");
+        if (mounted) setProcesses(procs);
+      } catch {
+        //
+      } finally {
+        if (mounted) setLoading(false);
+      }
+    })();
+    intervalRef.current = setInterval(silentRefresh, 5000);
+    return () => {
+      mounted = false;
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [silentRefresh]);
+
+  useEffect(() => {
+    updateListAtBottom();
+  }, [processes, searchQuery, updateListAtBottom]);
+
+  const toggleEntry = (name: string, checked: boolean) => {
+    const next = checked
+      ? [
+          ...settings.processListEntries,
+          {
+            name,
+            enabled: true,
+          } as ProcessListEntry,
+        ]
+      : settings.processListEntries.filter((e) => e.name !== name);
+    update({ processListEntries: next });
+  };
+
+  const entryMap = new Map(settings.processListEntries.map((e) => [e.name, e]));
+  const matchesSearch = (p: ProcessInfo) =>
+    searchQuery.length < 1 ||
+    p.displayName.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    p.name.toLowerCase().includes(searchQuery.toLowerCase());
+
+  const checkedProcesses = processes.filter(
+    (p) => entryMap.get(p.name)?.enabled && matchesSearch(p),
+  );
+  const uncheckedProcesses = processes.filter(
+    (p) => !entryMap.has(p.name) && matchesSearch(p),
+  );
+
+  return (
+    <SettingsCard
+      title="Process List"
+      description="Stop clicking when specific applications are in focus."
+    >
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Enable</span>
+          <span className="settings-sublabel">
+            Stop clicking based on the active application.
+          </span>
+        </div>
+        <div className="settings-toggle-wrapper">
+          <button
+            className={`settings-toggle ${settings.processListEnabled ? "on" : "off"}`}
+            onClick={() =>
+              update({ processListEnabled: !settings.processListEnabled })
+            }
+          >
+            <span className="settings-toggle-knob" />
+          </button>
+        </div>
+      </div>
+
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Mode</span>
+          <span className="settings-sublabel">
+            Whitelist only allows checked apps. Blacklist blocks them.
+          </span>
+        </div>
+        <div className="settings-seg-group">
+          <button
+            type="button"
+            className={`settings-seg-btn ${settings.processListMode === "whitelist" ? "active" : ""}`}
+            onClick={() => update({ processListMode: "whitelist" })}
+          >
+            Whitelist
+          </button>
+          <button
+            type="button"
+            className={`settings-seg-btn ${settings.processListMode === "blacklist" ? "active" : ""}`}
+            onClick={() => update({ processListMode: "blacklist" })}
+          >
+            Blacklist
+          </button>
+        </div>
+      </div>
+
+      <CardDivider />
+
+      <Disableable
+        enabled={settings.processListEnabled}
+        disabledReason="Enable Process List to manage application rules."
+      >
+        {settings.processListMode === "whitelist" &&
+        settings.processListEntries.length === 0 ? (
+          <div className="settings-whitelist-warning">
+            Whitelist mode is active with no applications selected. Clicking
+            will be blocked everywhere.
+          </div>
+        ) : null}
+
+        <div className="settings-proc-search-row">
+          <input
+            type="text"
+            className="settings-proc-search"
+            placeholder={`search in ${processes.length} applications`}
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+
+        <div
+          style={{
+            position: "relative",
+            flex: 1,
+            minHeight: 0,
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <div
+            className="settings-proc-list"
+            ref={listRef}
+            onScroll={handleListScroll}
+          >
+            {loading ? (
+              <div className="adv-click-points-empty">Refreshing...</div>
+            ) : processes.length === 0 ? (
+              <div className="adv-click-points-empty">
+                No processes found. Click Refresh.
+              </div>
+            ) : searchQuery.length >= 1 &&
+              checkedProcesses.length === 0 &&
+              uncheckedProcesses.length === 0 ? (
+              <div
+                className="adv-click-points-empty"
+                style={{ textAlign: "center", padding: "1rem" }}
+              >
+                no process named &quot;{searchQuery}&quot;
+              </div>
+            ) : (
+              <>
+                {checkedProcesses.map((proc) => (
+                  <ProcessRow
+                    key={proc.name}
+                    proc={proc}
+                    entry={entryMap.get(proc.name)!}
+                    onToggleEntry={toggleEntry}
+                  />
+                ))}
+                {checkedProcesses.length > 0 &&
+                  uncheckedProcesses.length > 0 && (
+                    <div
+                      style={{
+                        height: 1,
+                        background: "var(--border-subtle)",
+                        margin: "0.25rem 0",
+                      }}
+                    />
+                  )}
+                {uncheckedProcesses.map((proc) => (
+                  <ProcessRow
+                    key={proc.name}
+                    proc={proc}
+                    entry={undefined}
+                    onToggleEntry={toggleEntry}
+                  />
+                ))}
+              </>
+            )}
+          </div>
+          <div
+            className={`settings-proc-fade ${listAtBottom ? "settings-proc-fade--hidden" : ""}`}
+          />
+        </div>
+      </Disableable>
+    </SettingsCard>
+  );
+}
+
+function ProcessRow({
+  proc,
+  entry,
+  onToggleEntry,
+}: {
+  proc: ProcessInfo;
+  entry: ProcessListEntry | undefined;
+  onToggleEntry: (name: string, checked: boolean) => void;
+}) {
+  const isChecked = entry?.enabled ?? false;
+  return (
+    <label className="adv-click-points-item">
+      <input
+        type="checkbox"
+        className="settings-proc-checkbox"
+        checked={isChecked}
+        onChange={(e) => onToggleEntry(proc.name, e.target.checked)}
+      />
+      {proc.iconBase64 ? (
+        <img src={proc.iconBase64} alt="" className="settings-proc-icon" />
+      ) : null}
+      <span className="settings-proc-name">{proc.displayName}</span>
+      <span className="settings-proc-exe">{proc.name}</span>
+    </label>
+  );
+}
diff --git a/src/components/panels/settings/sections/StartupSection.tsx b/src/components/panels/settings/sections/StartupSection.tsx
new file mode 100644
index 00000000..c564deb4
--- /dev/null
+++ b/src/components/panels/settings/sections/StartupSection.tsx
@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+import { error } from "@tauri-apps/plugin-log";
+import type { Settings } from "../../../../store";
+import { SettingsCard } from "./shared";
+
+const onOffOptions = [
+  { value: false, label: "Off" },
+  { value: true, label: "On" },
+];
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+}
+
+export default function StartupSection({ settings, update }: Props) {
+  const [autostartEnabled, setAutostartEnabled] = useState<boolean | null>(
+    null,
+  );
+
+  useEffect(() => {
+    invoke<boolean>("get_autostart_enabled")
+      .then(setAutostartEnabled)
+      .catch(() => setAutostartEnabled(false));
+  }, []);
+
+  return (
+    <SettingsCard title="Startup" description="Behavior when the app opens.">
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Minimize to Tray</span>
+          <span className="settings-sublabel">
+            Minimize to the system tray instead of the taskbar.
+          </span>
+        </div>
+        <div className="settings-seg-group">
+          {onOffOptions.map((option) => (
+            <button
+              key={String(option.value)}
+              className={`settings-seg-btn ${settings.minimizeToTray === option.value ? "active" : ""}`}
+              onClick={() => update({ minimizeToTray: option.value })}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="settings-row">
+        <div className="settings-label-group">
+          <span className="settings-label">Run on Startup</span>
+          <span className="settings-sublabel">
+            Start clicking when the app opens.
+          </span>
+        </div>
+        <div className="settings-seg-group">
+          {onOffOptions.map((option) => (
+            <button
+              key={String(option.value)}
+              className={`settings-seg-btn ${autostartEnabled === option.value ? "active" : ""}`}
+              disabled={autostartEnabled === null}
+              onClick={() => {
+                invoke("set_autostart_enabled", { enabled: option.value })
+                  .then(() => setAutostartEnabled(option.value))
+                  .catch((err) =>
+                    error(
+                      JSON.stringify({
+                        source: "SettingsPanel.setAutostart",
+                        error: String(err),
+                      }),
+                    ),
+                  );
+              }}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      </div>
+    </SettingsCard>
+  );
+}
diff --git a/src/components/panels/settings/sections/shared.tsx b/src/components/panels/settings/sections/shared.tsx
new file mode 100644
index 00000000..dee95af6
--- /dev/null
+++ b/src/components/panels/settings/sections/shared.tsx
@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+
+function SettingsSectionHeading({
+  title,
+  description,
+}: {
+  title: string;
+  description?: string;
+}) {
+  return (
+    <div className="settings-section-heading">
+      <span className="settings-section-title">{title}</span>
+      {description ? (
+        <span className="settings-section-description">{description}</span>
+      ) : null}
+    </div>
+  );
+}
+
+function SettingsCard({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: ReactNode;
+}) {
+  return (
+    <section className="settings-card">
+      <SettingsSectionHeading title={title} description={description} />
+      <div className="settings-card-content">{children}</div>
+    </section>
+  );
+}
+
+export { SettingsSectionHeading, SettingsCard };
diff --git a/src/components/panels/zones/CustomStopZoneSection.tsx b/src/components/panels/zones/CustomStopZoneSection.tsx
deleted file mode 100644
index 07ce04ba..00000000
--- a/src/components/panels/zones/CustomStopZoneSection.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import type { Settings } from "../../../store";
-import { error } from "@tauri-apps/plugin-log";
-import { invoke } from "@tauri-apps/api/core";
-import { listen } from "@tauri-apps/api/event";
-import {
-  Disableable,
-  NumInput,
-  ToggleBtn,
-  CardDivider,
-  InfoIcon,
-} from "../advanced/shared";
-
-interface Props {
-  settings: Settings;
-  update: (patch: Partial<Settings>) => void;
-  showInfo: boolean;
-}
-
-interface CustomStopZonePickedPayload {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export default function CustomStopZoneSection({
-  settings,
-  update,
-  showInfo,
-}: Props) {
-  const [drawingZone, setDrawingZone] = useState(false);
-  const updateRef = useRef(update);
-
-  useEffect(() => {
-    updateRef.current = update;
-  }, [update]);
-
-  useEffect(() => {
-    let disposed = false;
-    let unlistenPicked: (() => void) | null = null;
-    let unlistenEnded: (() => void) | null = null;
-
-    void listen<CustomStopZonePickedPayload>(
-      "custom-stop-zone-picked",
-      (event) => {
-        updateRef.current({
-          customStopZoneEnabled: true,
-          customStopZoneX: event.payload.x,
-          customStopZoneY: event.payload.y,
-          customStopZoneWidth: Math.max(1, event.payload.width),
-          customStopZoneHeight: Math.max(1, event.payload.height),
-        });
-        setDrawingZone(false);
-      },
-    ).then((cleanup) => {
-      if (disposed) {
-        cleanup();
-      } else {
-        unlistenPicked = cleanup;
-      }
-    });
-
-    void listen("custom-stop-zone-pick-ended", () => {
-      setDrawingZone(false);
-    }).then((cleanup) => {
-      if (disposed) {
-        cleanup();
-      } else {
-        unlistenEnded = cleanup;
-      }
-    });
-
-    return () => {
-      disposed = true;
-      unlistenPicked?.();
-      unlistenEnded?.();
-      void invoke("cancel_custom_stop_zone_pick");
-    };
-  }, []);
-
-  const startCustomStopZonePick = useCallback(async () => {
-    setDrawingZone(true);
-    try {
-      await invoke("start_custom_stop_zone_pick");
-    } catch (err) {
-      setDrawingZone(false);
-      error(
-        JSON.stringify({
-          source: "CustomStopZoneSection.startPick",
-          error: String(err),
-        }),
-      );
-    }
-  }, []);
-
-  const cancelCustomStopZonePick = useCallback(async () => {
-    setDrawingZone(false);
-    try {
-      await invoke("cancel_custom_stop_zone_pick");
-    } catch (err) {
-      error(
-        JSON.stringify({
-          source: "CustomStopZoneSection.cancelPick",
-          error: String(err),
-        }),
-      );
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!drawingZone) {
-      return;
-    }
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") {
-        return;
-      }
-
-      event.preventDefault();
-      event.stopPropagation();
-      void cancelCustomStopZonePick();
-    };
-
-    window.addEventListener("keydown", handleKeyDown, true);
-    return () => window.removeEventListener("keydown", handleKeyDown, true);
-  }, [cancelCustomStopZonePick, drawingZone]);
-
-  return (
-    <div className="adv-sectioncontainer">
-      <div className="adv-card-header">
-        <div
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: "0.5rem",
-          }}
-        >
-          {showInfo ? (
-            <InfoIcon text="Draw a zone on screen that stops clicking when your cursor enters it." />
-          ) : null}
-          <span className="adv-card-title">Custom Stop Zone</span>
-        </div>
-        <ToggleBtn
-          value={settings.customStopZoneEnabled}
-          onChange={(v) => {
-            if (!v && drawingZone) {
-              void cancelCustomStopZonePick();
-            }
-            update({ customStopZoneEnabled: v });
-          }}
-        />
-      </div>
-      <CardDivider />
-      <Disableable enabled={settings.customStopZoneEnabled}>
-        <div className="adv-stop-zone-body">
-          <div className="adv-stop-zone-controls">
-            <div className="adv-stop-zone-grid">
-              <label
-                className="adv-numbox-sm adv-sequence-coord adv-stop-zone-input"
-                style={{ gap: "6px" }}
-              >
-                <span
-                  className="adv-unit"
-                  style={{ minWidth: "0.75rem", textAlign: "center" }}
-                >
-                  X
-                </span>
-                <NumInput
-                  value={settings.customStopZoneX}
-                  onChange={(v) => update({ customStopZoneX: v })}
-                  style={{ flex: 1, width: "100%", textAlign: "left" }}
-                />
-              </label>
-              <label
-                className="adv-numbox-sm adv-sequence-coord adv-stop-zone-input"
-                style={{ gap: "6px" }}
-              >
-                <span
-                  className="adv-unit"
-                  style={{ minWidth: "0.75rem", textAlign: "center" }}
-                >
-                  Y
-                </span>
-                <NumInput
-                  value={settings.customStopZoneY}
-                  onChange={(v) => update({ customStopZoneY: v })}
-                  style={{ flex: 1, width: "100%", textAlign: "left" }}
-                />
-              </label>
-              <label
-                className="adv-numbox-sm adv-sequence-coord adv-stop-zone-input"
-                style={{ gap: "6px" }}
-              >
-                <span
-                  className="adv-unit"
-                  style={{ minWidth: "0.75rem", textAlign: "center" }}
-                >
-                  W
-                </span>
-                <NumInput
-                  value={settings.customStopZoneWidth}
-                  onChange={(v) => update({ customStopZoneWidth: v })}
-                  min={1}
-                  style={{ flex: 1, width: "100%", textAlign: "left" }}
-                />
-              </label>
-              <label
-                className="adv-numbox-sm adv-sequence-coord adv-stop-zone-input"
-                style={{ gap: "6px" }}
-              >
-                <span
-                  className="adv-unit"
-                  style={{ minWidth: "0.75rem", textAlign: "center" }}
-                >
-                  H
-                </span>
-                <NumInput
-                  value={settings.customStopZoneHeight}
-                  onChange={(v) => update({ customStopZoneHeight: v })}
-                  min={1}
-                  style={{ flex: 1, width: "100%", textAlign: "left" }}
-                />
-              </label>
-            </div>
-            <div className="adv-sequence-actions adv-stop-zone-actions">
-              <button
-                type="button"
-                className="adv-secondary-btn"
-                onClick={() => {
-                  void (drawingZone
-                    ? cancelCustomStopZonePick()
-                    : startCustomStopZonePick());
-                }}
-              >
-                {drawingZone ? "Cancel" : "Draw Zone"}
-              </button>
-            </div>
-          </div>
-        </div>
-      </Disableable>
-    </div>
-  );
-}
diff --git a/src/components/panels/zones/ZonesPanel.css b/src/components/panels/zones/ZonesPanel.css
new file mode 100644
index 00000000..42c2a15a
--- /dev/null
+++ b/src/components/panels/zones/ZonesPanel.css
@@ -0,0 +1,493 @@
+/* =============================== */
+/* Original zones panel styles     */
+/* =============================== */
+
+.adv-zones-row {
+  display: flex;
+  gap: 0.5rem;
+  flex: none;
+  align-items: stretch;
+  min-height: 0;
+}
+
+.adv-zones-left {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.adv-zones-right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.adv-zones-left .adv-sectioncontainer {
+  flex: none;
+}
+
+.adv-zones-right .adv-sectioncontainer {
+  flex: 1;
+  min-height: 0;
+}
+
+.adv-panel--zones {
+  flex: 1;
+  overflow: hidden;
+}
+
+.adv-panel--zones .adv-sectioncontainer {
+  box-shadow: none;
+  margin-bottom: 0.5rem;
+}
+
+.adv-panel--zones > .adv-sectioncontainer:last-child {
+  margin-bottom: 0;
+}
+
+.adv-corner-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.375rem;
+  flex-shrink: 0;
+}
+
+.adv-corner-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  background: var(--bg-elevated);
+  border: 0.0625rem solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.5rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.adv-stop-boundary-box {
+  height: 1.875rem;
+  box-sizing: border-box;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.adv-stop-boundary-box .adv-number-sm {
+  height: 1.75rem;
+  line-height: 1.75rem;
+  box-sizing: border-box;
+}
+
+.adv-arc {
+  position: absolute;
+  width: 0.625rem;
+  height: 0.625rem;
+  border: 0.125rem solid var(--accent);
+  pointer-events: none;
+}
+
+.adv-arc-tl {
+  top: 0;
+  left: 0;
+  border-right: none;
+  border-bottom: none;
+  border-top-left-radius: 0.375rem;
+}
+
+.adv-arc-tr {
+  top: 0;
+  right: 0;
+  border-left: none;
+  border-bottom: none;
+  border-top-right-radius: 0.375rem;
+}
+
+.adv-arc-bl {
+  bottom: 0;
+  left: 0;
+  border-right: none;
+  border-top: none;
+  border-bottom-left-radius: 0.375rem;
+}
+
+.adv-arc-br {
+  bottom: 0;
+  right: 0;
+  border-left: none;
+  border-top: none;
+  border-bottom-right-radius: 0.375rem;
+}
+
+.adv-edge-bar {
+  position: absolute;
+  background: var(--accent);
+  border-radius: var(--radius-sm);
+  pointer-events: none;
+}
+
+.adv-edge-bar-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0.125rem;
+}
+
+.adv-edge-bar-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 0.125rem;
+}
+
+.adv-edge-bar-left {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 0.125rem;
+}
+
+.adv-edge-bar-right {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 0.125rem;
+}
+
+.adv-stop-zone-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  align-items: stretch;
+  min-height: 0;
+  height: 100%;
+}
+
+.adv-stop-zone-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+}
+
+.adv-stop-zone-input {
+  height: 1.875rem;
+  box-sizing: border-box;
+}
+
+.adv-stop-zone-input .adv-number-sm {
+  height: 1.75rem;
+  line-height: 1.75rem;
+  box-sizing: border-box;
+}
+
+.adv-stop-zone-actions {
+  display: flex;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+
+.adv-stop-zone-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.375rem;
+}
+
+.adv-disabled-content .adv-edge-bar,
+.adv-disabled-content .adv-arc {
+  border-color: var(--border-subtle) !important;
+  background: var(--border-subtle) !important;
+  opacity: 0.3;
+}
+
+.adv-zone-row {
+  display: grid;
+  grid-template-columns: 1.5rem 4rem 4rem 4rem 4rem 1fr 5rem 8rem 2rem;
+  gap: 0.25rem;
+  align-items: center;
+  border: 0.0625rem solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.5rem;
+  background: var(--bg-elevated);
+  width: 100%;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  min-height: 2.5rem;
+}
+
+.adv-zone-index {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.75rem;
+  font-weight: var(--font-weight-hv);
+  color: var(--text-dim);
+  text-align: center;
+  width: 1.5rem;
+  opacity: 1;
+  grid-column: 1;
+}
+
+.adv-zone-coord {
+  gap: 0.125rem;
+  padding: 0 0.25rem;
+  min-width: 0;
+}
+
+.adv-zone-coord .adv-number-sm {
+  max-width: 7ch;
+  width: 7ch;
+  text-overflow: clip;
+}
+
+.adv-zone-row .adv-zone-draw-btn {
+  grid-column: 8;
+  width: 100%;
+}
+
+.adv-zone-draw-btn {
+  height: 2rem;
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1;
+  white-space: nowrap;
+  border: 0.0625rem solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-family: "RobotoFlex", sans-serif;
+  font-weight: var(--font-weight-hv);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  transition: border-color 0.15s ease;
+}
+
+.adv-zone-draw-btn:hover {
+  border-color: var(--accent-ring);
+}
+
+.adv-zone-row .adv-numbox-sm {
+  height: 2rem;
+  min-height: 2rem;
+}
+
+.adv-zone-row .adv-number-sm {
+  height: 2rem;
+  line-height: 2rem;
+  width: 7ch !important;
+  text-align: right;
+  padding-right: 0.6rem;
+}
+
+.adv-zone-row .adv-dropdown {
+  grid-column: 7;
+  justify-self: end;
+  min-width: 0;
+  width: 100%;
+}
+
+.adv-zone-row .adv-dropdown-trigger {
+  height: 2rem;
+  min-height: 2rem;
+  border: 0.0625rem solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  background: var(--bg-elevated);
+  box-sizing: border-box;
+  padding: 0 0.5rem;
+}
+
+.adv-zone-row .adv-dropdown-trigger:hover {
+  border-color: var(--accent-ring);
+}
+
+.adv-zone-row .adv-click-points-delete {
+  grid-column: 9;
+  justify-self: end;
+  width: 2rem;
+  height: 2rem;
+  background: transparent;
+  border-radius: var(--radius-sm);
+  border: 0.0625rem solid var(--border-subtle);
+  color: var(--text-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.adv-zone-row .adv-click-points-delete:hover {
+  color: #e24d4d;
+  border-color: #e24d4d;
+}
+
+.adv-zones-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  flex: 1;
+  min-height: 0;
+  padding: 1.5rem 1rem;
+  text-align: center;
+}
+
+.adv-stop-zones-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.adv-stop-zones-card .adv-disabled-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.adv-stop-zones-card .adv-disabled-container > :first-child {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}
+
+.adv-stop-zones-card .adv-disabled-content {
+  flex: 1;
+  min-height: 0;
+}
+
+.adv-stop-zone-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+  align-items: stretch;
+  min-height: 0;
+  height: 100%;
+}
+
+.adv-stop-zone-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+  flex: 1;
+  width: 100%;
+  min-height: 0;
+}
+
+.adv-stop-zone-list-shell {
+  position: relative;
+  width: 100%;
+  flex: 1 1 auto;
+  height: 0;
+  min-height: 0;
+}
+
+.adv-stop-zone-list {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  overflow-y: hidden;
+  min-height: 0;
+  height: 100%;
+  padding: 0 2px 0 0;
+  box-sizing: border-box;
+  scrollbar-gutter: stable;
+  animation: adv-cplist-enable 0.01s 350ms forwards;
+}
+
+.adv-stop-zone-list::-webkit-scrollbar {
+  width: 0.375rem;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-md);
+}
+
+.adv-stop-zone-list::-webkit-scrollbar-thumb {
+  background: var(--text-dim);
+  border-radius: var(--radius-sm);
+}
+
+.adv-stop-zone-list::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+.adv-stop-zone-list > * + * {
+  margin-top: 6px;
+}
+
+.adv-stop-zone-list-fade {
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 1.75rem;
+  pointer-events: none;
+  background: linear-gradient(to bottom, transparent 0%, var(--bg-base) 100%);
+}
+
+.adv-zones-empty-icon {
+  color: var(--text-dim);
+  opacity: 0.5;
+  margin-bottom: 0.125rem;
+}
+
+.adv-zones-empty-title {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.8rem;
+  font-weight: var(--font-weight-hv);
+  color: var(--text-muted);
+}
+
+.adv-zones-empty-hint {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.72rem;
+  color: var(--text-dim);
+  line-height: 1.4;
+  max-width: 22rem;
+}
+
+.adv-zones-empty-hint strong {
+  color: var(--text-primary);
+  font-weight: var(--font-weight-hv);
+}
+
+.adv-proc-search {
+  font-family: "RobotoFlex", sans-serif;
+  font-size: 0.75rem;
+  height: var(--adv-control-height);
+  padding: 0 1.5rem 0 0.5rem;
+  margin-left: auto;
+  width: 12rem;
+  background-color: var(--bg-tertiary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='5' cy='5' r='3.5' fill='none' stroke='%23999' stroke-width='1.2'/%3E%3Cline x1='7.75' y1='7.75' x2='10.5' y2='10.5' stroke='%23999' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.375rem center;
+  border: 0.0625rem solid var(--border-subtle);
+  border-radius: var(--radius-sm);
+  color: var(--text-main);
+  outline: none;
+  box-sizing: border-box;
+}
+
+.adv-proc-search::placeholder {
+  color: var(--text-dim);
+  opacity: 0.7;
+}
+
+.adv-proc-search:focus {
+  border-color: var(--accent);
+}
diff --git a/src/components/panels/zones/ZonesPanel.tsx b/src/components/panels/zones/ZonesPanel.tsx
index f749359a..ffe73e43 100644
--- a/src/components/panels/zones/ZonesPanel.tsx
+++ b/src/components/panels/zones/ZonesPanel.tsx
@@ -1,11 +1,8 @@
-import "../advanced/AdvancedPanel.css";
+import "../advanced/sections/shared.css";
+import "./ZonesPanel.css";
 import type { Settings } from "../../../store";
-import FailsafeSection from "./FailsafeSection";
-import CustomStopZoneSection from "./CustomStopZoneSection";
-import ProcessListSection from "./ProcessListSection";
-
-// TODO: This still entirely needs to get done. I've just moved everything over here. If you are a back end dev, please be careful changing UI things xD
-// TODO: Custom Stop zones should be like Sequence clicking where you can add as many as you want in a list.
+import FailsafeSection from "./sections/FailsafeSection";
+import StopZonesSection from "./sections/StopZonesSection";
 
 interface Props {
   settings: Settings;
@@ -17,28 +14,17 @@ function ZonesPanel({ settings, update, showInfo }: Props) {
   return (
     <div className="adv-panel adv-panel-text adv-panel--zones">
       <div className="adv-zones-row">
-        <div className="adv-zones-left">
-          <FailsafeSection
-            settings={settings}
-            update={update}
-            showInfo={showInfo}
-          />
-        </div>
-        <div className="adv-zones-right">
-          <CustomStopZoneSection
-            settings={settings}
-            update={update}
-            showInfo={showInfo}
-          />
-        </div>
-      </div>
-      <div className="adv-row adv-row--grow">
-        <ProcessListSection
+        <FailsafeSection
           settings={settings}
           update={update}
           showInfo={showInfo}
         />
       </div>
+      <StopZonesSection
+        settings={settings}
+        update={update}
+        showInfo={showInfo}
+      />
     </div>
   );
 }
diff --git a/src/components/panels/zones/FailsafeSection.tsx b/src/components/panels/zones/sections/FailsafeSection.tsx
similarity index 85%
rename from src/components/panels/zones/FailsafeSection.tsx
rename to src/components/panels/zones/sections/FailsafeSection.tsx
index 68ca1df3..1a6a10f5 100644
--- a/src/components/panels/zones/FailsafeSection.tsx
+++ b/src/components/panels/zones/sections/FailsafeSection.tsx
@@ -1,13 +1,12 @@
-import type { Settings } from "../../../store";
+import type { Settings } from "../../../../store";
 
-import { SETTINGS_LIMITS } from "../../../settingsSchema";
+import { SETTINGS_LIMITS } from "../../../../settingsSchema";
 import {
   Disableable,
   NumInput,
   ToggleBtn,
   CardDivider,
-  InfoIcon,
-} from "../advanced/shared";
+} from "../../advanced/sections/shared";
 
 interface Props {
   settings: Settings;
@@ -29,7 +28,7 @@ const EDGE_KEYS = {
   bottom: "edgeStopBottom",
 } as const;
 
-export default function FailsafeSection({ settings, update, showInfo }: Props) {
+export default function FailsafeSection({ settings, update }: Props) {
   return (
     <>
       <div className="adv-sectioncontainer">
@@ -42,9 +41,6 @@ export default function FailsafeSection({ settings, update, showInfo }: Props) {
               gap: "0.5rem",
             }}
           >
-            {showInfo ? (
-              <InfoIcon text="Stops the clicker when the cursor enters a screen corner. Keep it as a failsafe." />
-            ) : null}
             <span className="adv-card-title">Corner Stop</span>
           </div>
           <ToggleBtn
@@ -53,6 +49,10 @@ export default function FailsafeSection({ settings, update, showInfo }: Props) {
           />
         </div>
         <CardDivider />
+        <div className="adv-card-desc">
+          Stops the clicker when your cursor enters a screen corner. Keep this
+          enabled as a safety net.
+        </div>
         <Disableable
           enabled={settings.cornerStopEnabled}
           disabledReason="Enable Corner Stop to edit the corner failsafe hitboxes."
@@ -70,6 +70,7 @@ export default function FailsafeSection({ settings, update, showInfo }: Props) {
                     onChange={(v) => update({ [CORNER_KEYS[cornerKey]]: v })}
                     min={SETTINGS_LIMITS.stopBoundary.min}
                     max={SETTINGS_LIMITS.stopBoundary.max}
+                    hoverWheel={false}
                     style={{ width: "74px", textAlign: "right" }}
                   />
                   <span className="adv-unit">px</span>
@@ -90,9 +91,6 @@ export default function FailsafeSection({ settings, update, showInfo }: Props) {
               gap: "0.5rem",
             }}
           >
-            {showInfo ? (
-              <InfoIcon text="Stops the clicker when the cursor reaches a screen edge. Keep it as a failsafe." />
-            ) : null}
             <span className="adv-card-title">Edge Stop</span>
           </div>
           <ToggleBtn
@@ -101,6 +99,10 @@ export default function FailsafeSection({ settings, update, showInfo }: Props) {
           />
         </div>
         <CardDivider />
+        <div className="adv-card-desc">
+          Stops the clicker when your cursor reaches a screen edge. Keep this
+          enabled as a safety net.
+        </div>
         <Disableable
           enabled={settings.edgeStopEnabled}
           disabledReason="Enable Edge Stop to edit the edge failsafe hitboxes."
@@ -118,6 +120,7 @@ export default function FailsafeSection({ settings, update, showInfo }: Props) {
                     onChange={(v) => update({ [EDGE_KEYS[edgeSide]]: v })}
                     min={SETTINGS_LIMITS.stopBoundary.min}
                     max={SETTINGS_LIMITS.stopBoundary.max}
+                    hoverWheel={false}
                     style={{ width: "74px", textAlign: "right" }}
                   />
                   <span className="adv-unit">px</span>
diff --git a/src/components/panels/zones/ProcessListSection.tsx b/src/components/panels/zones/sections/ProcessListSection.tsx
similarity index 77%
rename from src/components/panels/zones/ProcessListSection.tsx
rename to src/components/panels/zones/sections/ProcessListSection.tsx
index c2dcf044..67015b7b 100644
--- a/src/components/panels/zones/ProcessListSection.tsx
+++ b/src/components/panels/zones/sections/ProcessListSection.tsx
@@ -1,17 +1,13 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { invoke } from "@tauri-apps/api/core";
-import type { Settings } from "../../../store";
-import type {
-  ProcessListBehavior,
-  ProcessListEntry,
-} from "../../../settingsSchema";
+import type { Settings } from "../../../../store";
+import type { ProcessListEntry } from "../../../../settingsSchema";
 
 import {
   Disableable,
   ToggleBtn,
   CardDivider,
-  InfoIcon,
-} from "../advanced/shared";
+} from "../../advanced/sections/shared";
 
 interface ProcessInfo {
   name: string;
@@ -26,11 +22,7 @@ interface Props {
   showInfo: boolean;
 }
 
-export default function ProcessListSection({
-  settings,
-  update,
-  showInfo,
-}: Props) {
+export default function ProcessListSection({ settings, update }: Props) {
   const [processes, setProcesses] = useState<ProcessInfo[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState("");
@@ -71,7 +63,6 @@ export default function ProcessListSection({
           ...settings.processListEntries,
           {
             name,
-            behavior: "stop" as ProcessListBehavior,
             enabled: true,
           } as ProcessListEntry,
         ]
@@ -79,13 +70,6 @@ export default function ProcessListSection({
     update({ processListEntries: next });
   };
 
-  const toggleEntryBehavior = (name: string, behavior: ProcessListBehavior) => {
-    const next = settings.processListEntries.map((e) =>
-      e.name === name ? { ...e, behavior } : e,
-    );
-    update({ processListEntries: next });
-  };
-
   const entryMap = new Map(settings.processListEntries.map((e) => [e.name, e]));
   const matchesSearch = (p: ProcessInfo) =>
     searchQuery.length < 1 ||
@@ -109,9 +93,6 @@ export default function ProcessListSection({
             gap: "0.5rem",
           }}
         >
-          {showInfo ? (
-            <InfoIcon text="Pause clicking when certain applications are focused. Checked processes are whitelisted or blacklisted depending on the mode selected." />
-          ) : null}
           <span className="adv-card-title">Process List</span>
         </div>
         <ToggleBtn
@@ -120,6 +101,10 @@ export default function ProcessListSection({
         />
       </div>
       <CardDivider />
+      <div className="adv-card-desc">
+        Stop clicking when specific applications are in focus. Combine with
+        whitelist or blacklist mode.
+      </div>
       <Disableable
         enabled={settings.processListEnabled}
         disabledReason="Enable Process List to manage application rules."
@@ -158,16 +143,16 @@ export default function ProcessListSection({
         ) : null}
         <div className="adv-process-list">
           {loading ? (
-            <div className="adv-sequence-empty">Refreshing...</div>
+            <div className="adv-click-points-empty">Refreshing...</div>
           ) : processes.length === 0 ? (
-            <div className="adv-sequence-empty">
+            <div className="adv-click-points-empty">
               No processes found. Click Refresh.
             </div>
           ) : searchQuery.length >= 1 &&
             checkedProcesses.length === 0 &&
             uncheckedProcesses.length === 0 ? (
             <div
-              className="adv-sequence-empty"
+              className="adv-click-points-empty"
               style={{ textAlign: "center", padding: "1rem" }}
             >
               no process named "{searchQuery}"
@@ -180,7 +165,6 @@ export default function ProcessListSection({
                   proc={proc}
                   entry={entryMap.get(proc.name)!}
                   onToggleEntry={toggleEntry}
-                  onToggleBehavior={toggleEntryBehavior}
                 />
               ))}
               {checkedProcesses.length > 0 && uncheckedProcesses.length > 0 && (
@@ -198,7 +182,6 @@ export default function ProcessListSection({
                   proc={proc}
                   entry={undefined}
                   onToggleEntry={toggleEntry}
-                  onToggleBehavior={toggleEntryBehavior}
                 />
               ))}
             </>
@@ -213,16 +196,14 @@ function ProcessRow({
   proc,
   entry,
   onToggleEntry,
-  onToggleBehavior,
 }: {
   proc: ProcessInfo;
   entry: ProcessListEntry | undefined;
   onToggleEntry: (name: string, checked: boolean) => void;
-  onToggleBehavior: (name: string, behavior: ProcessListBehavior) => void;
 }) {
   const isChecked = entry?.enabled ?? false;
   return (
-    <label className="adv-sequence-item">
+    <label className="adv-click-points-item">
       <input
         type="checkbox"
         className="adv-proc-checkbox"
@@ -234,26 +215,6 @@ function ProcessRow({
       ) : null}
       <span className="adv-proc-name">{proc.displayName}</span>
       <span className="adv-proc-exe">{proc.name}</span>
-      <div
-        className={`adv-proc-behavior-toggle ${isChecked ? "" : "disabled"}`}
-      >
-        <button
-          type="button"
-          className={`adv-toggle-btn adv-toggle-off ${entry?.behavior === "stop" ? "active" : ""}`}
-          disabled={!isChecked}
-          onClick={() => isChecked && onToggleBehavior(proc.name, "stop")}
-        >
-          Stop
-        </button>
-        <button
-          type="button"
-          className={`adv-toggle-btn adv-toggle-on ${entry?.behavior === "pause" ? "active" : ""}`}
-          disabled={!isChecked}
-          onClick={() => isChecked && onToggleBehavior(proc.name, "pause")}
-        >
-          Pause
-        </button>
-      </div>
     </label>
   );
 }
diff --git a/src/components/panels/zones/sections/StopZonesSection.tsx b/src/components/panels/zones/sections/StopZonesSection.tsx
new file mode 100644
index 00000000..c6f4271e
--- /dev/null
+++ b/src/components/panels/zones/sections/StopZonesSection.tsx
@@ -0,0 +1,392 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Settings, StopZone } from "../../../../store";
+import { createStopZoneId } from "../../../../settingsSchema";
+import { error } from "@tauri-apps/plugin-log";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import {
+  NumInput,
+  AdvDropdown,
+  CardDivider,
+  Disableable,
+  ToggleBtn,
+} from "../../advanced/sections/shared";
+
+interface Props {
+  settings: Settings;
+  update: (patch: Partial<Settings>) => void;
+  showInfo: boolean;
+}
+
+interface StopZonePickedPayload {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const ACTION_OPTIONS = [
+  { value: "stop", label: "Stop" },
+  { value: "pause", label: "Pause" },
+  { value: "start", label: "Start" },
+] as const;
+
+export default function StopZonesSection({ settings, update }: Props) {
+  const [drawingIndex, setDrawingIndex] = useState<number | null>(null);
+  const [showBottomFade, setShowBottomFade] = useState(false);
+  const updateRef = useRef(update);
+  const zonesRef = useRef<StopZone[]>(settings.stopZones ?? []);
+  const pendingIndexRef = useRef<number | null>(null);
+  const listViewportRef = useRef<HTMLDivElement | null>(null);
+
+  const zones = useMemo(() => settings.stopZones ?? [], [settings.stopZones]);
+
+  useEffect(() => {
+    updateRef.current = update;
+  }, [update]);
+
+  useEffect(() => {
+    zonesRef.current = zones;
+  }, [zones]);
+
+  useEffect(() => {
+    let disposed = false;
+    let unlistenPicked: (() => void) | null = null;
+    let unlistenEnded: (() => void) | null = null;
+
+    void listen<StopZonePickedPayload>("custom-stop-zone-picked", (event) => {
+      const idx = pendingIndexRef.current;
+      if (idx === null) return;
+      const current = [...(zonesRef.current ?? [])];
+      if (idx < 0 || idx >= current.length) return;
+      current[idx] = {
+        ...current[idx],
+        x: event.payload.x,
+        y: event.payload.y,
+        width: Math.max(1, event.payload.width),
+        height: Math.max(1, event.payload.height),
+      };
+      updateRef.current({ stopZones: current });
+      pendingIndexRef.current = null;
+      setDrawingIndex(null);
+    }).then((cleanup) => {
+      if (disposed) {
+        cleanup();
+      } else {
+        unlistenPicked = cleanup;
+      }
+    });
+
+    void listen("custom-stop-zone-pick-ended", () => {
+      pendingIndexRef.current = null;
+      setDrawingIndex(null);
+    }).then((cleanup) => {
+      if (disposed) {
+        cleanup();
+      } else {
+        unlistenEnded = cleanup;
+      }
+    });
+
+    return () => {
+      disposed = true;
+      unlistenPicked?.();
+      unlistenEnded?.();
+      void invoke("cancel_custom_stop_zone_pick");
+    };
+  }, []);
+
+  const startDraw = useCallback(async (index: number) => {
+    pendingIndexRef.current = index;
+    setDrawingIndex(index);
+    try {
+      await invoke("start_custom_stop_zone_pick");
+    } catch (err) {
+      pendingIndexRef.current = null;
+      setDrawingIndex(null);
+      error(
+        JSON.stringify({
+          source: "StopZonesSection.startDraw",
+          error: String(err),
+        }),
+      );
+    }
+  }, []);
+
+  const cancelDraw = useCallback(async () => {
+    pendingIndexRef.current = null;
+    setDrawingIndex(null);
+    try {
+      await invoke("cancel_custom_stop_zone_pick");
+    } catch (err) {
+      error(
+        JSON.stringify({
+          source: "StopZonesSection.cancelDraw",
+          error: String(err),
+        }),
+      );
+    }
+  }, []);
+
+  const updateBottomFade = useCallback(() => {
+    const viewport = listViewportRef.current;
+    if (!viewport) {
+      setShowBottomFade(false);
+      return;
+    }
+    const hasOverflow = viewport.scrollHeight - viewport.clientHeight > 6;
+    const hasMoreBelow =
+      hasOverflow &&
+      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight > 6;
+    setShowBottomFade(hasMoreBelow);
+  }, []);
+
+  useEffect(() => {
+    const viewport = listViewportRef.current;
+    if (!viewport) return;
+
+    const handleScroll = () => {
+      updateBottomFade();
+    };
+
+    viewport.addEventListener("scroll", handleScroll, { passive: true });
+    const resizeObserver = new ResizeObserver(() => {
+      updateBottomFade();
+    });
+    resizeObserver.observe(viewport);
+
+    return () => {
+      viewport.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+    };
+  }, [updateBottomFade]);
+
+  useEffect(() => {
+    const frame = window.requestAnimationFrame(() => {
+      updateBottomFade();
+    });
+    return () => window.cancelAnimationFrame(frame);
+  }, [zones, updateBottomFade]);
+
+  useEffect(() => {
+    if (drawingIndex === null) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      void cancelDraw();
+    };
+    window.addEventListener("keydown", handleKeyDown, true);
+    return () => window.removeEventListener("keydown", handleKeyDown, true);
+  }, [cancelDraw, drawingIndex]);
+
+  const updateZone = (index: number, patch: Partial<StopZone>) => {
+    const next = zones.map((z, i) => (i === index ? { ...z, ...patch } : z));
+    update({ stopZones: next });
+  };
+
+  const removeZone = (index: number) => {
+    const next = zones.filter((_, i) => i !== index);
+    update({ stopZones: next });
+  };
+
+  const addZone = () => {
+    const next = [
+      ...zones,
+      {
+        id: createStopZoneId(),
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        action: "stop" as const,
+      },
+    ];
+    update({ stopZones: next });
+  };
+
+  return (
+    <div className="adv-sectioncontainer adv-stop-zones-card">
+      <div className="adv-card-header">
+        <span className="adv-card-title">Custom Stop Zones</span>
+        <ToggleBtn
+          value={settings.stopZonesEnabled}
+          onChange={(v) => {
+            if (drawingIndex !== null && !v) {
+              void cancelDraw();
+            }
+            update({ stopZonesEnabled: v });
+          }}
+        />
+      </div>
+      <CardDivider />
+      <div className="adv-card-desc">
+        Draw zones on screen. The clicker stops, pauses, or starts whenever your
+        cursor moves inside a zone.
+      </div>
+      <Disableable enabled={settings.stopZonesEnabled}>
+        <div className="adv-stop-zone-body">
+          <div className="adv-stop-zone-controls">
+            {zones.length > 0 && (
+              <div style={{ display: "flex", justifyContent: "center" }}>
+                <button
+                  type="button"
+                  className="adv-secondary-btn"
+                  onClick={addZone}
+                >
+                  Add Zone
+                </button>
+              </div>
+            )}
+            <div className="adv-stop-zone-list-shell">
+              <div ref={listViewportRef} className="adv-stop-zone-list">
+                {zones.length === 0 ? (
+                  <div className="adv-zones-empty">
+                    <button
+                      type="button"
+                      className="adv-secondary-btn"
+                      style={{
+                        fontSize: "1rem",
+                        padding: "0.75rem 1.5rem",
+                        background: "var(--accent-soft)",
+                        borderColor: "var(--accent-ring)",
+                        color: "var(--text-primary)",
+                      }}
+                      onClick={addZone}
+                    >
+                      Add Zone
+                    </button>
+                    <div className="adv-zones-empty-icon">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <rect
+                          x="3"
+                          y="3"
+                          width="18"
+                          height="18"
+                          rx="2"
+                          strokeDasharray="4 3"
+                        />
+                        <line x1="3" y1="9" x2="21" y2="9" />
+                        <line x1="9" y1="3" x2="9" y2="21" />
+                      </svg>
+                    </div>
+                    <div className="adv-zones-empty-title">No zones yet</div>
+                    <div className="adv-zones-empty-hint">
+                      Click <strong>Add Zone</strong> above, then click{" "}
+                      <strong>Draw</strong> on a row to define its area on
+                      screen.
+                    </div>
+                  </div>
+                ) : (
+                  zones.map((zone, index) => (
+                    <div key={zone.id} className="adv-zone-row">
+                      <span className="adv-zone-index">{index + 1}</span>
+                      <label className="adv-numbox-sm adv-zone-coord">
+                        <span className="adv-unit">X</span>
+                        <NumInput
+                          hoverWheel={false}
+                          value={zone.x}
+                          onChange={(v) => updateZone(index, { x: v })}
+                          min={-99999}
+                          max={99999}
+                        />
+                      </label>
+                      <label className="adv-numbox-sm adv-zone-coord">
+                        <span className="adv-unit">Y</span>
+                        <NumInput
+                          hoverWheel={false}
+                          value={zone.y}
+                          onChange={(v) => updateZone(index, { y: v })}
+                          min={-99999}
+                          max={99999}
+                        />
+                      </label>
+                      <label className="adv-numbox-sm adv-zone-coord">
+                        <span className="adv-unit">W</span>
+                        <NumInput
+                          hoverWheel={false}
+                          value={zone.width}
+                          onChange={(v) => updateZone(index, { width: v })}
+                          min={1}
+                          max={99999}
+                        />
+                      </label>
+                      <label className="adv-numbox-sm adv-zone-coord">
+                        <span className="adv-unit">H</span>
+                        <NumInput
+                          hoverWheel={false}
+                          value={zone.height}
+                          onChange={(v) => updateZone(index, { height: v })}
+                          min={1}
+                          max={99999}
+                        />
+                      </label>
+                      <AdvDropdown
+                        hoverWheel={false}
+                        value={zone.action}
+                        options={ACTION_OPTIONS}
+                        onChange={(v) =>
+                          updateZone(index, {
+                            action: v as "stop" | "pause" | "start",
+                          })
+                        }
+                      />
+                      <button
+                        type="button"
+                        className="adv-zone-draw-btn"
+                        onClick={() =>
+                          void (drawingIndex === index
+                            ? cancelDraw()
+                            : startDraw(index))
+                        }
+                      >
+                        {drawingIndex === index ? "Cancel" : "Edit"}
+                      </button>
+                      <button
+                        type="button"
+                        className="adv-click-points-delete"
+                        onClick={() => removeZone(index)}
+                        aria-label="Delete"
+                        title="Delete"
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 12 12"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          aria-hidden="true"
+                        >
+                          <path
+                            d="M2.5 3.5H9.5M4.25 3.5V2.75C4.25 2.34 4.59 2 5 2H7C7.41 2 7.75 2.34 7.75 2.75V3.5M8.75 3.5V9C8.75 9.55 8.3 10 7.75 10H4.25C3.7 10 3.25 9.55 3.25 9V3.5M5 5.25V8.25M7 5.25V8.25"
+                            stroke="currentColor"
+                            strokeWidth="1.1"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  ))
+                )}
+              </div>
+              {showBottomFade ? (
+                <div className="adv-stop-zone-list-fade" />
+              ) : null}
+            </div>
+          </div>
+        </div>
+      </Disableable>
+    </div>
+  );
+}
diff --git a/src/components/sharedCadence.ts b/src/components/sharedCadence.ts
new file mode 100644
index 00000000..0fb20a8d
--- /dev/null
+++ b/src/components/sharedCadence.ts
@@ -0,0 +1,156 @@
+import type { ChangeEvent, FocusEvent, WheelEvent } from "react";
+import { normalizeIntegerRaw } from "../numberInput";
+import {
+  convertDurationToRate,
+  convertRateToDuration,
+  overflowDurationField,
+} from "../cadence";
+import type { CadenceDurationFields } from "../cadence";
+import type { RateInputMode, Settings } from "../store";
+
+export const INTERVAL_OPTIONS = [
+  { value: "s", label: "Second" },
+  { value: "m", label: "Minute" },
+  { value: "h", label: "Hour" },
+  { value: "d", label: "Day" },
+] as const;
+
+export const SIMPLE_RATE_INPUT_MODE_OPTIONS = [
+  { value: "rate", label: "Rate" },
+  { value: "duration", label: "Interval" },
+] as const;
+
+export function parseIntegerRaw(raw: string) {
+  const normalized = normalizeIntegerRaw(raw);
+  return normalized === "" || normalized === "-" ? 0 : Number(normalized);
+}
+
+export function clamp(value: number, min: number, max?: number) {
+  const minClamped = Math.max(min, value);
+  return max === undefined ? minClamped : Math.min(max, minClamped);
+}
+
+export function dynamicChWidth(value: number, min = 1, max = 3) {
+  return `${clamp(String(Math.abs(value)).length, min, max)}ch`;
+}
+
+function wheelStepSize(event: WheelEvent<HTMLInputElement>): number {
+  let step = 1;
+  if (event.shiftKey && event.ctrlKey) step = 100;
+  else if (event.ctrlKey) step = 25;
+  else if (event.shiftKey) step = 5;
+  return step;
+}
+
+function wheelDelta(event: WheelEvent<HTMLInputElement>): number {
+  return event.deltaY < 0 ? 1 : -1;
+}
+
+export function handleWheelStep(
+  event: WheelEvent<HTMLInputElement>,
+  current: number,
+  min: number,
+  max: number | undefined,
+  apply: (next: number) => void,
+) {
+  event.preventDefault();
+  event.stopPropagation();
+  event.currentTarget.blur();
+  apply(clamp(current + wheelDelta(event) * wheelStepSize(event), min, max));
+}
+
+export function handleNumberChange(
+  event: ChangeEvent<HTMLInputElement>,
+  apply: (next: number) => void,
+) {
+  const normalized = normalizeIntegerRaw(event.target.value);
+  if (normalized !== event.target.value) {
+    event.target.value = normalized;
+  }
+  apply(parseIntegerRaw(normalized));
+}
+
+export function switchCadenceMode(
+  mode: RateInputMode,
+  settings: Settings,
+  update: (patch: Partial<Settings>) => void,
+) {
+  if (mode === settings.rateInputMode) return;
+
+  if (mode === "rate") {
+    const converted = convertDurationToRate(settings);
+    update({
+      rateInputMode: mode,
+      ...(converted ?? {}),
+    });
+    return;
+  }
+
+  const converted = convertRateToDuration(settings);
+  update({
+    rateInputMode: mode,
+    ...(converted ?? {}),
+  });
+}
+
+export function handleNumberBlur(
+  event: FocusEvent<HTMLInputElement>,
+  min: number,
+  max: number | undefined,
+  apply: (next: number) => void,
+) {
+  const normalized = normalizeIntegerRaw(event.target.value);
+  if (normalized !== event.target.value) {
+    event.target.value = normalized;
+  }
+  apply(clamp(parseIntegerRaw(normalized), min, max));
+}
+
+export function handleDurationBlur(
+  event: FocusEvent<HTMLInputElement>,
+  field: keyof CadenceDurationFields,
+  min: number,
+  max: number | undefined,
+  current: CadenceDurationFields,
+  apply: (patch: Partial<CadenceDurationFields>) => void,
+) {
+  const normalized = normalizeIntegerRaw(event.target.value);
+  if (normalized !== event.target.value) {
+    event.target.value = normalized;
+  }
+  const value = parseIntegerRaw(normalized);
+
+  if (max !== undefined && value > max && field !== "durationHours") {
+    const overflowed = overflowDurationField(field, value, current);
+    if (overflowed) {
+      apply(overflowed);
+      return;
+    }
+  }
+
+  apply({ [field]: clamp(value, min, max) });
+}
+
+export function handleDurationWheelStep(
+  event: WheelEvent<HTMLInputElement>,
+  field: keyof CadenceDurationFields,
+  current: CadenceDurationFields,
+  min: number,
+  max: number | undefined,
+  apply: (patch: Partial<CadenceDurationFields>) => void,
+) {
+  event.preventDefault();
+  event.stopPropagation();
+  event.currentTarget.blur();
+  const next = current[field] + wheelDelta(event) * wheelStepSize(event);
+
+  if (max !== undefined && next > max && field !== "durationHours") {
+    const overflowed = overflowDurationField(field, next, current);
+    if (overflowed) {
+      apply(overflowed);
+      return;
+    }
+  }
+
+  apply({ [field]: clamp(next, min, max) });
+}
diff --git a/src/index.css b/src/index.css
index 33242910..7589be4f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,12 +1,12 @@
 @font-face {
-  font-family: "DMSans";
-  src: url("/fonts/DMSans.ttf") format("truetype");
-  font-weight: 100 900;
+  font-family: "RobotoFlex";
+  src: url("/fonts/RobotoFlex.ttf") format("truetype");
+  font-weight: 100 1000;
   font-style: normal;
 }
 
 :root {
-  --font-family-base: "DMSans", sans-serif;
+  --font-family-base: "RobotoFlex", sans-serif;
 
   --bg-base: rgb(12, 12, 14);
   --bg-surface: rgb(26, 26, 26);
@@ -22,18 +22,18 @@
   --text-muted: rgba(251, 254, 254, 0.75);
   --text-dim: rgba(251, 254, 254, 0.5);
 
-  --accent-green: rgba(25, 194, 51, 0.75);
-  --accent-green-strong: rgba(25, 194, 51, 0.92);
-  --accent-green-soft: rgba(25, 194, 51, 0.15);
-  --accent-green-ring: rgba(25, 194, 51, 0.35);
-  --accent-green-glow-1: rgba(25, 194, 51, 0.2);
-  --accent-green-glow-2: rgba(25, 194, 51, 0.12);
+  --accent: rgba(25, 194, 51, 0.8);
+  --accent-strong: rgba(25, 194, 51, 0.92);
+  --accent-soft: rgba(25, 194, 51, 0.5);
+  --accent-ring: rgba(25, 194, 51, 0.35);
+  --accent-glow-1: rgba(25, 194, 51, 0.2);
+  --accent-glow-2: rgba(25, 194, 51, 0.12);
   --accent-yellow: rgba(254, 188, 47, 0.75);
   --accent-red: rgba(255, 117, 107, 0.75);
 
-  --radius-sm: 0.375rem;
-  --radius-md: 0.625rem;
-  --radius-lg: 0.875rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 1rem;
 
   --container-shadow: 0 2px 0.5rem rgba(0, 0, 0, 0.3);
 
@@ -41,6 +41,10 @@
   --font-weight-md: 600;
   --font-weight-hv: 800;
 
+  --font-size-medium: 0.75rem;
+  --font-size-normal: 1rem;
+  --font-size-large: 1.25rem;
+
   --divider-color: rgba(255, 255, 255, 0.25);
 
   --update-banner-bg: rgb(88, 70, 29);
@@ -65,12 +69,12 @@
   --text-muted: rgba(0, 0, 0, 0.85);
   --text-dim: rgba(0, 0, 0, 0.65);
 
-  --accent-green: rgba(18, 135, 35, 0.9);
-  --accent-green-strong: rgba(18, 135, 35, 1);
-  --accent-green-soft: rgba(18, 135, 35, 0.2);
-  --accent-green-ring: rgba(18, 135, 35, 0.4);
-  --accent-green-glow-1: rgba(18, 135, 35, 0.16);
-  --accent-green-glow-2: rgba(18, 135, 35, 0.08);
+  --accent: rgba(18, 135, 35, 0.9);
+  --accent-strong: rgba(18, 135, 35, 1);
+  --accent-soft: rgba(18, 135, 35, 0.5);
+  --accent-ring: rgba(18, 135, 35, 0.4);
+  --accent-glow-1: rgba(18, 135, 35, 0.16);
+  --accent-glow-2: rgba(18, 135, 35, 0.08);
   --accent-yellow: rgba(178, 122, 1, 0.9);
   --accent-red: rgba(230, 15, 0, 0.9);
 
@@ -102,17 +106,18 @@ body {
   font-size: 1rem;
   overflow: hidden;
   user-select: none;
+  font-variant-numeric: tabular-nums;
 }
 
 .app-root {
-  border: 1px var(--border-subtle) solid;
+  border-radius: 8px;
+  border: 2px var(--border-subtle) solid;
   background: var(--bg-base);
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  border-radius: var(--radius-md);
   transition:
     height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
     width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -136,6 +141,11 @@ body {
   transition: opacity 0.2s ease;
 }
 
+.app-root[data-minimized]::before {
+  background-image: none !important;
+  opacity: 0 !important;
+}
+
 .app-root > * {
   position: relative;
   z-index: 1;
@@ -143,16 +153,67 @@ body {
 
 .panel-area {
   flex: 1;
-  padding: 1.25rem 1.25rem 0.75rem 1.25rem;
+  padding: 1rem;
   display: flex;
   flex-direction: column;
-  overflow: auto;
+  overflow: hidden;
   min-height: 0;
   min-width: 0;
   contain: layout style paint;
   backdrop-filter: blur(var(--bg-panel-blur, 0px));
 }
 
+.app-root[data-tab="simple"] .panel-area {
+  animation: panel-enable-scroll-simple 0.01s 350ms forwards;
+}
+
+.app-root[data-tab="advanced"] .panel-area {
+  animation: panel-enable-scroll-advanced 0.01s 350ms forwards;
+}
+
+.app-root[data-tab="zones"] .panel-area {
+  animation: panel-enable-scroll-zones 0.01s 350ms forwards;
+}
+
+.app-root[data-tab="settings"] .panel-area {
+  animation: panel-enable-scroll-settings 0.01s 350ms forwards;
+}
+
+.app-root[data-tab="click-points"] .panel-area {
+  animation: panel-enable-scroll-click-points 0.01s 350ms forwards;
+}
+
+@keyframes panel-enable-scroll-simple {
+  to {
+    overflow: auto;
+  }
+}
+
+@keyframes panel-enable-scroll-advanced {
+  to {
+    overflow: auto;
+  }
+}
+
+@keyframes panel-enable-scroll-zones {
+  to {
+    overflow: auto;
+  }
+}
+
+@keyframes panel-enable-scroll-settings {
+  to {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+}
+
+@keyframes panel-enable-scroll-click-points {
+  to {
+    overflow: auto;
+  }
+}
+
 .settings-card {
   backdrop-filter: blur(var(--bg-panel-blur, 0px));
 }
@@ -219,7 +280,7 @@ body {
 }
 
 .hk-listening .hk-button {
-  color: var(--accent-green-strong);
+  color: var(--accent-strong);
   animation: hk-pulse 1.8s ease-in-out infinite;
 }
 
@@ -230,11 +291,11 @@ body {
 @keyframes hk-pulse {
   0%,
   100% {
-    text-shadow: 0 0 0 var(--accent-green-glow-1);
+    text-shadow: 0 0 0 var(--accent-glow-1);
   }
   50% {
     text-shadow:
-      0 0 6px var(--accent-green-glow-2),
-      0 0 12px var(--accent-green-glow-1);
+      0 0 6px var(--accent-glow-2),
+      0 0 12px var(--accent-glow-1);
   }
 }
diff --git a/src/settingsSchema.ts b/src/settingsSchema.ts
index 254c757a..6277e398 100644
--- a/src/settingsSchema.ts
+++ b/src/settingsSchema.ts
@@ -3,30 +3,39 @@ export type MouseButton = "Left" | "Middle" | "Right";
 export type InputType = "mouse" | "keyboard";
 export type KeyboardKeyCase = "lower" | "upper";
 export type ClickMode = "Toggle" | "Hold";
+export type DutyCycleMode = "Click" | "Hold";
 export type TimeLimitUnit = "s" | "m" | "h";
-export type SavedPanel = "simple" | "advanced" | "zones";
+export type SavedPanel = "simple" | "advanced" | "zones" | "click-points";
 export type Theme = "dark" | "light";
+export type IconTheme = "auto" | "dark" | "light";
+export type IconColor = "theme" | "default";
 export type PresetId = string;
 export type RateInputMode = "rate" | "duration";
 export type ProcessListMode = "whitelist" | "blacklist";
-export type ProcessListBehavior = "pause" | "stop";
 
 export interface ProcessListEntry {
   name: string;
-  behavior: ProcessListBehavior;
   enabled: boolean;
 }
-export type AdvancedSequenceLayout = "wide" | "tall";
 
-export interface SequencePoint {
+export interface ClickPoint {
   id: string;
   x: number;
   y: number;
   clicks: number;
+  radius: number;
+}
+
+export interface StopZone {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  action: "stop" | "pause" | "start";
 }
 
 export const DEFAULT_ACCENT_COLOR = "#22c55e";
-export const MAX_PRESETS = 20;
 export const PRESET_NAME_MAX_LENGTH = 40;
 export const DEFAULT_MAX_CLICK_SPEED = 500;
 export const EXTENDED_MAX_CLICK_SPEED = 1000;
@@ -42,6 +51,10 @@ export const MODE_OPTIONS = [
   "Toggle",
   "Hold",
 ] as const satisfies ReadonlyArray<ClickMode>;
+export const DUTY_CYCLE_MODE_OPTIONS = [
+  "Click",
+  "Hold",
+] as const satisfies ReadonlyArray<DutyCycleMode>;
 export const MOUSE_BUTTON_OPTIONS = [
   "Left",
   "Middle",
@@ -83,15 +96,23 @@ type FieldDef<T> = {
       | "behavior"
       | "startup"
       | "appearance"
+      | "keybinds"
       | "presets";
     control: UiControl;
   };
 };
 
-function createSequencePointId(): string {
+function createClickPointId(): string {
+  return (
+    globalThis.crypto?.randomUUID?.() ??
+    `cp-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+  );
+}
+
+export function createStopZoneId(): string {
   return (
     globalThis.crypto?.randomUUID?.() ??
-    `seq-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
+    `sz-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
   );
 }
 
@@ -126,6 +147,10 @@ const PRESET_FIELDS = {
     default: "Toggle" as ClickMode,
     ui: { section: "core", control: "select" },
   },
+  dutyCycleMode: {
+    default: "Click" as DutyCycleMode,
+    ui: { section: "core", control: "select" },
+  },
   dutyCycleEnabled: {
     default: true,
     ui: { section: "limits", control: "toggle" },
@@ -135,11 +160,11 @@ const PRESET_FIELDS = {
     limit: { min: 0, max: 100 },
     ui: { section: "limits", control: "number" },
   },
-  speedVariationEnabled: {
+  speedRandomizationEnabled: {
     default: true,
     ui: { section: "limits", control: "toggle" },
   },
-  speedVariation: {
+  speedRandomization: {
     default: 35,
     limit: { min: 0, max: 200 },
     ui: { section: "limits", control: "number" },
@@ -154,7 +179,7 @@ const PRESET_FIELDS = {
   },
   clickLimit: {
     default: 1000,
-    limit: { min: 1, max: 10_000_000 },
+    limit: { min: 1, max: 100_000_000 },
     ui: { section: "limits", control: "number" },
   },
   timeLimitEnabled: {
@@ -218,12 +243,20 @@ const PRESET_FIELDS = {
     limit: { min: 0, max: 10000 },
     ui: { section: "failsafe", control: "number" },
   },
-  sequenceEnabled: {
+  clickPointsEnabled: {
+    default: false,
+    ui: { section: "core", control: "toggle" },
+  },
+  stopZonesEnabled: {
+    default: false,
+    ui: { section: "failsafe", control: "toggle" },
+  },
+  stopWhenComplete: {
     default: false,
     ui: { section: "core", control: "toggle" },
   },
-  sequencePoints: {
-    default: [] as SequencePoint[],
+  clickPoints: {
+    default: [] as ClickPoint[],
     ui: { section: "core", control: "custom" },
   },
   processListEnabled: {
@@ -257,7 +290,7 @@ const SETTINGS_ONLY_FIELDS = {
   },
   durationMinutes: {
     default: 0,
-    limit: { min: 0 },
+    limit: { min: 0, max: 59 },
     ui: { section: "limits", control: "number" },
   },
   durationSeconds: {
@@ -270,29 +303,23 @@ const SETTINGS_ONLY_FIELDS = {
     limit: { min: 0, max: 999 },
     ui: { section: "limits", control: "number" },
   },
-  customStopZoneEnabled: {
-    default: false,
-    ui: { section: "failsafe", control: "toggle" },
-  },
-  customStopZoneX: {
-    default: 0,
-    limit: { min: 0 },
-    ui: { section: "failsafe", control: "number" },
+  savedClickSpeed: {
+    default: 25,
+    limit: { min: 1 },
+    ui: { section: "limits", control: "number" },
   },
-  customStopZoneY: {
-    default: 0,
-    limit: { min: 0 },
-    ui: { section: "failsafe", control: "number" },
+  savedClickInterval: {
+    default: "s" as ClickInterval,
+    ui: { section: "limits", control: "select" },
   },
-  customStopZoneWidth: {
-    default: 100,
-    limit: { min: 1 },
-    ui: { section: "failsafe", control: "number" },
+  savedDutyCycle: {
+    default: 45,
+    limit: { min: 0, max: 100 },
+    ui: { section: "limits", control: "number" },
   },
-  customStopZoneHeight: {
-    default: 100,
-    limit: { min: 1 },
-    ui: { section: "failsafe", control: "number" },
+  stopZones: {
+    default: [] as StopZone[],
+    ui: { section: "failsafe", control: "custom" },
   },
   disableScreenshots: {
     default: false,
@@ -330,18 +357,31 @@ const SETTINGS_ONLY_FIELDS = {
     default: false,
     ui: { section: "startup", control: "toggle" },
   },
+  rememberWindowPosition: {
+    default: true,
+    ui: { section: "startup", control: "toggle" },
+  },
+  windowPosition: {
+    default: { x: null, y: null } as { x: number | null; y: number | null },
+  },
   theme: {
     default: "dark" as Theme,
     ui: { section: "appearance", control: "select" },
   },
-  advancedSequenceLayout: {
-    default: "wide" as AdvancedSequenceLayout,
-    ui: { section: "appearance", control: "select" },
-  },
   alwaysOnTop: {
     default: false,
     ui: { section: "behavior", control: "toggle" },
   },
+  newClickPointClicks: {
+    default: 1,
+    limit: { min: 1, max: 999999 },
+    ui: { section: "behavior", control: "number" },
+  },
+  newClickPointRadius: {
+    default: 0,
+    limit: { min: 0, max: 9999 },
+    ui: { section: "behavior", control: "number" },
+  },
   accentColor: {
     default: DEFAULT_ACCENT_COLOR,
     ui: { section: "appearance", control: "color" },
@@ -355,6 +395,11 @@ const SETTINGS_ONLY_FIELDS = {
     limit: { min: 0, max: 100 },
     ui: { section: "appearance", control: "number" },
   },
+  windowOpacity: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
   panelOpacity: {
     default: 100,
     limit: { min: 0, max: 100 },
@@ -373,6 +418,166 @@ const SETTINGS_ONLY_FIELDS = {
     default: null as PresetId | null,
     ui: { section: "presets", control: "custom" },
   },
+  keybindSimple: {
+    default: "Digit1",
+    ui: { section: "keybinds", control: "key" },
+  },
+  keybindAdvanced: {
+    default: "Digit2",
+    ui: { section: "keybinds", control: "key" },
+  },
+  keybindZones: {
+    default: "Digit3",
+    ui: { section: "keybinds", control: "key" },
+  },
+  keybindClickPoints: {
+    default: "Digit4",
+    ui: { section: "keybinds", control: "key" },
+  },
+  keybindSettings: {
+    default: "Digit5",
+    ui: { section: "keybinds", control: "key" },
+  },
+  perPageAppearance: {
+    default: false,
+    ui: { section: "appearance", control: "toggle" },
+  },
+  backgroundImageSimple: {
+    default: "",
+    ui: { section: "appearance", control: "custom" },
+  },
+  backgroundOpacitySimple: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  windowOpacitySimple: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelOpacitySimple: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelBlurSimple: {
+    default: 0,
+    limit: { min: 0, max: 20 },
+    ui: { section: "appearance", control: "number" },
+  },
+  backgroundImageAdvanced: {
+    default: "",
+    ui: { section: "appearance", control: "custom" },
+  },
+  backgroundOpacityAdvanced: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  windowOpacityAdvanced: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelOpacityAdvanced: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelBlurAdvanced: {
+    default: 0,
+    limit: { min: 0, max: 20 },
+    ui: { section: "appearance", control: "number" },
+  },
+  backgroundImageZones: {
+    default: "",
+    ui: { section: "appearance", control: "custom" },
+  },
+  backgroundOpacityZones: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  windowOpacityZones: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelOpacityZones: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelBlurZones: {
+    default: 0,
+    limit: { min: 0, max: 20 },
+    ui: { section: "appearance", control: "number" },
+  },
+  backgroundImageClickPoints: {
+    default: "",
+    ui: { section: "appearance", control: "custom" },
+  },
+  backgroundOpacityClickPoints: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  windowOpacityClickPoints: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelOpacityClickPoints: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelBlurClickPoints: {
+    default: 0,
+    limit: { min: 0, max: 20 },
+    ui: { section: "appearance", control: "number" },
+  },
+  backgroundImageSettings: {
+    default: "",
+    ui: { section: "appearance", control: "custom" },
+  },
+  backgroundOpacitySettings: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  windowOpacitySettings: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelOpacitySettings: {
+    default: 100,
+    limit: { min: 0, max: 100 },
+    ui: { section: "appearance", control: "number" },
+  },
+  panelBlurSettings: {
+    default: 0,
+    limit: { min: 0, max: 20 },
+    ui: { section: "appearance", control: "number" },
+  },
+  taskbarIconEnabled: {
+    default: true,
+    ui: { section: "appearance", control: "toggle" },
+  },
+  taskbarIconTheme: {
+    default: "auto" as IconTheme,
+    ui: { section: "appearance", control: "select" },
+  },
+  taskbarIconColor: {
+    default: "theme" as IconColor,
+    ui: { section: "appearance", control: "select" },
+  },
+  statusBarEnabled: {
+    default: true,
+    ui: { section: "appearance", control: "toggle" },
+  },
 } satisfies Record<string, FieldDef<unknown>>;
 
 export const SETTINGS_FIELD_DEFS = {
@@ -434,6 +639,138 @@ export type Settings = PresetFieldValues &
     version: string;
   };
 
+export const FACTORY_PRESETS: PresetDefinition[] = [
+  {
+    id: "factory-standard",
+    name: "Standard Clicking",
+    createdAt: "2025-01-01T00:00:00.000Z",
+    updatedAt: "2025-01-01T00:00:00.000Z",
+    settings: {
+      clickSpeed: 25,
+      clickInterval: "s",
+      inputType: "mouse",
+      keyboardKey: "",
+      keyboardKeyCase: "lower",
+      mouseButton: "Left",
+      mode: "Toggle",
+      dutyCycleMode: "Click",
+      dutyCycleEnabled: true,
+      dutyCycle: 45,
+      speedRandomizationEnabled: true,
+      speedRandomization: 35,
+      doubleClickEnabled: false,
+      clickLimitEnabled: false,
+      clickLimit: 1000,
+      timeLimitEnabled: false,
+      timeLimit: 60,
+      timeLimitUnit: "s",
+      cornerStopEnabled: true,
+      cornerStopTL: 50,
+      cornerStopTR: 50,
+      cornerStopBL: 50,
+      cornerStopBR: 50,
+      edgeStopEnabled: true,
+      edgeStopTop: 40,
+      edgeStopBottom: 40,
+      edgeStopLeft: 40,
+      edgeStopRight: 40,
+      clickPointsEnabled: false,
+      stopZonesEnabled: false,
+      stopWhenComplete: false,
+      clickPoints: [],
+      processListEnabled: false,
+      processListMode: "whitelist",
+      processListEntries: [],
+    },
+  },
+  {
+    id: "factory-rapid",
+    name: "Rapid Fire",
+    createdAt: "2025-01-01T00:00:00.000Z",
+    updatedAt: "2025-01-01T00:00:00.000Z",
+    settings: {
+      clickSpeed: 100,
+      clickInterval: "s",
+      inputType: "mouse",
+      keyboardKey: "",
+      keyboardKeyCase: "lower",
+      mouseButton: "Left",
+      mode: "Toggle",
+      dutyCycleMode: "Click",
+      dutyCycleEnabled: true,
+      dutyCycle: 20,
+      speedRandomizationEnabled: true,
+      speedRandomization: 15,
+      doubleClickEnabled: false,
+      clickLimitEnabled: true,
+      clickLimit: 5000,
+      timeLimitEnabled: false,
+      timeLimit: 60,
+      timeLimitUnit: "s",
+      cornerStopEnabled: true,
+      cornerStopTL: 50,
+      cornerStopTR: 50,
+      cornerStopBL: 50,
+      cornerStopBR: 50,
+      edgeStopEnabled: true,
+      edgeStopTop: 40,
+      edgeStopBottom: 40,
+      edgeStopLeft: 40,
+      edgeStopRight: 40,
+      clickPointsEnabled: false,
+      stopZonesEnabled: false,
+      stopWhenComplete: false,
+      clickPoints: [],
+      processListEnabled: false,
+      processListMode: "whitelist",
+      processListEntries: [],
+    },
+  },
+  {
+    id: "factory-precision",
+    name: "Precision Mode",
+    createdAt: "2025-01-01T00:00:00.000Z",
+    updatedAt: "2025-01-01T00:00:00.000Z",
+    settings: {
+      clickSpeed: 10,
+      clickInterval: "s",
+      inputType: "mouse",
+      keyboardKey: "",
+      keyboardKeyCase: "lower",
+      mouseButton: "Left",
+      mode: "Toggle",
+      dutyCycleMode: "Click",
+      dutyCycleEnabled: true,
+      dutyCycle: 60,
+      speedRandomizationEnabled: true,
+      speedRandomization: 10,
+      doubleClickEnabled: false,
+      clickLimitEnabled: false,
+      clickLimit: 1000,
+      timeLimitEnabled: false,
+      timeLimit: 60,
+      timeLimitUnit: "s",
+      cornerStopEnabled: true,
+      cornerStopTL: 50,
+      cornerStopTR: 50,
+      cornerStopBL: 50,
+      cornerStopBR: 50,
+      edgeStopEnabled: true,
+      edgeStopTop: 40,
+      edgeStopBottom: 40,
+      edgeStopLeft: 40,
+      edgeStopRight: 40,
+      clickPointsEnabled: false,
+      stopZonesEnabled: false,
+      stopWhenComplete: false,
+      clickPoints: [],
+      processListEnabled: false,
+      processListMode: "whitelist",
+      processListEntries: [],
+    },
+  },
+];
+
 export const PRESET_SNAPSHOT_KEYS = Object.keys(PRESET_FIELDS) as ReadonlyArray<
   keyof PresetSnapshot
 >;
@@ -446,9 +783,8 @@ const FIELD_LIMITS = {
 export const SETTINGS_LIMITS = {
   ...FIELD_LIMITS,
   stopBoundary: PRESET_FIELDS.cornerStopTL.limit,
-  position: SETTINGS_ONLY_FIELDS.customStopZoneX.limit,
-  stopZoneDimension: SETTINGS_ONLY_FIELDS.customStopZoneWidth.limit,
-  sequencePointClicks: { min: 1, max: 100000 },
+  clickPointClicks: { min: 1, max: 999999 },
+  clickPointRadius: { min: 0, max: 9999 },
 };
 
 export const SETTINGS_UI_SCHEMA = [
@@ -465,11 +801,11 @@ export const SETTINGS_UI_SCHEMA = [
   },
   {
     id: "startup",
-    fields: ["minimizeToTray"],
+    fields: ["minimizeToTray", "rememberWindowPosition"],
   },
   {
     id: "appearance",
-    fields: ["theme", "advancedSequenceLayout", "accentColor"],
+    fields: ["theme", "accentColor"],
   },
   {
     id: "presets",
@@ -500,6 +836,12 @@ export function getMaxClickSpeed(
     : DEFAULT_MAX_CLICK_SPEED;
 }
 
+export function getMinIntervalMs(
+  extendedClickSpeedLimit: boolean | null | undefined,
+) {
+  return Math.ceil(1000 / getMaxClickSpeed(extendedClickSpeedLimit));
+}
+
 export function sanitizeBoolean(value: unknown, fallback: boolean): boolean {
   return typeof value === "boolean" ? value : fallback;
 }
@@ -576,20 +918,21 @@ function sanitizeRateInputMode(value: unknown, fallback: RateInputMode) {
 }
 
 function sanitizeSavedPanel(value: unknown, fallback: SavedPanel) {
-  return sanitizeEnum(value, fallback, ["simple", "advanced", "zones"]);
+  if (value === "sequence") {
+    return "click-points" as SavedPanel;
+  }
+  return sanitizeEnum(value, fallback, [
+    "simple",
+    "advanced",
+    "zones",
+    "click-points",
+  ]);
 }
 
 function sanitizeTheme(value: unknown, fallback: Theme) {
   return sanitizeEnum(value, fallback, THEME_OPTIONS);
 }
 
-function sanitizeAdvancedSequenceLayout(
-  value: unknown,
-  fallback: AdvancedSequenceLayout,
-) {
-  return sanitizeEnum(value, fallback, ["wide", "tall"]);
-}
-
 function sanitizeProcessListEntries(value: unknown): ProcessListEntry[] {
   if (!Array.isArray(value)) return [];
   return value
@@ -597,7 +940,7 @@ function sanitizeProcessListEntries(value: unknown): ProcessListEntry[] {
       if (typeof item === "string") {
         const name = item.trim().toLowerCase();
         if (!name) return null;
-        return { name, behavior: "stop", enabled: true };
+        return { name, enabled: true };
       }
       if (!item || typeof item !== "object") return null;
       const candidate = item as Partial<ProcessListEntry>;
@@ -606,26 +949,24 @@ function sanitizeProcessListEntries(value: unknown): ProcessListEntry[] {
           ? candidate.name.trim().toLowerCase()
           : "";
       if (!name) return null;
-      const behavior: ProcessListBehavior =
-        candidate.behavior === "pause" ? "pause" : "stop";
       const enabled =
         typeof candidate.enabled === "boolean" ? candidate.enabled : true;
-      return { name, behavior, enabled };
+      return { name, enabled };
     })
     .filter((entry): entry is ProcessListEntry => entry !== null);
 }
 
-function sanitizeSequencePoints(value: unknown): SequencePoint[] {
+function sanitizeClickPoints(value: unknown): ClickPoint[] {
   if (!Array.isArray(value)) return [];
 
   return value
     .map((point) => {
       if (!point || typeof point !== "object") return null;
-      const candidate = point as Partial<SequencePoint>;
+      const candidate = point as Partial<ClickPoint>;
       const id =
         typeof candidate.id === "string" && candidate.id.trim()
           ? candidate.id.trim()
-          : createSequencePointId();
+          : createClickPointId();
       const x =
         typeof candidate.x === "number" && Number.isFinite(candidate.x)
           ? Math.trunc(candidate.x)
@@ -639,6 +980,11 @@ function sanitizeSequencePoints(value: unknown): SequencePoint[] {
         Number.isFinite(candidate.clicks)
           ? Math.trunc(candidate.clicks)
           : 1;
+      const radius =
+        typeof candidate.radius === "number" &&
+        Number.isFinite(candidate.radius)
+          ? Math.trunc(candidate.radius)
+          : 0;
 
       if (x === null || y === null) return null;
 
@@ -649,12 +995,58 @@ function sanitizeSequencePoints(value: unknown): SequencePoint[] {
         clicks: clampNumber(
           clicks,
           1,
-          SETTINGS_LIMITS.sequencePointClicks.min,
-          SETTINGS_LIMITS.sequencePointClicks.max,
+          SETTINGS_LIMITS.clickPointClicks.min,
+          SETTINGS_LIMITS.clickPointClicks.max,
+        ),
+        radius: clampNumber(
+          radius,
+          0,
+          SETTINGS_LIMITS.clickPointRadius.min,
+          SETTINGS_LIMITS.clickPointRadius.max,
         ),
       };
     })
-    .filter((point): point is SequencePoint => point !== null);
+    .filter((point): point is ClickPoint => point !== null);
+}
+
+function sanitizeStopZones(value: unknown): StopZone[] {
+  if (!Array.isArray(value)) return [];
+
+  return value
+    .map((zone) => {
+      if (!zone || typeof zone !== "object") return null;
+      const candidate = zone as Partial<StopZone>;
+      const id =
+        typeof candidate.id === "string" && candidate.id.trim()
+          ? candidate.id.trim()
+          : createStopZoneId();
+      const x =
+        typeof candidate.x === "number" && Number.isFinite(candidate.x)
+          ? Math.trunc(candidate.x)
+          : 0;
+      const y =
+        typeof candidate.y === "number" && Number.isFinite(candidate.y)
+          ? Math.trunc(candidate.y)
+          : 0;
+      const width =
+        typeof candidate.width === "number" && Number.isFinite(candidate.width)
+          ? Math.max(1, Math.trunc(candidate.width))
+          : 100;
+      const height =
+        typeof candidate.height === "number" &&
+        Number.isFinite(candidate.height)
+          ? Math.max(1, Math.trunc(candidate.height))
+          : 100;
+      const action =
+        candidate.action === "stop" ||
+        candidate.action === "pause" ||
+        candidate.action === "start"
+          ? candidate.action
+          : ("stop" as const);
+
+      return { id, x, y, width, height, action };
+    })
+    .filter((zone): zone is StopZone => zone !== null);
 }
 
 export function createDefaultSettings(version: string): Settings {
@@ -703,7 +1095,27 @@ export function createPresetDefinition(
   };
 }
 
-function sanitizePresetSnapshot(
+export function getPresetSummary(snapshot: PresetSnapshot): string {
+  const parts: string[] = [];
+
+  const speedStr = `${snapshot.clickSpeed}/${snapshot.clickInterval}`;
+  const inputStr =
+    snapshot.inputType === "keyboard" && snapshot.keyboardKey
+      ? `${snapshot.keyboardKey}`
+      : snapshot.mouseButton;
+  parts.push(`${speedStr}  ${inputStr}`);
+
+  if (snapshot.clickLimitEnabled)
+    parts.push(`Limit:${snapshot.clickLimit.toLocaleString()}`);
+  if (snapshot.timeLimitEnabled)
+    parts.push(`Time:${snapshot.timeLimit}${snapshot.timeLimitUnit}`);
+  if (snapshot.clickPoints.length > 0)
+    parts.push(`${snapshot.clickPoints.length} pts`);
+
+  return parts.join(" | ");
+}
+
+export function sanitizePresetSnapshot(
   input: unknown,
   defaults: PresetSnapshot,
 ): PresetSnapshot {
@@ -730,12 +1142,23 @@ function sanitizePresetSnapshot(
     MOUSE_BUTTON_OPTIONS,
   );
   snapshot.mode = sanitizeEnum(saved.mode, defaults.mode, MODE_OPTIONS);
+  snapshot.dutyCycleMode = sanitizeEnum(
+    saved.dutyCycleMode,
+    defaults.dutyCycleMode,
+    DUTY_CYCLE_MODE_OPTIONS,
+  );
   snapshot.timeLimitUnit = sanitizeEnum(
     saved.timeLimitUnit,
     defaults.timeLimitUnit,
     TIME_LIMIT_UNIT_OPTIONS,
   );
-  snapshot.sequencePoints = sanitizeSequencePoints(saved.sequencePoints);
+  snapshot.clickPoints = sanitizeClickPoints(
+    saved.clickPoints ?? (saved.sequencePoints as ClickPoint[] | undefined),
+  );
+  if (snapshot.clickPointsEnabled === undefined) {
+    snapshot.clickPointsEnabled =
+      (saved.sequenceEnabled as boolean | undefined) ?? false;
+  }
   snapshot.processListEntries = sanitizeProcessListEntries(
     saved.processListEntries,
   );
@@ -748,13 +1171,12 @@ function sanitizePresets(
   defaults: Settings,
 ): PresetDefinition[] {
   if (!Array.isArray(input)) {
-    return [];
+    return FACTORY_PRESETS;
   }
 
   const defaultSnapshot = buildPresetSnapshot(defaults);
 
   return input
-    .slice(0, MAX_PRESETS)
     .map((preset, index) => {
       if (!preset || typeof preset !== "object") {
         return null;
@@ -794,7 +1216,7 @@ export function sanitizeSettings(
 ): Settings {
   const defaults = createDefaultSettings(version);
   const saved = (input ?? {}) as Partial<Settings> & {
-    speedVariationMax?: unknown;
+    speedRandomizationMax?: unknown;
     telemetryEnabled?: unknown;
   };
   const savedRecord = saved as Record<string, unknown>;
@@ -802,11 +1224,11 @@ export function sanitizeSettings(
   const presetSettings = sanitizeFields(PRESET_FIELDS, savedRecord);
   const settingsOnly = sanitizeFields(SETTINGS_ONLY_FIELDS, savedRecord);
 
-  const legacySpeedVariation = clampNumber(
-    saved.speedVariationMax,
-    defaults.speedVariation,
-    SETTINGS_LIMITS.speedVariation.min,
-    SETTINGS_LIMITS.speedVariation.max,
+  const legacySpeedRandomization = clampNumber(
+    saved.speedRandomizationMax,
+    defaults.speedRandomization,
+    SETTINGS_LIMITS.speedRandomization.min,
+    SETTINGS_LIMITS.speedRandomization.max,
   );
 
   presetSettings.clickInterval = sanitizeEnum(
@@ -829,21 +1251,39 @@ export function sanitizeSettings(
     MOUSE_BUTTON_OPTIONS,
   );
   presetSettings.mode = sanitizeEnum(saved.mode, defaults.mode, MODE_OPTIONS);
+  presetSettings.dutyCycleMode = sanitizeEnum(
+    saved.dutyCycleMode ?? (saved as Record<string, unknown>).clickDurationMode,
+    defaults.dutyCycleMode,
+    DUTY_CYCLE_MODE_OPTIONS,
+  );
   presetSettings.timeLimitUnit = sanitizeEnum(
     saved.timeLimitUnit,
     defaults.timeLimitUnit,
     TIME_LIMIT_UNIT_OPTIONS,
   );
-  presetSettings.sequencePoints = sanitizeSequencePoints(saved.sequencePoints);
+  presetSettings.clickPoints = sanitizeClickPoints(
+    saved.clickPoints ??
+      (savedRecord.sequencePoints as ClickPoint[] | undefined),
+  );
+  if (presetSettings.clickPointsEnabled === undefined) {
+    presetSettings.clickPointsEnabled =
+      (savedRecord.sequenceEnabled as boolean | undefined) ?? false;
+  }
   presetSettings.processListEntries = sanitizeProcessListEntries(
     saved.processListEntries,
   );
-  presetSettings.speedVariation = clampNumber(
-    saved.speedVariation,
-    legacySpeedVariation,
-    SETTINGS_LIMITS.speedVariation.min,
-    SETTINGS_LIMITS.speedVariation.max,
+  presetSettings.speedRandomization = clampNumber(
+    saved.speedRandomization ??
+      (savedRecord.speedVariation as number | undefined),
+    legacySpeedRandomization,
+    SETTINGS_LIMITS.speedRandomization.min,
+    SETTINGS_LIMITS.speedRandomization.max,
   );
+  if (presetSettings.speedRandomizationEnabled === undefined) {
+    presetSettings.speedRandomizationEnabled =
+      (savedRecord.speedVariationEnabled as boolean | undefined) ??
+      defaults.speedRandomizationEnabled;
+  }
 
   settingsOnly.rateInputMode = sanitizeRateInputMode(
     saved.rateInputMode,
@@ -854,10 +1294,6 @@ export function sanitizeSettings(
     defaults.lastPanel,
   );
   settingsOnly.theme = sanitizeTheme(saved.theme, defaults.theme);
-  settingsOnly.advancedSequenceLayout = sanitizeAdvancedSequenceLayout(
-    saved.advancedSequenceLayout,
-    defaults.advancedSequenceLayout,
-  );
   settingsOnly.alwaysOnTop = sanitizeBoolean(
     saved.alwaysOnTop,
     defaults.alwaysOnTop,
@@ -866,6 +1302,53 @@ export function sanitizeSettings(
     saved.accentColor,
     defaults.accentColor,
   );
+
+  // Sanitize stopZones from raw data (skip sanitizeFields default)
+  const rawStopZones = savedRecord.stopZones;
+  if (Array.isArray(rawStopZones)) {
+    settingsOnly.stopZones = sanitizeStopZones(rawStopZones);
+  }
+
+  const rawWindowPos = savedRecord.windowPosition;
+  if (
+    rawWindowPos &&
+    typeof rawWindowPos === "object" &&
+    "x" in (rawWindowPos as Record<string, unknown>) &&
+    "y" in (rawWindowPos as Record<string, unknown>)
+  ) {
+    const r = rawWindowPos as Record<string, unknown>;
+    settingsOnly.windowPosition = {
+      x: typeof r.x === "number" && Number.isFinite(r.x) ? r.x : null,
+      y: typeof r.y === "number" && Number.isFinite(r.y) ? r.y : null,
+    };
+  }
+
+  // Migration: old customStopZoneEnabled + coords → stopZones[0]
+  if (settingsOnly.stopZones.length === 0) {
+    const oldEnabled = savedRecord.customStopZoneEnabled as boolean | undefined;
+    if (oldEnabled) {
+      const oldX = clampNumber(savedRecord.customStopZoneX, 0, 0);
+      const oldY = clampNumber(savedRecord.customStopZoneY, 0, 0);
+      const oldW = Math.max(
+        1,
+        clampNumber(savedRecord.customStopZoneWidth, 100, 1),
+      );
+      const oldH = Math.max(
+        1,
+        clampNumber(savedRecord.customStopZoneHeight, 100, 1),
+      );
+      settingsOnly.stopZones = [
+        {
+          id: createStopZoneId(),
+          x: oldX,
+          y: oldY,
+          width: oldW,
+          height: oldH,
+          action: "stop",
+        },
+      ];
+    }
+  }
   presetSettings.clickSpeed = clampNumber(
     saved.clickSpeed,
     presetSettings.clickSpeed,
@@ -880,6 +1363,12 @@ export function sanitizeSettings(
       ? saved.activePresetId
       : null;
 
+  if (presetSettings.dutyCycleMode === "Hold") {
+    presetSettings.clickSpeed = 1;
+    presetSettings.clickInterval = "d";
+    presetSettings.dutyCycle = 100;
+  }
+
   return {
     version,
     ...presetSettings,
diff --git a/src/store.ts b/src/store.ts
index 0c2ae307..c1670117 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -8,10 +8,13 @@ import {
 
 const store = new LazyStore("settings.json");
 
-export const APP_VERSION = await getVersion();
+export let APP_VERSION = "0.0.0";
+
+export async function initAppVersion(): Promise<void> {
+  APP_VERSION = await getVersion();
+}
 
 export type {
-  AdvancedSequenceLayout,
   ClickInterval,
   ClickMode,
   InputType,
@@ -22,7 +25,8 @@ export type {
   PresetSnapshot,
   RateInputMode,
   SavedPanel,
-  SequencePoint,
+  ClickPoint,
+  StopZone,
   Settings,
   Theme,
   TimeLimitUnit,
@@ -35,8 +39,8 @@ export interface ClickerStatus {
   lastError: string | null;
   stopReason: string | null;
   warning: string | null;
-  activeSequenceIndex: number | null;
-  activeSequenceTick: number;
+  activeClickPointIndex: number | null;
+  activeClickPointTick: number;
 }
 
 export interface AppInfo {
diff --git a/src/components/__tests__/ErrorBoundary.test.tsx b/src/test/ErrorBoundary.test.tsx
similarity index 97%
rename from src/components/__tests__/ErrorBoundary.test.tsx
rename to src/test/ErrorBoundary.test.tsx
index c58d9f0a..b903abdb 100644
--- a/src/components/__tests__/ErrorBoundary.test.tsx
+++ b/src/test/ErrorBoundary.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen, fireEvent } from "@testing-library/react";
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import ErrorBoundary from "../ErrorBoundary";
+import ErrorBoundary from "../components/ErrorBoundary";
 
 function BrokenComponent({ message = "Kaboom" }: { message?: string }): never {
   throw new Error(message);
diff --git a/src/__tests__/main.test.tsx b/src/test/main.test.tsx
similarity index 100%
rename from src/__tests__/main.test.tsx
rename to src/test/main.test.tsx