diff --git a/docs/screenshots/en/1.png b/docs/screenshots/en/1.png
index 3869726..2714bd3 100644
Binary files a/docs/screenshots/en/1.png and b/docs/screenshots/en/1.png differ
diff --git a/docs/screenshots/en/2.png b/docs/screenshots/en/2.png
index 355cbd1..cfd91ac 100644
Binary files a/docs/screenshots/en/2.png and b/docs/screenshots/en/2.png differ
diff --git a/docs/screenshots/en/3.png b/docs/screenshots/en/3.png
index 1905d80..8a3fc73 100644
Binary files a/docs/screenshots/en/3.png and b/docs/screenshots/en/3.png differ
diff --git a/docs/screenshots/en/4.png b/docs/screenshots/en/4.png
index 8527d7c..ea6db27 100644
Binary files a/docs/screenshots/en/4.png and b/docs/screenshots/en/4.png differ
diff --git a/docs/screenshots/en/5.png b/docs/screenshots/en/5.png
index f74664d..c8c64ad 100644
Binary files a/docs/screenshots/en/5.png and b/docs/screenshots/en/5.png differ
diff --git a/docs/screenshots/jp/1.png b/docs/screenshots/jp/1.png
index 5930746..c4266d4 100644
Binary files a/docs/screenshots/jp/1.png and b/docs/screenshots/jp/1.png differ
diff --git a/docs/screenshots/jp/2.png b/docs/screenshots/jp/2.png
index c261f16..be67f6a 100644
Binary files a/docs/screenshots/jp/2.png and b/docs/screenshots/jp/2.png differ
diff --git a/docs/screenshots/jp/3.png b/docs/screenshots/jp/3.png
index 48fddaf..f2bca32 100644
Binary files a/docs/screenshots/jp/3.png and b/docs/screenshots/jp/3.png differ
diff --git a/docs/screenshots/jp/4.png b/docs/screenshots/jp/4.png
index 1b83996..84a7cc3 100644
Binary files a/docs/screenshots/jp/4.png and b/docs/screenshots/jp/4.png differ
diff --git a/docs/screenshots/jp/5.png b/docs/screenshots/jp/5.png
index c0d54c1..025dc21 100644
Binary files a/docs/screenshots/jp/5.png and b/docs/screenshots/jp/5.png differ
diff --git a/docs/screenshots/zh-CN/1.png b/docs/screenshots/zh-CN/1.png
index a2299c1..3c6ca2f 100644
Binary files a/docs/screenshots/zh-CN/1.png and b/docs/screenshots/zh-CN/1.png differ
diff --git a/docs/screenshots/zh-CN/2.png b/docs/screenshots/zh-CN/2.png
index de9b689..6ca8e55 100644
Binary files a/docs/screenshots/zh-CN/2.png and b/docs/screenshots/zh-CN/2.png differ
diff --git a/docs/screenshots/zh-CN/3.png b/docs/screenshots/zh-CN/3.png
index e67265a..afa4680 100644
Binary files a/docs/screenshots/zh-CN/3.png and b/docs/screenshots/zh-CN/3.png differ
diff --git a/docs/screenshots/zh-CN/4.png b/docs/screenshots/zh-CN/4.png
index 505ce40..ce67f0e 100644
Binary files a/docs/screenshots/zh-CN/4.png and b/docs/screenshots/zh-CN/4.png differ
diff --git a/docs/screenshots/zh-CN/5.png b/docs/screenshots/zh-CN/5.png
index b4dcda3..30a889d 100644
Binary files a/docs/screenshots/zh-CN/5.png and b/docs/screenshots/zh-CN/5.png differ
diff --git a/package.json b/package.json
index 7e57dd2..c9fc636 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "build": "tsc && vite build",
     "check": "tsc --noEmit",
     "preview": "vite preview",
+    "test:ui:accessibility": "node tests/app-shell-accessibility-ui.cjs",
+    "screenshots": "node scripts/capture-readme-screenshots.cjs",
     "tauri": "tauri"
   },
   "dependencies": {
diff --git a/scripts/capture-readme-screenshots.cjs b/scripts/capture-readme-screenshots.cjs
new file mode 100644
index 0000000..a189386
--- /dev/null
+++ b/scripts/capture-readme-screenshots.cjs
@@ -0,0 +1,84 @@
+const { chromium } = require(process.env.PLAYWRIGHT_MODULE || 'playwright');
+const fs = require('node:fs/promises');
+const path = require('node:path');
+
+const root = path.resolve(__dirname, '..');
+const locales = [
+  { directory: 'zh-CN', value: 'zh-CN' },
+  { directory: 'en', value: 'en' },
+  { directory: 'jp', value: 'ja' },
+];
+const pages = [
+  { file: '1.png', navigationIndex: 0 },
+  { file: '2.png', navigationIndex: 2 },
+  { file: '3.png', navigationIndex: 1 },
+  { file: '4.png', navigationIndex: 4 },
+  { file: '5.png', navigationIndex: 3 },
+];
+
+(async () => {
+  const { createServer } = await import('vite');
+  let baseUrl = 'http://127.0.0.1:1420/';
+  let server;
+  let browser;
+  try {
+    try {
+      const response = await fetch(baseUrl);
+      if (!response.ok) throw new Error(String(response.status));
+    } catch {
+      const react = (await import('@vitejs/plugin-react')).default;
+      server = await createServer({
+        configFile: false,
+        root,
+        plugins: [react()],
+        logLevel: 'error',
+        server: { host: '127.0.0.1', port: 1420, strictPort: false },
+      });
+      await server.listen();
+      const address = server.httpServer.address();
+      if (typeof address === 'object' && address) {
+        baseUrl = `http://127.0.0.1:${address.port}/`;
+      }
+      const response = await fetch(baseUrl);
+      if (!response.ok) throw new Error(`Vite server failed at ${baseUrl}`);
+      await response.text();
+    }
+    const channel = process.env.PLAYWRIGHT_CHANNEL || (process.platform === 'win32' ? 'msedge' : undefined);
+    browser = await chromium.launch(channel ? { channel, headless: true } : { headless: true });
+
+    for (const locale of locales) {
+      const context = await browser.newContext({
+        viewport: { width: 1396, height: 900 },
+        deviceScaleFactor: 1,
+        colorScheme: 'light',
+      });
+      const page = await context.newPage();
+      await page.goto(`${baseUrl}?mock=running`, { waitUntil: 'commit' });
+      await page.locator('.app-shell').waitFor();
+      if (locale.value !== 'zh-CN') {
+        await page.locator('.sidebar-language-trigger').click();
+        await page.locator(`#sidebar-language-list [role="option"] span[lang="${locale.value}"]`).click();
+      }
+      await page.locator('#browser-mock-toolbar').evaluate((element) => { element.style.display = 'none'; });
+      const outputDirectory = path.join(root, 'docs', 'screenshots', locale.directory);
+      await fs.mkdir(outputDirectory, { recursive: true });
+
+      for (const target of pages) {
+        await page.locator('.nav-section button').nth(target.navigationIndex).click();
+        await page.waitForTimeout(350);
+        await page.screenshot({
+          path: path.join(outputDirectory, target.file),
+          animations: 'disabled',
+        });
+      }
+      await context.close();
+    }
+    console.log('Updated README screenshots for zh-CN, en and ja.');
+  } finally {
+    if (browser) await browser.close();
+    if (server) await server.close();
+  }
+})().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/src/App.tsx b/src/App.tsx
index 56d4ddc..fabf66b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import { MessageNotice } from './appNotice';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
 import {
@@ -35,6 +35,7 @@ import { AppUpdateDialog, AppUpdateProvider, useAppUpdate } from './appUpdate';
 import { appUpdateIndicatorState } from './appUpdateModel';
 import { canOpenAppPage, isAlwaysAvailablePage } from './navigation';
 import { useThemePreference } from './theme';
+import { useDialogFocusTrap } from './components/useDialogFocusTrap';
 
 const CONTACT_URL = 'https://qm.qq.com/q/3queDaIG';
 
@@ -131,7 +132,13 @@ function AppContent() {
   const [languageMenuOpen, setLanguageMenuOpen] = useState(false);
   const [theme, setTheme] = useThemePreference();
   const [windowsClosePrompt, setWindowsClosePrompt] = useState<WindowsClosePrompt | null>(null);
-  const closeDialogRef = useRef<HTMLElement>(null);
+  const closeDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: Boolean(windowsClosePrompt),
+    onEscape: windowsClosePrompt?.resolvingAction
+      ? undefined
+      : () => setWindowsClosePrompt(null),
+    preventEscape: Boolean(windowsClosePrompt?.resolvingAction),
+  });
   const languageMenuRef = useRef<HTMLDivElement>(null);
   const languageButtonRef = useRef<HTMLButtonElement>(null);
   const { status } = useCoreRuntime();
@@ -218,16 +225,21 @@ function AppContent() {
     };
   }, []);
 
-  useEffect(() => {
-    if (!windowsClosePrompt || windowsClosePrompt.resolvingAction) {
-      return;
-    }
-
-    const frame = window.requestAnimationFrame(() => {
-      closeDialogRef.current?.focus();
-    });
-    return () => window.cancelAnimationFrame(frame);
-  }, [windowsClosePrompt]);
+  const handleLanguageListKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+    const options = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="option"]'));
+    if (!options.length) return;
+    const current = options.indexOf(document.activeElement as HTMLButtonElement);
+    const next = event.key === 'Home'
+      ? 0
+      : event.key === 'End'
+        ? options.length - 1
+        : event.key === 'ArrowDown'
+          ? (Math.max(current, -1) + 1) % options.length
+          : (current <= 0 ? options.length : current) - 1;
+    event.preventDefault();
+    options[next]?.focus();
+  };
 
   const select = (pageId: PageId) => {
     if (!canOpenAppPage(pageId, coreReady)) {
@@ -383,6 +395,15 @@ function AppContent() {
                 aria-expanded={languageMenuOpen}
                 aria-controls="sidebar-language-list"
                 onClick={() => setLanguageMenuOpen((open) => !open)}
+                onKeyDown={(event) => {
+                  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+                  event.preventDefault();
+                  setLanguageMenuOpen(true);
+                  window.requestAnimationFrame(() => {
+                    const options = languageMenuRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]');
+                    options?.[event.key === 'ArrowUp' ? options.length - 1 : 0]?.focus();
+                  });
+                }}
               >
                 <Languages size={16} aria-hidden="true" />
                 <span lang={selectedLanguage.value}>{selectedLanguage.nativeLabel}</span>
@@ -398,6 +419,7 @@ function AppContent() {
                   className="sidebar-language-list"
                   role="listbox"
                   aria-label={t('app.language')}
+                  onKeyDown={handleLanguageListKeyDown}
                 >
                   {languageOptions.map((option) => {
                     const selected = option.value === locale;
@@ -411,6 +433,7 @@ function AppContent() {
                         onClick={() => {
                           setLocale(option.value);
                           setLanguageMenuOpen(false);
+                          window.requestAnimationFrame(() => languageButtonRef.current?.focus());
                         }}
                       >
                         <span lang={option.value}>{option.nativeLabel}</span>
@@ -466,11 +489,6 @@ function AppContent() {
             aria-modal="true"
             aria-labelledby="close-dialog-title"
             aria-describedby="close-dialog-description"
-            onKeyDown={(event) => {
-              if (event.key === 'Escape') {
-                event.preventDefault();
-              }
-            }}
           >
             <button
               type="button"
diff --git a/src/appUpdate.tsx b/src/appUpdate.tsx
index 10e25c8..6cf6ca5 100644
--- a/src/appUpdate.tsx
+++ b/src/appUpdate.tsx
@@ -13,6 +13,7 @@ import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
 import { Download, RefreshCw } from 'lucide-react';
 import { getCurrentLocale, translate, useI18n, type AppLocale } from './i18n';
+import { useDialogFocusTrap } from './components/useDialogFocusTrap';
 
 export type AppUpdateInfo = {
   currentVersion: string;
@@ -197,6 +198,11 @@ export function AppUpdateDialog() {
     install,
     cancel,
   } = useAppUpdate();
+  const dialogRef = useDialogFocusTrap<HTMLElement>({
+    active: confirmOpen || task.running,
+    onEscape: confirmOpen ? dismissConfirm : undefined,
+    preventEscape: task.running,
+  });
 
   if (!confirmOpen && !task.running) return null;
 
@@ -210,6 +216,7 @@ export function AppUpdateDialog() {
   return (
     <div className="install-dialog-backdrop app-update-dialog-backdrop">
       <section
+        ref={dialogRef}
         className="install-dialog app-update-dialog"
         role="dialog"
         aria-modal="true"
diff --git a/src/components/AuthFileModelsDialog.tsx b/src/components/AuthFileModelsDialog.tsx
index f923ac6..ae349fa 100644
--- a/src/components/AuthFileModelsDialog.tsx
+++ b/src/components/AuthFileModelsDialog.tsx
@@ -4,6 +4,7 @@ import { Check, Copy, LoaderCircle, Search, X } from 'lucide-react';
 import { useI18n } from '../i18n';
 import { managementApi } from '../services/managementApi';
 import { oauthModelsFromPayload, type OAuthModelDefinition } from '../services/oauthModels';
+import { useDialogFocusTrap } from './useDialogFocusTrap';
 
 type AuthFileModelsDialogProps = {
   name: string;
@@ -17,6 +18,7 @@ export function AuthFileModelsDialog({ name, onClose }: AuthFileModelsDialogProp
   const [error, setError] = useState('');
   const [search, setSearch] = useState('');
   const [copied, setCopied] = useState('');
+  const dialogRef = useDialogFocusTrap<HTMLElement>({ onEscape: onClose });
 
   useEffect(() => {
     let cancelled = false;
@@ -45,14 +47,14 @@ export function AuthFileModelsDialog({ name, onClose }: AuthFileModelsDialogProp
 
   return (
     <div className="model-discovery-backdrop" onMouseDown={(event) => { if (event.currentTarget === event.target) onClose(); }}>
-      <section className="model-discovery-dialog auth-model-dialog auth-model-view-dialog" role="dialog" aria-modal="true" aria-labelledby="auth-model-view-title" onKeyDown={(event) => { if (event.key === 'Escape') onClose(); }}>
+      <section ref={dialogRef} className="model-discovery-dialog auth-model-dialog auth-model-view-dialog" role="dialog" aria-modal="true" aria-labelledby="auth-model-view-title">
         <div className="model-discovery-header">
           <div>
             <h2 id="auth-model-view-title">{t('authFiles.models.viewTitle')}</h2>
             <span className="auth-model-target">{name}</span>
             <span>{t('authFiles.models.viewDescription')}</span>
           </div>
-          <button type="button" className="icon-button quiet" onClick={onClose} title={t('common.close')}><X size={18} /></button>
+          <button type="button" className="icon-button quiet" onClick={onClose} title={t('common.close')} aria-label={t('common.close')}><X size={18} aria-hidden="true" /></button>
         </div>
         <div className="model-discovery-search">
           <Search size={16} aria-hidden="true" />
diff --git a/src/components/ConfirmationDialog.tsx b/src/components/ConfirmationDialog.tsx
index 07a3890..1b40c81 100644
--- a/src/components/ConfirmationDialog.tsx
+++ b/src/components/ConfirmationDialog.tsx
@@ -60,7 +60,7 @@ export function ConfirmationDialog({ title, message, confirmText, warning, detai
       <section ref={dialogRef} className="config-dialog app-confirm-dialog" role="alertdialog" aria-modal="true" aria-labelledby={titleId} aria-describedby={descriptionId}>
         <div className="config-dialog-heading">
           <div><AlertTriangle size={20} aria-hidden="true" /><h2 id={titleId}>{title}</h2></div>
-          <button type="button" className="icon-button quiet" onClick={() => onDecision(false)} title={t('common.close')}><X size={18} /></button>
+          <button type="button" className="icon-button quiet" onClick={() => onDecision(false)} title={t('common.close')} aria-label={t('common.close')}><X size={18} aria-hidden="true" /></button>
         </div>
         <p id={descriptionId}>{message}</p>
         {details?.length ? <dl className="app-confirm-details">{details.map((detail) => <div key={detail.label}><dt>{detail.label}</dt><dd>{detail.value}</dd></div>)}</dl> : null}
diff --git a/src/components/tabKeyboardNavigation.ts b/src/components/tabKeyboardNavigation.ts
new file mode 100644
index 0000000..05d6185
--- /dev/null
+++ b/src/components/tabKeyboardNavigation.ts
@@ -0,0 +1,25 @@
+import type { KeyboardEvent } from 'react';
+
+const horizontalKeys = new Set(['ArrowLeft', 'ArrowRight', 'Home', 'End']);
+
+export function handleHorizontalTabKey<T extends string>(
+  event: KeyboardEvent<HTMLButtonElement>,
+  tabs: readonly T[],
+  current: T,
+  activate: (tab: T) => void,
+  focusTab: (tab: T) => HTMLElement | null,
+) {
+  if (!horizontalKeys.has(event.key) || tabs.length === 0) return;
+  const index = Math.max(0, tabs.indexOf(current));
+  const nextIndex = event.key === 'Home'
+    ? 0
+    : event.key === 'End'
+      ? tabs.length - 1
+      : event.key === 'ArrowRight'
+        ? (index + 1) % tabs.length
+        : (index - 1 + tabs.length) % tabs.length;
+  const next = tabs[nextIndex];
+  event.preventDefault();
+  activate(next);
+  window.requestAnimationFrame(() => focusTab(next)?.focus());
+}
diff --git a/src/components/useDialogFocusTrap.ts b/src/components/useDialogFocusTrap.ts
new file mode 100644
index 0000000..293e4b7
--- /dev/null
+++ b/src/components/useDialogFocusTrap.ts
@@ -0,0 +1,131 @@
+import { useEffect, useRef, type RefObject } from 'react';
+
+const FOCUSABLE_SELECTOR = [
+  'button:not(:disabled)',
+  '[href]',
+  'input:not(:disabled)',
+  'select:not(:disabled)',
+  'textarea:not(:disabled)',
+  '[contenteditable="true"]',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+let bodyLockCount = 0;
+let bodyOverflowBeforeLock = '';
+
+function lockBodyScroll() {
+  if (bodyLockCount === 0) {
+    bodyOverflowBeforeLock = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+  }
+  bodyLockCount += 1;
+  return () => {
+    bodyLockCount = Math.max(0, bodyLockCount - 1);
+    if (bodyLockCount === 0) document.body.style.overflow = bodyOverflowBeforeLock;
+  };
+}
+
+function visible(element: HTMLElement) {
+  const style = window.getComputedStyle(element);
+  return style.display !== 'none' && style.visibility !== 'hidden' && element.getClientRects().length > 0;
+}
+
+function focusableElements(container: HTMLElement) {
+  return Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(visible);
+}
+
+function topModal() {
+  const dialogs = Array.from(document.querySelectorAll<HTMLElement>(
+    'dialog[open], [role="dialog"][aria-modal="true"], [role="alertdialog"][aria-modal="true"]',
+  )).filter(visible);
+  return dialogs[dialogs.length - 1] ?? null;
+}
+
+type DialogFocusOptions = {
+  active?: boolean;
+  onEscape?: () => void;
+  initialFocusRef?: RefObject<HTMLElement | null>;
+  preventEscape?: boolean;
+};
+
+export function useDialogFocusTrap<T extends HTMLElement>({
+  active = true,
+  onEscape,
+  initialFocusRef,
+  preventEscape = false,
+}: DialogFocusOptions = {}) {
+  const dialogRef = useRef<T>(null);
+  const escapeRef = useRef(onEscape);
+  const initialFocus = useRef(initialFocusRef);
+  const preventEscapeRef = useRef(preventEscape);
+  const wasActiveRef = useRef(false);
+  const previousFocusRef = useRef<HTMLElement | null>(null);
+
+  if (active && !wasActiveRef.current && typeof document !== 'undefined') {
+    previousFocusRef.current = document.activeElement instanceof HTMLElement
+      ? document.activeElement
+      : null;
+  }
+  wasActiveRef.current = active;
+  escapeRef.current = onEscape;
+  initialFocus.current = initialFocusRef;
+  preventEscapeRef.current = preventEscape;
+
+  useEffect(() => {
+    if (!active) return undefined;
+    const dialog = dialogRef.current;
+    if (!dialog) return undefined;
+
+    const previousFocus = previousFocusRef.current
+      ?? (document.activeElement instanceof HTMLElement ? document.activeElement : null);
+    const unlockBodyScroll = lockBodyScroll();
+    const frame = window.requestAnimationFrame(() => {
+      const requested = initialFocus.current?.current;
+      const autoFocus = dialog.querySelector<HTMLElement>('[autofocus]');
+      const first = focusableElements(dialog)[0];
+      const target = requested && visible(requested) ? requested : autoFocus ?? first ?? dialog;
+      if (!dialog.hasAttribute('tabindex') && target === dialog) dialog.tabIndex = -1;
+      target.focus();
+    });
+
+    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (topModal() !== dialog) return;
+      if (event.key === 'Escape') {
+        if (!escapeRef.current && !preventEscapeRef.current) return;
+        event.preventDefault();
+        event.stopPropagation();
+        escapeRef.current?.();
+        return;
+      }
+      if (event.key !== 'Tab') return;
+
+      const controls = focusableElements(dialog);
+      if (controls.length === 0) {
+        event.preventDefault();
+        dialog.focus();
+        return;
+      }
+      const first = controls[0];
+      const last = controls[controls.length - 1];
+      const focusInside = dialog.contains(document.activeElement);
+      if (event.shiftKey && (!focusInside || document.activeElement === first)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (!focusInside || document.activeElement === last)) {
+        event.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown, true);
+    return () => {
+      window.cancelAnimationFrame(frame);
+      document.removeEventListener('keydown', handleKeyDown, true);
+      unlockBodyScroll();
+      if (previousFocus?.isConnected) previousFocus.focus();
+      previousFocusRef.current = null;
+    };
+  }, [active]);
+
+  return dialogRef;
+}
diff --git a/src/main.tsx b/src/main.tsx
index d209ca0..a28175d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -5,7 +5,7 @@ import { AppErrorBoundary } from './AppErrorBoundary';
 import App from './App';
 import { I18nProvider } from './i18n';
 import { initializeTheme } from './theme';
-import './styles.css';
+import './styles/index.css';
 
 async function bootstrap() {
   if (import.meta.env.DEV && !isTauri()) {
diff --git a/src/mocks/browserMockRuntime.ts b/src/mocks/browserMockRuntime.ts
index ea7194c..96c2765 100644
--- a/src/mocks/browserMockRuntime.ts
+++ b/src/mocks/browserMockRuntime.ts
@@ -458,7 +458,7 @@ function createState(scenario: BrowserMockScenario) {
       tps: 58.4,
       tpsSampleCount: 284,
       averageLatencyMs: 1_284,
-      cacheHitRate: 38.6,
+      cacheHitRate: 0.386,
       estimatedCost: 3.8421,
       pricedRequests: 296,
       timeline,
diff --git a/src/pages/AgentsPage.tsx b/src/pages/AgentsPage.tsx
index 3257f10..503d2e6 100644
--- a/src/pages/AgentsPage.tsx
+++ b/src/pages/AgentsPage.tsx
@@ -71,6 +71,7 @@ import { CodexModelCatalogDialog } from './CodexModelCatalogDialog';
 import { DeepSeekHarnessCatalogDialog } from './DeepSeekHarnessCatalogDialog';
 import { AgentConfigBackupDialog } from './AgentConfigBackupDialog';
 import { AgentConfigManagementPanel, AgentConfigurationFeedback, AgentRunControls } from './AgentControls';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 
 type AgentClientId =
   | 'claude-code'
@@ -710,12 +711,13 @@ function AgentModelPicker({
                   searchRef.current?.focus();
                 }}
                 title={t('agents.model.clearSearch')}
+                aria-label={t('agents.model.clearSearch')}
               >
-                <X size={14} />
+                <X size={14} aria-hidden="true" />
               </button>
             ) : null}
-            {onRefresh ? <button type="button" className="icon-button quiet" onClick={onRefresh} disabled={loading} title={t('agents.model.refresh')}>
-              <RefreshCw size={14} className={loading ? 'spin' : ''} />
+            {onRefresh ? <button type="button" className="icon-button quiet" onClick={onRefresh} disabled={loading} title={t('agents.model.refresh')} aria-label={t('agents.model.refresh')}>
+              <RefreshCw size={14} className={loading ? 'spin' : ''} aria-hidden="true" />
             </button> : null}
           </div> : null}
 
@@ -889,6 +891,30 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
   const modelRequestRef = useRef(0);
   const piUpdateRequestRef = useRef(0);
   const claudeModelMappingsDirtyRef = useRef(claudeModelMappingsDirtyCache);
+  const launchDirectoryDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: launchDirectoryDialogOpen,
+    onEscape: busy
+      ? undefined
+      : () => {
+          setLaunchDirectoryDialogOpen(false);
+          setLaunchDirectoryTarget(null);
+        },
+    preventEscape: busy,
+  });
+  const defaultDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: defaultConfirmOpen,
+    onEscape: busy ? undefined : () => setDefaultConfirmOpen(false),
+    preventEscape: busy,
+  });
+  const clearDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: clearConfirmOpen,
+    onEscape: busy ? undefined : () => setClearConfirmOpen(false),
+    preventEscape: busy,
+  });
+  const oauthRequiredDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: Boolean(oauthLoginRequiredAction),
+    onEscape: () => setOauthLoginRequiredAction(null),
+  });
 
   const setClaudeModelMappingsDraftByClient = useCallback((
     update: (
@@ -2498,6 +2524,7 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
           }
         }}>
           <section
+            ref={launchDirectoryDialogRef}
             className="config-dialog agent-launch-directory-dialog"
             role="dialog"
             aria-modal="true"
@@ -2724,7 +2751,7 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
 
       {defaultConfirmOpen ? (
         <div className="config-dialog-backdrop">
-          <section className="config-dialog agent-restore-dialog" role="alertdialog" aria-modal="true" aria-labelledby="agent-default-title">
+          <section ref={defaultDialogRef} className="config-dialog agent-restore-dialog" role="alertdialog" aria-modal="true" aria-labelledby="agent-default-title">
             <div className="config-dialog-heading">
               <div><AlertTriangle size={19} /><h2 id="agent-default-title">{t('agents.default.title')}</h2></div>
             </div>
@@ -2748,7 +2775,7 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
 
       {clearConfirmOpen ? (
         <div className="config-dialog-backdrop">
-          <section className="config-dialog agent-restore-dialog" role="alertdialog" aria-modal="true" aria-labelledby="agent-clear-title">
+          <section ref={clearDialogRef} className="config-dialog agent-restore-dialog" role="alertdialog" aria-modal="true" aria-labelledby="agent-clear-title">
             <div className="config-dialog-heading">
               <div><AlertTriangle size={19} /><h2 id="agent-clear-title">{selected === 'codex' ? t('agents.clear.title') : t('agents.clearIntegration.title', { name: activeDefinition.name })}</h2></div>
             </div>
@@ -2769,7 +2796,7 @@ export function AgentsPage({ embedded = false, onConfigurationApplied }: AgentsP
 
       {oauthLoginRequiredAction ? (
         <div className="config-dialog-backdrop">
-          <section className="config-dialog agent-restore-dialog" role="alertdialog" aria-modal="true" aria-labelledby="agent-oauth-login-required-title">
+          <section ref={oauthRequiredDialogRef} className="config-dialog agent-restore-dialog" role="alertdialog" aria-modal="true" aria-labelledby="agent-oauth-login-required-title">
             <div className="config-dialog-heading">
               <div><AlertTriangle size={19} /><h2 id="agent-oauth-login-required-title">{t('agents.oauthLoginRequired.title')}</h2></div>
             </div>
diff --git a/src/pages/ApiAccessPage.tsx b/src/pages/ApiAccessPage.tsx
index 97d044a..eb24818 100644
--- a/src/pages/ApiAccessPage.tsx
+++ b/src/pages/ApiAccessPage.tsx
@@ -1,5 +1,6 @@
 import { useConfirmation } from '../components/ConfirmationDialog';
 import { ModelSelectionPanel } from '../components/ModelSelectionPanel';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 import {
   type CSSProperties,
   FormEvent,
@@ -1513,11 +1514,11 @@ export function ApiAccessPage() {
                         <span className="switch-track" />
                       </span>
                     </label>
-                    <button type="button" className="icon-button quiet" onClick={() => openEdit(row)} disabled={busy} title={t('common.edit')}>
-                      <Edit3 size={16} />
+                    <button type="button" className="icon-button quiet" onClick={() => openEdit(row)} disabled={busy} title={t('common.edit')} aria-label={t('common.edit')}>
+                      <Edit3 size={16} aria-hidden="true" />
                     </button>
-                    <button type="button" className="icon-button danger" onClick={() => void deleteRow(row)} disabled={busy} title={t('common.delete')}>
-                      <Trash2 size={16} />
+                    <button type="button" className="icon-button danger" onClick={() => void deleteRow(row)} disabled={busy} title={t('common.delete')} aria-label={t('common.delete')}>
+                      <Trash2 size={16} aria-hidden="true" />
                     </button>
                   </div>
                     </SortableProviderRow>
@@ -1571,6 +1572,7 @@ function ProviderHealthDialog({ row, onClose }: ProviderHealthDialogProps) {
   const [results, setResults] = useState<Record<string, ProviderModelHealthState>>({});
   const [checkingAll, setCheckingAll] = useState(false);
   const healthControllerRef = useRef<AbortController | null>(null);
+  const dialogRef = useDialogFocusTrap<HTMLElement>({ onEscape: onClose });
 
   useEffect(() => {
     const controller = new AbortController();
@@ -1663,14 +1665,14 @@ function ProviderHealthDialog({ row, onClose }: ProviderHealthDialogProps) {
 
   return (
     <div className="model-discovery-backdrop" onMouseDown={(event) => event.currentTarget === event.target && onClose()}>
-      <section className="model-discovery-dialog provider-health-dialog" role="dialog" aria-modal="true" aria-labelledby="provider-health-title">
+      <section ref={dialogRef} className="model-discovery-dialog provider-health-dialog" role="dialog" aria-modal="true" aria-labelledby="provider-health-title">
         <div className="model-discovery-header">
           <div>
             <h2 id="provider-health-title">{t('apiAccess.health.title')}</h2>
             <span>{t('apiAccess.health.description', { provider: row.remark || row.name })}</span>
           </div>
-          <button type="button" className="icon-button quiet" onClick={onClose} title={t('common.close')}>
-            <X size={18} />
+          <button type="button" className="icon-button quiet" onClick={onClose} title={t('common.close')} aria-label={t('common.close')}>
+            <X size={18} aria-hidden="true" />
           </button>
         </div>
 
@@ -1802,7 +1804,6 @@ export function ApiProviderDialog({
     () => new Set(mergeModelOptions(initialDraft.models).map((model) => model.name.toLowerCase())),
   );
   const modelCardRef = useRef<HTMLDivElement>(null);
-  const modelDialogRef = useRef<HTMLElement>(null);
   const discoverySelectionInitializedRef = useRef(false);
   const discoveryRequestRef = useRef(0);
 
@@ -1811,39 +1812,17 @@ export function ApiProviderDialog({
     setModelLoading(false);
     setModelDiscoveryOpen(false);
   }, []);
+  const providerDialogRef = useDialogFocusTrap<HTMLFormElement>({
+    onEscape: busy ? undefined : onClose,
+    preventEscape: busy,
+  });
+  const modelDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: modelDiscoveryOpen,
+    onEscape: closeModelDiscovery,
+  });
 
   useEffect(() => () => { discoveryRequestRef.current += 1; }, []);
 
-  useEffect(() => {
-    if (!modelDiscoveryOpen) return;
-    const previousFocus = document.activeElement;
-    const dialog = modelDialogRef.current;
-    dialog?.querySelector<HTMLInputElement>('input')?.focus();
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-        event.stopPropagation();
-        closeModelDiscovery();
-      } else if (event.key === 'Tab') {
-        const controls = Array.from(dialog?.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), [tabindex="0"]') ?? []);
-        const first = controls[0];
-        const last = controls[controls.length - 1];
-        if (event.shiftKey && (document.activeElement === first || !dialog?.contains(document.activeElement))) {
-          event.preventDefault();
-          last?.focus();
-        } else if (!event.shiftKey && (document.activeElement === last || !dialog?.contains(document.activeElement))) {
-          event.preventDefault();
-          first?.focus();
-        }
-      }
-    };
-    document.addEventListener('keydown', onKeyDown, true);
-    return () => {
-      document.removeEventListener('keydown', onKeyDown, true);
-      if (previousFocus instanceof HTMLElement && previousFocus.isConnected) previousFocus.focus();
-    };
-  }, [modelDiscoveryOpen, closeModelDiscovery]);
-
   const modelOptions = useMemo(
     () => mergeModelOptions(discoveredModels, draft.models),
     [discoveredModels, draft.models],
@@ -2073,14 +2052,14 @@ export function ApiProviderDialog({
   return (
     <>
       <div className="config-dialog-backdrop" onMouseDown={(event) => event.currentTarget === event.target && !busy && onClose()}>
-      <form className="config-dialog management-dialog api-provider-dialog" onSubmit={(event) => void submit(event)}>
+      <form ref={providerDialogRef} className="config-dialog management-dialog api-provider-dialog" role="dialog" aria-modal="true" aria-labelledby="api-provider-dialog-title" onSubmit={(event) => void submit(event)}>
         <div className="config-dialog-heading">
           <div>
             <Plus size={19} aria-hidden="true" />
-            <h2>{editingRow ? t('apiAccess.dialog.edit') : t('apiAccess.dialog.add')}</h2>
+            <h2 id="api-provider-dialog-title">{editingRow ? t('apiAccess.dialog.edit') : t('apiAccess.dialog.add')}</h2>
           </div>
-          <button type="button" className="icon-button quiet" onClick={onClose} disabled={busy} title={t('common.close')}>
-            <X size={18} />
+          <button type="button" className="icon-button quiet" onClick={onClose} disabled={busy} title={t('common.close')} aria-label={t('common.close')}>
+            <X size={18} aria-hidden="true" />
           </button>
         </div>
         <label><span>{t('apiAccess.field.remark')}</span><input autoFocus={definition.openAi} value={draft.remark} maxLength={80} onChange={(event) => updateTextField('remark', event.currentTarget.value)} placeholder={t('apiAccess.remarkPlaceholder')} /></label>
@@ -2249,7 +2228,7 @@ export function ApiProviderDialog({
           <section ref={modelDialogRef} className="model-discovery-dialog model-transfer-dialog" role="dialog" aria-modal="true" aria-labelledby="model-discovery-title">
             <div className="model-discovery-header">
               <div><h2 id="model-discovery-title">{t('apiAccess.modelDialog.title')}</h2><span>{t(definition.labelKey)}</span></div>
-              <button type="button" className="icon-button quiet" onClick={closeModelDiscovery} title={t('common.close')}><X size={18} /></button>
+              <button type="button" className="icon-button quiet" onClick={closeModelDiscovery} title={t('common.close')} aria-label={t('common.close')}><X size={18} aria-hidden="true" /></button>
             </div>
 
             <div className="model-transfer-summary">
diff --git a/src/pages/AuthFileManagementPage.tsx b/src/pages/AuthFileManagementPage.tsx
index f50e2b9..50c4d08 100644
--- a/src/pages/AuthFileManagementPage.tsx
+++ b/src/pages/AuthFileManagementPage.tsx
@@ -9,6 +9,7 @@ import { MessageNotice, FloatingNotice, useAppNotice } from '../appNotice';
 import { AuthFileModelsDialog } from '../components/AuthFileModelsDialog';
 import { AuthFileRequestStatus } from '../components/AuthFileRequestStatus';
 import { AuthFileHealthStatus } from '../components/AuthFileHealthStatus';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 import {
   Check,
   Copy,
@@ -189,6 +190,11 @@ export function AuthFileManagementPage() {
     setOauthModelTarget(null);
     setOauthModelSettings(null);
   };
+  const oauthModelsDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: Boolean(oauthModelTarget),
+    onEscape: oauthModelSaving ? undefined : closeOauthModels,
+    preventEscape: oauthModelSaving,
+  });
 
   const openOauthModelSettings = async (target: OAuthModelTarget) => {
     if (oauthModelSaveRef.current) return;
@@ -445,9 +451,9 @@ export function AuthFileManagementPage() {
                   <footer className="auth-card-actions">
                     <button type="button" className="secondary-button compact-button" onClick={() => setSettingsName(name)} disabled={busy || !isOAuthCredentialFile(file)} title={t(isOAuthCredentialFile(file) ? 'authFiles.settings.title' : 'authFiles.fileOnly')}><Settings2 size={14} />{t('authFiles.settings.button')}</button>
                     {providerKey(file) ? <button type="button" className="secondary-button compact-button" onClick={() => setModelViewName(name)} disabled={busy} title={t('authFiles.models.viewTitle')}>{t('authFiles.models.button')}</button> : null}
-                    <button type="button" className="icon-button quiet" onClick={() => void copyName(name)} disabled={busy} title={t('authFiles.copyName')}>{copied === name ? <Check size={15} /> : <Copy size={15} />}</button>
+                    <button type="button" className="icon-button quiet" onClick={() => void copyName(name)} disabled={busy} title={t('authFiles.copyName')} aria-label={t('authFiles.copyName')}>{copied === name ? <Check size={15} aria-hidden="true" /> : <Copy size={15} aria-hidden="true" />}</button>
                     <button type="button" className={`${disabled ? 'primary-button' : 'secondary-button'} compact-button auth-card-toggle`} onClick={() => void toggleStatus(file)} disabled={busy || !isOAuthCredentialFile(file)} title={isOAuthCredentialFile(file) ? undefined : t('authFiles.fileOnly')}>{disabled ? t('common.enable') : t('common.disable')}</button>
-                    <button type="button" className="icon-button danger" onClick={() => void deleteFile(file)} disabled={busy || isRuntimeOnly(file)} title={t('common.delete')}><Trash2 size={15} /></button>
+                    <button type="button" className="icon-button danger" onClick={() => void deleteFile(file)} disabled={busy || isRuntimeOnly(file)} title={t('common.delete')} aria-label={t('common.delete')}><Trash2 size={15} aria-hidden="true" /></button>
                   </footer>
                 </article>
               );
@@ -467,7 +473,7 @@ export function AuthFileManagementPage() {
 
       {oauthModelTarget ? (
         <div className="model-discovery-backdrop" onMouseDown={(event) => event.currentTarget === event.target && !oauthModelSaving && closeOauthModels()}>
-          <section className="model-discovery-dialog auth-model-dialog" role="dialog" aria-modal="true" aria-labelledby="oauth-model-title" onKeyDown={(event) => { if (event.key === 'Escape') closeOauthModels(); }}>
+          <section ref={oauthModelsDialogRef} className="model-discovery-dialog auth-model-dialog" role="dialog" aria-modal="true" aria-labelledby="oauth-model-title">
             <div className="model-discovery-header">
               <div>
                 <h2 id="oauth-model-title">{t(oauthModelTarget.scope === 'credential' ? 'authFiles.models.title' : 'authFiles.models.globalButton')}</h2>
@@ -486,7 +492,7 @@ export function AuthFileManagementPage() {
                 )}
                 <span>{t(oauthModelTarget.scope === 'credential' ? 'authFiles.models.description' : 'authFiles.models.globalDescription', { provider: oauthModelTarget.label })}</span>
               </div>
-              <button type="button" className="icon-button quiet" onClick={closeOauthModels} disabled={oauthModelSaving} title={t('common.close')}><X size={18} /></button>
+              <button type="button" className="icon-button quiet" onClick={closeOauthModels} disabled={oauthModelSaving} title={t('common.close')} aria-label={t('common.close')}><X size={18} aria-hidden="true" /></button>
             </div>
 
             <div className="model-discovery-search">
diff --git a/src/pages/CodexModelCatalogDialog.tsx b/src/pages/CodexModelCatalogDialog.tsx
index f1d77c5..75c0f0f 100644
--- a/src/pages/CodexModelCatalogDialog.tsx
+++ b/src/pages/CodexModelCatalogDialog.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { Check, LoaderCircle, RefreshCw, RotateCcw, Search, X } from 'lucide-react';
 import { useI18n } from '../i18n';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 import {
   cloneCodexModelConfiguration,
   codexContextSourceHint,
@@ -123,14 +124,13 @@ export function CodexModelCatalogDialog({ onClose, onSaved }: CodexModelCatalogD
     else onClose();
   };
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== 'Escape') return;
-      if (discardConfirmOpen) setDiscardConfirmOpen(false);
-      else requestClose();
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
+  const dialogRef = useDialogFocusTrap<HTMLElement>({
+    onEscape: requestClose,
+    preventEscape: saving,
+  });
+  const discardDialogRef = useDialogFocusTrap<HTMLDivElement>({
+    active: discardConfirmOpen,
+    onEscape: () => setDiscardConfirmOpen(false),
   });
 
   const restoreModel = () => {
@@ -191,14 +191,14 @@ export function CodexModelCatalogDialog({ onClose, onSaved }: CodexModelCatalogD
     <div className="config-dialog-backdrop codex-catalog-backdrop" onMouseDown={(event) => {
       if (event.currentTarget === event.target) requestClose();
     }}>
-      <section className="config-dialog codex-catalog-dialog" role="dialog" aria-modal="true" aria-labelledby="codex-catalog-title">
+      <section ref={dialogRef} className="config-dialog codex-catalog-dialog" role="dialog" aria-modal="true" aria-labelledby="codex-catalog-title">
         <header className="config-dialog-heading codex-catalog-heading">
           <div>
             <h2 id="codex-catalog-title">{t('agents.catalog.title')}</h2>
             <p>{t('agents.catalog.subtitle')}</p>
           </div>
           <button type="button" className="icon-button quiet" onClick={requestClose} disabled={saving} aria-label={t('common.close')}>
-            <X size={18} />
+            <X size={18} aria-hidden="true" />
           </button>
         </header>
 
@@ -310,7 +310,7 @@ export function CodexModelCatalogDialog({ onClose, onSaved }: CodexModelCatalogD
 
         {discardConfirmOpen ? (
           <div className="codex-catalog-confirm">
-            <div role="alertdialog" aria-modal="true">
+            <div ref={discardDialogRef} role="alertdialog" aria-modal="true">
               <strong>{t('agents.catalog.unsaved')}</strong>
               <span>{t('agents.catalog.discardHint')}</span>
               <div>
diff --git a/src/pages/CodexSessionsPanel.tsx b/src/pages/CodexSessionsPanel.tsx
index d2543cf..a2d3f2c 100644
--- a/src/pages/CodexSessionsPanel.tsx
+++ b/src/pages/CodexSessionsPanel.tsx
@@ -16,6 +16,7 @@ import {
   X,
 } from 'lucide-react';
 import { useI18n } from '../i18n';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 import {
   codexSessionPageCounts,
   retainVisibleCodexSessionIds,
@@ -71,6 +72,16 @@ export function CodexSessionsPanel() {
   const mountedRef = useRef(false);
   const loadRequestRef = useRef(0);
   const initialOffsetRef = useRef(sessionViewCache.offset);
+  const deleteDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: Boolean(deleteConfirmation),
+    onEscape: operation === 'delete' ? undefined : () => setDeleteConfirmation(null),
+    preventEscape: operation === 'delete',
+  });
+  const cleanupDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: Boolean(cleanupPreview),
+    onEscape: operation === 'cleanup' ? undefined : () => setCleanupPreview(null),
+    preventEscape: operation === 'cleanup',
+  });
 
   useEffect(() => {
     mountedRef.current = true;
@@ -482,7 +493,7 @@ export function CodexSessionsPanel() {
 
       {deleteConfirmation ? (
         <div className="config-dialog-backdrop">
-          <section className="config-dialog codex-session-dialog" role="alertdialog" aria-modal="true" aria-labelledby="codex-session-delete-title">
+          <section ref={deleteDialogRef} className="config-dialog codex-session-dialog" role="alertdialog" aria-modal="true" aria-labelledby="codex-session-delete-title">
             <div className="config-dialog-heading"><div><TriangleAlert size={19} /><h2 id="codex-session-delete-title">{deleteConfirmation.title}</h2></div></div>
             <p>{deleteConfirmation.description}</p>
             <div className="config-dialog-actions two-actions">
@@ -495,7 +506,7 @@ export function CodexSessionsPanel() {
 
       {cleanupPreview ? (
         <div className="config-dialog-backdrop">
-          <section className="config-dialog codex-session-cleanup-dialog" role="dialog" aria-modal="true" aria-labelledby="codex-session-cleanup-title">
+          <section ref={cleanupDialogRef} className="config-dialog codex-session-cleanup-dialog" role="dialog" aria-modal="true" aria-labelledby="codex-session-cleanup-title">
             <div className="config-dialog-heading">
               <div><TriangleAlert size={19} /><h2 id="codex-session-cleanup-title">{t('agents.sessions.cleanupTitle')}</h2></div>
               <button type="button" className="codex-session-dialog-close" aria-label={t('common.close')} onClick={() => setCleanupPreview(null)}><X size={16} /></button>
diff --git a/src/pages/ConfigPanel.tsx b/src/pages/ConfigPanel.tsx
index 6777201..059882e 100644
--- a/src/pages/ConfigPanel.tsx
+++ b/src/pages/ConfigPanel.tsx
@@ -1,4 +1,4 @@
-import { FormEvent, useEffect, useRef, useState } from 'react';
+import { FormEvent, useEffect, useRef, useState, type KeyboardEvent } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
 import { open } from '@tauri-apps/plugin-dialog';
@@ -36,6 +36,8 @@ import { MessageNotice, FloatingNotice, useAppNotice } from '../appNotice';
 import { webUiManagementUrl } from '../services/clientAccess';
 import { ThinkingAliasesPage } from './ThinkingAliasesPage';
 import { SensitiveWordsPage } from './SensitiveWordsPage';
+import { handleHorizontalTabKey } from '../components/tabKeyboardNavigation';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 
 type CoreConfigSettings = {
   apiKeys: CoreApiKey[];
@@ -80,6 +82,7 @@ type ConfigAction =
   | 'software'
   | null;
 type ConfigSubpage = 'general' | 'network' | 'routing' | 'software' | 'aliases' | 'sensitive-words';
+const CONFIG_SUBPAGES: readonly ConfigSubpage[] = ['general', 'network', 'routing', 'aliases', 'software', 'sensitive-words'];
 type CloseBehavior = 'ask' | 'exit' | 'minimize-to-tray';
 type NetworkDraftField =
   | 'port'
@@ -955,9 +958,35 @@ export function ConfigPanelPage() {
   const keyMutationBusy = busyAction === 'add-key' || busyAction === 'update-key';
   const managementSecretBusy = busyAction === 'management-secret';
   const loggingSettingsBusy = busyAction === 'logging';
+  const addDialogRef = useDialogFocusTrap<HTMLFormElement>({
+    active: addDialogOpen,
+    onEscape: keyMutationBusy ? undefined : closeAddDialog,
+    preventEscape: keyMutationBusy,
+  });
+  const deleteDialogRef = useDialogFocusTrap<HTMLDivElement>({
+    active: deleteIndex !== null,
+    onEscape: busyAction === 'delete-key' ? undefined : () => setDeleteIndex(null),
+    preventEscape: busyAction === 'delete-key',
+  });
+  const activateConfigSubpage = (subpage: ConfigSubpage) => {
+    if (subpage === 'sensitive-words') setSensitiveWordsVisited(true);
+    setActiveSubpage(subpage);
+  };
+  const handleConfigTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>, subpage: ConfigSubpage) => {
+    handleHorizontalTabKey(
+      event,
+      CONFIG_SUBPAGES,
+      subpage,
+      activateConfigSubpage,
+      (next) => document.getElementById(`config-subpage-tab-${next}`),
+    );
+  };
 
   return (
     <section className="page config-page">
+      <header className="management-header config-page-header">
+        <div><h1>{t('app.nav.config')}</h1></div>
+      </header>
       <div className="agent-subpage-tabs config-subpage-tabs" role="tablist" aria-label={t('config.tabs.label')}>
         <button
           type="button"
@@ -965,9 +994,10 @@ export function ConfigPanelPage() {
           role="tab"
           className={activeSubpage === 'general' ? 'active' : ''}
           aria-selected={activeSubpage === 'general'}
-          aria-controls="config-subpage-panel-general"
+          aria-controls="config-subpage-panel"
           tabIndex={activeSubpage === 'general' ? 0 : -1}
-          onClick={() => setActiveSubpage('general')}
+          onClick={() => activateConfigSubpage('general')}
+          onKeyDown={(event) => handleConfigTabKeyDown(event, 'general')}
         >
           {t('config.tabs.general')}
         </button>
@@ -977,9 +1007,10 @@ export function ConfigPanelPage() {
           role="tab"
           className={activeSubpage === 'network' ? 'active' : ''}
           aria-selected={activeSubpage === 'network'}
-          aria-controls="config-subpage-panel-network"
+          aria-controls="config-subpage-panel"
           tabIndex={activeSubpage === 'network' ? 0 : -1}
-          onClick={() => setActiveSubpage('network')}
+          onClick={() => activateConfigSubpage('network')}
+          onKeyDown={(event) => handleConfigTabKeyDown(event, 'network')}
         >
           {t('config.tabs.network')}
         </button>
@@ -989,9 +1020,10 @@ export function ConfigPanelPage() {
           role="tab"
           className={activeSubpage === 'routing' ? 'active' : ''}
           aria-selected={activeSubpage === 'routing'}
-          aria-controls="config-subpage-panel-routing"
+          aria-controls="config-subpage-panel"
           tabIndex={activeSubpage === 'routing' ? 0 : -1}
-          onClick={() => setActiveSubpage('routing')}
+          onClick={() => activateConfigSubpage('routing')}
+          onKeyDown={(event) => handleConfigTabKeyDown(event, 'routing')}
         >
           {t('config.tabs.routing')}
         </button>
@@ -1001,9 +1033,10 @@ export function ConfigPanelPage() {
           role="tab"
           className={activeSubpage === 'aliases' ? 'active' : ''}
           aria-selected={activeSubpage === 'aliases'}
-          aria-controls="config-subpage-panel-aliases"
+          aria-controls="config-subpage-panel"
           tabIndex={activeSubpage === 'aliases' ? 0 : -1}
-          onClick={() => setActiveSubpage('aliases')}
+          onClick={() => activateConfigSubpage('aliases')}
+          onKeyDown={(event) => handleConfigTabKeyDown(event, 'aliases')}
         >
           {t('app.nav.thinkingAliases')}
         </button>
@@ -1013,9 +1046,10 @@ export function ConfigPanelPage() {
           role="tab"
           className={activeSubpage === 'software' ? 'active' : ''}
           aria-selected={activeSubpage === 'software'}
-          aria-controls="config-subpage-panel-software"
+          aria-controls="config-subpage-panel"
           tabIndex={activeSubpage === 'software' ? 0 : -1}
-          onClick={() => setActiveSubpage('software')}
+          onClick={() => activateConfigSubpage('software')}
+          onKeyDown={(event) => handleConfigTabKeyDown(event, 'software')}
         >
           {t('config.tabs.software')}
         </button>
@@ -1025,12 +1059,10 @@ export function ConfigPanelPage() {
           role="tab"
           className={activeSubpage === 'sensitive-words' ? 'active' : ''}
           aria-selected={activeSubpage === 'sensitive-words'}
-          aria-controls="config-subpage-panel-sensitive-words"
+          aria-controls="config-subpage-panel"
           tabIndex={activeSubpage === 'sensitive-words' ? 0 : -1}
-          onClick={() => {
-            setSensitiveWordsVisited(true);
-            setActiveSubpage('sensitive-words');
-          }}
+          onClick={() => activateConfigSubpage('sensitive-words')}
+          onKeyDown={(event) => handleConfigTabKeyDown(event, 'sensitive-words')}
         >
           {t('config.tabs.sensitiveWords')}
         </button>
@@ -1039,7 +1071,7 @@ export function ConfigPanelPage() {
       {activeSubpage === 'general' ? (
         <div
           className="config-subpage-panel config-general-subpage"
-          id="config-subpage-panel-general"
+          id="config-subpage-panel"
           role="tabpanel"
           aria-labelledby="config-subpage-tab-general"
         >
@@ -1447,7 +1479,7 @@ export function ConfigPanelPage() {
       ) : activeSubpage === 'network' || activeSubpage === 'routing' ? (
         <div
           className="config-subpage-panel config-network-subpage"
-          id={`config-subpage-panel-${activeSubpage}`}
+          id="config-subpage-panel"
           role="tabpanel"
           aria-labelledby={`config-subpage-tab-${activeSubpage}`}
         >
@@ -1962,7 +1994,7 @@ export function ConfigPanelPage() {
       ) : activeSubpage === 'software' ? (
         <div
           className="config-subpage-panel"
-          id="config-subpage-panel-software"
+          id="config-subpage-panel"
           role="tabpanel"
           aria-labelledby="config-subpage-tab-software"
         >
@@ -2130,20 +2162,21 @@ export function ConfigPanelPage() {
       ) : activeSubpage === 'aliases' ? (
         <div
           className="config-subpage-panel"
-          id="config-subpage-panel-aliases"
+          id="config-subpage-panel"
           role="tabpanel"
           aria-labelledby="config-subpage-tab-aliases"
         >
-          <ThinkingAliasesPage />
+          <ThinkingAliasesPage embedded />
         </div>
       ) : null}
 
       {sensitiveWordsVisited ? (
         <div
           className="config-subpage-panel"
-          id="config-subpage-panel-sensitive-words"
+          id={activeSubpage === 'sensitive-words' ? 'config-subpage-panel' : undefined}
           role="tabpanel"
           aria-labelledby="config-subpage-tab-sensitive-words"
+          aria-hidden={activeSubpage === 'sensitive-words' ? undefined : true}
           style={{ display: activeSubpage === 'sensitive-words' ? undefined : 'none' }}
         >
           <SensitiveWordsPage />
@@ -2155,6 +2188,7 @@ export function ConfigPanelPage() {
           if (event.currentTarget === event.target) closeAddDialog();
         }}>
           <form
+            ref={addDialogRef}
             className="config-dialog"
             role="dialog"
             aria-modal="true"
@@ -2260,6 +2294,7 @@ export function ConfigPanelPage() {
           }
         }}>
           <div
+            ref={deleteDialogRef}
             className={`config-dialog config-delete-dialog ${deletingLastKey ? 'has-warning' : ''}`}
             role="alertdialog"
             aria-modal="true"
diff --git a/src/pages/DeepSeekHarnessCatalogDialog.tsx b/src/pages/DeepSeekHarnessCatalogDialog.tsx
index efa87c5..e5d45ad 100644
--- a/src/pages/DeepSeekHarnessCatalogDialog.tsx
+++ b/src/pages/DeepSeekHarnessCatalogDialog.tsx
@@ -1,8 +1,9 @@
 import { MessageNotice } from '../appNotice';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { LoaderCircle, RefreshCw, RotateCcw, Search, Settings2, X } from 'lucide-react';
 import { useI18n } from '../i18n';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 import type { MessageKey } from '../i18n/resources';
 import {
   harnessContextDefault, harnessDraft, harnessReasoningLevels, harnessSchema, isHarnessRecord, parseHarnessDraft, sameHarnessDraft, updateHarnessDraft,
@@ -99,7 +100,6 @@ export function DeepSeekHarnessCatalogDialog({ onClose, onSaved }: { onClose: ()
   const [error, setError] = useState('');
   const [notice, setNotice] = useState('');
   const [confirmation, setConfirmation] = useState<'close' | 'reload' | null>(null);
-  const dialogRef = useRef<HTMLElement>(null);
   const install = (next: HarnessEditorSnapshot) => {
     setSnapshot(next);
     setDrafts(Object.fromEntries(next.models.map(m => [m.id, harnessDraft(m.configuration, 'model')])));
@@ -118,24 +118,13 @@ export function DeepSeekHarnessCatalogDialog({ onClose, onSaved }: { onClose: ()
   const dirty = !!snapshot && (!sameHarnessDraft(provider, harnessDraft(snapshot.provider, 'provider'))
     || snapshot.models.some(m => !sameHarnessDraft(drafts[m.id] ?? {}, harnessDraft(m.configuration, 'model'))));
   const close = () => { if (!saving) { if (dirty) setConfirmation('close'); else onClose(); } };
-  useEffect(() => {
-    const previous = document.activeElement as HTMLElement | null;
-    dialogRef.current?.querySelector<HTMLElement>('button')?.focus();
-    return () => previous?.focus();
-  }, []);
-  useEffect(() => {
-    const handleKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') { event.stopPropagation(); if (confirmation) setConfirmation(null); else close(); }
-      if (event.key === 'Tab') {
-        const scope = confirmation ? dialogRef.current?.querySelector('[role="alertdialog"]') : dialogRef.current;
-        const targets = [...(scope?.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), summary, [tabindex="0"]') ?? [])].filter(el => el.getClientRects().length);
-        const first = targets[0], last = targets[targets.length - 1];
-        if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); }
-        else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
-      }
-    };
-    window.addEventListener('keydown', handleKey);
-    return () => window.removeEventListener('keydown', handleKey);
+  const dialogRef = useDialogFocusTrap<HTMLElement>({
+    onEscape: saving ? undefined : close,
+    preventEscape: saving,
+  });
+  const confirmationDialogRef = useDialogFocusTrap<HTMLDivElement>({
+    active: Boolean(confirmation),
+    onEscape: () => setConfirmation(null),
   });
   const active = snapshot?.models.find(m => m.id === selected);
   const api = provider.api || 'openai-completions';
@@ -187,7 +176,7 @@ export function DeepSeekHarnessCatalogDialog({ onClose, onSaved }: { onClose: ()
         <button className="secondary-button" disabled={loading || saving || !snapshot} onClick={() => { setDrafts(Object.fromEntries(snapshot!.models.map(m => [m.id, {}]))); setProvider({}); changed(); }}>{t('agents.catalog.resetAll')}</button>
         <button className="secondary-button" disabled={saving} onClick={close}>{t('common.cancel')}</button><button className="primary-button" disabled={!dirty || loading || saving} onClick={() => void save()}>{saving ? <LoaderCircle size={16} className="spin" /> : null}{t(saving ? 'common.saving' : 'common.save')}</button>
       </div></footer>
-      {confirmation ? <div className="codex-catalog-confirm"><div role="alertdialog" aria-modal="true" aria-label={t('agents.catalog.unsaved')}><strong>{t('agents.catalog.unsaved')}</strong><span>{t('agents.catalog.discardHint')}</span><div><button autoFocus className="secondary-button" onClick={() => setConfirmation(null)}>{t('agents.catalog.keepEditing')}</button><button className="danger-button" onClick={() => { if (confirmation === 'close') onClose(); else { setConfirmation(null); void load(); } }}>{t('agents.catalog.discard')}</button></div></div></div> : null}
+      {confirmation ? <div className="codex-catalog-confirm"><div ref={confirmationDialogRef} role="alertdialog" aria-modal="true" aria-label={t('agents.catalog.unsaved')}><strong>{t('agents.catalog.unsaved')}</strong><span>{t('agents.catalog.discardHint')}</span><div><button autoFocus className="secondary-button" onClick={() => setConfirmation(null)}>{t('agents.catalog.keepEditing')}</button><button className="danger-button" onClick={() => { if (confirmation === 'close') onClose(); else { setConfirmation(null); void load(); } }}>{t('agents.catalog.discard')}</button></div></div></div> : null}
     </section>
   </div>;
 }
diff --git a/src/pages/EasyModePage.tsx b/src/pages/EasyModePage.tsx
index 2ed9ec3..d971437 100644
--- a/src/pages/EasyModePage.tsx
+++ b/src/pages/EasyModePage.tsx
@@ -4,6 +4,7 @@ import {
   useLayoutEffect,
   useRef,
   useState,
+  type KeyboardEvent as ReactKeyboardEvent,
 } from "react";
 import { invoke } from "@tauri-apps/api/core";
 import {
@@ -166,6 +167,26 @@ export function EasyModePage({
   const guideTooltipRef = useRef<HTMLElement | null>(null);
   const [guideCardPosition, setGuideCardPosition] = useState<{ top: number; left: number } | null>(null);
   const [langMenuOpen, setLangMenuOpen] = useState(false);
+  const langMenuRef = useRef<HTMLDivElement>(null);
+  const langButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!langMenuOpen) return undefined;
+    const closeFromOutside = (event: PointerEvent) => {
+      if (!langMenuRef.current?.contains(event.target as Node)) setLangMenuOpen(false);
+    };
+    const closeFromKeyboard = (event: globalThis.KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      setLangMenuOpen(false);
+      langButtonRef.current?.focus();
+    };
+    document.addEventListener('pointerdown', closeFromOutside);
+    document.addEventListener('keydown', closeFromKeyboard);
+    return () => {
+      document.removeEventListener('pointerdown', closeFromOutside);
+      document.removeEventListener('keydown', closeFromKeyboard);
+    };
+  }, [langMenuOpen]);
 
   const refreshSourceStatus = useCallback(async () => {
     try {
@@ -618,9 +639,25 @@ export function EasyModePage({
   };
 
   const currentActiveLang = languageOptions.find((opt) => opt.value === (locale || currentLocale)) || languageOptions[0];
+  const handleLanguageListKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return;
+    const options = Array.from(event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="option"]'));
+    if (!options.length) return;
+    const current = options.indexOf(document.activeElement as HTMLButtonElement);
+    const next = event.key === 'Home'
+      ? 0
+      : event.key === 'End'
+        ? options.length - 1
+        : event.key === 'ArrowDown'
+          ? (Math.max(current, -1) + 1) % options.length
+          : (current <= 0 ? options.length : current) - 1;
+    event.preventDefault();
+    options[next]?.focus();
+  };
 
   return (
     <section className="page simple-mode-page simple-mode-expanded">
+      <h1 className="sr-only">{t('app.nav.easy')}</h1>
       {guideActive ? <div className="guide-dimmed-overlay" /> : null}
 
       <header className="simple-mode-topbar">
@@ -683,28 +720,45 @@ export function EasyModePage({
             </div>
           ) : null}
 
-          <div className="simple-mode-lang-dropdown">
+          <div ref={langMenuRef} className="simple-mode-lang-dropdown">
             <button
+              ref={langButtonRef}
               type="button"
               className="simple-mode-lang-btn"
               onClick={() => setLangMenuOpen(!langMenuOpen)}
               title={t("easyMode.language.switch")}
+              aria-label={t("easyMode.language.switch")}
+              aria-haspopup="listbox"
+              aria-expanded={langMenuOpen}
+              aria-controls="simple-mode-language-list"
+              onKeyDown={(event) => {
+                if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
+                event.preventDefault();
+                setLangMenuOpen(true);
+                window.requestAnimationFrame(() => {
+                  const options = langMenuRef.current?.querySelectorAll<HTMLButtonElement>('[role="option"]');
+                  options?.[event.key === 'ArrowUp' ? options.length - 1 : 0]?.focus();
+                });
+              }}
             >
               <Languages size={15} />
               <span>{currentActiveLang.nativeLabel}</span>
               <ChevronDown size={13} />
             </button>
             {langMenuOpen ? (
-              <div className="simple-mode-lang-menu">
+              <div id="simple-mode-language-list" className="simple-mode-lang-menu" role="listbox" aria-label={t("easyMode.language.switch")} onKeyDown={handleLanguageListKeyDown}>
                 {languageOptions.map((opt) => (
                   <button
                     key={opt.value}
                     type="button"
                     className={opt.value === (locale || currentLocale) ? "selected" : ""}
+                    role="option"
+                    aria-selected={opt.value === (locale || currentLocale)}
                     onClick={() => {
                       if (setLocale) setLocale(opt.value);
                       else setI18nLocale(opt.value);
                       setLangMenuOpen(false);
+                      window.requestAnimationFrame(() => langButtonRef.current?.focus());
                     }}
                   >
                     <span>{opt.nativeLabel}</span>
@@ -717,7 +771,7 @@ export function EasyModePage({
 
           <button
             type="button"
-            className="secondary-button simple-mode-exit-btn simple-mode-highlight-button"
+            className="secondary-button simple-mode-exit-btn"
             title={t("easyMode.exitTitle")}
             onClick={() => onExit?.()}
           >
@@ -732,14 +786,13 @@ export function EasyModePage({
           <strong>{setupStepStatus}</strong>
         </div>
         <div className="simple-mode-step-status-track">
-          <div
+          <button
+            type="button"
             className={`simple-mode-step-status-item${activeStep === 1 ? " active" : " complete"}`}
             aria-current={activeStep === 1 ? "step" : undefined}
-            onClick={() => {
-              if (guideActive) return;
-              setActiveStep(1);
-            }}
-            style={{ cursor: guideActive ? "default" : "pointer" }}
+            aria-pressed={activeStep === 1}
+            disabled={guideActive}
+            onClick={() => setActiveStep(1)}
           >
             <span className="simple-mode-step-status-number">
               {activeStep > 1 ? <Check size={14} aria-hidden="true" /> : "1"}
@@ -748,24 +801,22 @@ export function EasyModePage({
               <strong>{t("easyMode.overview.providerTitle")}</strong>
               <small>{t("easyMode.steps.step1Description")}</small>
             </span>
-          </div>
+          </button>
           <span className={`simple-mode-step-status-connector${activeStep > 1 ? " complete" : ""}`} aria-hidden="true" />
-          <div
+          <button
+            type="button"
             className={`simple-mode-step-status-item${activeStep === 2 ? " active" : ""}`}
             aria-current={activeStep === 2 ? "step" : undefined}
-            onClick={() => {
-              if (!guideActive && hasConnectedSource) {
-                setActiveStep(2);
-              }
-            }}
-            style={{ cursor: !guideActive && hasConnectedSource ? "pointer" : "default" }}
+            aria-pressed={activeStep === 2}
+            disabled={guideActive || !hasConnectedSource}
+            onClick={() => setActiveStep(2)}
           >
             <span className="simple-mode-step-status-number">2</span>
             <span className="simple-mode-step-status-copy">
               <strong>{t("easyMode.overview.agentTitle")}</strong>
               <small>{t("easyMode.steps.step2Description")}</small>
             </span>
-          </div>
+          </button>
         </div>
       </nav>
 
diff --git a/src/pages/Kernel.tsx b/src/pages/Kernel.tsx
index 2d58751..69b936f 100644
--- a/src/pages/Kernel.tsx
+++ b/src/pages/Kernel.tsx
@@ -215,6 +215,9 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
 
   return (
     <section className="page kernel-page home-page">
+      <header className="management-header home-page-header">
+        <div><h1>{t('app.nav.home')}</h1></div>
+      </header>
       <div className="kernel-layout home-layout">
         <div className="panel control-panel">
           <div className="panel-heading">
@@ -349,15 +352,7 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
               <div className="client-api-values">
                 <div className="client-api-value-row">
                   <span>{t('kernel.access.apiUrl')}</span>
-                  <code
-                    title={profile.baseUrl}
-                    onClick={() =>
-                      void copyApiValue(
-                        profile.baseUrl,
-                        `${profile.id}:base`,
-                      )
-                    }
-                  >
+                  <code title={profile.baseUrl}>
                     {profile.baseUrl}
                   </code>
                   <button
diff --git a/src/pages/ManagementPages.tsx b/src/pages/ManagementPages.tsx
index 98f5aea..fefaefb 100644
--- a/src/pages/ManagementPages.tsx
+++ b/src/pages/ManagementPages.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState, type KeyboardEvent } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import {
   Check,
@@ -30,6 +30,7 @@ import {
 import { AuthFileManagementPage } from './AuthFileManagementPage';
 import { QuotaPage } from './QuotaPage';
 import { validateDevinCallback } from '../services/devinOAuth';
+import { handleHorizontalTabKey } from '../components/tabKeyboardNavigation';
 
 type OAuthProviderId = 'codex' | 'claude' | 'antigravity' | 'kimi' | 'xai' | 'devin';
 type OAuthFlowStatus = 'idle' | 'waiting' | 'success' | 'error';
@@ -115,6 +116,16 @@ const cachedOAuthProviderStates = (): Partial<Record<OAuthProviderId, OAuthProvi
 export function OAuthManagementPage() {
   const { t } = useI18n();
   const [activeSubpage, setActiveSubpage] = useState<OAuthSubpage>('login');
+  const subpageIds = oauthSubpages.map((subpage) => subpage.id);
+  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>, subpage: OAuthSubpage) => {
+    handleHorizontalTabKey(
+      event,
+      subpageIds,
+      subpage,
+      setActiveSubpage,
+      (next) => document.getElementById(`oauth-subpage-tab-${next}`),
+    );
+  };
 
   return (
     <section className="page oauth-management-page">
@@ -133,9 +144,10 @@ export function OAuthManagementPage() {
               role="tab"
               className={active ? 'active' : ''}
               aria-selected={active}
-              aria-controls={`oauth-subpage-panel-${subpage.id}`}
+              aria-controls="oauth-subpage-panel"
               tabIndex={active ? 0 : -1}
               onClick={() => setActiveSubpage(subpage.id)}
+              onKeyDown={(event) => handleTabKeyDown(event, subpage.id)}
             >
               {t(subpage.labelKey)}
             </button>
@@ -145,7 +157,7 @@ export function OAuthManagementPage() {
 
       <div
         className="oauth-subpage-panel"
-        id={`oauth-subpage-panel-${activeSubpage}`}
+        id="oauth-subpage-panel"
         role="tabpanel"
         aria-labelledby={`oauth-subpage-tab-${activeSubpage}`}
       >
diff --git a/src/pages/QuotaPage.tsx b/src/pages/QuotaPage.tsx
index 27a3c0e..861e343 100644
--- a/src/pages/QuotaPage.tsx
+++ b/src/pages/QuotaPage.tsx
@@ -186,7 +186,7 @@ export function QuotaCard({ file, quota, onRefresh, onReset }: { file: AuthFile;
         <div><strong title={name}>{name}</strong><span>{provider ? providerMeta[provider].label : t('quota.unknownProvider')}{quota.plan ? ' · ' + quota.plan : ''}</span></div>
         <div className="quota-card-actions">
           {onReset && (quota.resetCredits ?? 0) > 0 ? <button type="button" className="secondary-button compact-button" onClick={onReset} disabled={!canResetCodexQuota(file, quota)} title={t('quota.reset')}>{t('quota.reset')}</button> : null}
-          <button type="button" className="icon-button quiet" onClick={onRefresh} disabled={disabled || quota.status === 'loading'} title={disabled ? t('quota.fileDisabled') : t('quota.refresh')}><RefreshCw size={16} className={quota.status === 'loading' ? 'spin' : ''} /></button>
+          <button type="button" className="icon-button quiet" onClick={onRefresh} disabled={disabled || quota.status === 'loading'} title={disabled ? t('quota.fileDisabled') : t('quota.refresh')} aria-label={disabled ? t('quota.fileDisabled') : t('quota.refresh')}><RefreshCw size={16} className={quota.status === 'loading' ? 'spin' : ''} aria-hidden="true" /></button>
         </div>
       </div>
       <QuotaActionFeedback quota={quota} name={name} />
diff --git a/src/pages/ThinkingAliasesPage.tsx b/src/pages/ThinkingAliasesPage.tsx
index fb1bd16..c74b644 100644
--- a/src/pages/ThinkingAliasesPage.tsx
+++ b/src/pages/ThinkingAliasesPage.tsx
@@ -24,6 +24,7 @@ import {
   Zap,
 } from 'lucide-react';
 import { getCurrentLocale, translate, useI18n } from '../i18n';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 
 type PresetThinkingEffort = 'low' | 'medium' | 'high' | 'xhigh' | 'max';
 
@@ -187,7 +188,7 @@ const thinkingAliasSourceDetail = (source: ThinkingAliasSource) => (
   thinkingAliasProviderDetail(source.kind, source.provider)
 );
 
-export function ThinkingAliasesPage() {
+export function ThinkingAliasesPage({ embedded = false }: { embedded?: boolean } = {}) {
   const { askConfirmation, confirmationDialog } = useConfirmation();
   const { t } = useI18n();
   const [thinkingEntries, setThinkingEntries] = useState<ThinkingAliasEntry[]>([]);
@@ -207,7 +208,6 @@ export function ThinkingAliasesPage() {
   const [modelPickerOpen, setModelPickerOpen] = useState(false);
   const [activeSourceIndex, setActiveSourceIndex] = useState(0);
   const modelPickerRef = useRef<HTMLDivElement>(null);
-  const editorRef = useRef<HTMLElement>(null);
   const generatedAliasRef = useRef('');
   const [loading, setLoading] = useState(true);
   const [busyAlias, setBusyAlias] = useState('');
@@ -483,6 +483,12 @@ export function ThinkingAliasesPage() {
     resetEditor();
   };
 
+  const editorRef = useDialogFocusTrap<HTMLElement>({
+    active: editorOpen,
+    onEscape: busyAlias ? undefined : closeEditor,
+    preventEscape: Boolean(busyAlias),
+  });
+
   const addAlias = () => {
     resetEditor();
     setError('');
@@ -517,36 +523,6 @@ export function ThinkingAliasesPage() {
     }
   };
 
-  useEffect(() => {
-    if (!editorOpen) return;
-    const previousFocus = document.activeElement;
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    editorRef.current?.querySelector<HTMLInputElement>('input')?.focus();
-    const trapFocus = (event: globalThis.KeyboardEvent) => {
-      if (event.key !== 'Tab') return;
-      const controls = Array.from(editorRef.current?.querySelectorAll<HTMLElement>(
-        'button:not(:disabled), input:not(:disabled), [tabindex="0"]',
-      ) ?? []);
-      const first = controls[0];
-      const last = controls[controls.length - 1];
-      const outside = !editorRef.current?.contains(document.activeElement);
-      if (event.shiftKey && (outside || document.activeElement === first)) {
-        event.preventDefault();
-        last?.focus();
-      } else if (!event.shiftKey && (outside || document.activeElement === last)) {
-        event.preventDefault();
-        first?.focus();
-      }
-    };
-    document.addEventListener('keydown', trapFocus);
-    return () => {
-      document.removeEventListener('keydown', trapFocus);
-      document.body.style.overflow = previousOverflow;
-      if (previousFocus instanceof HTMLElement && previousFocus.isConnected) previousFocus.focus();
-    };
-  }, [editorOpen]);
-
   const deleteAlias = async (entry: AliasListEntry) => {
     if (!await askConfirmation({ title: t('common.delete'), message: t('aliases.deleteConfirm', { alias: entry.alias }), confirmText: t('common.delete'), variant: 'danger' })) return;
     setBusyAlias(entry.alias);
@@ -583,7 +559,9 @@ export function ThinkingAliasesPage() {
 
       <header className="management-header">
         <div>
-          <h1>{t('app.nav.thinkingAliases')}</h1>
+          {embedded
+            ? <h2>{t('app.nav.thinkingAliases')}</h2>
+            : <h1>{t('app.nav.thinkingAliases')}</h1>}
         </div>
         <div className="management-heading-actions">
           <span className="muted-summary">{entries.length}</span>
@@ -608,7 +586,6 @@ export function ThinkingAliasesPage() {
           role="dialog"
           aria-modal="true"
           aria-labelledby="thinking-alias-editor-title"
-          onKeyDown={(event) => { if (event.key === 'Escape') closeEditor(); }}
         >
             <div className="thinking-alias-panel-heading">
               <span><GitFork size={18} /></span>
@@ -631,6 +608,7 @@ export function ThinkingAliasesPage() {
                 <input
                   id="thinking-model-search"
                   role="combobox"
+                  autoFocus
                   aria-autocomplete="list"
                   aria-expanded={modelPickerOpen}
                   aria-controls="thinking-model-options"
@@ -884,6 +862,7 @@ export function ThinkingAliasesPage() {
                   onClick={() => void deleteAlias(entry)}
                   disabled={Boolean(busyAlias)}
                   title={t('aliases.delete', { alias: entry.alias })}
+                  aria-label={t('aliases.delete', { alias: entry.alias })}
                 >
                   {busyAction === 'delete' && busyAlias === entry.alias
                     ? <LoaderCircle size={15} className="spin" />
diff --git a/src/pages/UsageRecordsPage.tsx b/src/pages/UsageRecordsPage.tsx
index 56f366d..ebbf7d5 100644
--- a/src/pages/UsageRecordsPage.tsx
+++ b/src/pages/UsageRecordsPage.tsx
@@ -25,6 +25,8 @@ import { MessageNotice, FloatingNotice, useAppNotice } from '../appNotice';
 import type { MessageKey } from '../i18n/resources';
 import { formatCacheReadRate, formatGenerationSpeed } from '../services/usageMetrics';
 import { formatUsageNumber } from '../services/usageNumber';
+import { handleHorizontalTabKey } from '../components/tabKeyboardNavigation';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 import {
   OTHER_TREND_MODEL_KEY,
   buildUsageTrendSeries,
@@ -46,6 +48,8 @@ import { usageViewScopeKey } from '../services/usageViewScope';
 type UsageTab = 'overview' | 'analysis' | 'events' | 'pricing' | 'data-management';
 type UsageRange = '4h' | '24h' | 'today' | '7d' | '30d' | 'all' | 'custom';
 
+const USAGE_TABS: readonly UsageTab[] = ['overview', 'analysis', 'events', 'pricing', 'data-management'];
+
 type CollectorStatus = {
   state: 'waiting-core' | 'collecting' | 'error';
   message: string;
@@ -539,52 +543,95 @@ export function UsageRecordsPage() {
           (activeTab === 'events' && !events) ||
           (activeTab === 'pricing' && !pricing))));
 
+  const handleTabKeyDown = (event: KeyboardEvent<HTMLButtonElement>, tab: UsageTab) => {
+    handleHorizontalTabKey(
+      event,
+      USAGE_TABS,
+      tab,
+      setActiveTab,
+      (next) => document.getElementById(`usage-tab-${next}`),
+    );
+  };
+
   return (
     <section className="page management-page usage-records-page">
       {error ? <MessageNotice message={error} onDismiss={() => setError('')} /> : null}
 
       <div className="usage-topbar">
-        <div className="usage-tabs" role="tablist" aria-label={t('usage.pageLabel')}>
+        <div className="usage-page-navigation">
+          <h1>{t('usage.title')}</h1>
+          <div className="usage-tabs" role="tablist" aria-label={t('usage.pageLabel')}>
           <button
             type="button"
+            id="usage-tab-overview"
+            role="tab"
             className={activeTab === 'overview' ? 'active' : ''}
+            aria-selected={activeTab === 'overview'}
+            aria-controls="usage-tab-panel"
+            tabIndex={activeTab === 'overview' ? 0 : -1}
             onClick={() => setActiveTab('overview')}
+            onKeyDown={(event) => handleTabKeyDown(event, 'overview')}
           >
             <BarChart3 size={15} />
             <span>{t('usage.tab.overview')}</span>
           </button>
           <button
             type="button"
+            id="usage-tab-analysis"
+            role="tab"
             className={activeTab === 'analysis' ? 'active' : ''}
+            aria-selected={activeTab === 'analysis'}
+            aria-controls="usage-tab-panel"
+            tabIndex={activeTab === 'analysis' ? 0 : -1}
             onClick={() => setActiveTab('analysis')}
+            onKeyDown={(event) => handleTabKeyDown(event, 'analysis')}
           >
             <Activity size={15} />
             <span>{t('usage.tab.analysis')}</span>
           </button>
           <button
             type="button"
+            id="usage-tab-events"
+            role="tab"
             className={activeTab === 'events' ? 'active' : ''}
+            aria-selected={activeTab === 'events'}
+            aria-controls="usage-tab-panel"
+            tabIndex={activeTab === 'events' ? 0 : -1}
             onClick={() => setActiveTab('events')}
+            onKeyDown={(event) => handleTabKeyDown(event, 'events')}
           >
             <List size={15} />
             <span>{t('usage.tab.events')}</span>
           </button>
           <button
             type="button"
+            id="usage-tab-pricing"
+            role="tab"
             className={activeTab === 'pricing' ? 'active' : ''}
+            aria-selected={activeTab === 'pricing'}
+            aria-controls="usage-tab-panel"
+            tabIndex={activeTab === 'pricing' ? 0 : -1}
             onClick={() => setActiveTab('pricing')}
+            onKeyDown={(event) => handleTabKeyDown(event, 'pricing')}
           >
             <CircleDollarSign size={15} />
             <span>{t('usage.tab.pricing')}</span>
           </button>
           <button
             type="button"
+            id="usage-tab-data-management"
+            role="tab"
             className={activeTab === 'data-management' ? 'active' : ''}
+            aria-selected={activeTab === 'data-management'}
+            aria-controls="usage-tab-panel"
+            tabIndex={activeTab === 'data-management' ? 0 : -1}
             onClick={() => setActiveTab('data-management')}
+            onKeyDown={(event) => handleTabKeyDown(event, 'data-management')}
           >
             <Wrench size={15} />
             <span>{t('usage.tab.dataManagement')}</span>
           </button>
+          </div>
         </div>
 
         <div className="usage-topbar-actions">
@@ -612,6 +659,13 @@ export function UsageRecordsPage() {
         </div>
       </div>
 
+      <div
+        className="usage-tab-panel"
+        id="usage-tab-panel"
+        role="tabpanel"
+        aria-labelledby={`usage-tab-${activeTab}`}
+      >
+      {activeTab !== 'data-management' ? (
       <section className="panel usage-filter-panel">
         <div className="usage-filter-row">
           <div className="usage-filter-group">
@@ -745,6 +799,7 @@ export function UsageRecordsPage() {
           </div>
         ) : null}
       </section>
+      ) : null}
 
       {showInitialLoading ? (
         <div className="usage-initial-loading">
@@ -770,6 +825,7 @@ export function UsageRecordsPage() {
         <PricingView pricing={pricing} query={buildQueries().query} onChanged={() => loadData(true)} />
       ) : null}
       {activeTab === 'data-management' ? <UsageDataManagementView /> : null}
+      </div>
     </section>
   );
 }
@@ -1935,7 +1991,10 @@ function EventsView({
   const [draftVisibleColumnKeys, setDraftVisibleColumnKeys] = useState<EventColumnKey[]>(visibleColumnKeys);
   const [resizingCol, setResizingCol] = useState<EventColumnKey | null>(null);
 
-  const columnDialogRef = useRef<HTMLElement | null>(null);
+  const columnDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: columnSettingsOpen,
+    onEscape: () => setColumnSettingsOpen(false),
+  });
   const tableWrapRef = useRef<HTMLDivElement | null>(null);
 
   const visibleColumnKeySet = new Set(visibleColumnKeys);
@@ -1943,10 +2002,6 @@ function EventsView({
   const isCustomized = EVENT_COLUMNS.some((col) => widths[col.key] !== col.defaultWidth);
   const noRemarkLabel = t('usage.key.noRemark');
 
-  useEffect(() => {
-    if (columnSettingsOpen) columnDialogRef.current?.focus();
-  }, [columnSettingsOpen]);
-
   const resetAllWidths = () => {
     const defaults: Record<EventColumnKey, number> = {} as any;
     for (const col of EVENT_COLUMNS) {
@@ -2002,6 +2057,33 @@ function EventsView({
     });
   };
 
+  const persistColumnWidth = (key: EventColumnKey, width: number) => {
+    setWidths((current) => {
+      const next = { ...current, [key]: width };
+      try {
+        localStorage.setItem(EVENT_COL_WIDTHS_STORAGE_KEY, JSON.stringify(next));
+      } catch {}
+      return next;
+    });
+  };
+
+  const handleResizeKeyDown = (key: EventColumnKey, event: KeyboardEvent<HTMLDivElement>) => {
+    const column = EVENT_COLUMNS.find((item) => item.key === key);
+    if (!column) return;
+    const current = widths[key] ?? column.defaultWidth;
+    const step = event.shiftKey ? 25 : 10;
+    const next = event.key === 'Home'
+      ? column.defaultWidth
+      : event.key === 'ArrowLeft'
+        ? Math.max(column.minWidth, current - step)
+        : event.key === 'ArrowRight'
+          ? Math.min(800, current + step)
+          : null;
+    if (next === null) return;
+    event.preventDefault();
+    persistColumnWidth(key, next);
+  };
+
   const handleResizeStart = (key: EventColumnKey, e: React.PointerEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
@@ -2159,8 +2241,16 @@ function EventsView({
                       </div>
                       <div
                         className={`usage-col-resizer ${resizingCol === col.key ? 'active' : ''}`}
+                        role="separator"
+                        tabIndex={0}
+                        aria-label={`${label}: ${t('usage.events.resizeHint')}`}
+                        aria-orientation="vertical"
+                        aria-valuemin={col.minWidth}
+                        aria-valuemax={800}
+                        aria-valuenow={widths[col.key]}
                         onPointerDown={(e) => handleResizeStart(col.key, e)}
                         onDoubleClick={(e) => resetSingleColumn(col.key, e)}
+                        onKeyDown={(event) => handleResizeKeyDown(col.key, event)}
                         title={t('usage.events.resizeHint')}
                       />
                     </th>
@@ -2216,6 +2306,7 @@ function EventsView({
                 className="icon-button quiet"
                 onClick={() => setColumnSettingsOpen(false)}
                 title={t('common.close')}
+                aria-label={t('common.close')}
               >
                 <X size={17} />
               </button>
@@ -2638,18 +2729,20 @@ function PricingView({
                         type="button"
                         className="icon-button"
                         title={t('common.edit')}
+                        aria-label={`${t('common.edit')}: ${row.model}`}
                         onClick={() => setDraft(priceDraftFor(row.model, row.price))}
                       >
-                        <Pencil size={14} />
+                        <Pencil size={14} aria-hidden="true" />
                       </button>
                       {row.price?.source === 'manual' ? (
                         <button
                           type="button"
                           className="icon-button danger"
                           title={t('common.delete')}
+                          aria-label={`${t('common.delete')}: ${row.model}`}
                           onClick={() => void deletePrice(row.model)}
                         >
-                          <Trash2 size={14} />
+                          <Trash2 size={14} aria-hidden="true" />
                         </button>
                       ) : null}
                     </div>
diff --git a/src/pages/VersionManagementPage.tsx b/src/pages/VersionManagementPage.tsx
index 4f83576..b3321c2 100644
--- a/src/pages/VersionManagementPage.tsx
+++ b/src/pages/VersionManagementPage.tsx
@@ -17,6 +17,7 @@ import { useAppUpdate } from '../appUpdate';
 import { MessageNotice, FloatingNotice, useAppNotice } from '../appNotice';
 import { createVersionManagementVisitTracker } from '../services/versionManagementVisits';
 import { AppReleaseNotes } from '../components/AppReleaseNotes';
+import { useDialogFocusTrap } from '../components/useDialogFocusTrap';
 
 export type CoreInstallResult = {
   version: string;
@@ -113,7 +114,6 @@ export function VersionManagementPage() {
   const feedback = useAppNotice();
   const { showNotice } = feedback;
 
-  const installDialogRef = useRef<HTMLDivElement>(null);
   const customMirrorInputRef = useRef<HTMLInputElement>(null);
   const completedInstallKeyRef = useRef('');
   const manualInstallInProgressRef = useRef(false);
@@ -395,45 +395,6 @@ export function VersionManagementPage() {
     };
   }, []);
 
-  useEffect(() => {
-    if (!installDialogOpen) return;
-
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    installDialogRef.current?.focus();
-
-    const preventEscapeClose = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.preventDefault();
-      }
-    };
-
-    document.addEventListener('keydown', preventEscapeClose);
-    return () => {
-      document.body.style.overflow = previousOverflow;
-      document.removeEventListener('keydown', preventEscapeClose);
-    };
-  }, [installDialogOpen]);
-
-  useEffect(() => {
-    if (!customMirrorDialogOpen) return;
-
-    const previousOverflow = document.body.style.overflow;
-    document.body.style.overflow = 'hidden';
-    window.setTimeout(() => customMirrorInputRef.current?.focus(), 0);
-
-    const closeOnEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && !versionSourceSaving) {
-        setCustomMirrorDialogOpen(false);
-      }
-    };
-    document.addEventListener('keydown', closeOnEscape);
-    return () => {
-      document.body.style.overflow = previousOverflow;
-      document.removeEventListener('keydown', closeOnEscape);
-    };
-  }, [customMirrorDialogOpen, versionSourceSaving]);
-
   const latestVersion = latest?.version ?? '';
   const currentVersion = coreStatus?.currentVersion ?? '';
   const coreInstalled = Boolean(coreStatus?.installed);
@@ -523,9 +484,33 @@ export function VersionManagementPage() {
     : t('common.close');
 
   const installDialogActionDisabled = (installing || progress?.running) && (cancellingInstall || !progress?.cancellable);
+  const customMirrorDialogRef = useDialogFocusTrap<HTMLFormElement>({
+    active: customMirrorDialogOpen,
+    initialFocusRef: customMirrorInputRef,
+    onEscape: versionSourceSaving
+      ? undefined
+      : () => {
+          setCustomMirrorDialogOpen(false);
+          setCustomMirrorDraft('');
+          setVersionSourceError('');
+        },
+    preventEscape: versionSourceSaving,
+  });
+  const confirmUpdateDialogRef = useDialogFocusTrap<HTMLElement>({
+    active: confirmUpdateOpen,
+    onEscape: () => setConfirmUpdateOpen(false),
+  });
+  const installDialogRef = useDialogFocusTrap<HTMLDivElement>({
+    active: installDialogOpen && Boolean(progress),
+    onEscape: installing || progress?.running ? undefined : closeInstallDialog,
+    preventEscape: Boolean(installing || progress?.running),
+  });
 
   return (
     <section className="page management-page version-management-page">
+      <header className="management-header version-page-header">
+        <div><h1>{t('app.nav.versions')}</h1></div>
+      </header>
       <MessageNotice message={versionSourceError} onDismiss={() => setVersionSourceError('')} />
       <section className="panel version-list">
         <div className="version-source-row" aria-label={t('kernel.versions.downloadSource')}>
@@ -724,6 +709,7 @@ export function VersionManagementPage() {
       {customMirrorDialogOpen ? (
         <div className="install-dialog-backdrop custom-mirror-dialog-backdrop">
           <form
+            ref={customMirrorDialogRef}
             className="install-dialog app-update-dialog custom-mirror-dialog"
             role="dialog"
             aria-modal="true"
@@ -797,6 +783,7 @@ export function VersionManagementPage() {
       {confirmUpdateOpen ? (
         <div className="install-dialog-backdrop app-update-dialog-backdrop">
           <section
+            ref={confirmUpdateDialogRef}
             className="install-dialog app-update-dialog"
             role="dialog"
             aria-modal="true"
diff --git a/src/styles.css b/src/styles.css
index 25ad352..1c30475 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -11757,3563 +11757,3 @@ body.table-col-resizing * {
   background: var(--theme-fdf1ee);
   color: var(--theme-a33b2b);
 }
-
-/* Easy mode onboarding */
-.easy-mode-page {
-  display: grid;
-  gap: 20px;
-  max-width: 980px;
-  margin-inline: auto;
-}
-
-.easy-mode-hero {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 24px;
-}
-
-.easy-mode-hero-copy {
-  min-width: 0;
-}
-
-.easy-mode-eyebrow {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--ui-accent-strong);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: 0.03em;
-  text-transform: uppercase;
-}
-
-.easy-mode-hero h1 {
-  margin: 8px 0 7px;
-  color: var(--theme-2d2a26);
-  font-size: clamp(26px, 3vw, 36px);
-  line-height: 1.12;
-}
-
-.easy-mode-hero p {
-  max-width: 660px;
-  margin: 0;
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-body);
-  line-height: var(--line-height-body);
-}
-
-.easy-mode-reset {
-  flex: none;
-  min-height: 38px;
-}
-
-.easy-mode-core-alert {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 13px;
-  padding: 14px 16px;
-  border: 1px solid var(--theme-dfbf91);
-  border-radius: 11px;
-  background: var(--theme-fff7e9);
-  color: var(--theme-5f5a53);
-}
-
-.easy-mode-alert-icon {
-  display: grid;
-  width: 38px;
-  height: 38px;
-  place-items: center;
-  border-radius: 10px;
-  background: var(--theme-e4d0af);
-  color: var(--theme-805a24);
-}
-
-.easy-mode-core-alert strong {
-  display: block;
-  color: var(--theme-2d2a26);
-}
-
-.easy-mode-core-alert p {
-  margin: 3px 0 0;
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-}
-
-.easy-mode-core-alert .secondary-button {
-  min-height: 36px;
-  white-space: nowrap;
-}
-
-.easy-mode-stepper {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.easy-mode-stepper-item {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  min-height: 64px;
-  padding: 10px 12px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 10px;
-  background: var(--theme-fffdf8);
-  color: var(--theme-5f5a53);
-  text-align: left;
-}
-
-.easy-mode-stepper-item:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--theme-e3e1db));
-  background: var(--theme-f8f5ee);
-}
-
-.easy-mode-stepper-item:disabled {
-  cursor: not-allowed;
-  opacity: 0.58;
-}
-
-.easy-mode-stepper-item.active {
-  border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--theme-e3e1db));
-  background: var(--ui-accent-soft);
-  color: var(--ui-accent-strong);
-  box-shadow: 0 5px 14px var(--ui-accent-shadow);
-}
-
-.easy-mode-stepper-number {
-  display: grid;
-  width: 30px;
-  height: 30px;
-  place-items: center;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 999px;
-  background: var(--theme-faf9f5);
-  color: var(--theme-716b61);
-  font-weight: var(--font-weight-semibold);
-}
-
-.easy-mode-stepper-item.active .easy-mode-stepper-number,
-.easy-mode-stepper-item.complete .easy-mode-stepper-number {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent);
-  color: #ffffff;
-}
-
-.easy-mode-stepper-item small,
-.easy-mode-stepper-item strong {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.easy-mode-stepper-item small {
-  margin-bottom: 2px;
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-caption);
-}
-
-.easy-mode-stepper-item strong {
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-body);
-}
-
-.easy-mode-panel {
-  display: grid;
-  gap: 20px;
-  padding: clamp(20px, 3vw, 30px);
-}
-
-.easy-mode-panel-heading {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.easy-mode-panel-heading > div:first-child {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  min-width: 0;
-}
-
-.easy-mode-step-badge {
-  display: grid;
-  flex: none;
-  width: 32px;
-  height: 32px;
-  place-items: center;
-  border-radius: 9px;
-  background: var(--ui-accent);
-  color: #ffffff;
-  font-weight: var(--font-weight-semibold);
-}
-
-.easy-mode-panel-heading h2 {
-  margin: 0;
-}
-
-.easy-mode-panel-heading p {
-  margin: 5px 0 0;
-  color: var(--theme-5f5a53);
-  line-height: var(--line-height-body);
-}
-
-.easy-mode-choice-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.easy-mode-choice-card {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 13px;
-  min-width: 0;
-  min-height: 118px;
-  padding: 18px;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 11px;
-  background: var(--theme-faf9f5);
-  color: var(--theme-2d2a26);
-  text-align: left;
-  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
-}
-
-.easy-mode-choice-card:hover {
-  border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--theme-d5d2cb));
-  background: var(--theme-fffdf8);
-  transform: translateY(-1px);
-}
-
-.easy-mode-choice-card.selected {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent-soft);
-  box-shadow: 0 7px 18px var(--ui-accent-shadow);
-}
-
-.easy-mode-choice-icon {
-  display: grid;
-  flex: none;
-  width: 43px;
-  height: 43px;
-  place-items: center;
-  border-radius: 11px;
-}
-
-.easy-mode-choice-icon.oauth {
-  background: var(--theme-dce2fb);
-  color: var(--theme-344ca1);
-}
-
-.easy-mode-choice-icon.api {
-  background: var(--theme-dce8df);
-  color: var(--theme-2f6b3a);
-}
-
-.easy-mode-choice-copy {
-  display: grid;
-  gap: 5px;
-  min-width: 0;
-}
-
-.easy-mode-choice-copy strong {
-  font-size: var(--font-size-section);
-}
-
-.easy-mode-choice-copy span {
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-}
-
-.easy-mode-choice-card > svg {
-  color: var(--theme-7a746c);
-}
-
-.easy-mode-hint,
-.easy-mode-inline-warning,
-.easy-mode-footer {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-}
-
-.easy-mode-hint {
-  padding: 11px 13px;
-  border-radius: 8px;
-  background: var(--theme-f1f8f1);
-  color: var(--theme-2f6b3a);
-}
-
-.easy-mode-hint svg,
-.easy-mode-footer svg {
-  flex: none;
-  margin-top: 1px;
-}
-
-.easy-mode-selected-path {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 14px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 9px;
-  background: var(--theme-faf9f5);
-}
-
-.easy-mode-selected-path > div {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
-}
-
-.easy-mode-selected-path small {
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-caption);
-}
-
-.easy-mode-selected-path strong {
-  color: var(--theme-2d2a26);
-}
-
-.text-button {
-  margin-left: auto;
-  padding: 4px 0;
-  border: 0;
-  background: transparent;
-  color: var(--ui-accent-strong);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-  white-space: nowrap;
-}
-
-.text-button:hover {
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.easy-mode-checklist {
-  display: grid;
-  gap: 12px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.easy-mode-checklist li {
-  display: grid;
-  grid-template-columns: 27px minmax(0, 1fr);
-  align-items: start;
-  gap: 10px;
-}
-
-.easy-mode-checklist li > span {
-  display: grid;
-  width: 27px;
-  height: 27px;
-  place-items: center;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 999px;
-  background: var(--theme-faf9f5);
-  color: var(--ui-accent-strong);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-}
-
-.easy-mode-checklist p {
-  margin: 3px 0 0;
-  color: var(--theme-2d2a26);
-  line-height: var(--line-height-body);
-}
-
-.easy-mode-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin-top: 2px;
-}
-
-.easy-mode-actions button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  min-height: 42px;
-}
-
-.easy-mode-inline-warning {
-  margin: -8px 0 0;
-  color: var(--theme-9f2d20);
-}
-
-.easy-mode-agent-layout {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 14px;
-  padding: 18px;
-  border: 1px solid var(--theme-c9d8ca);
-  border-radius: 10px;
-  background: var(--theme-f1f8f1);
-}
-
-.easy-mode-agent-icon {
-  display: grid;
-  width: 54px;
-  height: 54px;
-  place-items: center;
-  border-radius: 14px;
-  background: var(--theme-2f6b3a);
-  color: #ffffff;
-}
-
-.easy-mode-agent-layout strong {
-  color: var(--theme-2d2a26);
-}
-
-.easy-mode-agent-layout p {
-  margin: 4px 0 0;
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-}
-
-.easy-mode-footer {
-  justify-content: center;
-  padding: 2px 0 8px;
-  color: var(--theme-7a746c);
-}
-
-@media (max-width: 680px) {
-  .simple-mode-step-status-track {
-    grid-template-columns: 1fr;
-    gap: 4px;
-  }
-
-  .simple-mode-step-status-connector {
-    width: 1px;
-    height: 10px;
-    margin-left: 12px;
-  }
-
-  .simple-mode-step-status-copy small {
-    white-space: normal;
-  }
-
-  .easy-mode-hero {
-    flex-direction: column;
-    gap: 14px;
-  }
-
-  .easy-mode-reset {
-    width: 100%;
-  }
-
-  .easy-mode-core-alert {
-    grid-template-columns: auto minmax(0, 1fr);
-  }
-
-  .easy-mode-core-alert .secondary-button {
-    grid-column: 1 / -1;
-    width: 100%;
-  }
-
-  .easy-mode-stepper,
-  .easy-mode-choice-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .easy-mode-stepper-item {
-    min-height: 56px;
-  }
-
-  .easy-mode-panel-heading {
-    flex-direction: column;
-  }
-
-  .easy-mode-selected-path {
-    align-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  .easy-mode-selected-path .text-button {
-    width: 100%;
-    margin-left: 0;
-    text-align: left;
-  }
-
-  .easy-mode-actions {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-
-  .easy-mode-actions button {
-    width: 100%;
-  }
-}
-
-/* Simplified onboarding flow */
-.simple-mode-page {
-  display: grid;
-  gap: 18px;
-  max-width: 920px;
-  margin-inline: auto;
-}
-
-.simple-mode-step-status {
-  display: grid;
-  gap: 10px;
-  padding: 12px 14px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 10px;
-  background: var(--theme-fffdf8);
-}
-
-.simple-mode-step-status-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-meta);
-}
-
-.simple-mode-step-status-heading strong {
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-}
-
-.simple-mode-step-status-track {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
-  align-items: center;
-  gap: 8px;
-}
-
-.simple-mode-step-status-item {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 9px;
-  min-width: 0;
-  padding: 9px 10px;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  color: var(--theme-7a746c);
-}
-
-.simple-mode-step-status-item.active {
-  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--theme-e3e1db));
-  background: var(--ui-accent-soft);
-}
-
-.simple-mode-step-status-item.complete {
-  color: var(--theme-5f5a53);
-}
-
-.simple-mode-step-status-number {
-  display: grid;
-  width: 25px;
-  height: 25px;
-  place-items: center;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 999px;
-  background: var(--theme-faf9f5);
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-meta);
-  font-weight: var(--font-weight-semibold);
-}
-
-.simple-mode-step-status-item.active .simple-mode-step-status-number {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent);
-  color: #ffffff;
-}
-
-.simple-mode-step-status-item.complete .simple-mode-step-status-number {
-  border-color: var(--theme-b6d3bd);
-  background: var(--theme-f1f8f1);
-  color: var(--theme-2f6b3a);
-}
-
-.simple-mode-step-status-copy {
-  display: grid;
-  min-width: 0;
-  gap: 2px;
-}
-
-.simple-mode-step-status-copy strong,
-.simple-mode-step-status-copy small {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-step-status-copy strong {
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-}
-
-.simple-mode-step-status-copy small {
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-caption);
-}
-
-.simple-mode-step-status-connector {
-  height: 1px;
-  background: var(--theme-d5d2cb);
-}
-
-.simple-mode-step-status-connector.complete {
-  background: var(--theme-b6d3bd);
-}
-
-.simple-mode-core-alert {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 14px 16px;
-  border: 1px solid var(--theme-dfbf91);
-  border-radius: 10px;
-  background: var(--theme-fff7e9);
-  color: var(--theme-5f5a53);
-}
-
-.simple-mode-core-alert > div {
-  min-width: 0;
-}
-
-.simple-mode-core-alert strong {
-  display: block;
-  color: var(--theme-2d2a26);
-}
-
-.simple-mode-core-alert p {
-  margin: 3px 0 0;
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-core-alert .secondary-button {
-  flex: none;
-  min-height: 36px;
-  white-space: nowrap;
-}
-
-.simple-mode-progress {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.simple-mode-progress-item {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-items: center;
-  gap: 9px;
-  min-width: 0;
-  min-height: 60px;
-  padding: 9px 11px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 9px;
-  background: var(--theme-fffdf8);
-  color: var(--theme-5f5a53);
-  text-align: left;
-}
-
-.simple-mode-progress-item:hover:not(:disabled) {
-  border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--theme-e3e1db));
-  background: var(--theme-f8f5ee);
-}
-
-.simple-mode-progress-item:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-
-.simple-mode-progress-item.active {
-  border-color: color-mix(in srgb, var(--ui-accent) 40%, var(--theme-e3e1db));
-  background: var(--ui-accent-soft);
-  box-shadow: 0 4px 12px var(--ui-accent-shadow);
-}
-
-.simple-mode-progress-item strong {
-  display: block;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-progress-item strong {
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-body);
-}
-
-.simple-mode-task {
-  display: grid;
-  gap: 18px;
-  padding: clamp(20px, 3vw, 28px);
-}
-
-.simple-mode-task-heading {
-  display: flex;
-  align-items: flex-start;
-  gap: 11px;
-}
-
-.simple-mode-task-heading h2 {
-  margin: 0;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-panel-title);
-}
-
-.simple-mode-task-heading p {
-  margin: 4px 0 0;
-  color: var(--theme-5f5a53);
-  line-height: var(--line-height-body);
-  white-space: pre-line;
-}
-
-.simple-mode-instruction {
-  margin: -3px 0 0;
-  color: var(--theme-2d2a26);
-  font-weight: var(--font-weight-semibold);
-}
-
-.simple-mode-guide-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.simple-mode-guide-card {
-  display: grid;
-  align-content: start;
-  gap: 7px;
-  min-width: 0;
-  min-height: 170px;
-  padding: 15px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 10px;
-  background: var(--theme-faf9f5);
-}
-
-.simple-mode-guide-label {
-  color: var(--ui-accent-strong);
-  font-size: var(--font-size-caption);
-  font-weight: var(--font-weight-semibold);
-}
-
-.simple-mode-guide-card > strong {
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-section);
-}
-
-.simple-mode-guide-card > p {
-  flex: 1;
-  margin: 0;
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-choice-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px;
-}
-
-.simple-mode-choice {
-  display: grid;
-  align-content: start;
-  gap: 7px;
-  min-width: 0;
-  min-height: 104px;
-  padding: 16px;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 10px;
-  background: var(--theme-faf9f5);
-  color: var(--theme-2d2a26);
-  text-align: left;
-  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
-}
-
-.simple-mode-choice:hover {
-  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--theme-d5d2cb));
-  background: var(--theme-fffdf8);
-}
-
-.simple-mode-choice.selected {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent-soft);
-  box-shadow: 0 5px 14px var(--ui-accent-shadow);
-}
-
-.simple-mode-choice strong {
-  font-size: var(--font-size-section);
-}
-
-.simple-mode-choice span {
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-choice small {
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-caption);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-task-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-  padding-top: 2px;
-  border-top: 1px solid var(--theme-e3e1db);
-}
-
-.simple-mode-selection {
-  min-width: 0;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-selection.muted {
-  color: var(--theme-7a746c);
-}
-
-.simple-mode-task-footer > .primary-button,
-.simple-mode-task-footer > .secondary-button {
-  flex: none;
-  min-height: 40px;
-}
-
-.simple-mode-path-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 8px;
-  background: var(--theme-faf9f5);
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-label);
-}
-
-.simple-mode-path-row strong {
-  color: var(--theme-2d2a26);
-}
-
-.simple-mode-path-row .text-button {
-  margin-left: auto;
-}
-
-.simple-mode-action-card {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 16px;
-  border: 1px solid var(--theme-c9d6e2);
-  border-radius: 10px;
-  background: var(--theme-f1f6fa);
-}
-
-.simple-mode-action-card > div {
-  min-width: 0;
-}
-
-.simple-mode-action-card strong {
-  color: var(--theme-2d2a26);
-}
-
-.simple-mode-action-card p {
-  margin: 4px 0 0;
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-action-card .primary-button {
-  flex: none;
-  min-height: 40px;
-}
-
-.simple-mode-agent-card {
-  border-color: var(--theme-c9d8ca);
-  background: var(--theme-f1f8f1);
-}
-
-.simple-mode-checklist {
-  display: grid;
-  gap: 11px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.simple-mode-checklist li {
-  display: grid;
-  grid-template-columns: 25px minmax(0, 1fr);
-  align-items: start;
-  gap: 10px;
-}
-
-.simple-mode-checklist li > span {
-  display: grid;
-  width: 25px;
-  height: 25px;
-  place-items: center;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 999px;
-  background: var(--theme-faf9f5);
-  color: var(--ui-accent-strong);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-}
-
-.simple-mode-checklist p {
-  margin: 3px 0 0;
-  color: var(--theme-2d2a26);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-guide-list li > div {
-  display: grid;
-  gap: 3px;
-  min-width: 0;
-}
-
-.simple-mode-guide-list strong {
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-body);
-}
-
-.simple-mode-guide-list p {
-  margin: 0;
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-label);
-}
-
-.simple-mode-warning {
-  margin: -6px 0 0;
-  color: var(--theme-9f2d20);
-  font-size: var(--font-size-label);
-}
-
-.simple-mode-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.simple-mode-embedded-task {
-  display: grid;
-  gap: 16px;
-  padding: clamp(18px, 2.5vw, 24px);
-}
-
-.simple-mode-embedded-heading {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
-}
-
-.simple-mode-embedded-heading > div:first-child {
-  display: flex;
-  align-items: flex-start;
-  gap: 11px;
-  min-width: 0;
-}
-
-.simple-mode-embedded-heading h2 {
-  margin: 0;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-panel-title);
-}
-
-.simple-mode-embedded-heading p {
-  margin: 4px 0 0;
-  color: var(--theme-5f5a53);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-embedded-content {
-  min-width: 0;
-  padding: 18px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 10px;
-  background: var(--theme-faf9f5);
-  container-type: inline-size;
-  container-name: workspace;
-}
-
-.simple-mode-provider-hint {
-  padding: 11px 13px;
-  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, var(--theme-e3e1db));
-  border-radius: 8px;
-  background: var(--ui-accent-soft);
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-  white-space: pre-line;
-}
-
-.simple-mode-embedded-content > .page {
-  max-width: none;
-}
-
-.simple-mode-flow-navigation {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 8px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid var(--theme-e3e1db);
-}
-
-.simple-mode-flow-navigation > button {
-  min-width: 96px;
-  min-height: 40px;
-  white-space: nowrap;
-}
-
-.simple-mode-flow-navigation > .primary-button {
-  margin-left: auto;
-}
-
-.simple-mode-progress {
-  position: relative;
-  gap: 12px;
-}
-
-.simple-mode-progress-item {
-  position: relative;
-  min-height: 76px;
-  padding: 13px 16px;
-  border-radius: 13px;
-  background: color-mix(in srgb, var(--theme-fffdf8) 90%, var(--theme-faf9f5));
-  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
-}
-
-.simple-mode-progress-item:hover:not(:disabled) {
-  transform: translateY(-1px);
-}
-
-.simple-mode-progress-item-head {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.simple-mode-step-badge {
-  display: grid;
-  width: 29px;
-  height: 29px;
-  place-items: center;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 999px;
-  background: var(--theme-faf9f5);
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
-}
-
-.simple-mode-progress-item.active .simple-mode-step-badge {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent);
-  color: #ffffff;
-}
-
-.simple-mode-progress-copy {
-  display: grid;
-  min-width: 0;
-  gap: 3px;
-}
-
-.simple-mode-progress-copy strong {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-body);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-progress-copy small {
-  overflow: hidden;
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-caption);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-task {
-  gap: 22px;
-  padding: clamp(22px, 3vw, 32px);
-  border-radius: 16px;
-  box-shadow: 0 14px 34px color-mix(in srgb, var(--ui-accent-shadow) 58%, transparent);
-}
-
-.simple-mode-task-heading {
-  align-items: center;
-  gap: 12px;
-}
-
-.simple-mode-heading-icon {
-  display: grid;
-  flex: none;
-  width: 38px;
-  height: 38px;
-  place-items: center;
-  border: 1px solid color-mix(in srgb, var(--ui-accent) 27%, var(--theme-e3e1db));
-  border-radius: 11px;
-  background: var(--ui-accent-soft);
-  color: var(--ui-accent-strong);
-}
-
-.simple-mode-task-heading > div {
-  min-width: 0;
-}
-
-.simple-mode-task-heading h2 {
-  font-size: clamp(20px, 2.2vw, 24px);
-  line-height: 1.2;
-}
-
-.simple-mode-task-heading p {
-  max-width: 700px;
-  margin-top: 6px;
-  font-size: var(--font-size-body);
-}
-
-.simple-mode-choice-grid {
-  gap: 14px;
-}
-
-.simple-mode-choice {
-  gap: 10px;
-  min-height: 132px;
-  padding: 18px;
-  border-radius: 13px;
-  background: var(--theme-fffdf8);
-  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
-}
-
-.simple-mode-choice:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 8px 20px rgba(45, 42, 38, 0.08);
-}
-
-.simple-mode-choice-heading {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-}
-
-.simple-mode-choice-icon {
-  display: grid;
-  flex: none;
-  width: 32px;
-  height: 32px;
-  place-items: center;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 9px;
-  background: var(--theme-faf9f5);
-  color: var(--theme-7a746c);
-}
-
-.simple-mode-choice.selected .simple-mode-choice-icon {
-  border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--theme-e3e1db));
-  background: var(--theme-fffdf8);
-  color: var(--ui-accent-strong);
-}
-
-.simple-mode-choice-title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  min-width: 0;
-  flex: 1;
-}
-
-.simple-mode-choice-title strong {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-choice-title .state-pill {
-  flex: none;
-}
-
-.simple-mode-choice > span:not(.simple-mode-choice-icon) {
-  padding-left: 42px;
-}
-
-.simple-mode-choice > small {
-  padding-left: 42px;
-}
-
-.simple-mode-embedded-box {
-  display: grid;
-  gap: 14px;
-  padding: 14px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 13px;
-  background: color-mix(in srgb, var(--theme-faf9f5) 82%, var(--theme-fffdf8));
-}
-
-.simple-mode-provider-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
-  gap: 12px;
-}
-
-.simple-mode-provider-card {
-  grid-template-rows: minmax(0, 1fr) auto;
-  gap: 16px;
-  min-height: 158px;
-  height: auto;
-  padding: 16px;
-  border-radius: 12px;
-  background: var(--theme-fffdf8);
-  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
-}
-
-.simple-mode-provider-card:hover {
-  transform: translateY(-1px);
-  border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--theme-e3e1db));
-  box-shadow: 0 8px 20px rgba(45, 42, 38, 0.07);
-}
-
-.simple-mode-provider-card.connected {
-  border-color: var(--theme-b6d3bd);
-  background: var(--ui-accent-soft);
-}
-
-.simple-mode-provider-card-head {
-  display: flex;
-  align-items: flex-start;
-  gap: 11px;
-  min-width: 0;
-}
-
-.simple-mode-provider-logo {
-  width: 36px;
-  height: 36px;
-  flex: none;
-  border-radius: 10px;
-}
-
-.simple-mode-provider-logo img {
-  width: 22px;
-  height: 22px;
-}
-
-.simple-mode-provider-copy {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-}
-
-.simple-mode-provider-copy strong {
-  overflow: hidden;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-body);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-provider-copy span {
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-meta);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-provider-card-foot {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  min-width: 0;
-}
-
-.simple-mode-provider-card-foot .primary-button,
-.simple-mode-provider-card-foot .secondary-button {
-  min-height: 34px;
-  padding-inline: 13px;
-  font-size: var(--font-size-label);
-}
-
-.simple-mode-api-form {
-  display: grid;
-  gap: 18px;
-  padding: 20px;
-  border: 1px solid var(--theme-d8d4cc);
-  border-radius: 12px;
-  background: var(--theme-fffdf8);
-}
-
-.simple-mode-api-model-card {
-  display: grid;
-  gap: 11px;
-  padding-top: 2px;
-}
-
-.simple-mode-api-model-fetch {
-  display: flex;
-  justify-content: flex-start;
-}
-
-.simple-mode-api-fetch-button {
-  min-height: 36px;
-  padding-inline: 14px;
-  white-space: nowrap;
-}
-
-.simple-mode-api-model-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
-}
-
-.simple-mode-api-model-heading strong {
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-}
-
-.simple-mode-api-model-heading .secondary-button {
-  min-height: 36px;
-  flex: none;
-  padding-inline: 11px;
-  white-space: nowrap;
-}
-
-.simple-mode-api-model-selection {
-  display: grid;
-  gap: 8px;
-}
-
-.simple-mode-api-model-selection-heading {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.simple-mode-api-model-selection-heading strong {
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-}
-
-.simple-mode-api-model-selection-heading span {
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-caption);
-}
-
-.simple-mode-api-model-options {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 2px 18px;
-  max-height: 220px;
-  overflow-y: auto;
-  padding: 6px 0;
-  border-top: 1px solid var(--theme-e3e1db);
-  border-bottom: 1px solid var(--theme-e3e1db);
-}
-
-.simple-mode-api-model-option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-  min-height: 33px;
-  padding: 5px 7px;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-  cursor: pointer;
-}
-
-.simple-mode-api-model-option:hover,
-.simple-mode-api-model-option.selected {
-  background: var(--theme-faf9f5);
-}
-
-.simple-mode-api-model-option input {
-  flex: none;
-  width: 15px;
-  height: 15px;
-  margin: 0;
-  accent-color: var(--ui-accent);
-}
-
-.simple-mode-api-model-option > span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-api-platforms {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  padding: 4px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 10px;
-  background: var(--theme-faf9f5);
-}
-
-.simple-mode-api-platform {
-  flex: 1 1 132px;
-  min-width: 0;
-  min-height: 38px;
-  gap: 7px;
-  padding-inline: 12px;
-  border-color: transparent;
-  background: transparent;
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-}
-
-.simple-mode-api-platform:hover:not(:disabled) {
-  border-color: transparent;
-  background: var(--theme-e8e5dc);
-}
-
-.simple-mode-api-platform.active {
-  border-color: var(--ui-accent);
-  background: var(--theme-fffdf8);
-  color: var(--theme-2d2a26);
-  box-shadow: 0 2px 6px rgba(45, 42, 38, 0.08);
-}
-
-.simple-mode-api-platform-icon {
-  width: 16px;
-  height: 16px;
-  object-fit: contain;
-}
-
-.simple-mode-api-fields {
-  display: grid;
-  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
-  gap: 14px;
-}
-
-.simple-mode-field {
-  display: grid;
-  gap: 8px;
-  min-width: 0;
-}
-
-.simple-mode-field label {
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: 0.01em;
-}
-
-.simple-mode-field .text-input,
-.simple-mode-field .select-input {
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 44px;
-  padding: 0 13px;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 9px;
-  background: var(--theme-faf9f5);
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-body);
-  box-shadow: inset 0 1px 2px rgba(45, 42, 38, 0.04);
-  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
-}
-
-.simple-mode-field .text-input:hover:not(:disabled),
-.simple-mode-field .select-input:hover:not(:disabled) {
-  border-color: var(--theme-9b958c);
-  background: var(--theme-fffdf8);
-}
-
-.simple-mode-field .text-input:focus,
-.simple-mode-field .select-input:focus {
-  outline: none;
-  border-color: var(--ui-accent);
-  background: var(--theme-fffdf8);
-  box-shadow: 0 0 0 3px var(--ui-accent-shadow);
-}
-
-.simple-mode-field .text-input::placeholder {
-  color: var(--text-placeholder);
-}
-
-.simple-mode-api-actions,
-.simple-mode-agent-actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-.simple-mode-api-actions .primary-button,
-.simple-mode-api-actions .secondary-button,
-.simple-mode-agent-actions .primary-button,
-.simple-mode-agent-actions .secondary-button {
-  gap: 7px;
-}
-
-.simple-mode-api-result {
-  display: grid;
-  gap: 9px;
-  margin-top: 1px;
-  padding: 12px;
-  border: 1px solid var(--theme-b6d3bd);
-  border-radius: 9px;
-  background: var(--ui-accent-soft);
-}
-
-.simple-mode-api-result-heading {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-}
-
-.simple-mode-model-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.simple-mode-model-tag {
-  padding: 3px 8px;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 5px;
-  background: var(--theme-fffdf8);
-  color: var(--theme-4f4a43);
-  font-size: var(--font-size-meta);
-}
-
-.simple-mode-more-models {
-  align-self: center;
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-meta);
-}
-
-.simple-mode-agent-layout {
-  display: grid;
-  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
-  gap: 14px;
-  margin-top: 2px;
-}
-
-.simple-mode-agent-list {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: 460px;
-  padding: 8px;
-  overflow-y: auto;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 12px;
-  background: var(--theme-faf9f5);
-}
-
-.simple-mode-agent-option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  min-width: 0;
-  padding: 10px 11px;
-  border: 1px solid transparent;
-  border-radius: 9px;
-  background: transparent;
-  color: var(--theme-2d2a26);
-  text-align: left;
-  transition: border-color 140ms ease, background 140ms ease;
-}
-
-.simple-mode-agent-option:hover {
-  border-color: var(--theme-d5d2cb);
-  background: var(--theme-fffdf8);
-}
-
-.simple-mode-agent-option.selected {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent-soft);
-  box-shadow: 0 3px 10px var(--ui-accent-shadow);
-}
-
-.simple-mode-agent-option-icon {
-  width: 23px;
-  height: 23px;
-  flex: none;
-  object-fit: contain;
-}
-
-.simple-mode-agent-option-copy {
-  display: grid;
-  min-width: 0;
-  flex: 1;
-  gap: 3px;
-}
-
-.simple-mode-agent-option-copy strong {
-  overflow: hidden;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-label);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-agent-option-copy span {
-  overflow: hidden;
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-caption);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-agent-option-copy span.installed {
-  color: var(--ui-accent-strong);
-}
-
-.simple-mode-agent-config {
-  display: grid;
-  align-content: start;
-  gap: 16px;
-  min-width: 0;
-  padding: 20px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 12px;
-  background: var(--theme-fffdf8);
-}
-
-.simple-mode-agent-identity {
-  display: flex;
-  align-items: center;
-  gap: 13px;
-  min-width: 0;
-}
-
-.simple-mode-agent-logo {
-  width: 44px;
-  height: 44px;
-  flex: none;
-  border-radius: 11px;
-}
-
-.simple-mode-agent-logo img {
-  width: 28px;
-  height: 28px;
-}
-
-.simple-mode-agent-identity-copy {
-  display: grid;
-  min-width: 0;
-  gap: 4px;
-}
-
-.simple-mode-agent-identity-copy h3 {
-  margin: 0;
-  overflow: hidden;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-panel-title);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-agent-identity-copy span {
-  overflow: hidden;
-  color: var(--theme-5f5a53);
-  font-size: var(--font-size-label);
-  line-height: var(--line-height-body);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.simple-mode-agent-detection {
-  padding: 10px 13px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 8px;
-  background: var(--theme-faf9f5);
-}
-
-.simple-mode-agent-detection span {
-  display: block;
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-meta);
-  line-height: var(--line-height-body);
-}
-
-.simple-mode-agent-actions {
-  margin-top: 1px;
-}
-
-.simple-mode-agent-actions .primary-button {
-  flex: 1;
-}
-
-.simple-mode-agent-actions .primary-button,
-.simple-mode-agent-actions .secondary-button {
-  min-height: 42px;
-  font-size: var(--font-size-label);
-}
-
-.simple-mode-task-footer {
-  gap: 16px;
-  padding-top: 16px;
-}
-
-.simple-mode-selection {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-@media (max-width: 760px) {
-  .simple-mode-agent-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .simple-mode-agent-list {
-    max-height: 260px;
-  }
-}
-
-@media (max-width: 680px) {
-  .simple-mode-progress-item {
-    min-height: 62px;
-  }
-
-  .simple-mode-progress-item-head {
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: start;
-  }
-
-  .simple-mode-progress-item-head > .state-pill {
-    grid-column: 2;
-    justify-self: start;
-  }
-
-  .simple-mode-choice-title {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .simple-mode-provider-card-foot {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .simple-mode-provider-card-foot .primary-button,
-  .simple-mode-provider-card-foot .secondary-button {
-    width: 100%;
-  }
-
-  .simple-mode-task {
-    gap: 18px;
-    padding: 18px;
-    border-radius: 13px;
-  }
-
-  .simple-mode-task-heading {
-    align-items: flex-start;
-  }
-
-  .simple-mode-heading-icon {
-    width: 34px;
-    height: 34px;
-  }
-
-  .simple-mode-choice > span:not(.simple-mode-choice-icon),
-  .simple-mode-choice > small {
-    padding-left: 0;
-  }
-
-  .simple-mode-api-form {
-    padding: 14px;
-  }
-
-  .simple-mode-api-fields {
-    grid-template-columns: 1fr;
-  }
-
-  .simple-mode-api-actions,
-  .simple-mode-agent-actions {
-    display: grid;
-    grid-template-columns: 1fr;
-    align-items: stretch;
-  }
-
-  .simple-mode-api-actions button,
-  .simple-mode-agent-actions button {
-    width: 100%;
-  }
-
-  .simple-mode-agent-config {
-    padding: 16px;
-  }
-
-  .simple-mode-core-alert,
-  .simple-mode-action-card,
-  .simple-mode-task-footer {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .simple-mode-core-alert .secondary-button,
-  .simple-mode-action-card .primary-button,
-  .simple-mode-task-footer > .primary-button,
-  .simple-mode-task-footer > .secondary-button {
-    width: 100%;
-  }
-
-  .simple-mode-progress,
-  .simple-mode-choice-grid,
-  .simple-mode-guide-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .simple-mode-progress-item {
-    min-height: 54px;
-  }
-
-  .simple-mode-path-row {
-    flex-wrap: wrap;
-  }
-
-  .simple-mode-path-row .text-button {
-    width: 100%;
-    margin-left: 0;
-    text-align: left;
-  }
-
-  .simple-mode-actions {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-
-  .simple-mode-actions button {
-    width: 100%;
-  }
-
-  .simple-mode-embedded-heading {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .simple-mode-embedded-heading .text-button {
-    width: 100%;
-    margin-left: 0;
-    text-align: left;
-  }
-
-  .simple-mode-embedded-content {
-    padding: 10px;
-  }
-
-  .simple-mode-flow-navigation {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 10px;
-  }
-
-  .simple-mode-flow-navigation > button {
-    width: 100%;
-    margin-left: 0;
-  }
-
-  .simple-mode-flow-navigation > .secondary-button:only-child {
-    grid-column: 1;
-  }
-
-  .simple-mode-flow-navigation > .primary-button:only-child {
-    grid-column: 2;
-  }
-
-}
-
-.simple-mode-page {
-  max-width: 900px;
-  gap: 14px;
-}
-
-.simple-mode-progress {
-  gap: 8px;
-}
-
-.simple-mode-progress-item,
-.simple-mode-progress-item:hover:not(:disabled) {
-  min-height: 58px;
-  padding: 10px 12px;
-  border-radius: 9px;
-  background: var(--theme-fffdf8);
-  box-shadow: none;
-  transform: none;
-}
-
-.simple-mode-progress-item.active {
-  border-color: color-mix(in srgb, var(--ui-accent) 32%, var(--theme-e3e1db));
-  background: var(--ui-accent-soft);
-  box-shadow: none;
-}
-
-.simple-mode-progress-item-head {
-  gap: 8px;
-}
-
-.simple-mode-step-badge {
-  width: 26px;
-  height: 26px;
-}
-
-.simple-mode-task {
-  gap: 16px;
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: none;
-}
-
-.simple-mode-task-heading {
-  align-items: flex-start;
-  gap: 0;
-}
-
-.simple-mode-task-heading h2 {
-  font-size: var(--font-size-dialog-title);
-}
-
-.simple-mode-task-heading p {
-  margin-top: 4px;
-  font-size: var(--font-size-label);
-}
-
-.simple-mode-choice-grid {
-  gap: 8px;
-}
-
-.simple-mode-choice,
-.simple-mode-choice:hover {
-  min-height: 88px;
-  gap: 5px;
-  padding: 13px 14px;
-  border-radius: 8px;
-  box-shadow: none;
-  transform: none;
-}
-
-.simple-mode-choice.selected {
-  box-shadow: none;
-}
-
-.simple-mode-choice-heading {
-  gap: 0;
-}
-
-.simple-mode-choice-title {
-  justify-content: flex-start;
-  gap: 8px;
-}
-
-.simple-mode-choice > span:not(.simple-mode-choice-icon),
-.simple-mode-choice > small {
-  padding-left: 0;
-}
-
-.simple-mode-embedded-box {
-  gap: 10px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.simple-mode-provider-grid {
-  gap: 8px;
-}
-
-.simple-mode-provider-card,
-.simple-mode-provider-card:hover {
-  min-height: 0;
-  gap: 12px;
-  padding: 12px;
-  border-radius: 8px;
-  box-shadow: none;
-  transform: none;
-}
-
-.simple-mode-provider-card-foot .primary-button,
-.simple-mode-provider-card-foot .secondary-button {
-  min-height: 32px;
-}
-
-.simple-mode-api-form {
-  gap: 12px;
-  padding: 14px;
-  border-radius: 8px;
-  box-shadow: none;
-}
-
-.simple-mode-api-platforms {
-  gap: 6px;
-}
-
-.simple-mode-api-platform {
-  min-height: 32px;
-  padding-inline: 10px;
-  font-weight: var(--font-weight-semibold);
-}
-
-.simple-mode-api-result {
-  border-radius: 8px;
-}
-
-.simple-mode-agent-layout {
-  gap: 10px;
-}
-
-.simple-mode-agent-list,
-.simple-mode-agent-config {
-  border-radius: 8px;
-  box-shadow: none;
-}
-
-.simple-mode-agent-list {
-  padding: 6px;
-}
-
-.simple-mode-agent-config {
-  padding: 16px;
-}
-
-.simple-mode-task-footer {
-  gap: 12px;
-  padding-top: 12px;
-}
-
-@media (max-width: 760px) {
-  .simple-mode-agent-layout {
-    grid-template-columns: 1fr;
-  }
-
-  .simple-mode-agent-list {
-    max-height: 260px;
-  }
-}
-
-@media (max-width: 680px) {
-  .simple-mode-progress-item {
-    min-height: 62px;
-  }
-
-  .simple-mode-progress-item-head {
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: start;
-  }
-
-  .simple-mode-progress-item-head > .state-pill {
-    grid-column: 2;
-    justify-self: start;
-  }
-
-  .simple-mode-choice-title {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 4px;
-  }
-
-  .simple-mode-provider-card-foot {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .simple-mode-provider-card-foot .primary-button,
-  .simple-mode-provider-card-foot .secondary-button {
-    width: 100%;
-  }
-
-  .simple-mode-task {
-    gap: 18px;
-    padding: 18px;
-  }
-
-  .simple-mode-api-form {
-    padding: 14px;
-  }
-
-  .simple-mode-api-fields {
-    grid-template-columns: 1fr;
-  }
-
-  .simple-mode-api-actions,
-  .simple-mode-agent-actions {
-    display: grid;
-    grid-template-columns: 1fr;
-    align-items: stretch;
-  }
-
-  .simple-mode-api-actions button,
-  .simple-mode-agent-actions button {
-    width: 100%;
-  }
-
-  .simple-mode-agent-config {
-    padding: 16px;
-  }
-}
-
-@media (max-width: 680px) {
-  .simple-mode-api-model-heading {
-    align-items: flex-start;
-  }
-
-  .simple-mode-api-model-heading .secondary-button {
-    width: 100%;
-  }
-
-  .simple-mode-api-model-options {
-    grid-template-columns: 1fr;
-  }
-}
-
-.agents-page-embedded .agent-workbench {
-  gap: 18px;
-}
-
-.agents-page-embedded .management-header {
-  align-items: center;
-  min-height: 48px;
-}
-
-.agents-page-embedded .agent-embedded-header-copy {
-  display: grid;
-  gap: 4px;
-}
-
-.agents-page-embedded .agent-embedded-header-copy h1 {
-  font-size: var(--font-size-panel-title);
-  line-height: var(--line-height-tight);
-  white-space: normal;
-}
-
-.agents-page-embedded .agent-embedded-header-copy p {
-  margin: 0;
-  color: var(--theme-8a847c);
-  font-size: var(--font-size-meta);
-  line-height: var(--line-height-body);
-}
-
-.agents-page-embedded .agent-client-list {
-  min-height: 0;
-  overflow: hidden;
-  padding: 16px;
-}
-
-.agents-page-embedded .agent-list-items button > span {
-  gap: 5px;
-}
-
-.agents-page-embedded .agent-list-items strong {
-  line-height: 1.3;
-}
-
-.agents-page-embedded .agent-list-items small {
-  line-height: 1.4;
-}
-
-.agents-page-embedded .agent-list-items {
-  inset: 16px;
-  min-height: 0;
-  max-height: none;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding-right: 4px;
-  scrollbar-gutter: stable;
-}
-
-.agents-page-embedded .agent-list-items button {
-  grid-template-columns: 30px minmax(0, 1fr) 8px;
-  gap: 11px;
-  min-height: 66px;
-  padding: 10px 11px;
-}
-
-@media (max-width: 760px) {
-  .agents-page-embedded .agent-workbench {
-    grid-template-columns: 1fr;
-    gap: 14px;
-  }
-
-  .agents-page-embedded .agent-client-list {
-    max-height: 270px;
-  }
-
-  .agents-page-embedded .agent-list-items {
-    grid-template-columns: 1fr;
-    max-height: 236px;
-    overflow-y: auto;
-  }
-}
-
-.agents-page-embedded .agent-config-panel {
-  max-height: none;
-  overflow: visible;
-  padding: 14px;
-}
-
-.agents-page-embedded .agent-config-panel {
-  display: block;
-  overflow: visible;
-  padding: 0;
-  background: var(--theme-fffdf8);
-}
-
-.agents-page-embedded .agent-minimal-config {
-  display: grid;
-  min-width: 0;
-  gap: 18px;
-  padding: 20px;
-}
-
-.agents-page-embedded .agent-minimal-client-summary {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-  padding-bottom: 16px;
-  border-bottom: 1px solid var(--theme-e3e1db);
-}
-
-.agents-page-embedded .agent-minimal-client-icon {
-  display: grid;
-  width: 42px;
-  height: 42px;
-  place-items: center;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 10px;
-  background: var(--theme-faf9f5);
-  color: var(--theme-59544d);
-}
-
-.agents-page-embedded .agent-minimal-client-icon .provider-logo {
-  width: 24px;
-  height: 24px;
-}
-
-.agents-page-embedded .agent-minimal-client-summary > div {
-  display: grid;
-  min-width: 0;
-  gap: 3px;
-}
-
-.agents-page-embedded .agent-minimal-client-summary strong {
-  overflow: hidden;
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-body);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.agents-page-embedded .agent-minimal-client-summary span:not(.agent-minimal-client-icon):not(.agent-minimal-version) {
-  overflow: hidden;
-  color: var(--theme-8a847c);
-  font-size: var(--font-size-meta);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.agents-page-embedded .agent-minimal-version {
-  max-width: 120px;
-  overflow: hidden;
-  color: var(--theme-8a847c);
-  font-size: var(--font-size-meta);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.agents-page-embedded .agent-minimal-field {
-  display: grid;
-  gap: 8px;
-}
-
-.agents-page-embedded .agent-minimal-field > label {
-  color: var(--theme-59544d);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-semibold);
-}
-
-.agents-page-embedded .agent-minimal-field .agent-model-picker,
-.agents-page-embedded .agent-minimal-field .agent-model-trigger {
-  width: 100%;
-}
-
-.agents-page-embedded .agent-minimal-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-  padding-top: 2px;
-}
-
-.agents-page-embedded .agent-minimal-actions button {
-  min-height: 42px;
-  min-width: 0;
-}
-
-.agents-page-embedded .agent-minimal-message {
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-meta);
-  line-height: var(--line-height-body);
-  overflow-wrap: anywhere;
-}
-
-.agents-page-embedded .agent-core-config {
-  gap: 10px;
-}
-
-.agents-page-embedded .agent-status-grid {
-  min-height: 0;
-  gap: 6px;
-}
-
-.agents-page-embedded .agent-status-grid > div {
-  gap: 3px;
-  padding: 9px 10px;
-}
-
-.agents-page-embedded .agent-core-setting-section {
-  gap: 9px;
-  padding: 12px;
-}
-
-.agents-page-embedded .agent-section-heading {
-  gap: 8px;
-}
-
-.agents-page-embedded .agent-section-heading strong {
-  font-size: var(--font-size-label);
-}
-
-.agents-page-embedded .agent-model-trigger {
-  min-height: 40px;
-  padding: 6px 10px;
-}
-
-.agents-page-embedded .agent-modification-buttons button {
-  min-height: 34px;
-  padding: 6px 8px;
-}
-
-.agents-page-embedded .agent-config-footer {
-  min-height: 40px;
-  gap: 10px;
-  padding-top: 10px;
-}
-
-@media (max-width: 760px) {
-  .agents-page-embedded .agent-minimal-config {
-    padding: 16px;
-  }
-
-  .agents-page-embedded .agent-minimal-actions {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ==========================================================================
-   Easy Mode Full-Screen Spread-Out Layout & Spotlight Guided Tour
-   ========================================================================== */
-
-.app-shell.app-shell-easy-mode {
-  display: block;
-  width: 100%;
-  min-height: 100vh;
-  background: var(--theme-faf9f5);
-}
-
-.app-shell-easy-mode .workspace {
-  width: 100%;
-  min-width: 0;
-  min-height: 100vh;
-}
-
-.app-shell-easy-mode .content {
-  width: 100%;
-  max-width: 1360px;
-  margin: 0 auto;
-  padding: 24px 36px 48px;
-}
-
-.simple-mode-page.simple-mode-expanded {
-  max-width: 1360px;
-  width: 100%;
-  margin-inline: auto;
-  gap: 16px;
-}
-
-/* 顶部全宽导航条 */
-.simple-mode-topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 18px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 12px;
-  background: var(--theme-fffdf8);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
-}
-
-.simple-mode-topbar-left {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  flex-wrap: wrap;
-}
-
-.simple-mode-brand {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.simple-mode-brand .brand-logo {
-  width: 36px;
-  height: 36px;
-  border-radius: 10px;
-}
-
-.simple-mode-brand-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.simple-mode-brand-title {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.simple-mode-brand-title strong {
-  font-size: var(--font-size-body);
-  font-weight: var(--font-weight-semibold);
-  color: var(--theme-2d2a26);
-}
-
-.simple-mode-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: 999px;
-  background: var(--ui-accent-soft, #eef2ff);
-  color: var(--ui-accent, #3b82f6);
-  font-size: var(--font-size-caption);
-  font-weight: var(--font-weight-semibold);
-  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
-}
-
-.simple-mode-brand-sub {
-  font-size: var(--font-size-caption);
-  color: var(--theme-7a746c);
-}
-
-.simple-mode-topbar-right {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.simple-mode-guide-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  border-radius: 8px;
-  font-size: var(--font-size-meta);
-  font-weight: var(--font-weight-semibold);
-  cursor: pointer;
-  transition: all 160ms ease;
-  border: 1px solid var(--theme-d5d2cb);
-  background: var(--theme-faf9f5);
-  color: var(--theme-2d2a26);
-}
-
-.simple-mode-guide-toggle:hover {
-  border-color: var(--ui-accent);
-  background: var(--ui-accent-soft);
-  color: var(--ui-accent);
-}
-
-.simple-mode-guide-toggle.active {
-  background: var(--ui-accent, #3b82f6);
-  color: #ffffff;
-  border-color: var(--ui-accent, #3b82f6);
-  box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
-}
-
-.simple-guide-pulse-dot {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: #ffffff;
-  animation: pulseDot 1.4s infinite ease-in-out;
-}
-
-/* 主题选择器 */
-.simple-mode-theme-group {
-  display: flex;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 8px;
-  overflow: hidden;
-  background: var(--theme-faf9f5);
-}
-
-.simple-mode-theme-group button {
-  display: grid;
-  place-items: center;
-  width: 34px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  color: var(--theme-7a746c);
-  cursor: pointer;
-  transition: all 140ms ease;
-}
-
-.simple-mode-theme-group button:hover {
-  color: var(--theme-2d2a26);
-}
-
-.simple-mode-theme-group button.active {
-  background: var(--theme-fffdf8);
-  color: var(--ui-accent, #3b82f6);
-  font-weight: var(--font-weight-semibold);
-}
-
-/* 语言下拉框 */
-.simple-mode-lang-dropdown {
-  position: relative;
-}
-
-.simple-mode-lang-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 10px;
-  border-radius: 8px;
-  border: 1px solid var(--theme-d5d2cb);
-  background: var(--theme-faf9f5);
-  color: var(--theme-2d2a26);
-  font-size: var(--font-size-meta);
-  font-weight: var(--font-weight-semibold);
-  cursor: pointer;
-  transition: all 140ms ease;
-}
-
-.simple-mode-lang-btn:hover {
-  border-color: var(--theme-7a746c);
-}
-
-.simple-mode-lang-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  min-width: 140px;
-  border: 1px solid var(--theme-d5d2cb);
-  border-radius: 8px;
-  background: var(--theme-fffdf8);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
-  z-index: 100;
-  padding: 4px;
-  display: grid;
-  gap: 2px;
-}
-
-.simple-mode-lang-menu button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 6px 10px;
-  border: none;
-  border-radius: 6px;
-  background: transparent;
-  font-size: var(--font-size-meta);
-  color: var(--theme-2d2a26);
-  cursor: pointer;
-  transition: all 120ms ease;
-}
-
-.simple-mode-lang-menu button:hover {
-  background: var(--theme-faf9f5);
-}
-
-.simple-mode-lang-menu button.selected {
-  background: var(--ui-accent-soft);
-  color: var(--ui-accent);
-  font-weight: var(--font-weight-semibold);
-}
-
-.simple-mode-exit-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  height: 34px;
-  padding: 0 12px;
-  font-size: var(--font-size-meta);
-  font-weight: var(--font-weight-semibold);
-  border-radius: 8px;
-}
-
-.simple-mode-highlight-button {
-  border: 1px solid var(--ui-accent) !important;
-  background: var(--ui-accent) !important;
-  color: #ffffff !important;
-  box-shadow: 0 4px 12px var(--ui-accent-shadow);
-}
-
-.simple-mode-highlight-button:hover {
-  border-color: var(--ui-accent-strong) !important;
-  background: var(--ui-accent-strong) !important;
-  color: #ffffff !important;
-}
-
-.simple-mode-guide-toggle.simple-mode-highlight-button.active {
-  border-color: var(--ui-accent) !important;
-  background: var(--ui-accent) !important;
-  color: #ffffff !important;
-  box-shadow: 0 4px 12px var(--ui-accent-shadow);
-}
-
-
-
-/* 全灰色聚焦蒙层与高亮指示器 */
-.guide-spotlight-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 9000;
-  pointer-events: none;
-}
-
-.guide-spotlight-box {
-  position: fixed;
-  border-radius: 12px;
-  border: 2px solid var(--ui-accent, #3b82f6);
-  box-shadow: 0 0 0 9999px rgba(10, 14, 26, 0.72), 0 0 28px rgba(59, 130, 246, 0.55);
-  pointer-events: none;
-  transition: all 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  z-index: 9001;
-  animation: guideGlow 2.5s infinite alternate ease-in-out;
-}
-
-.guide-tooltip-card {
-  position: fixed;
-  width: 420px;
-  max-width: calc(100vw - 32px);
-  padding: 18px;
-  border-radius: 14px;
-  background: var(--theme-fffdf8, #ffffff);
-  border: 1px solid var(--theme-d5d2cb, #e2e8f0);
-  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
-  z-index: 9002;
-  pointer-events: auto;
-  max-height: calc(100vh - 32px);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  animation: popoverIn 220ms ease-out;
-}
-
-.guide-tooltip-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  margin-bottom: 12px;
-}
-
-.guide-tooltip-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 3px 10px;
-  border-radius: 999px;
-  background: var(--ui-accent, #3b82f6);
-  color: #ffffff;
-  font-size: var(--font-size-caption);
-  font-weight: var(--font-weight-semibold);
-}
-
-.guide-tooltip-close {
-  display: grid;
-  place-items: center;
-  width: 26px;
-  height: 26px;
-  border-radius: 6px;
-  border: none;
-  background: transparent;
-  color: var(--theme-7a746c);
-  cursor: pointer;
-  transition: all 120ms ease;
-}
-
-.guide-tooltip-close:hover {
-  background: var(--theme-faf9f5);
-  color: var(--theme-2d2a26);
-}
-
-.guide-tooltip-body h4 {
-  font-size: var(--font-size-body);
-  font-weight: var(--font-weight-semibold);
-  color: var(--theme-2d2a26);
-  margin: 0 0 8px 0;
-}
-
-.guide-tooltip-body p {
-  font-size: var(--font-size-meta);
-  line-height: 1.6;
-  color: var(--theme-5f5a53);
-  margin: 0 0 10px 0;
-}
-
-.guide-tooltip-tip {
-  font-size: var(--font-size-caption);
-  color: var(--ui-accent-strong, #2563eb);
-  background: var(--ui-accent-soft, #eff6ff);
-  padding: 8px 12px;
-  border-radius: 6px;
-  margin-top: 6px;
-  font-weight: var(--font-weight-medium);
-}
-
-.guide-tooltip-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-top: 14px;
-  padding-top: 12px;
-  border-top: 1px solid var(--theme-e3e1db);
-}
-
-.guide-tooltip-step-dots {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.guide-step-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: var(--theme-d5d2cb);
-  cursor: default;
-  transition: all 140ms ease;
-}
-
-.guide-step-dot.active {
-  width: 20px;
-  border-radius: 999px;
-  background: var(--ui-accent, #3b82f6);
-}
-
-.guide-tooltip-actions {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.guide-btn-sm {
-  min-height: 32px !important;
-  height: 32px !important;
-  padding: 0 14px !important;
-  font-size: var(--font-size-meta) !important;
-}
-
-@keyframes guideGlow {
-  0% {
-    box-shadow: 0 0 0 9999px rgba(10, 14, 26, 0.72), 0 0 18px rgba(59, 130, 246, 0.4);
-  }
-  100% {
-    box-shadow: 0 0 0 9999px rgba(10, 14, 26, 0.72), 0 0 32px rgba(59, 130, 246, 0.7);
-  }
-}
-
-@keyframes pulseDot {
-  0%, 100% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  50% {
-    transform: scale(1.4);
-    opacity: 0.6;
-  }
-}
-
-@keyframes popoverIn {
-  0% {
-    opacity: 0;
-    transform: translateY(6px) scale(0.98);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-/* 实时全灰聚焦遮罩与高亮目标系统 */
-.guide-dimmed-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(8, 12, 22, 0.72);
-  backdrop-filter: blur(1.5px);
-  z-index: 8990;
-  pointer-events: none;
-  transition: opacity 0.3s ease;
-}
-
-.guide-focus-highlight {
-  position: relative !important;
-  z-index: 8995 !important;
-  background: var(--theme-fffdf8, #ffffff) !important;
-  box-shadow: 0 0 0 4px var(--ui-accent, #3b82f6), 0 0 35px rgba(59, 130, 246, 0.65), 0 12px 36px rgba(0, 0, 0, 0.25) !important;
-  border-radius: 12px;
-  pointer-events: auto !important;
-  animation: targetPulse 2.5s infinite alternate ease-in-out;
-}
-
-.guide-interactive-card {
-  position: fixed;
-  width: 430px;
-  max-width: calc(100vw - 32px);
-  padding: 18px 20px;
-  border-radius: 14px;
-  background: var(--theme-fffdf8, #ffffff);
-  border: 1px solid var(--theme-d5d2cb, #e2e8f0);
-  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15);
-  z-index: 9005;
-  pointer-events: auto;
-  max-height: calc(100vh - 32px);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  animation: popoverIn 220ms ease-out;
-}
-
-@keyframes targetPulse {
-  0% {
-    box-shadow: 0 0 0 4px var(--ui-accent, #3b82f6), 0 0 20px rgba(59, 130, 246, 0.45);
-  }
-  100% {
-    box-shadow: 0 0 0 4px var(--ui-accent, #3b82f6), 0 0 38px rgba(59, 130, 246, 0.75);
-  }
-}
-
-/* 严格校验状态指示胶囊与控制 */
-.guide-status-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 3px 9px;
-  border-radius: 999px;
-  font-size: var(--font-size-caption);
-  font-weight: var(--font-weight-semibold);
-  white-space: nowrap;
-}
-
-.guide-status-pill.success {
-  background: var(--theme-eef7f0, #eef7f0);
-  color: var(--theme-2f6b3f, #16a34a);
-  border: 1px solid var(--theme-b6d3bd, #86efac);
-}
-
-.guide-status-pill.pending {
-  background: var(--theme-fff1ee, #fff1ee);
-  color: var(--theme-9f2d20, #e11d48);
-  border: 1px solid var(--theme-dfb7b0, #fca5a5);
-}
-
-.guide-tooltip-actions-left {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.guide-btn-sm.disabled {
-  opacity: 0.55;
-  cursor: not-allowed !important;
-  pointer-events: none;
-}
-
-@media (max-width: 760px) {
-  .simple-mode-topbar {
-    flex-wrap: wrap;
-  }
-
-  .simple-mode-topbar-left,
-  .simple-mode-topbar-right {
-    width: 100%;
-  }
-
-  .simple-mode-topbar-right {
-    justify-content: flex-end;
-    flex-wrap: wrap;
-  }
-}
-
-/* Use the available content width as the responsive breakpoint. The app shell
-   can leave a narrow workspace even when the overall window is still wide. */
-@container workspace (max-width: 1080px) {
-  .provider-workbench,
-  .real-provider-workbench,
-  .kernel-layout,
-  .config-management-content {
-    grid-template-columns: 1fr;
-  }
-
-  .provider-category-panel {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    height: auto;
-  }
-
-  .provider-resource-panel {
-    height: 520px;
-  }
-
-  .real-provider-row {
-    grid-template-columns: 32px minmax(0, 1fr) max-content;
-  }
-
-  .provider-row-meta {
-    display: none;
-  }
-
-}
-
-@container workspace (max-width: 760px) {
-  .usage-stat-grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .config-network-grid,
-  .config-tls-fields,
-  .config-management-form,
-  .client-api-grid,
-  .oauth-grid,
-  .quota-grid,
-  .quota-summary-grid,
-  .real-quota-grid,
-  .auth-filter-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .usage-topbar {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .usage-tabs {
-    display: flex;
-    width: 100%;
-    flex-wrap: wrap;
-  }
-
-  .usage-tabs button {
-    flex: 1 1 45%;
-    min-width: 0;
-    padding-inline: 7px;
-  }
-
-  .usage-topbar-actions {
-    width: 100%;
-  }
-
-  .usage-events-summary-left,
-  .usage-events-summary-right {
-    width: 100%;
-    justify-content: space-between;
-  }
-
-  .usage-collector-state {
-    flex: 1;
-  }
-
-  .usage-analysis-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .usage-pricing-toolbar {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .usage-pricing-actions {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-
-  .usage-pricing-actions input {
-    width: 100%;
-  }
-
-  .usage-price-editor {
-    grid-template-columns: 1fr;
-  }
-
-  .auth-files-toolbar {
-    grid-template-columns: 18px minmax(0, 1fr);
-  }
-
-  .auth-files-toolbar select {
-    border-top: 1px solid var(--theme-e3e1db);
-    border-left: 0;
-  }
-
-  .auth-files-toolbar select:first-of-type,
-  .auth-files-toolbar select:last-of-type {
-    grid-column: 1 / -1;
-  }
-
-  .auth-files-panel {
-    grid-template-rows: auto auto minmax(320px, 1fr);
-    height: auto;
-    min-height: 460px;
-  }
-
-  .real-provider-row {
-    grid-template-columns: 32px minmax(0, 1fr) auto;
-  }
-
-  .real-auth-file-row {
-    grid-template-columns: 34px minmax(0, 1fr);
-  }
-
-  .auth-file-actions {
-    grid-column: 2;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-
-  .auth-files-page .management-header {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .auth-files-page .management-heading-actions {
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-
-  .provider-row-meta,
-  .auth-file-meta {
-    display: none;
-  }
-
-  .provider-category-panel {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .agent-workbench,
-  .thinking-alias-workbench {
-    grid-template-columns: 1fr;
-  }
-
-  .thinking-alias-editor-panel,
-  .thinking-alias-list-panel {
-    height: auto;
-    min-height: 0;
-  }
-
-  .agent-client-list {
-    height: 270px;
-    min-height: 0;
-    max-height: 270px;
-  }
-
-  .agent-config-panel {
-    height: auto;
-    min-height: 0;
-    overflow: visible;
-  }
-
-  .thinking-model-list {
-    max-height: 240px;
-  }
-
-  .thinking-alias-list {
-    max-height: 460px;
-  }
-
-  .management-header,
-  .management-panel-heading {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .management-heading-actions {
-    width: 100%;
-    flex-wrap: wrap;
-  }
-
-  .management-heading-actions button {
-    flex: 1;
-  }
-
-  .muted-summary,
-  .compact-toolbar {
-    width: 100%;
-  }
-
-  .panel {
-    padding: 18px;
-  }
-}
-
-@container workspace (max-width: 480px) {
-  .usage-stat-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container workspace (max-width: 540px) {
-  .usage-data-management-heading,
-  .usage-data-management-action,
-  .usage-data-management-result {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .usage-data-management-action .primary-button {
-    width: 100%;
-  }
-
-  .usage-storage-limit-editor {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .usage-storage-limit-editor label {
-    width: 100%;
-  }
-
-  .usage-storage-limit-editor input {
-    flex: 1;
-    width: auto;
-    min-width: 0;
-  }
-
-  .usage-custom-range {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .usage-column-options {
-    grid-template-columns: 1fr;
-  }
-
-  .usage-column-dialog-footer {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .usage-column-dialog-actions button {
-    flex: 1;
-  }
-}
-
-/* Configuration form and explicit write actions. */
-.agent-auth-method { display: grid; gap: 6px; flex: 1; min-width: 0; font-size: var(--font-size-meta); }
-.agent-auth-method select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--theme-e3e1db); border-radius: 8px; color: var(--theme-2d2a26); background: var(--theme-fffdf8); }
-.agent-auth-segmented {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  align-items: center;
-  gap: 3px;
-  min-height: 38px;
-  height: 38px;
-  padding: 3px;
-  border: 1px solid var(--theme-e3e1db);
-  border-radius: 8px;
-  background: var(--theme-eeece6);
-  box-sizing: border-box;
-}
-.agent-auth-segmented-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  height: 100%;
-  min-width: 0;
-  padding: 0 10px;
-  border: 0;
-  border-radius: 5px;
-  background: transparent;
-  color: var(--theme-7a746c);
-  font-size: var(--font-size-meta);
-  font-weight: var(--font-weight-semibold);
-  font-family: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  cursor: pointer;
-  user-select: none;
-  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
-}
-.agent-auth-segmented-button:hover:not(:disabled) {
-  background: var(--theme-e8e5dc);
-  color: var(--theme-2d2a26);
-}
-.agent-auth-segmented-button.active {
-  background: var(--theme-fffdf8);
-  color: var(--theme-2d2a26);
-  font-weight: var(--font-weight-semibold);
-  box-shadow: 0 1px 3px rgba(45, 42, 38, 0.12);
-}
-.agent-auth-segmented-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
-}
-.agent-auth-segmented-button:focus-visible {
-  outline: 2px solid var(--theme-2d2a26);
-  outline-offset: -1px;
-}
-.agent-model-section .agent-codex-options { margin-top: 16px; align-items: end; }
-.agent-model-section .agent-codex-catalog-button { min-height: 38px; height: 38px; padding: 8px 10px; }
-.agent-write-state { margin: 0; font-size: var(--font-size-meta); color: var(--theme-7a746c); }
-
-.agent-signin-hint { grid-column: 1 / -1; margin: 0; color: var(--theme-7a746c); font-size: var(--font-size-meta); line-height: 1.6; }
-
-/* Agent settings: one form and one explicit save action. */
-.agent-settings-tools { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
-.agent-model-section { grid-column: 1 / -1; }
-.agent-save-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0 0; border-top: 1px solid var(--theme-e3e1db); }
-.agent-save-feedback { display: grid; gap: 6px; min-width: 0; }
-.agent-save-bar .agent-save-feedback { flex: 1; }
-.agent-save-feedback small { color: var(--theme-7a746c); font-size: var(--font-size-meta); line-height: var(--line-height-body); overflow-wrap: anywhere; }
-.agent-save-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; min-width: 0; }
-.agent-save-actions button { min-width: 128px; min-height: 40px; }
-.agent-shared-feedback { min-width: 0; }
-.agent-run-controls { display: grid; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--theme-e3e1db); }
-.agent-run-controls .agent-launch-actions { justify-content: flex-end; flex-wrap: wrap; }
-.agent-run-controls .agent-launch-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; }
-.agent-management-sections { display: grid; min-width: 0; }
-.agent-management-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; min-width: 0; border-bottom: 1px solid var(--theme-e3e1db); }
-.agent-management-row:first-child { padding-top: 6px; }
-.agent-management-row:last-child { border-bottom: 0; }
-.agent-management-row > div:first-child { min-width: 0; flex: 1; }
-.agent-management-row h3 { margin: 0 0 6px; color: var(--theme-2d2a26); font-size: var(--font-size-section); }
-.agent-management-row p { margin: 0; color: var(--theme-7a746c); font-size: var(--font-size-label); line-height: var(--line-height-body); overflow-wrap: anywhere; }
-.agent-management-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 50%; }
-.agent-management-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; }
-.agents-page-embedded .agent-config-panel { display: grid; gap: 16px; max-height: none; overflow: visible; padding: 20px; }
-.agents-page-embedded .agent-config-scroll-region { gap: 16px; }
-.agents-page-embedded .agent-minimal-config { padding: 0; }
-.agents-page-embedded .agent-minimal-actions { grid-template-columns: minmax(0, 1fr); }
-.agent-subpage-tabs button:focus-visible { outline: 2px solid var(--theme-2d2a26); outline-offset: -2px; }
-@container agent-panel (max-width: 640px) {
-  .agent-management-row { flex-direction: column; align-items: stretch; gap: 12px; }
-  .agent-management-actions { max-width: 100%; justify-content: flex-start; }
-  .agent-run-controls .agent-launch-actions { display: flex; }
-  .agent-run-controls .agent-launch-button { flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; }
-}
-.agent-signin-label { display: flex; align-items: center; gap: 8px; }
-.agent-signin-label-title { font-weight: var(--font-weight-semibold); color: var(--theme-2d2a26); }
-.agent-signin-help-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--theme-7a746c); font: inherit; cursor: pointer; }
-.agent-signin-help-toggle:hover { color: var(--theme-2d2a26); background: var(--theme-fffdf8); }
-.agent-signin-help-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
-.agent-signin-explanation { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid var(--theme-e3e1db); font-size: var(--font-size-meta); color: var(--theme-7a746c); overflow-wrap: anywhere; }
-.agent-signin-explanation[hidden] { display: none; }
-.agent-signin-explanation dl { display: grid; gap: 10px; margin: 0; }
-.agent-signin-explanation dl > div { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 12px; }
-.agent-signin-explanation dt { color: var(--theme-2d2a26); font-weight: var(--font-weight-semibold); }
-.agent-signin-explanation dd { margin: 0; }
-.agent-signin-explanation p { margin: 12px 0 0; }
-@media (max-width: 540px) { .agent-signin-explanation dl > div { grid-template-columns: 1fr; gap: 3px; } }
-@media (max-width: 760px) {
- .agent-save-bar { flex-wrap: wrap; gap: 12px; }
- .agent-save-actions { margin-left: auto; }
-}
-
-.thinking-alias-page > .management-header {
-  align-items: center;
-  flex-direction: row;
-}
-
-.thinking-alias-page > .management-header .management-heading-actions {
-  width: auto;
-  flex-wrap: nowrap;
-}
-
-.thinking-alias-page > .management-header .muted-summary {
-  width: auto;
-}
-
-.thinking-alias-page > .management-header .management-heading-actions button {
-  width: 42px;
-  flex: 0 0 42px;
-  padding: 0;
-}
-
-.harness-catalog-dialog .codex-catalog-sidebar { grid-template-rows: auto auto minmax(0,1fr) auto; }
-.harness-editor-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
-.harness-provider-button { flex-shrink: 0; justify-content: flex-start; }
-.harness-provider-button.active { border-color: var(--theme-bd5e31); }
-.harness-catalog-form > label > span { display: flex; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
-.harness-catalog-form small, .harness-reasoning small { color: var(--theme-716b61); font-size: var(--font-size-caption); line-height: 1.6; }
-.harness-override { font-weight: var(--font-weight-regular); }
-.harness-catalog-group { grid-column: 1 / -1; border-top: 1px solid var(--theme-d5d2cb); padding-top: 14px; min-width: 0; }
-.harness-catalog-group > summary { cursor: pointer; font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); padding: 4px 0; }
-.harness-catalog-group > button { margin-top: 12px; }
-.harness-reasoning { grid-column: 1 / -1; display: grid; gap: 10px; font-size: var(--font-size-label); }
-.harness-reasoning > label { display: grid; gap: 7px; color: var(--theme-5f5a53); font-size: inherit; font-weight: var(--font-weight-semibold); }
-.harness-reasoning-levels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; }
-.harness-reasoning-levels > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.harness-reasoning-levels label { display: flex; align-items: center; gap: 6px; flex: 0 0 75px; color: var(--theme-5f5a53); font-size: inherit; font-weight: var(--font-weight-medium); }
-.harness-reasoning-levels input:not([type=checkbox]) { min-width: 0; width: 100%; }
-.harness-catalog-form textarea { font-family: var(--font-mono, monospace); }
-@media (max-width: 640px) { .harness-reasoning-levels { grid-template-columns: 1fr; } }
-
-@media (max-width: 760px) {
-  .harness-catalog-dialog .codex-catalog-body { grid-template-rows: 210px minmax(0,1fr); }
-  .harness-catalog-dialog .codex-catalog-sidebar { grid-template-rows: auto auto minmax(0,1fr); }
-  .harness-catalog-dialog .harness-provider-button { grid-column: 1 / -1; }
-  .harness-catalog-dialog .codex-catalog-search { grid-column: 1; grid-row: 2; }
-  .harness-catalog-dialog .codex-catalog-reload { grid-column: 2; grid-row: 2; }
-  .harness-catalog-dialog .codex-catalog-models { grid-row: 3; }
-}
-
-.harness-catalog-dialog .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
-.harness-catalog-form small { font-weight: var(--font-weight-regular); }
-.harness-catalog-form { margin-top: 12px; }
-
-.harness-context-window { display: grid; align-content: start; gap: 8px; min-width: 0; }
-.harness-context-window > label { display: grid; gap: 8px; font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); }
-.harness-context-window > label > span { display: flex; flex-wrap: wrap; gap: 6px; }
-.harness-context-source { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
-.harness-context-source > button { padding: 4px 8px; font-size: var(--font-size-caption); }
-
-/* Operation feedback is shared across pages and dialogs, outside their layout. */
-.app-notice-stack {
-  position: fixed;
-  right: 24px;
-  bottom: var(--notice-bottom, 24px);
-  z-index: 10000;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: min(480px, calc(100vw - 48px));
-  max-height: calc(100vh - var(--notice-bottom, 24px) - 24px);
-  max-height: calc(100dvh - var(--notice-bottom, 24px) - 24px);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  pointer-events: none;
-}
-.app-notice-entry {
-  flex: none;
-  min-width: 0;
-  pointer-events: auto;
-}
-.app-notice-entry .action-feedback.inline-notice {
-  margin: 0;
-  box-shadow: 0 4px 16px rgba(45, 42, 38, 0.18);
-}
-
-.agent-model-status {
-  display: block;
-  height: 20px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.agent-codex-save-actions {
-  flex-wrap: nowrap;
-}
-
-.agent-codex-save-actions .primary-button {
-  width: auto;
-  min-width: 128px;
-  flex: none;
-}
-
-.agent-codex-save-actions button {
-  width: auto;
-  min-width: 0;
-  padding-inline: 12px;
-}
-
-@container agent-panel (max-width: 420px) {
-  .agent-subpage-tabs {
-    grid-auto-flow: row;
-    grid-auto-columns: unset;
-    grid-template-columns: minmax(0, 1fr);
-    width: 100%;
-    overflow-x: visible;
-  }
-
-  .agent-subpage-tabs button {
-    width: 100%;
-    min-width: 0;
-  }
-
-  .agent-auth-segmented {
-    grid-template-columns: minmax(0, 1fr);
-    height: auto;
-  }
-
-  .agent-auth-segmented-button {
-    height: 32px;
-  }
-}
-
-/* Keep the full agent page inset from the window like Usage Records. */
-.app-shell:has(.agents-page:not(.agents-page-embedded)) {
-  height: 100%;
-  min-height: 100%;
-}
-
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .workspace,
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .content {
-  display: flex;
-  min-height: 0;
-  flex: 1 1 auto;
-  flex-direction: column;
-}
-
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .content {
-  overflow: hidden;
-}
-
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .agents-page:not(.agents-page-embedded) {
-  min-height: 0;
-  flex: 1 1 auto;
-  grid-template-rows: minmax(54px, auto) minmax(0, 1fr);
-  overflow: hidden;
-}
-
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-workbench {
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-client-list,
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-panel {
-  height: 100%;
-  min-height: 0;
-}
-
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-panel {
-  display: flex;
-  align-content: normal;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-subpage-tabs {
-  flex: none;
-}
-
-.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-scroll-region {
-  min-height: 0;
-  flex: 1 1 auto;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  padding-right: 4px;
-  scrollbar-gutter: stable;
-}
-
-@media (min-width: 761px) {
-  /* The bounded page already has one right-panel scroller. Let long Codex session
-     results participate in it instead of trapping the wheel in a second scroller. */
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) .codex-session-list {
-    max-height: none;
-    overflow: visible;
-    overscroll-behavior: auto;
-    scrollbar-gutter: auto;
-  }
-}
-
-@container workspace (max-width: 760px) {
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-workbench {
-    grid-template-columns: 1fr;
-    grid-template-rows: 270px minmax(0, 1fr);
-  }
-
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-client-list {
-    height: auto;
-    max-height: none;
-  }
-}
-
-@media (max-width: 760px) {
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) {
-    height: auto;
-    min-height: 100%;
-  }
-
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) .content {
-    overflow: visible;
-  }
-
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agents-page:not(.agents-page-embedded) {
-    flex: none;
-    grid-template-rows: auto auto;
-    overflow: visible;
-  }
-
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-workbench {
-    height: auto;
-    grid-template-rows: 270px auto;
-    overflow: visible;
-  }
-
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-client-list {
-    height: 270px;
-    max-height: 270px;
-  }
-
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-panel {
-    height: auto;
-    overflow: visible;
-  }
-
-  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-scroll-region {
-    flex: none;
-    overflow: visible;
-    padding-right: 0;
-    scrollbar-gutter: auto;
-  }
-}
diff --git a/src/styles/feature-pages.css b/src/styles/feature-pages.css
new file mode 100644
index 0000000..aee1d1d
--- /dev/null
+++ b/src/styles/feature-pages.css
@@ -0,0 +1,3539 @@
+.easy-mode-page {
+  display: grid;
+  gap: 20px;
+  max-width: 980px;
+  margin-inline: auto;
+}
+
+.easy-mode-hero {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.easy-mode-hero-copy {
+  min-width: 0;
+}
+
+.easy-mode-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ui-accent-strong);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+}
+
+.easy-mode-hero h1 {
+  margin: 8px 0 7px;
+  color: var(--theme-2d2a26);
+  font-size: clamp(26px, 3vw, 36px);
+  line-height: 1.12;
+}
+
+.easy-mode-hero p {
+  max-width: 660px;
+  margin: 0;
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-body);
+}
+
+.easy-mode-reset {
+  flex: none;
+  min-height: 38px;
+}
+
+.easy-mode-core-alert {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 13px;
+  padding: 14px 16px;
+  border: 1px solid var(--theme-dfbf91);
+  border-radius: 11px;
+  background: var(--theme-fff7e9);
+  color: var(--theme-5f5a53);
+}
+
+.easy-mode-alert-icon {
+  display: grid;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border-radius: 10px;
+  background: var(--theme-e4d0af);
+  color: var(--theme-805a24);
+}
+
+.easy-mode-core-alert strong {
+  display: block;
+  color: var(--theme-2d2a26);
+}
+
+.easy-mode-core-alert p {
+  margin: 3px 0 0;
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+}
+
+.easy-mode-core-alert .secondary-button {
+  min-height: 36px;
+  white-space: nowrap;
+}
+
+.easy-mode-stepper {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.easy-mode-stepper-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  min-height: 64px;
+  padding: 10px 12px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 10px;
+  background: var(--theme-fffdf8);
+  color: var(--theme-5f5a53);
+  text-align: left;
+}
+
+.easy-mode-stepper-item:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--theme-e3e1db));
+  background: var(--theme-f8f5ee);
+}
+
+.easy-mode-stepper-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.easy-mode-stepper-item.active {
+  border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--theme-e3e1db));
+  background: var(--ui-accent-soft);
+  color: var(--ui-accent-strong);
+  box-shadow: 0 5px 14px var(--ui-accent-shadow);
+}
+
+.easy-mode-stepper-number {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 999px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-716b61);
+  font-weight: var(--font-weight-semibold);
+}
+
+.easy-mode-stepper-item.active .easy-mode-stepper-number,
+.easy-mode-stepper-item.complete .easy-mode-stepper-number {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent);
+  color: #ffffff;
+}
+
+.easy-mode-stepper-item small,
+.easy-mode-stepper-item strong {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.easy-mode-stepper-item small {
+  margin-bottom: 2px;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+}
+
+.easy-mode-stepper-item strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-body);
+}
+
+.easy-mode-panel {
+  display: grid;
+  gap: 20px;
+  padding: clamp(20px, 3vw, 30px);
+}
+
+.easy-mode-panel-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.easy-mode-panel-heading > div:first-child {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.easy-mode-step-badge {
+  display: grid;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border-radius: 9px;
+  background: var(--ui-accent);
+  color: #ffffff;
+  font-weight: var(--font-weight-semibold);
+}
+
+.easy-mode-panel-heading h2 {
+  margin: 0;
+}
+
+.easy-mode-panel-heading p {
+  margin: 5px 0 0;
+  color: var(--theme-5f5a53);
+  line-height: var(--line-height-body);
+}
+
+.easy-mode-choice-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.easy-mode-choice-card {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 13px;
+  min-width: 0;
+  min-height: 118px;
+  padding: 18px;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 11px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-2d2a26);
+  text-align: left;
+  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
+}
+
+.easy-mode-choice-card:hover {
+  border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--theme-d5d2cb));
+  background: var(--theme-fffdf8);
+  transform: translateY(-1px);
+}
+
+.easy-mode-choice-card.selected {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent-soft);
+  box-shadow: 0 7px 18px var(--ui-accent-shadow);
+}
+
+.easy-mode-choice-icon {
+  display: grid;
+  flex: none;
+  width: 43px;
+  height: 43px;
+  place-items: center;
+  border-radius: 11px;
+}
+
+.easy-mode-choice-icon.oauth {
+  background: var(--theme-dce2fb);
+  color: var(--theme-344ca1);
+}
+
+.easy-mode-choice-icon.api {
+  background: var(--theme-dce8df);
+  color: var(--theme-2f6b3a);
+}
+
+.easy-mode-choice-copy {
+  display: grid;
+  gap: 5px;
+  min-width: 0;
+}
+
+.easy-mode-choice-copy strong {
+  font-size: var(--font-size-section);
+}
+
+.easy-mode-choice-copy span {
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+}
+
+.easy-mode-choice-card > svg {
+  color: var(--theme-7a746c);
+}
+
+.easy-mode-hint,
+.easy-mode-inline-warning,
+.easy-mode-footer {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+}
+
+.easy-mode-hint {
+  padding: 11px 13px;
+  border-radius: 8px;
+  background: var(--theme-f1f8f1);
+  color: var(--theme-2f6b3a);
+}
+
+.easy-mode-hint svg,
+.easy-mode-footer svg {
+  flex: none;
+  margin-top: 1px;
+}
+
+.easy-mode-selected-path {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 9px;
+  background: var(--theme-faf9f5);
+}
+
+.easy-mode-selected-path > div {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.easy-mode-selected-path small {
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+}
+
+.easy-mode-selected-path strong {
+  color: var(--theme-2d2a26);
+}
+
+.text-button {
+  margin-left: auto;
+  padding: 4px 0;
+  border: 0;
+  background: transparent;
+  color: var(--ui-accent-strong);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+}
+
+.text-button:hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.easy-mode-checklist {
+  display: grid;
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.easy-mode-checklist li {
+  display: grid;
+  grid-template-columns: 27px minmax(0, 1fr);
+  align-items: start;
+  gap: 10px;
+}
+
+.easy-mode-checklist li > span {
+  display: grid;
+  width: 27px;
+  height: 27px;
+  place-items: center;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 999px;
+  background: var(--theme-faf9f5);
+  color: var(--ui-accent-strong);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+}
+
+.easy-mode-checklist p {
+  margin: 3px 0 0;
+  color: var(--theme-2d2a26);
+  line-height: var(--line-height-body);
+}
+
+.easy-mode-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 2px;
+}
+
+.easy-mode-actions button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  min-height: 42px;
+}
+
+.easy-mode-inline-warning {
+  margin: -8px 0 0;
+  color: var(--theme-9f2d20);
+}
+
+.easy-mode-agent-layout {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 14px;
+  padding: 18px;
+  border: 1px solid var(--theme-c9d8ca);
+  border-radius: 10px;
+  background: var(--theme-f1f8f1);
+}
+
+.easy-mode-agent-icon {
+  display: grid;
+  width: 54px;
+  height: 54px;
+  place-items: center;
+  border-radius: 14px;
+  background: var(--theme-2f6b3a);
+  color: #ffffff;
+}
+
+.easy-mode-agent-layout strong {
+  color: var(--theme-2d2a26);
+}
+
+.easy-mode-agent-layout p {
+  margin: 4px 0 0;
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+}
+
+.easy-mode-footer {
+  justify-content: center;
+  padding: 2px 0 8px;
+  color: var(--theme-7a746c);
+}
+
+@media (max-width: 680px) {
+  .simple-mode-step-status-track {
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+
+  .simple-mode-step-status-connector {
+    width: 1px;
+    height: 10px;
+    margin-left: 12px;
+  }
+
+  .simple-mode-step-status-copy small {
+    white-space: normal;
+  }
+
+  .easy-mode-hero {
+    flex-direction: column;
+    gap: 14px;
+  }
+
+  .easy-mode-reset {
+    width: 100%;
+  }
+
+  .easy-mode-core-alert {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .easy-mode-core-alert .secondary-button {
+    grid-column: 1 / -1;
+    width: 100%;
+  }
+
+  .easy-mode-stepper,
+  .easy-mode-choice-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .easy-mode-stepper-item {
+    min-height: 56px;
+  }
+
+  .easy-mode-panel-heading {
+    flex-direction: column;
+  }
+
+  .easy-mode-selected-path {
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .easy-mode-selected-path .text-button {
+    width: 100%;
+    margin-left: 0;
+    text-align: left;
+  }
+
+  .easy-mode-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .easy-mode-actions button {
+    width: 100%;
+  }
+}
+
+.simple-mode-page {
+  display: grid;
+  gap: 18px;
+  max-width: 920px;
+  margin-inline: auto;
+}
+
+.simple-mode-step-status {
+  display: grid;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 10px;
+  background: var(--theme-fffdf8);
+}
+
+.simple-mode-step-status-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-meta);
+}
+
+.simple-mode-step-status-heading strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-step-status-track {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+}
+
+.simple-mode-step-status-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  padding: 9px 10px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--theme-7a746c);
+}
+
+.simple-mode-step-status-item.active {
+  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--theme-e3e1db));
+  background: var(--ui-accent-soft);
+}
+
+.simple-mode-step-status-item.complete {
+  color: var(--theme-5f5a53);
+}
+
+.simple-mode-step-status-number {
+  display: grid;
+  width: 25px;
+  height: 25px;
+  place-items: center;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 999px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-meta);
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-step-status-item.active .simple-mode-step-status-number {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent);
+  color: #ffffff;
+}
+
+.simple-mode-step-status-item.complete .simple-mode-step-status-number {
+  border-color: var(--theme-b6d3bd);
+  background: var(--theme-f1f8f1);
+  color: var(--theme-2f6b3a);
+}
+
+.simple-mode-step-status-copy {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.simple-mode-step-status-copy strong,
+.simple-mode-step-status-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-step-status-copy strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-step-status-copy small {
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+}
+
+.simple-mode-step-status-connector {
+  height: 1px;
+  background: var(--theme-d5d2cb);
+}
+
+.simple-mode-step-status-connector.complete {
+  background: var(--theme-b6d3bd);
+}
+
+.simple-mode-core-alert {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 14px 16px;
+  border: 1px solid var(--theme-dfbf91);
+  border-radius: 10px;
+  background: var(--theme-fff7e9);
+  color: var(--theme-5f5a53);
+}
+
+.simple-mode-core-alert > div {
+  min-width: 0;
+}
+
+.simple-mode-core-alert strong {
+  display: block;
+  color: var(--theme-2d2a26);
+}
+
+.simple-mode-core-alert p {
+  margin: 3px 0 0;
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-core-alert .secondary-button {
+  flex: none;
+  min-height: 36px;
+  white-space: nowrap;
+}
+
+.simple-mode-progress {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.simple-mode-progress-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  min-height: 60px;
+  padding: 9px 11px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 9px;
+  background: var(--theme-fffdf8);
+  color: var(--theme-5f5a53);
+  text-align: left;
+}
+
+.simple-mode-progress-item:hover:not(:disabled) {
+  border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--theme-e3e1db));
+  background: var(--theme-f8f5ee);
+}
+
+.simple-mode-progress-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.simple-mode-progress-item.active {
+  border-color: color-mix(in srgb, var(--ui-accent) 40%, var(--theme-e3e1db));
+  background: var(--ui-accent-soft);
+  box-shadow: 0 4px 12px var(--ui-accent-shadow);
+}
+
+.simple-mode-progress-item strong {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-progress-item strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-body);
+}
+
+.simple-mode-task {
+  display: grid;
+  gap: 18px;
+  padding: clamp(20px, 3vw, 28px);
+}
+
+.simple-mode-task-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+}
+
+.simple-mode-task-heading h2 {
+  margin: 0;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-panel-title);
+}
+
+.simple-mode-task-heading p {
+  margin: 4px 0 0;
+  color: var(--theme-5f5a53);
+  line-height: var(--line-height-body);
+  white-space: pre-line;
+}
+
+.simple-mode-instruction {
+  margin: -3px 0 0;
+  color: var(--theme-2d2a26);
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-guide-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.simple-mode-guide-card {
+  display: grid;
+  align-content: start;
+  gap: 7px;
+  min-width: 0;
+  min-height: 170px;
+  padding: 15px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 10px;
+  background: var(--theme-faf9f5);
+}
+
+.simple-mode-guide-label {
+  color: var(--ui-accent-strong);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-guide-card > strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-section);
+}
+
+.simple-mode-guide-card > p {
+  flex: 1;
+  margin: 0;
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-choice-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.simple-mode-choice {
+  display: grid;
+  align-content: start;
+  gap: 7px;
+  min-width: 0;
+  min-height: 104px;
+  padding: 16px;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 10px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-2d2a26);
+  text-align: left;
+  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
+}
+
+.simple-mode-choice:hover {
+  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--theme-d5d2cb));
+  background: var(--theme-fffdf8);
+}
+
+.simple-mode-choice.selected {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent-soft);
+  box-shadow: 0 5px 14px var(--ui-accent-shadow);
+}
+
+.simple-mode-choice strong {
+  font-size: var(--font-size-section);
+}
+
+.simple-mode-choice span {
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-choice small {
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-task-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding-top: 2px;
+  border-top: 1px solid var(--theme-e3e1db);
+}
+
+.simple-mode-selection {
+  min-width: 0;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-selection.muted {
+  color: var(--theme-7a746c);
+}
+
+.simple-mode-task-footer > .primary-button,
+.simple-mode-task-footer > .secondary-button {
+  flex: none;
+  min-height: 40px;
+}
+
+.simple-mode-path-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 8px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-path-row strong {
+  color: var(--theme-2d2a26);
+}
+
+.simple-mode-path-row .text-button {
+  margin-left: auto;
+}
+
+.simple-mode-action-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px;
+  border: 1px solid var(--theme-c9d6e2);
+  border-radius: 10px;
+  background: var(--theme-f1f6fa);
+}
+
+.simple-mode-action-card > div {
+  min-width: 0;
+}
+
+.simple-mode-action-card strong {
+  color: var(--theme-2d2a26);
+}
+
+.simple-mode-action-card p {
+  margin: 4px 0 0;
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-action-card .primary-button {
+  flex: none;
+  min-height: 40px;
+}
+
+.simple-mode-agent-card {
+  border-color: var(--theme-c9d8ca);
+  background: var(--theme-f1f8f1);
+}
+
+.simple-mode-checklist {
+  display: grid;
+  gap: 11px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.simple-mode-checklist li {
+  display: grid;
+  grid-template-columns: 25px minmax(0, 1fr);
+  align-items: start;
+  gap: 10px;
+}
+
+.simple-mode-checklist li > span {
+  display: grid;
+  width: 25px;
+  height: 25px;
+  place-items: center;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 999px;
+  background: var(--theme-faf9f5);
+  color: var(--ui-accent-strong);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-checklist p {
+  margin: 3px 0 0;
+  color: var(--theme-2d2a26);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-guide-list li > div {
+  display: grid;
+  gap: 3px;
+  min-width: 0;
+}
+
+.simple-mode-guide-list strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-body);
+}
+
+.simple-mode-guide-list p {
+  margin: 0;
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-warning {
+  margin: -6px 0 0;
+  color: var(--theme-9f2d20);
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.simple-mode-embedded-task {
+  display: grid;
+  gap: 16px;
+  padding: clamp(18px, 2.5vw, 24px);
+}
+
+.simple-mode-embedded-heading {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.simple-mode-embedded-heading > div:first-child {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  min-width: 0;
+}
+
+.simple-mode-embedded-heading h2 {
+  margin: 0;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-panel-title);
+}
+
+.simple-mode-embedded-heading p {
+  margin: 4px 0 0;
+  color: var(--theme-5f5a53);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-embedded-content {
+  min-width: 0;
+  padding: 18px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 10px;
+  background: var(--theme-faf9f5);
+  container-type: inline-size;
+  container-name: workspace;
+}
+
+.simple-mode-provider-hint {
+  padding: 11px 13px;
+  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, var(--theme-e3e1db));
+  border-radius: 8px;
+  background: var(--ui-accent-soft);
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+  white-space: pre-line;
+}
+
+.simple-mode-embedded-content > .page {
+  max-width: none;
+}
+
+.simple-mode-flow-navigation {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  padding-bottom: 14px;
+  border-bottom: 1px solid var(--theme-e3e1db);
+}
+
+.simple-mode-flow-navigation > button {
+  min-width: 96px;
+  min-height: 40px;
+  white-space: nowrap;
+}
+
+.simple-mode-flow-navigation > .primary-button {
+  margin-left: auto;
+}
+
+.simple-mode-progress {
+  position: relative;
+  gap: 12px;
+}
+
+.simple-mode-progress-item {
+  position: relative;
+  min-height: 76px;
+  padding: 13px 16px;
+  border-radius: 13px;
+  background: color-mix(in srgb, var(--theme-fffdf8) 90%, var(--theme-faf9f5));
+  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.simple-mode-progress-item:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.simple-mode-progress-item-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.simple-mode-step-badge {
+  display: grid;
+  width: 29px;
+  height: 29px;
+  place-items: center;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 999px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
+}
+
+.simple-mode-progress-item.active .simple-mode-step-badge {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent);
+  color: #ffffff;
+}
+
+.simple-mode-progress-copy {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.simple-mode-progress-copy strong {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-body);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-progress-copy small {
+  overflow: hidden;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-task {
+  gap: 22px;
+  padding: clamp(22px, 3vw, 32px);
+  border-radius: 16px;
+  box-shadow: 0 14px 34px color-mix(in srgb, var(--ui-accent-shadow) 58%, transparent);
+}
+
+.simple-mode-task-heading {
+  align-items: center;
+  gap: 12px;
+}
+
+.simple-mode-heading-icon {
+  display: grid;
+  flex: none;
+  width: 38px;
+  height: 38px;
+  place-items: center;
+  border: 1px solid color-mix(in srgb, var(--ui-accent) 27%, var(--theme-e3e1db));
+  border-radius: 11px;
+  background: var(--ui-accent-soft);
+  color: var(--ui-accent-strong);
+}
+
+.simple-mode-task-heading > div {
+  min-width: 0;
+}
+
+.simple-mode-task-heading h2 {
+  font-size: clamp(20px, 2.2vw, 24px);
+  line-height: 1.2;
+}
+
+.simple-mode-task-heading p {
+  max-width: 700px;
+  margin-top: 6px;
+  font-size: var(--font-size-body);
+}
+
+.simple-mode-choice-grid {
+  gap: 14px;
+}
+
+.simple-mode-choice {
+  gap: 10px;
+  min-height: 132px;
+  padding: 18px;
+  border-radius: 13px;
+  background: var(--theme-fffdf8);
+  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.simple-mode-choice:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 20px rgba(45, 42, 38, 0.08);
+}
+
+.simple-mode-choice-heading {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.simple-mode-choice-icon {
+  display: grid;
+  flex: none;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 9px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-7a746c);
+}
+
+.simple-mode-choice.selected .simple-mode-choice-icon {
+  border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--theme-e3e1db));
+  background: var(--theme-fffdf8);
+  color: var(--ui-accent-strong);
+}
+
+.simple-mode-choice-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.simple-mode-choice-title strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-choice-title .state-pill {
+  flex: none;
+}
+
+.simple-mode-choice > span:not(.simple-mode-choice-icon) {
+  padding-left: 42px;
+}
+
+.simple-mode-choice > small {
+  padding-left: 42px;
+}
+
+.simple-mode-embedded-box {
+  display: grid;
+  gap: 14px;
+  padding: 14px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 13px;
+  background: color-mix(in srgb, var(--theme-faf9f5) 82%, var(--theme-fffdf8));
+}
+
+.simple-mode-provider-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
+  gap: 12px;
+}
+
+.simple-mode-provider-card {
+  grid-template-rows: minmax(0, 1fr) auto;
+  gap: 16px;
+  min-height: 158px;
+  height: auto;
+  padding: 16px;
+  border-radius: 12px;
+  background: var(--theme-fffdf8);
+  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.simple-mode-provider-card:hover {
+  transform: translateY(-1px);
+  border-color: color-mix(in srgb, var(--ui-accent) 30%, var(--theme-e3e1db));
+  box-shadow: 0 8px 20px rgba(45, 42, 38, 0.07);
+}
+
+.simple-mode-provider-card.connected {
+  border-color: var(--theme-b6d3bd);
+  background: var(--ui-accent-soft);
+}
+
+.simple-mode-provider-card-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  min-width: 0;
+}
+
+.simple-mode-provider-logo {
+  width: 36px;
+  height: 36px;
+  flex: none;
+  border-radius: 10px;
+}
+
+.simple-mode-provider-logo img {
+  width: 22px;
+  height: 22px;
+}
+
+.simple-mode-provider-copy {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.simple-mode-provider-copy strong {
+  overflow: hidden;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-body);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-provider-copy span {
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-meta);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-provider-card-foot {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  min-width: 0;
+}
+
+.simple-mode-provider-card-foot .primary-button,
+.simple-mode-provider-card-foot .secondary-button {
+  min-height: 34px;
+  padding-inline: 13px;
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-api-form {
+  display: grid;
+  gap: 18px;
+  padding: 20px;
+  border: 1px solid var(--theme-d8d4cc);
+  border-radius: 12px;
+  background: var(--theme-fffdf8);
+}
+
+.simple-mode-api-model-card {
+  display: grid;
+  gap: 11px;
+  padding-top: 2px;
+}
+
+.simple-mode-api-model-fetch {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.simple-mode-api-fetch-button {
+  min-height: 36px;
+  padding-inline: 14px;
+  white-space: nowrap;
+}
+
+.simple-mode-api-model-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  min-width: 0;
+}
+
+.simple-mode-api-model-heading strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-api-model-heading .secondary-button {
+  min-height: 36px;
+  flex: none;
+  padding-inline: 11px;
+  white-space: nowrap;
+}
+
+.simple-mode-api-model-selection {
+  display: grid;
+  gap: 8px;
+}
+
+.simple-mode-api-model-selection-heading {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.simple-mode-api-model-selection-heading strong {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-api-model-selection-heading span {
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+}
+
+.simple-mode-api-model-options {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2px 18px;
+  max-height: 220px;
+  overflow-y: auto;
+  padding: 6px 0;
+  border-top: 1px solid var(--theme-e3e1db);
+  border-bottom: 1px solid var(--theme-e3e1db);
+}
+
+.simple-mode-api-model-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: 33px;
+  padding: 5px 7px;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+  cursor: pointer;
+}
+
+.simple-mode-api-model-option:hover,
+.simple-mode-api-model-option.selected {
+  background: var(--theme-faf9f5);
+}
+
+.simple-mode-api-model-option input {
+  flex: none;
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  accent-color: var(--ui-accent);
+}
+
+.simple-mode-api-model-option > span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-api-platforms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 4px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 10px;
+  background: var(--theme-faf9f5);
+}
+
+.simple-mode-api-platform {
+  flex: 1 1 132px;
+  min-width: 0;
+  min-height: 38px;
+  gap: 7px;
+  padding-inline: 12px;
+  border-color: transparent;
+  background: transparent;
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-api-platform:hover:not(:disabled) {
+  border-color: transparent;
+  background: var(--theme-e8e5dc);
+}
+
+.simple-mode-api-platform.active {
+  border-color: var(--ui-accent);
+  background: var(--theme-fffdf8);
+  color: var(--theme-2d2a26);
+  box-shadow: 0 2px 6px rgba(45, 42, 38, 0.08);
+}
+
+.simple-mode-api-platform-icon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.simple-mode-api-fields {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
+  gap: 14px;
+}
+
+.simple-mode-field {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.simple-mode-field label {
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: 0.01em;
+}
+
+.simple-mode-field .text-input,
+.simple-mode-field .select-input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 44px;
+  padding: 0 13px;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 9px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-body);
+  box-shadow: inset 0 1px 2px rgba(45, 42, 38, 0.04);
+  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
+}
+
+.simple-mode-field .text-input:hover:not(:disabled),
+.simple-mode-field .select-input:hover:not(:disabled) {
+  border-color: var(--theme-9b958c);
+  background: var(--theme-fffdf8);
+}
+
+.simple-mode-field .text-input:focus,
+.simple-mode-field .select-input:focus {
+  outline: none;
+  border-color: var(--ui-accent);
+  background: var(--theme-fffdf8);
+  box-shadow: 0 0 0 3px var(--ui-accent-shadow);
+}
+
+.simple-mode-field .text-input::placeholder {
+  color: var(--text-placeholder);
+}
+
+.simple-mode-api-actions,
+.simple-mode-agent-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.simple-mode-api-actions .primary-button,
+.simple-mode-api-actions .secondary-button,
+.simple-mode-agent-actions .primary-button,
+.simple-mode-agent-actions .secondary-button {
+  gap: 7px;
+}
+
+.simple-mode-api-result {
+  display: grid;
+  gap: 9px;
+  margin-top: 1px;
+  padding: 12px;
+  border: 1px solid var(--theme-b6d3bd);
+  border-radius: 9px;
+  background: var(--ui-accent-soft);
+}
+
+.simple-mode-api-result-heading {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-model-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.simple-mode-model-tag {
+  padding: 3px 8px;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 5px;
+  background: var(--theme-fffdf8);
+  color: var(--theme-4f4a43);
+  font-size: var(--font-size-meta);
+}
+
+.simple-mode-more-models {
+  align-self: center;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-meta);
+}
+
+.simple-mode-agent-layout {
+  display: grid;
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
+  gap: 14px;
+  margin-top: 2px;
+}
+
+.simple-mode-agent-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: 460px;
+  padding: 8px;
+  overflow-y: auto;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 12px;
+  background: var(--theme-faf9f5);
+}
+
+.simple-mode-agent-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 10px 11px;
+  border: 1px solid transparent;
+  border-radius: 9px;
+  background: transparent;
+  color: var(--theme-2d2a26);
+  text-align: left;
+  transition: border-color 140ms ease, background 140ms ease;
+}
+
+.simple-mode-agent-option:hover {
+  border-color: var(--theme-d5d2cb);
+  background: var(--theme-fffdf8);
+}
+
+.simple-mode-agent-option.selected {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent-soft);
+  box-shadow: 0 3px 10px var(--ui-accent-shadow);
+}
+
+.simple-mode-agent-option-icon {
+  width: 23px;
+  height: 23px;
+  flex: none;
+  object-fit: contain;
+}
+
+.simple-mode-agent-option-copy {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 3px;
+}
+
+.simple-mode-agent-option-copy strong {
+  overflow: hidden;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-label);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-agent-option-copy span {
+  overflow: hidden;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-agent-option-copy span.installed {
+  color: var(--ui-accent-strong);
+}
+
+.simple-mode-agent-config {
+  display: grid;
+  align-content: start;
+  gap: 16px;
+  min-width: 0;
+  padding: 20px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 12px;
+  background: var(--theme-fffdf8);
+}
+
+.simple-mode-agent-identity {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  min-width: 0;
+}
+
+.simple-mode-agent-logo {
+  width: 44px;
+  height: 44px;
+  flex: none;
+  border-radius: 11px;
+}
+
+.simple-mode-agent-logo img {
+  width: 28px;
+  height: 28px;
+}
+
+.simple-mode-agent-identity-copy {
+  display: grid;
+  min-width: 0;
+  gap: 4px;
+}
+
+.simple-mode-agent-identity-copy h3 {
+  margin: 0;
+  overflow: hidden;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-panel-title);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-agent-identity-copy span {
+  overflow: hidden;
+  color: var(--theme-5f5a53);
+  font-size: var(--font-size-label);
+  line-height: var(--line-height-body);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.simple-mode-agent-detection {
+  padding: 10px 13px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 8px;
+  background: var(--theme-faf9f5);
+}
+
+.simple-mode-agent-detection span {
+  display: block;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-meta);
+  line-height: var(--line-height-body);
+}
+
+.simple-mode-agent-actions {
+  margin-top: 1px;
+}
+
+.simple-mode-agent-actions .primary-button {
+  flex: 1;
+}
+
+.simple-mode-agent-actions .primary-button,
+.simple-mode-agent-actions .secondary-button {
+  min-height: 42px;
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-task-footer {
+  gap: 16px;
+  padding-top: 16px;
+}
+
+.simple-mode-selection {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 760px) {
+  .simple-mode-agent-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .simple-mode-agent-list {
+    max-height: 260px;
+  }
+}
+
+@media (max-width: 680px) {
+  .simple-mode-progress-item {
+    min-height: 62px;
+  }
+
+  .simple-mode-progress-item-head {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .simple-mode-progress-item-head > .state-pill {
+    grid-column: 2;
+    justify-self: start;
+  }
+
+  .simple-mode-choice-title {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .simple-mode-provider-card-foot {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .simple-mode-provider-card-foot .primary-button,
+  .simple-mode-provider-card-foot .secondary-button {
+    width: 100%;
+  }
+
+  .simple-mode-task {
+    gap: 18px;
+    padding: 18px;
+    border-radius: 13px;
+  }
+
+  .simple-mode-task-heading {
+    align-items: flex-start;
+  }
+
+  .simple-mode-heading-icon {
+    width: 34px;
+    height: 34px;
+  }
+
+  .simple-mode-choice > span:not(.simple-mode-choice-icon),
+  .simple-mode-choice > small {
+    padding-left: 0;
+  }
+
+  .simple-mode-api-form {
+    padding: 14px;
+  }
+
+  .simple-mode-api-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .simple-mode-api-actions,
+  .simple-mode-agent-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .simple-mode-api-actions button,
+  .simple-mode-agent-actions button {
+    width: 100%;
+  }
+
+  .simple-mode-agent-config {
+    padding: 16px;
+  }
+
+  .simple-mode-core-alert,
+  .simple-mode-action-card,
+  .simple-mode-task-footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .simple-mode-core-alert .secondary-button,
+  .simple-mode-action-card .primary-button,
+  .simple-mode-task-footer > .primary-button,
+  .simple-mode-task-footer > .secondary-button {
+    width: 100%;
+  }
+
+  .simple-mode-progress,
+  .simple-mode-choice-grid,
+  .simple-mode-guide-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .simple-mode-progress-item {
+    min-height: 54px;
+  }
+
+  .simple-mode-path-row {
+    flex-wrap: wrap;
+  }
+
+  .simple-mode-path-row .text-button {
+    width: 100%;
+    margin-left: 0;
+    text-align: left;
+  }
+
+  .simple-mode-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .simple-mode-actions button {
+    width: 100%;
+  }
+
+  .simple-mode-embedded-heading {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .simple-mode-embedded-heading .text-button {
+    width: 100%;
+    margin-left: 0;
+    text-align: left;
+  }
+
+  .simple-mode-embedded-content {
+    padding: 10px;
+  }
+
+  .simple-mode-flow-navigation {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 10px;
+  }
+
+  .simple-mode-flow-navigation > button {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .simple-mode-flow-navigation > .secondary-button:only-child {
+    grid-column: 1;
+  }
+
+  .simple-mode-flow-navigation > .primary-button:only-child {
+    grid-column: 2;
+  }
+
+}
+
+.simple-mode-page {
+  max-width: 900px;
+  gap: 14px;
+}
+
+.simple-mode-progress {
+  gap: 8px;
+}
+
+.simple-mode-progress-item,
+.simple-mode-progress-item:hover:not(:disabled) {
+  min-height: 58px;
+  padding: 10px 12px;
+  border-radius: 9px;
+  background: var(--theme-fffdf8);
+  box-shadow: none;
+  transform: none;
+}
+
+.simple-mode-progress-item.active {
+  border-color: color-mix(in srgb, var(--ui-accent) 32%, var(--theme-e3e1db));
+  background: var(--ui-accent-soft);
+  box-shadow: none;
+}
+
+.simple-mode-progress-item-head {
+  gap: 8px;
+}
+
+.simple-mode-step-badge {
+  width: 26px;
+  height: 26px;
+}
+
+.simple-mode-task {
+  gap: 16px;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: none;
+}
+
+.simple-mode-task-heading {
+  align-items: flex-start;
+  gap: 0;
+}
+
+.simple-mode-task-heading h2 {
+  font-size: var(--font-size-dialog-title);
+}
+
+.simple-mode-task-heading p {
+  margin-top: 4px;
+  font-size: var(--font-size-label);
+}
+
+.simple-mode-choice-grid {
+  gap: 8px;
+}
+
+.simple-mode-choice,
+.simple-mode-choice:hover {
+  min-height: 88px;
+  gap: 5px;
+  padding: 13px 14px;
+  border-radius: 8px;
+  box-shadow: none;
+  transform: none;
+}
+
+.simple-mode-choice.selected {
+  box-shadow: none;
+}
+
+.simple-mode-choice-heading {
+  gap: 0;
+}
+
+.simple-mode-choice-title {
+  justify-content: flex-start;
+  gap: 8px;
+}
+
+.simple-mode-choice > span:not(.simple-mode-choice-icon),
+.simple-mode-choice > small {
+  padding-left: 0;
+}
+
+.simple-mode-embedded-box {
+  gap: 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.simple-mode-provider-grid {
+  gap: 8px;
+}
+
+.simple-mode-provider-card,
+.simple-mode-provider-card:hover {
+  min-height: 0;
+  gap: 12px;
+  padding: 12px;
+  border-radius: 8px;
+  box-shadow: none;
+  transform: none;
+}
+
+.simple-mode-provider-card-foot .primary-button,
+.simple-mode-provider-card-foot .secondary-button {
+  min-height: 32px;
+}
+
+.simple-mode-api-form {
+  gap: 12px;
+  padding: 14px;
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+.simple-mode-api-platforms {
+  gap: 6px;
+}
+
+.simple-mode-api-platform {
+  min-height: 32px;
+  padding-inline: 10px;
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-api-result {
+  border-radius: 8px;
+}
+
+.simple-mode-agent-layout {
+  gap: 10px;
+}
+
+.simple-mode-agent-list,
+.simple-mode-agent-config {
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+.simple-mode-agent-list {
+  padding: 6px;
+}
+
+.simple-mode-agent-config {
+  padding: 16px;
+}
+
+.simple-mode-task-footer {
+  gap: 12px;
+  padding-top: 12px;
+}
+
+@media (max-width: 760px) {
+  .simple-mode-agent-layout {
+    grid-template-columns: 1fr;
+  }
+
+  .simple-mode-agent-list {
+    max-height: 260px;
+  }
+}
+
+@media (max-width: 680px) {
+  .simple-mode-progress-item {
+    min-height: 62px;
+  }
+
+  .simple-mode-progress-item-head {
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+  }
+
+  .simple-mode-progress-item-head > .state-pill {
+    grid-column: 2;
+    justify-self: start;
+  }
+
+  .simple-mode-choice-title {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .simple-mode-provider-card-foot {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .simple-mode-provider-card-foot .primary-button,
+  .simple-mode-provider-card-foot .secondary-button {
+    width: 100%;
+  }
+
+  .simple-mode-task {
+    gap: 18px;
+    padding: 18px;
+  }
+
+  .simple-mode-api-form {
+    padding: 14px;
+  }
+
+  .simple-mode-api-fields {
+    grid-template-columns: 1fr;
+  }
+
+  .simple-mode-api-actions,
+  .simple-mode-agent-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .simple-mode-api-actions button,
+  .simple-mode-agent-actions button {
+    width: 100%;
+  }
+
+  .simple-mode-agent-config {
+    padding: 16px;
+  }
+}
+
+@media (max-width: 680px) {
+  .simple-mode-api-model-heading {
+    align-items: flex-start;
+  }
+
+  .simple-mode-api-model-heading .secondary-button {
+    width: 100%;
+  }
+
+  .simple-mode-api-model-options {
+    grid-template-columns: 1fr;
+  }
+}
+
+.agents-page-embedded .agent-workbench {
+  gap: 18px;
+}
+
+.agents-page-embedded .management-header {
+  align-items: center;
+  min-height: 48px;
+}
+
+.agents-page-embedded .agent-embedded-header-copy {
+  display: grid;
+  gap: 4px;
+}
+
+.agents-page-embedded .agent-embedded-header-copy h1 {
+  font-size: var(--font-size-panel-title);
+  line-height: var(--line-height-tight);
+  white-space: normal;
+}
+
+.agents-page-embedded .agent-embedded-header-copy p {
+  margin: 0;
+  color: var(--theme-8a847c);
+  font-size: var(--font-size-meta);
+  line-height: var(--line-height-body);
+}
+
+.agents-page-embedded .agent-client-list {
+  min-height: 0;
+  overflow: hidden;
+  padding: 16px;
+}
+
+.agents-page-embedded .agent-list-items button > span {
+  gap: 5px;
+}
+
+.agents-page-embedded .agent-list-items strong {
+  line-height: 1.3;
+}
+
+.agents-page-embedded .agent-list-items small {
+  line-height: 1.4;
+}
+
+.agents-page-embedded .agent-list-items {
+  inset: 16px;
+  min-height: 0;
+  max-height: none;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 4px;
+  scrollbar-gutter: stable;
+}
+
+.agents-page-embedded .agent-list-items button {
+  grid-template-columns: 30px minmax(0, 1fr) 8px;
+  gap: 11px;
+  min-height: 66px;
+  padding: 10px 11px;
+}
+
+@media (max-width: 760px) {
+  .agents-page-embedded .agent-workbench {
+    grid-template-columns: 1fr;
+    gap: 14px;
+  }
+
+  .agents-page-embedded .agent-client-list {
+    max-height: 270px;
+  }
+
+  .agents-page-embedded .agent-list-items {
+    grid-template-columns: 1fr;
+    max-height: 236px;
+    overflow-y: auto;
+  }
+}
+
+.agents-page-embedded .agent-config-panel {
+  max-height: none;
+  overflow: visible;
+  padding: 14px;
+}
+
+.agents-page-embedded .agent-config-panel {
+  display: block;
+  overflow: visible;
+  padding: 0;
+  background: var(--theme-fffdf8);
+}
+
+.agents-page-embedded .agent-minimal-config {
+  display: grid;
+  min-width: 0;
+  gap: 18px;
+  padding: 20px;
+}
+
+.agents-page-embedded .agent-minimal-client-summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--theme-e3e1db);
+}
+
+.agents-page-embedded .agent-minimal-client-icon {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 10px;
+  background: var(--theme-faf9f5);
+  color: var(--theme-59544d);
+}
+
+.agents-page-embedded .agent-minimal-client-icon .provider-logo {
+  width: 24px;
+  height: 24px;
+}
+
+.agents-page-embedded .agent-minimal-client-summary > div {
+  display: grid;
+  min-width: 0;
+  gap: 3px;
+}
+
+.agents-page-embedded .agent-minimal-client-summary strong {
+  overflow: hidden;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-body);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agents-page-embedded .agent-minimal-client-summary span:not(.agent-minimal-client-icon):not(.agent-minimal-version) {
+  overflow: hidden;
+  color: var(--theme-8a847c);
+  font-size: var(--font-size-meta);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agents-page-embedded .agent-minimal-version {
+  max-width: 120px;
+  overflow: hidden;
+  color: var(--theme-8a847c);
+  font-size: var(--font-size-meta);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agents-page-embedded .agent-minimal-field {
+  display: grid;
+  gap: 8px;
+}
+
+.agents-page-embedded .agent-minimal-field > label {
+  color: var(--theme-59544d);
+  font-size: var(--font-size-label);
+  font-weight: var(--font-weight-semibold);
+}
+
+.agents-page-embedded .agent-minimal-field .agent-model-picker,
+.agents-page-embedded .agent-minimal-field .agent-model-trigger {
+  width: 100%;
+}
+
+.agents-page-embedded .agent-minimal-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  padding-top: 2px;
+}
+
+.agents-page-embedded .agent-minimal-actions button {
+  min-height: 42px;
+  min-width: 0;
+}
+
+.agents-page-embedded .agent-minimal-message {
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-meta);
+  line-height: var(--line-height-body);
+  overflow-wrap: anywhere;
+}
+
+.agents-page-embedded .agent-core-config {
+  gap: 10px;
+}
+
+.agents-page-embedded .agent-status-grid {
+  min-height: 0;
+  gap: 6px;
+}
+
+.agents-page-embedded .agent-status-grid > div {
+  gap: 3px;
+  padding: 9px 10px;
+}
+
+.agents-page-embedded .agent-core-setting-section {
+  gap: 9px;
+  padding: 12px;
+}
+
+.agents-page-embedded .agent-section-heading {
+  gap: 8px;
+}
+
+.agents-page-embedded .agent-section-heading strong {
+  font-size: var(--font-size-label);
+}
+
+.agents-page-embedded .agent-model-trigger {
+  min-height: 40px;
+  padding: 6px 10px;
+}
+
+.agents-page-embedded .agent-modification-buttons button {
+  min-height: 34px;
+  padding: 6px 8px;
+}
+
+.agents-page-embedded .agent-config-footer {
+  min-height: 40px;
+  gap: 10px;
+  padding-top: 10px;
+}
+
+@media (max-width: 760px) {
+  .agents-page-embedded .agent-minimal-config {
+    padding: 16px;
+  }
+
+  .agents-page-embedded .agent-minimal-actions {
+    grid-template-columns: 1fr;
+  }
+}
+
+.app-shell.app-shell-easy-mode {
+  display: block;
+  width: 100%;
+  min-height: 100vh;
+  background: var(--theme-faf9f5);
+}
+
+.app-shell-easy-mode .workspace {
+  width: 100%;
+  min-width: 0;
+  min-height: 100vh;
+}
+
+.app-shell-easy-mode .content {
+  width: 100%;
+  max-width: 1360px;
+  margin: 0 auto;
+  padding: 24px 36px 48px;
+}
+
+.simple-mode-page.simple-mode-expanded {
+  max-width: 1360px;
+  width: 100%;
+  margin-inline: auto;
+  gap: 16px;
+}
+
+.simple-mode-topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 12px 18px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 12px;
+  background: var(--theme-fffdf8);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+}
+
+.simple-mode-topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.simple-mode-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.simple-mode-brand .brand-logo {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+}
+
+.simple-mode-brand-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.simple-mode-brand-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.simple-mode-brand-title strong {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-semibold);
+  color: var(--theme-2d2a26);
+}
+
+.simple-mode-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--ui-accent-soft, #eef2ff);
+  color: var(--ui-accent, #3b82f6);
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
+  border: 1px solid color-mix(in srgb, var(--ui-accent) 30%, transparent);
+}
+
+.simple-mode-brand-sub {
+  font-size: var(--font-size-caption);
+  color: var(--theme-7a746c);
+}
+
+.simple-mode-topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.simple-mode-guide-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: 8px;
+  font-size: var(--font-size-meta);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: all 160ms ease;
+  border: 1px solid var(--theme-d5d2cb);
+  background: var(--theme-faf9f5);
+  color: var(--theme-2d2a26);
+}
+
+.simple-mode-guide-toggle:hover {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent-soft);
+  color: var(--ui-accent);
+}
+
+.simple-mode-guide-toggle.active {
+  background: var(--ui-accent, #3b82f6);
+  color: #ffffff;
+  border-color: var(--ui-accent, #3b82f6);
+  box-shadow: 0 0 12px color-mix(in srgb, var(--ui-accent) 45%, transparent);
+}
+
+.simple-guide-pulse-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #ffffff;
+  animation: pulseDot 1.4s infinite ease-in-out;
+}
+
+.simple-mode-theme-group {
+  display: flex;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--theme-faf9f5);
+}
+
+.simple-mode-theme-group button {
+  display: grid;
+  place-items: center;
+  width: 34px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: var(--theme-7a746c);
+  cursor: pointer;
+  transition: all 140ms ease;
+}
+
+.simple-mode-theme-group button:hover {
+  color: var(--theme-2d2a26);
+}
+
+.simple-mode-theme-group button.active {
+  background: var(--theme-fffdf8);
+  color: var(--ui-accent, #3b82f6);
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-lang-dropdown {
+  position: relative;
+}
+
+.simple-mode-lang-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 10px;
+  border-radius: 8px;
+  border: 1px solid var(--theme-d5d2cb);
+  background: var(--theme-faf9f5);
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-meta);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: all 140ms ease;
+}
+
+.simple-mode-lang-btn:hover {
+  border-color: var(--theme-7a746c);
+}
+
+.simple-mode-lang-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  min-width: 140px;
+  border: 1px solid var(--theme-d5d2cb);
+  border-radius: 8px;
+  background: var(--theme-fffdf8);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  z-index: 100;
+  padding: 4px;
+  display: grid;
+  gap: 2px;
+}
+
+.simple-mode-lang-menu button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  font-size: var(--font-size-meta);
+  color: var(--theme-2d2a26);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+
+.simple-mode-lang-menu button:hover {
+  background: var(--theme-faf9f5);
+}
+
+.simple-mode-lang-menu button.selected {
+  background: var(--ui-accent-soft);
+  color: var(--ui-accent);
+  font-weight: var(--font-weight-semibold);
+}
+
+.simple-mode-exit-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  font-size: var(--font-size-meta);
+  font-weight: var(--font-weight-semibold);
+  border-radius: 8px;
+}
+
+.simple-mode-highlight-button {
+  border: 1px solid var(--ui-accent) !important;
+  background: var(--ui-accent) !important;
+  color: #ffffff !important;
+  box-shadow: 0 4px 12px var(--ui-accent-shadow);
+}
+
+.simple-mode-highlight-button:hover {
+  border-color: var(--ui-accent-strong) !important;
+  background: var(--ui-accent-strong) !important;
+  color: #ffffff !important;
+}
+
+.simple-mode-guide-toggle.simple-mode-highlight-button.active {
+  border-color: var(--ui-accent) !important;
+  background: var(--ui-accent) !important;
+  color: #ffffff !important;
+  box-shadow: 0 4px 12px var(--ui-accent-shadow);
+}
+
+
+
+.guide-spotlight-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  pointer-events: none;
+}
+
+.guide-spotlight-box {
+  position: fixed;
+  border-radius: 12px;
+  border: 2px solid var(--ui-accent, #3b82f6);
+  box-shadow: 0 0 0 9999px rgba(10, 14, 26, 0.72), 0 0 28px color-mix(in srgb, var(--ui-accent) 58%, transparent);
+  pointer-events: none;
+  transition: all 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  z-index: 9001;
+  animation: guideGlow 2.5s infinite alternate ease-in-out;
+}
+
+.guide-tooltip-card {
+  position: fixed;
+  width: 420px;
+  max-width: calc(100vw - 32px);
+  padding: 18px;
+  border-radius: 14px;
+  background: var(--theme-fffdf8, #ffffff);
+  border: 1px solid var(--theme-d5d2cb, #e2e8f0);
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
+  z-index: 9002;
+  pointer-events: auto;
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  animation: popoverIn 220ms ease-out;
+}
+
+.guide-tooltip-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.guide-tooltip-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  background: var(--ui-accent, #3b82f6);
+  color: #ffffff;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
+}
+
+.guide-tooltip-close {
+  display: grid;
+  place-items: center;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--theme-7a746c);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+
+.guide-tooltip-close:hover {
+  background: var(--theme-faf9f5);
+  color: var(--theme-2d2a26);
+}
+
+.guide-tooltip-body h4 {
+  font-size: var(--font-size-body);
+  font-weight: var(--font-weight-semibold);
+  color: var(--theme-2d2a26);
+  margin: 0 0 8px 0;
+}
+
+.guide-tooltip-body p {
+  font-size: var(--font-size-meta);
+  line-height: 1.6;
+  color: var(--theme-5f5a53);
+  margin: 0 0 10px 0;
+}
+
+.guide-tooltip-tip {
+  font-size: var(--font-size-caption);
+  color: var(--ui-accent-strong, #2563eb);
+  background: var(--ui-accent-soft, #eff6ff);
+  padding: 8px 12px;
+  border-radius: 6px;
+  margin-top: 6px;
+  font-weight: var(--font-weight-medium);
+}
+
+.guide-tooltip-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 14px;
+  padding-top: 12px;
+  border-top: 1px solid var(--theme-e3e1db);
+}
+
+.guide-tooltip-step-dots {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.guide-step-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--theme-d5d2cb);
+  cursor: default;
+  transition: all 140ms ease;
+}
+
+.guide-step-dot.active {
+  width: 20px;
+  border-radius: 999px;
+  background: var(--ui-accent, #3b82f6);
+}
+
+.guide-tooltip-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.guide-btn-sm {
+  min-height: 32px !important;
+  height: 32px !important;
+  padding: 0 14px !important;
+  font-size: var(--font-size-meta) !important;
+}
+
+@keyframes guideGlow {
+  0% {
+    box-shadow: 0 0 0 9999px rgba(10, 14, 26, 0.72), 0 0 18px color-mix(in srgb, var(--ui-accent) 42%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 9999px rgba(10, 14, 26, 0.72), 0 0 32px color-mix(in srgb, var(--ui-accent) 72%, transparent);
+  }
+}
+
+@keyframes pulseDot {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.4);
+    opacity: 0.6;
+  }
+}
+
+@keyframes popoverIn {
+  0% {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.guide-dimmed-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 12, 22, 0.72);
+  backdrop-filter: blur(1.5px);
+  z-index: 8990;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+
+.guide-focus-highlight {
+  position: relative !important;
+  z-index: 8995 !important;
+  background: var(--theme-fffdf8, #ffffff) !important;
+  box-shadow: 0 0 0 4px var(--ui-accent), 0 0 35px color-mix(in srgb, var(--ui-accent) 68%, transparent), 0 12px 36px rgba(0, 0, 0, 0.25) !important;
+  border-radius: 12px;
+  pointer-events: auto !important;
+  animation: targetPulse 2.5s infinite alternate ease-in-out;
+}
+
+.guide-interactive-card {
+  position: fixed;
+  width: 430px;
+  max-width: calc(100vw - 32px);
+  padding: 18px 20px;
+  border-radius: 14px;
+  background: var(--theme-fffdf8, #ffffff);
+  border: 1px solid var(--theme-d5d2cb, #e2e8f0);
+  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15);
+  z-index: 9005;
+  pointer-events: auto;
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  animation: popoverIn 220ms ease-out;
+}
+
+@keyframes targetPulse {
+  0% {
+    box-shadow: 0 0 0 4px var(--ui-accent), 0 0 20px color-mix(in srgb, var(--ui-accent) 48%, transparent);
+  }
+  100% {
+    box-shadow: 0 0 0 4px var(--ui-accent), 0 0 38px color-mix(in srgb, var(--ui-accent) 78%, transparent);
+  }
+}
+
+.guide-status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 9px;
+  border-radius: 999px;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
+  white-space: nowrap;
+}
+
+.guide-status-pill.success {
+  background: var(--theme-eef7f0, #eef7f0);
+  color: var(--theme-2f6b3f, #16a34a);
+  border: 1px solid var(--theme-b6d3bd, #86efac);
+}
+
+.guide-status-pill.pending {
+  background: var(--theme-fff1ee, #fff1ee);
+  color: var(--theme-9f2d20, #e11d48);
+  border: 1px solid var(--theme-dfb7b0, #fca5a5);
+}
+
+.guide-tooltip-actions-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.guide-btn-sm.disabled {
+  opacity: 0.55;
+  cursor: not-allowed !important;
+  pointer-events: none;
+}
+
+@media (max-width: 760px) {
+  .simple-mode-topbar {
+    flex-wrap: wrap;
+  }
+
+  .simple-mode-topbar-left,
+  .simple-mode-topbar-right {
+    width: 100%;
+  }
+
+  .simple-mode-topbar-right {
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+}
+
+@container workspace (max-width: 1080px) {
+  .provider-workbench,
+  .real-provider-workbench,
+  .kernel-layout,
+  .config-management-content {
+    grid-template-columns: 1fr;
+  }
+
+  .provider-category-panel {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    height: auto;
+  }
+
+  .provider-resource-panel {
+    height: 520px;
+  }
+
+  .real-provider-row {
+    grid-template-columns: 32px minmax(0, 1fr) max-content;
+  }
+
+  .provider-row-meta {
+    display: none;
+  }
+
+}
+
+@container workspace (max-width: 760px) {
+  .usage-stat-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .config-network-grid,
+  .config-tls-fields,
+  .config-management-form,
+  .client-api-grid,
+  .oauth-grid,
+  .quota-grid,
+  .quota-summary-grid,
+  .real-quota-grid,
+  .auth-filter-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .usage-topbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .usage-tabs {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .usage-tabs button {
+    flex: 1 1 45%;
+    min-width: 0;
+    padding-inline: 7px;
+  }
+
+  .usage-topbar-actions {
+    width: 100%;
+  }
+
+  .usage-events-summary-left,
+  .usage-events-summary-right {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .usage-collector-state {
+    flex: 1;
+  }
+
+  .usage-analysis-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .usage-pricing-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .usage-pricing-actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .usage-pricing-actions input {
+    width: 100%;
+  }
+
+  .usage-price-editor {
+    grid-template-columns: 1fr;
+  }
+
+  .auth-files-toolbar {
+    grid-template-columns: 18px minmax(0, 1fr);
+  }
+
+  .auth-files-toolbar select {
+    border-top: 1px solid var(--theme-e3e1db);
+    border-left: 0;
+  }
+
+  .auth-files-toolbar select:first-of-type,
+  .auth-files-toolbar select:last-of-type {
+    grid-column: 1 / -1;
+  }
+
+  .auth-files-panel {
+    grid-template-rows: auto auto minmax(320px, 1fr);
+    height: auto;
+    min-height: 460px;
+  }
+
+  .real-provider-row {
+    grid-template-columns: 32px minmax(0, 1fr) auto;
+  }
+
+  .real-auth-file-row {
+    grid-template-columns: 34px minmax(0, 1fr);
+  }
+
+  .auth-file-actions {
+    grid-column: 2;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .auth-files-page .management-header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .auth-files-page .management-heading-actions {
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+
+  .provider-row-meta,
+  .auth-file-meta {
+    display: none;
+  }
+
+  .provider-category-panel {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .agent-workbench,
+  .thinking-alias-workbench {
+    grid-template-columns: 1fr;
+  }
+
+  .thinking-alias-editor-panel,
+  .thinking-alias-list-panel {
+    height: auto;
+    min-height: 0;
+  }
+
+  .agent-client-list {
+    height: 270px;
+    min-height: 0;
+    max-height: 270px;
+  }
+
+  .agent-config-panel {
+    height: auto;
+    min-height: 0;
+    overflow: visible;
+  }
+
+  .thinking-model-list {
+    max-height: 240px;
+  }
+
+  .thinking-alias-list {
+    max-height: 460px;
+  }
+
+  .management-header,
+  .management-panel-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .management-heading-actions {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .management-heading-actions button {
+    flex: 1;
+  }
+
+  .muted-summary,
+  .compact-toolbar {
+    width: 100%;
+  }
+
+  .panel {
+    padding: 18px;
+  }
+}
+
+@container workspace (max-width: 480px) {
+  .usage-stat-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container workspace (max-width: 540px) {
+  .usage-data-management-heading,
+  .usage-data-management-action,
+  .usage-data-management-result {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .usage-data-management-action .primary-button {
+    width: 100%;
+  }
+
+  .usage-storage-limit-editor {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .usage-storage-limit-editor label {
+    width: 100%;
+  }
+
+  .usage-storage-limit-editor input {
+    flex: 1;
+    width: auto;
+    min-width: 0;
+  }
+
+  .usage-custom-range {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .usage-column-options {
+    grid-template-columns: 1fr;
+  }
+
+  .usage-column-dialog-footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .usage-column-dialog-actions button {
+    flex: 1;
+  }
+}
+
+.agent-auth-method { display: grid; gap: 6px; flex: 1; min-width: 0; font-size: var(--font-size-meta); }
+.agent-auth-method select { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--theme-e3e1db); border-radius: 8px; color: var(--theme-2d2a26); background: var(--theme-fffdf8); }
+.agent-auth-segmented {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: center;
+  gap: 3px;
+  min-height: 38px;
+  height: 38px;
+  padding: 3px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 8px;
+  background: var(--theme-eeece6);
+  box-sizing: border-box;
+}
+.agent-auth-segmented-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 100%;
+  min-width: 0;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-meta);
+  font-weight: var(--font-weight-semibold);
+  font-family: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  user-select: none;
+  transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
+}
+.agent-auth-segmented-button:hover:not(:disabled) {
+  background: var(--theme-e8e5dc);
+  color: var(--theme-2d2a26);
+}
+.agent-auth-segmented-button.active {
+  background: var(--theme-fffdf8);
+  color: var(--theme-2d2a26);
+  font-weight: var(--font-weight-semibold);
+  box-shadow: 0 1px 3px rgba(45, 42, 38, 0.12);
+}
+.agent-auth-segmented-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.agent-auth-segmented-button:focus-visible {
+  outline: 2px solid var(--theme-2d2a26);
+  outline-offset: -1px;
+}
+.agent-model-section .agent-codex-options { margin-top: 16px; align-items: end; }
+.agent-model-section .agent-codex-catalog-button { min-height: 38px; height: 38px; padding: 8px 10px; }
+.agent-write-state { margin: 0; font-size: var(--font-size-meta); color: var(--theme-7a746c); }
+
+.agent-signin-hint { grid-column: 1 / -1; margin: 0; color: var(--theme-7a746c); font-size: var(--font-size-meta); line-height: 1.6; }
+
+.agent-settings-tools { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
+.agent-model-section { grid-column: 1 / -1; }
+.agent-save-bar { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0 0; border-top: 1px solid var(--theme-e3e1db); }
+.agent-save-feedback { display: grid; gap: 6px; min-width: 0; }
+.agent-save-bar .agent-save-feedback { flex: 1; }
+.agent-save-feedback small { color: var(--theme-7a746c); font-size: var(--font-size-meta); line-height: var(--line-height-body); overflow-wrap: anywhere; }
+.agent-save-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; min-width: 0; }
+.agent-save-actions button { min-width: 128px; min-height: 40px; }
+.agent-shared-feedback { min-width: 0; }
+.agent-run-controls { display: grid; gap: 12px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--theme-e3e1db); }
+.agent-run-controls .agent-launch-actions { justify-content: flex-end; flex-wrap: wrap; }
+.agent-run-controls .agent-launch-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; }
+.agent-management-sections { display: grid; min-width: 0; }
+.agent-management-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; min-width: 0; border-bottom: 1px solid var(--theme-e3e1db); }
+.agent-management-row:first-child { padding-top: 6px; }
+.agent-management-row:last-child { border-bottom: 0; }
+.agent-management-row > div:first-child { min-width: 0; flex: 1; }
+.agent-management-row h3 { margin: 0 0 6px; color: var(--theme-2d2a26); font-size: var(--font-size-section); }
+.agent-management-row p { margin: 0; color: var(--theme-7a746c); font-size: var(--font-size-label); line-height: var(--line-height-body); overflow-wrap: anywhere; }
+.agent-management-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 50%; }
+.agent-management-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; }
+.agents-page-embedded .agent-config-panel { display: grid; gap: 16px; max-height: none; overflow: visible; padding: 20px; }
+.agents-page-embedded .agent-config-scroll-region { gap: 16px; }
+.agents-page-embedded .agent-minimal-config { padding: 0; }
+.agents-page-embedded .agent-minimal-actions { grid-template-columns: minmax(0, 1fr); }
+.agent-subpage-tabs button:focus-visible { outline: 2px solid var(--theme-2d2a26); outline-offset: -2px; }
+@container agent-panel (max-width: 640px) {
+  .agent-management-row { flex-direction: column; align-items: stretch; gap: 12px; }
+  .agent-management-actions { max-width: 100%; justify-content: flex-start; }
+  .agent-run-controls .agent-launch-actions { display: flex; }
+  .agent-run-controls .agent-launch-button { flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; }
+}
+.agent-signin-label { display: flex; align-items: center; gap: 8px; }
+.agent-signin-label-title { font-weight: var(--font-weight-semibold); color: var(--theme-2d2a26); }
+.agent-signin-help-toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 3px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--theme-7a746c); font: inherit; cursor: pointer; }
+.agent-signin-help-toggle:hover { color: var(--theme-2d2a26); background: var(--theme-fffdf8); }
+.agent-signin-help-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
+.agent-signin-explanation { grid-column: 1 / -1; padding: 12px 0 0; border-top: 1px solid var(--theme-e3e1db); font-size: var(--font-size-meta); color: var(--theme-7a746c); overflow-wrap: anywhere; }
+.agent-signin-explanation[hidden] { display: none; }
+.agent-signin-explanation dl { display: grid; gap: 10px; margin: 0; }
+.agent-signin-explanation dl > div { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 12px; }
+.agent-signin-explanation dt { color: var(--theme-2d2a26); font-weight: var(--font-weight-semibold); }
+.agent-signin-explanation dd { margin: 0; }
+.agent-signin-explanation p { margin: 12px 0 0; }
+@media (max-width: 540px) { .agent-signin-explanation dl > div { grid-template-columns: 1fr; gap: 3px; } }
+@media (max-width: 760px) {
+ .agent-save-bar { flex-wrap: wrap; gap: 12px; }
+ .agent-save-actions { margin-left: auto; }
+}
+
+.thinking-alias-page > .management-header {
+  align-items: center;
+  flex-direction: row;
+}
+
+.thinking-alias-page > .management-header .management-heading-actions {
+  width: auto;
+  flex-wrap: nowrap;
+}
+
+.thinking-alias-page > .management-header .muted-summary {
+  width: auto;
+}
+
+.thinking-alias-page > .management-header .management-heading-actions button {
+  width: 42px;
+  flex: 0 0 42px;
+  padding: 0;
+}
+
+.harness-catalog-dialog .codex-catalog-sidebar { grid-template-rows: auto auto minmax(0,1fr) auto; }
+.harness-editor-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
+.harness-provider-button { flex-shrink: 0; justify-content: flex-start; }
+.harness-provider-button.active { border-color: var(--theme-bd5e31); }
+.harness-catalog-form > label > span { display: flex; flex-wrap: wrap; gap: 6px; overflow-wrap: anywhere; }
+.harness-catalog-form small, .harness-reasoning small { color: var(--theme-716b61); font-size: var(--font-size-caption); line-height: 1.6; }
+.harness-override { font-weight: var(--font-weight-regular); }
+.harness-catalog-group { grid-column: 1 / -1; border-top: 1px solid var(--theme-d5d2cb); padding-top: 14px; min-width: 0; }
+.harness-catalog-group > summary { cursor: pointer; font-size: var(--font-size-meta); font-weight: var(--font-weight-semibold); padding: 4px 0; }
+.harness-catalog-group > button { margin-top: 12px; }
+.harness-reasoning { grid-column: 1 / -1; display: grid; gap: 10px; font-size: var(--font-size-label); }
+.harness-reasoning > label { display: grid; gap: 7px; color: var(--theme-5f5a53); font-size: inherit; font-weight: var(--font-weight-semibold); }
+.harness-reasoning-levels { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; }
+.harness-reasoning-levels > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.harness-reasoning-levels label { display: flex; align-items: center; gap: 6px; flex: 0 0 75px; color: var(--theme-5f5a53); font-size: inherit; font-weight: var(--font-weight-medium); }
+.harness-reasoning-levels input:not([type=checkbox]) { min-width: 0; width: 100%; }
+.harness-catalog-form textarea { font-family: var(--font-mono, monospace); }
+@media (max-width: 640px) { .harness-reasoning-levels { grid-template-columns: 1fr; } }
+
+@media (max-width: 760px) {
+  .harness-catalog-dialog .codex-catalog-body { grid-template-rows: 210px minmax(0,1fr); }
+  .harness-catalog-dialog .codex-catalog-sidebar { grid-template-rows: auto auto minmax(0,1fr); }
+  .harness-catalog-dialog .harness-provider-button { grid-column: 1 / -1; }
+  .harness-catalog-dialog .codex-catalog-search { grid-column: 1; grid-row: 2; }
+  .harness-catalog-dialog .codex-catalog-reload { grid-column: 2; grid-row: 2; }
+  .harness-catalog-dialog .codex-catalog-models { grid-row: 3; }
+}
+
+.harness-catalog-dialog .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
+.harness-catalog-form small { font-weight: var(--font-weight-regular); }
+.harness-catalog-form { margin-top: 12px; }
+
+.harness-context-window { display: grid; align-content: start; gap: 8px; min-width: 0; }
+.harness-context-window > label { display: grid; gap: 8px; font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); }
+.harness-context-window > label > span { display: flex; flex-wrap: wrap; gap: 6px; }
+.harness-context-source { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
+.harness-context-source > button { padding: 4px 8px; font-size: var(--font-size-caption); }
+
+.app-notice-stack {
+  position: fixed;
+  right: 24px;
+  bottom: var(--notice-bottom, 24px);
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: min(480px, calc(100vw - 48px));
+  max-height: calc(100vh - var(--notice-bottom, 24px) - 24px);
+  max-height: calc(100dvh - var(--notice-bottom, 24px) - 24px);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  pointer-events: none;
+}
+.app-notice-entry {
+  flex: none;
+  min-width: 0;
+  pointer-events: auto;
+}
+.app-notice-entry .action-feedback.inline-notice {
+  margin: 0;
+  box-shadow: 0 4px 16px rgba(45, 42, 38, 0.18);
+}
+
+.agent-model-status {
+  display: block;
+  height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agent-codex-save-actions {
+  flex-wrap: nowrap;
+}
+
+.agent-codex-save-actions .primary-button {
+  width: auto;
+  min-width: 128px;
+  flex: none;
+}
+
+.agent-codex-save-actions button {
+  width: auto;
+  min-width: 0;
+  padding-inline: 12px;
+}
+
+@container agent-panel (max-width: 420px) {
+  .agent-subpage-tabs {
+    grid-auto-flow: row;
+    grid-auto-columns: unset;
+    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+    overflow-x: visible;
+  }
+
+  .agent-subpage-tabs button {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .agent-auth-segmented {
+    grid-template-columns: minmax(0, 1fr);
+    height: auto;
+  }
+
+  .agent-auth-segmented-button {
+    height: 32px;
+  }
+}
+
+.app-shell:has(.agents-page:not(.agents-page-embedded)) {
+  height: 100%;
+  min-height: 100%;
+}
+
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .workspace,
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .content {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .content {
+  overflow: hidden;
+}
+
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .agents-page:not(.agents-page-embedded) {
+  min-height: 0;
+  flex: 1 1 auto;
+  grid-template-rows: minmax(54px, auto) minmax(0, 1fr);
+  overflow: hidden;
+}
+
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-workbench {
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-client-list,
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-panel {
+  height: 100%;
+  min-height: 0;
+}
+
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-panel {
+  display: flex;
+  align-content: normal;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-subpage-tabs {
+  flex: none;
+}
+
+.app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-scroll-region {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  padding-right: 4px;
+  scrollbar-gutter: stable;
+}
+
+@media (min-width: 761px) {
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) .codex-session-list {
+    max-height: none;
+    overflow: visible;
+    overscroll-behavior: auto;
+    scrollbar-gutter: auto;
+  }
+}
+
+@container workspace (max-width: 760px) {
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-workbench {
+    grid-template-columns: 1fr;
+    grid-template-rows: 270px minmax(0, 1fr);
+  }
+
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-client-list {
+    height: auto;
+    max-height: none;
+  }
+}
+
+@media (max-width: 760px) {
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) {
+    height: auto;
+    min-height: 100%;
+  }
+
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) .content {
+    overflow: visible;
+  }
+
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agents-page:not(.agents-page-embedded) {
+    flex: none;
+    grid-template-rows: auto auto;
+    overflow: visible;
+  }
+
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-workbench {
+    height: auto;
+    grid-template-rows: 270px auto;
+    overflow: visible;
+  }
+
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-client-list {
+    height: 270px;
+    max-height: 270px;
+  }
+
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-panel {
+    height: auto;
+    overflow: visible;
+  }
+
+  .app-shell:has(.agents-page:not(.agents-page-embedded)) .agent-config-scroll-region {
+    flex: none;
+    overflow: visible;
+    padding-right: 0;
+    scrollbar-gutter: auto;
+  }
+}
diff --git a/src/styles/index.css b/src/styles/index.css
new file mode 100644
index 0000000..66ada7b
--- /dev/null
+++ b/src/styles/index.css
@@ -0,0 +1,3 @@
+@import '../styles.css';
+@import './feature-pages.css';
+@import './ui-refinements.css';
diff --git a/src/styles/ui-refinements.css b/src/styles/ui-refinements.css
new file mode 100644
index 0000000..bea7cce
--- /dev/null
+++ b/src/styles/ui-refinements.css
@@ -0,0 +1,238 @@
+.home-page-header,
+.config-page-header,
+.version-page-header {
+  min-height: 40px;
+}
+
+.home-page-header {
+  grid-column: 1 / -1;
+}
+
+@container workspace (min-width: 840px) {
+  .home-page {
+    grid-template-rows: auto minmax(0, 1fr);
+    grid-auto-rows: unset;
+  }
+
+  .home-page > .home-layout,
+  .home-page > .client-api-panel {
+    grid-row: 2;
+  }
+}
+
+.usage-page-navigation {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+
+.usage-page-navigation h1 {
+  margin: 0;
+  color: var(--text-primary);
+  font-size: var(--font-size-page-title);
+  line-height: var(--line-height-tight);
+  white-space: nowrap;
+}
+
+.usage-tab-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.usage-tab-panel > .usage-overview-layout,
+.usage-tab-panel > .usage-analysis-grid,
+.usage-tab-panel > .usage-events-panel,
+.usage-tab-panel > .usage-pricing-panel,
+.usage-tab-panel > .usage-data-management-panel,
+.usage-tab-panel > .usage-initial-loading {
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.usage-col-resizer:focus-visible {
+  outline: 2px solid var(--ui-accent);
+  outline-offset: -2px;
+}
+
+.client-api-card-heading {
+  width: 144px;
+  flex-basis: 144px;
+}
+
+.client-api-card-heading .client-api-format-tag,
+.client-api-card-heading span {
+  font-size: var(--font-size-caption);
+}
+
+.client-api-value-row code {
+  cursor: text;
+}
+
+.simple-mode-step-status-item {
+  width: 100%;
+  background: transparent;
+  font: inherit;
+  text-align: left;
+}
+
+.simple-mode-step-status-item:not(:disabled):hover {
+  border-color: color-mix(in srgb, var(--ui-accent) 32%, var(--theme-e3e1db));
+  background: var(--theme-f8f5ee);
+}
+
+.simple-mode-step-status-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.simple-mode-step-status-item.active:disabled {
+  opacity: 1;
+}
+
+@media (max-width: 900px) {
+  .app-shell:not(.app-shell-easy-mode) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .app-shell:not(.app-shell-easy-mode) .sidebar {
+    position: static;
+    display: grid;
+    grid-template-columns: minmax(190px, 1fr) auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    gap: 10px 14px;
+    width: 100%;
+    height: auto;
+    padding: 12px 14px;
+  }
+
+  .sidebar-brand {
+    grid-column: 1;
+    grid-row: 1;
+    min-height: 44px;
+    margin: 0;
+  }
+
+  .nav-section {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    display: flex;
+    min-width: 0;
+    overflow-x: auto;
+    padding: 0 0 3px;
+    scrollbar-width: thin;
+    scroll-snap-type: x proximity;
+  }
+
+  .nav-section button {
+    width: auto;
+    min-width: 120px;
+    grid-template-columns: 17px minmax(0, 1fr) auto;
+    scroll-snap-align: start;
+    text-align: left;
+  }
+
+  .sidebar-bottom {
+    grid-column: 2;
+    grid-row: 1;
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  .sidebar-easy-entry,
+  .sidebar-language,
+  .sidebar-contact {
+    width: auto;
+    flex: none;
+  }
+
+  .sidebar-easy-entry {
+    min-height: 36px;
+    padding-inline: 9px;
+  }
+
+  .sidebar-theme-selector {
+    width: auto;
+    flex: none;
+  }
+
+  .sidebar-theme-selector button {
+    min-height: 28px;
+    padding-inline: 7px;
+  }
+
+  .sidebar-language-trigger {
+    min-width: 104px;
+    min-height: 36px;
+  }
+
+  .sidebar-language-list {
+    right: 0;
+    bottom: auto;
+    left: auto;
+    top: calc(100% + 8px);
+    width: 180px;
+    box-shadow: 0 10px 28px rgba(45, 42, 38, 0.16);
+  }
+
+  .sidebar-contact {
+    display: grid;
+    width: 36px;
+    min-height: 36px;
+    grid-template-columns: 1fr;
+    padding: 0;
+    place-items: center;
+  }
+
+  .sidebar-contact span,
+  .sidebar-contact > svg:last-child {
+    display: none;
+  }
+
+  .content {
+    padding: 18px;
+  }
+}
+
+@media (max-width: 700px) {
+  .app-shell:not(.app-shell-easy-mode) .sidebar {
+    grid-template-columns: minmax(150px, 1fr) auto;
+  }
+
+  .sidebar-brand div > span {
+    display: none;
+  }
+
+  .sidebar-brand {
+    grid-template-columns: 38px minmax(0, 1fr);
+  }
+
+  .brand-mark {
+    width: 38px;
+    height: 38px;
+  }
+
+  .usage-page-navigation,
+  .usage-tabs,
+  .usage-topbar-actions {
+    width: 100%;
+  }
+
+  .usage-page-navigation {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 8px;
+  }
+}
diff --git a/tests/app-shell-accessibility-ui.cjs b/tests/app-shell-accessibility-ui.cjs
new file mode 100644
index 0000000..b1cd2b5
--- /dev/null
+++ b/tests/app-shell-accessibility-ui.cjs
@@ -0,0 +1,76 @@
+const { chromium } = require(process.env.PLAYWRIGHT_MODULE || 'playwright');
+const assert = require('node:assert/strict');
+const path = require('node:path');
+
+(async () => {
+  const { createServer } = await import('vite');
+  const react = (await import('@vitejs/plugin-react')).default;
+  const root = path.resolve(__dirname, '..');
+  const server = await createServer({ configFile: false, root, plugins: [react()], logLevel: 'error', server: { host: '127.0.0.1', port: 1421, strictPort: false } });
+  let browser;
+  try {
+    await server.listen();
+    const address = server.httpServer.address();
+    const base = `http://127.0.0.1:${typeof address === 'object' && address ? address.port : 1421}/`;
+    const response = await fetch(base);
+    assert.equal(response.ok, true, `Vite server failed at ${base}`);
+    await response.text();
+    const channel = process.env.PLAYWRIGHT_CHANNEL || (process.platform === 'win32' ? 'msedge' : undefined);
+    browser = await chromium.launch(channel ? { channel, headless: true } : { headless: true });
+    const page = await browser.newPage({ viewport: { width: 1280, height: 800 } });
+    await page.goto(`${base}?mock=running`, { waitUntil: 'commit' });
+    await page.locator('.app-shell').waitFor();
+
+    assert.equal(await page.getByRole('heading', { level: 1, name: '首页' }).count(), 1);
+
+    await page.getByRole('button', { name: '使用记录' }).click();
+    const tabs = page.getByRole('tab');
+    assert.equal(await tabs.count(), 5);
+    assert.deepEqual(await tabs.evaluateAll((elements) => elements
+      .map((element) => element.getAttribute('aria-controls'))
+      .filter((id) => !id || !document.getElementById(id))), []);
+    await tabs.first().focus();
+    await page.keyboard.press('ArrowRight');
+    assert.equal(await tabs.nth(1).getAttribute('aria-selected'), 'true');
+    await page.getByRole('tab', { name: /数据管理/ }).click();
+    assert.equal(await page.locator('.usage-filter-panel').count(), 0);
+
+    await page.getByRole('button', { name: '高级功能' }).click();
+    assert.equal(await page.locator('h1').count(), 1);
+    const configTabs = page.locator('.config-subpage-tabs').getByRole('tab');
+    assert.deepEqual(await configTabs.evaluateAll((elements) => elements
+      .map((element) => element.getAttribute('aria-controls'))
+      .filter((id) => !id || !document.getElementById(id))), []);
+    const addKey = page.getByRole('button', { name: /新增鉴权密钥/ }).first();
+    await addKey.focus();
+    await addKey.click();
+    const dialog = page.getByRole('dialog');
+    await dialog.waitFor();
+    for (let index = 0; index < 8; index += 1) {
+      await page.keyboard.press('Tab');
+      assert.equal(await page.evaluate(() => Boolean(document.activeElement?.closest('[role="dialog"]'))), true);
+    }
+    await page.keyboard.press('Escape');
+    await dialog.waitFor({ state: 'detached' });
+    await page.waitForFunction(() => document.activeElement?.getAttribute('aria-label') === '新增鉴权密钥');
+    assert.equal(await addKey.evaluate((element) => document.activeElement === element), true);
+
+    await page.setViewportSize({ width: 640, height: 600 });
+    await page.getByRole('button', { name: '首页' }).click();
+    const sidebarHeight = await page.locator('.sidebar').evaluate((element) => element.getBoundingClientRect().height);
+    assert.ok(sidebarHeight < 150, `compact sidebar is too tall: ${sidebarHeight}px`);
+
+    await page.locator('.sidebar-easy-entry').click();
+    const steps = page.locator('.simple-mode-step-status-item');
+    assert.equal(await steps.count(), 2);
+    assert.equal(await steps.first().evaluate((element) => element.tagName), 'BUTTON');
+
+    console.log('PASS: page hierarchy, tabs, contextual filters, modal focus and compact shell.');
+  } finally {
+    if (browser) await browser.close();
+    await server.close();
+  }
+})().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});
diff --git a/tests/browserMockRuntime.test.ts b/tests/browserMockRuntime.test.ts
index a94a5f7..13142ad 100644
--- a/tests/browserMockRuntime.test.ts
+++ b/tests/browserMockRuntime.test.ts
@@ -63,6 +63,14 @@ describe('browser mock runtime', () => {
     });
   });
 
+  test('uses normalized ratios for percentage-based usage metrics', async () => {
+    const runtime = createBrowserMockRuntime('running');
+    expect(await runtime.invoke('get_usage_overview')).toMatchObject({
+      successRate: 96.47,
+      cacheHitRate: 0.386,
+    });
+  });
+
   test('provides an explicit error scenario', async () => {
     const runtime = createBrowserMockRuntime('error');
     await expect(runtime.invoke('get_core_status')).rejects.toThrow('Browser Mock error scenario');
diff --git a/tests/fixtures/agent-backups.tsx b/tests/fixtures/agent-backups.tsx
index 1dfb466..a03fe72 100644
--- a/tests/fixtures/agent-backups.tsx
+++ b/tests/fixtures/agent-backups.tsx
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { mockIPC } from '@tauri-apps/api/mocks';
 import { AgentsPage } from '../../src/pages/AgentsPage';
 import { I18nProvider } from '../../src/i18n';
-import '../../src/styles.css';
+import '../../src/styles/index.css';
 const params = new URLSearchParams(location.search);
 if(params.has('reset-selections'))localStorage.removeItem('cpa-gui.agent-model-selections.v1');
 localStorage.setItem('easy-cli-proxy-api.locale',params.get('locale') || 'zh-CN');
diff --git a/tests/fixtures/auth-file-requests.tsx b/tests/fixtures/auth-file-requests.tsx
index cd8f6a4..0a4405a 100644
--- a/tests/fixtures/auth-file-requests.tsx
+++ b/tests/fixtures/auth-file-requests.tsx
@@ -5,7 +5,7 @@ import { I18nProvider } from '../../src/i18n';
 import { AuthFileManagementPage } from '../../src/pages/AuthFileManagementPage';
 import { QuotaPage } from '../../src/pages/QuotaPage';
 import { updateQuotaCache } from '../../src/services/quotaCache';
-import '../../src/styles.css';
+import '../../src/styles/index.css';
 
 const params = new URLSearchParams(location.search);
 localStorage.setItem('easy-cli-proxy-api.locale', params.get('locale') || 'zh-CN');
diff --git a/tests/fixtures/devin.tsx b/tests/fixtures/devin.tsx
index 07624b2..56ed19c 100644
--- a/tests/fixtures/devin.tsx
+++ b/tests/fixtures/devin.tsx
@@ -5,7 +5,7 @@ import { OAuthLoginPage } from '../../src/pages/ManagementPages';
 import { QuotaPage } from '../../src/pages/QuotaPage';
 import { AuthFileManagementPage } from '../../src/pages/AuthFileManagementPage';
 import { EasyModePage } from '../../src/pages/EasyModePage';
-import '../../src/styles.css';
+import '../../src/styles/index.css';
 
 const params = new URLSearchParams(location.search);
 const view = params.get('view');
diff --git a/tests/fixtures/model-alias-editor.tsx b/tests/fixtures/model-alias-editor.tsx
index 62479ec..7cbbddf 100644
--- a/tests/fixtures/model-alias-editor.tsx
+++ b/tests/fixtures/model-alias-editor.tsx
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { mockIPC } from '@tauri-apps/api/mocks';
 import { I18nProvider } from '../../src/i18n';
 import { ThinkingAliasesPage } from '../../src/pages/ThinkingAliasesPage';
-import '../../src/styles.css';
+import '../../src/styles/index.css';
 
 localStorage.setItem('easy-cli-proxy-api.locale', 'en');
 const calls: { cmd: string; args: Record<string, unknown> }[] = [];
diff --git a/tests/fixtures/model-selection.tsx b/tests/fixtures/model-selection.tsx
index fd70fe7..0e115a9 100644
--- a/tests/fixtures/model-selection.tsx
+++ b/tests/fixtures/model-selection.tsx
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { mockIPC } from '@tauri-apps/api/mocks';
 import { I18nProvider } from '../../src/i18n';
 import { ApiProviderDialog, type ProviderDraft } from '../../src/pages/ApiAccessPage';
-import '../../src/styles.css';
+import '../../src/styles/index.css';
 
 const params = new URLSearchParams(location.search);
 const scenario = params.get('scenario') ?? 'saved';
diff --git a/tests/fixtures/operation-feedback.tsx b/tests/fixtures/operation-feedback.tsx
index bf574a5..34480d8 100644
--- a/tests/fixtures/operation-feedback.tsx
+++ b/tests/fixtures/operation-feedback.tsx
@@ -7,7 +7,7 @@ import { UsageRecordsPage } from '../../src/pages/UsageRecordsPage';
 import { AgentConfigurationFeedback } from '../../src/pages/AgentControls';
 import { useConfirmation } from '../../src/components/ConfirmationDialog';
 import { QuotaActionFeedback } from '../../src/components/QuotaActionFeedback';
-import '../../src/styles.css';
+import '../../src/styles/index.css';
 
 const params = new URLSearchParams(location.search);
 localStorage.setItem('easy-cli-proxy-api.locale', params.get('locale') ?? 'zh-CN');
diff --git a/tests/fixtures/provider-duplicates.tsx b/tests/fixtures/provider-duplicates.tsx
index 9784f8f..6bc2d28 100644
--- a/tests/fixtures/provider-duplicates.tsx
+++ b/tests/fixtures/provider-duplicates.tsx
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { mockIPC } from '@tauri-apps/api/mocks';
 import { I18nProvider } from '../../src/i18n';
 import { ApiAccessPage, providerRemarkIdentity, type ApiAccessRemarkLocator, type ProviderSection } from '../../src/pages/ApiAccessPage';
-import '../../src/styles.css';
+import '../../src/styles/index.css';
 
 localStorage.setItem('easy-cli-proxy-api.locale', 'en');
 const fixture = window as typeof window & {
diff --git a/tests/fixtures/theme.tsx b/tests/fixtures/theme.tsx
index c831246..acb8e41 100644
--- a/tests/fixtures/theme.tsx
+++ b/tests/fixtures/theme.tsx
@@ -6,7 +6,7 @@ import App from '../../src/App';
 import { I18nProvider } from '../../src/i18n';
 import { initializeTheme } from '../../src/theme';
 import type { AppTheme } from '../../src/themeController';
-import '../../src/styles.css';
+import '../../src/styles/index.css';
 
 const params = new URLSearchParams(location.search);
 const platform = params.get('platform') || 'windows';
diff --git a/tests/fixtures/usage-layout.tsx b/tests/fixtures/usage-layout.tsx
index 0977764..2774b06 100644
--- a/tests/fixtures/usage-layout.tsx
+++ b/tests/fixtures/usage-layout.tsx
@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { mockIPC } from '@tauri-apps/api/mocks';
 import { I18nProvider } from '../../src/i18n';
 import { UsageRecordsPage } from '../../src/pages/UsageRecordsPage';
-import '../../src/styles.css';
+import '../../src/styles/index.css';
 
 const params = new URLSearchParams(location.search);
 localStorage.setItem('easy-cli-proxy-api.locale', params.get('locale') || 'zh-TW');
diff --git a/tests/textContrast.test.ts b/tests/textContrast.test.ts
index 5da7cc7..58f4735 100644
--- a/tests/textContrast.test.ts
+++ b/tests/textContrast.test.ts
@@ -2,7 +2,11 @@ import { describe, expect, it } from 'bun:test';
 import { readFileSync } from 'node:fs';
 import postcss from 'postcss';
 
-const stylesheet = postcss.parse(readFileSync(new URL('../src/styles.css', import.meta.url), 'utf8'));
+const stylesheet = postcss.parse([
+  '../src/styles.css',
+  '../src/styles/feature-pages.css',
+  '../src/styles/ui-refinements.css',
+].map((file) => readFileSync(new URL(file, import.meta.url), 'utf8')).join('\n'));
 const aliases: Record<string, string> = {
   '--theme-4b4742': '--text-secondary',
   '--theme-59544d': '--text-secondary',
diff --git a/tests/uiLocalization.test.ts b/tests/uiLocalization.test.ts
index 2cc9c21..5044b82 100644
--- a/tests/uiLocalization.test.ts
+++ b/tests/uiLocalization.test.ts
@@ -15,8 +15,16 @@ const technicalText = new Set([
   'headers',
   'ms',
   'note',
+  'Models.dev',
+  'LiteLLM',
+]);
+const technicalPlaceholders = new Set([
+  '1h',
+  'sk-...',
+  'gpt-5.6-terra',
+  'https://...',
+  'socks5://127.0.0.1:1080',
 ]);
-const technicalPlaceholders = new Set(['1h', 'sk-...', 'gpt-5.6-terra', 'https://...']);
 
 function componentFiles(directory: string): string[] {
   return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {