feat: align Custom tab tile interaction with icon picker

Matches the hover pattern used by icon/emoji tiles: background-color
change instead of a border outline, and no opacity fade on the whole
tile. Drops the default background/border on the preview so unselected
tiles read as plain icons rather than framed controls. Label color
steps up to gray-12 on hover so the tile feels active.

The narrower transition list (background-color, outline-color) replaces
transition-all — the outline-color channel is what lets the
is-highlighted ring fade in without a discrete style jump.

src/main/frontend/components/icon.css

@@ -408,17 +408,12 @@
 
 .custom-tab-item {
   @apply cursor-pointer;
-  @apply transition-opacity duration-150;
   @apply border-none bg-transparent p-0;
   display: flex !important;
   flex-direction: column !important;
   align-items: center !important;
   gap: 8px !important;
 
-  &:hover {
-    @apply opacity-80;
-  }
-
   &:active {
     @apply opacity-60;
   }
@@ -427,17 +422,15 @@
 .custom-tab-item-preview {
   @apply w-12 h-12 rounded-lg;
   @apply flex items-center justify-center;
-  @apply transition-all duration-150;
-  border: 1px solid var(--rx-gray-06);
-  background-color: var(--rx-gray-03);
   /* Baseline transparent outline so outline-color can transition
      transparent → accent without the browser's currentColor flashing
      through during the discrete style/width jump. */
   outline: 2px solid transparent;
   outline-offset: -2px;
+  transition: background-color 150ms, outline-color 150ms;
 
   &:hover {
-    border-color: var(--rx-accent-09);
+    background-color: var(--rx-gray-05);
   }
 }
 
@@ -466,6 +459,10 @@
   transition: color 150ms;
 }
 
+.custom-tab-item:hover .custom-tab-item-label {
+  color: var(--rx-gray-12);
+}
+
 /* Shared drag overlay hint — used by both icon picker and asset picker */
 .drag-overlay-hint {
   position: absolute;