diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 075c5b4..d32f36b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,12 +1,14 @@
-import { FormEvent, useCallback, useEffect, useState } from 'react'
+import { ChangeEvent, FormEvent, KeyboardEvent, useCallback, useEffect, useId, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
   applySync,
   bindAliasTarget,
   deleteAlias,
   deleteProvider,
+  exportConfig,
   getMeta,
   getOverview,
+  importConfig,
   importProviders,
   listAliases,
   listProviders,
@@ -68,6 +70,12 @@ type AliasFormState = {
 type TabKey = 'overview' | 'providers' | 'aliases' | 'sync' | 'settings'
 type FilterState = 'all' | 'enabled' | 'disabled'
 type ResolvedTheme = 'light' | 'dark'
+type ModalKey = 'provider-form' | 'provider-import' | 'alias-form' | 'alias-target' | null
+type ConfigImportMode = 'text' | 'file'
+type ConfirmIntent =
+  | { kind: 'delete-provider'; id: string }
+  | { kind: 'delete-alias'; alias: string }
+  | { kind: 'unbind-target'; alias: string; provider: string; model: string }
 
 const tabs: TabKey[] = ['overview', 'providers', 'aliases', 'sync', 'settings']
 
@@ -118,6 +126,16 @@ function pretty(value: unknown): string {
   return JSON.stringify(value, null, 2)
 }
 
+function overviewDebugSnapshot(overview: Overview | null) {
+  if (!overview) {
+    return null
+  }
+  return {
+    ...overview,
+    configPath: undefined,
+  }
+}
+
 function formatError(error: unknown): string {
   return error instanceof Error ? error.message : String(error)
 }
@@ -198,6 +216,31 @@ function resolveThemePreference(theme: ThemePreference, systemTheme: ResolvedThe
   return systemTheme
 }
 
+function configFileName(configPath: string): string {
+  const parts = configPath.split(/[/\\]/).filter(Boolean)
+  return parts[parts.length - 1] || 'ocswitch-config.json'
+}
+
+function downloadTextFile(filename: string, content: string) {
+  const blob = new Blob([content], { type: 'application/json;charset=utf-8' })
+  const url = URL.createObjectURL(blob)
+  const link = document.createElement('a')
+  link.href = url
+  link.download = filename
+  document.body.append(link)
+  link.click()
+  link.remove()
+  URL.revokeObjectURL(url)
+}
+
+function focusableElements(root: HTMLElement): HTMLElement[] {
+  return Array.from(
+    root.querySelectorAll<HTMLElement>(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    ),
+  )
+}
+
 function providerMatches(provider: ProviderView, query: string, filter: FilterState): boolean {
   if (filter === 'enabled' && provider.disabled) {
     return false
@@ -251,6 +294,12 @@ export default function App() {
   const [editingAliasId, setEditingAliasId] = useState('')
   const [systemTheme, setSystemTheme] = useState<ResolvedTheme>('dark')
   const [systemLanguage, setSystemLanguage] = useState('en-US')
+  const [activeModal, setActiveModal] = useState<ModalKey>(null)
+  const [configTransferStatus, setConfigTransferStatus] = useState('')
+  const [configImportMode, setConfigImportMode] = useState<ConfigImportMode>('text')
+  const [configImportText, setConfigImportText] = useState('')
+  const [configImportFileName, setConfigImportFileName] = useState('')
+  const [confirmIntent, setConfirmIntent] = useState<ConfirmIntent | null>(null)
 
   const refreshAll = useCallback(async () => {
     setLoading(true)
@@ -335,6 +384,18 @@ export default function App() {
     void i18n.changeLanguage(resolvedLanguage)
   }, [resolvedLanguage])
 
+  useEffect(() => {
+    if (!activeModal && !confirmIntent) {
+      return
+    }
+    const modal = document.querySelector<HTMLElement>('.modal-card')
+    if (!modal) {
+      return
+    }
+    const [firstFocusable] = focusableElements(modal)
+    ;(firstFocusable || modal).focus()
+  }, [activeModal, confirmIntent])
+
   function selectTab(tab: TabKey) {
     window.location.hash = tab
   }
@@ -349,6 +410,71 @@ export default function App() {
     setAliasForm(emptyAliasForm)
   }
 
+  function closeModal() {
+    setActiveModal(null)
+  }
+
+  function closeConfirmDialog() {
+    setConfirmIntent(null)
+  }
+
+  function openProviderCreateModal() {
+    resetProviderForm()
+    setActiveModal('provider-form')
+  }
+
+  function openProviderImportModal() {
+    setActiveModal('provider-import')
+  }
+
+  function openAliasCreateModal() {
+    resetAliasForm()
+    setActiveModal('alias-form')
+  }
+
+  function openAliasTargetModal(alias?: string) {
+    setTargetForm({ ...emptyTargetForm, alias: alias || '' })
+    setActiveModal('alias-target')
+  }
+
+  function trapModalFocus(event: KeyboardEvent<HTMLDivElement>) {
+    if (event.key !== 'Tab') {
+      return
+    }
+    const focusables = focusableElements(event.currentTarget)
+    if (focusables.length === 0) {
+      event.preventDefault()
+      event.currentTarget.focus()
+      return
+    }
+    const first = focusables[0]
+    const last = focusables[focusables.length - 1]
+    const active = document.activeElement
+    if (event.shiftKey && active === first) {
+      event.preventDefault()
+      last.focus()
+      return
+    }
+    if (!event.shiftKey && active === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
+  function onModalKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    trapModalFocus(event)
+    if (event.key === 'Escape') {
+      closeModal()
+    }
+  }
+
+  function onConfirmKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    trapModalFocus(event)
+    if (event.key === 'Escape') {
+      closeConfirmDialog()
+    }
+  }
+
   async function onSavePrefs(event: FormEvent) {
     event.preventDefault()
     setPrefsStatus(i18n.t('messages.saving'))
@@ -439,6 +565,7 @@ export default function App() {
       }
       const result = await saveProvider(input)
       resetProviderForm()
+      closeModal()
       setProviderStatus(providerSaveStatus(result))
       await refreshAll()
     } catch (error) {
@@ -454,6 +581,8 @@ export default function App() {
         sourcePath: providerImportForm.sourcePath?.trim(),
         overwrite: providerImportForm.overwrite,
       })
+      setProviderImportForm(emptyProviderImport)
+      closeModal()
       setProviderStatus(providerImportStatus(result))
       await refreshAll()
     } catch (error) {
@@ -474,6 +603,7 @@ export default function App() {
       clearHeaders: false,
     })
     setProviderStatus(i18n.t('providers.statusEditing', { id: provider.id }))
+    setActiveModal('provider-form')
   }
 
   async function onToggleProvider(provider: ProviderView) {
@@ -516,6 +646,7 @@ export default function App() {
       }
       await saveAlias(input)
       resetAliasForm()
+      closeModal()
       setAliasStatus(i18n.t('aliases.statusSaved', { alias: input.alias }))
       await refreshAll()
     } catch (error) {
@@ -532,6 +663,7 @@ export default function App() {
     })
     setTargetForm((current) => ({ ...current, alias: alias.alias }))
     setAliasStatus(i18n.t('aliases.statusEditing', { alias: alias.alias }))
+    setActiveModal('alias-form')
   }
 
   async function onDeleteAlias(alias: string) {
@@ -560,6 +692,7 @@ export default function App() {
       }
       await bindAliasTarget(input)
       setTargetForm((current) => ({ ...emptyTargetForm, alias: current.alias }))
+      closeModal()
       setAliasStatus(i18n.t('aliases.statusBound', input))
       await refreshAll()
     } catch (error) {
@@ -593,19 +726,114 @@ export default function App() {
     }
   }
 
+  async function onToggleProxy() {
+    if (overview?.proxy.running) {
+      await onStopProxy()
+      return
+    }
+    await onStartProxy()
+  }
+
+  async function onExportConfig() {
+    setConfigTransferStatus(i18n.t('messages.running'))
+    try {
+      const result = await exportConfig()
+      downloadTextFile(configFileName(result.configPath), result.content)
+      setConfigTransferStatus(i18n.t('settings.exportDone', { path: result.configPath }))
+    } catch (error) {
+      setConfigTransferStatus(formatError(error))
+    }
+  }
+
+  async function onImportConfig() {
+    const content = configImportText.trim()
+    if (!content) {
+      setConfigTransferStatus(i18n.t('settings.importEmpty'))
+      return
+    }
+    setConfigTransferStatus(i18n.t('messages.applying'))
+    try {
+      const result = await importConfig({ content })
+      setConfigTransferStatus(withWarnings(i18n.t('settings.importDone', { path: result.configPath }), result.warnings))
+      setConfigImportText('')
+      setConfigImportFileName('')
+      await refreshAll()
+    } catch (error) {
+      setConfigTransferStatus(formatError(error))
+    }
+  }
+
+  async function onSelectConfigFile(event: ChangeEvent<HTMLInputElement>) {
+    const file = event.target.files?.[0]
+    if (!file) {
+      return
+    }
+    try {
+      const text = await file.text()
+      setConfigImportText(text)
+      setConfigImportFileName(file.name)
+      setConfigTransferStatus(i18n.t('settings.fileLoaded', { name: file.name }))
+    } catch (error) {
+      setConfigTransferStatus(formatError(error))
+    } finally {
+      event.target.value = ''
+    }
+  }
+
+  async function onConfirmAction() {
+    const intent = confirmIntent
+    if (!intent) {
+      return
+    }
+    closeConfirmDialog()
+    if (intent.kind === 'delete-provider') {
+      await onDeleteProvider(intent.id)
+      return
+    }
+    if (intent.kind === 'delete-alias') {
+      await onDeleteAlias(intent.alias)
+      return
+    }
+    await onUnbindTarget(intent.alias, intent.provider, intent.model)
+  }
+
+  const confirmTitle = confirmIntent
+    ? confirmIntent.kind === 'delete-provider'
+      ? t('confirm.deleteProviderTitle')
+      : confirmIntent.kind === 'delete-alias'
+        ? t('confirm.deleteAliasTitle')
+        : t('confirm.unbindTargetTitle')
+    : ''
+
+  const confirmMessage = confirmIntent
+    ? confirmIntent.kind === 'delete-provider'
+      ? t('messages.confirmDeleteProvider', { id: confirmIntent.id })
+      : confirmIntent.kind === 'delete-alias'
+        ? t('messages.confirmDeleteAlias', { alias: confirmIntent.alias })
+        : t('messages.confirmUnbindTarget', {
+            alias: confirmIntent.alias,
+            provider: confirmIntent.provider,
+            model: confirmIntent.model,
+          })
+    : ''
+
+  const importModeLabelId = useId()
+  const providerFormTitleId = useId()
+  const providerImportTitleId = useId()
+  const aliasFormTitleId = useId()
+  const aliasTargetTitleId = useId()
+  const confirmTitleId = useId()
+
   return (
     <div className="app-shell">
       <aside className="sidebar">
         <div className="sidebar-brand">
+          <div className="sidebar-brand-line" />
           <p className="eyebrow">{t('app.eyebrow')}</p>
-          <h1>{t('app.title')}</h1>
-          <p className="subtle">
-            {t('app.subtitle', {
-              version: meta.version || t('app.dev'),
-              shell: meta.shell,
-              path: overview?.configPath || t('app.loadingConfig'),
-            })}
-          </p>
+          <h1>{t('app.brand')}</h1>
+          <div className="brand-meta">
+            <span className="badge">v{meta.version || t('app.dev')}</span>
+          </div>
         </div>
 
         <nav className="nav-list" aria-label="Primary">
@@ -617,45 +845,47 @@ export default function App() {
               onClick={() => selectTab(tab)}
             >
               <span className="nav-title">{t(`nav.${tab}.title`)}</span>
-              <span className="nav-description">{t(`nav.${tab}.description`)}</span>
             </button>
           ))}
         </nav>
-
-        <section className="sidebar-panel">
-          <div className="sidebar-panel-header">
-            <span>{t('overview.statsTitle')}</span>
-            <span className={`badge ${overview?.proxy.running ? 'live' : 'idle'}`}>
-              {overview?.proxy.running ? t('status.proxyRunning') : t('status.proxyIdle')}
-            </span>
-          </div>
-          <div className="sidebar-stats">
-            {stats.length === 0 ? <span className="subtle">{t('messages.loading')}</span> : null}
-            {stats.map(([label, value]) => (
-              <div className="sidebar-stat" key={label}>
-                <span className="stat-label">{t(label)}</span>
-                <strong>{value}</strong>
-              </div>
-            ))}
-          </div>
-        </section>
       </aside>
 
       <main className="workspace">
         <header className="workspace-header">
-          <div>
+          <div className="hero-copy">
             <p className="section-kicker">{t(`nav.${activeTab}.title`)}</p>
             <h2>{t(`nav.${activeTab}.title`)}</h2>
             <p className="subtle">{t(`nav.${activeTab}.description`)}</p>
           </div>
-          <div className="hero-actions">
-            <button type="button" className="primary" onClick={() => void refreshAll()} disabled={loading}>
-              {t('actions.refresh')}
-            </button>
-            <button type="button" onClick={() => void onRunDoctor()}>
-              {t('actions.runDoctor')}
-            </button>
-          </div>
+          {activeTab === 'overview' ? (
+            <div className="hero-actions-wrap">
+              <div className="hero-meta">
+                <div className="hero-meta-card hero-status-card">
+                  <span className="meta-label">{t('overview.proxy')}</span>
+                  <strong>{overview?.proxy.running ? t('status.proxyRunning') : t('status.proxyIdle')}</strong>
+                </div>
+                <div className="hero-meta-card">
+                  <span className="meta-label">{t('overview.lastError')}</span>
+                  <strong>{overview?.proxy.lastError || '-'}</strong>
+                </div>
+              </div>
+              <div className="hero-actions">
+                <button
+                  type="button"
+                  className={overview?.proxy.running ? 'danger' : 'primary'}
+                  onClick={() => void onToggleProxy()}
+                >
+                  {overview?.proxy.running ? t('actions.stopProxy') : t('actions.startProxy')}
+                </button>
+                <button type="button" onClick={() => void refreshAll()} disabled={loading}>
+                  {t('actions.refresh')}
+                </button>
+                <button type="button" onClick={() => void onRunDoctor()}>
+                  {t('actions.runDoctor')}
+                </button>
+              </div>
+            </div>
+          ) : null}
         </header>
 
         {activeTab === 'overview' ? (
@@ -688,11 +918,12 @@ export default function App() {
                 </div>
               </div>
               <div className="action-grid">
-                <button type="button" className="primary" onClick={() => void onStartProxy()}>
-                  {t('actions.startProxy')}
-                </button>
-                <button type="button" onClick={() => void onStopProxy()}>
-                  {t('actions.stopProxy')}
+                <button
+                  type="button"
+                  className={overview?.proxy.running ? 'danger' : 'primary'}
+                  onClick={() => void onToggleProxy()}
+                >
+                  {overview?.proxy.running ? t('actions.stopProxy') : t('actions.startProxy')}
                 </button>
                 <button type="button" onClick={() => void onRunDoctor()}>
                   {t('actions.runDoctor')}
@@ -707,7 +938,7 @@ export default function App() {
               <div className="panel-header">
                 <div>
                   <h3>{t('overview.environmentTitle')}</h3>
-                  <p className="subtle">{overview?.configPath || t('messages.loading')}</p>
+                  <p className="subtle">{t('overview.environmentSubtitle')}</p>
                 </div>
               </div>
               <dl className="info-grid">
@@ -715,14 +946,6 @@ export default function App() {
                   <dt>{t('overview.version')}</dt>
                   <dd>{meta.version || t('app.dev')}</dd>
                 </div>
-                <div>
-                  <dt>{t('overview.shell')}</dt>
-                  <dd>{meta.shell}</dd>
-                </div>
-                <div>
-                  <dt>{t('overview.configPath')}</dt>
-                  <dd>{overview?.configPath || t('app.loadingConfig')}</dd>
-                </div>
                 <div>
                   <dt>{t('overview.startedAt')}</dt>
                   <dd>{overview?.proxy.startedAt ? String(overview.proxy.startedAt) : '-'}</dd>
@@ -769,7 +992,7 @@ export default function App() {
               </div>
               <details className="details-toggle">
                 <summary>{t('overview.debugSummary')}</summary>
-                <pre className="details">{overview ? pretty(overview) : t('messages.loading')}</pre>
+                <pre className="details">{overview ? pretty(overviewDebugSnapshot(overview)) : t('messages.loading')}</pre>
               </details>
             </article>
           </section>
@@ -783,210 +1006,105 @@ export default function App() {
                   <h3>{t('providers.title')}</h3>
                   <p className="subtle">{t('providers.subtitle')}</p>
                 </div>
-                <span className="subtle">
-                  {providerStatus ||
-                    t('providers.listCount', { shown: filteredProviders.length, total: providers.length })}
-                </span>
+                <div className="toolbar">
+                  <span className="subtle">
+                    {providerStatus ||
+                      t('providers.listCount', { shown: filteredProviders.length, total: providers.length })}
+                  </span>
+                  <button type="button" className="primary" onClick={openProviderCreateModal}>
+                    {t('actions.newProvider')}
+                  </button>
+                  <button type="button" onClick={openProviderImportModal}>
+                    {t('actions.import')}
+                  </button>
+                </div>
               </div>
 
-              <div className="split-view">
-                <div className="editor-column stack-blocks">
-                  <section className="subpanel">
-                    <div className="subpanel-header">
-                      <h4>
-                        {editingProviderId
-                          ? t('providers.formEditTitle', { id: editingProviderId })
-                          : t('providers.formCreateTitle')}
-                      </h4>
-                      <button type="button" onClick={resetProviderForm}>
-                        {editingProviderId ? t('actions.newProvider') : t('actions.reset')}
-                      </button>
-                    </div>
-                    <form className="stack" onSubmit={(event) => void onSaveProvider(event)}>
-                      <label>
-                        <span>{t('providers.id')}</span>
-                        <input
-                          type="text"
-                          value={providerForm.id}
-                          onChange={(event) => setProviderForm((current) => ({ ...current, id: event.target.value }))}
-                          placeholder={t('providers.placeholderId')}
-                        />
-                      </label>
-                      <label>
-                        <span>{t('providers.name')}</span>
-                        <input
-                          type="text"
-                          value={providerForm.name}
-                          onChange={(event) => setProviderForm((current) => ({ ...current, name: event.target.value }))}
-                          placeholder={t('providers.placeholderName')}
-                        />
-                      </label>
-                      <label>
-                        <span>{t('providers.baseUrl')}</span>
-                        <input
-                          type="text"
-                          value={providerForm.baseUrl}
-                          onChange={(event) =>
-                            setProviderForm((current) => ({ ...current, baseUrl: event.target.value }))
-                          }
-                          placeholder={t('providers.placeholderBaseUrl')}
-                        />
-                      </label>
-                      <label>
-                        <span>{t('providers.apiKey')}</span>
-                        <input
-                          type="text"
-                          value={providerForm.apiKey}
-                          onChange={(event) => setProviderForm((current) => ({ ...current, apiKey: event.target.value }))}
-                          placeholder={t('providers.placeholderApiKey')}
-                        />
-                      </label>
-                      <label>
-                        <span>{t('providers.headers')}</span>
-                        <textarea
-                          value={providerForm.headersText}
-                          onChange={(event) =>
-                            setProviderForm((current) => ({ ...current, headersText: event.target.value }))
-                          }
-                          placeholder={t('providers.placeholderHeaders')}
-                          rows={4}
-                        />
-                      </label>
-                      <label className="checkbox-row">
-                        <input
-                          type="checkbox"
-                          checked={providerForm.disabled}
-                          onChange={(event) =>
-                            setProviderForm((current) => ({ ...current, disabled: event.target.checked }))
-                          }
-                        />
-                        <span>{t('providers.saveDisabled')}</span>
-                      </label>
-                      <label className="checkbox-row">
-                        <input
-                          type="checkbox"
-                          checked={providerForm.skipModels}
-                          onChange={(event) =>
-                            setProviderForm((current) => ({ ...current, skipModels: event.target.checked }))
-                          }
-                        />
-                        <span>{t('providers.skipModels')}</span>
-                      </label>
-                      <label className="checkbox-row">
-                        <input
-                          type="checkbox"
-                          checked={providerForm.clearHeaders}
-                          onChange={(event) =>
-                            setProviderForm((current) => ({ ...current, clearHeaders: event.target.checked }))
-                          }
-                        />
-                        <span>{t('providers.clearHeaders')}</span>
-                      </label>
-                      <div className="toolbar">
-                        <button type="submit" className="primary">
-                          {t('actions.save')}
-                        </button>
-                        <button type="button" onClick={resetProviderForm}>
-                          {t('actions.reset')}
-                        </button>
-                      </div>
-                    </form>
-                  </section>
-
-                  <section className="subpanel">
-                    <div className="subpanel-header">
-                      <h4>{t('providers.importTitle')}</h4>
-                    </div>
-                    <form className="stack" onSubmit={(event) => void onImportProviders(event)}>
-                      <label>
-                        <span>{t('providers.sourcePath')}</span>
-                        <input
-                          type="text"
-                          value={providerImportForm.sourcePath || ''}
-                          onChange={(event) =>
-                            setProviderImportForm((current) => ({ ...current, sourcePath: event.target.value }))
-                          }
-                          placeholder={t('providers.placeholderSourcePath')}
-                        />
-                      </label>
-                      <label className="checkbox-row">
-                        <input
-                          type="checkbox"
-                          checked={providerImportForm.overwrite}
-                          onChange={(event) =>
-                            setProviderImportForm((current) => ({ ...current, overwrite: event.target.checked }))
-                          }
-                        />
-                        <span>{t('providers.overwrite')}</span>
-                      </label>
-                      <button type="submit">{t('actions.import')}</button>
-                    </form>
-                  </section>
+              <div className="list-column">
+                <div className="list-toolbar">
+                  <label>
+                    <span>{t('providers.search')}</span>
+                    <input
+                      type="text"
+                      value={providerQuery}
+                      onChange={(event) => setProviderQuery(event.target.value)}
+                      placeholder={t('providers.searchPlaceholder')}
+                    />
+                  </label>
+                  <label>
+                    <span>{t('providers.filter')}</span>
+                    <select
+                      value={providerFilter}
+                      onChange={(event) => setProviderFilter(event.target.value as FilterState)}
+                    >
+                      <option value="all">{t('providers.filterAll')}</option>
+                      <option value="enabled">{t('providers.filterEnabled')}</option>
+                      <option value="disabled">{t('providers.filterDisabled')}</option>
+                    </select>
+                  </label>
                 </div>
 
-                <div className="list-column">
-                  <div className="list-toolbar">
-                    <label>
-                      <span>{t('providers.search')}</span>
-                      <input
-                        type="text"
-                        value={providerQuery}
-                        onChange={(event) => setProviderQuery(event.target.value)}
-                        placeholder={t('providers.searchPlaceholder')}
-                      />
-                    </label>
-                    <label>
-                      <span>{t('providers.filter')}</span>
-                      <select
-                        value={providerFilter}
-                        onChange={(event) => setProviderFilter(event.target.value as FilterState)}
-                      >
-                        <option value="all">{t('providers.filterAll')}</option>
-                        <option value="enabled">{t('providers.filterEnabled')}</option>
-                        <option value="disabled">{t('providers.filterDisabled')}</option>
-                      </select>
-                    </label>
-                  </div>
-
-                  <div className="scroll-list">
-                    {providers.length === 0 ? <p className="subtle">{t('providers.empty')}</p> : null}
-                    {providers.length > 0 && filteredProviders.length === 0 ? (
-                      <p className="subtle">{t('providers.noMatches')}</p>
-                    ) : null}
-                    {filteredProviders.map((provider) => (
-                      <article className="item-card" key={provider.id}>
-                        <div className="item-heading">
-                          <div>
-                            <strong>{provider.name || provider.id}</strong>
-                            <code>{provider.id}</code>
-                          </div>
-                          <span className={`badge ${provider.disabled ? 'idle' : 'live'}`}>
-                            {provider.disabled ? t('status.disabled') : t('status.enabled')}
-                          </span>
+                <div className="scroll-list card-grid-list">
+                  {providers.length === 0 ? (
+                    <article className="empty-card">
+                      <span className="empty-kicker">{t('providers.title')}</span>
+                      <h4>{t('providers.empty')}</h4>
+                      <p className="subtle">{t('providers.emptyHint')}</p>
+                      <div className="toolbar">
+                        <button type="button" className="primary" onClick={openProviderCreateModal}>
+                          {t('actions.newProvider')}
+                        </button>
+                        <button type="button" onClick={openProviderImportModal}>
+                          {t('actions.import')}
+                        </button>
+                      </div>
+                    </article>
+                  ) : null}
+                  {providers.length > 0 && filteredProviders.length === 0 ? (
+                    <article className="empty-card compact-empty">
+                      <h4>{t('providers.noMatches')}</h4>
+                      <p className="subtle">{t('providers.noMatchesHint')}</p>
+                    </article>
+                  ) : null}
+                  {filteredProviders.map((provider) => (
+                    <article className="item-card" key={provider.id}>
+                      <div className="item-heading">
+                        <div className="item-heading-main">
+                          <strong>{provider.name || provider.id}</strong>
+                          <code>{provider.id}</code>
                         </div>
-                        <div className="item-grid">
-                          <div>
-                            <span className="meta-label">{t('providers.baseUrl')}</span>
-                            <code>{provider.baseUrl}</code>
-                          </div>
-                          <div>
-                            <span className="meta-label">{t('providers.apiKeyMasked')}</span>
-                            <span>{provider.apiKeyMasked || t('providers.apiKeyNotSet')}</span>
-                          </div>
-                          <div>
-                            <span className="meta-label">{t('providers.headers')}</span>
-                            <span>{headersTextFromMap(provider.headers) || t('providers.headersNone')}</span>
-                          </div>
-                          <div>
-                            <span className="meta-label">{t('providers.models')}</span>
-                            <span>{provider.models?.join(', ') || t('providers.modelsNone')}</span>
-                          </div>
+                        <span className={`badge ${provider.disabled ? 'idle' : 'live'}`}>
+                          {provider.disabled ? t('status.disabled') : t('status.enabled')}
+                        </span>
+                      </div>
+                      <div className="item-summary">
+                        <span>{provider.baseUrl}</span>
+                        <span>{t('providers.modelsCount', { count: provider.models?.length || 0 })}</span>
+                      </div>
+                      <div className="item-grid">
+                        <div>
+                          <span className="meta-label">{t('providers.baseUrl')}</span>
+                          <code>{provider.baseUrl}</code>
                         </div>
-                        {provider.modelsSource ? (
-                          <p className="subtle small-text">
-                            {t('providers.sourceLabel')}: {provider.modelsSource}
-                          </p>
-                        ) : null}
+                        <div>
+                          <span className="meta-label">{t('providers.apiKeyMasked')}</span>
+                          <span>{provider.apiKeyMasked || t('providers.apiKeyNotSet')}</span>
+                        </div>
+                        <div>
+                          <span className="meta-label">{t('providers.headers')}</span>
+                          <span>{headersTextFromMap(provider.headers) || t('providers.headersNone')}</span>
+                        </div>
+                        <div>
+                          <span className="meta-label">{t('providers.models')}</span>
+                          <span>{provider.models?.join(', ') || t('providers.modelsNone')}</span>
+                        </div>
+                      </div>
+                      {provider.modelsSource ? (
+                        <div className="inline-pills">
+                          <span className="pill">{t('providers.sourceLabel')}: {provider.modelsSource}</span>
+                        </div>
+                      ) : null}
+                      <div className="card-actions">
                         <div className="toolbar">
                           <button type="button" onClick={() => onEditProvider(provider)}>
                             {t('actions.edit')}
@@ -994,13 +1112,19 @@ export default function App() {
                           <button type="button" onClick={() => void onToggleProvider(provider)}>
                             {provider.disabled ? t('actions.enable') : t('actions.disable')}
                           </button>
-                          <button type="button" onClick={() => void onDeleteProvider(provider.id)}>
+                        </div>
+                        <div className="toolbar toolbar-end">
+                          <button
+                            type="button"
+                            className="danger ghost-danger"
+                            onClick={() => setConfirmIntent({ kind: 'delete-provider', id: provider.id })}
+                          >
                             {t('actions.delete')}
                           </button>
                         </div>
-                      </article>
-                    ))}
-                  </div>
+                      </div>
+                    </article>
+                  ))}
                 </div>
               </div>
             </article>
@@ -1015,201 +1139,130 @@ export default function App() {
                   <h3>{t('aliases.title')}</h3>
                   <p className="subtle">{t('aliases.subtitle')}</p>
                 </div>
-                <span className="subtle">
-                  {aliasStatus || t('aliases.listCount', { shown: filteredAliases.length, total: aliases.length })}
-                </span>
+                <div className="toolbar">
+                  <span className="subtle">
+                    {aliasStatus || t('aliases.listCount', { shown: filteredAliases.length, total: aliases.length })}
+                  </span>
+                  <button type="button" className="primary" onClick={openAliasCreateModal}>
+                    {t('actions.newAlias')}
+                  </button>
+                  <button type="button" onClick={() => openAliasTargetModal()}>
+                    {t('actions.bind')}
+                  </button>
+                </div>
               </div>
 
-              <div className="split-view">
-                <div className="editor-column stack-blocks">
-                  <section className="subpanel">
-                    <div className="subpanel-header">
-                      <h4>
-                        {editingAliasId
-                          ? t('aliases.formEditTitle', { alias: editingAliasId })
-                          : t('aliases.formCreateTitle')}
-                      </h4>
-                      <button type="button" onClick={resetAliasForm}>
-                        {editingAliasId ? t('actions.newAlias') : t('actions.reset')}
-                      </button>
-                    </div>
-                    <form className="stack" onSubmit={(event) => void onSaveAlias(event)}>
-                      <label>
-                        <span>{t('aliases.alias')}</span>
-                        <input
-                          type="text"
-                          value={aliasForm.alias}
-                          onChange={(event) => setAliasForm((current) => ({ ...current, alias: event.target.value }))}
-                          placeholder={t('aliases.placeholderAlias')}
-                        />
-                      </label>
-                      <label>
-                        <span>{t('aliases.displayName')}</span>
-                        <input
-                          type="text"
-                          value={aliasForm.displayName}
-                          onChange={(event) =>
-                            setAliasForm((current) => ({ ...current, displayName: event.target.value }))
-                          }
-                          placeholder={t('aliases.placeholderDisplayName')}
-                        />
-                      </label>
-                      <label className="checkbox-row">
-                        <input
-                          type="checkbox"
-                          checked={aliasForm.disabled}
-                          onChange={(event) =>
-                            setAliasForm((current) => ({ ...current, disabled: event.target.checked }))
-                          }
-                        />
-                        <span>{t('aliases.createDisabled')}</span>
-                      </label>
-                      <div className="toolbar">
-                        <button type="submit" className="primary">
-                          {t('actions.save')}
-                        </button>
-                        <button type="button" onClick={resetAliasForm}>
-                          {t('actions.reset')}
-                        </button>
-                      </div>
-                    </form>
-                  </section>
-
-                  <section className="subpanel">
-                    <div className="subpanel-header">
-                      <h4>{t('aliases.bindTitle')}</h4>
-                    </div>
-                    <form className="stack" onSubmit={(event) => void onBindTarget(event)}>
-                      <label>
-                        <span>{t('aliases.aliasForBinding')}</span>
-                        <input
-                          type="text"
-                          value={targetForm.alias}
-                          onChange={(event) => setTargetForm((current) => ({ ...current, alias: event.target.value }))}
-                          placeholder={t('aliases.placeholderAliasBinding')}
-                        />
-                      </label>
-                      <label>
-                        <span>{t('aliases.providerId')}</span>
-                        <input
-                          type="text"
-                          value={targetForm.provider}
-                          onChange={(event) =>
-                            setTargetForm((current) => ({ ...current, provider: event.target.value }))
-                          }
-                          placeholder={t('aliases.placeholderProviderId')}
-                        />
-                      </label>
-                      <label>
-                        <span>{t('aliases.model')}</span>
-                        <input
-                          type="text"
-                          value={targetForm.model}
-                          onChange={(event) => setTargetForm((current) => ({ ...current, model: event.target.value }))}
-                          placeholder={t('aliases.placeholderModel')}
-                        />
-                      </label>
-                      <label className="checkbox-row">
-                        <input
-                          type="checkbox"
-                          checked={targetForm.disabled}
-                          onChange={(event) =>
-                            setTargetForm((current) => ({ ...current, disabled: event.target.checked }))
-                          }
-                        />
-                        <span>{t('aliases.targetDisabled')}</span>
-                      </label>
-                      <div className="toolbar">
-                        <button type="submit">{t('actions.bind')}</button>
-                        <button type="button" onClick={() => setTargetForm(emptyTargetForm)}>
-                          {t('actions.reset')}
-                        </button>
-                      </div>
-                    </form>
-                  </section>
+              <div className="list-column">
+                <div className="list-toolbar list-toolbar-single">
+                  <label>
+                    <span>{t('aliases.search')}</span>
+                    <input
+                      type="text"
+                      value={aliasQuery}
+                      onChange={(event) => setAliasQuery(event.target.value)}
+                      placeholder={t('aliases.searchPlaceholder')}
+                    />
+                  </label>
                 </div>
 
-                <div className="list-column">
-                  <div className="list-toolbar list-toolbar-single">
-                    <label>
-                      <span>{t('aliases.search')}</span>
-                      <input
-                        type="text"
-                        value={aliasQuery}
-                        onChange={(event) => setAliasQuery(event.target.value)}
-                        placeholder={t('aliases.searchPlaceholder')}
-                      />
-                    </label>
-                  </div>
-
-                  <div className="scroll-list">
-                    {aliases.length === 0 ? <p className="subtle">{t('aliases.empty')}</p> : null}
-                    {aliases.length > 0 && filteredAliases.length === 0 ? (
-                      <p className="subtle">{t('aliases.noMatches')}</p>
-                    ) : null}
-                    {filteredAliases.map((alias) => (
-                      <article className="item-card" key={alias.alias}>
-                        <div className="item-heading">
-                          <div>
-                            <strong>{alias.displayName || alias.alias}</strong>
-                            <code>{alias.alias}</code>
-                          </div>
-                          <span className={`badge ${alias.enabled ? 'live' : 'idle'}`}>
-                            {alias.enabled ? t('status.enabled') : t('status.disabled')}
-                          </span>
+                <div className="scroll-list card-grid-list">
+                  {aliases.length === 0 ? (
+                    <article className="empty-card">
+                      <span className="empty-kicker">{t('aliases.title')}</span>
+                      <h4>{t('aliases.empty')}</h4>
+                      <p className="subtle">{t('aliases.emptyHint')}</p>
+                      <div className="toolbar">
+                        <button type="button" className="primary" onClick={openAliasCreateModal}>
+                          {t('actions.newAlias')}
+                        </button>
+                        <button type="button" onClick={() => openAliasTargetModal()}>
+                          {t('actions.bind')}
+                        </button>
+                      </div>
+                    </article>
+                  ) : null}
+                  {aliases.length > 0 && filteredAliases.length === 0 ? (
+                    <article className="empty-card compact-empty">
+                      <h4>{t('aliases.noMatches')}</h4>
+                      <p className="subtle">{t('aliases.noMatchesHint')}</p>
+                    </article>
+                  ) : null}
+                  {filteredAliases.map((alias) => (
+                    <article className="item-card" key={alias.alias}>
+                      <div className="item-heading">
+                        <div className="item-heading-main">
+                          <strong>{alias.displayName || alias.alias}</strong>
+                          <code>{alias.alias}</code>
                         </div>
-                        <p className="subtle small-text">
-                          {t('aliases.routable', {
-                            available: alias.availableTargetCount,
-                            total: alias.targetCount,
-                          })}
-                        </p>
+                        <span className={`badge ${alias.enabled ? 'live' : 'idle'}`}>
+                          {alias.enabled ? t('status.enabled') : t('status.disabled')}
+                        </span>
+                      </div>
+                      <div className="item-summary">
+                        <span>{t('aliases.routable', { available: alias.availableTargetCount, total: alias.targetCount })}</span>
+                        <span>{t('aliases.targetsCount', { count: alias.targets.length })}</span>
+                      </div>
+                      <div className="card-actions">
                         <div className="toolbar">
                           <button type="button" onClick={() => onEditAlias(alias)}>
                             {t('actions.edit')}
                           </button>
-                          <button
-                            type="button"
-                            onClick={() => setTargetForm((current) => ({ ...current, alias: alias.alias }))}
-                          >
+                          <button type="button" onClick={() => openAliasTargetModal(alias.alias)}>
                             {t('actions.useInBindForm')}
                           </button>
-                          <button type="button" onClick={() => void onDeleteAlias(alias.alias)}>
+                        </div>
+                        <div className="toolbar toolbar-end">
+                          <button
+                            type="button"
+                            className="danger ghost-danger"
+                            onClick={() => setConfirmIntent({ kind: 'delete-alias', alias: alias.alias })}
+                          >
                             {t('actions.delete')}
                           </button>
                         </div>
+                      </div>
 
-                        <div className="target-list">
-                          {alias.targets.length === 0 ? <p className="subtle">{t('aliases.noTargets')}</p> : null}
-                          {alias.targets.map((target) => (
-                            <div className="target-card" key={`${alias.alias}-${target.provider}-${target.model}`}>
-                              <div>
-                                <code>
-                                  {target.provider}/{target.model}
-                                </code>
-                              </div>
-                              <div className="toolbar">
-                                <button
-                                  type="button"
-                                  onClick={() =>
-                                    void onToggleTarget(alias.alias, target.provider, target.model, target.enabled)
-                                  }
-                                >
-                                  {target.enabled ? t('actions.disable') : t('actions.enable')}
-                                </button>
-                                <button
-                                  type="button"
-                                  onClick={() => void onUnbindTarget(alias.alias, target.provider, target.model)}
-                                >
-                                  {t('actions.unbind')}
-                                </button>
-                              </div>
+                      <div className="target-list target-list-compact">
+                        {alias.targets.length === 0 ? <p className="subtle">{t('aliases.noTargets')}</p> : null}
+                        {alias.targets.map((target) => (
+                          <div className="target-card" key={`${alias.alias}-${target.provider}-${target.model}`}>
+                            <div className="target-card-main">
+                              <code>
+                                {target.provider}/{target.model}
+                              </code>
+                              <span className={`badge ${target.enabled ? 'live' : 'idle'}`}>
+                                {target.enabled ? t('status.enabled') : t('status.disabled')}
+                              </span>
                             </div>
-                          ))}
-                        </div>
-                      </article>
-                    ))}
-                  </div>
+                            <div className="toolbar toolbar-end">
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  void onToggleTarget(alias.alias, target.provider, target.model, target.enabled)
+                                }
+                              >
+                                {target.enabled ? t('actions.disable') : t('actions.enable')}
+                              </button>
+                              <button
+                                type="button"
+                                className="danger ghost-danger"
+                                onClick={() =>
+                                  setConfirmIntent({
+                                    kind: 'unbind-target',
+                                    alias: alias.alias,
+                                    provider: target.provider,
+                                    model: target.model,
+                                  })
+                                }
+                              >
+                                {t('actions.unbind')}
+                              </button>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </article>
+                  ))}
                 </div>
               </div>
             </article>
@@ -1311,13 +1364,12 @@ export default function App() {
 
         {activeTab === 'settings' ? (
           <section className="tab-layout settings-layout">
-            <article className="panel">
+            <article className="panel settings-main-panel">
               <div className="panel-header">
                 <div>
-                  <h3>{t('settings.title')}</h3>
                   <p className="subtle">{t('settings.subtitle')}</p>
                 </div>
-                <span className="subtle">{prefsStatus}</span>
+                {prefsStatus ? <p className="subtle settings-status">{prefsStatus}</p> : null}
               </div>
 
               <form className="stack-blocks" onSubmit={(event) => void onSavePrefs(event)}>
@@ -1352,7 +1404,7 @@ export default function App() {
                   </div>
                   <div className="stack">
                     <label>
-                      <span>{t('settings.language')}</span>
+                      <span>{t('settings.languageLabel')}</span>
                       <select
                         value={prefs.language}
                         onChange={(event) =>
@@ -1411,6 +1463,67 @@ export default function App() {
                   </div>
                 </section>
 
+                <section className="subpanel">
+                  <div className="subpanel-header">
+                    <h4>{t('settings.configTitle')}</h4>
+                    {configTransferStatus ? <p className="subtle settings-status">{configTransferStatus}</p> : null}
+                  </div>
+                  <div className="stack">
+                    <div className="inline-meta config-path-meta">
+                      <span className="meta-label">{t('overview.configPath')}</span>
+                      <strong className="path-value">{overview?.configPath || t('app.loadingConfig')}</strong>
+                    </div>
+                    <div className="toolbar">
+                      <button type="button" onClick={() => void onExportConfig()}>
+                        {t('actions.exportConfig')}
+                      </button>
+                    </div>
+                    <div className="mode-switch" aria-labelledby={importModeLabelId}>
+                      <span id={importModeLabelId} className="sr-only">
+                        {t('settings.importTitle')}
+                      </span>
+                      <button
+                        type="button"
+                        aria-pressed={configImportMode === 'text'}
+                        className={configImportMode === 'text' ? 'active-toggle' : ''}
+                        onClick={() => setConfigImportMode('text')}
+                      >
+                        {t('settings.importModeText')}
+                      </button>
+                      <button
+                        type="button"
+                        aria-pressed={configImportMode === 'file'}
+                        className={configImportMode === 'file' ? 'active-toggle' : ''}
+                        onClick={() => setConfigImportMode('file')}
+                      >
+                        {t('settings.importModeFile')}
+                      </button>
+                    </div>
+                    <div className="stack">
+                      {configImportMode === 'text' ? (
+                        <label>
+                          <span>{t('settings.importText')}</span>
+                          <textarea
+                            value={configImportText}
+                            onChange={(event) => setConfigImportText(event.target.value)}
+                            placeholder={t('settings.importPlaceholder')}
+                            rows={10}
+                          />
+                        </label>
+                      ) : (
+                        <label>
+                          <span>{t('settings.importFile')}</span>
+                          <input type="file" accept="application/json,.json" onChange={(event) => void onSelectConfigFile(event)} />
+                          <span className="subtle">{configImportFileName || t('settings.fileEmpty')}</span>
+                        </label>
+                      )}
+                      <button type="button" className="primary" onClick={() => void onImportConfig()}>
+                        {t('actions.importConfig')}
+                      </button>
+                    </div>
+                  </div>
+                </section>
+
                 <div className="toolbar">
                   <button type="submit" className="primary">
                     {t('actions.save')}
@@ -1419,33 +1532,328 @@ export default function App() {
               </form>
             </article>
 
-            <article className="panel">
+            <article className="panel settings-side-panel">
               <div className="panel-header">
                 <div>
                   <h3>{t('settings.aboutTitle')}</h3>
+                  <p className="subtle">{t('settings.aboutSubtitle')}</p>
                 </div>
               </div>
-              <dl className="info-grid">
+              <dl className="info-grid info-grid-single settings-about-grid">
                 <div>
                   <dt>{t('overview.version')}</dt>
                   <dd>{meta.version || t('app.dev')}</dd>
                 </div>
-                <div>
-                  <dt>{t('overview.shell')}</dt>
-                  <dd>{meta.shell}</dd>
-                </div>
                 <div>
                   <dt>{t('overview.configPath')}</dt>
-                  <dd>{overview?.configPath || t('app.loadingConfig')}</dd>
+                  <dd className="path-value">{overview?.configPath || t('app.loadingConfig')}</dd>
                 </div>
                 <div>
                   <dt>{t('settings.resolvedTheme')}</dt>
                   <dd>{t(`settings.theme${resolvedTheme === 'dark' ? 'Dark' : 'Light'}`)}</dd>
                 </div>
+                <div>
+                  <dt>{t('settings.resolvedLanguage')}</dt>
+                  <dd>{resolvedLanguage === 'zh-CN' ? t('settings.languageChinese') : t('settings.languageEnglish')}</dd>
+                </div>
               </dl>
             </article>
           </section>
         ) : null}
+
+        {activeModal === 'provider-form' ? (
+          <div className="modal-backdrop" onClick={closeModal}>
+            <div
+              className="modal-card"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby={providerFormTitleId}
+              tabIndex={-1}
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={onModalKeyDown}
+            >
+              <div className="subpanel-header">
+                <h4 id={providerFormTitleId}>
+                  {editingProviderId ? t('providers.formEditTitle', { id: editingProviderId }) : t('providers.formCreateTitle')}
+                </h4>
+                <button type="button" onClick={closeModal}>
+                  {t('actions.close')}
+                </button>
+              </div>
+              <form className="stack" onSubmit={(event) => void onSaveProvider(event)}>
+                <label>
+                  <span>{t('providers.id')}</span>
+                  <input
+                    type="text"
+                    value={providerForm.id}
+                    onChange={(event) => setProviderForm((current) => ({ ...current, id: event.target.value }))}
+                    placeholder={t('providers.placeholderId')}
+                  />
+                </label>
+                <label>
+                  <span>{t('providers.name')}</span>
+                  <input
+                    type="text"
+                    value={providerForm.name}
+                    onChange={(event) => setProviderForm((current) => ({ ...current, name: event.target.value }))}
+                    placeholder={t('providers.placeholderName')}
+                  />
+                </label>
+                <label>
+                  <span>{t('providers.baseUrl')}</span>
+                  <input
+                    type="text"
+                    value={providerForm.baseUrl}
+                    onChange={(event) => setProviderForm((current) => ({ ...current, baseUrl: event.target.value }))}
+                    placeholder={t('providers.placeholderBaseUrl')}
+                  />
+                </label>
+                <label>
+                  <span>{t('providers.apiKey')}</span>
+                  <input
+                    type="text"
+                    value={providerForm.apiKey}
+                    onChange={(event) => setProviderForm((current) => ({ ...current, apiKey: event.target.value }))}
+                    placeholder={t('providers.placeholderApiKey')}
+                  />
+                </label>
+                <label>
+                  <span>{t('providers.headers')}</span>
+                  <textarea
+                    value={providerForm.headersText}
+                    onChange={(event) => setProviderForm((current) => ({ ...current, headersText: event.target.value }))}
+                    placeholder={t('providers.placeholderHeaders')}
+                    rows={4}
+                  />
+                </label>
+                <label className="checkbox-row">
+                  <input
+                    type="checkbox"
+                    checked={providerForm.disabled}
+                    onChange={(event) => setProviderForm((current) => ({ ...current, disabled: event.target.checked }))}
+                  />
+                  <span>{t('providers.saveDisabled')}</span>
+                </label>
+                <label className="checkbox-row">
+                  <input
+                    type="checkbox"
+                    checked={providerForm.skipModels}
+                    onChange={(event) => setProviderForm((current) => ({ ...current, skipModels: event.target.checked }))}
+                  />
+                  <span>{t('providers.skipModels')}</span>
+                </label>
+                <label className="checkbox-row">
+                  <input
+                    type="checkbox"
+                    checked={providerForm.clearHeaders}
+                    onChange={(event) => setProviderForm((current) => ({ ...current, clearHeaders: event.target.checked }))}
+                  />
+                  <span>{t('providers.clearHeaders')}</span>
+                </label>
+                <div className="toolbar">
+                  <button type="submit" className="primary">
+                    {t('actions.save')}
+                  </button>
+                  <button type="button" onClick={resetProviderForm}>
+                    {t('actions.reset')}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        ) : null}
+
+        {activeModal === 'provider-import' ? (
+          <div className="modal-backdrop" onClick={closeModal}>
+            <div
+              className="modal-card"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby={providerImportTitleId}
+              tabIndex={-1}
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={onModalKeyDown}
+            >
+              <div className="subpanel-header">
+                <h4 id={providerImportTitleId}>{t('providers.importTitle')}</h4>
+                <button type="button" onClick={closeModal}>
+                  {t('actions.close')}
+                </button>
+              </div>
+              <form className="stack" onSubmit={(event) => void onImportProviders(event)}>
+                <label>
+                  <span>{t('providers.sourcePath')}</span>
+                  <input
+                    type="text"
+                    value={providerImportForm.sourcePath || ''}
+                    onChange={(event) => setProviderImportForm((current) => ({ ...current, sourcePath: event.target.value }))}
+                    placeholder={t('providers.placeholderSourcePath')}
+                  />
+                </label>
+                <label className="checkbox-row">
+                  <input
+                    type="checkbox"
+                    checked={providerImportForm.overwrite}
+                    onChange={(event) => setProviderImportForm((current) => ({ ...current, overwrite: event.target.checked }))}
+                  />
+                  <span>{t('providers.overwrite')}</span>
+                </label>
+                <button type="submit" className="primary">{t('actions.import')}</button>
+              </form>
+            </div>
+          </div>
+        ) : null}
+
+        {activeModal === 'alias-form' ? (
+          <div className="modal-backdrop" onClick={closeModal}>
+            <div
+              className="modal-card"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby={aliasFormTitleId}
+              tabIndex={-1}
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={onModalKeyDown}
+            >
+              <div className="subpanel-header">
+                <h4 id={aliasFormTitleId}>{editingAliasId ? t('aliases.formEditTitle', { alias: editingAliasId }) : t('aliases.formCreateTitle')}</h4>
+                <button type="button" onClick={closeModal}>
+                  {t('actions.close')}
+                </button>
+              </div>
+              <form className="stack" onSubmit={(event) => void onSaveAlias(event)}>
+                <label>
+                  <span>{t('aliases.alias')}</span>
+                  <input
+                    type="text"
+                    value={aliasForm.alias}
+                    onChange={(event) => setAliasForm((current) => ({ ...current, alias: event.target.value }))}
+                    placeholder={t('aliases.placeholderAlias')}
+                  />
+                </label>
+                <label>
+                  <span>{t('aliases.displayName')}</span>
+                  <input
+                    type="text"
+                    value={aliasForm.displayName}
+                    onChange={(event) => setAliasForm((current) => ({ ...current, displayName: event.target.value }))}
+                    placeholder={t('aliases.placeholderDisplayName')}
+                  />
+                </label>
+                <label className="checkbox-row">
+                  <input
+                    type="checkbox"
+                    checked={aliasForm.disabled}
+                    onChange={(event) => setAliasForm((current) => ({ ...current, disabled: event.target.checked }))}
+                  />
+                  <span>{t('aliases.createDisabled')}</span>
+                </label>
+                <div className="toolbar">
+                  <button type="submit" className="primary">
+                    {t('actions.save')}
+                  </button>
+                  <button type="button" onClick={resetAliasForm}>
+                    {t('actions.reset')}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        ) : null}
+
+        {activeModal === 'alias-target' ? (
+          <div className="modal-backdrop" onClick={closeModal}>
+            <div
+              className="modal-card"
+              role="dialog"
+              aria-modal="true"
+              aria-labelledby={aliasTargetTitleId}
+              tabIndex={-1}
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={onModalKeyDown}
+            >
+              <div className="subpanel-header">
+                <h4 id={aliasTargetTitleId}>{t('aliases.bindTitle')}</h4>
+                <button type="button" onClick={closeModal}>
+                  {t('actions.close')}
+                </button>
+              </div>
+              <form className="stack" onSubmit={(event) => void onBindTarget(event)}>
+                <label>
+                  <span>{t('aliases.aliasForBinding')}</span>
+                  <input
+                    type="text"
+                    value={targetForm.alias}
+                    onChange={(event) => setTargetForm((current) => ({ ...current, alias: event.target.value }))}
+                    placeholder={t('aliases.placeholderAliasBinding')}
+                  />
+                </label>
+                <label>
+                  <span>{t('aliases.providerId')}</span>
+                  <input
+                    type="text"
+                    value={targetForm.provider}
+                    onChange={(event) => setTargetForm((current) => ({ ...current, provider: event.target.value }))}
+                    placeholder={t('aliases.placeholderProviderId')}
+                  />
+                </label>
+                <label>
+                  <span>{t('aliases.model')}</span>
+                  <input
+                    type="text"
+                    value={targetForm.model}
+                    onChange={(event) => setTargetForm((current) => ({ ...current, model: event.target.value }))}
+                    placeholder={t('aliases.placeholderModel')}
+                  />
+                </label>
+                <label className="checkbox-row">
+                  <input
+                    type="checkbox"
+                    checked={targetForm.disabled}
+                    onChange={(event) => setTargetForm((current) => ({ ...current, disabled: event.target.checked }))}
+                  />
+                  <span>{t('aliases.targetDisabled')}</span>
+                </label>
+                <div className="toolbar">
+                  <button type="submit" className="primary">{t('actions.bind')}</button>
+                  <button type="button" onClick={() => setTargetForm((current) => ({ ...emptyTargetForm, alias: current.alias }))}>
+                    {t('actions.reset')}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </div>
+        ) : null}
+
+        {confirmIntent ? (
+          <div className="modal-backdrop" onClick={closeConfirmDialog}>
+            <div
+              className="modal-card modal-card-confirm"
+              role="alertdialog"
+              aria-modal="true"
+              aria-labelledby={confirmTitleId}
+              tabIndex={-1}
+              onClick={(event) => event.stopPropagation()}
+              onKeyDown={onConfirmKeyDown}
+            >
+              <div className="confirm-icon">!</div>
+              <div className="stack">
+                <div>
+                  <h4 id={confirmTitleId}>{confirmTitle}</h4>
+                  <p className="subtle">{confirmMessage}</p>
+                </div>
+                <div className="toolbar toolbar-end">
+                  <button type="button" onClick={closeConfirmDialog}>
+                    {t('actions.cancel')}
+                  </button>
+                  <button type="button" className="danger" onClick={() => void onConfirmAction()}>
+                    {t('actions.confirm')}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : null}
       </main>
     </div>
   )
diff --git a/frontend/src/api.ts b/frontend/src/api.ts
index 677071f..af7003e 100644
--- a/frontend/src/api.ts
+++ b/frontend/src/api.ts
@@ -1,6 +1,9 @@
 import type {
   AliasTargetInput,
   AliasUpsertInput,
+  ConfigExportView,
+  ConfigImportInput,
+  ConfigImportResult,
   DesktopPrefsSaveResult,
   AliasView,
   DesktopPrefsView,
@@ -60,6 +63,16 @@ export function getOverview(): Promise<Overview> {
   return isWails() ? bridge().Overview() : http<Overview>('/api/overview')
 }
 
+export function exportConfig(): Promise<ConfigExportView> {
+  return isWails() ? bridge().ExportConfig() : http<ConfigExportView>('/api/config/export')
+}
+
+export function importConfig(input: ConfigImportInput): Promise<ConfigImportResult> {
+  return isWails()
+    ? bridge().ImportConfig(input)
+    : http<ConfigImportResult>('/api/config/import', { method: 'POST', body: JSON.stringify(input) })
+}
+
 export function listProviders(): Promise<ProviderView[]> {
   return isWails() ? bridge().Providers() : http<ProviderView[]>('/api/providers')
 }
diff --git a/frontend/src/env.d.ts b/frontend/src/env.d.ts
index 3fb234b..1cff905 100644
--- a/frontend/src/env.d.ts
+++ b/frontend/src/env.d.ts
@@ -7,6 +7,8 @@ declare global {
         App?: {
           Meta: () => Promise<Record<string, string>>
           Overview: () => Promise<import('./types').Overview>
+          ExportConfig: () => Promise<import('./types').ConfigExportView>
+          ImportConfig: (input: import('./types').ConfigImportInput) => Promise<import('./types').ConfigImportResult>
           Providers: () => Promise<import('./types').ProviderView[]>
           Aliases: () => Promise<import('./types').AliasView[]>
           SaveProvider: (input: import('./types').ProviderUpsertInput) => Promise<import('./types').ProviderSaveResult>
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 78c765f..97976e4 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -1,6 +1,7 @@
 {
   "app": {
     "eyebrow": "ocswitch desktop",
+    "brand": "ocswitch desktop",
     "title": "Native control panel",
     "subtitle": "{{version}} · {{shell}} shell · {{path}}",
     "loadingConfig": "loading config",
@@ -31,7 +32,17 @@
     "unbind": "Unbind",
     "newProvider": "New provider",
     "newAlias": "New alias",
-    "useInBindForm": "Use in bind form"
+    "useInBindForm": "Use in bind form",
+    "close": "Close",
+    "cancel": "Cancel",
+    "confirm": "Confirm",
+    "exportConfig": "Export config",
+    "importConfig": "Import config"
+  },
+  "confirm": {
+    "deleteProviderTitle": "Delete provider",
+    "deleteAliasTitle": "Delete alias",
+    "unbindTargetTitle": "Unbind target"
   },
   "status": {
     "proxyRunning": "Proxy running",
@@ -59,7 +70,10 @@
     "previewChanges": "Preview shows changes",
     "previewNoChanges": "Preview shows no changes",
     "syncApplied": "Sync applied",
-    "syncUpToDate": "Already up to date"
+    "syncUpToDate": "Already up to date",
+    "confirmDeleteProvider": "Delete provider {{id}}? This cannot be undone.",
+    "confirmDeleteAlias": "Delete alias {{alias}}? This cannot be undone.",
+    "confirmUnbindTarget": "Unbind {{provider}}/{{model}} from {{alias}}?"
   },
   "overview": {
     "title": "Overview",
@@ -67,6 +81,7 @@
     "actionsTitle": "Actions",
     "statsTitle": "System snapshot",
     "environmentTitle": "Environment",
+    "environmentSubtitle": "Only runtime and desktop app details stay here.",
     "doctorTitle": "Doctor summary",
     "debugTitle": "Debug details",
     "debugSummary": "Show raw overview JSON",
@@ -98,7 +113,9 @@
     "filterDisabled": "Disabled",
     "listCount": "{{shown}} shown / {{total}} total",
     "empty": "No providers configured yet.",
+    "emptyHint": "Create one manually or import providers from your OpenCode config.",
     "noMatches": "No providers match the current filters.",
+    "noMatchesHint": "Try a broader search term or switch the status filter.",
     "id": "Provider id",
     "name": "Display name",
     "baseUrl": "Base URL",
@@ -114,6 +131,7 @@
     "apiKeyNotSet": "not set",
     "headersNone": "none",
     "modelsNone": "none",
+    "modelsCount": "{{count}} models",
     "sourceLabel": "Source",
     "placeholderId": "su8",
     "placeholderName": "SU8",
@@ -142,7 +160,9 @@
     "searchPlaceholder": "Filter by alias, display name, provider, or model",
     "listCount": "{{shown}} shown / {{total}} total",
     "empty": "No aliases configured yet.",
+    "emptyHint": "Create an alias first, then bind provider/model targets to it.",
     "noMatches": "No aliases match the current filters.",
+    "noMatchesHint": "Try a different search term or create a new alias route.",
     "alias": "Alias",
     "displayName": "Display name",
     "aliasForBinding": "Alias for binding",
@@ -156,6 +176,7 @@
     "placeholderProviderId": "su8",
     "placeholderModel": "gpt-5.4",
     "targets": "Targets",
+    "targetsCount": "{{count}} targets",
     "routable": "{{available}}/{{total}} routable",
     "statusSaved": "Saved alias {{alias}}",
     "statusEditing": "Editing alias {{alias}}",
@@ -194,9 +215,23 @@
     "appearanceTitle": "Appearance",
     "languageTitle": "Language",
     "behaviorTitle": "Desktop behavior",
+    "configTitle": "Config file",
+    "importTitle": "Import mode",
+    "importModeText": "Import text",
+    "importModeFile": "Import file",
+    "importText": "Config text",
+    "importFile": "Config file",
+    "importPlaceholder": "Paste full ocswitch config JSON",
+    "fileEmpty": "No file selected yet.",
+    "exportDone": "Exported config {{path}}",
+    "importDone": "Imported config {{path}}",
+    "fileLoaded": "Loaded file {{name}}",
+    "importEmpty": "Provide config content first.",
     "aboutTitle": "About",
+    "aboutSubtitle": "Read-only environment details for the current desktop shell.",
     "theme": "Theme",
     "language": "Language",
+    "languageLabel": "Preferred language",
     "themeSystem": "System",
     "themeLight": "Light",
     "themeDark": "Dark",
diff --git a/frontend/src/i18n/locales/zh-CN.json b/frontend/src/i18n/locales/zh-CN.json
index 324124d..6b3a9c8 100644
--- a/frontend/src/i18n/locales/zh-CN.json
+++ b/frontend/src/i18n/locales/zh-CN.json
@@ -1,6 +1,7 @@
 {
   "app": {
     "eyebrow": "ocswitch desktop",
+    "brand": "ocswitch desktop",
     "title": "桌面控制台",
     "subtitle": "{{version}} · {{shell}} shell · {{path}}",
     "loadingConfig": "正在读取配置",
@@ -31,7 +32,17 @@
     "unbind": "解绑",
     "newProvider": "新建提供商",
     "newAlias": "新建别名",
-    "useInBindForm": "带入绑定表单"
+    "useInBindForm": "带入绑定表单",
+    "close": "关闭",
+    "cancel": "取消",
+    "confirm": "确认",
+    "exportConfig": "导出配置",
+    "importConfig": "导入配置"
+  },
+  "confirm": {
+    "deleteProviderTitle": "确认删除提供商",
+    "deleteAliasTitle": "确认删除别名",
+    "unbindTargetTitle": "确认解绑目标"
   },
   "status": {
     "proxyRunning": "代理运行中",
@@ -59,7 +70,10 @@
     "previewChanges": "预览显示有变更",
     "previewNoChanges": "预览显示无变更",
     "syncApplied": "同步已应用",
-    "syncUpToDate": "已经是最新状态"
+    "syncUpToDate": "已经是最新状态",
+    "confirmDeleteProvider": "确认删除提供商 {{id}}？此操作不可撤销。",
+    "confirmDeleteAlias": "确认删除别名 {{alias}}？此操作不可撤销。",
+    "confirmUnbindTarget": "确认从 {{alias}} 解绑 {{provider}}/{{model}}？"
   },
   "overview": {
     "title": "概览",
@@ -67,6 +81,7 @@
     "actionsTitle": "快捷操作",
     "statsTitle": "系统快照",
     "environmentTitle": "环境信息",
+    "environmentSubtitle": "仅保留当前运行态和桌面应用相关信息。",
     "doctorTitle": "Doctor 摘要",
     "debugTitle": "调试详情",
     "debugSummary": "查看原始 overview JSON",
@@ -98,7 +113,9 @@
     "filterDisabled": "已禁用",
     "listCount": "显示 {{shown}} / 共 {{total}}",
     "empty": "还没有配置任何提供商。",
+    "emptyHint": "你可以手动新建提供商，或从 OpenCode 配置中批量导入。",
     "noMatches": "当前筛选条件下没有匹配的提供商。",
+    "noMatchesHint": "尝试放宽搜索词或切换状态筛选。",
     "id": "提供商 id",
     "name": "显示名称",
     "baseUrl": "Base URL",
@@ -114,6 +131,7 @@
     "apiKeyNotSet": "未设置",
     "headersNone": "无",
     "modelsNone": "无",
+    "modelsCount": "{{count}} 个模型",
     "sourceLabel": "来源",
     "placeholderId": "su8",
     "placeholderName": "SU8",
@@ -142,7 +160,9 @@
     "searchPlaceholder": "按别名、显示名、provider 或 model 过滤",
     "listCount": "显示 {{shown}} / 共 {{total}}",
     "empty": "还没有配置任何别名。",
+    "emptyHint": "先新建别名，再把上游 provider/model 绑定到它。",
     "noMatches": "当前筛选条件下没有匹配的别名。",
+    "noMatchesHint": "尝试修改搜索词，或直接新建一个新的别名路由。",
     "alias": "别名",
     "displayName": "显示名称",
     "aliasForBinding": "用于绑定的别名",
@@ -156,6 +176,7 @@
     "placeholderProviderId": "su8",
     "placeholderModel": "gpt-5.4",
     "targets": "目标",
+    "targetsCount": "{{count}} 个目标",
     "routable": "可路由 {{available}}/{{total}}",
     "statusSaved": "已保存别名 {{alias}}",
     "statusEditing": "正在编辑别名 {{alias}}",
@@ -194,9 +215,23 @@
     "appearanceTitle": "外观",
     "languageTitle": "语言",
     "behaviorTitle": "桌面行为",
+    "configTitle": "配置文件",
+    "importTitle": "导入方式",
+    "importModeText": "文本导入",
+    "importModeFile": "文件导入",
+    "importText": "配置文本",
+    "importFile": "配置文件",
+    "importPlaceholder": "粘贴完整 ocswitch 配置 JSON",
+    "fileEmpty": "尚未选择文件。",
+    "exportDone": "已导出配置 {{path}}",
+    "importDone": "已导入配置 {{path}}",
+    "fileLoaded": "已读取文件 {{name}}",
+    "importEmpty": "请先提供配置内容。",
     "aboutTitle": "关于",
+    "aboutSubtitle": "显示当前桌面壳环境信息，仅用于查看。",
     "theme": "主题",
     "language": "语言",
+    "languageLabel": "首选语言",
     "themeSystem": "跟随系统",
     "themeLight": "浅色",
     "themeDark": "深色",
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 0d70bde..9c2794c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -1,42 +1,66 @@
 :root {
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  --bg: #f3f7fb;
-  --bg-accent: rgba(76, 141, 255, 0.08);
-  --panel: rgba(255, 255, 255, 0.9);
+  --bg: #f4f7fc;
+  --bg-elevated: rgba(255, 255, 255, 0.72);
+  --bg-grid: rgba(10, 34, 66, 0.05);
+  --bg-glow: rgba(0, 102, 255, 0.14);
+  --sidebar: #ffffff;
+  --panel: #ffffff;
   --panel-strong: #ffffff;
-  --panel-muted: #eef4fb;
-  --text: #142033;
-  --text-muted: #5e6f86;
-  --border: rgba(20, 32, 51, 0.08);
-  --border-strong: rgba(20, 32, 51, 0.14);
-  --accent: #2f6df6;
-  --accent-strong: #1749ba;
-  --accent-soft: rgba(47, 109, 246, 0.12);
-  --success: #178154;
-  --success-soft: rgba(23, 129, 84, 0.14);
-  --danger: #cf3d4f;
-  --danger-soft: rgba(207, 61, 79, 0.14);
-  --shadow: 0 24px 70px rgba(34, 54, 84, 0.12);
+  --panel-muted: #f3f7fd;
+  --panel-soft: rgba(255, 255, 255, 0.86);
+  --text: #101827;
+  --text-muted: #64748b;
+  --text-soft: #94a3b8;
+  --border: rgba(15, 23, 42, 0.08);
+  --border-strong: rgba(15, 23, 42, 0.14);
+  --accent: #0066ff;
+  --accent-strong: #0052cc;
+  --accent-soft: rgba(0, 102, 255, 0.1);
+  --accent-softer: rgba(0, 102, 255, 0.05);
+  --success: #20a468;
+  --success-soft: rgba(32, 164, 104, 0.14);
+  --danger: #d94b5c;
+  --danger-soft: rgba(217, 75, 92, 0.14);
+  --warning: #f59e0b;
+  --warning-soft: rgba(245, 158, 11, 0.14);
+  --code-bg: #081425;
+  --code-text: #dce9ff;
+  --shadow-sm: 0 14px 32px rgba(15, 23, 42, 0.08);
+  --shadow-md: 0 24px 64px rgba(20, 33, 61, 0.1);
+  --shadow-lg: 0 34px 90px rgba(0, 55, 153, 0.14);
 }
 
 html[data-theme='dark'] {
-  --bg: #07111f;
-  --bg-accent: rgba(77, 156, 255, 0.12);
-  --panel: rgba(8, 18, 34, 0.88);
-  --panel-strong: #0c1728;
-  --panel-muted: #0f2038;
-  --text: #edf3ff;
-  --text-muted: #8ca0bd;
-  --border: rgba(171, 192, 220, 0.12);
-  --border-strong: rgba(171, 192, 220, 0.22);
-  --accent: #69a4ff;
-  --accent-strong: #9bc0ff;
-  --accent-soft: rgba(105, 164, 255, 0.18);
-  --success: #65d49a;
-  --success-soft: rgba(101, 212, 154, 0.16);
-  --danger: #ff8a96;
-  --danger-soft: rgba(255, 138, 150, 0.18);
-  --shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
+  --bg: #07101d;
+  --bg-elevated: rgba(8, 16, 30, 0.84);
+  --bg-grid: rgba(115, 165, 255, 0.08);
+  --bg-glow: rgba(47, 132, 255, 0.24);
+  --sidebar: rgba(9, 17, 31, 0.92);
+  --panel: rgba(13, 25, 43, 0.9);
+  --panel-strong: #0f1d32;
+  --panel-muted: #12253f;
+  --panel-soft: rgba(15, 29, 50, 0.88);
+  --text: #f5f9ff;
+  --text-muted: #9aa8c0;
+  --text-soft: #6f809d;
+  --border: rgba(136, 165, 209, 0.16);
+  --border-strong: rgba(170, 196, 236, 0.22);
+  --accent: #49a1ff;
+  --accent-strong: #81b9ff;
+  --accent-soft: rgba(73, 161, 255, 0.18);
+  --accent-softer: rgba(73, 161, 255, 0.1);
+  --success: #53d18e;
+  --success-soft: rgba(83, 209, 142, 0.18);
+  --danger: #ff7c88;
+  --danger-soft: rgba(255, 124, 136, 0.18);
+  --warning: #ffb347;
+  --warning-soft: rgba(255, 179, 71, 0.2);
+  --code-bg: #040c18;
+  --code-text: #d7e7ff;
+  --shadow-sm: 0 16px 34px rgba(0, 0, 0, 0.22);
+  --shadow-md: 0 24px 60px rgba(0, 0, 0, 0.28);
+  --shadow-lg: 0 38px 100px rgba(0, 0, 0, 0.34);
 }
 
 * {
@@ -49,13 +73,39 @@ body,
   min-height: 100vh;
 }
 
+html {
+  background: var(--bg);
+}
+
 body {
   margin: 0;
   color: var(--text);
+  line-height: 1.5;
   background:
-    radial-gradient(circle at top left, var(--bg-accent), transparent 24%),
-    radial-gradient(circle at top right, rgba(87, 199, 133, 0.07), transparent 18%),
+    radial-gradient(circle at top left, var(--bg-glow), transparent 24%),
+    radial-gradient(circle at right top, rgba(32, 164, 104, 0.08), transparent 18%),
+    linear-gradient(var(--bg-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
     var(--bg);
+  background-size: auto, auto, 28px 28px, 28px 28px, auto;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 18%);
+  opacity: 0.7;
+}
+
+html[data-theme='dark'] body::before {
+  background: linear-gradient(180deg, rgba(125, 176, 255, 0.08), transparent 24%);
+  opacity: 1;
+}
+
+a {
+  color: inherit;
 }
 
 button,
@@ -74,27 +124,45 @@ select {
     background 160ms ease,
     color 160ms ease,
     box-shadow 160ms ease,
-    transform 160ms ease;
+    transform 160ms ease,
+    opacity 160ms ease;
 }
 
 button {
-  cursor: pointer;
-  border: 1px solid var(--border-strong);
-  border-radius: 14px;
-  background: var(--panel-muted);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  min-height: 44px;
+  padding: 0.78rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--panel-soft);
   color: var(--text);
-  padding: 0.75rem 1rem;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+  cursor: pointer;
+}
+
+html[data-theme='dark'] button {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 button:hover {
   border-color: var(--accent);
+  background: color-mix(in srgb, var(--panel-soft) 86%, var(--accent-soft));
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-2px);
 }
 
 button.primary {
   border-color: transparent;
   background: linear-gradient(135deg, var(--accent), var(--accent-strong));
-  color: #fff;
-  box-shadow: 0 16px 30px rgba(47, 109, 246, 0.24);
+  color: #ffffff;
+  box-shadow: 0 18px 34px rgba(0, 102, 255, 0.22);
+}
+
+html[data-theme='dark'] button.primary {
+  box-shadow: 0 20px 38px rgba(30, 112, 255, 0.28);
 }
 
 button:disabled {
@@ -107,12 +175,24 @@ input[type='text'],
 textarea,
 select {
   width: 100%;
+  min-height: 46px;
+  padding: 0.8rem 0.95rem;
   border: 1px solid var(--border);
-  border-radius: 14px;
+  border-radius: 16px;
   background: var(--panel-strong);
   color: var(--text);
-  padding: 0.8rem 0.95rem;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+}
+
+html[data-theme='dark'] input[type='text'],
+html[data-theme='dark'] textarea,
+html[data-theme='dark'] select {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+input[type='text']::placeholder,
+textarea::placeholder {
+  color: var(--text-soft);
 }
 
 input[type='text']:focus,
@@ -120,12 +200,16 @@ textarea:focus,
 select:focus {
   outline: none;
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+  box-shadow: 0 0 0 4px var(--accent-soft);
+}
+
+input[type='checkbox'] {
+  accent-color: var(--accent);
 }
 
 textarea {
+  min-height: 7rem;
   resize: vertical;
-  min-height: 6rem;
 }
 
 code,
@@ -133,47 +217,100 @@ pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
 }
 
+label {
+  display: grid;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+label > span:first-child {
+  font-size: 0.92rem;
+  font-weight: 600;
+  color: var(--text);
+}
+
+strong,
+h1,
+h2,
+h3,
+h4 {
+  letter-spacing: -0.02em;
+}
+
 .app-shell {
   display: grid;
-  grid-template-columns: 320px minmax(0, 1fr);
+  grid-template-columns: 224px minmax(0, 1fr);
   min-height: 100vh;
 }
 
 .sidebar {
+  position: sticky;
+  top: 0;
   display: flex;
   flex-direction: column;
-  gap: 1.25rem;
-  padding: 1.5rem;
+  gap: 0.8rem;
+  min-height: 100vh;
+  padding: 1rem;
   border-right: 1px solid var(--border);
-  background: linear-gradient(180deg, var(--panel), rgba(255, 255, 255, 0.02));
-  backdrop-filter: blur(20px);
+  background: var(--sidebar);
+  box-shadow: 22px 0 50px rgba(15, 23, 42, 0.04);
+  backdrop-filter: blur(18px);
+}
+
+html[data-theme='dark'] .sidebar {
+  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.2);
 }
 
 .sidebar-brand,
-.sidebar-panel,
 .panel,
-.subpanel {
+.subpanel,
+.workspace-header {
   border: 1px solid var(--border);
-  border-radius: 22px;
+  border-radius: 24px;
   background: var(--panel);
-  box-shadow: var(--shadow);
+  box-shadow: var(--shadow-md);
 }
 
 .sidebar-brand {
-  padding: 1.2rem 1.25rem;
+  position: relative;
+  display: grid;
+  gap: 0.55rem;
+  padding: 1rem;
+  overflow: hidden;
 }
 
-.sidebar-panel {
-  padding: 1rem;
+.sidebar-brand::after {
+  content: '';
+  position: absolute;
+  inset: auto -20% -40% auto;
+  width: 180px;
+  height: 180px;
+  border-radius: 999px;
+  background: radial-gradient(circle, var(--accent-soft), transparent 68%);
+  pointer-events: none;
+}
+
+.sidebar-brand-line {
+  width: 42px;
+  height: 4px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
+}
+
+.brand-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
 }
 
 .eyebrow,
 .section-kicker,
 .meta-label,
+.stat-label,
 dt {
   margin: 0;
-  font-size: 0.78rem;
-  letter-spacing: 0.08em;
+  font-size: 0.76rem;
+  letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--text-muted);
 }
@@ -185,8 +322,18 @@ dt {
   margin: 0;
 }
 
+.sidebar-brand h1 {
+  font-size: 1.1rem;
+}
+
+.workspace-header h2 {
+  font-size: clamp(1.85rem, 2vw, 2.45rem);
+}
+
 .subtle {
+  margin: 0;
   color: var(--text-muted);
+  line-height: 1.6;
 }
 
 .small-text {
@@ -195,34 +342,67 @@ dt {
 
 .nav-list {
   display: grid;
-  gap: 0.7rem;
+  gap: 0.45rem;
 }
 
 .nav-item {
-  display: grid;
-  gap: 0.35rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 42px;
+  justify-items: start;
   text-align: left;
-  padding: 1rem 1.05rem;
-  border-radius: 18px;
+  padding: 0.7rem 0.85rem 0.7rem 1rem;
+  border-radius: 14px;
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+}
+
+.nav-item:hover {
+  background: var(--accent-softer);
+}
+
+.nav-item::before {
+  content: '';
+  position: absolute;
+  inset: 10px auto 10px 0;
+  width: 3px;
+  border-radius: 999px;
   background: transparent;
 }
 
 .nav-item.active {
+  background: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, 0.3));
+  border-color: var(--border);
+  box-shadow: var(--shadow-sm);
+}
+
+.nav-item.active::before {
+  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
+}
+
+html[data-theme='dark'] .nav-item.active {
+  background: #ffffff;
+  color: #08111f;
   border-color: transparent;
-  background: linear-gradient(135deg, var(--accent-soft), rgba(255, 255, 255, 0.04));
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+}
+
+html[data-theme='dark'] .nav-item.active .nav-description,
+html[data-theme='dark'] .nav-item.active .nav-title {
+  color: #08111f;
 }
 
 .nav-title {
   font-weight: 700;
+  font-size: 0.92rem;
+  width: 100%;
 }
 
 .nav-description {
-  font-size: 0.92rem;
-  color: var(--text-muted);
+  display: none;
 }
 
-.sidebar-panel-header,
 .panel-header,
 .toolbar,
 .hero-actions,
@@ -230,47 +410,111 @@ dt {
 .subpanel-header,
 .list-toolbar {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   gap: 0.75rem;
 }
 
-.sidebar-stats,
+.panel-header,
+.subpanel-header {
+  margin-bottom: 1.1rem;
+}
+
 .stack,
 .stack-blocks,
 .issue-stack,
-.target-list {
+.target-list,
+.hero-meta {
   display: grid;
   gap: 0.85rem;
 }
 
-.sidebar-stat,
 .issue-card,
 .target-card,
 .item-card,
-.stat-card {
+.stat-card,
+.hero-meta-card,
+.inline-meta {
   border: 1px solid var(--border);
   border-radius: 18px;
   background: var(--panel-muted);
 }
 
-.sidebar-stat {
-  padding: 0.9rem;
-}
-
 .workspace {
   display: flex;
   flex-direction: column;
+  gap: 1.15rem;
   min-width: 0;
   padding: 1.5rem;
-  gap: 1rem;
 }
 
 .workspace-header {
+  display: grid;
+  gap: 1.25rem;
+  padding: 1.25rem;
+  background:
+    linear-gradient(135deg, var(--panel-strong), var(--panel-soft)),
+    radial-gradient(circle at top right, var(--accent-soft), transparent 32%);
+}
+
+.hero-copy {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.hero-copy .subtle {
+  max-width: 52rem;
+}
+
+.hero-actions-wrap {
   display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
   justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
+  gap: 1.1rem;
+}
+
+.hero-meta {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  flex: 1;
+  min-width: min(100%, 460px);
+}
+
+.hero-meta-card {
+  display: grid;
+  gap: 0.35rem;
+  padding: 1rem 1.05rem;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.hero-meta-card:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-2px);
+}
+
+.hero-meta-card strong {
+  font-size: 1rem;
+  word-break: break-word;
+}
+
+.hero-status-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.hero-status-card::after {
+  content: '';
+  position: absolute;
+  inset: auto -22px -40px auto;
+  width: 92px;
+  height: 92px;
+  border-radius: 999px;
+  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
 }
 
 .tab-layout {
@@ -288,13 +532,20 @@ dt {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.settings-layout {
+  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.85fr);
+  align-items: start;
+}
+
 .panel {
-  padding: 1.25rem;
+  padding: 1.3rem;
   min-width: 0;
+  background: var(--panel);
+  overflow: hidden;
 }
 
 .panel-fill {
-  min-height: calc(100vh - 11.5rem);
+  min-height: calc(100vh - 13rem);
 }
 
 .panel-full {
@@ -306,18 +557,22 @@ dt {
 .info-grid,
 .item-grid {
   display: grid;
-  gap: 0.85rem;
+  gap: 0.9rem;
 }
 
 .stats-grid {
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  margin-top: 1rem;
 }
 
 .action-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.card-grid-list {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+}
+
 .info-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -327,24 +582,53 @@ dt {
 }
 
 .stat-card {
+  position: relative;
+  overflow: hidden;
   padding: 1rem;
 }
 
+.stat-card::after {
+  content: '';
+  position: absolute;
+  top: 14px;
+  right: 14px;
+  width: 38px;
+  height: 38px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--accent-soft), transparent);
+}
+
 .stat-value {
   display: block;
-  margin-top: 0.35rem;
-  font-size: 1.5rem;
-  font-weight: 700;
+  margin-top: 0.45rem;
+  font-size: 1.65rem;
+  font-weight: 800;
 }
 
 .badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.38rem 0.72rem;
+  width: fit-content;
+  min-height: 32px;
+  padding: 0.36rem 0.7rem;
   border-radius: 999px;
-  font-size: 0.82rem;
-  font-weight: 600;
+  border: 1px solid transparent;
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+html[data-theme='dark'] .badge {
+  color: var(--accent);
+}
+
+.badge.outline {
+  background: transparent;
+  border-color: var(--border-strong);
+  color: var(--text-muted);
 }
 
 .badge.live {
@@ -353,20 +637,48 @@ dt {
 }
 
 .badge.idle {
-  background: rgba(148, 163, 184, 0.16);
+  background: rgba(148, 163, 184, 0.14);
   color: var(--text-muted);
 }
 
+button.danger {
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 78%, #31090d));
+  color: #ffffff;
+  box-shadow: 0 18px 34px color-mix(in srgb, var(--danger) 28%, transparent);
+}
+
+button.danger:hover {
+  border-color: transparent;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 92%, #ffffff), var(--danger));
+}
+
+button.ghost-danger {
+  border-color: color-mix(in srgb, var(--danger) 26%, transparent);
+  background: var(--danger-soft);
+  color: var(--danger);
+  box-shadow: none;
+}
+
+button.ghost-danger:hover {
+  border-color: var(--danger);
+  background: color-mix(in srgb, var(--danger-soft) 86%, white);
+}
+
+html[data-theme='dark'] button.ghost-danger:hover {
+  background: color-mix(in srgb, var(--danger-soft) 86%, black);
+}
+
 .subpanel {
-  padding: 1rem;
+  padding: 1.05rem;
+  background: var(--panel-soft);
 }
 
 .split-view {
   display: grid;
-  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
+  grid-template-columns: minmax(330px, 420px) minmax(0, 1fr);
   gap: 1rem;
   align-items: start;
-  margin-top: 1rem;
 }
 
 .editor-column,
@@ -376,11 +688,11 @@ dt {
 
 .list-column {
   display: grid;
-  gap: 0.85rem;
+  gap: 1rem;
 }
 
 .list-toolbar {
-  padding: 0.2rem 0;
+  padding: 0.1rem 0;
 }
 
 .list-toolbar > label,
@@ -399,42 +711,174 @@ dt {
 
 .scroll-list {
   display: grid;
-  gap: 0.85rem;
+  gap: 0.9rem;
   max-height: calc(100vh - 18rem);
   padding-right: 0.25rem;
   overflow: auto;
 }
 
+.scroll-list::-webkit-scrollbar {
+  width: 10px;
+}
+
+.scroll-list::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  border-radius: 999px;
+  background: var(--border-strong);
+  background-clip: padding-box;
+}
+
 .item-card {
-  padding: 1rem;
+  display: grid;
+  gap: 1rem;
+  padding: 1.05rem;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.item-card:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-2px);
 }
 
 .item-heading {
   align-items: flex-start;
 }
 
+.item-heading-main {
+  display: grid;
+  gap: 0.2rem;
+  min-width: 0;
+}
+
 .item-heading code {
   display: block;
   margin-top: 0.2rem;
   color: var(--text-muted);
 }
 
+.item-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.7rem 0.85rem;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: var(--panel-muted);
+  color: var(--text-muted);
+  font-size: 0.88rem;
+}
+
+.inline-pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  min-height: 28px;
+  padding: 0.25rem 0.65rem;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--panel-muted);
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+}
+
+.card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+}
+
+.toolbar-end {
+  justify-content: flex-end;
+}
+
+.item-grid > div,
+.info-grid > div {
+  display: grid;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.info-grid-single {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.item-grid code,
+.item-grid span,
+dd {
+  font-weight: 600;
+  word-break: break-word;
+}
+
 .target-card {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
   gap: 0.75rem;
-  padding: 0.8rem 0.9rem;
+  padding: 0.9rem 0.95rem;
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease,
+    transform 160ms ease;
+}
+
+.target-card:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.target-card-main {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  min-width: 0;
+}
+
+.target-list-compact {
+  gap: 0.7rem;
 }
 
 .checkbox-row {
   display: flex !important;
   align-items: center;
   gap: 0.7rem;
+  min-height: 48px;
+  padding: 0.85rem 0.95rem;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--panel-muted);
+  transition:
+    border-color 160ms ease,
+    background 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.checkbox-row:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
 }
 
 .checkbox-row input {
   width: auto;
+  flex: 0 0 auto;
+}
+
+.checkbox-row span {
+  font-weight: 600;
 }
 
 .inline-meta {
@@ -442,27 +886,190 @@ dt {
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  border: 1px dashed var(--border-strong);
-  border-radius: 16px;
   padding: 0.85rem 0.95rem;
 }
 
+.config-path-meta {
+  align-items: flex-start;
+}
+
+.config-path-meta strong,
+.path-value {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
+
+.settings-main-panel {
+  min-width: 0;
+}
+
+.settings-side-panel {
+  position: sticky;
+  top: 1.5rem;
+  align-self: start;
+}
+
+.settings-status {
+  max-width: 22rem;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.settings-about-grid dd {
+  color: var(--text);
+}
+
+.settings-layout .subpanel + .subpanel {
+  margin-top: 0.25rem;
+}
+
+.settings-layout .subpanel-header {
+  margin-bottom: 1.25rem;
+}
+
+.settings-layout .toolbar:last-child {
+  padding-top: 0.25rem;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+input[type='file'] {
+  width: 100%;
+  min-width: 0;
+  color: var(--text-muted);
+}
+
+input[type='file']::file-selector-button {
+  margin-right: 0.85rem;
+  padding: 0.6rem 0.9rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--panel-muted);
+  color: var(--text);
+  cursor: pointer;
+}
+
+.mode-switch {
+  display: inline-flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.mode-switch button {
+  min-height: 38px;
+  padding: 0.55rem 0.85rem;
+}
+
+.mode-switch .active-toggle {
+  border-color: transparent;
+  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
+  color: #ffffff;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  background: rgba(7, 16, 29, 0.42);
+  backdrop-filter: blur(12px);
+}
+
+.modal-card {
+  width: min(100%, 680px);
+  max-height: calc(100vh - 3rem);
+  overflow: auto;
+  padding: 1.15rem;
+  border: 1px solid var(--border-strong);
+  border-radius: 24px;
+  background: var(--panel);
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-card-confirm {
+  width: min(100%, 460px);
+  display: grid;
+  gap: 1rem;
+}
+
+.confirm-icon {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  height: 44px;
+  border-radius: 14px;
+  background: var(--danger-soft);
+  color: var(--danger);
+  font-weight: 800;
+  font-size: 1.1rem;
+}
+
+.empty-card {
+  display: grid;
+  gap: 0.8rem;
+  padding: 1.2rem;
+  border: 1px dashed var(--border-strong);
+  border-radius: 22px;
+  background: linear-gradient(135deg, var(--panel-soft), var(--panel-muted));
+  min-height: 220px;
+  align-content: center;
+}
+
+.compact-empty {
+  min-height: 180px;
+}
+
+.empty-kicker {
+  font-size: 0.76rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.empty-card h4 {
+  margin: 0;
+  font-size: 1.15rem;
+}
+
 .details-toggle summary {
   cursor: pointer;
   color: var(--text-muted);
 }
 
 .details {
-  margin: 0.8rem 0 0;
+  margin: 0.85rem 0 0;
   padding: 1rem;
+  border: 1px solid var(--border);
   border-radius: 18px;
-  background: #06101d;
-  color: #d7e5fb;
+  background: var(--code-bg);
+  color: var(--code-text);
   overflow: auto;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
+.details-toggle[open] summary {
+  margin-bottom: 0.2rem;
+}
+
+.issue-card {
+  padding: 0.9rem 1rem;
+}
+
 .tone-error {
   color: var(--danger);
 }
@@ -472,21 +1079,30 @@ dt {
 }
 
 dt {
-  margin-bottom: 0.35rem;
+  margin-bottom: 0.3rem;
 }
 
 dd {
   margin: 0;
-  font-weight: 600;
-  word-break: break-word;
 }
 
-@media (max-width: 1180px) {
+.toolbar {
+  flex-wrap: wrap;
+  gap: 0.8rem;
+}
+
+.toolbar > * {
+  flex-shrink: 0;
+}
+
+@media (max-width: 1240px) {
   .app-shell {
     grid-template-columns: 1fr;
   }
 
   .sidebar {
+    position: static;
+    min-height: auto;
     border-right: 0;
     border-bottom: 1px solid var(--border);
   }
@@ -501,15 +1117,23 @@ dd {
 
   .overview-layout,
   .sync-layout,
-  .settings-layout,
   .stats-grid,
+  .card-grid-list,
   .info-grid,
   .item-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .settings-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .settings-side-panel {
+    position: static;
+  }
 }
 
-@media (max-width: 860px) {
+@media (max-width: 900px) {
   .workspace,
   .sidebar {
     padding: 1rem;
@@ -519,23 +1143,35 @@ dd {
   .panel-header,
   .hero-actions,
   .toolbar,
+  .card-actions,
   .subpanel-header,
   .list-toolbar,
   .target-card,
-  .item-heading {
+  .target-card-main,
+  .item-heading,
+  .item-summary,
+  .hero-actions-wrap,
+  .inline-meta {
     flex-direction: column;
     align-items: stretch;
   }
 
+  .settings-status {
+    max-width: none;
+    text-align: left;
+  }
+
   .nav-list,
   .overview-layout,
   .sync-layout,
   .settings-layout,
   .stats-grid,
+  .card-grid-list,
   .info-grid,
   .item-grid,
   .action-grid,
-  .split-view {
+  .split-view,
+  .hero-meta {
     grid-template-columns: 1fr;
   }
 
@@ -548,3 +1184,31 @@ dd {
     min-height: auto;
   }
 }
+
+@media (max-width: 640px) {
+  .sidebar-brand,
+  .panel,
+  .subpanel,
+  .workspace-header {
+    border-radius: 20px;
+  }
+
+  .nav-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .brand-meta {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .workspace-header {
+    padding: 1rem;
+  }
+
+  .panel,
+  .subpanel {
+    padding: 1rem;
+  }
+
+}
diff --git a/frontend/src/types.ts b/frontend/src/types.ts
index de155c4..ec3d0f2 100644
--- a/frontend/src/types.ts
+++ b/frontend/src/types.ts
@@ -15,6 +15,20 @@ export type DesktopPrefsSaveResult = {
   warnings?: string[]
 }
 
+export type ConfigExportView = {
+  configPath: string
+  content: string
+}
+
+export type ConfigImportInput = {
+  content: string
+}
+
+export type ConfigImportResult = {
+  configPath: string
+  warnings?: string[]
+}
+
 export type ProxyStatusView = {
   running: boolean
   bindAddress: string
diff --git a/frontend/wailsjs/go/desktop/App.d.ts b/frontend/wailsjs/go/desktop/App.d.ts
index ca0f834..d10078f 100755
--- a/frontend/wailsjs/go/desktop/App.d.ts
+++ b/frontend/wailsjs/go/desktop/App.d.ts
@@ -22,6 +22,10 @@ export function DesktopPrefs():Promise<app.DesktopPrefsView>;
 
 export function DoctorRun():Promise<app.DoctorRunResult>;
 
+export function ExportConfig():Promise<app.ConfigExportView>;
+
+export function ImportConfig(arg1:app.ConfigImportInput):Promise<app.ConfigImportResult>;
+
 export function ImportProviders(arg1:app.ProviderImportInput):Promise<app.ProviderImportResult>;
 
 export function Meta():Promise<Record<string, string>>;
diff --git a/frontend/wailsjs/go/desktop/App.js b/frontend/wailsjs/go/desktop/App.js
index 92892c7..43fcbd5 100755
--- a/frontend/wailsjs/go/desktop/App.js
+++ b/frontend/wailsjs/go/desktop/App.js
@@ -38,6 +38,14 @@ export function DoctorRun() {
   return window['go']['desktop']['App']['DoctorRun']();
 }
 
+export function ExportConfig() {
+  return window['go']['desktop']['App']['ExportConfig']();
+}
+
+export function ImportConfig(arg1) {
+  return window['go']['desktop']['App']['ImportConfig'](arg1);
+}
+
 export function ImportProviders(arg1) {
   return window['go']['desktop']['App']['ImportProviders'](arg1);
 }
diff --git a/frontend/wailsjs/go/models.ts b/frontend/wailsjs/go/models.ts
index a16ab9c..c2ddb98 100755
--- a/frontend/wailsjs/go/models.ts
+++ b/frontend/wailsjs/go/models.ts
@@ -90,6 +90,46 @@ export namespace app {
 		    return a;
 		}
 	}
+	export class ConfigExportView {
+	    configPath: string;
+	    content: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new ConfigExportView(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.configPath = source["configPath"];
+	        this.content = source["content"];
+	    }
+	}
+	export class ConfigImportInput {
+	    content: string;
+	
+	    static createFrom(source: any = {}) {
+	        return new ConfigImportInput(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.content = source["content"];
+	    }
+	}
+	export class ConfigImportResult {
+	    configPath: string;
+	    warnings?: string[];
+	
+	    static createFrom(source: any = {}) {
+	        return new ConfigImportResult(source);
+	    }
+	
+	    constructor(source: any = {}) {
+	        if ('string' === typeof source) source = JSON.parse(source);
+	        this.configPath = source["configPath"];
+	        this.warnings = source["warnings"];
+	    }
+	}
 	export class DesktopPrefsInput {
 	    launchAtLogin: boolean;
 	    minimizeToTray: boolean;
diff --git a/internal/app/config_transfer.go b/internal/app/config_transfer.go
new file mode 100644
index 0000000..85a106f
--- /dev/null
+++ b/internal/app/config_transfer.go
@@ -0,0 +1,90 @@
+package app
+
+import (
+	"context"
+	"encoding/json"
+	"fmt"
+	"sort"
+	"strings"
+
+	"github.com/Apale7/opencode-provider-switch/internal/config"
+)
+
+func (s *Service) ExportConfig(ctx context.Context) (ConfigExportView, error) {
+	_ = ctx
+	cfg, err := s.loadConfig()
+	if err != nil {
+		return ConfigExportView{}, err
+	}
+	content, err := marshalConfigContent(cfg)
+	if err != nil {
+		return ConfigExportView{}, err
+	}
+	return ConfigExportView{ConfigPath: cfg.Path(), Content: content}, nil
+}
+
+func (s *Service) ImportConfig(ctx context.Context, in ConfigImportInput) (ConfigImportResult, error) {
+	_ = ctx
+	content := strings.TrimSpace(in.Content)
+	if content == "" {
+		return ConfigImportResult{}, fmt.Errorf("config content is required")
+	}
+
+	imported := config.Default()
+	if err := json.Unmarshal([]byte(content), imported); err != nil {
+		return ConfigImportResult{}, fmt.Errorf("parse config: %w", err)
+	}
+	if imported.Server.Host == "" {
+		imported.Server.Host = "127.0.0.1"
+	}
+	if imported.Server.Port == 0 {
+		imported.Server.Port = 9982
+	}
+	if imported.Server.APIKey == "" {
+		imported.Server.APIKey = config.DefaultLocalAPIKey
+	}
+	if errs := imported.Validate(); len(errs) > 0 {
+		return ConfigImportResult{}, errs[0]
+	}
+
+	cfg, err := s.loadConfig()
+	if err != nil {
+		return ConfigImportResult{}, err
+	}
+	cfg.Server = imported.Server
+	cfg.Desktop = imported.Desktop
+	cfg.Providers = append([]config.Provider(nil), imported.Providers...)
+	cfg.Aliases = append([]config.Alias(nil), imported.Aliases...)
+	if err := cfg.Save(); err != nil {
+		return ConfigImportResult{}, err
+	}
+
+	result := ConfigImportResult{ConfigPath: cfg.Path()}
+	if s.currentProxyStatus(proxyBindAddress(cfg)).Running {
+		result.Warnings = append(result.Warnings, "proxy is still running with the previous in-memory config; restart it to apply imported settings")
+	}
+	return result, nil
+}
+
+func marshalConfigContent(cfg *config.Config) (string, error) {
+	providers := append([]config.Provider(nil), cfg.Providers...)
+	sort.Slice(providers, func(i, j int) bool { return providers[i].ID < providers[j].ID })
+	aliases := append([]config.Alias(nil), cfg.Aliases...)
+	sort.Slice(aliases, func(i, j int) bool { return aliases[i].Alias < aliases[j].Alias })
+	snapshot := struct {
+		Server    config.Server     `json:"server"`
+		Desktop   config.Desktop    `json:"desktop,omitempty"`
+		Providers []config.Provider `json:"providers"`
+		Aliases   []config.Alias    `json:"aliases"`
+	}{
+		Server:    cfg.Server,
+		Desktop:   cfg.Desktop,
+		Providers: providers,
+		Aliases:   aliases,
+	}
+	data, err := json.MarshalIndent(snapshot, "", "  ")
+	if err != nil {
+		return "", fmt.Errorf("marshal config: %w", err)
+	}
+	return string(append(data, '\n')), nil
+}
diff --git a/internal/app/service.go b/internal/app/service.go
index 9beae4d..87b235f 100644
--- a/internal/app/service.go
+++ b/internal/app/service.go
@@ -316,7 +316,7 @@ func (s *Service) currentProxyStatus(bindAddress string) ProxyStatusView {
 	s.mu.Lock()
 	defer s.mu.Unlock()
 	status := s.proxyStatus
-	if status.BindAddress == "" {
+	if !status.Running || status.BindAddress == "" {
 		status.BindAddress = bindAddress
 	}
 	return status
diff --git a/internal/app/service_test.go b/internal/app/service_test.go
index b4fd1b7..4ed8d81 100644
--- a/internal/app/service_test.go
+++ b/internal/app/service_test.go
@@ -116,6 +116,52 @@ func TestStartStopProxyUpdatesStatus(t *testing.T) {
 	}
 }
 
+func TestGetProxyStatusUsesCurrentConfigAddressWhenStopped(t *testing.T) {
+	t.Parallel()
+
+	path := filepath.Join(t.TempDir(), "ocswitch.json")
+	firstPort := freePort(t)
+	secondPort := freePort(t)
+	cfg, err := config.Load(path)
+	if err != nil {
+		t.Fatalf("config.Load() error = %v", err)
+	}
+	cfg.Server.Host = "127.0.0.1"
+	cfg.Server.Port = firstPort
+	if err := cfg.Save(); err != nil {
+		t.Fatalf("cfg.Save() error = %v", err)
+	}
+
+	svc := NewService(path)
+	if err := svc.StartProxy(context.Background()); err != nil {
+		t.Fatalf("StartProxy() error = %v", err)
+	}
+	if err := svc.StopProxy(context.Background()); err != nil {
+		t.Fatalf("StopProxy() error = %v", err)
+	}
+
+	cfg, err = config.Load(path)
+	if err != nil {
+		t.Fatalf("config.Load() reload error = %v", err)
+	}
+	cfg.Server.Port = secondPort
+	if err := cfg.Save(); err != nil {
+		t.Fatalf("cfg.Save() update error = %v", err)
+	}
+
+	status, err := svc.GetProxyStatus(context.Background())
+	if err != nil {
+		t.Fatalf("GetProxyStatus() error = %v", err)
+	}
+	if status.Running {
+		t.Fatalf("status.Running = true, want false")
+	}
+	want := "127.0.0.1:" + itoa(secondPort)
+	if status.BindAddress != want {
+		t.Fatalf("status.BindAddress = %q, want %q", status.BindAddress, want)
+	}
+}
+
 func TestUpsertProviderReturnsWarningsAndKeepsCatalog(t *testing.T) {
 	t.Parallel()
 
diff --git a/internal/app/types.go b/internal/app/types.go
index 4aa096d..79fb4b6 100644
--- a/internal/app/types.go
+++ b/internal/app/types.go
@@ -115,6 +115,20 @@ type DesktopPrefsInput struct {
 	Language       string `json:"language"`
 }
 
+type ConfigExportView struct {
+	ConfigPath string `json:"configPath"`
+	Content    string `json:"content"`
+}
+
+type ConfigImportInput struct {
+	Content string `json:"content"`
+}
+
+type ConfigImportResult struct {
+	ConfigPath string   `json:"configPath"`
+	Warnings   []string `json:"warnings,omitempty"`
+}
+
 type ProviderUpsertInput struct {
 	ID           string            `json:"id"`
 	Name         string            `json:"name,omitempty"`
diff --git a/internal/desktop/app.go b/internal/desktop/app.go
index fecf070..9b608e9 100644
--- a/internal/desktop/app.go
+++ b/internal/desktop/app.go
@@ -86,12 +86,10 @@ func (a *App) SyncDesktopPreferences(ctx context.Context) error {
 	if err != nil {
 		return err
 	}
-	if err := a.auto.Sync(ctx, prefs); err != nil {
-		return err
-	}
+	autoErr := a.auto.Sync(ctx, prefs)
 	a.tray.Sync(ctx, prefs)
 	a.notify.Sync(ctx, prefs)
-	return nil
+	return autoErr
 }
 
 func (a *App) SaveDesktopPrefs(ctx context.Context, in app.DesktopPrefsInput) (app.DesktopPrefsSaveResult, error) {
@@ -127,6 +125,22 @@ func (a *App) Overview() (app.Overview, error) {
 	return a.bindings.GetOverview(a.callContext())
 }
 
+func (a *App) ExportConfig() (app.ConfigExportView, error) {
+	return a.bindings.ExportConfig(a.callContext())
+}
+
+func (a *App) ImportConfig(in app.ConfigImportInput) (app.ConfigImportResult, error) {
+	result, err := a.bindings.ImportConfig(a.callContext(), in)
+	if err != nil {
+		return app.ConfigImportResult{}, err
+	}
+	if syncErr := a.SyncDesktopPreferences(a.callContext()); syncErr != nil {
+		result.Warnings = append(result.Warnings, fmt.Sprintf("imported config but could not sync desktop integrations: %v", syncErr))
+	}
+	a.tray.RefreshProxyStatus(a.callContext())
+	return result, nil
+}
+
 func (a *App) Providers() ([]app.ProviderView, error) {
 	return a.bindings.ListProviders(a.callContext())
 }
diff --git a/internal/desktop/bindings.go b/internal/desktop/bindings.go
index c7c9d78..1fa0a29 100644
--- a/internal/desktop/bindings.go
+++ b/internal/desktop/bindings.go
@@ -21,6 +21,14 @@ func (b *Bindings) GetOverview(ctx context.Context) (app.Overview, error) {
 	return b.service.GetOverview(ctx)
 }
 
+func (b *Bindings) ExportConfig(ctx context.Context) (app.ConfigExportView, error) {
+	return b.service.ExportConfig(ctx)
+}
+
+func (b *Bindings) ImportConfig(ctx context.Context, in app.ConfigImportInput) (app.ConfigImportResult, error) {
+	return b.service.ImportConfig(ctx, in)
+}
+
 func (b *Bindings) ListProviders(ctx context.Context) ([]app.ProviderView, error) {
 	return b.service.ListProviders(ctx)
 }
@@ -99,6 +107,14 @@ func (b *Bindings) Overview() (app.Overview, error) {
 	return b.GetOverview(context.Background())
 }
 
+func (b *Bindings) ExportConfigNow() (app.ConfigExportView, error) {
+	return b.ExportConfig(context.Background())
+}
+
+func (b *Bindings) ImportConfigNow(in app.ConfigImportInput) (app.ConfigImportResult, error) {
+	return b.ImportConfig(context.Background(), in)
+}
+
 func (b *Bindings) Providers() ([]app.ProviderView, error) {
 	return b.ListProviders(context.Background())
 }
diff --git a/internal/desktop/http.go b/internal/desktop/http.go
index cb1ef73..f1d573b 100644
--- a/internal/desktop/http.go
+++ b/internal/desktop/http.go
@@ -123,6 +123,28 @@ func newHandler(instance *App, version string, baseURL string) (http.Handler, er
 		writeResult(w, data, err)
 	})
 
+	api.HandleFunc("/api/config/export", func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodGet {
+			writeMethodNotAllowed(w, http.MethodGet)
+			return
+		}
+		data, err := b.ExportConfig(r.Context())
+		writeResult(w, data, err)
+	})
+
+	api.HandleFunc("/api/config/import", func(w http.ResponseWriter, r *http.Request) {
+		if r.Method != http.MethodPost {
+			writeMethodNotAllowed(w, http.MethodPost)
+			return
+		}
+		var in appcore.ConfigImportInput
+		if !decodeJSONBody(w, r, &in) {
+			return
+		}
+		data, err := instance.ImportConfig(in)
+		writeResult(w, data, err)
+	})
+
 	api.HandleFunc("/api/providers", func(w http.ResponseWriter, r *http.Request) {
 		switch r.Method {
 		case http.MethodGet:
diff --git a/internal/desktop/http_test.go b/internal/desktop/http_test.go
index 778e6e6..87bf84b 100644
--- a/internal/desktop/http_test.go
+++ b/internal/desktop/http_test.go
@@ -136,6 +136,91 @@ func TestDesktopHTTPHandlerServesOverviewAndStaticApp(t *testing.T) {
 		}
 	})
 
+	t.Run("import config syncs desktop integrations and reports warning", func(t *testing.T) {
+		cfg, err := config.Load(path)
+		if err != nil {
+			t.Fatalf("config.Load() error = %v", err)
+		}
+		cfg.UpsertProvider(config.Provider{
+			ID:      "demo",
+			Name:    "Demo",
+			BaseURL: "https://example.com/v1",
+			APIKey:  "sk-demo-12345678",
+			Models:  []string{"gpt-4.1-mini"},
+		})
+		cfg.UpsertAlias(config.Alias{
+			Alias:       "chat",
+			DisplayName: "Chat",
+			Enabled:     true,
+			Targets: []config.Target{{
+				Provider: "demo",
+				Model:    "gpt-4.1-mini",
+				Enabled:  true,
+			}},
+		})
+		if err := cfg.Save(); err != nil {
+			t.Fatalf("cfg.Save() error = %v", err)
+		}
+
+		originalAuto := instance.auto
+		originalTray := instance.tray
+		originalNotify := instance.notify
+		auto := failingAutoStart{message: "startup folder unavailable"}
+		tray := &spyTray{}
+		notify := &spyNotifier{}
+		instance.auto = auto
+		instance.tray = tray
+		instance.notify = notify
+		defer func() {
+			instance.auto = originalAuto
+			instance.tray = originalTray
+			instance.notify = originalNotify
+		}()
+
+		req := httptest.NewRequest(http.MethodPost, "/api/config/import", strings.NewReader(`{
+			"content":"{\"server\":{\"host\":\"127.0.0.1\",\"port\":9982,\"api_key\":\"ocswitch-local\"},\"desktop\":{\"launch_at_login\":true,\"minimize_to_tray\":true,\"notifications\":true,\"theme\":\"dark\",\"language\":\"zh-CN\"},\"providers\":[{\"id\":\"demo\",\"name\":\"Demo\",\"base_url\":\"https://example.com/v1\",\"api_key\":\"sk-demo-12345678\",\"models\":[\"gpt-4.1-mini\"]}],\"aliases\":[{\"alias\":\"chat\",\"display_name\":\"Chat\",\"enabled\":true,\"targets\":[{\"provider\":\"demo\",\"model\":\"gpt-4.1-mini\",\"enabled\":true}]}]}"
+		}`))
+		req.Header.Set("Content-Type", "application/json")
+		resp := httptest.NewRecorder()
+		h.ServeHTTP(resp, req)
+
+		if resp.Code != http.StatusOK {
+			t.Fatalf("status = %d, want %d, body=%s", resp.Code, http.StatusOK, resp.Body.String())
+		}
+		var payload struct {
+			Data struct {
+				ConfigPath string   `json:"configPath"`
+				Warnings   []string `json:"warnings"`
+			} `json:"data"`
+		}
+		if err := json.Unmarshal(resp.Body.Bytes(), &payload); err != nil {
+			t.Fatalf("json.Unmarshal() error = %v", err)
+		}
+		if payload.Data.ConfigPath == "" {
+			t.Fatalf("configPath is empty: %#v", payload.Data)
+		}
+		if len(payload.Data.Warnings) != 1 || !strings.Contains(payload.Data.Warnings[0], "sync desktop integrations") {
+			t.Fatalf("warnings = %#v, want desktop sync warning", payload.Data.Warnings)
+		}
+		if tray.syncCalls != 1 {
+			t.Fatalf("tray syncCalls = %d, want 1", tray.syncCalls)
+		}
+		if tray.refreshCalls != 1 {
+			t.Fatalf("tray refreshCalls = %d, want 1", tray.refreshCalls)
+		}
+		if !notify.lastPrefs.Notifications {
+			t.Fatalf("notify prefs = %#v, want notifications enabled", notify.lastPrefs)
+		}
+
+		loaded, err := config.Load(path)
+		if err != nil {
+			t.Fatalf("config.Load() error = %v", err)
+		}
+		if !loaded.Desktop.LaunchAtLogin || !loaded.Desktop.MinimizeToTray || !loaded.Desktop.Notifications {
+			t.Fatalf("persisted desktop prefs = %#v", loaded.Desktop)
+		}
+	})
+
 	t.Run("provider save exposes warnings", func(t *testing.T) {
 		providerServer := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 			w.WriteHeader(http.StatusBadGateway)
@@ -295,3 +380,44 @@ func (f failingAutoStart) Detach() {}
 func (f failingAutoStart) Sync(_ context.Context, _ app.DesktopPrefsView) error {
 	return fmt.Errorf(f.message)
 }
+
+type spyTray struct {
+	syncCalls    int
+	refreshCalls int
+	lastPrefs    app.DesktopPrefsView
+}
+
+func (s *spyTray) Attach(_ context.Context) {}
+
+func (s *spyTray) Detach() {}
+
+func (s *spyTray) Sync(_ context.Context, prefs app.DesktopPrefsView) {
+	s.syncCalls++
+	s.lastPrefs = prefs
+}
+
+func (s *spyTray) RefreshProxyStatus(_ context.Context) {
+	s.refreshCalls++
+}
+
+func (s *spyTray) BeforeClose(_ context.Context) (bool, error) {
+	return false, nil
+}
+
+type spyNotifier struct {
+	syncCalls int
+	lastPrefs app.DesktopPrefsView
+}
+
+func (s *spyNotifier) Attach(_ context.Context) {}
+
+func (s *spyNotifier) Detach() {}
+
+func (s *spyNotifier) Sync(_ context.Context, prefs app.DesktopPrefsView) {
+	s.syncCalls++
+	s.lastPrefs = prefs
+}
+
+func (s *spyNotifier) Send(_ context.Context, _ string, _ string) error {
+	return nil
+}