.

src/components/ui/SegmentedControl.tsx

@@ -23,7 +23,7 @@ export default function SegmentedControl<T extends string>({
   return (
     <div
       className={clsx(
-        'inline-flex h-9 rounded-full border border-[var(--color-line)] bg-white/60 p-1 shadow-sm backdrop-blur-xl dark:bg-white/10',
+        'inline-flex h-9 rounded-full border border-[var(--color-line)] bg-[var(--color-control)] p-1 shadow-[var(--shadow-control)] backdrop-blur-xl',
         className,
       )}
       role="group"
@@ -41,7 +41,7 @@ export default function SegmentedControl<T extends string>({
             className={clsx(
               'min-w-14 rounded-full px-3 text-sm font-semibold transition duration-150',
               isSelected
-                ? 'bg-[var(--color-text)] text-white shadow-sm dark:bg-white dark:text-black'
+                ? 'bg-[var(--color-surface-strong)] text-[var(--color-text)] shadow-sm'
                 : 'text-[var(--color-text-muted)] hover:bg-black/[0.04] hover:text-[var(--color-text)] dark:hover:bg-white/10',
             )}
           >