diff --git a/AGENTS.md b/AGENTS.md
index 98578ca..7f6b211 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -37,6 +37,7 @@ Standard dev commands are in `package.json` scripts and `README.md`. Key ones:
 - **Models page aggregation**: The 7-day/30-day filters are relative rolling windows, not calendar-month buckets. When grouped by time, the chart should keep all day buckets in the selected window; only model grouping is intentionally capped to the top entries.
 - **OpenClaw Doctor in UI**: In Settings > Advanced > Developer, the app exposes both `Run Doctor` (`openclaw doctor --json`) and `Run Doctor Fix` (`openclaw doctor --fix --yes --non-interactive`) through the host-api. Renderer code should call the host route, not spawn CLI processes directly.
 - **UI change validation**: Any user-visible UI change should include or update an Electron E2E spec in the same PR so the interaction is covered by Playwright.
+- **i18n & styling conventions**: New user-facing features must (1) route all text through `react-i18next` with full locale coverage (`en` / `zh` / `ja` / `ru` under `src/i18n/locales/<lang>/<ns>.json`) — never hardcode display strings, and (2) use the design tokens and substitution rules documented in `src/styles/globals.css` (surfaces `bg-surface-modal` / `bg-surface-input`, selected state `bg-black/5 dark:bg-white/10`, status colours `text-X-700 dark:text-X-400`, page H1/H2 `font-serif font-normal tracking-tight`, etc.) — see the *Component conventions* block in `globals.css` for the full substitution table.
 - **Renderer/Main API boundary (important)**:
   - Renderer must use `src/lib/host-api.ts` and `src/lib/api-client.ts` as the single entry for backend calls.
   - Do not add new direct `window.electron.ipcRenderer.invoke(...)` calls in pages/components; expose them through host-api/api-client instead.
diff --git a/src/App.tsx b/src/App.tsx
index fe9b73f..3716fd7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -223,6 +223,7 @@ function App() {
           position="bottom-right"
           richColors
           closeButton
+          theme={theme}
           style={{ zIndex: 99999 }}
         />
       </TooltipProvider>
diff --git a/src/components/channels/ChannelConfigModal.tsx b/src/components/channels/ChannelConfigModal.tsx
index 9b663ac..a48ff5d 100644
--- a/src/components/channels/ChannelConfigModal.tsx
+++ b/src/components/channels/ChannelConfigModal.tsx
@@ -568,8 +568,8 @@ export function ChannelConfigModal({
                 {qrCode.startsWith('data:image') || qrCode.startsWith('http://') || qrCode.startsWith('https://') ? (
                   <img src={qrCode} alt="Scan QR Code" className="w-64 h-64 object-contain rounded-2xl" />
                 ) : (
-                  <div className="w-64 h-64 bg-white dark:bg-background rounded-2xl flex items-center justify-center">
-                    <QrCode className="h-32 w-32 text-gray-400" />
+                  <div className="w-64 h-64 bg-surface-modal rounded-2xl flex items-center justify-center">
+                    <QrCode className="h-32 w-32 text-muted-foreground" />
                   </div>
                 )}
               </div>
diff --git a/src/components/common/ErrorBoundary.tsx b/src/components/common/ErrorBoundary.tsx
index 83397d8..ba7c39a 100644
--- a/src/components/common/ErrorBoundary.tsx
+++ b/src/components/common/ErrorBoundary.tsx
@@ -55,7 +55,7 @@ export class ErrorBoundary extends Component<Props, State> {
             </CardHeader>
             <CardContent className="space-y-4">
               {this.state.error && (
-                <pre className="rounded-lg bg-muted p-4 text-sm overflow-auto max-h-40">
+                <pre className="rounded-lg bg-surface-input p-4 text-sm overflow-auto max-h-40">
                   {this.state.error.message}
                 </pre>
               )}
diff --git a/src/components/common/StatusBadge.tsx b/src/components/common/StatusBadge.tsx
index 8eb2e89..f071ae2 100644
--- a/src/components/common/StatusBadge.tsx
+++ b/src/components/common/StatusBadge.tsx
@@ -35,7 +35,7 @@ export function StatusBadge({ status, label, showDot = true }: StatusBadgeProps)
           className={cn(
             'h-1.5 w-1.5 rounded-full',
             config.variant === 'success' && 'bg-green-600',
-            config.variant === 'secondary' && 'bg-gray-400',
+            config.variant === 'secondary' && 'bg-muted-foreground',
             config.variant === 'warning' && 'bg-yellow-600 animate-pulse',
             config.variant === 'destructive' && 'bg-red-600'
           )}
diff --git a/src/components/file-preview/GeneratedFilesPanel.tsx b/src/components/file-preview/GeneratedFilesPanel.tsx
index 2f03a1c..4a26263 100644
--- a/src/components/file-preview/GeneratedFilesPanel.tsx
+++ b/src/components/file-preview/GeneratedFilesPanel.tsx
@@ -66,7 +66,7 @@ export function GeneratedFilesPanel({
                 )}
                 title={file.filePath}
               >
-                <div className="min-w-0 flex items-center gap-2 overflow-hidden whitespace-nowrap text-[13px] leading-none">
+                <div className="min-w-0 flex items-center gap-2 overflow-hidden whitespace-nowrap text-meta leading-none">
                   <span className="shrink-0 font-medium text-foreground">{file.fileName}</span>
                   <span className="truncate text-muted-foreground">{file.filePath}</span>
                 </div>
@@ -96,7 +96,7 @@ export function GeneratedFilesPanel({
               )}
               title={file.filePath}
             >
-              <div className="min-w-0 flex items-center gap-2 overflow-hidden whitespace-nowrap text-[13px] leading-none">
+              <div className="min-w-0 flex items-center gap-2 overflow-hidden whitespace-nowrap text-meta leading-none">
                 <span className="shrink-0 font-medium text-foreground">{file.fileName}</span>
                 <span className="truncate text-muted-foreground">{file.filePath}</span>
               </div>
diff --git a/src/components/file-preview/PdfViewer.tsx b/src/components/file-preview/PdfViewer.tsx
index 50335f4..582e6d7 100644
--- a/src/components/file-preview/PdfViewer.tsx
+++ b/src/components/file-preview/PdfViewer.tsx
@@ -150,8 +150,8 @@ export default function PdfViewer({
       className={cn(
         'relative h-full min-h-0 overflow-hidden',
         workspaceSurface
-          ? 'overflow-auto bg-[hsl(var(--muted)/0.35)] p-4 dark:bg-background'
-          : 'bg-white',
+          ? 'overflow-auto bg-surface-input/35 p-4'
+          : 'bg-surface-modal',
         className,
       )}
     >
@@ -159,7 +159,7 @@ export default function PdfViewer({
         <div
           className={cn(
             'absolute inset-0 z-10 flex items-center justify-center',
-            workspaceSurface ? 'bg-[hsl(var(--muted)/0.35)] dark:bg-background' : 'bg-white',
+            workspaceSurface ? 'bg-surface-input/35' : 'bg-surface-modal',
           )}
         >
           <LoadingSpinner />
diff --git a/src/components/file-preview/SheetViewer.tsx b/src/components/file-preview/SheetViewer.tsx
index 4849351..5d38ab3 100644
--- a/src/components/file-preview/SheetViewer.tsx
+++ b/src/components/file-preview/SheetViewer.tsx
@@ -219,16 +219,16 @@ export default function SheetViewer({ filePath, fileName, className }: SheetView
           </div>
         ) : (
           <table className="w-max min-w-full border-collapse text-xs">
-            <thead className="sticky top-0 z-10 bg-muted/80 backdrop-blur">
+            <thead className="sticky top-0 z-10 bg-surface-input/80 backdrop-blur">
               <tr>
                 <th
-                  className="sticky left-0 z-20 border-b border-r border-black/10 bg-muted/80 px-2 py-1 text-center text-2xs text-muted-foreground dark:border-white/10"
+                  className="sticky left-0 z-20 border-b border-r border-black/10 bg-surface-input/80 px-2 py-1 text-center text-2xs text-muted-foreground dark:border-white/10"
                   style={{ width: 48, minWidth: 48 }}
                 />
                 {activeSheet.columnLetters.map((letter, idx) => (
                   <th
                     key={letter + idx}
-                    className="border-b border-r border-black/10 bg-muted/80 px-2 py-1 text-center text-2xs font-medium text-muted-foreground dark:border-white/10"
+                    className="border-b border-r border-black/10 bg-surface-input/80 px-2 py-1 text-center text-2xs font-medium text-muted-foreground dark:border-white/10"
                     style={{ minWidth: 96 }}
                   >
                     {letter}
@@ -264,7 +264,7 @@ export default function SheetViewer({ filePath, fileName, className }: SheetView
           </table>
         )}
       </div>
-      <div className="flex shrink-0 items-stretch justify-between gap-2 border-t border-black/10 bg-muted/40 dark:border-white/10">
+      <div className="flex shrink-0 items-stretch justify-between gap-2 border-t border-black/10 bg-surface-input/40 dark:border-white/10">
         <div className="flex min-w-0 items-stretch overflow-x-auto">{sheetTabs}</div>
         {totalPages > 1 && (
           <div className="flex shrink-0 items-center gap-1 border-l border-black/10 px-2 text-xs text-muted-foreground dark:border-white/10">
diff --git a/src/components/settings/ImageGenerationSettings.tsx b/src/components/settings/ImageGenerationSettings.tsx
index 2d4ccdf..29ab20d 100644
--- a/src/components/settings/ImageGenerationSettings.tsx
+++ b/src/components/settings/ImageGenerationSettings.tsx
@@ -350,7 +350,7 @@ export function ImageGenerationSettings() {
                       <td className="px-4 py-3">
                         <span className="font-medium">{agent.name}</span>
                         {agent.isDefault ? (
-                          <Badge variant="outline" className="ml-2 rounded-full text-[10px]">
+                          <Badge variant="outline" className="ml-2 rounded-full text-2xs">
                             {t('imageGeneration.defaultAgent')}
                           </Badge>
                         ) : null}
diff --git a/src/components/settings/ProvidersSettings.tsx b/src/components/settings/ProvidersSettings.tsx
index b71c736..ebf9b75 100644
--- a/src/components/settings/ProvidersSettings.tsx
+++ b/src/components/settings/ProvidersSettings.tsx
@@ -531,7 +531,7 @@ function ProviderCard({
   };
 
   const currentInputClasses = isDefault
-    ? "h-[40px] rounded-xl font-mono text-meta bg-white dark:bg-card border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm"
+    ? "h-[40px] rounded-xl font-mono text-meta bg-surface-modal border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm"
     : inputClasses;
 
   const currentLabelClasses = isDefault ? "text-meta text-muted-foreground" : labelClasses;
@@ -608,7 +608,7 @@ function ProviderCard({
               data-testid={`provider-set-default-${account.id}`}
               variant="ghost"
               size="icon"
-              className="h-8 w-8 rounded-full text-muted-foreground hover:text-blue-600 hover:bg-white dark:hover:bg-card shadow-sm"
+              className="h-8 w-8 rounded-full text-muted-foreground hover:text-blue-600 hover:bg-surface-modal shadow-sm"
                 onClick={onSetDefault}
                 title={t('aiProviders.card.setDefault')}
               >
@@ -619,7 +619,7 @@ function ProviderCard({
               data-testid={`provider-edit-${account.id}`}
               variant="ghost"
               size="icon"
-              className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-white dark:hover:bg-card shadow-sm"
+              className="h-8 w-8 rounded-full text-muted-foreground hover:text-foreground hover:bg-surface-modal shadow-sm"
               onClick={onEdit}
               title={t('aiProviders.card.editKey')}
             >
@@ -629,7 +629,7 @@ function ProviderCard({
               data-testid={`provider-delete-${account.id}`}
               variant="ghost"
               size="icon"
-              className="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive hover:bg-white dark:hover:bg-card shadow-sm"
+              className="h-8 w-8 rounded-full text-muted-foreground hover:text-destructive hover:bg-surface-modal shadow-sm"
               onClick={onDelete}
               title={t('aiProviders.card.delete')}
             >
@@ -708,7 +708,7 @@ function ProviderCard({
                           setModelId(typeInfo?.defaultModelId || '');
                         }
                       }}
-                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'apikey' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'apikey' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                     >
                       {t('aiProviders.authModes.apiKey')}
                     </button>
@@ -719,7 +719,7 @@ function ProviderCard({
                         setBaseUrl(codePlanPreset.baseUrl);
                         setModelId(codePlanPreset.modelId);
                       }}
-                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'codeplan' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'codeplan' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                     >
                       {t('aiProviders.dialog.codePlanMode')}
                     </button>
@@ -738,21 +738,21 @@ function ProviderCard({
                     <button
                       type="button"
                       onClick={() => setApiProtocol('openai-completions')}
-                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                     >
                       {t('aiProviders.protocols.openaiCompletions', 'OpenAI Completions')}
                     </button>
                     <button
                       type="button"
                       onClick={() => setApiProtocol('openai-responses')}
-                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-responses' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-responses' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                     >
                       {t('aiProviders.protocols.openaiResponses', 'OpenAI Responses')}
                     </button>
                     <button
                       type="button"
                       onClick={() => setApiProtocol('anthropic-messages')}
-                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                     >
                       {t('aiProviders.protocols.anthropic', 'Anthropic')}
                     </button>
@@ -789,7 +789,7 @@ function ProviderCard({
                     onChange={(e) => setFallbackModelsText(e.target.value)}
                     placeholder={t('aiProviders.dialog.fallbackModelIdsPlaceholder')}
                     className={isDefault
-                      ? "min-h-24 w-full rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-card px-3 py-2 text-meta font-mono outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm"
+                      ? "min-h-24 w-full rounded-xl border border-black/10 dark:border-white/10 bg-surface-modal px-3 py-2 text-meta font-mono outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 shadow-sm"
                       : "min-h-24 w-full rounded-xl border border-black/10 dark:border-white/10 bg-transparent px-3 py-2 text-meta font-mono outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"}
                   />
                   <p className="text-xs text-muted-foreground">
@@ -801,7 +801,7 @@ function ProviderCard({
                   {fallbackOptions.length === 0 ? (
                     <p className="text-meta text-muted-foreground">{t('aiProviders.dialog.noFallbackOptions')}</p>
                   ) : (
-                    <div className={cn("space-y-2 rounded-xl border border-black/10 dark:border-white/10 p-3 shadow-sm", isDefault ? "bg-white dark:bg-card" : "bg-transparent")}>
+                    <div className={cn("space-y-2 rounded-xl border border-black/10 dark:border-white/10 p-3 shadow-sm", isDefault ? "bg-surface-modal" : "bg-transparent")}>
                       {fallbackOptions.map((candidate) => (
                         <label key={candidate.account.id} className="flex items-center gap-3 text-meta cursor-pointer group/label">
                           <input
@@ -882,7 +882,7 @@ function ProviderCard({
                   className={cn(
                     "rounded-xl px-4 border-black/10 dark:border-white/10",
                     isDefault
-                      ? "h-[40px] bg-white dark:bg-card hover:bg-black/5 dark:hover:bg-white/10"
+                      ? "h-[40px] bg-surface-modal hover:bg-black/5 dark:hover:bg-white/10"
                       : "h-[44px] bg-transparent hover:bg-black/5 dark:hover:bg-white/10 shadow-sm"
                   )}
                   disabled={
@@ -1271,7 +1271,7 @@ function AddProviderDialog({
   };
 
   return (
-    <div data-testid="add-provider-dialog" className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
+    <div data-testid="add-provider-dialog" className="fixed inset-0 z-50 bg-black/30 dark:bg-black/60 flex items-center justify-center p-4">
       <Card className="w-full max-w-2xl max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-surface-modal overflow-hidden">
         <CardHeader className="relative pb-2 shrink-0">
           <CardTitle className="text-2xl font-serif font-normal">{t('aiProviders.dialog.title')}</CardTitle>
@@ -1502,7 +1502,7 @@ function AddProviderDialog({
                           }
                           setValidationError(null);
                         }}
-                        className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'apikey' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                        className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'apikey' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                       >
                         {t('aiProviders.authModes.apiKey')}
                       </button>
@@ -1514,7 +1514,7 @@ function AddProviderDialog({
                           setModelId(codePlanPreset.modelId);
                           setValidationError(null);
                         }}
-                        className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'codeplan' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                        className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", arkMode === 'codeplan' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                       >
                         {t('aiProviders.dialog.codePlanMode')}
                       </button>
@@ -1533,21 +1533,21 @@ function AddProviderDialog({
                     <button
                       type="button"
                         onClick={() => setApiProtocol('openai-completions')}
-                        className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                        className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-completions' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                     >
                       {t('aiProviders.protocols.openaiCompletions', 'OpenAI Completions')}
                     </button>
                     <button
                       type="button"
                       onClick={() => setApiProtocol('openai-responses')}
-                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-responses' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'openai-responses' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                     >
                       {t('aiProviders.protocols.openaiResponses', 'OpenAI Responses')}
                     </button>
                     <button
                       type="button"
                       onClick={() => setApiProtocol('anthropic-messages')}
-                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-white dark:bg-card border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
+                      className={cn("flex-1 py-1.5 px-3 rounded-lg border transition-colors", apiProtocol === 'anthropic-messages' ? "bg-surface-modal border-black/20 dark:border-white/20 shadow-sm font-medium" : "border-transparent bg-black/5 dark:bg-white/5 text-muted-foreground hover:bg-black/10 dark:hover:bg-white/10")}
                       >
                         {t('aiProviders.protocols.anthropic', 'Anthropic')}
                       </button>
@@ -1600,7 +1600,7 @@ function AddProviderDialog({
 
                     {/* OAuth Active State Modal / Inline View */}
                     {oauthFlowing && (
-                      <div className="mt-4 p-5 border border-black/10 dark:border-white/10 rounded-2xl bg-white dark:bg-card shadow-sm relative overflow-hidden">
+                      <div className="mt-4 p-5 border border-black/10 dark:border-white/10 rounded-2xl bg-surface-modal shadow-sm relative overflow-hidden">
                         {/* Background pulse effect */}
                         <div className="absolute inset-0 bg-blue-500/5 animate-pulse" />
 
@@ -1716,7 +1716,7 @@ function AddProviderDialog({
                 <Button
                   data-testid="add-provider-submit-button"
                   onClick={handleAdd}
-                  className={cn("rounded-full px-8 h-[42px] text-meta font-semibold bg-brand hover:bg-brand-hover text-white shadow-sm", useOAuthFlow && "hidden")}
+                  className={cn("rounded-full px-8 h-[42px] text-meta font-semibold shadow-sm", useOAuthFlow && "hidden")}
                   disabled={!selectedType || saving || (showModelIdField && modelId.trim().length === 0)}
                 >
                   {saving ? (
diff --git a/src/components/settings/UpdateSettings.tsx b/src/components/settings/UpdateSettings.tsx
index 2915782..6c9919d 100644
--- a/src/components/settings/UpdateSettings.tsx
+++ b/src/components/settings/UpdateSettings.tsx
@@ -182,7 +182,7 @@ export function UpdateSettings() {
 
       {/* Update Info */}
       {updateInfo && (status === 'available' || status === 'downloaded') && (
-        <div className="rounded-lg bg-muted p-4 space-y-2">
+        <div className="rounded-lg bg-surface-input p-4 space-y-2">
           <div className="flex items-center justify-between">
             <p className="font-medium">Version {updateInfo.version}</p>
             {updateInfo.releaseDate && (
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index f57fffd..1a18337 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      "inline-flex h-10 items-center justify-center rounded-md bg-surface-input p-1 text-muted-foreground",
       className
     )}
     {...props}
diff --git a/src/components/update/UpdateNotifier.tsx b/src/components/update/UpdateNotifier.tsx
index c6938cb..f477aea 100644
--- a/src/components/update/UpdateNotifier.tsx
+++ b/src/components/update/UpdateNotifier.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { useUpdateStore } from '@/stores/update';
+import { UpdateToast } from './UpdateToast';
 
 const AVAILABLE_TOAST_ID = 'clawx-update-available';
 const DOWNLOADED_TOAST_ID = 'clawx-update-downloaded';
@@ -10,7 +11,8 @@ const DOWNLOADED_TOAST_ID = 'clawx-update-downloaded';
  * Shows global update prompts outside the Settings page.
  *
  * The update store owns IPC communication; this component only reacts to
- * store state changes and presents user-facing actions.
+ * store state changes and presents user-facing actions via a custom
+ * Sonner toast (`UpdateToast`) that follows the active ClawX theme.
  */
 export function UpdateNotifier() {
   const { t } = useTranslation('settings');
@@ -23,32 +25,46 @@ export function UpdateNotifier() {
 
   useEffect(() => {
     const version = updateInfo?.version || t('updates.toast.unknownVersion');
+    const dismissLabel = t('updates.action.later');
 
     if (status !== 'available') {
       toast.dismiss(AVAILABLE_TOAST_ID);
+      lastAvailableVersionRef.current = null;
     }
 
     if (status !== 'downloaded') {
       toast.dismiss(DOWNLOADED_TOAST_ID);
+      lastDownloadedVersionRef.current = null;
     }
 
     if (status === 'available') {
       if (lastAvailableVersionRef.current === version) return;
       lastAvailableVersionRef.current = version;
 
-      toast(t('updates.toast.availableTitle'), {
-        id: AVAILABLE_TOAST_ID,
-        description: t('updates.toast.availableDescription', { version }),
-        duration: Infinity,
-        action: {
-          label: t('updates.action.download'),
-          onClick: () => {
-            toast.dismiss(AVAILABLE_TOAST_ID);
-            lastAvailableVersionRef.current = null;
-            void downloadUpdate();
-          },
+      toast.custom(
+        (toastId) => (
+          <UpdateToast
+            variant="available"
+            title={t('updates.toast.availableTitle')}
+            description={t('updates.toast.availableDescription', { version })}
+            primaryActionLabel={t('updates.action.download')}
+            dismissLabel={dismissLabel}
+            onPrimaryAction={() => {
+              toast.dismiss(toastId);
+              lastAvailableVersionRef.current = null;
+              void downloadUpdate();
+            }}
+            onDismiss={() => {
+              toast.dismiss(toastId);
+            }}
+          />
+        ),
+        {
+          id: AVAILABLE_TOAST_ID,
+          duration: Infinity,
+          position: 'bottom-left',
         },
-      });
+      );
       return;
     }
 
@@ -56,19 +72,30 @@ export function UpdateNotifier() {
       if (lastDownloadedVersionRef.current === version) return;
       lastDownloadedVersionRef.current = version;
 
-      toast(t('updates.toast.downloadedTitle'), {
-        id: DOWNLOADED_TOAST_ID,
-        description: t('updates.toast.downloadedDescription', { version }),
-        duration: Infinity,
-        action: {
-          label: t('updates.action.install'),
-          onClick: () => {
-            toast.dismiss(DOWNLOADED_TOAST_ID);
-            lastDownloadedVersionRef.current = null;
-            installUpdate();
-          },
+      toast.custom(
+        (toastId) => (
+          <UpdateToast
+            variant="downloaded"
+            title={t('updates.toast.downloadedTitle')}
+            description={t('updates.toast.downloadedDescription', { version })}
+            primaryActionLabel={t('updates.action.install')}
+            dismissLabel={dismissLabel}
+            onPrimaryAction={() => {
+              toast.dismiss(toastId);
+              lastDownloadedVersionRef.current = null;
+              installUpdate();
+            }}
+            onDismiss={() => {
+              toast.dismiss(toastId);
+            }}
+          />
+        ),
+        {
+          id: DOWNLOADED_TOAST_ID,
+          duration: Infinity,
+          position: 'bottom-left',
         },
-      });
+      );
     }
   }, [downloadUpdate, installUpdate, status, t, updateInfo?.version]);
 
diff --git a/src/components/update/UpdateToast.tsx b/src/components/update/UpdateToast.tsx
new file mode 100644
index 0000000..76be325
--- /dev/null
+++ b/src/components/update/UpdateToast.tsx
@@ -0,0 +1,95 @@
+/**
+ * UpdateToast
+ *
+ * Custom-rendered Sonner toast card for the "update available" /
+ * "update downloaded" prompts. Renders inside `toast.custom()` so we
+ * fully own the look (no Sonner default chrome) while still inheriting
+ * Sonner's stacking, animation, and dismissal behaviour.
+ *
+ * Uses ClawX semantic tokens (`bg-popover`, `text-foreground`,
+ * `border-border`, …) so the card automatically tracks the active
+ * theme — no per-mode hardcoding required.
+ */
+import { Download, Rocket, X } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+
+export type UpdateToastVariant = 'available' | 'downloaded';
+
+export interface UpdateToastProps {
+  variant: UpdateToastVariant;
+  title: string;
+  description: string;
+  primaryActionLabel: string;
+  dismissLabel: string;
+  onPrimaryAction: () => void;
+  onDismiss: () => void;
+}
+
+export function UpdateToast({
+  variant,
+  title,
+  description,
+  primaryActionLabel,
+  dismissLabel,
+  onPrimaryAction,
+  onDismiss,
+}: UpdateToastProps) {
+  const Icon = variant === 'downloaded' ? Rocket : Download;
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn(
+        'pointer-events-auto w-[250px] max-w-[calc(100vw-2rem)]',
+        'rounded-lg border border-border bg-popover text-popover-foreground',
+        'shadow-lg shadow-black/5 dark:shadow-black/40',
+      )}
+    >
+      <div className="relative p-3.5">
+        <p className="px-6 text-center text-sm font-semibold leading-5 text-foreground">
+          {title}
+        </p>
+        <button
+          type="button"
+          onClick={onDismiss}
+          aria-label={dismissLabel}
+          className={cn(
+            'absolute right-2.5 top-2.5 inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md',
+            'text-muted-foreground transition-colors',
+            'hover:bg-black/5 hover:text-foreground dark:hover:bg-white/10',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          )}
+        >
+          <X className="h-3.5 w-3.5" aria-hidden />
+        </button>
+
+        <p className="mt-1 text-xs leading-5 text-muted-foreground">
+          {description}
+        </p>
+
+        <div className="mt-3 flex items-center justify-end gap-2">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onDismiss}
+            className="h-8 px-3 text-xs"
+          >
+            {dismissLabel}
+          </Button>
+          <Button
+            size="sm"
+            onClick={onPrimaryAction}
+            className="h-8 px-3 text-xs"
+          >
+            <Icon className="mr-1.5 h-3.5 w-3.5" aria-hidden />
+            {primaryActionLabel}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default UpdateToast;
diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json
index b516e86..df6328e 100644
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -1,7 +1,4 @@
 {
-    "runError": {
-        "title": "Model API call error"
-    },
     "gatewayNotRunning": "Gateway Not Running",
     "gatewayRequired": "The OpenClaw Gateway needs to be running to use chat. It will start automatically, or you can start it from Settings.",
     "welcome": {
@@ -14,7 +11,9 @@
         "brainstorming": "Multi-Agent Parallel"
     },
     "noLogs": "(No logs available yet)",
-    "scrollToLatest": "Jump to latest",
+    "scrollToLatest": "Back to bottom",
+    "loadMoreHistory": "Load earlier messages",
+    "loadingMoreHistory": "Loading more…",
     "toolbar": {
         "refresh": "Refresh chat",
         "currentAgent": "Talking to {{agent}}",
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index c69d81a..670534f 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -177,6 +177,7 @@
       "download": "Download Update",
       "install": "Install & Restart",
       "cancelAutoInstall": "Cancel",
+      "later": "Later",
       "retry": "Retry",
       "check": "Check for Updates"
     },
diff --git a/src/i18n/locales/ja/chat.json b/src/i18n/locales/ja/chat.json
index 4d03ef4..9e49804 100644
--- a/src/i18n/locales/ja/chat.json
+++ b/src/i18n/locales/ja/chat.json
@@ -1,7 +1,4 @@
 {
-    "runError": {
-        "title": "モデルAPI呼び出しエラー"
-    },
     "gatewayNotRunning": "ゲートウェイが停止中",
     "gatewayRequired": "チャットを利用するには OpenClaw ゲートウェイが実行されている必要があります。自動的に起動するか、設定から起動できます。",
     "welcome": {
@@ -14,7 +11,9 @@
         "brainstorming": "マルチエージェント並列実行"
     },
     "noLogs": "（ログはまだありません）",
-    "scrollToLatest": "最新の会話へ移動",
+    "scrollToLatest": "最下部に戻る",
+    "loadMoreHistory": "以前のメッセージを読み込む",
+    "loadingMoreHistory": "読み込み中…",
     "toolbar": {
         "refresh": "チャットを更新",
         "currentAgent": "現在の会話相手: {{agent}}",
diff --git a/src/i18n/locales/ja/cron.json b/src/i18n/locales/ja/cron.json
index 8daaa45..f3cefe7 100644
--- a/src/i18n/locales/ja/cron.json
+++ b/src/i18n/locales/ja/cron.json
@@ -41,10 +41,12 @@
         "deliveryModeAnnounce": "外部チャンネル",
         "deliveryModeAnnounceDesc": "最終結果を設定済みチャンネルへ送信します。",
         "deliveryChannel": "チャンネル",
+        "channelUnsupportedTag": "未対応",
         "deliveryAccount": "送信アカウント",
         "selectDeliveryAccount": "アカウントを選択",
         "deliveryAccountDesc": "Channels ページと同じ設定済みアカウント一覧を使います。",
         "selectChannel": "チャンネルを選択",
+        "deliveryChannelUnsupported": "{{channel}} は現在、スケジュール送信に対応していません。",
         "deliveryDefaultAccountHint": "このチャンネルの既定アカウントを使います: {{account}}",
         "deliveryTarget": "送信先",
         "selectDeliveryTarget": "送信先を選択",
@@ -97,6 +99,7 @@
         "nameRequired": "タスク名を入力してください",
         "messageRequired": "メッセージを入力してください",
         "channelRequired": "チャンネルを選択してください",
+        "deliveryChannelUnsupported": "{{channel}} はスケジュール送信にまだ対応していません",
         "deliveryTargetRequired": "送信先を入力してください",
         "deliveryTargetResolved": "送信先を解決しました",
         "failedLoadDeliveryTargets": "送信先の読み込みに失敗しました",
diff --git a/src/i18n/locales/ja/settings.json b/src/i18n/locales/ja/settings.json
index 91e2d07..8939337 100644
--- a/src/i18n/locales/ja/settings.json
+++ b/src/i18n/locales/ja/settings.json
@@ -110,6 +110,7 @@
       "apikeyMode": "APIキー",
       "loginPrompt": "このプロバイダーはブラウザからのサインインが必要です。",
       "loginButton": "ブラウザでログイン",
+      "getApiKey": "API キーを取得",
       "waiting": "待機中...",
       "openLoginPage": "ログインページを開く",
       "waitingApproval": "ブラウザの承認を待っています...",
@@ -176,6 +177,7 @@
       "download": "更新をダウンロード",
       "install": "インストールして再起動",
       "cancelAutoInstall": "キャンセル",
+      "later": "後で",
       "retry": "再試行",
       "check": "更新を確認"
     },
@@ -214,7 +216,9 @@
       }
     },
     "devMode": "開発者モード",
-    "devModeDesc": "開発者ツールとショートカットを表示"
+    "devModeDesc": "開発者ツールとショートカットを表示",
+    "telemetry": "匿名利用データ",
+    "telemetryDesc": "ClawX 改善のため、匿名の基本的な利用データの提供を許可します"
   },
   "developer": {
     "title": "開発者",
diff --git a/src/i18n/locales/ru/channels.json b/src/i18n/locales/ru/channels.json
index a8bd7e9..21c17b0 100644
--- a/src/i18n/locales/ru/channels.json
+++ b/src/i18n/locales/ru/channels.json
@@ -62,6 +62,7 @@
         "connectionStatus": {
             "connected": "Подключён",
             "connecting": "Подключение",
+            "degraded": "Деградировано",
             "disconnected": "Отключён",
             "error": "Ошибка"
         },
@@ -99,6 +100,30 @@
         "saveAndConnect": "Сохранить и подключить",
         "envVar": "Переменная окружения: {{var}}"
     },
+    "health": {
+        "state": {
+            "degraded": "Шлюз деградировал",
+            "unresponsive": "Шлюз не отвечает"
+        },
+        "reasons": {
+            "gateway_degraded": "Сердцебиение шлюза недавно деградировало.",
+            "gateway_unresponsive": "Управляющая плоскость шлюза не отвечает.",
+            "channels_status_timeout": "Истёк таймаут проверки статуса канала.",
+            "rpc_timeout": "Недавние RPC-вызовы шлюза завершились по таймауту.",
+            "gateway_not_running": "Шлюз не запущен.",
+            "gateway_error": "Шлюз находится в состоянии ошибки.",
+            "runtime_error": "Среда выполнения канала сообщила об ошибке."
+        },
+        "restartGateway": "Перезапустить шлюз",
+        "copyDiagnostics": "Скопировать диагностику",
+        "viewDiagnostics": "Показать диагностику",
+        "hideDiagnostics": "Скрыть диагностику",
+        "diagnosticsTitle": "Снимок диагностики шлюза",
+        "diagnosticsCopied": "Диагностика скопирована в буфер обмена",
+        "diagnosticsCopyFailed": "Не удалось собрать диагностику: {{error}}",
+        "restartTriggered": "Запрошен перезапуск шлюза",
+        "restartFailed": "Не удалось перезапустить шлюз: {{error}}"
+    },
     "meta": {
         "telegram": {
             "description": "Подключите Telegram через токен бота от @BotFather",
diff --git a/src/i18n/locales/ru/chat.json b/src/i18n/locales/ru/chat.json
index 95cb1e5..42bdfff 100644
--- a/src/i18n/locales/ru/chat.json
+++ b/src/i18n/locales/ru/chat.json
@@ -1,7 +1,4 @@
 {
-    "runError": {
-        "title": "Ошибка вызова API модели"
-    },
     "gatewayNotRunning": "Шлюз не запущен",
     "gatewayRequired": "Для использования чата требуется запущенный шлюз OpenClaw. Он запустится автоматически, или вы можете запустить его в Настройках.",
     "welcome": {
@@ -14,7 +11,9 @@
         "brainstorming": "Параллельные агенты"
     },
     "noLogs": "(Журналы ещё недоступны)",
-    "scrollToLatest": "К последним сообщениям",
+    "scrollToLatest": "Вернуться вниз",
+    "loadMoreHistory": "Загрузить предыдущие сообщения",
+    "loadingMoreHistory": "Загрузка…",
     "toolbar": {
         "refresh": "Обновить чат",
         "currentAgent": "Общение с {{agent}}",
@@ -158,7 +157,7 @@
         "title": "Граф выполнения",
         "branchLabel": "ветвь",
         "thinkingLabel": "Думаю",
-        "runErrorLabel": "Ошибка модели",
+        "errorLabel": "Ошибка модели",
         "imageGenerateLabel": "Генерация изображения",
         "agentRun": "Выполнение {{agent}}",
         "collapsedSummary": "Вызовов инструментов: {{toolCount}} · Промежуточных сообщений: {{processCount}}",
diff --git a/src/i18n/locales/ru/dashboard.json b/src/i18n/locales/ru/dashboard.json
index 8f751a6..8b82d8d 100644
--- a/src/i18n/locales/ru/dashboard.json
+++ b/src/i18n/locales/ru/dashboard.json
@@ -78,9 +78,15 @@
         "testing": "Генерация…",
         "save": "Сохранить",
         "saving": "Сохранение…",
+        "clear": "Очистить конфигурацию",
+        "clearing": "Очистка…",
+        "clearConfirmTitle": "Очистить конфигурацию генерации изображений?",
+        "clearConfirmMessage": "Это удалит пользовательский endpoint изображений, выбранную модель и сохранённый API-ключ. Чат-провайдеры не затрагиваются.",
+        "clearConfirmAction": "Очистить",
         "testPrompt": "Маленький красный круг на белом фоне, минималистичная плоская иллюстрация.",
         "toast": {
             "saved": "Настройки генерации изображений сохранены",
+            "cleared": "Конфигурация генерации изображений очищена",
             "saveBeforeTest": "Сохраните настройки перед тестом",
             "testSuccess": "Тестовое изображение создано ({{ms}} мс)",
             "testSuccessWithPath": "Тестовое изображение создано ({{ms}} мс): {{path}}",
diff --git a/src/i18n/locales/ru/settings.json b/src/i18n/locales/ru/settings.json
index 812c1e0..1519e32 100644
--- a/src/i18n/locales/ru/settings.json
+++ b/src/i18n/locales/ru/settings.json
@@ -177,6 +177,7 @@
       "download": "Скачать обновление",
       "install": "Установить и перезапустить",
       "cancelAutoInstall": "Отмена",
+      "later": "Позже",
       "retry": "Повторить",
       "check": "Проверить обновления"
     },
diff --git a/src/i18n/locales/zh/chat.json b/src/i18n/locales/zh/chat.json
index e5c3119..4a77c2d 100644
--- a/src/i18n/locales/zh/chat.json
+++ b/src/i18n/locales/zh/chat.json
@@ -1,7 +1,4 @@
 {
-    "runError": {
-        "title": "模型API调用错误"
-    },
     "gatewayNotRunning": "网关未运行",
     "gatewayRequired": "OpenClaw 网关需要运行才能使用聊天。它将自动启动，或者您可以从设置中启动。",
     "welcome": {
@@ -14,7 +11,9 @@
         "brainstorming": "多智能体并行"
     },
     "noLogs": "（暂无日志）",
-    "scrollToLatest": "跳转到最新对话",
+    "scrollToLatest": "回到底部",
+    "loadMoreHistory": "加载更早的消息",
+    "loadingMoreHistory": "加载更多中…",
     "toolbar": {
         "refresh": "刷新聊天",
         "currentAgent": "当前对话对象：{{agent}}",
@@ -158,7 +157,7 @@
         "title": "执行关系图",
         "branchLabel": "分支",
         "thinkingLabel": "思考中",
-        "modelErrorTitle": "模型调用失败",
+        "errorLabel": "模型调用失败",
         "imageGenerateLabel": "图片生成",
         "agentRun": "{{agent}} 执行",
         "collapsedSummary": "{{toolCount}} 个工具调用，{{processCount}} 条过程消息",
diff --git a/src/i18n/locales/zh/settings.json b/src/i18n/locales/zh/settings.json
index e8f2e9b..1ffc84b 100644
--- a/src/i18n/locales/zh/settings.json
+++ b/src/i18n/locales/zh/settings.json
@@ -177,6 +177,7 @@
       "download": "下载更新",
       "install": "安装并重启",
       "cancelAutoInstall": "取消",
+      "later": "稍后",
       "retry": "重试",
       "check": "检查更新"
     },
diff --git a/src/pages/Channels/index.tsx b/src/pages/Channels/index.tsx
index 0397bc7..3060f6e 100644
--- a/src/pages/Channels/index.tsx
+++ b/src/pages/Channels/index.tsx
@@ -682,7 +682,7 @@ export function Channels() {
                                   group.status === 'connecting' && 'bg-sky-500 animate-pulse',
                                   group.status === 'degraded' && 'bg-yellow-500',
                                   group.status === 'error' && 'bg-red-500',
-                                  group.status === 'disconnected' && 'bg-gray-400',
+                                  group.status === 'disconnected' && 'bg-muted-foreground',
                                 )}
                               />
                               {statusLabel(group.status)}
diff --git a/src/pages/Chat/ChatInput.tsx b/src/pages/Chat/ChatInput.tsx
index 607762b..d3c3777 100644
--- a/src/pages/Chat/ChatInput.tsx
+++ b/src/pages/Chat/ChatInput.tsx
@@ -793,7 +793,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
         )}
 
         {/* Input Container */}
-        <div className={`relative bg-white dark:bg-card rounded-2xl shadow-sm border px-3 pt-2.5 pb-1.5 transition-all ${dragOver ? 'border-primary ring-1 ring-primary' : 'border-black/10 dark:border-white/10'}`}>
+        <div className={`relative bg-surface-modal rounded-2xl shadow-sm border px-3 pt-2.5 pb-1.5 transition-all ${dragOver ? 'border-primary ring-1 ring-primary' : 'border-black/10 dark:border-white/10'}`}>
           {selectedTarget && (
             <div className="flex flex-wrap gap-2 pb-1.5">
               <button
@@ -882,7 +882,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
                   <AtSign className="h-3.5 w-3.5" />
                 </Button>
                 {pickerOpen && (
-                  <div className="absolute left-0 bottom-full z-20 mb-2 w-72 overflow-hidden rounded-2xl border border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-card">
+                  <div className="absolute left-0 bottom-full z-20 mb-2 w-72 overflow-hidden rounded-2xl border border-black/10 bg-surface-modal p-1.5 shadow-xl dark:border-white/10">
                     <div className="px-3 py-2 text-tiny font-medium text-muted-foreground/80">
                       {t('composer.agentPickerTitle', { currentAgent: currentAgentName })}
                     </div>
@@ -924,7 +924,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
                 <ChevronDown className={cn('h-3.5 w-3.5 transition-transform', skillPickerOpen && 'rotate-180')} />
               </button>
               {skillPickerOpen && (
-                <div className="absolute left-0 bottom-full z-20 mb-2 w-80 overflow-hidden rounded-2xl border border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-card">
+                <div className="absolute left-0 bottom-full z-20 mb-2 w-80 overflow-hidden rounded-2xl border border-black/10 bg-surface-modal p-1.5 shadow-xl dark:border-white/10">
                   <div className="flex items-center gap-2 rounded-xl border border-black/10 bg-black/[0.03] px-3 py-2 dark:border-white/10 dark:bg-white/[0.04]">
                     <Search className="h-3.5 w-3.5 text-muted-foreground" />
                     <input
@@ -1011,7 +1011,7 @@ export function ChatInput({ onSend, onStop, disabled = false, sending = false }:
                 </button>
                 {modelPickerOpen && (
                   <div
-                    className="absolute left-0 bottom-full z-20 mb-2 w-72 overflow-hidden rounded-2xl border border-black/10 bg-white p-1.5 shadow-xl dark:border-white/10 dark:bg-card"
+                    className="absolute left-0 bottom-full z-20 mb-2 w-72 overflow-hidden rounded-2xl border border-black/10 bg-surface-modal p-1.5 shadow-xl dark:border-white/10"
                     data-testid="chat-model-picker-menu"
                   >
                     <div className="px-3 py-2 text-tiny font-medium text-muted-foreground/80">
@@ -1128,7 +1128,7 @@ function AttachmentPreview({
         </div>
       ) : (
         // Generic file card
-        <div className="flex items-center gap-2 px-3 py-2 bg-muted/50 max-w-[200px]">
+        <div className="flex items-center gap-2 px-3 py-2 bg-surface-input/50 max-w-[200px]">
           <FileIcon mimeType={attachment.mimeType} className="h-5 w-5 shrink-0 text-muted-foreground" />
           <div className="min-w-0 overflow-hidden">
             <p className="text-xs font-medium truncate">{attachment.fileName}</p>
diff --git a/src/pages/Chat/ChatMessage.tsx b/src/pages/Chat/ChatMessage.tsx
index 22ee1fe..3276d5e 100644
--- a/src/pages/Chat/ChatMessage.tsx
+++ b/src/pages/Chat/ChatMessage.tsx
@@ -538,7 +538,7 @@ function ToolStatusBar({
             className={cn(
               'flex items-center gap-2 rounded-lg border px-3 py-2 text-xs transition-colors',
               isRunning && 'border-primary/30 bg-primary/5 text-foreground',
-              !isRunning && !isError && 'border-border/50 bg-muted/20 text-muted-foreground',
+              !isRunning && !isError && 'border-border/50 bg-surface-input/20 text-muted-foreground',
               isError && 'border-destructive/30 bg-destructive/5 text-destructive',
             )}
           >
diff --git a/src/pages/Chat/ChatToolbar.tsx b/src/pages/Chat/ChatToolbar.tsx
index 7f418b4..4731d7a 100644
--- a/src/pages/Chat/ChatToolbar.tsx
+++ b/src/pages/Chat/ChatToolbar.tsx
@@ -61,13 +61,13 @@ export function ChatToolbar({
               )}
               onClick={() => (browserActive ? closePanel() : openBrowser())}
               disabled={!currentAgent?.workspace}
-              aria-label={t('toolbar.workspace', '工作空间')}
+              aria-label={t('toolbar.workspace')}
             >
               <FolderTree className="h-4 w-4" />
             </Button>
           </TooltipTrigger>
           <TooltipContent>
-            <p>{t('toolbar.workspace', '工作空间')}</p>
+            <p>{t('toolbar.workspace')}</p>
           </TooltipContent>
         </Tooltip>
       )}
diff --git a/src/pages/Chat/index.tsx b/src/pages/Chat/index.tsx
index 1f0294a..7471c7f 100644
--- a/src/pages/Chat/index.tsx
+++ b/src/pages/Chat/index.tsx
@@ -205,7 +205,7 @@ export function Chat() {
           }
         })
         .catch(() => {
-          toast.error(t('filePreview.errors.openInFinderFailed', '无法在文件管理器中显示'));
+          toast.error(t('filePreview.errors.openInFinderFailed'));
         });
       return;
     }
@@ -840,7 +840,7 @@ export function Chat() {
                         data-testid="chat-load-more-history"
                       >
                         {loadingMoreHistory && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
-                        {loadingMoreHistory ? t('loadingMoreHistory', '加载更多中...') : t('loadMoreHistory', '加载更早的消息')}
+                        {loadingMoreHistory ? t('loadingMoreHistory') : t('loadMoreHistory')}
                       </button>
                     </div>
                   )}
@@ -987,12 +987,12 @@ export function Chat() {
               type="button"
               onClick={() => void scrollToBottom({ animation: 'smooth', ignoreEscapes: true })}
               className="absolute bottom-4 right-4 z-20 inline-flex items-center gap-2 rounded-full border border-border bg-background/95 px-3 py-1.5 text-xs font-medium text-foreground shadow-lg shadow-black/10 backdrop-blur transition-colors hover:bg-black/5 dark:hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:shadow-black/30"
-              aria-label={t('scrollToLatest', '跳转到最新对话')}
-              title={t('scrollToLatest', '跳转到最新对话')}
+              aria-label={t('scrollToLatest')}
+              title={t('scrollToLatest')}
               data-testid="chat-scroll-to-latest"
             >
               <ArrowDownToLine className="h-3.5 w-3.5" />
-              <span>{t('scrollToLatest', '跳转到最新对话')}</span>
+              <span>{t('scrollToLatest')}</span>
             </button>
           )}
 
diff --git a/src/pages/Cron/index.tsx b/src/pages/Cron/index.tsx
index 4d0147b..285744f 100644
--- a/src/pages/Cron/index.tsx
+++ b/src/pages/Cron/index.tsx
@@ -422,7 +422,7 @@ function TaskDialog({ job, configuredChannels, onClose, onSave }: TaskDialogProp
   };
 
   return (
-    <div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4" onClick={onClose}>
+    <div className="fixed inset-0 z-50 bg-black/30 dark:bg-black/60 flex items-center justify-center p-4" onClick={onClose}>
       <Card className="w-full max-w-lg max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-surface-modal overflow-hidden" onClick={(e) => e.stopPropagation()}>
         <CardHeader className="flex flex-row items-start justify-between pb-2 shrink-0">
           <div>
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx
index 3a916e5..f26bff1 100644
--- a/src/pages/Settings/index.tsx
+++ b/src/pages/Settings/index.tsx
@@ -607,7 +607,7 @@ export function Settings() {
                       </Button>
                     </div>
                   </div>
-                  <pre className="text-xs text-muted-foreground bg-white dark:bg-card p-4 rounded-xl max-h-60 overflow-auto whitespace-pre-wrap font-mono border border-black/5 dark:border-white/5 shadow-inner">
+                  <pre className="text-xs text-muted-foreground bg-surface-input p-4 rounded-xl max-h-60 overflow-auto whitespace-pre-wrap font-mono border border-black/5 dark:border-white/5 shadow-inner">
                     {logContent || t('chat:noLogs')}
                   </pre>
                 </div>
@@ -909,13 +909,13 @@ export function Settings() {
                         <div className="grid gap-3 md:grid-cols-2">
                           <div className="space-y-2">
                             <p className="text-xs font-semibold text-foreground/80">{t('developer.doctorStdout')}</p>
-                            <pre className="max-h-72 overflow-auto rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-card p-3 text-tiny font-mono whitespace-pre-wrap break-words">
+                            <pre className="max-h-72 overflow-auto rounded-xl border border-black/10 dark:border-white/10 bg-surface-input p-3 text-tiny font-mono whitespace-pre-wrap break-words">
                               {doctorResult.stdout.trim() || t('developer.doctorOutputEmpty')}
                             </pre>
                           </div>
                           <div className="space-y-2">
                             <p className="text-xs font-semibold text-foreground/80">{t('developer.doctorStderr')}</p>
-                            <pre className="max-h-72 overflow-auto rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-card p-3 text-tiny font-mono whitespace-pre-wrap break-words">
+                            <pre className="max-h-72 overflow-auto rounded-xl border border-black/10 dark:border-white/10 bg-surface-input p-3 text-tiny font-mono whitespace-pre-wrap break-words">
                               {doctorResult.stderr.trim() || t('developer.doctorOutputEmpty')}
                             </pre>
                           </div>
@@ -961,25 +961,25 @@ export function Settings() {
                     {showTelemetryViewer && (
                       <div className="space-y-4 rounded-2xl border border-black/10 dark:border-white/10 p-5 bg-black/5 dark:bg-white/5">
                         <div className="flex flex-wrap items-center gap-2">
-                          <Badge variant="secondary" className="rounded-full px-3 py-1 bg-white dark:bg-card border border-black/5 dark:border-white/5">{t('developer.telemetryTotal')}: {telemetryStats.total}</Badge>
-                          <Badge variant={telemetryStats.errorCount > 0 ? 'destructive' : 'secondary'} className={cn("rounded-full px-3 py-1", telemetryStats.errorCount === 0 && "bg-white dark:bg-card border border-black/5 dark:border-white/5")}>
+                          <Badge variant="secondary" className="rounded-full px-3 py-1 bg-surface-modal border border-black/5 dark:border-white/5">{t('developer.telemetryTotal')}: {telemetryStats.total}</Badge>
+                          <Badge variant={telemetryStats.errorCount > 0 ? 'destructive' : 'secondary'} className={cn("rounded-full px-3 py-1", telemetryStats.errorCount === 0 && "bg-surface-modal border border-black/5 dark:border-white/5")}>
                             {t('developer.telemetryErrors')}: {telemetryStats.errorCount}
                           </Badge>
-                          <Badge variant={telemetryStats.slowCount > 0 ? 'secondary' : 'outline'} className={cn("rounded-full px-3 py-1", telemetryStats.slowCount === 0 && "bg-white dark:bg-card border border-black/5 dark:border-white/5")}>
+                          <Badge variant={telemetryStats.slowCount > 0 ? 'secondary' : 'outline'} className={cn("rounded-full px-3 py-1", telemetryStats.slowCount === 0 && "bg-surface-modal border border-black/5 dark:border-white/5")}>
                             {t('developer.telemetrySlow')}: {telemetryStats.slowCount}
                           </Badge>
                           <div className="ml-auto flex gap-2">
-                            <Button type="button" variant="outline" size="sm" onClick={handleCopyTelemetry} className="rounded-full h-8 px-4 bg-white dark:bg-card border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
+                            <Button type="button" variant="outline" size="sm" onClick={handleCopyTelemetry} className="rounded-full h-8 px-4 bg-surface-modal border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
                               <Copy className="h-3.5 w-3.5 mr-1.5" />
                               {t('common:actions.copy')}
                             </Button>
-                            <Button type="button" variant="outline" size="sm" onClick={handleClearTelemetry} className="rounded-full h-8 px-4 bg-white dark:bg-card border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
+                            <Button type="button" variant="outline" size="sm" onClick={handleClearTelemetry} className="rounded-full h-8 px-4 bg-surface-modal border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/10">
                               {t('common:actions.clear')}
                             </Button>
                           </div>
                         </div>
 
-                        <div className="max-h-80 overflow-auto rounded-xl border border-black/10 dark:border-white/10 bg-white dark:bg-card shadow-inner">
+                        <div className="max-h-80 overflow-auto rounded-xl border border-black/10 dark:border-white/10 bg-surface-modal shadow-inner">
                           {telemetryByEvent.length > 0 && (
                             <div className="border-b border-black/5 dark:border-white/5 bg-black/5 dark:bg-white/5 p-3">
                               <p className="mb-3 text-xs font-semibold text-muted-foreground">
@@ -989,7 +989,7 @@ export function Settings() {
                                 {telemetryByEvent.map((item) => (
                                   <div
                                     key={item.event}
-                                    className="grid grid-cols-[minmax(0,1.6fr)_0.7fr_0.9fr_0.8fr_1fr] gap-2 rounded-lg border border-black/5 dark:border-white/5 bg-white dark:bg-card px-3 py-2"
+                                    className="grid grid-cols-[minmax(0,1.6fr)_0.7fr_0.9fr_0.8fr_1fr] gap-2 rounded-lg border border-black/5 dark:border-white/5 bg-surface-modal px-3 py-2"
                                   >
                                     <span className="truncate font-medium" title={item.event}>{item.event}</span>
                                     <span className="text-muted-foreground">n={item.count}</span>
diff --git a/src/pages/Setup/index.tsx b/src/pages/Setup/index.tsx
index a3ee5e7..d5fc21b 100644
--- a/src/pages/Setup/index.tsx
+++ b/src/pages/Setup/index.tsx
@@ -168,7 +168,7 @@ export function Setup() {
                       ? 'border-primary bg-primary text-primary-foreground'
                       : i === safeStepIndex
                         ? 'border-primary text-primary'
-                        : 'border-slate-600 text-slate-600'
+                        : 'border-muted-foreground/30 text-muted-foreground'
                   )}
                 >
                   {i < safeStepIndex ? (
@@ -181,7 +181,7 @@ export function Setup() {
                   <div
                     className={cn(
                       'h-0.5 w-8 transition-colors',
-                      i < safeStepIndex ? 'bg-primary' : 'bg-slate-600'
+                      i < safeStepIndex ? 'bg-primary' : 'bg-muted-foreground/30'
                     )}
                   />
                 )}
@@ -200,8 +200,8 @@ export function Setup() {
             className="mx-auto max-w-2xl p-8"
           >
             <div className="text-center mb-8">
-              <h1 className="text-3xl font-bold mb-2">{t(`steps.${step.id}.title`)}</h1>
-              <p className="text-slate-400">{t(`steps.${step.id}.description`)}</p>
+              <h1 className="text-3xl font-serif font-normal tracking-tight mb-2">{t(`steps.${step.id}.title`)}</h1>
+              <p className="text-muted-foreground">{t(`steps.${step.id}.description`)}</p>
             </div>
 
             {/* Step-specific content */}
@@ -270,7 +270,7 @@ function WelcomeContent() {
       <div className="mb-4 flex justify-center">
         <img src={clawxIcon} alt="ClawX" className="h-16 w-16" />
       </div>
-      <h2 className="text-xl font-semibold">{t('welcome.title')}</h2>
+      <h2 className="text-xl font-serif font-normal tracking-tight">{t('welcome.title')}</h2>
       <p className="text-muted-foreground">
         {t('welcome.description')}
       </p>
@@ -283,7 +283,12 @@ function WelcomeContent() {
             variant={language === lang.code ? 'secondary' : 'ghost'}
             size="sm"
             onClick={() => setLanguage(lang.code)}
-            className="h-7 text-xs"
+            className={cn(
+              'h-7 text-xs',
+              language === lang.code
+                ? 'bg-black/5 dark:bg-white/10 text-foreground'
+                : 'text-muted-foreground hover:bg-black/5 dark:hover:bg-white/5',
+            )}
           >
             {lang.label}
           </Button>
@@ -292,19 +297,19 @@ function WelcomeContent() {
 
       <ul className="text-left space-y-2 text-muted-foreground pt-2">
         <li className="flex items-center gap-2">
-          <CheckCircle2 className="h-5 w-5 text-green-400" />
+          <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400" />
           {t('welcome.features.noCommand')}
         </li>
         <li className="flex items-center gap-2">
-          <CheckCircle2 className="h-5 w-5 text-green-400" />
+          <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400" />
           {t('welcome.features.modernUI')}
         </li>
         <li className="flex items-center gap-2">
-          <CheckCircle2 className="h-5 w-5 text-green-400" />
+          <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400" />
           {t('welcome.features.bundles')}
         </li>
         <li className="flex items-center gap-2">
-          <CheckCircle2 className="h-5 w-5 text-green-400" />
+          <CheckCircle2 className="h-5 w-5 text-green-600 dark:text-green-400" />
           {t('welcome.features.crossPlatform')}
         </li>
       </ul>
@@ -516,7 +521,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
   const renderStatus = (status: 'checking' | 'success' | 'error', message: string) => {
     if (status === 'checking') {
       return (
-        <span className="flex items-center gap-2 text-yellow-400 whitespace-nowrap">
+        <span className="flex items-center gap-2 text-yellow-700 dark:text-yellow-400 whitespace-nowrap">
           <Loader2 className="h-5 w-5 flex-shrink-0 animate-spin" />
           {message || 'Checking...'}
         </span>
@@ -524,7 +529,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
     }
     if (status === 'success') {
       return (
-        <span className="flex items-center gap-2 text-green-400 whitespace-nowrap">
+        <span className="flex items-center gap-2 text-green-700 dark:text-green-400 whitespace-nowrap">
           <CheckCircle2 className="h-5 w-5 flex-shrink-0" />
           {message}
         </span>
@@ -535,13 +540,13 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
     const displayMsg = isLong ? message.slice(0, ERROR_TRUNCATE_LEN) : message;
 
     return (
-      <span className="flex items-center gap-2 text-red-400 whitespace-nowrap">
+      <span className="flex items-center gap-2 text-red-700 dark:text-red-400 whitespace-nowrap">
         <XCircle className="h-5 w-5 flex-shrink-0" />
         <span>{displayMsg}</span>
         {isLong && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className="cursor-pointer text-red-300 hover:text-red-200 font-medium">...</span>
+              <span className="cursor-pointer text-red-700 dark:text-red-300 hover:text-red-800 dark:hover:text-red-200 font-medium">...</span>
             </TooltipTrigger>
             <TooltipContent side="top" className="max-w-sm whitespace-normal break-words text-xs">
               {message}
@@ -555,7 +560,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between mb-4">
-        <h2 className="text-xl font-semibold">{t('runtime.title')}</h2>
+        <h2 className="text-xl font-serif font-normal tracking-tight">{t('runtime.title')}</h2>
         <div className="flex gap-2">
           <Button variant="ghost" size="sm" onClick={handleShowLogs}>
             {t('runtime.viewLogs')}
@@ -567,13 +572,13 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
         </div>
       </div>
       <div className="space-y-3">
-        <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-muted/50">
+        <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-surface-input/50">
           <span className="text-left">{t('runtime.nodejs')}</span>
           <div className="flex justify-end">
             {renderStatus(checks.nodejs.status, checks.nodejs.message)}
           </div>
         </div>
-        <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-muted/50">
+        <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-surface-input/50">
           <div className="text-left min-w-0">
             <span>{t('runtime.openclaw')}</span>
             {openclawDir && (
@@ -586,7 +591,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
             {renderStatus(checks.openclaw.status, checks.openclaw.message)}
           </div>
         </div>
-        <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-muted/50">
+        <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-3 rounded-lg bg-surface-input/50">
           <div className="flex items-center gap-2 text-left">
             <span>{t('runtime.gateway')}</span>
             {checks.gateway.status === 'error' && (
@@ -602,11 +607,11 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
       </div>
 
       {(checks.nodejs.status === 'error' || checks.openclaw.status === 'error') && (
-        <div className="mt-4 p-4 rounded-lg bg-red-900/20 border border-red-500/20">
+        <div className="mt-4 p-4 rounded-lg bg-red-500/10 border border-red-500/20">
           <div className="flex items-start gap-2">
-            <AlertCircle className="h-5 w-5 text-red-400 mt-0.5" />
+            <AlertCircle className="h-5 w-5 text-red-700 dark:text-red-400 mt-0.5" />
             <div>
-              <p className="font-medium text-red-400">{t('runtime.issue.title')}</p>
+              <p className="font-medium text-red-700 dark:text-red-400">{t('runtime.issue.title')}</p>
               <p className="text-sm text-muted-foreground mt-1">
                 {t('runtime.issue.desc')}
               </p>
@@ -630,7 +635,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
               </Button>
             </div>
           </div>
-          <pre className="text-xs text-slate-300 bg-black/50 p-3 rounded max-h-60 overflow-auto whitespace-pre-wrap font-mono">
+          <pre className="text-xs text-foreground/80 bg-black/5 dark:bg-white/10 p-3 rounded max-h-60 overflow-auto whitespace-pre-wrap font-mono">
             {logContent || t('runtime.logs.noLogs')}
           </pre>
         </div>
@@ -708,13 +713,13 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
   const getStatusIcon = (status: InstallStatus) => {
     switch (status) {
       case 'pending':
-        return <div className="h-5 w-5 rounded-full border-2 border-slate-500" />;
+        return <div className="h-5 w-5 rounded-full border-2 border-muted-foreground/30" />;
       case 'installing':
         return <Loader2 className="h-5 w-5 text-primary animate-spin" />;
       case 'completed':
-        return <CheckCircle2 className="h-5 w-5 text-green-400" />;
+        return <CheckCircle2 className="h-5 w-5 text-green-700 dark:text-green-400" />;
       case 'failed':
-        return <XCircle className="h-5 w-5 text-red-400" />;
+        return <XCircle className="h-5 w-5 text-red-700 dark:text-red-400" />;
     }
   };
 
@@ -725,9 +730,9 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
       case 'installing':
         return <span className="text-primary">{t('installing.status.installing')}</span>;
       case 'completed':
-        return <span className="text-green-400">{t('installing.status.installed')}</span>;
+        return <span className="text-green-700 dark:text-green-400">{t('installing.status.installed')}</span>;
       case 'failed':
-        return <span className="text-red-400">{t('installing.status.failed')}</span>;
+        return <span className="text-red-700 dark:text-red-400">{t('installing.status.failed')}</span>;
     }
   };
 
@@ -735,7 +740,7 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
     <div className="space-y-6">
       <div className="text-center">
         <div className="text-4xl mb-4">⚙️</div>
-        <h2 className="text-xl font-semibold mb-2">{t('installing.title')}</h2>
+        <h2 className="text-xl font-serif font-normal tracking-tight mb-2">{t('installing.title')}</h2>
         <p className="text-muted-foreground">
           {t('installing.subtitle')}
         </p>
@@ -766,7 +771,7 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
             animate={{ opacity: 1, y: 0 }}
             className={cn(
               'flex items-center justify-between p-3 rounded-lg',
-              skill.status === 'installing' ? 'bg-muted' : 'bg-muted/50'
+              skill.status === 'installing' ? 'bg-surface-input' : 'bg-surface-input/50'
             )}
           >
             <div className="flex items-center gap-3">
@@ -786,18 +791,18 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
         <motion.div
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
-          className="p-4 rounded-lg bg-red-900/30 border border-red-500/50 text-red-200 text-sm"
+          className="p-4 rounded-lg bg-red-500/10 border border-red-500/30 text-red-700 dark:text-red-300 text-sm"
         >
           <div className="flex items-start gap-2">
-            <AlertCircle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
+            <AlertCircle className="h-5 w-5 text-red-700 dark:text-red-400 shrink-0 mt-0.5" />
             <div className="space-y-1">
               <p className="font-semibold">{t('installing.error')}</p>
-              <pre className="text-xs bg-black/30 p-2 rounded overflow-x-auto whitespace-pre-wrap font-monospace">
+              <pre className="text-xs bg-black/5 dark:bg-white/5 p-2 rounded overflow-x-auto whitespace-pre-wrap font-mono">
                 {errorMessage}
               </pre>
               <Button
                 variant="link"
-                className="text-red-400 p-0 h-auto text-xs underline"
+                className="text-red-700 dark:text-red-400 p-0 h-auto text-xs underline"
                 onClick={() => window.location.reload()}
               >
                 {t('installing.restart')}
@@ -808,7 +813,7 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
       )}
 
       {!errorMessage && (
-        <p className="text-sm text-slate-400 text-center">
+        <p className="text-sm text-muted-foreground text-center">
           {t('installing.wait')}
         </p>
       )}
@@ -840,21 +845,21 @@ function CompleteContent({ installedSkills }: CompleteContentProps) {
   return (
     <div className="text-center space-y-6">
       <div className="text-6xl mb-4">🎉</div>
-      <h2 className="text-xl font-semibold">{t('complete.title')}</h2>
+      <h2 className="text-xl font-serif font-normal tracking-tight">{t('complete.title')}</h2>
       <p className="text-muted-foreground">
         {t('complete.subtitle')}
       </p>
 
       <div className="space-y-3 text-left max-w-md mx-auto">
-        <div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
+        <div className="flex items-center justify-between p-3 rounded-lg bg-surface-input/50">
           <span>{t('complete.components')}</span>
-          <span className="text-green-400">
+          <span className="text-green-700 dark:text-green-400">
             {installedSkillNames || `${installedSkills.length} ${t('installing.status.installed')}`}
           </span>
         </div>
-        <div className="flex items-center justify-between p-3 rounded-lg bg-muted/50">
+        <div className="flex items-center justify-between p-3 rounded-lg bg-surface-input/50">
           <span>{t('complete.gateway')}</span>
-          <span className={gatewayStatus.state === 'running' && gatewayStatus.gatewayReady !== false ? 'text-green-400' : gatewayStatus.state === 'running' ? 'text-red-400' : 'text-yellow-400'}>
+          <span className={gatewayStatus.state === 'running' && gatewayStatus.gatewayReady !== false ? 'text-green-700 dark:text-green-400' : gatewayStatus.state === 'running' ? 'text-red-700 dark:text-red-400' : 'text-yellow-700 dark:text-yellow-400'}>
             {gatewayStatus.state === 'running'
               ? gatewayStatus.gatewayReady !== false
                 ? `✓ ${t('complete.running')}`
diff --git a/src/pages/Skills/index.tsx b/src/pages/Skills/index.tsx
index 00313c9..9acbe26 100644
--- a/src/pages/Skills/index.tsx
+++ b/src/pages/Skills/index.tsx
@@ -135,7 +135,7 @@ function SkillDetailDialog({ skill, isOpen, onClose, onToggle, onUninstall, onOp
         {/* Scrollable Content */}
         <div className="flex-1 overflow-y-auto px-8 py-10">
           <div className="flex flex-col items-center mb-8">
-            <div className="w-16 h-16 flex items-center justify-center rounded-full bg-white dark:bg-accent border border-black/5 dark:border-white/5 shrink-0 mb-4 relative shadow-sm">
+            <div className="w-16 h-16 flex items-center justify-center rounded-full bg-surface-modal border border-black/5 dark:border-white/5 shrink-0 mb-4 relative shadow-sm">
               <span className="text-3xl">{skill.icon || '🔧'}</span>
               {skill.isCore && (
                 <div className="absolute -bottom-1 -right-1 bg-surface-modal rounded-full p-1 shadow-sm border border-black/5 dark:border-white/5">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index af6585f..ba964c4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -28,6 +28,90 @@
  *     Do NOT hand-write `var(--xxx)` or `hsl(var(--xxx))` in components.
  *   - Adding a new color: define the CSS variable here → map it to a
  *     utility token in tailwind.config.js → use the utility in code.
+ *   - For component-level idioms (selected state, status colours, modal
+ *     scrims, page headings, etc.) see the *Component conventions* block
+ *     directly below.
+ * ────────────────────────────────────────────────────────────────────────── */
+
+/* ──────────────────────────────────────────────────────────────────────────
+ * Component conventions — substitution table
+ * ──────────────────────────────────────────────────────────────────────────
+ *
+ * Idioms captured from the global normalisation pass. When writing or
+ * reviewing a component, prefer the *replacement* over the *antipattern*.
+ * Reference implementations are noted in parentheses.
+ *
+ *   PANEL SURFACES
+ *   ─────────────────────────────────────────────────────────────────────
+ *     bg-white dark:bg-card           →  bg-surface-modal
+ *     bg-white dark:bg-background     →  bg-surface-modal
+ *     hover:bg-white dark:hover:bg-card → hover:bg-surface-modal
+ *     bg-muted   (when used as a panel) →  bg-surface-input
+ *     bg-[hsl(var(--xxx))] / arbitrary  →  bg-<named-token>
+ *
+ *     bg-surface-modal = raised cream  panels, popovers, inputs, cards
+ *     bg-surface-input = recessed cream  code/log <pre>, segmented track
+ *
+ *     Never write `dark:bg-card` / `dark:bg-muted` companion classes —
+ *     the surface tokens already redirect in dark mode.
+ *
+ *   SELECTED / ACTIVE STATE  (sidebar nav, theme & language picker,
+ *                             segmented controls, composer chips)
+ *   ─────────────────────────────────────────────────────────────────────
+ *     selected   :  bg-black/5 dark:bg-white/10 text-foreground
+ *     hover      :  hover:bg-black/5 dark:hover:bg-white/5
+ *     idle text  :  text-muted-foreground (or text-foreground/80 / 70)
+ *
+ *     Reference: components/layout/Sidebar.tsx, pages/Settings/index.tsx
+ *     (theme + language picker).
+ *
+ *   MODAL / SCRIM BACKDROPS
+ *   ─────────────────────────────────────────────────────────────────────
+ *     bg-black/30 dark:bg-black/60      (canonical: components/ui/sheet.tsx)
+ *
+ *     Image lightbox may use bg-black/80 when a darker scrim is intentional
+ *     (see pages/Chat/ChatMessage.tsx).
+ *
+ *   STATUS COLOURS  (success / warning / error)
+ *   ─────────────────────────────────────────────────────────────────────
+ *     icon + inline text  :  text-{green|yellow|red}-700  dark:text-…-400
+ *     lighter accent text :  text-{…}-600                 dark:text-…-500
+ *                            (welcome feature checks, secondary captions)
+ *     panel surface       :  bg-{…}-500/10  border border-{…}-500/20
+ *     status dot          :  bg-{green|yellow|red}-500    (no dark variant)
+ *
+ *     Avoid `text-X-400` alone — that shade is tuned for dark mode and
+ *     washes out against the cream light theme. Same for `bg-red-900/20`
+ *     panel backgrounds (a dark-only relic).
+ *
+ *   NEUTRAL GREYS  (escape hatches → semantic tokens)
+ *   ─────────────────────────────────────────────────────────────────────
+ *     bg-slate-600 / bg-gray-400        →  bg-muted-foreground/30
+ *                                          (inactive dots, dividers)
+ *     text-slate-300 / 400              →  text-muted-foreground
+ *     text-gray-400                     →  text-muted-foreground
+ *     border-slate-600                  →  border-border
+ *
+ *   TYPOGRAPHY
+ *   ─────────────────────────────────────────────────────────────────────
+ *     page H1 / H2     :  font-serif font-normal tracking-tight
+ *                         · hero pages   text-5xl md:text-6xl  (Settings,
+ *                                                               Cron, Models)
+ *                         · wizard steps text-3xl / section H2 text-xl
+ *                                                              (Setup)
+ *     monospace        :  font-mono     (NOT `font-monospace` — dead class)
+ *     pixel text       :  text-[13px] → text-meta
+ *                         text-[10px] → text-2xs
+ *                         Full named scale (2xs / tiny / meta / subtitle /
+ *                         stat) defined in tailwind.config.js.
+ *
+ *   PRIMARY CTA
+ *   ─────────────────────────────────────────────────────────────────────
+ *     Use the default <Button> styling (variant="default", which renders
+ *     `bg-primary`). Do not hand-apply `bg-brand` to action buttons —
+ *     `bg-brand` / `bg-brand-hover` are reserved for branded surfaces
+ *     where a divergent Apple-blue is explicitly desired (rare).
+ *     Reference: pages/Models "+ Add Provider" trigger.
  * ────────────────────────────────────────────────────────────────────────── */
 
 @layer base {
diff --git a/tests/unit/chat-page-execution-graph.test.tsx b/tests/unit/chat-page-execution-graph.test.tsx
index 04cecb9..fae51f2 100644
--- a/tests/unit/chat-page-execution-graph.test.tsx
+++ b/tests/unit/chat-page-execution-graph.test.tsx
@@ -301,7 +301,7 @@ describe('Chat execution graph lifecycle', () => {
     render(<Chat />);
 
     expect(await screen.findByTestId('chat-scroll-to-latest')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: '跳转到最新对话' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'scrollToLatest' })).toBeInTheDocument();
   });
 
   it('stops showing trailing thinking and renders run error callout after terminal model error', async () => {
diff --git a/tests/unit/i18n-locale-parity.test.ts b/tests/unit/i18n-locale-parity.test.ts
new file mode 100644
index 0000000..a52fcba
--- /dev/null
+++ b/tests/unit/i18n-locale-parity.test.ts
@@ -0,0 +1,220 @@
+/**
+ * i18n locale parity test
+ *
+ * Verifies that every locale under `src/i18n/locales/` exposes the same
+ * namespace files and the same set of leaf keys. Also checks that
+ * `{{interpolation}}` tokens used in the reference locale (English) are
+ * preserved in every other locale, so we don't silently drop variables
+ * like `{{error}}` or `{{name}}` during translation.
+ *
+ * This test is the source-of-truth check the i18n scan script relies on
+ * and runs in CI to prevent locale drift.
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const REFERENCE_LOCALE = 'en';
+const LOCALES_DIR = path.resolve(__dirname, '../../src/i18n/locales');
+
+type JsonValue = string | number | boolean | null | JsonObject | JsonValue[];
+interface JsonObject {
+  [key: string]: JsonValue;
+}
+
+function readJson(file: string): JsonObject {
+  const raw = fs.readFileSync(file, 'utf8');
+  return JSON.parse(raw) as JsonObject;
+}
+
+/**
+ * Find duplicate keys within the same object scope. JSON.parse silently keeps
+ * only the last value for duplicated keys, so we need to scan the raw token
+ * stream to catch them. Returns a list of `path.to.duplicatedKey` entries.
+ */
+function findDuplicateKeys(raw: string): string[] {
+  const duplicates: string[] = [];
+  // Stack of Map<key, count> per object scope. Arrays push `null` to skip.
+  const stack: Array<Map<string, number> | null> = [];
+  // Path stack mirrors stack but uses string segments for objects.
+  const pathStack: string[] = [];
+  let pendingKey: string | null = null;
+  let i = 0;
+  const n = raw.length;
+
+  const inObject = (): boolean => stack.length > 0 && stack[stack.length - 1] !== null;
+
+  while (i < n) {
+    const ch = raw[i];
+    if (ch === '"') {
+      // Read string literal (handle escapes).
+      const start = ++i;
+      let s = '';
+      while (i < n) {
+        const c = raw[i];
+        if (c === '\\') {
+          s += raw.slice(start, i) + raw[i + 1];
+          i += 2;
+          continue;
+        }
+        if (c === '"') break;
+        i += 1;
+      }
+      s = raw.slice(start, i).replace(/\\(.)/g, '$1');
+      i += 1;
+      if (inObject()) {
+        let j = i;
+        while (j < n && /\s/.test(raw[j])) j += 1;
+        if (raw[j] === ':') {
+          const scope = stack[stack.length - 1] as Map<string, number>;
+          scope.set(s, (scope.get(s) ?? 0) + 1);
+          if ((scope.get(s) ?? 0) > 1) {
+            duplicates.push([...pathStack, s].filter(Boolean).join('.'));
+          }
+          pendingKey = s;
+        }
+      }
+      continue;
+    }
+    if (ch === '{') {
+      stack.push(new Map<string, number>());
+      pathStack.push(pendingKey ?? '');
+      pendingKey = null;
+    } else if (ch === '[') {
+      stack.push(null);
+      pathStack.push(pendingKey ?? '');
+      pendingKey = null;
+    } else if (ch === '}' || ch === ']') {
+      stack.pop();
+      pathStack.pop();
+      pendingKey = null;
+    } else if (ch === ',') {
+      pendingKey = null;
+    }
+    i += 1;
+  }
+  return [...new Set(duplicates)].sort();
+}
+
+function listLocales(): string[] {
+  return fs
+    .readdirSync(LOCALES_DIR, { withFileTypes: true })
+    .filter((entry) => entry.isDirectory())
+    .map((entry) => entry.name)
+    .sort();
+}
+
+function listNamespaces(locale: string): string[] {
+  return fs
+    .readdirSync(path.join(LOCALES_DIR, locale))
+    .filter((name) => name.endsWith('.json'))
+    .map((name) => name.replace(/\.json$/, ''))
+    .sort();
+}
+
+function collectLeafKeys(obj: JsonValue, prefix = '', out: Set<string> = new Set()): Set<string> {
+  if (obj === null || typeof obj !== 'object' || Array.isArray(obj)) {
+    out.add(prefix);
+    return out;
+  }
+  const keys = Object.keys(obj);
+  if (keys.length === 0) {
+    out.add(prefix);
+    return out;
+  }
+  for (const key of keys) {
+    const next = prefix ? `${prefix}.${key}` : key;
+    collectLeafKeys((obj as JsonObject)[key], next, out);
+  }
+  return out;
+}
+
+function getValueAtPath(obj: JsonValue, dottedPath: string): JsonValue | undefined {
+  if (!dottedPath) return obj;
+  const segments = dottedPath.split('.');
+  let current: JsonValue | undefined = obj;
+  for (const seg of segments) {
+    if (current === null || typeof current !== 'object' || Array.isArray(current)) return undefined;
+    current = (current as JsonObject)[seg];
+    if (current === undefined) return undefined;
+  }
+  return current;
+}
+
+/** Extract `{{var}}` interpolation tokens (i18next default style). */
+function extractTokens(value: JsonValue): Set<string> {
+  const tokens = new Set<string>();
+  const visit = (v: JsonValue): void => {
+    if (typeof v === 'string') {
+      const re = /\{\{\s*([^}\s]+)\s*\}\}/g;
+      let m: RegExpExecArray | null;
+      while ((m = re.exec(v)) !== null) tokens.add(m[1]);
+    } else if (Array.isArray(v)) {
+      v.forEach(visit);
+    } else if (v && typeof v === 'object') {
+      Object.values(v).forEach(visit);
+    }
+  };
+  visit(value);
+  return tokens;
+}
+
+const locales = listLocales();
+const referenceNamespaces = listNamespaces(REFERENCE_LOCALE);
+
+describe('i18n locale parity', () => {
+  it('discovers at least the four shipped locales (en, zh, ja, ru)', () => {
+    expect(locales).toEqual(expect.arrayContaining(['en', 'zh', 'ja', 'ru']));
+  });
+
+  it.each(locales.filter((l) => l !== REFERENCE_LOCALE))(
+    'locale "%s" ships the same namespace files as the reference',
+    (locale) => {
+      const namespaces = listNamespaces(locale);
+      expect(namespaces).toEqual(referenceNamespaces);
+    },
+  );
+
+  describe.each(referenceNamespaces)('namespace "%s"', (namespace) => {
+    const refData = readJson(path.join(LOCALES_DIR, REFERENCE_LOCALE, `${namespace}.json`));
+    const refKeys = collectLeafKeys(refData);
+
+    it.each(locales)(
+      'locale "%s" has no duplicate keys at the same object depth',
+      (locale) => {
+        const raw = fs.readFileSync(path.join(LOCALES_DIR, locale, `${namespace}.json`), 'utf8');
+        expect(findDuplicateKeys(raw)).toEqual([]);
+      },
+    );
+
+    it.each(locales.filter((l) => l !== REFERENCE_LOCALE))(
+      'locale "%s" has identical leaf keys to "%s"',
+      (locale) => {
+        const data = readJson(path.join(LOCALES_DIR, locale, `${namespace}.json`));
+        const keys = collectLeafKeys(data);
+        const missing = [...refKeys].filter((k) => !keys.has(k)).sort();
+        const extra = [...keys].filter((k) => !refKeys.has(k)).sort();
+        expect({ missing, extra }).toEqual({ missing: [], extra: [] });
+      },
+    );
+
+    it.each(locales.filter((l) => l !== REFERENCE_LOCALE))(
+      'locale "%s" preserves all "{{interpolation}}" tokens',
+      (locale) => {
+        const data = readJson(path.join(LOCALES_DIR, locale, `${namespace}.json`));
+        const mismatches: Array<{ key: string; missingTokens: string[]; extraTokens: string[] }> = [];
+        for (const key of refKeys) {
+          if (!collectLeafKeys(data).has(key)) continue;
+          const refTokens = extractTokens(getValueAtPath(refData, key) ?? '');
+          const locTokens = extractTokens(getValueAtPath(data, key) ?? '');
+          const missingTokens = [...refTokens].filter((t) => !locTokens.has(t)).sort();
+          const extraTokens = [...locTokens].filter((t) => !refTokens.has(t)).sort();
+          if (missingTokens.length || extraTokens.length) {
+            mismatches.push({ key, missingTokens, extraTokens });
+          }
+        }
+        expect(mismatches).toEqual([]);
+      },
+    );
+  });
+});