From a246ffba831b5566d3052c8fddcd28836473604b Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Fri, 25 Apr 2025 09:12:40 +0800
Subject: [PATCH] update

---
 .../src/components/StyleCustomizer.vue        | 974 +++---------------
 1 file changed, 156 insertions(+), 818 deletions(-)

diff --git a/packages/frontend/src/components/StyleCustomizer.vue b/packages/frontend/src/components/StyleCustomizer.vue
index 46717ad..ddac62c 100644
--- a/packages/frontend/src/components/StyleCustomizer.vue
+++ b/packages/frontend/src/components/StyleCustomizer.vue
@@ -821,51 +821,78 @@ const handleFocusAndSelect = (event: FocusEvent) => {
 
 
 <template>
-  <div class="style-customizer-overlay" @click.self="closeCustomizer">
-    <div class="style-customizer-panel">
-      <header class="panel-header">
-        <h2>{{ t('styleCustomizer.title') }}</h2>
-        <button @click="closeCustomizer" class="close-button">&times;</button>
+  <div class="fixed inset-0 bg-black/60 flex justify-center items-center z-[1000]" @click.self="closeCustomizer">
+    <div class="bg-background text-foreground rounded-lg shadow-lg w-[90%] max-w-[800px] h-[85vh] max-h-[700px] flex flex-col overflow-hidden">
+      <header class="flex justify-between items-center px-4 py-3 border-b border-border bg-header flex-shrink-0">
+        <h2 class="m-0 text-xl text-foreground">{{ t('styleCustomizer.title') }}</h2>
+        <button @click="closeCustomizer" class="bg-transparent border-none text-3xl leading-none cursor-pointer text-text-secondary px-2 py-1 rounded hover:text-foreground hover:bg-black/10">&times;</button>
       </header>
-      <div class="panel-content">
-        <nav class="panel-nav">
-          <button @click="currentTab = 'ui'" :class="{ active: currentTab === 'ui' }">
+      <div class="flex flex-grow overflow-hidden">
+        <nav class="w-[180px] border-r border-border p-4 bg-header flex-shrink-0 overflow-y-auto">
+          <button
+            @click="currentTab = 'ui'"
+            :class="[
+              'block w-full px-3 py-[0.7rem] mb-2 text-left bg-transparent border border-transparent rounded cursor-pointer text-foreground text-[0.95rem] transition-colors duration-200 ease-in-out hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-text-secondary',
+              { 'bg-button text-button-text font-bold': currentTab === 'ui' }
+            ]"
+          >
             {{ t('styleCustomizer.uiStyles') }}
           </button>
-          <button @click="currentTab = 'terminal'" :class="{ active: currentTab === 'terminal' && !isEditingTheme }" :disabled="isEditingTheme">
+          <button
+            @click="currentTab = 'terminal'"
+            :class="[
+              'block w-full px-3 py-[0.7rem] mb-2 text-left bg-transparent border border-transparent rounded cursor-pointer text-foreground text-[0.95rem] transition-colors duration-200 ease-in-out hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-text-secondary',
+              { 'bg-button text-button-text font-bold': currentTab === 'terminal' && !isEditingTheme }
+            ]"
+            :disabled="isEditingTheme"
+          >
             {{ t('styleCustomizer.terminalStyles') }}
           </button>
-           <button @click="currentTab = 'background'" :class="{ active: currentTab === 'background' }" :disabled="isEditingTheme">
+           <button
+            @click="currentTab = 'background'"
+            :class="[
+              'block w-full px-3 py-[0.7rem] mb-2 text-left bg-transparent border border-transparent rounded cursor-pointer text-foreground text-[0.95rem] transition-colors duration-200 ease-in-out hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-text-secondary',
+              { 'bg-button text-button-text font-bold': currentTab === 'background' }
+            ]"
+            :disabled="isEditingTheme"
+          >
             {{ t('styleCustomizer.backgroundSettings') }}
           </button>
-          <button @click="currentTab = 'other'" :class="{ active: currentTab === 'other' }" :disabled="isEditingTheme">
+          <button
+            @click="currentTab = 'other'"
+            :class="[
+              'block w-full px-3 py-[0.7rem] mb-2 text-left bg-transparent border border-transparent rounded cursor-pointer text-foreground text-[0.95rem] transition-colors duration-200 ease-in-out hover:bg-black/5 disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent disabled:text-text-secondary',
+              { 'bg-button text-button-text font-bold': currentTab === 'other' }
+            ]"
+            :disabled="isEditingTheme"
+          >
             {{ t('styleCustomizer.otherSettings') }} <!-- 需要添加翻译 -->
           </button>
         </nav>
-        <main class="panel-main">
+        <main class="flex-grow p-4 md:px-6 overflow-y-auto">
           <section v-if="currentTab === 'ui'">
-            <h3>{{ t('styleCustomizer.uiStyles') }}</h3>
+            <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.uiStyles') }}</h3>
             <!-- 新增：主题模式选择 -->
-            <div class="theme-mode-selector form-group">
-                <label>{{ t('styleCustomizer.themeModeLabel', '主题模式:') }}</label> <!-- TODO: 添加翻译 -->
-                <div class="button-group">
-                    <button @click="handleResetUiTheme" class="button-inline">{{ t('styleCustomizer.defaultMode', '默认模式') }}</button> <!-- TODO: 添加翻译 -->
-                    <button @click="applyDarkMode" class="button-inline">{{ t('styleCustomizer.darkMode', '黑暗模式') }}</button> <!-- TODO: 添加翻译 -->
+            <div class="grid grid-cols-[auto_1fr] items-center gap-3 mb-6">
+                <label class="text-left text-foreground text-sm font-medium">{{ t('styleCustomizer.themeModeLabel', '主题模式:') }}</label> <!-- TODO: 添加翻译 -->
+                <div class="flex gap-2 justify-start">
+                    <button @click="handleResetUiTheme" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('styleCustomizer.defaultMode', '默认模式') }}</button> <!-- TODO: 添加翻译 -->
+                    <button @click="applyDarkMode" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap">{{ t('styleCustomizer.darkMode', '黑暗模式') }}</button> <!-- TODO: 添加翻译 -->
                 </div>
             </div>
-            <p>{{ t('styleCustomizer.uiDescription') }}</p>
+            <p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.uiDescription') }}</p>
             <!-- 动态生成 UI 样式编辑控件 -->
-            <div v-for="(value, key) in editableUiTheme" :key="key" class="form-group">
-              <label :for="`ui-${key}`">{{ formatLabel(key) }}:</label>
+            <div v-for="(value, key) in editableUiTheme" :key="key" class="grid grid-cols-[auto_1fr] items-center gap-x-3 gap-y-1 mb-3">
+              <label :for="`ui-${key}`" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full">{{ formatLabel(key) }}:</label>
               <!-- Container for color picker and text display -->
-              <div class="color-input-group">
+              <div class="flex items-center gap-2 w-full">
                 <!-- Color Picker -->
                 <input
                   v-if="typeof value === 'string' && (value.startsWith('#') || value.startsWith('rgb') || value.startsWith('hsl'))"
                   type="color"
                   :id="`ui-${key}`"
                   v-model="editableUiTheme[key]"
-                  class="color-picker-input"
+                  class="p-0.5 h-[34px] min-w-[40px] max-w-[50px] rounded border border-border flex-shrink-0 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
                 />
                 <!-- Readonly text input to display and copy color value -->
                 <input
@@ -873,7 +900,7 @@ const handleFocusAndSelect = (event: FocusEvent) => {
                   type="text"
                   :value="editableUiTheme[key]"
                   readonly
-                  class="color-text-input text-input"
+                  class="flex-grow min-w-[80px] bg-header cursor-text border border-border px-[0.7rem] py-2 rounded text-sm text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                   @focus="handleFocusAndSelect"
                 />
                 <!-- Fallback for non-color values -->
@@ -882,15 +909,15 @@ const handleFocusAndSelect = (event: FocusEvent) => {
                   type="text"
                   :id="`ui-${key}`"
                   v-model="editableUiTheme[key]"
-                  class="text-input full-span-input"
+                  class="col-span-full border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                 />
               </div>
             </div>
             <!-- UI Theme Textarea -->
             <hr style="margin-top: calc(var(--base-padding) * 2); margin-bottom: calc(var(--base-padding) * 2);">
-            <h4>{{ t('styleCustomizer.uiThemeJsonEditorTitle') }}</h4> <!-- TODO: Add translation -->
-            <p>{{ t('styleCustomizer.uiThemeJsonEditorDesc') }}</p> <!-- TODO: Add translation -->
-            <div class="form-group full-width-group"> <!-- Use a class for full width -->
+            <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.uiThemeJsonEditorTitle') }}</h4> <!-- TODO: Add translation -->
+            <p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.uiThemeJsonEditorDesc') }}</p> <!-- TODO: Add translation -->
+            <div class="mt-4"> <!-- Removed form-group, added margin -->
                <label for="uiThemeTextarea" class="sr-only">{{ t('styleCustomizer.uiThemeJsonEditorTitle') }}</label> <!-- Screen reader only label -->
                <textarea
                  id="uiThemeTextarea"
@@ -899,78 +926,97 @@ const handleFocusAndSelect = (event: FocusEvent) => {
                  rows="15"
                  :placeholder="'--app-bg-color: #ffffff\n--text-color: #333333\n...'"
                  spellcheck="false"
-                 class="json-textarea"
+                 class="w-full font-mono text-sm leading-snug border border-border rounded p-3 bg-background text-foreground resize-y min-h-[200px] box-border whitespace-pre-wrap break-words transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                ></textarea>
             </div>
-             <p v-if="themeParseError" class="error-message full-width-group">{{ themeParseError }}</p>
-          </section>
+             <p v-if="themeParseError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mt-2">{{ themeParseError }}</p> <!-- Adjusted error styles -->
+         </section>
           <section v-if="currentTab === 'terminal' && !isEditingTheme">
-            <h3>{{ t('styleCustomizer.terminalStyles') }}</h3>
+            <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.terminalStyles') }}</h3>
             <!-- 终端字体设置 -->
-            <div class="form-group">
-                <label for="terminalFontFamily">{{ t('styleCustomizer.terminalFontFamily') }}:</label>
-                <input type="text" id="terminalFontFamily" v-model="editableTerminalFontFamily" class="text-input wide-input" :placeholder="t('styleCustomizer.terminalFontPlaceholder')"/>
-                <button @click="handleSaveTerminalFont" class="button-inline">{{ t('common.save') }}</button>
+            <div class="grid grid-cols-[auto_1fr_auto] items-center gap-3 mb-3">
+                <label for="terminalFontFamily" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full">{{ t('styleCustomizer.terminalFontFamily') }}:</label>
+                <input type="text" id="terminalFontFamily" v-model="editableTerminalFontFamily" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" :placeholder="t('styleCustomizer.terminalFontPlaceholder')"/>
+                <button @click="handleSaveTerminalFont" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start">{{ t('common.save') }}</button> <!-- Applied inline button styles -->
             </div>
-            <p class="setting-description">{{ t('styleCustomizer.terminalFontDescription') }}</p>
+            <p class="text-xs text-text-secondary -mt-1 mb-2">{{ t('styleCustomizer.terminalFontDescription') }}</p>
 
             <!-- 终端字体大小设置 -->
-            <div class="form-group">
-                <label for="terminalFontSize">{{ t('styleCustomizer.terminalFontSize') }}:</label> <!-- 需要添加翻译 -->
-                <input type="number" id="terminalFontSize" v-model.number="editableTerminalFontSize" class="number-input" min="1" />
-                <button @click="handleSaveTerminalFontSize" class="button-inline">{{ t('common.save') }}</button>
+            <div class="grid grid-cols-[auto_1fr_auto] items-center gap-3 mb-3">
+                <label for="terminalFontSize" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full">{{ t('styleCustomizer.terminalFontSize') }}:</label> <!-- 需要添加翻译 -->
+                <input type="number" id="terminalFontSize" v-model.number="editableTerminalFontSize" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground max-w-[100px] justify-self-start box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" min="1" />
+                <button @click="handleSaveTerminalFontSize" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start">{{ t('common.save') }}</button> <!-- Applied inline button styles -->
             </div>
 
             <hr>
 
             <!-- 终端主题选择与管理 -->
-            <h4>{{ t('styleCustomizer.terminalThemeSelection') }}</h4>
+            <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalThemeSelection') }}</h4>
              <!-- 显示当前激活主题 -->
-             <div class="active-theme-display">
-                 <span>{{ t('styleCustomizer.activeTheme') }}:</span>
-                 <strong>{{ activeThemeName }}</strong>
+             <div class="mb-4 py-2 text-[0.95rem] flex items-center gap-3">
+                 <span class="text-text-secondary">{{ t('styleCustomizer.activeTheme') }}:</span>
+                 <strong class="text-foreground font-semibold">{{ activeThemeName }}</strong>
                  <!-- 导出按钮移到管理按钮区域 -->
              </div>
 
              <!-- 主题管理按钮 -->
-             <div class="theme-management-buttons">
-                 <button @click="handleAddNewTheme">{{ t('styleCustomizer.addNewTheme') }}</button>
-                 <button @click="handleTriggerImport">{{ t('styleCustomizer.importTheme') }}</button>
-                 <button @click="handleExportActiveTheme" :disabled="!activeTerminalThemeId" class="button-inline button-small" :title="t('styleCustomizer.exportActiveThemeTooltip', 'Export the currently active theme as a JSON file')">{{ t('styleCustomizer.exportActiveTheme', 'Export Active Theme') }}</button>
-                 <input type="file" ref="themeImportInput" @change="handleImportThemeFile" accept=".json" style="display: none;" />
-                 <p v-if="importError" class="error-message">{{ importError }}</p>
+             <div class="mt-4 mb-6 flex gap-2 flex-wrap items-center pb-4 border-b border-dashed border-border">
+                 <button @click="handleAddNewTheme" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.addNewTheme') }}</button>
+                 <button @click="handleTriggerImport" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.importTheme') }}</button>
+                 <button @click="handleExportActiveTheme" :disabled="!activeTerminalThemeId" class="px-2 py-1 text-xs border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed" :title="t('styleCustomizer.exportActiveThemeTooltip', 'Export the currently active theme as a JSON file')">{{ t('styleCustomizer.exportActiveTheme', 'Export Active Theme') }}</button>
+                 <input type="file" ref="themeImportInput" @change="handleImportThemeFile" accept=".json" class="hidden" /> <!-- Use hidden class -->
+                 <p v-if="importError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm w-full flex-grow m-0 text-left">{{ importError }}</p> <!-- Adjusted error styles -->
              </div>
 
 
              <!-- 搜索框移到列表上方 -->
-             <div class="theme-search-bar">
+             <div class="mb-4">
                   <input
                       type="text"
                       v-model="themeSearchTerm"
                       :placeholder="t('styleCustomizer.searchThemePlaceholder', '搜索主题名称...')"
-                      class="text-input"
+                      class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                   />
              </div>
 
              <!-- 主题列表 -->
-             <ul class="theme-list">
+             <ul class="list-none p-0 mt-4 max-h-[280px] overflow-y-auto border border-border rounded bg-background">
                  <!-- 添加空状态提示 -->
-                 <li v-if="filteredAndSortedThemes.length === 0" class="empty-list-item">
+                 <li v-if="filteredAndSortedThemes.length === 0" class="col-span-full text-center text-text-secondary p-4 italic">
                      {{ t('styleCustomizer.noThemesFound', 'No matching themes found') }}
                  </li>
-                 <li v-else v-for="theme in filteredAndSortedThemes" :key="theme._id" :class="{ 'preset-theme': theme.isPreset, 'active': theme._id === activeTerminalThemeId }">
-                     <!-- 应用按钮移到 theme-actions -->
-                     <span class="theme-name" :title="theme.name">{{ theme.name }}</span>
-                     <div class="theme-actions">
+                 <li v-else v-for="(theme, index) in filteredAndSortedThemes" :key="theme._id"
+                    :class="[
+                      'grid grid-cols-[1fr_auto] items-center px-3 py-2.5 text-[0.95rem] transition-colors duration-200 ease-in-out gap-2 hover:bg-header',
+                      index < filteredAndSortedThemes.length - 1 ? 'border-b border-border' : '', // Add border-b unless it's the last item
+                      { 'bg-button text-button-text': theme._id === activeTerminalThemeId?.toString() } // Compare as strings
+                    ]"
+                 >
+                     <span class="col-start-1 col-end-2 overflow-hidden text-ellipsis whitespace-nowrap" :class="theme._id === activeTerminalThemeId?.toString() ? 'font-bold text-button-text' : 'text-foreground'" :title="theme.name">{{ theme.name }}</span>
+                     <div class="col-start-2 col-end-3 flex-shrink-0 flex gap-2 justify-end">
                           <button
                               @click="handleApplyTheme(theme)"
-                              :disabled="theme._id === activeTerminalThemeId"
+                              :disabled="theme._id === activeTerminalThemeId?.toString()"
                               :title="t('styleCustomizer.applyThemeTooltip', 'Apply this theme')"
+                              :class="[
+                                'px-3 py-1.5 text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed',
+                                theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50 disabled:opacity-50 disabled:cursor-default disabled:bg-transparent disabled:border-transparent' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
+                              ]"
                           >
                               {{ t('styleCustomizer.applyButton', 'Apply') }}
                           </button>
-                         <button @click="handleEditTheme(theme)" :title="theme.isPreset ? t('styleCustomizer.editAsCopy', 'Edit as Copy') : t('common.edit')">{{ t('common.edit') }}</button>
-                         <button @click="handleDeleteTheme(theme)" :disabled="theme.isPreset" class="button-danger" :title="theme.isPreset ? t('styleCustomizer.cannotDeletePreset', 'Cannot delete preset theme') : t('common.delete')">{{ t('common.delete') }}</button>
+                         <button @click="handleEditTheme(theme)" :title="theme.isPreset ? t('styleCustomizer.editAsCopy', 'Edit as Copy') : t('common.edit')"
+                            :class="[
+                              'px-3 py-1.5 text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed',
+                              theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'border-border bg-header text-foreground hover:bg-border hover:border-text-secondary'
+                            ]"
+                         >{{ t('common.edit') }}</button>
+                         <button @click="handleDeleteTheme(theme)" :disabled="theme.isPreset" :title="theme.isPreset ? t('styleCustomizer.cannotDeletePreset', 'Cannot delete preset theme') : t('common.delete')"
+                            :class="[
+                              'px-3 py-1.5 text-sm border rounded transition-colors duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed',
+                              theme._id === activeTerminalThemeId?.toString() ? 'text-button-text border-white/30 bg-white/10 hover:bg-white/20 hover:border-white/50' : 'bg-error/10 text-error border-error/30 hover:bg-error/20' // Danger styles for non-active
+                            ]"
+                         >{{ t('common.delete') }}</button>
                      </div>
                  </li>
              </ul>
@@ -979,28 +1025,28 @@ const handleFocusAndSelect = (event: FocusEvent) => {
 
             <!-- 主题编辑器 -->
             <section v-if="isEditingTheme && editingTheme">
-                <h3>{{ editingTheme._id ? t('styleCustomizer.editThemeTitle') : t('styleCustomizer.newThemeTitle') }}</h3>
-                 <p v-if="saveThemeError" class="error-message">{{ saveThemeError }}</p>
-                <div class="form-group">
-                    <label for="editingThemeName">{{ t('styleCustomizer.themeName') }}:</label>
-                    <input type="text" id="editingThemeName" v-model="editingTheme.name" required class="text-input"/>
+                <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ editingTheme._id ? t('styleCustomizer.editThemeTitle') : t('styleCustomizer.newThemeTitle') }}</h3>
+                 <p v-if="saveThemeError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mb-3">{{ saveThemeError }}</p> <!-- Adjusted error styles -->
+                <div class="grid grid-cols-[auto_1fr] items-center gap-2 mb-2"> <!-- Theme editor uses 2-col grid -->
+                    <label for="editingThemeName" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full">{{ t('styleCustomizer.themeName') }}:</label>
+                    <input type="text" id="editingThemeName" v-model="editingTheme.name" required class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"/>
                 </div>
 
-                 <hr style="margin-top: calc(var(--base-padding) * 2); margin-bottom: calc(var(--base-padding) * 2);">
-                 <h4>{{ t('styleCustomizer.terminalThemeColorEditorTitle') }}</h4> <!-- TODO: Add translation -->
+                 <hr class="my-8 border-border"> <!-- Replaced inline style with Tailwind -->
+                 <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalThemeColorEditorTitle') }}</h4> <!-- TODO: Add translation -->
 
                  <!-- 动态生成终端样式编辑控件 -->
-              <div v-for="(value, key) in editingTheme.themeData" :key="key" class="form-group">
-                <label :for="`xterm-${key}`">{{ formatXtermLabel(key as keyof ITheme) }}:</label>
+              <div v-for="(value, key) in editingTheme.themeData" :key="key" class="grid grid-cols-[auto_1fr] items-center gap-2 mb-2"> <!-- Theme editor uses 2-col grid -->
+                <label :for="`xterm-${key}`" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full">{{ formatXtermLabel(key as keyof ITheme) }}:</label>
                  <!-- Container for color picker and text display -->
-                <div class="color-input-group">
+                <div class="flex items-center gap-2 w-full"> <!-- Applied flex, gap, width -->
                   <!-- Color Picker -->
                   <input
                     v-if="typeof value === 'string' && value.startsWith('#')"
                     type="color"
                     :id="`xterm-${key}`"
                     v-model="(editingTheme.themeData as any)[key]"
-                    class="color-picker-input"
+                    class="p-0.5 h-[34px] min-w-[40px] max-w-[50px] rounded border border-border flex-shrink-0 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
                   />
                   <!-- Readonly text input to display and copy color value -->
                   <input
@@ -1008,7 +1054,7 @@ const handleFocusAndSelect = (event: FocusEvent) => {
                     type="text"
                     :value="(editingTheme.themeData as any)[key]"
                     readonly
-                    class="color-text-input text-input"
+                    class="flex-grow min-w-[80px] bg-header cursor-text border border-border px-[0.7rem] py-2 rounded text-sm text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                     @focus="handleFocusAndSelect"
                   />
                   <!-- Fallback for non-color values -->
@@ -1017,7 +1063,7 @@ const handleFocusAndSelect = (event: FocusEvent) => {
                     type="text"
                     :id="`xterm-${key}`"
                     v-model="(editingTheme.themeData as any)[key]"
-                    class="text-input full-span-input"
+                    class="col-span-full border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground w-full box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                   />
                 </div>
              </div>
@@ -1025,10 +1071,10 @@ const handleFocusAndSelect = (event: FocusEvent) => {
               <!-- <p v-if="terminalThemeParseError" class="error-message full-width-group">{{ terminalThemeParseError }}</p> --> <!-- 错误消息统一显示在 Textarea 下方 -->
 
                 <!-- Terminal Theme Textarea -->
-                <hr style="margin-top: calc(var(--base-padding) * 2); margin-bottom: calc(var(--base-padding) * 2);">
-                <h4>{{ t('styleCustomizer.terminalThemeJsonEditorTitle') }}</h4> <!-- TODO: Add translation -->
-                <p>{{ t('styleCustomizer.terminalThemeJsonEditorDesc') }}</p> <!-- TODO: Add translation -->
-                <div class="form-group full-width-group">
+                <hr class="my-8 border-border"> <!-- Replaced inline style with Tailwind -->
+                <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalThemeJsonEditorTitle') }}</h4> <!-- TODO: Add translation -->
+                <p class="text-text-secondary text-sm leading-relaxed mb-3">{{ t('styleCustomizer.terminalThemeJsonEditorDesc') }}</p> <!-- TODO: Add translation -->
+                <div class="mt-4"> <!-- Removed form-group, added margin -->
                    <label for="terminalThemeTextarea" class="sr-only">{{ t('styleCustomizer.terminalThemeJsonEditorTitle') }}</label>
                    <textarea
                      id="terminalThemeTextarea"
@@ -1037,778 +1083,70 @@ const handleFocusAndSelect = (event: FocusEvent) => {
                      rows="15"
                      :placeholder="terminalThemePlaceholder"
                      spellcheck="false"
-                     class="json-textarea"
+                     class="w-full font-mono text-sm leading-snug border border-border rounded p-3 bg-background text-foreground resize-y min-h-[200px] box-border whitespace-pre-wrap break-words transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
                    ></textarea>
                 </div>
-                 <p v-if="terminalThemeParseError" class="error-message full-width-group">{{ terminalThemeParseError }}</p>
-             <div class="editor-footer">
-                 <button @click="handleCancelEditingTheme" class="button-secondary">{{ t('common.cancel') }}</button>
-                 <button @click="handleSaveEditingTheme" class="button-primary">{{ t('common.save') }}</button>
+                 <p v-if="terminalThemeParseError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mt-2">{{ terminalThemeParseError }}</p> <!-- Adjusted error styles -->
+            <div class="mt-4 flex justify-end gap-2 pt-4 border-t border-border">
+                 <button @click="handleCancelEditingTheme" class="px-5 py-2 rounded font-bold border border-border bg-header text-foreground hover:bg-border disabled:opacity-60 disabled:cursor-not-allowed">{{ t('common.cancel') }}</button>
+                 <button @click="handleSaveEditingTheme" class="px-5 py-2 rounded font-bold border border-button bg-button text-button-text hover:bg-button-hover hover:border-button-hover disabled:opacity-60 disabled:cursor-not-allowed">{{ t('common.save') }}</button>
              </div>
            </section>
 
            <section v-if="currentTab === 'background'">
-                <h3>{{ t('styleCustomizer.backgroundSettings') }}</h3>
+                <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.backgroundSettings') }}</h3>
 
                 <!-- 页面背景 -->
-                <h4>{{ t('styleCustomizer.pageBackground') }}</h4>
-                <div class="background-preview" :style="{ backgroundImage: pageBackgroundImage ? `url(${pageBackgroundImage})` : 'none' }">
-                    {{ pageBackgroundImage ? '' : t('styleCustomizer.noBackground') }}
+                <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.pageBackground') }}</h4>
+                <div class="w-full h-[150px] border border-dashed border-border mb-2 flex justify-center items-center text-text-secondary bg-cover bg-center bg-no-repeat rounded bg-header relative overflow-hidden" :style="{ backgroundImage: pageBackgroundImage ? `url(${pageBackgroundImage})` : 'none' }">
+                    <span v-if="!pageBackgroundImage" class="bg-white/80 px-3 py-1.5 rounded text-sm font-medium text-foreground shadow-sm">{{ t('styleCustomizer.noBackground') }}</span>
                 </div>
-                <div class="background-controls">
-                    <button @click="handleTriggerPageBgUpload">{{ t('styleCustomizer.uploadPageBg') }}</button>
-                    <button @click="handleRemovePageBg" :disabled="!pageBackgroundImage" class="button-danger">{{ t('styleCustomizer.removePageBg') }}</button>
-                    <input type="file" ref="pageBgFileInput" @change="handlePageBgUpload" accept="image/*" style="display: none;" />
+                <div class="flex gap-2 mb-4 flex-wrap items-center">
+                    <button @click="handleTriggerPageBgUpload" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.uploadPageBg') }}</button>
+                    <button @click="handleRemovePageBg" :disabled="!pageBackgroundImage" class="px-3 py-1.5 text-sm border rounded transition duration-200 ease-in-out whitespace-nowrap bg-error/10 text-error border-error/30 hover:bg-error/20 disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.removePageBg') }}</button> <!-- Applied danger button styles -->
+                    <input type="file" ref="pageBgFileInput" @change="handlePageBgUpload" accept="image/*" class="hidden" /> <!-- Use hidden class -->
                 </div>
                  <!-- Removed Opacity Slider -->
-                 <p v-if="uploadError" class="error-message">{{ uploadError }}</p>
+                 <p v-if="uploadError" class="text-error-text bg-error/10 border border-error/30 px-3 py-2 rounded text-sm mt-2">{{ uploadError }}</p> <!-- Adjusted error styles -->
 
-                <hr>
+                <hr class="my-8 border-border"> <!-- Replaced inline style with Tailwind -->
 
                 <!-- 终端背景 -->
-                <h4>{{ t('styleCustomizer.terminalBackground') }}</h4>
-                 <div class="background-preview" :style="{ backgroundImage: terminalBackgroundImage ? `url(${terminalBackgroundImage})` : 'none' }">
-                     {{ terminalBackgroundImage ? '' : t('styleCustomizer.noBackground') }}
+                <h4 class="mt-6 mb-2 text-base font-semibold text-foreground">{{ t('styleCustomizer.terminalBackground') }}</h4>
+                 <div class="w-full h-[150px] border border-dashed border-border mb-2 flex justify-center items-center text-text-secondary bg-cover bg-center bg-no-repeat rounded bg-header relative overflow-hidden" :style="{ backgroundImage: terminalBackgroundImage ? `url(${terminalBackgroundImage})` : 'none' }">
+                     <span v-if="!terminalBackgroundImage" class="bg-white/80 px-3 py-1.5 rounded text-sm font-medium text-foreground shadow-sm">{{ t('styleCustomizer.noBackground') }}</span>
                  </div>
-                 <div class="background-controls">
-                    <button @click="handleTriggerTerminalBgUpload">{{ t('styleCustomizer.uploadTerminalBg') }}</button>
-                    <button @click="handleRemoveTerminalBg" :disabled="!terminalBackgroundImage" class="button-danger">{{ t('styleCustomizer.removeTerminalBg') }}</button>
-                    <input type="file" ref="terminalBgFileInput" @change="handleTerminalBgUpload" accept="image/*" style="display: none;" />
+                 <div class="flex gap-2 mb-4 flex-wrap items-center">
+                    <button @click="handleTriggerTerminalBgUpload" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.uploadTerminalBg') }}</button>
+                    <button @click="handleRemoveTerminalBg" :disabled="!terminalBackgroundImage" class="px-3 py-1.5 text-sm border rounded transition duration-200 ease-in-out whitespace-nowrap bg-error/10 text-error border-error/30 hover:bg-error/20 disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.removeTerminalBg') }}</button> <!-- Applied danger button styles -->
+                    <input type="file" ref="terminalBgFileInput" @change="handleTerminalBgUpload" accept="image/*" class="hidden" /> <!-- Use hidden class -->
                 </div>
                  <!-- Removed Opacity Slider -->
 
            </section>
            <section v-if="currentTab === 'other'">
-             <h3>{{ t('styleCustomizer.otherSettings') }}</h3> <!-- 需要添加翻译 -->
+             <h3 class="mt-0 border-b border-border pb-2 mb-4 text-lg font-semibold text-foreground">{{ t('styleCustomizer.otherSettings') }}</h3> <!-- 需要添加翻译 -->
              <!-- 编辑器字体大小设置 -->
-             <div class="form-group">
-                 <label for="editorFontSize">{{ t('styleCustomizer.editorFontSize') }}:</label> <!-- 需要添加翻译 -->
-                 <input type="number" id="editorFontSize" v-model.number="editableEditorFontSize" class="number-input" min="1" />
-                 <button @click="handleSaveEditorFontSize" class="button-inline">{{ t('common.save') }}</button>
+             <div class="grid grid-cols-[auto_1fr_auto] items-center gap-3 mb-3">
+                 <label for="editorFontSize" class="text-left text-foreground text-sm font-medium overflow-hidden text-ellipsis block w-full">{{ t('styleCustomizer.editorFontSize') }}:</label> <!-- 需要添加翻译 -->
+                 <input type="number" id="editorFontSize" v-model.number="editableEditorFontSize" class="border border-border px-[0.7rem] py-2 rounded text-sm bg-background text-foreground max-w-[100px] justify-self-start box-border transition duration-200 ease-in-out focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary" min="1" />
+                 <button @click="handleSaveEditorFontSize" class="px-3 py-1.5 text-sm border border-border rounded bg-header hover:bg-border transition duration-200 ease-in-out whitespace-nowrap justify-self-start">{{ t('common.save') }}</button> <!-- Applied inline button styles -->
              </div>
            </section>
         </main>
       </div>
-      <footer class="panel-footer">
+      <footer class="flex justify-end p-4 border-t border-border bg-footer flex-shrink-0">
         <!-- 根据当前 tab 或状态显示不同的按钮 -->
-        <button v-if="currentTab === 'ui'" @click="handleResetUiTheme" class="button-secondary">{{ t('styleCustomizer.resetUiTheme') }}</button>
-        <button v-if="currentTab === 'ui'" @click="handleSaveUiTheme" class="button-primary">{{ t('styleCustomizer.saveUiTheme') }}</button>
+        <button v-if="currentTab === 'ui'" @click="handleResetUiTheme" class="px-5 py-2 rounded font-bold ml-2 border border-border bg-header text-foreground hover:bg-border disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.resetUiTheme') }}</button>
+        <button v-if="currentTab === 'ui'" @click="handleSaveUiTheme" class="px-5 py-2 rounded font-bold ml-2 border border-button bg-button text-button-text hover:bg-button-hover hover:border-button-hover disabled:opacity-60 disabled:cursor-not-allowed">{{ t('styleCustomizer.saveUiTheme') }}</button>
         <!-- 终端字体和主题选择是即时保存的，不需要单独的保存按钮 -->
         <!-- 背景设置也是即时保存的 -->
-        <button @click="closeCustomizer" class="button-secondary">{{ t('common.close') }}</button> <!-- 添加一个通用的关闭按钮 -->
+        <button @click="closeCustomizer" class="px-5 py-2 rounded font-bold ml-2 border border-border bg-header text-foreground hover:bg-border disabled:opacity-60 disabled:cursor-not-allowed">{{ t('common.close') }}</button> <!-- 添加一个通用的关闭按钮 -->
       </footer>
     </div>
   </div>
 </template>
 
 <style scoped>
-.style-customizer-overlay {
-  position: fixed;
-  inset: 0; /* top, right, bottom, left = 0 */
-  background-color: rgba(0, 0, 0, 0.6); /* 更深的遮罩 */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.style-customizer-panel {
-  background-color: var(--app-bg-color);
-  color: var(--text-color);
-  border-radius: 8px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-  width: 90%;
-  max-width: 800px; /* 增加最大宽度 */
-  height: 85vh; /* 使用视口高度 */
-  max-height: 700px; /* 限制最大高度 */
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.panel-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: calc(var(--base-padding) * 0.8) var(--base-padding); /* 调整内边距 */
-  border-bottom: 1px solid var(--border-color);
-  background-color: var(--header-bg-color);
-  flex-shrink: 0; /* 防止头部被压缩 */
-}
-
-.panel-header h2 {
-  margin: 0;
-  font-size: 1.25rem; /* 稍大标题 */
-  color: var(--text-color);
-}
-
-.close-button {
-  background: none;
-  border: none;
-  font-size: 1.8rem; /* 增大关闭按钮 */
-  line-height: 1;
-  cursor: pointer;
-  color: var(--text-color-secondary);
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-}
-.close-button:hover {
-    color: var(--text-color);
-    background-color: rgba(0,0,0,0.1);
-}
-
-.panel-content {
-  display: flex;
-  flex-grow: 1;
-  overflow: hidden; /* 防止内部滚动条影响布局 */
-}
-
-.panel-nav {
-  width: 180px; /* 增加导航宽度 */
-  border-right: 1px solid var(--border-color);
-  padding: var(--base-padding);
-  background-color: var(--header-bg-color);
-  flex-shrink: 0;
-  overflow-y: auto; /* 导航内部滚动 */
-}
-
-.panel-nav button {
-  display: block;
-  width: 100%;
-  padding: 0.7rem 0.8rem; /* 增加导航按钮内边距 */
-  margin-bottom: var(--base-margin);
-  text-align: left;
-  background: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  cursor: pointer;
-  color: var(--text-color);
-  font-size: 0.95rem;
-  transition: background-color 0.2s ease, color 0.2s ease;
-}
-
-.panel-nav button:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-
-.panel-nav button.active {
-  background-color: var(--button-bg-color); /* 使用按钮背景色 */
-  color: var(--button-text-color);
-  font-weight: bold;
-}
-.panel-nav button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background-color: transparent !important;
-    color: var(--text-color-secondary);
-}
-
-.panel-main {
-  flex-grow: 1;
-  padding: var(--base-padding) calc(var(--base-padding) * 1.5); /* 增加左右内边距 */
-  overflow-y: auto; /* 主要内容区域滚动 */
-}
-
-.panel-main h3 {
-  margin-top: 0;
-  border-bottom: 1px solid var(--border-color);
-  padding-bottom: var(--base-margin);
-  margin-bottom: calc(var(--base-margin) * 2);
-  font-size: 1.15rem;
-  color: var(--text-color);
-}
-.panel-main h4 {
-    margin-top: calc(var(--base-margin) * 2.5);
-    margin-bottom: var(--base-margin);
-    color: var(--text-color);
-    font-size: 1.05rem;
-}
-
-.panel-main p:not(.error-message):not(.setting-description) {
-    color: var(--text-color-secondary);
-    font-size: 0.9rem;
-    line-height: 1.6;
-    margin-bottom: calc(var(--base-margin) * 1.5);
-}
-
-.setting-description {
-    font-size: 0.85rem;
-    color: var(--text-color-secondary);
-    margin-top: calc(var(--base-margin) / -2); /* 减少与上方元素的间距 */
-    margin-bottom: var(--base-margin);
-}
-
-.form-group {
-    margin-bottom: calc(var(--base-margin) * 1.5);
-    display: grid;
-    /* Define grid columns: Auto label, flexible control, auto button */
-    grid-template-columns: auto minmax(0, 1fr) auto; /* Let label width adjust */
-    align-items: center; /* Vertically center items in the row */
-    gap: calc(var(--base-margin) * 1.5); /* Increase gap slightly for better spacing */
-}
-/* Special class for full-width elements like textarea */
-.form-group.full-width-group, .error-message.full-width-group {
-    grid-column: 1 / -1; /* Span all columns */
-    gap: calc(var(--base-margin) / 2); /* Smaller gap for label/textarea */
-}
-.form-group.full-width-group label:not(.sr-only) { /* Adjust label if not screen-reader only */
-    grid-column: 1 / 2; /* Ensure label stays in its place if visible */
-    margin-bottom: calc(var(--base-margin) / 3);
-}
-
-/* Adjust grid for rows without a third element (like inline buttons) */
-.form-group > *:nth-child(2):last-child {
-    grid-column: 2 / 4; /* Let the second element span if it's the last */
-}
-/* Specific adjustments for theme editor rows if needed */
-section[v-if*="isEditingTheme"] .form-group {
-     /* Keep 2 columns for editor: auto label + flexible input */
-    grid-template-columns: auto 1fr;
-    margin-bottom: var(--base-margin);
-    gap: var(--base-margin); /* Keep editor gap smaller */
-}
-
-
-.form-group label {
-    grid-column: 1 / 2;
-    text-align: left; /* Keep text aligned to the left */
-    /* justify-self: start; Removed */
-    padding-right: 0; /* Ensure no right padding interferes */
-    padding-left: 0; /* Ensure no left padding interferes */
-    color: var(--text-color);
-    font-size: 0.9rem;
-    margin-bottom: 0;
-    /* white-space: nowrap; Removed in case it affects alignment */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: 500; /* 稍微加粗标签 */
-    /* Ensure it behaves predictably within the grid cell */
-    display: block; /* Or inline-block if needed, but block is usually fine */
-    width: 100%; /* Occupy the auto-calculated width */
-}
-
-/* 输入控件 */
-.form-group input[type="color"],
-.form-group input[type="text"].text-input,
-.form-group input[type="number"].number-input, /* <-- 添加 number-input */
-.form-group select {
-    grid-column: 2 / 3;
-    border: 1px solid var(--border-color);
-    padding: 0.5rem 0.7rem;
-    border-radius: 4px;
-    font-size: 0.9rem;
-    background-color: var(--app-bg-color);
-    color: var(--text-color);
-    width: 100%;
-    box-sizing: border-box;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
-}
-.color-input-group {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem; /* Space between color picker and text input */
-    grid-column: 2 / 3; /* Ensure the group stays in the second column */
-    width: 100%; /* Take full width of the column */
-}
-.color-picker-input {
-    padding: 2px !important; /* Override general padding */
-    height: 34px !important; /* Match text input height */
-    min-width: 40px !important; /* Slightly smaller */
-    max-width: 50px !important;
-    border-radius: 4px !important;
-    border: 1px solid var(--border-color) !important; /* Add border */
-    flex-shrink: 0; /* Prevent shrinking */
-}
-.color-text-input {
-    flex-grow: 1; /* Allow text input to take remaining space */
-    min-width: 80px; /* Minimum width for text */
-    background-color: var(--header-bg-color) !important; /* Indicate readonly */
-    cursor: text; /* Allow text selection cursor */
-}
-.full-span-input {
-    grid-column: 1 / -1; /* Make non-color inputs span the whole group width */
-}
-
-.form-group input:focus, .form-group select:focus {
-    border-color: var(--link-active-color);
-    outline: 0;
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); /* 调整聚焦阴影 */
-}
-
-/* Input controls (text, color, select) */
-.form-group input[type="color"],
-.form-group input[type="text"].text-input,
-.form-group input[type="number"].number-input, /* <-- 添加 number-input */
-.form-group select {
-    grid-column: 2 / 3; /* Place in the second column */
-    /* Existing styles below... */
-    border: 1px solid var(--border-color);
-    padding: 0.5rem 0.7rem;
-    border-radius: 4px;
-    font-size: 0.9rem;
-    background-color: var(--app-bg-color);
-    color: var(--text-color);
-    width: 100%;
-    box-sizing: border-box;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease; /* 添加过渡效果 */
-}
-.form-group input[type="color"] {
-    padding: 2px;
-    height: 34px;
-    min-width: 50px;
-    max-width: 70px;
-    justify-self: start;
-    border-radius: 4px; /* 保持圆角一致 */
-}
-.form-group input[type="number"].number-input {
-    max-width: 100px; /* 限制数字输入框宽度 */
-    justify-self: start;
-}
-.form-group input:focus, .form-group select:focus, .form-group input[type="number"]:focus { /* <-- 添加 number input focus */
-    border-color: var(--link-active-color);
-    outline: 0;
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); /* 调整聚焦阴影 */
-}
-/* Style for JSON Textarea */
-.json-textarea {
-    width: 100%;
-    font-family: var(--font-family-monospace); /* Use monospace font */
-    font-size: 0.9em;
-    line-height: 1.4;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    padding: 0.8rem;
-    background-color: var(--input-bg-color, var(--app-bg-color));
-    color: var(--text-color);
-    resize: vertical;
-    min-height: 200px; /* Ensure decent minimum height */
-    box-sizing: border-box;
-    white-space: pre-wrap; /* 确保换行符和空格被保留，并允许文本换行 */
-    overflow-wrap: break-word; /* 确保长单词在需要时能断开 */
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-.json-textarea:focus {
-    border-color: var(--link-active-color);
-    outline: 0;
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
-}
-
-
-/* Inline buttons within form-group */
-.form-group .button-inline,
-.form-group .button-danger {
-    grid-column: 3 / 4; /* Place in the third column */
-    margin-left: 0; /* Reset margin if needed */
-    padding: 0.4rem 0.8rem;
-    font-size: 0.9rem;
-    border: 1px solid var(--border-color);
-    white-space: nowrap;
-    justify-self: start;
-    border-radius: 4px; /* 统一圆角 */
-    transition: background-color 0.2s ease, border-color 0.2s ease; /* 添加过渡 */
-}
-.button-inline {
-    background-color: var(--header-bg-color); /* Default inline button style */
-    color: var(--text-color);
-}
-.form-group .button-inline:hover:not(:disabled) {
-    background-color: var(--border-color);
-    border-color: var(--text-color-secondary);
-}
-/* Danger button specific styles remain */
-.form-group .button-danger {
-    background-color: #f8d7da;
-    color: #842029;
-    border-color: #f5c2c7;
-}
-.form-group .button-danger:hover:not(:disabled) {
-    background-color: #f1aeb5;
-    border-color: #ec8a98;
-}
-.form-group .button-danger:disabled,
-.form-group .button-inline:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-
-
-hr {
-    border: none;
-    border-top: 1px solid var(--border-color);
-    margin: calc(var(--base-padding) * 2) 0;
-}
-
-/* Theme Management Styles */
-.theme-management-buttons {
-    margin-top: var(--base-padding);
-    margin-bottom: calc(var(--base-padding) * 1.5);
-    display: flex;
-    gap: var(--base-margin);
-    flex-wrap: wrap;
-    align-items: center; /* 垂直居中按钮和错误消息 */
-    padding-bottom: var(--base-padding);
-    border-bottom: 1px dashed var(--border-color);
-}
-/* Apply unified styles to theme management buttons - matching button-inline */
-.theme-management-buttons button {
-    padding: 0.4rem 0.8rem; /* Match button-inline */
-    font-size: 0.9rem; /* Match button-inline */
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background-color: var(--header-bg-color); /* Match button-inline */
-    color: var(--text-color);
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-    white-space: nowrap; /* Match button-inline */
-}
-.theme-management-buttons button:hover:not(:disabled) {
-    background-color: var(--border-color); /* Match button-inline hover */
-    border-color: var(--text-color-secondary);
-}
-.theme-management-buttons button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-.theme-management-buttons .error-message {
-    margin: 0; /* 移除错误消息的默认外边距 */
-    flex-grow: 1; /* 让错误消息填充剩余空间 */
-    text-align: left; /* 错误消息左对齐 */
-}
-
-
-.theme-list {
-    list-style: none;
-    padding: 0;
-    margin-top: var(--base-padding); /* 列表与上方元素间距 */
-    max-height: 280px; /* 限制高度 */
-    overflow-y: auto; /* 允许滚动 */
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background-color: var(--app-bg-color);
-}
-
-.theme-list li {
-    display: grid; /* 使用 Grid 布局列表项 */
-    /* 列: 名称 | 操作按钮组 */
-    grid-template-columns: 1fr auto; /* 名称占据剩余空间，按钮组自适应 */
-    align-items: center;
-    padding: 0.6rem 0.8rem; /* 调整内边距 */
-    border-bottom: 1px solid var(--border-color);
-    font-size: 0.95rem;
-    transition: background-color 0.2s ease;
-    gap: var(--base-margin); /* 列间距 */
-}
-.theme-list li:hover {
-    background-color: var(--header-bg-color);
-}
-.theme-list li.active {
-    background-color: var(--button-bg-color); /* 高亮当前激活的主题 */
-    color: var(--button-text-color);
-}
-.theme-list li.active .theme-name {
-    font-weight: bold;
-    color: var(--button-text-color); /* 确保激活项文本颜色正确 */
-}
-/* 激活项内按钮样式调整 */
-.theme-list li.active .theme-actions button {
-    color: var(--button-text-color); /* 继承激活项文本颜色 */
-    border-color: rgba(255, 255, 255, 0.3); /* 边框稍微可见 */
-    background-color: rgba(255, 255, 255, 0.1); /* 轻微背景 */
-}
-.theme-list li.active .theme-actions button:hover:not(:disabled) {
-    background-color: rgba(255, 255, 255, 0.2);
-    border-color: rgba(255, 255, 255, 0.5);
-}
-/* 激活项的应用按钮禁用样式 - 注意: :disabled 选择器优先级可能需要调整 */
-.theme-list li.active .theme-actions button:disabled {
-    opacity: 0.5 !important; /* 增加优先级确保生效 */
-    cursor: default !important;
-    background-color: transparent !important;
-    border-color: transparent !important;
-    color: var(--button-text-color) !important; /* 确保禁用时颜色也正确 */
-}
-
-
-.theme-list li:last-child {
-    border-bottom: none;
-}
-/* 空列表项样式 */
-.empty-list-item {
-    grid-column: 1 / -1; /* 占据整行 */
-    text-align: center;
-    color: var(--text-color-secondary);
-    padding: var(--base-padding);
-    font-style: italic;
-}
-
-/* 移除独立的 .button-apply 样式 */
-
-.theme-name { /* 主题名称样式 */
-    grid-column: 1 / 2; /* 名称在第一列 */
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    color: var(--text-color); /* 确保非激活项文本颜色 */
-}
-.theme-list li.preset-theme .theme-name {
-    /* 可以添加特定样式 */
-}
-.theme-actions {
-    grid-column: 2 / 3; /* 按钮组在第二列 */
-    flex-shrink: 0;
-    display: flex;
-    gap: 0.5rem; /* 按钮间距 */
-    justify-content: flex-end; /* 按钮靠右对齐 */
-}
-/* 统一操作按钮样式 */
-.theme-actions button {
-    padding: 0.4rem 0.8rem;
-    font-size: 0.9rem;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background-color: var(--header-bg-color);
-    color: var(--text-color);
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-    white-space: nowrap;
-}
-.theme-actions button:hover:not(:disabled) {
-    background-color: var(--border-color);
-    border-color: var(--text-color-secondary);
-}
-/* Specific style for danger button within theme actions */
-.theme-actions button.button-danger {
-    /* Danger colors override default */
-    background-color: #f8d7da;
-    color: #842029;
-    border-color: #f5c2c7;
-}
-.theme-actions button.button-danger:hover:not(:disabled) {
-    /* Danger hover overrides default hover */
-    background-color: #f1aeb5;
-    border-color: #ec8a98;
-}
-.theme-actions button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-
-.editor-footer {
-    margin-top: var(--base-padding);
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--base-margin);
-    padding-top: var(--base-padding);
-    border-top: 1px solid var(--border-color);
-}
-.editor-footer button { /* 确保页脚按钮样式统一 */
-    padding: 0.6rem 1.2rem;
-    border-radius: 4px;
-    font-weight: bold;
-}
-
-/* Background Styles */
-.background-preview {
-    width: 100%;
-    height: 150px;
-    border: 1px dashed var(--border-color);
-    margin-bottom: var(--base-margin);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--text-color-secondary);
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    border-radius: 4px;
-    background-color: var(--header-bg-color);
-    position: relative;
-    overflow: hidden; /* 防止背景图溢出圆角 */
-}
-.background-preview span {
-    background-color: rgba(255, 255, 255, 0.8); /* 增加背景不透明度 */
-    padding: 0.4rem 0.8rem; /* 增加内边距 */
-    border-radius: 3px;
-    font-size: 0.9rem;
-    font-weight: 500;
-    color: var(--text-color); /* 使用主文本颜色 */
-    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 添加轻微阴影 */
-}
-
-.background-controls {
-    display: flex;
-    gap: var(--base-margin);
-    margin-bottom: var(--base-padding);
-    flex-wrap: wrap;
-    align-items: center;
-}
-/* Style default buttons in background-controls - matching button-inline */
-.background-controls button:not(.button-danger) {
-    padding: 0.4rem 0.8rem; /* Match button-inline */
-    font-size: 0.9rem; /* Match button-inline */
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background-color: var(--header-bg-color); /* Match button-inline */
-    color: var(--text-color);
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-    white-space: nowrap; /* Match button-inline */
-}
-.background-controls button:not(.button-danger):hover:not(:disabled) {
-    background-color: var(--border-color); /* Match button-inline hover */
-    border-color: var(--text-color-secondary);
-}
-/* Ensure danger button styles override default if necessary */
-.background-controls button.button-danger {
-    /* Keep specific danger styles */
-    padding: 0.4rem 0.8rem; /* Match padding */
-    font-size: 0.9rem; /* Match font size */
-    border-radius: 4px; /* Match border radius */
-    white-space: nowrap; /* Match button-inline */
-    background-color: #f8d7da; /* 淡红色背景 */
-    color: #842029; /* 深红色文字 */
-    border-color: #f5c2c7; /* 边框颜色 */
-}
-.background-controls button.button-danger:hover:not(:disabled) {
-    background-color: #f1aeb5;
-    border-color: #ec8a98;
-}
-.background-controls button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-/* 搜索框样式 */
-.theme-search-bar {
-    margin-bottom: var(--base-padding); /* 与下方列表的间距 */
-}
-.theme-search-bar input.text-input {
-    /* flex-grow: 1; /* 不再需要 flex */
-    /* 移除 grid-column 相关的样式，因为它不再是 grid item */
-    /* grid-column: auto; */
-    /* 确保输入框样式正确 */
-    border: 1px solid var(--border-color);
-    padding: 0.5rem 0.7rem;
-    border-radius: 4px;
-    font-size: 0.9rem;
-    background-color: var(--app-bg-color);
-    color: var(--text-color);
-    /* width: auto; /* 覆盖 form-group 的 width: 100% */
-    width: 100%; /* 让搜索框占满宽度 */
-    box-sizing: border-box;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-.theme-search-bar input.text-input:focus {
-    border-color: var(--link-active-color);
-    outline: 0;
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
-}
-/* 排序按钮样式已移除 */
-
-/* 当前激活主题显示 */
-.active-theme-display {
-    margin-bottom: var(--base-padding); /* 与下方搜索框的间距 */
-    padding: 0.6rem 0;
-    font-size: 0.95rem;
-    display: flex;
-    align-items: center;
-    gap: 0.8rem;
-    /* border-bottom: 1px solid var(--border-color); */ /* 移除底部边框 */
-}
-.active-theme-display span {
-    color: var(--text-color-secondary);
-}
-.active-theme-display strong {
-    color: var(--text-color);
-    font-weight: 600;
-}
-/* 小型按钮样式 */
-.button-small {
-    padding: 0.3rem 0.6rem !important;
-    font-size: 0.85rem !important;
-}
-
-
-.error-message {
-  color: #842029;
-  background-color: #f8d7da;
-  border: 1px solid #f5c2c7;
-  padding: calc(var(--base-padding) * 0.75);
-  border-radius: 4px;
-  margin-top: var(--base-margin);
-  font-size: 0.9rem;
-  width: 100%;
-  box-sizing: border-box;
-  /* grid-column: 1 / -1; /* Let error messages flow naturally */
-}
-.error-message.full-width-group { /* Ensure full-width error messages span */
-    grid-column: 1 / -1;
-}
-
-.panel-footer {
-  display: flex;
-  justify-content: flex-end;
-  padding: var(--base-padding);
-  border-top: 1px solid var(--border-color);
-  background-color: var(--footer-bg-color);
-  flex-shrink: 0;
-}
-
-.panel-footer button {
-  padding: 0.6rem 1.2rem;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-left: var(--base-margin);
-  border: 1px solid transparent;
-  font-weight: bold;
-}
-
-.panel-footer .button-primary {
-  background-color: var(--button-bg-color);
-  color: var(--button-text-color);
-  border-color: var(--button-bg-color);
-}
-.panel-footer .button-primary:hover:not(:disabled) {
-  background-color: var(--button-hover-bg-color);
-  border-color: var(--button-hover-bg-color);
-}
-.panel-footer .button-secondary {
-  background-color: var(--header-bg-color);
-  color: var(--text-color);
-  border-color: var(--border-color);
-}
-.panel-footer .button-secondary:hover:not(:disabled) {
-  background-color: var(--border-color);
-}
-.panel-footer button:disabled {
-    opacity: 0.6;
-    cursor: not-allowed;
-}
-
-/* 主题模式选择器样式 */
-.theme-mode-selector {
-  grid-template-columns: auto 1fr; /* 标签自动宽度，按钮组占据剩余空间 */
-  margin-bottom: calc(var(--base-padding) * 1.5); /* 与下方元素的间距 */
-}
-
-.theme-mode-selector label {
-  grid-column: 1 / 2;
-  text-align: left;
-  color: var(--text-color);
-  font-size: 0.9rem;
-  font-weight: 500;
-  align-self: center; /* 垂直居中 */
-}
-
-.theme-mode-selector .button-group {
-  grid-column: 2 / 3;
-  display: flex;
-  gap: var(--base-margin); /* 按钮间距 */
-  justify-content: flex-start; /* 按钮靠左对齐 */
-}
-
-/* 按钮组内的按钮继承 .button-inline 样式，无需重复 */
 
 </style>