From e51538b812392d522947494ae32dacf3f3859f5e Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Thu, 23 Jul 2026 13:09:55 +0200
Subject: [PATCH] Restore light-mode surfaces and refine dialog styling

- Restore light-mode glass, dialog, dropdown, and composer colors
- Refine provider wizard, changed-file cards, sidebar controls, and buttons
- Update wizard step tests for the new list structure
---
 apps/web/src/components/ChatView.tsx          |   2 +-
 apps/web/src/components/GitActionsControl.tsx |  29 +--
 .../src/components/ProjectScriptsControl.tsx  |   2 +-
 apps/web/src/components/SidebarV2.tsx         |  14 +-
 .../src/components/chat/ChangedFilesTree.tsx  |   4 +-
 .../components/chat/ComposerCommandMenu.tsx   |   5 +-
 .../src/components/chat/MessagesTimeline.tsx  |   4 +-
 .../clerk/T3ConnectSidebarSignIn.tsx          |   4 +-
 .../settings/AddProviderInstanceDialog.tsx    |  37 ++-
 .../AddProviderInstanceWizardSteps.test.tsx   |  10 +-
 .../AddProviderInstanceWizardSteps.tsx        |  83 +++----
 apps/web/src/components/ui/alert-dialog.tsx   |   6 +-
 apps/web/src/components/ui/button.tsx         |   2 +-
 apps/web/src/components/ui/command.tsx        |   4 +-
 apps/web/src/components/ui/dialog.tsx         |   9 +-
 apps/web/src/index.css                        | 210 +++++++++---------
 packages/contracts/src/settings.test.ts       |   4 +-
 packages/contracts/src/settings.ts            |   2 +-
 18 files changed, 209 insertions(+), 222 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index f8e3f89f7dbe5d302eec35eef7fcc2cd6ccc295c..7345823a4c4b16f975163a821ae06b241707406e 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -5592,7 +5592,7 @@ function ChatViewContent(props: ChatViewProps) {
                         : undefined
                     }
                   >
-                    <div className="chat-composer-glass-host mx-auto w-full max-w-3xl overflow-hidden rounded-[22px]">
+                    <div className="chat-composer-glass-host mx-auto w-full max-w-3xl rounded-[22px]">
                       <div ref={attachDraftHeroComposerAnchorRef} className="relative z-10 isolate">
                         <ChatComposer
                           composerRef={composerRef}
diff --git a/apps/web/src/components/GitActionsControl.tsx b/apps/web/src/components/GitActionsControl.tsx
index 9646ecd509f5e7c718ee5407b696adc61a77e2fa..11716e935ae7592f1dbc07507a20d663c5709ab7 100644
--- a/apps/web/src/components/GitActionsControl.tsx
+++ b/apps/web/src/components/GitActionsControl.tsx
@@ -544,10 +544,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
 
   return (
     <Dialog open={props.open} onOpenChange={handleOpenChange}>
-      <DialogPopup
-        backdropClassName="bg-black/40 backdrop-blur-none"
-        className="workflow-dialog-surface max-w-xl overflow-hidden before:hidden"
-      >
+      <DialogPopup className="max-w-xl overflow-hidden">
         <div className="flex min-h-0 flex-col overflow-hidden border-foreground/10 bg-transparent">
           <DialogHeader className="border-b border-border/70 bg-foreground/[0.025] dark:border-transparent dark:bg-transparent">
             <DialogTitle>Publish repository</DialogTitle>
@@ -1828,16 +1825,13 @@ export default function GitActionsControl({
           }
         }}
       >
-        <DialogPopup
-          backdropClassName="bg-black/40 backdrop-blur-none"
-          className="command-palette-dialog-surface workflow-dialog-surface before:hidden"
-        >
+        <DialogPopup>
           <DialogHeader>
             <DialogTitle>{COMMIT_DIALOG_TITLE}</DialogTitle>
             <DialogDescription>{COMMIT_DIALOG_DESCRIPTION}</DialogDescription>
           </DialogHeader>
           <DialogPanel className="space-y-4">
-            <div className="space-y-3 rounded-lg border border-input bg-muted/40 p-3 text-xs dark:border-transparent dark:bg-white/[0.035]">
+            <div className="space-y-3 rounded-xl bg-zinc-25 p-3 text-sm ring-1 ring-black/5 dark:bg-white/[0.035] dark:ring-white/5">
               <div className="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">
                 <span className="text-muted-foreground">Branch</span>
                 <span className="flex items-center justify-between gap-2">
@@ -1845,9 +1839,7 @@ export default function GitActionsControl({
                     {gitStatusForActions?.refName ?? "(detached HEAD)"}
                   </span>
                   {isDefaultRef && (
-                    <span className="text-right text-warning text-xs">
-                      Warning: default refName
-                    </span>
+                    <span className="text-right text-warning">Warning: default refName</span>
                   )}
                 </span>
               </div>
@@ -1886,14 +1878,14 @@ export default function GitActionsControl({
                   <p className="font-medium">none</p>
                 ) : (
                   <div className="space-y-2">
-                    <ScrollArea className="h-44 rounded-md border border-input bg-background dark:border-transparent dark:bg-white/[0.025]">
+                    <ScrollArea className="h-44 rounded-lg bg-card ring-1 ring-black/5 dark:bg-white/[0.025] dark:ring-white/5">
                       <div className="space-y-1 p-1">
                         {allFiles.map((file) => {
                           const isExcluded = excludedFiles.has(file.path);
                           return (
                             <div
                               key={file.path}
-                              className="flex w-full items-center gap-2 rounded-md px-2 py-1 font-mono text-xs transition-colors hover:bg-accent/50"
+                              className="flex w-full items-center gap-2 rounded-md px-2 py-1 font-mono hover:bg-accent/50"
                             >
                               {isEditingFiles && (
                                 <Checkbox
@@ -1952,7 +1944,7 @@ export default function GitActionsControl({
               </div>
             </div>
             <div className="space-y-1">
-              <p className="text-xs font-medium">Commit message (optional)</p>
+              <p className="text-sm font-medium">Commit message (optional)</p>
               <Textarea
                 value={dialogCommitMessage}
                 onChange={(event) => setDialogCommitMessage(event.target.value)}
@@ -1961,7 +1953,7 @@ export default function GitActionsControl({
               />
             </div>
           </DialogPanel>
-          <DialogFooter className="dark:border-transparent dark:bg-transparent">
+          <DialogFooter variant="bare">
             <Button
               variant="outline"
               size="sm"
@@ -2004,10 +1996,7 @@ export default function GitActionsControl({
           }
         }}
       >
-        <DialogPopup
-          backdropClassName="bg-black/40 backdrop-blur-none"
-          className="workflow-dialog-surface max-w-xl before:hidden"
-        >
+        <DialogPopup className="max-w-xl">
           <DialogHeader>
             <DialogTitle>
               {pendingDefaultBranchActionCopy?.title ?? "Run action on default refName?"}
diff --git a/apps/web/src/components/ProjectScriptsControl.tsx b/apps/web/src/components/ProjectScriptsControl.tsx
index e0af7d09636fc63f47641b1b02e829c733883b13..79e43f4c042d5d51e97f916201eb6101970f508a 100644
--- a/apps/web/src/components/ProjectScriptsControl.tsx
+++ b/apps/web/src/components/ProjectScriptsControl.tsx
@@ -461,7 +461,7 @@ export default function ProjectScriptsControl({
         }}
         open={dialogOpen}
       >
-        <DialogPopup className="before:hidden">
+        <DialogPopup>
           <DialogHeader>
             <DialogTitle>{isEditing ? "Edit Action" : "Add Action"}</DialogTitle>
             <DialogDescription>
diff --git a/apps/web/src/components/SidebarV2.tsx b/apps/web/src/components/SidebarV2.tsx
index 46b6a3d06240031237a3b7fb182f8700985c282d..40e6377ede471a680ab266c24196171c9ed4730f 100644
--- a/apps/web/src/components/SidebarV2.tsx
+++ b/apps/web/src/components/SidebarV2.tsx
@@ -677,13 +677,13 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
                   <span className="text-red-600 dark:text-red-400">−{diff.deletions}</span>
                 </span>
               ) : null}
-              <span className="ml-auto inline-flex shrink-0 items-center gap-1">
+              <span
+                aria-hidden
+                className="pointer-events-none ml-auto inline-flex shrink-0 items-center gap-1"
+              >
                 {isRemote ? (
-                  <span
-                    aria-label={props.environmentLabel ?? "Remote environment"}
-                    className="inline-flex shrink-0 items-center text-sidebar-muted-foreground/70"
-                  >
-                    <ServerIcon aria-hidden className="size-4" />
+                  <span className="inline-flex shrink-0 items-center text-sidebar-muted-foreground/70">
+                    <ServerIcon aria-hidden className="size-3.5" />
                   </span>
                 ) : null}
                 {driverKind ? (
@@ -691,7 +691,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
                     <ProviderInstanceIcon
                       driverKind={driverKind}
                       displayName={thread.session?.providerName ?? modelInstanceId}
-                      iconClassName="size-4"
+                      iconClassName="size-3.5"
                     />
                   </span>
                 ) : null}
diff --git a/apps/web/src/components/chat/ChangedFilesTree.tsx b/apps/web/src/components/chat/ChangedFilesTree.tsx
index 710ddea416ca9f770d7bb85c6805712bef3e62ff..2a357f9a47d5c1643b8fccc2e4f28cf7606eb89c 100644
--- a/apps/web/src/components/chat/ChangedFilesTree.tsx
+++ b/apps/web/src/components/chat/ChangedFilesTree.tsx
@@ -41,8 +41,8 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
   const summaryStat = useMemo(() => summarizeTurnDiffStats(files), [files]);
 
   return (
-    <div className="mt-4 rounded-2xl bg-background p-2 pt-4 shadow-xs/5 not-dark:bg-clip-padding dark:bg-input/32">
-      <div className="sticky top-0 z-10 mb-3 flex items-center justify-between gap-2 bg-background px-2 before:absolute before:inset-x-0 before:-top-4 before:h-4 before:bg-background before:content-[''] dark:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))] dark:before:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))]">
+    <div className="mt-4 rounded-2xl border border-border/70 bg-secondary p-2 pt-4 dark:border-transparent dark:bg-input/32">
+      <div className="sticky top-0 z-10 mb-3 flex items-center justify-between gap-2 bg-secondary px-2 before:absolute before:inset-x-0 before:-top-4 before:h-4 before:bg-secondary before:content-[''] dark:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))] dark:before:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))]">
         <p className="flex items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
           <span>
             {files.length} changed file{files.length === 1 ? "" : "s"}
diff --git a/apps/web/src/components/chat/ComposerCommandMenu.tsx b/apps/web/src/components/chat/ComposerCommandMenu.tsx
index 8354412ce11ecdc8c9595cc968a20226af8f75a7..9021b6b46091882dfb8fd4ebd154ee222d5277a7 100644
--- a/apps/web/src/components/chat/ComposerCommandMenu.tsx
+++ b/apps/web/src/components/chat/ComposerCommandMenu.tsx
@@ -139,10 +139,7 @@ export const ComposerCommandMenu = memo(function ComposerCommandMenu(props: {
         );
       }}
     >
-      <div
-        ref={listRef}
-        className="relative w-full overflow-hidden rounded-[20px] border border-border/80 bg-popover/96 shadow-lg/8 backdrop-blur-xs"
-      >
+      <div ref={listRef} className="dropdown-glass relative w-full overflow-hidden rounded-[20px]">
         {props.items.length > 0 ? (
           <CommandList className="max-h-72">
             {groups.map((group, groupIndex) => (
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index bb477fb7d9df10fcac7e2eecfb63e53d24a9923d..225d2a5317748d96b16f2e4c11baf6f2f7d5f5ac 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -1285,8 +1285,8 @@ function AssistantChangedFilesSectionInner({
   const summaryStat = summarizeTurnDiffStats(checkpointFiles);
 
   return (
-    <div className="mt-4 rounded-2xl bg-background p-2 pt-4 shadow-xs/5 not-dark:bg-clip-padding dark:bg-input/32">
-      <div className="sticky top-2 z-10 mb-3 flex items-center justify-between gap-2 bg-background px-2 before:absolute before:inset-x-0 before:-top-4 before:h-4 before:bg-background before:content-[''] dark:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))] dark:before:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))]">
+    <div className="mt-4 rounded-2xl border border-border/70 bg-secondary p-2 pt-4 dark:border-transparent dark:bg-input/32">
+      <div className="sticky top-2 z-10 mb-3 flex items-center justify-between gap-2 bg-secondary px-2 before:absolute before:inset-x-0 before:-top-4 before:h-4 before:bg-secondary before:content-[''] dark:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))] dark:before:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))]">
         <p className="flex items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
           <span>
             {checkpointFiles.length} changed file{checkpointFiles.length === 1 ? "" : "s"}
diff --git a/apps/web/src/components/clerk/T3ConnectSidebarSignIn.tsx b/apps/web/src/components/clerk/T3ConnectSidebarSignIn.tsx
index 7ed437115cf865ce726393d34a7095943d6b36d1..a863ef2c8dc74021a06109ced45585041791f533 100644
--- a/apps/web/src/components/clerk/T3ConnectSidebarSignIn.tsx
+++ b/apps/web/src/components/clerk/T3ConnectSidebarSignIn.tsx
@@ -55,10 +55,10 @@ function ConfiguredT3ConnectSidebarSignIn() {
         <SidebarMenuItem>
           <SidebarMenuButton
             size="sm"
-            className="gap-2 px-2 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
+            className="h-8 items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium text-sidebar-muted-foreground/80 hover:bg-sidebar-row-hover hover:text-sidebar-foreground"
             onClick={openAuthPrompt}
           >
-            <LogInIcon className="size-4" />
+            <LogInIcon className="size-4 shrink-0" />
             <span>Sign in to T3 Connect</span>
           </SidebarMenuButton>
         </SidebarMenuItem>
diff --git a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
index 378ce2e3e3c69808fa03f02f852a9625dec426e6..a6da37c15519468189a3555f5fb52436df46f3b5 100644
--- a/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceDialog.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Radio as RadioPrimitive } from "@base-ui/react/radio";
+import { CheckIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import {
   ProviderInstanceId,
@@ -223,7 +224,7 @@ export function AddProviderInstanceDialog({ open, onOpenChange }: AddProviderIns
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogPopup className="max-w-xl overflow-hidden">
         <div className="flex min-h-0 flex-col overflow-hidden">
-          <DialogHeader className="border-b border-border/70">
+          <DialogHeader>
             <DialogTitle>Add provider instance</DialogTitle>
             <DialogDescription>
               Configure an additional provider instance — for example, a second Codex install
@@ -239,41 +240,37 @@ export function AddProviderInstanceDialog({ open, onOpenChange }: AddProviderIns
 
           <div
             data-slot="dialog-panel"
-            className="space-y-4 border-b border-border/70 bg-foreground/[0.025] px-6 py-5"
+            className="space-y-4 bg-zinc-25/80 px-6 py-5 ring-1 ring-black/5 dark:bg-white/2 dark:ring-white/5"
           >
             <AnimatedHeight>
               <div className={cn("grid gap-2", wizardStep !== 0 && "hidden")}>
-                <span
-                  id="add-instance-driver-label"
-                  className="text-xs font-medium text-foreground"
-                >
+                <div id="add-instance-driver-label" className="text-sm font-medium text-foreground">
                   Driver
-                </span>
+                </div>
                 <RadioGroup
                   value={driver}
                   onValueChange={(value) => setDriver(ProviderDriverKind.make(value))}
                   aria-labelledby="add-instance-driver-label"
-                  className="grid grid-cols-2 gap-2.5"
+                  className="grid grid-cols-1 gap-2 sm:grid-cols-2"
                 >
                   {DRIVER_OPTIONS.map((option) => {
                     const IconComponent = option.icon;
-                    const isSelected = option.value === driver;
                     return (
                       <RadioPrimitive.Root
                         key={option.value}
                         value={option.value}
-                        className={cn(
-                          "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left outline-none transition-[background-color,border-color,box-shadow]",
-                          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
-                          isSelected
-                            ? "border-primary bg-background shadow-sm ring-2 ring-primary/35"
-                            : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50",
-                        )}
+                        className="relative flex cursor-pointer items-center gap-3 rounded-lg bg-card px-3 py-3 text-left text-muted-foreground outline-none ring-1 ring-black/5 hover:bg-zinc-50 focus-visible:ring-2 focus-visible:ring-ring data-checked:bg-primary/8 data-checked:text-foreground data-checked:ring-2 data-checked:ring-primary data-checked:hover:bg-primary/8 dark:bg-white/3 dark:ring-white/5 dark:hover:bg-white/5 dark:data-checked:bg-primary/15 dark:data-checked:ring-primary dark:data-checked:hover:bg-primary/15"
                       >
-                        <IconComponent className="size-5 shrink-0" aria-hidden />
+                        <IconComponent className="size-4 shrink-0" aria-hidden />
                         <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
                           {option.label}
                         </span>
+                        <RadioPrimitive.Indicator
+                          className="grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground"
+                          aria-hidden
+                        >
+                          <CheckIcon className="size-3.5 shrink-0" />
+                        </RadioPrimitive.Indicator>
                         {option.badgeLabel ? (
                           <Badge variant="warning" size="sm">
                             {option.badgeLabel}
@@ -290,11 +287,11 @@ export function AddProviderInstanceDialog({ open, onOpenChange }: AddProviderIns
                         value={option.value}
                         disabled
                         className={cn(
-                          "relative flex cursor-not-allowed items-center gap-3 rounded-lg border border-border bg-background px-3 py-3 text-left opacity-55 outline-none",
+                          "relative flex cursor-not-allowed items-center gap-3 rounded-lg bg-card/60 px-3 py-3 text-left opacity-55 outline-none ring-1 ring-black/5 dark:bg-white/2 dark:ring-white/5",
                         )}
                       >
                         <IconComponent
-                          className="size-5 shrink-0 text-muted-foreground"
+                          className="size-4 shrink-0 text-muted-foreground"
                           aria-hidden
                         />
                         <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">
@@ -409,7 +406,7 @@ export function AddProviderInstanceDialog({ open, onOpenChange }: AddProviderIns
             </AnimatedHeight>
           </div>
 
-          <DialogFooter className="border-t bg-transparent">
+          <DialogFooter variant="bare">
             <Button
               variant="outline"
               size="sm"
diff --git a/apps/web/src/components/settings/AddProviderInstanceWizardSteps.test.tsx b/apps/web/src/components/settings/AddProviderInstanceWizardSteps.test.tsx
index 964779f4ec979fd32ef23ab7db42d02cafe9e00e..cec11163fec3b8161e9c81cd9f8df8c06aa032dd 100644
--- a/apps/web/src/components/settings/AddProviderInstanceWizardSteps.test.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceWizardSteps.test.tsx
@@ -9,6 +9,10 @@ interface StepButtonProps {
   readonly onClick: () => void;
 }
 
+interface StepListItemProps {
+  readonly children: ReactElement<StepButtonProps>;
+}
+
 function renderStepButtons(
   currentStep: number,
   instanceIdError: string | null,
@@ -21,9 +25,9 @@ function renderStepButtons(
     onNavigation,
   });
 
-  return Children.toArray(header.props.children).filter(
-    (child): child is ReactElement<StepButtonProps> => isValidElement(child),
-  );
+  return Children.toArray(header.props.children)
+    .filter((child): child is ReactElement<StepListItemProps> => isValidElement(child))
+    .map((item) => item.props.children);
 }
 
 describe("AddProviderInstanceWizardSteps", () => {
diff --git a/apps/web/src/components/settings/AddProviderInstanceWizardSteps.tsx b/apps/web/src/components/settings/AddProviderInstanceWizardSteps.tsx
index 4747557471dc2bc728a92921283cf1184e9a664c..f209474be6b65f5384e0eb840fd0de248dea5f41 100644
--- a/apps/web/src/components/settings/AddProviderInstanceWizardSteps.tsx
+++ b/apps/web/src/components/settings/AddProviderInstanceWizardSteps.tsx
@@ -21,50 +21,53 @@ export function AddProviderInstanceWizardSteps({
   onNavigation,
 }: AddProviderInstanceWizardStepsProps) {
   return (
-    <div className="grid grid-cols-3 gap-2">
+    <ol
+      className="grid grid-cols-3 gap-1 rounded-xl bg-zinc-25 p-1 ring-1 ring-black/5 dark:bg-white/4 dark:ring-white/5"
+      role="list"
+    >
       {ADD_PROVIDER_WIZARD_STEPS.map((step, index) => (
-        <button
-          key={step}
-          type="button"
-          className={cn(
-            "grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] gap-x-2 rounded-lg border px-3 py-2 text-left",
-            index === currentStep
-              ? "border-primary bg-primary/10 ring-1 ring-primary/25"
-              : index < currentStep
-                ? "border-border bg-background"
-                : "border-border bg-muted/40",
-          )}
-          aria-current={index === currentStep ? "step" : undefined}
-          onClick={() =>
-            onNavigation(
-              resolveWizardNavigation(currentStep, index, ADD_PROVIDER_WIZARD_STEPS.length, {
-                instanceIdError,
-              }),
-            )
-          }
-        >
-          <span
+        <li key={step} className="min-w-0">
+          <button
+            type="button"
             className={cn(
-              "row-span-2 mt-0.5 grid size-4 place-items-center rounded-full border",
-              index < currentStep
-                ? "border-primary bg-primary text-primary-foreground"
-                : index === currentStep
-                  ? "border-primary bg-background"
-                  : "border-muted-foreground/35 bg-background",
+              "flex w-full min-w-0 cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-left outline-none hover:bg-card focus-visible:ring-2 focus-visible:ring-ring max-sm:justify-center max-sm:px-2",
+              index === currentStep &&
+                "bg-card text-foreground shadow-xs ring-1 ring-black/5 hover:bg-card dark:shadow-none dark:ring-white/5",
             )}
-            aria-hidden
+            aria-current={index === currentStep ? "step" : undefined}
+            aria-label={`${step}, step ${index + 1}${index < currentStep && summaries[index] ? `, ${summaries[index]}` : ""}`}
+            onClick={() =>
+              onNavigation(
+                resolveWizardNavigation(currentStep, index, ADD_PROVIDER_WIZARD_STEPS.length, {
+                  instanceIdError,
+                }),
+              )
+            }
           >
-            {index < currentStep ? <CheckIcon className="size-3" /> : null}
-          </span>
-          <span className="text-[10px] font-medium uppercase text-muted-foreground">
-            Step {index + 1}
-          </span>
-          <span className="truncate text-xs font-semibold text-foreground">
-            {step}
-            {index < currentStep && summaries[index] ? `: ${summaries[index]}` : ""}
-          </span>
-        </button>
+            <span
+              className={cn(
+                "grid size-5 shrink-0 place-items-center rounded-full text-sm font-medium ring-1",
+                index < currentStep
+                  ? "bg-primary text-primary-foreground ring-primary"
+                  : index === currentStep
+                    ? "bg-primary/10 text-primary ring-primary/30"
+                    : "bg-card text-muted-foreground ring-black/10 dark:bg-white/5 dark:ring-white/10",
+              )}
+              aria-hidden
+            >
+              {index < currentStep ? <CheckIcon className="size-4 shrink-0" /> : index + 1}
+            </span>
+            <span
+              className={cn(
+                "min-w-0 truncate text-sm font-medium max-sm:hidden",
+                index === currentStep ? "text-foreground" : "text-muted-foreground",
+              )}
+            >
+              {step}
+            </span>
+          </button>
+        </li>
       ))}
-    </div>
+    </ol>
   );
 }
diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx
index 0d1994f8240fcfff331b921f517edbdba8ec47eb..1150abf33416288ad65f0a6b4cdf8058ed621c08 100644
--- a/apps/web/src/components/ui/alert-dialog.tsx
+++ b/apps/web/src/components/ui/alert-dialog.tsx
@@ -19,7 +19,7 @@ function AlertDialogBackdrop({ className, ...props }: AlertDialogPrimitive.Backd
     <AlertDialogPrimitive.Backdrop
       forceRender
       className={cn(
-        "fixed inset-0 z-50 bg-black/20 backdrop-blur-[2px] transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/55",
+        "dialog-backdrop fixed inset-0 z-50 transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
         className,
       )}
       data-slot="alert-dialog-backdrop"
@@ -56,9 +56,9 @@ function AlertDialogPopup({
       >
         <AlertDialogPrimitive.Popup
           className={cn(
-            "dialog-glass -translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border border-border/70 text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "dialog-glass -translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0",
             bottomStickOnMobile &&
-              "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
+              "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4",
             className,
           )}
           data-slot="alert-dialog-popup"
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 428aaa91e674f4c573109edb3d9eb22d68265051..f6d09f7799abf72ad758409a5654b1ef56cef1e3 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -40,7 +40,7 @@ const buttonVariants = cva(
           "border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground",
         link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
         outline:
-          "border-transparent bg-popover not-dark:bg-clip-padding text-foreground shadow-none dark:bg-input/32 [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 [&_svg:not([class*='text-'])]:text-muted-foreground",
+          "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 [&_svg:not([class*='text-'])]:text-muted-foreground",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90",
       },
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 918238ffb5003f5197a05ba51c091fe029b5b45d..966960141dd05ba267ffb46bffe5a7026117d55c 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -30,7 +30,7 @@ function CommandDialogBackdrop({ className, ...props }: CommandDialogPrimitive.B
   return (
     <CommandDialogPrimitive.Backdrop
       className={cn(
-        "fixed inset-0 z-50 bg-black/20 backdrop-blur-[2px] transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/55",
+        "dialog-backdrop fixed inset-0 z-50 transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
         className,
       )}
       data-slot="command-dialog-backdrop"
@@ -66,7 +66,7 @@ function CommandDialogPopup({
       <CommandDialogViewport>
         <CommandDialogPrimitive.Popup
           className={cn(
-            "chat-composer-glass command-palette-glass pointer-events-auto -translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl bg-[color-mix(in_srgb,var(--background)_var(--glass-opacity),transparent)] text-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1",
+            "dialog-glass pointer-events-auto -translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border text-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1",
             className,
           )}
           data-slot="command-dialog-popup"
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 3e15fb20e637701333b645eaef89b1f8877afdda..636a1ae7e261bc249b31c1e308b58a5acd8e7df2 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -25,7 +25,7 @@ function DialogBackdrop({ className, ...props }: DialogPrimitive.Backdrop.Props)
     <DialogPrimitive.Backdrop
       forceRender
       className={cn(
-        "fixed inset-0 z-50 bg-black/20 backdrop-blur-[2px] transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:bg-black/55",
+        "dialog-backdrop fixed inset-0 z-50 transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
         className,
       )}
       data-slot="dialog-backdrop"
@@ -67,9 +67,9 @@ function DialogPopup({
       >
         <DialogPrimitive.Popup
           className={cn(
-            "dialog-glass -translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border border-border/70 text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            "dialog-glass -translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 flex max-h-full min-h-0 w-full min-w-0 max-w-lg scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0",
             bottomStickOnMobile &&
-              "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden max-sm:before:rounded-none",
+              "max-sm:max-w-none max-sm:rounded-none max-sm:border-x-0 max-sm:border-t max-sm:border-b-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4",
             className,
           )}
           data-slot="dialog-popup"
@@ -116,8 +116,7 @@ function DialogFooter({
       className={cn(
         "flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end sm:rounded-b-[calc(var(--radius-2xl)-1px)]",
         variant === "default" && "border-t bg-muted/72 py-4",
-        variant === "bare" &&
-          "in-[[data-slot=dialog-popup]:has([data-slot=dialog-panel])]:pt-3 pt-4 pb-6",
+        variant === "bare" && "py-4",
         className,
       )}
       data-slot="dialog-footer"
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 92bfc8a6ad507045eabb6c0a5e189e3d74f17395..cc0889690014ed85804e1e74cae2cb573b682952 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -77,7 +77,9 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
 
 :root {
   --app-scrollbar-width: 6px;
+  --glass-blur: 12px;
   --glass-opacity: 80%;
+  --glass-saturation: 1.14;
   --desktop-window-right-resize-inset: 0px;
   --workspace-topbar-height: 52px;
   --workspace-controls-top: 0px;
@@ -88,6 +90,11 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --workspace-titlebar-control-gap: 0.75rem;
 }
 
+.dark {
+  --glass-blur: 16px;
+  --glass-saturation: 1.08;
+}
+
 [data-slot="sidebar-wrapper"] {
   --workspace-titlebar-content-left: calc(
     var(--workspace-controls-left) + var(--workspace-titlebar-control-size) +
@@ -108,6 +115,7 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
 }
 
 @theme inline {
+  --color-zinc-25: oklch(99.2% 0 0);
   --animate-skeleton: skeleton 2s -1s infinite linear;
   /* Duty-cycled indicator animations: long holds with stepped ramps, so the
      compositor updates discrete frames instead of every vsync. */
@@ -365,25 +373,39 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
 
   .chat-composer-glass {
     background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
-    -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
   }
 
   .chat-composer-glass-host {
-    --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-black));
+    --chat-composer-glass-surface: var(--card);
 
+    position: relative;
+    isolation: isolate;
+    box-shadow:
+      0 0 0 1px rgb(0 0 0 / 8%),
+      0 12px 28px -18px rgb(0 0 0 / 40%);
+  }
+
+  .chat-composer-glass-host::before {
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    border-radius: inherit;
     background: color-mix(
       in srgb,
       var(--chat-composer-glass-surface) var(--glass-opacity),
       transparent
     );
-    box-shadow: 0 12px 28px -18px rgb(0 0 0 / 40%);
-    -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+    content: "";
   }
 
   .dark .chat-composer-glass-host {
-    --chat-composer-glass-surface: color-mix(in srgb, var(--background) 96%, var(--color-white));
+    --chat-composer-glass-surface: color-mix(in srgb, var(--background) 84%, var(--color-white));
+
+    box-shadow: 0 0 0 1px rgb(255 255 255 / 10%);
   }
 
   .alert-glass {
@@ -395,8 +417,8 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
         color-mix(in srgb, var(--alert-glass-tint) 4%, transparent)
       ),
       color-mix(in srgb, var(--background) var(--glass-opacity), transparent) !important;
-    -webkit-backdrop-filter: blur(16px) saturate(1.1);
-    backdrop-filter: blur(16px) saturate(1.1);
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
   }
 
   .alert-glass[data-variant="error"] {
@@ -416,12 +438,16 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   }
 
   .dropdown-glass,
-  .dialog-glass,
-  .workflow-dialog-surface,
-  .command-palette-dialog-surface {
+  .dialog-glass {
     background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
-    -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
+  }
+
+  .dialog-backdrop {
+    background: color-mix(in srgb, var(--background) 60%, transparent);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
   }
 
   .dropdown-glass {
@@ -429,30 +455,12 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     box-shadow: 0 16px 40px -18px rgb(0 0 0 / 55%);
   }
 
-  .command-palette-glass {
-    box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%);
-  }
-
-  .command-menu-surface {
-    background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
-    -webkit-backdrop-filter: blur(16px);
-    backdrop-filter: blur(16px);
-    box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%);
-  }
-
-  .workflow-dialog-surface {
+  .dialog-glass {
     border-color: color-mix(in srgb, var(--foreground) 10%, transparent);
     box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%);
   }
 
-  .command-palette-dialog-surface {
-    border-color: color-mix(in srgb, var(--foreground) 10%, transparent) !important;
-    background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent) !important;
-    box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%) !important;
-  }
-
-  .dark .dropdown-glass,
-  .dark .dialog-glass {
+  .dark .dropdown-glass {
     box-shadow: 0 18px 44px -18px rgb(0 0 0 / 80%);
   }
 
@@ -460,33 +468,15 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     background: color-mix(in srgb, var(--background) var(--glass-opacity), transparent);
   }
 
-  .dark .command-menu-surface,
-  .dark .command-palette-glass,
-  .dark .workflow-dialog-surface {
-    box-shadow: none;
+  .dark .dialog-glass {
+    border-color: color-mix(in srgb, var(--color-white) 14%, transparent);
+    box-shadow:
+      inset 0 1px rgb(255 255 255 / 4%),
+      0 24px 72px -20px rgb(0 0 0 / 90%);
   }
 
-  .dark .command-palette-dialog-surface {
-    box-shadow: none !important;
-  }
-
-  .dark
-    .command-palette-dialog-surface
-    :is([data-slot="input-control"], [data-slot="textarea-control"]) {
-    background: var(--secondary) !important;
-  }
-
-  .dark
-    .command-palette-dialog-surface
-    :is([data-slot="input-control"], [data-slot="textarea-control"]):not(:has(:focus-visible)) {
-    border-color: transparent !important;
-    box-shadow: none !important;
-  }
-
-  .dark
-    .command-palette-dialog-surface
-    :is([data-slot="input-control"], [data-slot="textarea-control"])::before {
-    box-shadow: none !important;
+  .dark .dialog-backdrop {
+    background: color-mix(in srgb, var(--background) 64%, transparent);
   }
 
   .glass-opacity-slider {
@@ -622,15 +612,12 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
       background: var(--background) !important;
     }
 
-    .chat-composer-glass-host {
+    .chat-composer-glass-host::before {
       background: var(--chat-composer-glass-surface);
     }
 
     .dialog-glass,
-    .dropdown-glass,
-    .command-menu-surface,
-    .command-palette-dialog-surface,
-    .workflow-dialog-surface {
+    .dropdown-glass {
       background: var(--popover) !important;
     }
   }
@@ -673,25 +660,25 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
 :root {
   color-scheme: light;
   --radius: 0.625rem;
-  --background: var(--color-white);
+  --background: var(--color-zinc-25);
   --app-chrome-background: var(--background);
-  --surface-raised: var(--secondary);
-  --foreground: var(--color-neutral-800);
+  --surface-raised: color-mix(in srgb, var(--card) 20%, transparent);
+  --foreground: var(--color-zinc-800);
   --card: var(--color-white);
-  --card-foreground: var(--color-neutral-800);
+  --card-foreground: var(--color-zinc-800);
   --popover: var(--color-white);
-  --popover-foreground: var(--color-neutral-800);
+  --popover-foreground: var(--color-zinc-800);
   --primary: oklch(0.488 0.217 264);
   --primary-foreground: var(--color-white);
-  --secondary: --alpha(var(--color-black) / 4%);
-  --secondary-foreground: var(--color-neutral-800);
-  --muted: --alpha(var(--color-black) / 4%);
-  --muted-foreground: color-mix(in srgb, var(--color-neutral-500) 90%, var(--color-black));
-  --accent: --alpha(var(--color-black) / 4%);
-  --accent-foreground: var(--color-neutral-800);
+  --secondary: var(--color-zinc-50);
+  --secondary-foreground: var(--color-zinc-800);
+  --muted: var(--color-zinc-50);
+  --muted-foreground: var(--color-zinc-500);
+  --accent: var(--color-zinc-100);
+  --accent-foreground: var(--color-zinc-900);
   --destructive: var(--color-red-500);
-  --border: --alpha(var(--color-black) / 8%);
-  --input: --alpha(var(--color-black) / 10%);
+  --border: var(--color-zinc-200);
+  --input: var(--color-zinc-300);
   --ring: oklch(0.488 0.217 264);
   --destructive-foreground: var(--color-red-700);
   --info: var(--color-blue-500);
@@ -700,16 +687,17 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
   --success-foreground: var(--color-emerald-700);
   --warning: var(--color-amber-500);
   --warning-foreground: var(--color-amber-700);
-  /* Fallbacks for standalone sidebar primitives. App sidebars override these
-     roles on their own root so the surface hierarchy stays out of page content. */
-  --sidebar: var(--card);
+  /* Keep every sidebar primitive on the same light surface hierarchy, including
+     portaled mobile sheets and settings navigation outside the app sidebar. */
+  --sidebar: var(--color-zinc-50);
   --sidebar-foreground: var(--foreground);
   --sidebar-muted-foreground: var(--muted-foreground);
-  --sidebar-control-surface: var(--accent);
-  --sidebar-row-hover: var(--accent);
-  --sidebar-row-active: var(--accent);
-  --sidebar-row-selected: var(--muted);
+  --sidebar-control-surface: var(--color-zinc-100);
+  --sidebar-row-hover: var(--color-zinc-25);
+  --sidebar-row-active: var(--color-white);
+  --sidebar-row-selected: var(--color-white);
   --sidebar-border: var(--border);
+  --sidebar-stage-fade: var(--sidebar);
 
   @variant dark {
     color-scheme: dark;
@@ -742,34 +730,44 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
     --success-foreground: var(--color-emerald-400);
     --warning: var(--color-amber-500);
     --warning-foreground: var(--color-amber-400);
+    --sidebar: var(--card);
+    --sidebar-foreground: var(--foreground);
+    --sidebar-muted-foreground: var(--muted-foreground);
+    --sidebar-control-surface: var(--muted);
+    --sidebar-row-hover: var(--accent);
+    --sidebar-row-active: var(--accent);
+    --sidebar-row-selected: var(--muted);
+    --sidebar-border: var(--border);
+    --sidebar-stage-fade: var(--card);
   }
 }
 
-/* Give both navigation implementations the same cool graphite surface. The
-   version attribute remains useful for layout-specific styling, but color is
-   shared so switching the beta does not switch visual systems. */
+/* Keep both navigation implementations on the same quiet zinc hierarchy:
+   zinc-50 navigation, zinc-25 hover, and white selected/raised surfaces.
+   The version attribute remains useful for layout-specific styling without
+   changing the color system when the beta is toggled. */
 [data-sidebar-version="v1"],
 [data-sidebar-version="v2"] {
-  --background: oklch(0.965 0.009 265);
-  --foreground: oklch(0.27 0.025 265);
-  --card: oklch(0.945 0.014 265);
-  --card-foreground: var(--foreground);
-  --accent: oklch(0.875 0.008 265);
-  --accent-foreground: oklch(0.24 0.012 265);
-  --muted: oklch(0.9 0.018 265);
-  --muted-foreground: oklch(0.49 0.03 265);
-  --border: oklch(0.72 0.025 265 / 28%);
-  --input: oklch(0.62 0.03 265 / 28%);
-  --sidebar: var(--card);
-  --sidebar-foreground: var(--foreground);
-  --sidebar-muted-foreground: var(--muted-foreground);
-  --sidebar-control-surface: var(--muted);
-  --sidebar-row-hover: color-mix(in srgb, var(--foreground) 6%, transparent);
-  --sidebar-row-active: color-mix(in srgb, var(--foreground) 11%, transparent);
-  --sidebar-row-selected: color-mix(in srgb, var(--foreground) 7%, transparent);
-  --sidebar-border: var(--border);
+  --background: var(--color-zinc-25);
+  --foreground: var(--color-zinc-800);
+  --card: var(--color-white);
+  --card-foreground: var(--color-zinc-800);
+  --accent: var(--color-zinc-100);
+  --accent-foreground: var(--color-zinc-900);
+  --muted: var(--color-zinc-50);
+  --muted-foreground: var(--color-zinc-500);
+  --border: var(--color-zinc-200);
+  --input: var(--color-zinc-300);
+  --sidebar: var(--color-zinc-50);
+  --sidebar-foreground: var(--color-zinc-800);
+  --sidebar-muted-foreground: var(--color-zinc-500);
+  --sidebar-control-surface: var(--color-zinc-100);
+  --sidebar-row-hover: var(--color-zinc-25);
+  --sidebar-row-active: var(--color-white);
+  --sidebar-row-selected: var(--color-white);
+  --sidebar-border: var(--color-zinc-200);
   --sidebar-stage-fade: var(--sidebar);
-  background-color: var(--card);
+  background-color: var(--sidebar);
 }
 
 .dark [data-sidebar-version="v1"],
diff --git a/packages/contracts/src/settings.test.ts b/packages/contracts/src/settings.test.ts
index 023a5724ea39c2d5fb14f11c9f696c29b9eedf95..e8eaf723e174d4ab43583171f361f753bccadf7d 100644
--- a/packages/contracts/src/settings.test.ts
+++ b/packages/contracts/src/settings.test.ts
@@ -38,12 +38,12 @@ describe("ClientSettings glass opacity", () => {
     expect(decodeClientSettings({}).glassOpacity).toBe(80);
   });
 
-  it.each([49, 101, 72.5])("rejects an invalid glass opacity: %s", (value) => {
+  it.each([39, 101, 72.5])("rejects an invalid glass opacity: %s", (value) => {
     expect(() => decodeClientSettings({ glassOpacity: value })).toThrow();
     expect(() => decodeClientSettingsPatch({ glassOpacity: value })).toThrow();
   });
 
-  it.each([50, 75, 100])("accepts a glass opacity within the supported range: %s", (value) => {
+  it.each([40, 75, 100])("accepts a glass opacity within the supported range: %s", (value) => {
     expect(decodeClientSettings({ glassOpacity: value }).glassOpacity).toBe(value);
     expect(decodeClientSettingsPatch({ glassOpacity: value }).glassOpacity).toBe(value);
   });
diff --git a/packages/contracts/src/settings.ts b/packages/contracts/src/settings.ts
index 57ab44a6b66cf0d2bd1379fa3f52754044ed65e1..06f7de3db67ab84491da572825506da9f7d2623f 100644
--- a/packages/contracts/src/settings.ts
+++ b/packages/contracts/src/settings.ts
@@ -48,7 +48,7 @@ export const SidebarAutoSettleAfterDays = Schema.Number.check(
 );
 export type SidebarAutoSettleAfterDays = typeof SidebarAutoSettleAfterDays.Type;
 export const DEFAULT_SIDEBAR_AUTO_SETTLE_AFTER_DAYS: SidebarAutoSettleAfterDays = 3;
-export const MIN_GLASS_OPACITY = 50;
+export const MIN_GLASS_OPACITY = 40;
 export const MAX_GLASS_OPACITY = 100;
 export const GlassOpacity = Schema.Int.check(
   Schema.isBetween({
-- 
2.54.0