diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css
index edd1de70ec..8b1ef83395 100644
--- a/src/main/frontend/components/icon.css
+++ b/src/main/frontend/components/icon.css
@@ -467,12 +467,15 @@
     @apply flex flex-col gap-0.5 flex-shrink-0;
   }
 
-  /* 1px vertical rule between control col and preset grid. */
+  /* 1px vertical rule between control col and preset grid. Uses the
+     canonical separator chain so the line stays visible in OG/
+     OG-turquoise themes (where `--lx-gray-04` resolved to a tone
+     nearly identical to the popover surface). */
   .divider-rule {
     @apply self-stretch flex-shrink-0;
     width: 1px;
     margin: 4px 2px;
-    background-color: var(--lx-gray-04);
+    background-color: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
   }
 
   /* 4-wide × 2-row preset grid. */
@@ -1875,7 +1878,7 @@
      all three sit at the same 175px outer width. Closed: zero vertical
      padding + zero border so the box collapses cleanly. */
   padding: 0;
-  border-top: 0 solid var(--lx-gray-04);
+  border-top: 0 solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
   /* Slightly darker than the popover surface so the picker pane reads as
      a distinct pocket within the popover. Animates with the height. */
   background-color: hsl(var(--popover));
@@ -1898,7 +1901,7 @@
   position: relative;
   height: 32px;
   padding: 0 10px;
-  border-bottom: 1px solid var(--lx-gray-04);
+  border-bottom: 1px solid var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
 }
 
 /* Inline indicator overlaid on the hex input's right edge. Visible when