diff --git a/style.css b/style.css
index 58e00c94..0146272c 100644
--- a/style.css
+++ b/style.css
@@ -720,15 +720,11 @@ button {
 }
 
 #shapes-dropdown ul li.keyboard-focused {
-  background-color: var(--color-bg-glass-focused);
-  box-shadow: 0 0 0 2px #007acc;
+  outline: 3px solid var(--color-outline-focus);
+  outline-offset: -3px;
   border-radius: 5px;
 }
 
-#shapes-dropdown ul li.keyboard-focused img {
-  transform: scale(1.2);
-}
-
 /* Scrollable Container with Arrows */
 .scrollable-container {
   position: relative;
diff --git a/style/blockly.css b/style/blockly.css
index 52363a7d..a6283aec 100644
--- a/style/blockly.css
+++ b/style/blockly.css
@@ -524,6 +524,11 @@ body[data-theme="low-vision"] {
   color: var(--color-menu-item-text) !important;
 }
 
+/* Fix offsetParent so the plugin's scroll-into-view logic targets the right container. */
+.blocklyFieldGridContainer {
+  position: relative;
+}
+
 /* Ensure key labels in field_grid_dropdown are readable on light dropdowns. */
 .blocklyFieldGrid .blocklyFieldGridItem {
   color: #000000 !important;
@@ -537,6 +542,10 @@ body[data-theme="low-vision"] {
   box-shadow: 0 0 0 4px #fff !important;
 }
 
+.blocklyFieldGrid .blocklyFieldGridItem:focus {
+  outline: 3px solid var(--color-outline-focus) !important;
+}
+
 body .blocklyHtmlInput {
   font-family:
     "Atkinson Hyperlegible Next", "Asap", Helvetica, Arial, Lucida, sans-serif !important;
diff --git a/ui/colourpicker.css b/ui/colourpicker.css
index 4573f360..a01606bb 100644
--- a/ui/colourpicker.css
+++ b/ui/colourpicker.css
@@ -532,7 +532,7 @@
 .color-picker-close:focus {
   background: #f0f0f0;
   color: #333;
-  outline: 3px solid #511d91;
+  outline: 3px solid var(--color-focus);
   outline-offset: 2px;
 }
 
@@ -655,7 +655,7 @@
 
 .color-brightness:hover,
 .color-brightness:focus {
-  outline: 3px solid #511d91;
+  outline: 3px solid var(--color-focus);
   outline-offset: 2px;
   transform: scale(1.02);
 }
@@ -707,8 +707,7 @@
 .advanced-toggle:hover,
 .advanced-toggle:focus {
   background: #e8e8e8;
-  border-color: #511d91;
-  outline: 3px solid #511d91;
+  outline: 3px solid var(--color-focus);
   outline-offset: 2px;
 }
 
@@ -752,7 +751,7 @@
 }
 
 .rgb-slider:focus {
-  outline: 3px solid #511d91;
+  outline: 3px solid var(--color-focus);
   outline-offset: 2px;
 }
 
@@ -788,9 +787,8 @@
 }
 
 .rgb-number:focus {
-  outline: 3px solid #511d91;
+  outline: 3px solid var(--color-focus);
   outline-offset: 2px;
-  border-color: #511d91;
 }
 
 /* CSS input */
@@ -805,13 +803,12 @@
   border-radius: 8px;
   font-size: 16px;
   font-family: monospace;
-  transition: all 0.2s ease;
+  transition: border-color 0.2s ease;
 }
 
 .css-color-input:focus {
-  outline: 3px solid #511d91;
+  outline: 3px solid var(--color-focus);
   outline-offset: 2px;
-  border-color: #511d91;
 }
 
 /* Action buttons */