diff --git a/packages/hub-ui/src/client/components/display/ToastOverlay.vue b/packages/hub-ui/src/client/components/display/ToastOverlay.vue
index bcd03f32..a4f62c52 100644
--- a/packages/hub-ui/src/client/components/display/ToastOverlay.vue
+++ b/packages/hub-ui/src/client/components/display/ToastOverlay.vue
@@ -54,7 +54,7 @@ function dispatchAction(action: DevframeMessageAction) {
       <div
         v-for="toast of toasts"
         :key="toast.id"
-        class="bg-glass:80 border color-base border-base shadow-xl cursor-pointer hover:bg-active transition-colors rounded"
+        class="bg-toast-glass border color-base border-base shadow-xl cursor-pointer transition-colors rounded"
         @click="openMessages(toast.id)"
       >
         <MessageItem :entry="toast.entry" compact class="px-3 py-2.5">
diff --git a/packages/hub-ui/uno.config.ts b/packages/hub-ui/uno.config.ts
index 0f699354..66ac8070 100644
--- a/packages/hub-ui/uno.config.ts
+++ b/packages/hub-ui/uno.config.ts
@@ -26,6 +26,8 @@ export default mergeConfigs([
     shortcuts: {
       /** Use the lighter glass in light mode while retaining dark-mode contrast. */
       'bg-dock-glass': 'bg-glass dark:bg-[#111]/80',
+      /** Match dock glass at rest, then strengthen each theme slightly on hover. */
+      'bg-toast-glass': 'bg-dock-glass hover:bg-white/78 dark:hover:bg-[#111]/90',
       // Dock-shell z-layers (named — the design preset blocks plain
       // `z-<number>`). The floating shell layers sit at the very top of the
       // host page's stacking order, mirroring the upstream dock.