feat(workbench): refine operational interface

features/workbench/components/scheduled-condition-feed.tsx

@@ -12,7 +12,6 @@ import { AnimatePresence, motion } from "motion/react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { cn } from "@/lib/utils";
 import {
-  MAP_CONTROL_SURFACE_CLASS_NAME,
   MAP_READABLE_SURFACE_STRONG_CLASS_NAME
 } from "@/features/map/core/components/map-control-styles";
 import { showMapNotice } from "@/features/map/core/components/notice";
@@ -242,8 +241,8 @@ export function ScheduledConditionFeed({
       className={cn(
         "scheduled-feed-panel-shell pointer-events-auto max-w-[calc(100vw-6rem)] overflow-hidden p-3 motion-reduce:transition-none",
         expanded ? "flex max-h-[calc(100dvh-8rem)] w-[880px] flex-col 2xl:w-[960px]" : "w-[432px]",
-        "rounded-2xl",
-        MAP_CONTROL_SURFACE_CLASS_NAME
+        "rounded-2xl border",
+        "glass-control"
       )}
     >
       <header className={cn("flex items-center gap-2.5 px-2.5 py-2", "rounded-xl", MAP_READABLE_SURFACE_STRONG_CLASS_NAME)}>
@@ -368,7 +367,9 @@ function ConditionTimelinePanel({
         "flex min-h-0 flex-col overflow-hidden p-2.5",
         expanded ? "h-[calc(100dvh-14rem)] max-h-[calc(100dvh-14rem)]" : "h-[420px] max-h-[420px]",
         "rounded-xl",
-        MAP_READABLE_SURFACE_STRONG_CLASS_NAME
+        expanded
+          ? "border border-white/30 bg-white/10"
+          : MAP_READABLE_SURFACE_STRONG_CLASS_NAME
       )}
     >
       {expanded && !loading ? (
@@ -534,7 +535,7 @@ function ConditionFilterDropdown<TValue extends string>({
         <DropdownMenuContent
           align="start"
           sideOffset={6}
-          className="scheduled-feed-scroll z-50 max-h-[280px] w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto rounded-xl border border-white/80 bg-white p-1.5 text-slate-700 shadow-xl shadow-slate-900/15 backdrop-blur-xl"
+          className="glass-menu scheduled-feed-scroll z-50 max-h-[280px] w-[var(--radix-dropdown-menu-trigger-width)] overflow-y-auto rounded-xl border p-1.5 text-slate-700"
         >
           <DropdownMenuRadioGroup value={value} onValueChange={(nextValue) => onValueChange(nextValue as TValue)}>
             {options.map((option) => (
@@ -561,7 +562,7 @@ function ConditionFilterDropdown<TValue extends string>({
 
 function ConditionEmptyState({ title, description }: { title: string; description: string }) {
   return (
-    <div className="flex min-h-full flex-col items-center justify-center rounded-xl border border-dashed border-slate-200 bg-white/65 px-4 py-5 text-center">
+    <div className="flex min-h-full flex-col items-center justify-center rounded-xl border border-dashed border-slate-200 bg-[var(--glass-readable)] px-4 py-5 text-center">
       <span className="grid h-8 w-8 place-items-center rounded-lg bg-slate-100 text-slate-400">
         <ChevronRight size={15} aria-hidden="true" />
       </span>
@@ -586,7 +587,7 @@ function ConditionTimelineSkeleton({ rows }: { rows: number }) {
             ) : null}
             <span className="relative z-10 h-6 w-6 animate-pulse rounded-full bg-slate-200 ring-4 ring-white" />
           </span>
-          <span className="min-w-0 rounded-xl border border-white/80 bg-white/95 px-2 py-1.5">
+          <span className="min-w-0 rounded-xl border border-transparent bg-[var(--glass-menu)] px-2 py-1.5">
             <span className="flex min-w-0 items-center gap-2">
               <span className="min-w-0 flex-1 space-y-1.5">
                 <span className="block h-3.5 w-24 animate-pulse rounded-full bg-slate-200/90" />
@@ -606,7 +607,7 @@ function ConditionDetailSkeleton() {
     <DetailScroll>
       <div
         className={cn(
-          "relative min-h-[420px] overflow-hidden border border-slate-200/80 bg-white/95 px-4 py-3",
+          "relative min-h-[420px] overflow-hidden border border-slate-200/80 bg-[var(--glass-menu)] px-4 py-3",
           "rounded-xl"
         )}
         role="status"
@@ -737,7 +738,7 @@ function ConditionTimelineRow({ condition, selected, isLast, onSelect }: Conditi
           "min-w-0 rounded-xl border px-2 py-1.5 transition-colors group-focus-visible:border-blue-300 group-focus-visible:bg-white",
           selected
             ? "border-blue-300 bg-white text-blue-900 shadow-sm shadow-blue-600/10 ring-1 ring-blue-300/40"
-            : "border-white/80 bg-white/95 text-slate-700 group-hover:border-blue-100 group-hover:bg-white"
+            : "border-transparent bg-[var(--glass-menu)] text-slate-700 group-hover:border-blue-100 group-hover:bg-white"
         )}
       >
         <span className="flex min-w-0 items-center gap-2">