From 2443f56562cd9aafa330f15f0d9c2ec80b0e060b Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Mon, 12 Jan 2026 11:51:27 +0800
Subject: [PATCH] :sparkles: Feature(custom): release not now use markdown
 render, also optimize UI dispaly of update page

---
 src/main/events/remotes/menu.ts            |    1 +
 src/renderer/components/NavigationPage.vue |    2 +-
 src/renderer/pages/PicGoSetting.vue        |   27 +-
 src/renderer/pages/css/PicgoSetting.css    | 6411 ++++++++++----------
 4 files changed, 3242 insertions(+), 3199 deletions(-)

diff --git a/src/main/events/remotes/menu.ts b/src/main/events/remotes/menu.ts
index 114bf0c7..56ddd1f0 100644
--- a/src/main/events/remotes/menu.ts
+++ b/src/main/events/remotes/menu.ts
@@ -99,6 +99,7 @@ const buildMainPageMenu = (win: BrowserWindow) => {
       label: $t('ABOUT'),
       click() {
         dialog.showMessageBox({
+          type: 'info',
           title: 'PicList',
           message: 'PicList',
           detail: `Version: ${pkg.version}\nAuthor: Kuingsmile\nGithub: https://github.com/Kuingsmile/PicList`,
diff --git a/src/renderer/components/NavigationPage.vue b/src/renderer/components/NavigationPage.vue
index e67f987e..24f2f74c 100644
--- a/src/renderer/components/NavigationPage.vue
+++ b/src/renderer/components/NavigationPage.vue
@@ -12,7 +12,7 @@
         class="collapse-button"
         @click="isCollapsed = !isCollapsed"
       >
-        <component :is="isCollapsed ? ChevronRightIcon : ChevronLeftIcon" :size="20" />
+        <component :is="isCollapsed ? ChevronRightIcon : ChevronLeftIcon" :size="16" />
       </button>
     </div>
 
diff --git a/src/renderer/pages/PicGoSetting.vue b/src/renderer/pages/PicGoSetting.vue
index fbeda4c4..98e46571 100644
--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -846,15 +846,6 @@
 
           <!-- Update Preferences -->
           <div class="settings-section update-preferences-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper update small-icon">
-                <Settings :size="15" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.update.updatePreferences') }}</h2>
-              </div>
-            </div>
-
             <div class="update-preference-card">
               <label class="switch-label">
                 <input v-model="formOfSetting.showUpdateTip" type="checkbox" class="switch-input" />
@@ -871,15 +862,6 @@
 
           <!-- Release Notes Section -->
           <div class="settings-section release-notes-section">
-            <div class="section-header-with-icon">
-              <div class="section-icon-wrapper notes small-icon">
-                <FileText :size="15" />
-              </div>
-              <div>
-                <h2>{{ t('pages.settings.update.releaseNotes') }}</h2>
-              </div>
-            </div>
-
             <div class="release-notes-card enhanced">
               <div class="release-notes-header">
                 <div class="release-notes-title">
@@ -905,9 +887,7 @@
                   </div>
                   <span>{{ t('pages.settings.update.loadingReleaseNotes') }}</span>
                 </div>
-                <div v-else-if="releaseNotes" class="release-notes-text">
-                  <pre class="release-notes-pre">{{ releaseNotes }}</pre>
-                </div>
+                <div v-else-if="releaseNotes" class="notes-body" v-html="renderedReleaseNotes"></div>
                 <div v-else-if="releaseNotesError" class="release-notes-error">
                   <div class="error-icon">⚠️</div>
                   <span>{{ releaseNotesError }}</span>
@@ -1779,6 +1759,7 @@ import {
   Settings,
   Store,
 } from 'lucide-vue-next'
+import { marked } from 'marked'
 import type { IConfig } from 'piclist'
 import pkg from 'root/package.json'
 import { computed, onBeforeMount, reactive, ref, toRaw, watch } from 'vue'
@@ -2267,6 +2248,10 @@ function formatLastFetchTime(date: Date): string {
   }
 }
 
+const renderedReleaseNotes = computed(() => {
+  return marked(releaseNotes.value, { breaks: true, gfm: true })
+})
+
 async function fetchReleaseNotes(forceRefresh = false): Promise<void> {
   if (!forceRefresh && releaseNotesLastFetch.value) {
     const timeSinceLastFetch = Date.now() - releaseNotesLastFetch.value.getTime()
diff --git a/src/renderer/pages/css/PicgoSetting.css b/src/renderer/pages/css/PicgoSetting.css
index bd33d07b..ecdd52ef 100644
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -1,3177 +1,3234 @@
-.piclist-settings {
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 100vh;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.piclist-settings::-webkit-scrollbar {
-  display: none;
-}
-
-/* Header */
-.settings-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem;
-  background: var(--color-surface);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.header-icon {
-  color: var(--color-accent);
-}
-
-.settings-header h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-/* Tab Navigation */
-.tab-navigation {
-  display: flex;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 0.5rem;
-  background: var(--color-background-primary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.tab-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: transparent;
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-  flex: 1;
-}
-
-.tab-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-}
-
-.tab-button.active {
-  color: white;
-  background: #409eff;
-  box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
-}
-
-/* Settings Content */
-.settings-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.tab-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.settings-section {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.5rem;
-  background: var(--color-background-primary);
-  box-shadow: 0 2px 8px var(--color-border);
-}
-
-.settings-section h2 {
-  margin: 0 0 0.5rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.settings-section p {
-  margin: 0 0 1.5rem;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-/* Form Elements */
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group:last-child {
-  margin-bottom: 0;
-}
-
-.form-group > label:not(.switch-label, .radio-option) {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.form-input,
-.form-textarea,
-.form-select {
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  box-sizing: border-box;
-}
-
-.form-input:focus,
-.form-textarea:focus,
-.form-select:focus {
-  border-color: var(--color-blue-common);
-  outline: none;
-  box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgb(64 158 255 / 20%));
-}
-
-.form-textarea {
-  min-height: 80px;
-  resize: vertical;
-}
-
-.form-range {
-  margin-bottom: 0.5rem;
-  border-radius: 3px;
-  width: 100%;
-  height: 6px;
-  background: #e4e7ed;
-  outline: none;
-  appearance: none;
-}
-
-.form-range::-webkit-slider-thumb {
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  background: #409eff;
-  appearance: none;
-  cursor: pointer;
-}
-
-.form-range::-moz-range-thumb {
-  border: none;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  background: #409eff;
-  cursor: pointer;
-}
-
-.range-value {
-  font-size: 0.875rem;
-  text-align: center;
-  color: var(--color-text-secondary);
-}
-
-/* Grid Layout */
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1.5rem;
-}
-
-/* Switch Component */
-.switch-label {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: 8px;
-  padding: 0.75rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-.switch-label:hover {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-.switch-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.switch-slider {
-  position: relative;
-  border-radius: 12px;
-  width: 44px;
-  height: 24px;
-  background: var(--color-border);
-  transition: background-color 0.3s;
-  flex-shrink: 0;
-}
-
-.switch-slider::before {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  background: white;
-  transition: transform 0.3s;
-  content: '';
-}
-
-.switch-input:checked + .switch-slider {
-  background: #409eff;
-}
-
-.switch-input:checked + .switch-slider::before {
-  transform: translateX(20px);
-}
-
-.switch-content {
-  flex: 1;
-}
-
-.switch-title {
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.switch-description {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-/* Radio Group */
-.radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.radio-option {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: 8px;
-  padding: 0.75rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-.radio-option:hover {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-.radio-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.radio-indicator {
-  position: relative;
-  border: 2px solid var(--color-border);
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-.radio-input:checked + .radio-indicator {
-  border-color: #409eff;
-}
-
-.radio-input:checked + .radio-indicator::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  border-radius: 50%;
-  width: 10px;
-  height: 10px;
-  background: #409eff;
-  content: '';
-  transform: translate(-50%, -50%);
-}
-
-.radio-label {
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-/* Buttons */
-.btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: 8px;
-  padding: 0.75rem 1rem;
-  min-width: fit-content;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
-}
-
-.btn-primary {
-  color: white;
-  background: #409eff;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: #66b1ff;
-}
-
-.btn-secondary {
-  border: 1px solid var(--color-border);
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: var(--color-background-secondary);
-}
-
-.btn-danger {
-  color: white;
-  background: #f56c6c;
-}
-
-.btn-danger:hover:not(:disabled) {
-  background: #f78989;
-}
-
-/* Checkbox Group */
-.checkbox-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.checkbox-option {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: 6px;
-  padding: 0.5rem 0.75rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.checkbox-option:hover {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.checkbox-indicator {
-  position: relative;
-  border: 2px solid var(--color-border);
-  border-radius: 4px;
-  width: 16px;
-  height: 16px;
-  flex-shrink: 0;
-}
-
-.checkbox-input:checked + .checkbox-indicator {
-  border-color: #409eff;
-  background: #409eff;
-}
-
-.checkbox-input:checked + .checkbox-indicator::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  font-size: 10px;
-  color: white;
-  content: '✓';
-  transform: translate(-50%, -50%);
-}
-
-.checkbox-label {
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-/* Input Groups */
-.input-group {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.input-group .form-input {
-  flex: 1;
-}
-
-.input-addon-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  width: 40px;
-  color: var(--color-text-secondary);
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.input-addon-btn:hover {
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-}
-
-/* Dialog Overlay */
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(0 0 0 / 80%);
-}
-
-.dialog {
-  overflow-y: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-2xl);
-  padding: 0.75rem;
-  width: 85vw;
-  max-width: 90vw;
-  max-height: 85vh;
-  background: var(--color-surface);
-    box-shadow: var(--shadow-xl);
-  box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
-}
-
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1rem;
-}
-
-.dialog-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.dialog-close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: 6px;
-  width: 32px;
-  height: 32px;
-  font-size: 1.5rem;
-  color: var(--color-text-secondary);
-  background: none;
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.dialog-close:hover {
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-}
-
-.dialog-content {
-  overflow-y: auto;
-  margin-bottom: 1.5rem;
-  padding: 0.2rem;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.dialog-content::-webkit-scrollbar {
-  display: none;
-}
-
-.dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1rem;
-  gap: 0.75rem;
-}
-
-.button-group {
-  display: flex;
-  gap: 0.75rem;
-}
-
-.button-group .btn {
-  flex: 1;
-}
-
-/* Notice Text */
-.notice-text {
-  margin-bottom: 1rem;
-  border-radius: 8px;
-  padding: 1rem;
-  font-size: 0.925rem;
-  text-align: center;
-  color: #1c2630ff;
-  background: rgb(0 128 255 / 10%);
-}
-
-/* Small text */
-small {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .piclist-settings {
-    padding: 1rem;
-  }
-  
-  .tab-navigation {
-    flex-direction: column;
-  }
-  
-  .tab-button {
-    justify-content: flex-start;
-  }
-  
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-  
-  .dialog {
-    margin: 1rem;
-    width: 95%;
-  }
-}
-
-/* Dark mode adjustments */
-:root.dark .piclist-settings,
-:root.auto.dark .piclist-settings {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .settings-header,
-:root.dark .tab-navigation,
-:root.dark .settings-section,
-:root.auto.dark .settings-header,
-:root.auto.dark .tab-navigation,
-:root.auto.dark .settings-section {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-:root.dark .form-input,
-:root.dark .form-textarea,
-:root.dark .form-select,
-:root.auto.dark .form-input,
-:root.auto.dark .form-textarea,
-:root.auto.dark .form-select {
-  border-color: var(--color-border);
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .switch-slider::before,
-:root.auto.dark .switch-slider::before {
-  background: var(--color-surface);
-}
-
-:root.dark .btn-secondary,
-:root.auto.dark .btn-secondary {
-  border-color: var(--color-border);
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .btn-secondary:hover,
-:root.auto.dark .btn-secondary:hover {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .switch-label,
-:root.auto.dark .switch-label {
-  border-color: var(--color-border);
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .switch-label:hover,
-:root.auto.dark .switch-label:hover {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .radio-option,
-:root.dark .checkbox-option,
-:root.auto.dark .radio-option,
-:root.auto.dark .checkbox-option {
-  border-color: var(--color-border);
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .radio-option:hover,
-:root.dark .checkbox-option:hover,
-:root.auto.dark .radio-option:hover,
-:root.auto.dark .checkbox-option:hover {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .dialog,
-:root.auto.dark .dialog {
-  background: var(--color-background-tertiary);
-}
-
-/* Placeholder Help Styles */
-.placeholder-help {
-  overflow-y: auto;
-  margin-top: 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 0;
-  max-height: 400px;
-  background: var(--color-background-tertiary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
-}
-
-.placeholder-category {
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.placeholder-category:last-child {
-  border-bottom: none;
-}
-
-.category-title {
-  margin: 0;
-  border-bottom: 1px solid var(--color-border-light);
-  padding: 0.875rem 1rem 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
-  letter-spacing: 0.02em;
-}
-
-.placeholder-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 0;
-  padding: 0.5rem 0;
-}
-
-.placeholder-item {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  border-radius: 0;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.placeholder-item:hover {
-  background: rgb(var(--color-accent-rgb), 0.08);
-}
-
-.placeholder-item code {
-  margin-right: 0.875rem;
-  border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: 8px;
-  padding: 0.3rem 0.6rem;
-  min-width: 80px;
-  font-size: 1rem;
-  font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
-  font-weight: 600;
-  text-align: center;
-  color: white;
-  background: var(--color-blue-common);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
-  letter-spacing: 0.02em;
-  flex-shrink: 0;
-}
-
-.placeholder-item span {
-  font-weight: 500;
-  color: var(--color-text-primary);
-  flex: 1;
-}
-
-/* Scrollbar styling for macOS feel */
-.placeholder-help::-webkit-scrollbar {
-  width: 6px;
-}
-
-.placeholder-help::-webkit-scrollbar-track {
-  border-radius: 10px;
-  background: transparent;
-}
-
-.placeholder-help::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  background: var(--color-border);
-  transition: background 0.2s ease;
-}
-
-.placeholder-help::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
-/* Dark theme adjustments */
-:root.dark .placeholder-help,
-:root.auto.dark .placeholder-help {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
-}
-
-:root.dark .category-title,
-:root.auto.dark .category-title {
-  border-bottom-color: var(--color-border);
-  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%);
-}
-
-:root.dark .placeholder-category,
-:root.auto.dark .placeholder-category {
-  border-bottom-color: var(--color-border);
-}
-
-:root.dark .placeholder-item:hover,
-:root.auto.dark .placeholder-item:hover {
-  background: rgb(var(--color-accent-rgb), 0.12);
-}
-
-:root.dark .placeholder-item code,
-:root.auto.dark .placeholder-item code {
-  border-color: rgb(255 255 255 / 15%);
-  background: var(--color-blue-common);
-}
-
-/* Update info and Release Notes Styles */
-.update-info {
-  margin-bottom: 1.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 1rem;
-  background: var(--color-background);
-}
-
-.update-info > div {
-  margin-bottom: 0.5rem;
-  font-size: 0.925rem;
-}
-
-.update-info > div:last-child {
-  margin-bottom: 0;
-}
-
-.update-notice {
-  font-weight: 500;
-  color: var(--color-success) !important;
-}
-
-/* Release Notes Card */
-.release-notes-card {
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  background: var(--color-surface);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
-}
-
-.release-notes-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  background: var(--color-background);
-}
-
-.release-notes-header h3 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.release-notes-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.btn-sm {
-  padding: 0.375rem 0.75rem;
-  min-height: auto;
-  font-size: 0.875rem;
-}
-
-.btn-link {
-  border: none;
-  padding: 0.25rem;
-  text-decoration: underline;
-  color: var(--color-accent);
-  background: transparent;
-}
-
-.btn-link:hover {
-  color: var(--color-accent-hover);
-  background: transparent;
-}
-
-.release-notes-content {
-  overflow-y: auto;
-  max-height: 400px;
-  background: var(--color-background);
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-accent) transparent;
-}
-
-.release-notes-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.release-notes-content::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.release-notes-content::-webkit-scrollbar-thumb {
-  border-radius: 3px;
-  background: var(--color-accent);
-}
-
-.release-notes-content::-webkit-scrollbar-thumb:hover {
-  background: var(--color-accent-hover);
-}
-
-.release-notes-loading,
-.release-notes-error,
-.release-notes-empty {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2rem;
-  font-size: 0.925rem;
-  text-align: center;
-  color: var(--color-text-secondary);
-  gap: 0.5rem;
-}
-
-.release-notes-error {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 3rem;
-  color: var(--color-error);
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.release-notes-text {
-  padding: 0;
-}
-
-.release-notes-pre {
-  margin: 0;
-  border: none;
-  padding: 1.5rem;
-  font-size: 0.875rem;
-  font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, monospace;
-  white-space: pre-wrap;
-  color: var(--color-text-primary);
-  background: transparent;
-  line-height: 1.6;
-  overflow-wrap: break-word;
-}
-
-.release-notes-footer {
-  border-top: 1px solid var(--color-border);
-  padding: 0.75rem 1.5rem;
-  text-align: center;
-  background: var(--color-background-secondary);
-}
-
-.release-notes-footer small {
-  display: flex;
-  align-items: center;
-  font-size: 0.75rem;
-  color: var(--color-text-tertiary);
-  gap: 0.375rem;
-}
-
-/* Rotation animation for loading icons */
-@keyframes rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.rotate {
-  animation: rotate 1s linear infinite;
-}
-
-/* Config Dialog Styles */
-.config-dialog {
-  width: 90%;
-  max-width: 600px;
-}
-
-.dialog-icon {
-  color: var(--color-accent);
-}
-
-.config-section {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.25rem;
-  background: var(--color-background-secondary);
-  transition: all 0.2s ease;
-}
-
-.config-section:hover {
-  border-color: var(--color-accent);
-  box-shadow: 0 2px 12px rgb(64 158 255 / 15%);
-}
-
-.config-section:not(:last-child) {
-  margin-bottom: 1rem;
-}
-
-.config-section-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  gap: 0.5rem;
-}
-
-.config-section-header h4 {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.config-section-header svg {
-  color: var(--color-accent);
-}
-
-.config-button-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
-}
-
-.config-button-grid.full-width {
-  grid-template-columns: 1fr;
-}
-
-.config-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0.875rem 1rem;
-  min-height: 48px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  gap: 0.5rem;
-  
-}
-
-.config-button:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: var(--color-background-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 20%);
-}
-
-.config-button:active {
-  transform: translateY(0);
-  box-shadow: 0 2px 6px rgb(64 158 255 / 15%);
-}
-
-.config-button .button-icon {
-  flex-shrink: 0;
-  color: var(--color-accent);
-  transition: transform 0.2s ease;
-}
-
-.config-button:hover .button-icon {
-  transform: scale(1.1);
-}
-
-.config-button span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@media (width <= 768px) {
-  .config-button-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .config-dialog {
-    max-width: 95%;
-  }
-}
-
-/* ==================== Sync Panel Styles ==================== */
-
-/* Sync Overview Card */
-.sync-overview-card {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 16px;
-  padding: 1.5rem;
-  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-primary) 100%);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
-  gap: 1.5rem;
-}
-
-.sync-overview-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.sync-overview-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 14px;
-  width: 46px;
-  height: 46px;
-  color: white;
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 30%);
-}
-
-.sync-overview-info h2 {
-  margin: 0 0 0.25rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.sync-status-text {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  gap: 0.5rem;
-}
-
-.sync-type-badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 6px;
-  padding: 0.2rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: #409eff;
-  background: rgb(64 158 255 / 15%);
-  letter-spacing: 0.02em;
-}
-
-.sync-not-configured {
-  font-style: italic;
-  color: var(--color-text-tertiary);
-}
-
-.sync-config-btn {
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-/* Section Header with Icon */
-.section-header-with-icon {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 0.5rem;
-  gap: 0.75rem;
-}
-
-.section-icon {
-  margin-top: 0.125rem;
-  color: var(--color-accent);
-  flex-shrink: 0;
-}
-
-.section-header-with-icon h2 {
-  margin-top: 0.4rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.section-header-with-icon p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-/* Sync Action Cards */
-.sync-action-cards {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.sync-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 0.5rem 1.25rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.sync-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateX(4px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.sync-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 38px;
-  height: 38px;
-  color: white;
-  flex-shrink: 0;
-}
-
-.sync-action-icon.upload {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.sync-action-icon.migrate {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.sync-action-content {
-  flex: 1;
-}
-
-.sync-action-content h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.sync-action-content p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  line-height: 1.4;
-}
-
-.sync-action-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.sync-action-card:hover .sync-action-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* File Management Section */
-.file-action-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.file-action-btn {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 1px dashed var(--color-border);
-  border-radius: 12px;
-  padding: 1.5rem 1rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 0.75rem;
-}
-
-.file-action-btn:hover {
-  border-style: solid;
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: rgb(64 158 255 / 8%);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 15%);
-}
-
-.file-action-btn svg {
-  color: var(--color-text-secondary);
-  transition: color 0.25s ease;
-}
-
-.file-action-btn:hover svg {
-  color: var(--color-accent);
-}
-
-.file-action-btn span {
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-align: center;
-  color: var(--color-text-primary);
-}
-
-/* ==================== Sync Configuration Dialog ==================== */
-
-.sync-config-dialog {
-  width: 90%;
-  max-width: 560px;
-}
-
-.sync-dialog-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 34px;
-  height: 34px;
-  color: white;
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 25%);
-  flex-shrink: 0;
-}
-
-.dialog-subtitle {
-  margin: 0.25rem 0 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-.sync-dialog-content {
-  padding: 0.5rem;
-}
-
-/* Sync Type Selector */
-.sync-type-selector {
-  margin-bottom: 1.5rem;
-}
-
-.sync-type-label {
-  display: block;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.sync-type-grid {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 0.75rem;
-}
-
-.sync-type-btn {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  border: 2px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem 0.5rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  gap: 0.5rem;
-}
-
-.sync-type-btn:hover {
-  border-color: var(--color-accent);
-  background: rgb(64 158 255 / 8%);
-}
-
-.sync-type-btn.active {
-  border-color: #409eff;
-  color: #409eff;
-  background: rgb(64 158 255 / 12%);
-  box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
-}
-
-.sync-type-btn svg {
-  color: var(--color-text-secondary);
-  transition: color 0.2s ease;
-}
-
-.sync-type-btn.active svg,
-.sync-type-btn:hover svg {
-  color: #409eff;
-}
-
-.sync-type-btn span {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: inherit;
-}
-
-/* Sync Config Fields */
-.sync-config-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.sync-fields-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.sync-field-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.sync-field-group label {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  font-size: 0.825rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  gap: 0.4rem;
-}
-
-.sync-field-group label svg {
-  color: var(--color-accent);
-}
-
-.sync-ssl-toggle {
-  margin-top: 0.5rem;
-}
-
-/* Dark Mode Adjustments for Sync Panel */
-:root.dark .sync-overview-card,
-:root.auto.dark .sync-overview-card {
-  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
-}
-
-:root.dark .sync-action-card,
-:root.auto.dark .sync-action-card {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-:root.dark .sync-action-card:hover,
-:root.auto.dark .sync-action-card:hover {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .file-action-btn,
-:root.auto.dark .file-action-btn {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .file-action-btn:hover,
-:root.auto.dark .file-action-btn:hover {
-  background: rgb(64 158 255 / 12%);
-}
-
-:root.dark .sync-type-btn,
-:root.auto.dark .sync-type-btn {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-:root.dark .sync-type-btn:hover,
-:root.auto.dark .sync-type-btn:hover {
-  background: rgb(64 158 255 / 15%);
-}
-
-:root.dark .sync-type-btn.active,
-:root.auto.dark .sync-type-btn.active {
-  background: rgb(64 158 255 / 20%);
-}
-
-/* Responsive Adjustments */
-@media (width <= 768px) {
-  .sync-overview-card {
-    flex-direction: column;
-    text-align: center;
-  }
-
-  .sync-overview-header {
-    flex-direction: column;
-  }
-
-  .file-action-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .sync-type-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .sync-fields-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* ==================== Advanced Settings Panel ==================== */
-
-/* Section Icon Wrapper */
-.section-icon-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  border-radius: 12px;
-  width: 44px;
-  height: 44px;
-  color: white;
-  flex-shrink: 0;
-}
-
-.section-icon-wrapper.small-icon {
-  width: 34px;
-  height: 34px;
-}
-
-.section-icon-wrapper.log {
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-}
-
-.section-icon-wrapper.network {
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
-}
-
-.section-icon-wrapper.server {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.section-icon-wrapper.update {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.section-icon-wrapper.notes {
-  background: linear-gradient(135deg, #909399 0%, #b1b3b8 100%);
-}
-
-/* Advanced Action Grid */
-.advanced-action-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.advanced-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.25rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.advanced-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.advanced-action-card.standalone {
-  grid-column: 1 / -1;
-}
-
-.advanced-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 44px;
-  height: 44px;
-  color: var(--color-accent);
-  background: rgb(64 158 255 / 12%);
-  flex-shrink: 0;
-}
-
-.advanced-action-info {
-  flex: 1;
-}
-
-.advanced-action-info h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.advanced-action-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  line-height: 1.4;
-}
-
-.advanced-action-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.advanced-action-card:hover .advanced-action-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* Server Config Grid */
-.server-config-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-bottom: 1.25rem;
-  gap: 1rem;
-}
-
-.server-config-card {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.25rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-}
-
-.server-config-card:hover {
-  border-color: var(--color-accent);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.server-config-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-}
-
-.server-config-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  width: 36px;
-  height: 36px;
-  color: white;
-}
-
-.server-config-icon.web {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.server-config-icon.api {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.server-config-badge {
-  border-radius: 6px;
-  padding: 0.2rem 0.5rem;
-  font-size: 0.7rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  background: var(--color-background-secondary);
-  letter-spacing: 0.05em;
-}
-
-.server-config-card h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.server-config-card p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  line-height: 1.4;
-}
-
-/* Encryption Key Section */
-.encryption-key-section {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.encryption-key-header {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 0.75rem;
-  gap: 0.75rem;
-}
-
-.encryption-key-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  width: 32px;
-  height: 32px;
-  color: #e6a23c;
-  background: rgb(230 162 60 / 15%);
-  flex-shrink: 0;
-}
-
-.encryption-key-header label {
-  display: block;
-  margin-bottom: 0.125rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.encryption-key-header small {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-/* ==================== Update Settings Panel ==================== */
-
-/* Update Status Card */
-.update-status-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 16px;
-  padding: 1.5rem 2rem;
-  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-primary) 100%);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
-  gap: 1.5rem;
-}
-
-.update-status-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 16px;
-  width: 44px;
-  height: 44px;
-  color: white;
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-  box-shadow: 0 4px 12px rgb(103 194 58 / 30%);
-  flex-shrink: 0;
-}
-
-.update-status-info {
-  flex: 1;
-}
-
-.update-status-info h2 {
-  margin: 0 0 0.5rem;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-
-.version-info {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.version-badge {
-  border-radius: 8px;
-  padding: 0.3rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: #67c23a;
-  background: rgb(103 194 58 / 15%);
-}
-
-.version-label {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.update-check-btn {
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-/* Update Preferences */
-.update-preferences-section .update-preference-card {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 0.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.update-preferences-section .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-/* Enhanced Release Notes */
-.release-notes-card.enhanced {
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: 16px;
-  background: var(--color-surface);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
-}
-
-.release-notes-card.enhanced .release-notes-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  background: var(--color-background-tertiary);
-}
-
-.release-notes-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.release-notes-title svg {
-  color: var(--color-accent);
-}
-
-.release-notes-title h3 {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.refresh-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.release-notes-card.enhanced .release-notes-content {
-  overflow-y: auto;
-  max-height: 400px;
-  background: var(--color-background-primary);
-}
-
-.release-notes-loading {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 3rem;
-  gap: 1rem;
-}
-
-.loading-spinner {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  width: 48px;
-  height: 48px;
-  color: var(--color-accent);
-  background: rgb(64 158 255 / 12%);
-}
-
-.release-notes-loading span {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.error-icon {
-  font-size: 2rem;
-}
-
-.release-notes-error span {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.release-notes-empty {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 3rem;
-  gap: 0.75rem;
-}
-
-.empty-icon {
-  font-size: 2rem;
-}
-
-.release-notes-empty span {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.release-notes-card.enhanced .release-notes-footer {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid var(--color-border);
-  padding: 0.75rem 1.5rem;
-  background: var(--color-background-tertiary);
-}
-
-/* Dark Mode for Advanced & Update */
-:root.dark .advanced-action-card,
-:root.auto.dark .advanced-action-card {
-  border-color: var(--color-border);
-  background: var(--color-background-secondary);
-}
-
-:root.dark .advanced-action-card:hover,
-:root.auto.dark .advanced-action-card:hover {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .server-config-card,
-:root.auto.dark .server-config-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .server-config-card:hover,
-:root.auto.dark .server-config-card:hover {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .encryption-key-section,
-:root.auto.dark .encryption-key-section {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .update-status-card,
-:root.auto.dark .update-status-card {
-  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
-}
-
-:root.dark .release-notes-card.enhanced,
-:root.auto.dark .release-notes-card.enhanced {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .release-notes-card.enhanced .release-notes-header,
-:root.auto.dark .release-notes-card.enhanced .release-notes-header {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .release-notes-card.enhanced .release-notes-content,
-:root.auto.dark .release-notes-card.enhanced .release-notes-content {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .release-notes-card.enhanced .release-notes-footer,
-:root.auto.dark .release-notes-card.enhanced .release-notes-footer {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .update-preference-card,
-:root.auto.dark .update-preference-card {
-  background: var(--color-background-secondary);
-}
-
-/* Responsive for Advanced & Update */
-@media (width <= 768px) {
-  .advanced-action-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .server-config-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .update-status-card {
-    flex-direction: column;
-    padding: 1.5rem;
-    text-align: center;
-  }
-
-  .version-info {
-    justify-content: center;
-  }
-}
-
-/* ==================== System Settings Panel ==================== */
-
-/* Section Icon Wrapper - Additional Colors */
-.section-icon-wrapper.language {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.section-icon-wrapper.window {
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-}
-
-.section-icon-wrapper.startup {
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
-}
-
-/* System Option Grid */
-.system-option-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.system-option-card {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-}
-
-.system-option-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.system-option-header svg {
-  color: var(--color-accent);
-}
-
-/* Window Size Card */
-.window-size-card {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.window-size-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.window-size-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 25px;
-  height: 25px;
-  color: white;
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-  flex-shrink: 0;
-}
-
-.window-size-info {
-  flex: 1;
-}
-
-.window-size-info h4 {
-  margin-top: 0.2rem;
-  font-size: 0.95rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.window-size-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-.window-size-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.window-size-card:hover .window-size-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* System Toggles Grid */
-.system-toggles-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
-}
-
-.system-toggle-card {
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  padding: 0.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.system-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.system-toggle-card.with-action {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-}
-
-.toggle-with-action-content {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.toggle-with-action-content svg {
-  color: var(--color-accent);
-}
-
-/* Startup Options Grid */
-.startup-options-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.startup-toggle-card {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 0.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.startup-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-/* Shortcut Action Card */
-.shortcut-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.25rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.shortcut-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.shortcut-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 44px;
-  height: 44px;
-  color: white;
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
-  flex-shrink: 0;
-}
-
-.shortcut-action-info {
-  flex: 1;
-}
-
-.shortcut-action-info h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.shortcut-action-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-.shortcut-action-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.shortcut-action-card:hover .shortcut-action-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* ==================== Upload Settings Panel ==================== */
-
-/* Section Icon Wrapper - Upload Colors */
-.section-icon-wrapper.upload {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.section-icon-wrapper.processing {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.section-icon-wrapper.clipboard {
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
-}
-
-.section-icon-wrapper.link {
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-}
-
-.section-icon-wrapper.picbed {
-  background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
-}
-
-.section-icon-wrapper.gallery {
-  background: linear-gradient(135deg, #b37feb 0%, #d3adf7 100%);
-}
-
-/* Upload Behavior Grid */
-.upload-behavior-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.upload-feature-card {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 0.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.upload-feature-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.upload-feature-card.picbed-selection {
-  padding: 1rem;
-  grid-column: 1 / -1;
-}
-
-.picbed-selection-header {
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.checkbox-group.compact {
-  gap: 0.5rem;
-}
-
-/* Upload Action Card */
-.upload-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 0.75rem;
-}
-
-.upload-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgb(64 158 255 / 15%);
-}
-
-.upload-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  width: 36px;
-  height: 36px;
-  color: var(--color-accent);
-  background: rgb(64 158 255 / 12%);
-  flex-shrink: 0;
-}
-
-.upload-action-info {
-  flex: 1;
-}
-
-.upload-action-info h4 {
-  margin: 0 0 0.125rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.upload-action-info p {
-  margin: 0;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-.upload-action-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.upload-action-card:hover .upload-action-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* Processing Actions Grid */
-.processing-actions-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-bottom: 1rem;
-  gap: 1rem;
-}
-
-.processing-action-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.25rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.processing-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.processing-action-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 30px;
-  height: 30px;
-  color: white;
-  flex-shrink: 0;
-}
-
-.processing-action-icon.rename {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.processing-action-icon.image {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.processing-action-info {
-  flex: 1;
-}
-
-.processing-action-info h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.processing-action-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-/* Upload Toggles Grid */
-.upload-toggles-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
-}
-
-.upload-toggle-card {
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  padding: 0.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.upload-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.upload-toggle-card.standalone {
-  grid-column: 1 / -1;
-  margin-top: 1rem;
-}
-
-/* URL Format Action Card */
-.url-format-action-card {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1.25rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  cursor: pointer;
-  gap: 1rem;
-}
-
-.url-format-action-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.url-format-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 30px;
-  height: 30px;
-  color: white;
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-  flex-shrink: 0;
-}
-
-.url-format-info {
-  flex: 1;
-}
-
-.url-format-info h4 {
-  margin: 0 0 0.25rem;
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.url-format-info p {
-  margin: 0;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-}
-
-.url-format-arrow {
-  color: var(--color-text-tertiary);
-  transition: all 0.25s ease;
-  flex-shrink: 0;
-}
-
-.url-format-action-card:hover .url-format-arrow {
-  color: var(--color-accent);
-  transform: translateX(4px);
-}
-
-/* Short URL Section */
-.short-url-section {
-  margin-bottom: 1rem;
-}
-
-.short-url-config {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-top: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-  gap: 1rem;
-}
-
-.short-url-field {
-  display: flex;
-  flex-direction: column;
-}
-
-.short-url-field label {
-  margin-bottom: 0.5rem;
-  font-size: 0.825rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-/* PicBed Checkbox Grid */
-.picbed-checkbox-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.picbed-checkbox-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  padding: 0.625rem 0.875rem;
-  background: var(--color-background-tertiary);
-  transition: all 0.2s ease;
-  cursor: pointer;
-  gap: 0.5rem;
-}
-
-.picbed-checkbox-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-}
-
-/* ==================== Enhanced Dialog Styles ==================== */
-
-.enhanced-dialog {
-  width: 500px;
-  max-width: 90vw;
-}
-
-.dialog-header-content {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.dialog-icon-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 40px;
-  height: 40px;
-  color: white;
-  flex-shrink: 0;
-}
-
-.dialog-icon-wrapper.link {
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-}
-
-.dialog-icon-wrapper.network {
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
-}
-
-.dialog-icon-wrapper.window {
-  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
-}
-
-.dialog-icon-wrapper.update {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.dialog-icon-wrapper.rename {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-/* Placeholder Info Card */
-.placeholder-info-card {
-  margin-bottom: 1.25rem;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-}
-
-.placeholder-info-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.placeholder-info-title svg {
-  color: var(--color-accent);
-}
-
-.placeholder-info-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.placeholder-info-item {
-  display: flex;
-  align-items: center;
-  font-size: 0.825rem;
-  gap: 0.75rem;
-}
-
-.placeholder-info-item code {
-  border-radius: 6px;
-  padding: 0.25rem 0.5rem;
-  min-width: 80px;
-  font-family: 'SF Mono', Monaco, Menlo, monospace;
-  font-weight: 600;
-  text-align: center;
-  color: white;
-  background: var(--color-accent);
-}
-
-.placeholder-info-item span {
-  color: var(--color-text-secondary);
-}
-
-/* Proxy Config Grid */
-.proxy-config-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.proxy-config-card {
-  display: flex;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-  gap: 0.75rem;
-}
-
-.proxy-config-card.full-width {
-  grid-column: 1 / -1;
-}
-
-.proxy-config-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 8px;
-  width: 36px;
-  height: 36px;
-  color: white;
-  flex-shrink: 0;
-}
-
-.proxy-config-icon.upload {
-  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
-}
-
-.proxy-config-icon.plugin {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.proxy-config-icon.mirror {
-  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
-}
-
-.proxy-config-field {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.proxy-config-field label {
-  margin-bottom: 0.5rem;
-  font-size: 0.825rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-/* Window Size Grid */
-.window-size-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  margin-bottom: 1rem;
-  gap: 1rem;
-}
-
-.window-size-field {
-  display: flex;
-  flex-direction: column;
-}
-
-.window-size-field label {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  font-size: 0.825rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  gap: 0.375rem;
-}
-
-.window-size-field label svg {
-  color: var(--color-accent);
-}
-
-/* Update Dialog Styles */
-.update-dialog {
-  width: 480px;
-}
-
-.update-version-comparison {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 1.25rem;
-  gap: 1rem;
-}
-
-.version-card {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem 1.5rem;
-  min-width: 120px;
-  text-align: center;
-  background: var(--color-background-tertiary);
-  flex: 1;
-}
-
-.version-card.latest.has-update {
-  border-color: #67c23a;
-  background: rgb(103 194 58 / 10%);
-}
-
-.version-card-label {
-  margin-bottom: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-}
-
-.version-card-value {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-}
-
-.version-card.latest.has-update .version-card-value {
-  color: #67c23a;
-}
-
-.version-arrow {
-  color: var(--color-text-tertiary);
-  flex-shrink: 0;
-}
-
-.update-notice-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  padding: 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #67c23a;
-  background: rgb(103 194 58 / 12%);
-  gap: 0.5rem;
-}
-
-/* Rename Dialog Styles */
-.rename-dialog {
-  width: 600px;
-}
-
-.rename-toggle-card {
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  padding: 0.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.rename-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.rename-format-field label {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-}
-
-.rename-format-field label svg {
-  color: var(--color-accent);
-}
-
-/* Dark Mode Adjustments */
-:root.dark .system-option-card,
-:root.auto.dark .system-option-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .window-size-card,
-:root.auto.dark .window-size-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .window-size-card:hover,
-:root.auto.dark .window-size-card:hover {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .system-toggle-card,
-:root.auto.dark .system-toggle-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .startup-toggle-card,
-:root.auto.dark .startup-toggle-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .shortcut-action-card,
-:root.auto.dark .shortcut-action-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .shortcut-action-card:hover,
-:root.auto.dark .shortcut-action-card:hover {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .upload-feature-card,
-:root.auto.dark .upload-feature-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .upload-action-card,
-:root.auto.dark .upload-action-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .upload-action-card:hover,
-:root.auto.dark .upload-action-card:hover {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .processing-action-card,
-:root.auto.dark .processing-action-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .processing-action-card:hover,
-:root.auto.dark .processing-action-card:hover {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .upload-toggle-card,
-:root.auto.dark .upload-toggle-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .url-format-action-card,
-:root.auto.dark .url-format-action-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .url-format-action-card:hover,
-:root.auto.dark .url-format-action-card:hover {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .short-url-config,
-:root.auto.dark .short-url-config {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .picbed-checkbox-card,
-:root.auto.dark .picbed-checkbox-card {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .picbed-checkbox-card:hover,
-:root.auto.dark .picbed-checkbox-card:hover {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .enhanced-dialog,
-:root.auto.dark .enhanced-dialog {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .placeholder-info-card,
-:root.auto.dark .placeholder-info-card {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .proxy-config-card,
-:root.auto.dark .proxy-config-card {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .version-card,
-:root.auto.dark .version-card {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .rename-toggle-card,
-:root.auto.dark .rename-toggle-card {
-  background: var(--color-background-tertiary);
-}
-
-/* ============================
-   Log Dialog Styles
-   ============================ */
-.log-dialog {
-  max-width: 600px;
-}
-
-.dialog-icon-wrapper.log {
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.log-files-section {
-  margin-bottom: 1.5rem;
-}
-
-.log-files-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.log-files-title svg {
-  color: var(--color-accent);
-}
-
-.log-files-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.75rem;
-}
-
-.log-file-card {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem;
-  text-align: center;
-  background: var(--color-background-tertiary);
-  transition: all 0.25s ease;
-  flex-direction: column;
-  cursor: pointer;
-  gap: 0.75rem;
-}
-
-.log-file-card:hover {
-  border-color: var(--color-accent);
-  background: var(--color-background-secondary);
-  transform: translateY(-2px);
-  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
-}
-
-.log-file-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 42px;
-  height: 42px;
-  color: white;
-  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
-}
-
-.log-file-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.log-file-name {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.log-file-hint {
-  font-size: 0.7rem;
-  color: var(--color-text-tertiary);
-}
-
-.log-settings-grid {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 1rem;
-}
-
-/* ============================
-   Server Dialog Styles
-   ============================ */
-.server-dialog,
-.webserver-dialog {
-  max-width: 550px;
-}
-
-.dialog-icon-wrapper.server {
-  background: linear-gradient(135deg, #409eff 0%, #79bbff 100%);
-}
-
-.dialog-icon-wrapper.webserver {
-  background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
-}
-
-.server-notice-card {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 10px;
-  padding: 0.875rem 1rem;
-  font-size: 0.8rem;
-  color: var(--color-text-secondary);
-  background: var(--color-background-tertiary);
-  line-height: 1.5;
-  gap: 0.75rem;
-}
-
-.server-toggle-card {
-  margin-bottom: 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 0.25rem;
-  background: var(--color-background-tertiary);
-}
-
-.server-toggle-card .switch-label {
-  margin: 0;
-  border: none;
-  background: transparent;
-}
-
-.server-config-section {
-  border: 1px solid var(--color-border);
-  border-radius: 12px;
-  padding: 1rem;
-  background: var(--color-background-tertiary);
-}
-
-.server-config-title {
-  display: flex;
-  align-items: center;
-  margin-bottom: 1rem;
-  border-bottom: 1px solid var(--color-border);
-  padding-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
-}
-
-.server-config-title svg {
-  color: var(--color-accent);
-}
-
-.server-fields-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
-}
-
-.server-key-field,
-.server-path-field {
-  margin-top: 1rem;
-}
-
-.server-key-field label,
-.server-path-field label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.server-key-field label svg,
-.server-path-field label svg {
-  color: var(--color-accent);
-}
-
-/* Dark mode for new dialog components */
-:root.dark .log-file-card,
-:root.auto.dark .log-file-card {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .log-file-card:hover,
-:root.auto.dark .log-file-card:hover {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .server-notice-card,
-:root.auto.dark .server-notice-card {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .server-toggle-card,
-:root.auto.dark .server-toggle-card {
-  background: var(--color-background-tertiary);
-}
-
-:root.dark .server-config-section,
-:root.auto.dark .server-config-section {
-  background: var(--color-background-tertiary);
-}
-
-/* Responsive Adjustments */
-@media (width <= 768px) {
-  .system-option-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .system-toggles-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .startup-options-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .upload-behavior-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .processing-actions-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .upload-toggles-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .short-url-config {
-    grid-template-columns: 1fr;
-  }
-
-  .proxy-config-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .window-size-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .update-version-comparison {
-    flex-direction: column;
-  }
-
-  .version-arrow {
-    transform: rotate(90deg);
-  }
-
-  .log-files-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .log-settings-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .server-fields-grid {
-    grid-template-columns: 1fr;
-  }
-}
+/* stylelint-disable selector-pseudo-class-no-unknown */
+.piclist-settings {
+  overflow-y: auto;
+  padding: 1.5rem;
+  min-height: 100vh;
+  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.piclist-settings::-webkit-scrollbar {
+  display: none;
+}
+
+/* Header */
+.settings-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem;
+  background: var(--color-surface);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-icon {
+  color: var(--color-accent);
+}
+
+.settings-header h1 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+/* Tab Navigation */
+.tab-navigation {
+  display: flex;
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0.5rem;
+  background: var(--color-background-primary);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.tab-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  background: transparent;
+  transition: all 0.2s ease;
+  gap: 0.5rem;
+  cursor: pointer;
+  flex: 1;
+}
+
+.tab-button:hover {
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+}
+
+.tab-button.active {
+  color: white;
+  background: #409eff;
+  box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
+}
+
+/* Settings Content */
+.settings-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.settings-section {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.5rem;
+  background: var(--color-background-primary);
+  box-shadow: 0 2px 8px var(--color-border);
+}
+
+.settings-section h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.settings-section p {
+  margin: 0 0 1.5rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+/* Form Elements */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-group > label:not(.switch-label, .radio-option) {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.form-input,
+.form-textarea,
+.form-select {
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 0.75rem;
+  width: 100%;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+  transition: all 0.2s ease;
+  box-sizing: border-box;
+}
+
+.form-input:focus,
+.form-textarea:focus,
+.form-select:focus {
+  border-color: var(--color-blue-common);
+  outline: none;
+  box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgb(64 158 255 / 20%));
+}
+
+.form-textarea {
+  min-height: 80px;
+  resize: vertical;
+}
+
+.form-range {
+  margin-bottom: 0.5rem;
+  border-radius: 3px;
+  width: 100%;
+  height: 6px;
+  background: #e4e7ed;
+  outline: none;
+  appearance: none;
+}
+
+.form-range::-webkit-slider-thumb {
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  background: #409eff;
+  appearance: none;
+  cursor: pointer;
+}
+
+.form-range::-moz-range-thumb {
+  border: none;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  background: #409eff;
+  cursor: pointer;
+}
+
+.range-value {
+  font-size: 0.875rem;
+  text-align: center;
+  color: var(--color-text-secondary);
+}
+
+/* Grid Layout */
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+/* Switch Component */
+.switch-label {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  padding: 0.75rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.2s ease;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.switch-label:hover {
+  border-color: var(--color-border);
+  background: var(--color-background-secondary);
+}
+
+.switch-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.switch-slider {
+  position: relative;
+  border-radius: 12px;
+  width: 44px;
+  height: 24px;
+  background: var(--color-border);
+  transition: background-color 0.3s;
+  flex-shrink: 0;
+}
+
+.switch-slider::before {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  background: white;
+  transition: transform 0.3s;
+  content: '';
+}
+
+.switch-input:checked + .switch-slider {
+  background: #409eff;
+}
+
+.switch-input:checked + .switch-slider::before {
+  transform: translateX(20px);
+}
+
+.switch-content {
+  flex: 1;
+}
+
+.switch-title {
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.switch-description {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+/* Radio Group */
+.radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.radio-option {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 8px;
+  padding: 0.75rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.2s ease;
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.radio-option:hover {
+  border-color: var(--color-border);
+  background: var(--color-background-secondary);
+}
+
+.radio-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.radio-indicator {
+  position: relative;
+  border: 2px solid var(--color-border);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+}
+
+.radio-input:checked + .radio-indicator {
+  border-color: #409eff;
+}
+
+.radio-input:checked + .radio-indicator::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  background: #409eff;
+  content: '';
+  transform: translate(-50%, -50%);
+}
+
+.radio-label {
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* Buttons */
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  min-width: fit-content;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
+}
+
+.btn-primary {
+  color: white;
+  background: #409eff;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: #66b1ff;
+}
+
+.btn-secondary {
+  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-background-secondary);
+}
+
+.btn-danger {
+  color: white;
+  background: #f56c6c;
+}
+
+.btn-danger:hover:not(:disabled) {
+  background: #f78989;
+}
+
+/* Checkbox Group */
+.checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.checkbox-option {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.2s ease;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.checkbox-option:hover {
+  border-color: var(--color-border);
+  background: var(--color-background-secondary);
+}
+
+.checkbox-input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.checkbox-indicator {
+  position: relative;
+  border: 2px solid var(--color-border);
+  border-radius: 4px;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.checkbox-input:checked + .checkbox-indicator {
+  border-color: #409eff;
+  background: #409eff;
+}
+
+.checkbox-input:checked + .checkbox-indicator::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 10px;
+  color: white;
+  content: '✓';
+  transform: translate(-50%, -50%);
+}
+
+.checkbox-label {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+}
+
+/* Input Groups */
+.input-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.input-group .form-input {
+  flex: 1;
+}
+
+.input-addon-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  width: 40px;
+  color: var(--color-text-secondary);
+  background: var(--color-background-tertiary);
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.input-addon-btn:hover {
+  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
+}
+
+/* Dialog Overlay */
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 80%);
+}
+
+.dialog {
+  overflow-y: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-2xl);
+  padding: 0.75rem;
+  width: 85vw;
+  max-width: 90vw;
+  max-height: 85vh;
+  background: var(--color-surface);
+    box-shadow: var(--shadow-xl);
+  box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.dialog-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.dialog-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 6px;
+  width: 32px;
+  height: 32px;
+  font-size: 1.5rem;
+  color: var(--color-text-secondary);
+  background: none;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.dialog-close:hover {
+  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
+}
+
+.dialog-content {
+  overflow-y: auto;
+  margin-bottom: 1.5rem;
+  padding: 0.2rem;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.dialog-content::-webkit-scrollbar {
+  display: none;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+  gap: 0.75rem;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.button-group .btn {
+  flex: 1;
+}
+
+/* Notice Text */
+.notice-text {
+  margin-bottom: 1rem;
+  border-radius: 8px;
+  padding: 1rem;
+  font-size: 0.925rem;
+  text-align: center;
+  color: #1c2630ff;
+  background: rgb(0 128 255 / 10%);
+}
+
+/* Small text */
+small {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+/* Responsive Design */
+@media (width <= 768px) {
+  .piclist-settings {
+    padding: 1rem;
+  }
+
+  .tab-navigation {
+    flex-direction: column;
+  }
+
+  .tab-button {
+    justify-content: flex-start;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dialog {
+    margin: 1rem;
+    width: 95%;
+  }
+}
+
+/* Dark mode adjustments */
+:root.dark .piclist-settings,
+:root.auto.dark .piclist-settings {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .settings-header,
+:root.dark .tab-navigation,
+:root.dark .settings-section,
+:root.auto.dark .settings-header,
+:root.auto.dark .tab-navigation,
+:root.auto.dark .settings-section {
+  border-color: var(--color-border);
+  background: var(--color-background-secondary);
+}
+
+:root.dark .form-input,
+:root.dark .form-textarea,
+:root.dark .form-select,
+:root.auto.dark .form-input,
+:root.auto.dark .form-textarea,
+:root.auto.dark .form-select {
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .switch-slider::before,
+:root.auto.dark .switch-slider::before {
+  background: var(--color-surface);
+}
+
+:root.dark .btn-secondary,
+:root.auto.dark .btn-secondary {
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .btn-secondary:hover,
+:root.auto.dark .btn-secondary:hover {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .switch-label,
+:root.auto.dark .switch-label {
+  border-color: var(--color-border);
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .switch-label:hover,
+:root.auto.dark .switch-label:hover {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .radio-option,
+:root.dark .checkbox-option,
+:root.auto.dark .radio-option,
+:root.auto.dark .checkbox-option {
+  border-color: var(--color-border);
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .radio-option:hover,
+:root.dark .checkbox-option:hover,
+:root.auto.dark .radio-option:hover,
+:root.auto.dark .checkbox-option:hover {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .dialog,
+:root.auto.dark .dialog {
+  background: var(--color-background-tertiary);
+}
+
+/* Placeholder Help Styles */
+.placeholder-help {
+  overflow-y: auto;
+  margin-top: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0;
+  max-height: 400px;
+  background: var(--color-background-tertiary);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
+}
+
+.placeholder-category {
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.placeholder-category:last-child {
+  border-bottom: none;
+}
+
+.category-title {
+  margin: 0;
+  border-bottom: 1px solid var(--color-border-light);
+  padding: 0.875rem 1rem 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
+  letter-spacing: 0.02em;
+}
+
+.placeholder-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 0;
+  padding: 0.5rem 0;
+}
+
+.placeholder-item {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  border-radius: 0;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.placeholder-item:hover {
+  background: rgb(var(--color-accent-rgb), 0.08);
+}
+
+.placeholder-item code {
+  margin-right: 0.875rem;
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 8px;
+  padding: 0.3rem 0.6rem;
+  min-width: 80px;
+  font-size: 1rem;
+  font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
+  font-weight: 600;
+  text-align: center;
+  color: white;
+  background: var(--color-blue-common);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
+  letter-spacing: 0.02em;
+  flex-shrink: 0;
+}
+
+.placeholder-item span {
+  font-weight: 500;
+  color: var(--color-text-primary);
+  flex: 1;
+}
+
+/* Scrollbar styling for macOS feel */
+.placeholder-help::-webkit-scrollbar {
+  width: 6px;
+}
+
+.placeholder-help::-webkit-scrollbar-track {
+  border-radius: 10px;
+  background: transparent;
+}
+
+.placeholder-help::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: var(--color-border);
+  transition: background 0.2s ease;
+}
+
+.placeholder-help::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
+
+/* Dark theme adjustments */
+:root.dark .placeholder-help,
+:root.auto.dark .placeholder-help {
+  border-color: var(--color-border);
+  background: var(--color-background-secondary);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
+}
+
+:root.dark .category-title,
+:root.auto.dark .category-title {
+  border-bottom-color: var(--color-border);
+  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%);
+}
+
+:root.dark .placeholder-category,
+:root.auto.dark .placeholder-category {
+  border-bottom-color: var(--color-border);
+}
+
+:root.dark .placeholder-item:hover,
+:root.auto.dark .placeholder-item:hover {
+  background: rgb(var(--color-accent-rgb), 0.12);
+}
+
+:root.dark .placeholder-item code,
+:root.auto.dark .placeholder-item code {
+  border-color: rgb(255 255 255 / 15%);
+  background: var(--color-blue-common);
+}
+
+/* Update info and Release Notes Styles */
+.update-info {
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 1rem;
+  background: var(--color-background);
+}
+
+.update-info > div {
+  margin-bottom: 0.5rem;
+  font-size: 0.925rem;
+}
+
+.update-info > div:last-child {
+  margin-bottom: 0;
+}
+
+.update-notice {
+  font-weight: 500;
+  color: var(--color-success) !important;
+}
+
+/* Release Notes Card */
+.release-notes-card {
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  background: var(--color-surface);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+}
+
+.release-notes-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  padding: 1rem 1.5rem;
+  background: var(--color-background);
+}
+
+.release-notes-header h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.release-notes-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.btn-sm {
+  padding: 0.375rem 0.75rem;
+  min-height: auto;
+  font-size: 0.875rem;
+}
+
+.btn-link {
+  border: none;
+  padding: 0.25rem;
+  text-decoration: underline;
+  color: var(--color-accent);
+  background: transparent;
+}
+
+.btn-link:hover {
+  color: var(--color-accent-hover);
+  background: transparent;
+}
+
+.release-notes-content {
+  overflow-y: auto;
+  max-height: 400px;
+  background: var(--color-background);
+  scrollbar-width: thin;
+}
+
+.release-notes-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.release-notes-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.release-notes-content::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  background: var(--color-accent);
+}
+
+.release-notes-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-accent-hover);
+}
+
+.release-notes-loading,
+.release-notes-error,
+.release-notes-empty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  font-size: 0.925rem;
+  text-align: center;
+  color: var(--color-text-secondary);
+  gap: 0.5rem;
+}
+
+.release-notes-error {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem;
+  color: var(--color-error);
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.release-notes-pre {
+  margin: 0;
+  border: none;
+  padding: 1.5rem;
+  font-size: 0.875rem;
+  font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, monospace;
+  white-space: pre-wrap;
+  color: var(--color-text-primary);
+  background: transparent;
+  line-height: 1.6;
+  overflow-wrap: break-word;
+}
+
+.release-notes-footer {
+  border-top: 1px solid var(--color-border);
+  padding: 0.75rem 1.5rem;
+  text-align: center;
+  background: var(--color-background-secondary);
+}
+
+.release-notes-footer small {
+  display: flex;
+  align-items: center;
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  gap: 0.375rem;
+}
+
+/* Rotation animation for loading icons */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rotate {
+  animation: rotate 1s linear infinite;
+}
+
+/* Config Dialog Styles */
+.config-dialog {
+  width: 90%;
+  max-width: 600px;
+}
+
+.dialog-icon {
+  color: var(--color-accent);
+}
+
+.config-section {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+  background: var(--color-background-secondary);
+  transition: all 0.2s ease;
+}
+
+.config-section:hover {
+  border-color: var(--color-accent);
+  box-shadow: 0 2px 12px rgb(64 158 255 / 15%);
+}
+
+.config-section:not(:last-child) {
+  margin-bottom: 1rem;
+}
+
+.config-section-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  gap: 0.5rem;
+}
+
+.config-section-header h4 {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.config-section-header svg {
+  color: var(--color-accent);
+}
+
+.config-button-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+.config-button-grid.full-width {
+  grid-template-columns: 1fr;
+}
+
+.config-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 0.875rem 1rem;
+  min-height: 48px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+  transition: all 0.2s ease;
+  cursor: pointer;
+  gap: 0.5rem;
+
+}
+
+.config-button:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: var(--color-background-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgb(64 158 255 / 20%);
+}
+
+.config-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgb(64 158 255 / 15%);
+}
+
+.config-button .button-icon {
+  flex-shrink: 0;
+  color: var(--color-accent);
+  transition: transform 0.2s ease;
+}
+
+.config-button:hover .button-icon {
+  transform: scale(1.1);
+}
+
+.config-button span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (width <= 768px) {
+  .config-button-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .config-dialog {
+    max-width: 95%;
+  }
+}
+
+/* ==================== Sync Panel Styles ==================== */
+
+/* Sync Overview Card */
+.sync-overview-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  padding: 1.5rem;
+  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-primary) 100%);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
+  gap: 1.5rem;
+}
+
+.sync-overview-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.sync-overview-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 14px;
+  width: 46px;
+  height: 46px;
+  color: white;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow: 0 4px 12px rgb(64 158 255 / 30%);
+}
+
+.sync-overview-info h2 {
+  margin: 0 0 0.25rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.sync-status-text {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  gap: 0.5rem;
+}
+
+.sync-type-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #409eff;
+  background: rgb(64 158 255 / 15%);
+  letter-spacing: 0.02em;
+}
+
+.sync-not-configured {
+  font-style: italic;
+  color: var(--color-text-tertiary);
+}
+
+.sync-config-btn {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Section Header with Icon */
+.section-header-with-icon {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+  gap: 0.75rem;
+}
+
+.section-icon {
+  margin-top: 0.125rem;
+  color: var(--color-accent);
+  flex-shrink: 0;
+}
+
+.section-header-with-icon h2 {
+  margin-top: 0.4rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.section-header-with-icon p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+/* Sync Action Cards */
+.sync-action-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.sync-action-card {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0.5rem 1.25rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+  gap: 1rem;
+}
+
+.sync-action-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
+  transform: translateX(4px);
+  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
+}
+
+.sync-action-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 38px;
+  height: 38px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.sync-action-icon.upload {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+}
+
+.sync-action-icon.migrate {
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+}
+
+.sync-action-content {
+  flex: 1;
+}
+
+.sync-action-content h4 {
+  margin: 0 0 0.25rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.sync-action-content p {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+
+.sync-action-arrow {
+  color: var(--color-text-tertiary);
+  transition: all 0.25s ease;
+  flex-shrink: 0;
+}
+
+.sync-action-card:hover .sync-action-arrow {
+  color: var(--color-accent);
+  transform: translateX(4px);
+}
+
+/* File Management Section */
+.file-action-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.file-action-btn {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px dashed var(--color-border);
+  border-radius: 12px;
+  padding: 1.5rem 1rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+  gap: 0.75rem;
+}
+
+.file-action-btn:hover {
+  border-style: solid;
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: rgb(64 158 255 / 8%);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgb(64 158 255 / 15%);
+}
+
+.file-action-btn svg {
+  color: var(--color-text-secondary);
+  transition: color 0.25s ease;
+}
+
+.file-action-btn:hover svg {
+  color: var(--color-accent);
+}
+
+.file-action-btn span {
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: center;
+  color: var(--color-text-primary);
+}
+
+/* ==================== Sync Configuration Dialog ==================== */
+
+.sync-config-dialog {
+  width: 90%;
+  max-width: 560px;
+}
+
+.sync-dialog-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 34px;
+  height: 34px;
+  color: white;
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+  box-shadow: 0 4px 12px rgb(64 158 255 / 25%);
+  flex-shrink: 0;
+}
+
+.dialog-subtitle {
+  margin: 0.25rem 0 0;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+}
+
+.sync-dialog-content {
+  padding: 0.5rem;
+}
+
+/* Sync Type Selector */
+.sync-type-selector {
+  margin-bottom: 1.5rem;
+}
+
+.sync-type-label {
+  display: block;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.sync-type-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.75rem;
+}
+
+.sync-type-btn {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 2px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem 0.5rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.2s ease;
+  cursor: pointer;
+  gap: 0.5rem;
+}
+
+.sync-type-btn:hover {
+  border-color: var(--color-accent);
+  background: rgb(64 158 255 / 8%);
+}
+
+.sync-type-btn.active {
+  border-color: #409eff;
+  color: #409eff;
+  background: rgb(64 158 255 / 12%);
+  box-shadow: 0 0 0 3px rgb(64 158 255 / 15%);
+}
+
+.sync-type-btn svg {
+  color: var(--color-text-secondary);
+  transition: color 0.2s ease;
+}
+
+.sync-type-btn.active svg,
+.sync-type-btn:hover svg {
+  color: #409eff;
+}
+
+.sync-type-btn span {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+/* Sync Config Fields */
+.sync-config-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.sync-fields-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.sync-field-group {
+  display: flex;
+  flex-direction: column;
+}
+
+.sync-field-group label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  font-size: 0.825rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  gap: 0.4rem;
+}
+
+.sync-field-group label svg {
+  color: var(--color-accent);
+}
+
+.sync-ssl-toggle {
+  margin-top: 0.5rem;
+}
+
+/* Dark Mode Adjustments for Sync Panel */
+:root.dark .sync-overview-card,
+:root.auto.dark .sync-overview-card {
+  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
+}
+
+:root.dark .sync-action-card,
+:root.auto.dark .sync-action-card {
+  border-color: var(--color-border);
+  background: var(--color-background-secondary);
+}
+
+:root.dark .sync-action-card:hover,
+:root.auto.dark .sync-action-card:hover {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .file-action-btn,
+:root.auto.dark .file-action-btn {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .file-action-btn:hover,
+:root.auto.dark .file-action-btn:hover {
+  background: rgb(64 158 255 / 12%);
+}
+
+:root.dark .sync-type-btn,
+:root.auto.dark .sync-type-btn {
+  border-color: var(--color-border);
+  background: var(--color-background-secondary);
+}
+
+:root.dark .sync-type-btn:hover,
+:root.auto.dark .sync-type-btn:hover {
+  background: rgb(64 158 255 / 15%);
+}
+
+:root.dark .sync-type-btn.active,
+:root.auto.dark .sync-type-btn.active {
+  background: rgb(64 158 255 / 20%);
+}
+
+/* Responsive Adjustments */
+@media (width <= 768px) {
+  .sync-overview-card {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .sync-overview-header {
+    flex-direction: column;
+  }
+
+  .file-action-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .sync-type-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .sync-fields-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ==================== Advanced Settings Panel ==================== */
+
+/* Section Icon Wrapper */
+.section-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  border-radius: 12px;
+  width: 44px;
+  height: 44px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.section-icon-wrapper.small-icon {
+  width: 34px;
+  height: 34px;
+}
+
+.section-icon-wrapper.log {
+  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
+}
+
+.section-icon-wrapper.network {
+  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
+}
+
+.section-icon-wrapper.server {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+}
+
+.section-icon-wrapper.update {
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+}
+
+.section-icon-wrapper.notes {
+  background: linear-gradient(135deg, #909399 0%, #b1b3b8 100%);
+}
+
+/* Advanced Action Grid */
+.advanced-action-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.advanced-action-card {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+  gap: 1rem;
+}
+
+.advanced-action-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
+}
+
+.advanced-action-card.standalone {
+  grid-column: 1 / -1;
+}
+
+.advanced-action-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 44px;
+  height: 44px;
+  color: var(--color-accent);
+  background: rgb(64 158 255 / 12%);
+  flex-shrink: 0;
+}
+
+.advanced-action-info {
+  flex: 1;
+}
+
+.advanced-action-info h4 {
+  margin: 0 0 0.25rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.advanced-action-info p {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+
+.advanced-action-arrow {
+  color: var(--color-text-tertiary);
+  transition: all 0.25s ease;
+  flex-shrink: 0;
+}
+
+.advanced-action-card:hover .advanced-action-arrow {
+  color: var(--color-accent);
+  transform: translateX(4px);
+}
+
+/* Server Config Grid */
+.server-config-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-bottom: 1.25rem;
+  gap: 1rem;
+}
+
+.server-config-card {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+}
+
+.server-config-card:hover {
+  border-color: var(--color-accent);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
+}
+
+.server-config-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.server-config-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+  color: white;
+}
+
+.server-config-icon.web {
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+}
+
+.server-config-icon.api {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+}
+
+.server-config-badge {
+  border-radius: 6px;
+  padding: 0.2rem 0.5rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  background: var(--color-background-secondary);
+  letter-spacing: 0.05em;
+}
+
+.server-config-card h4 {
+  margin: 0 0 0.25rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.server-config-card p {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
+}
+
+/* Encryption Key Section */
+.encryption-key-section {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+  background: var(--color-background-tertiary);
+}
+
+.encryption-key-header {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.75rem;
+  gap: 0.75rem;
+}
+
+.encryption-key-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  color: #e6a23c;
+  background: rgb(230 162 60 / 15%);
+  flex-shrink: 0;
+}
+
+.encryption-key-header label {
+  display: block;
+  margin-bottom: 0.125rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.encryption-key-header small {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+/* ==================== Update Settings Panel ==================== */
+
+/* Update Status Card */
+.update-status-card {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  padding: 1.5rem 2rem;
+  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-primary) 100%);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
+  gap: 1.5rem;
+}
+
+.update-status-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 16px;
+  width: 44px;
+  height: 44px;
+  color: white;
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+  box-shadow: 0 4px 12px rgb(103 194 58 / 30%);
+  flex-shrink: 0;
+}
+
+.update-status-info {
+  flex: 1;
+}
+
+.update-status-info h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.version-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.version-badge {
+  border-radius: 8px;
+  padding: 0.3rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #67c23a;
+  background: rgb(103 194 58 / 15%);
+}
+
+.version-label {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.update-check-btn {
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* Update Preferences */
+.update-preferences-section .update-preference-card {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0.25rem;
+  background: var(--color-background-tertiary);
+}
+
+.update-preferences-section .switch-label {
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+/* Enhanced Release Notes */
+.release-notes-card.enhanced {
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: 16px;
+  background: var(--color-surface);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
+}
+
+.release-notes-card.enhanced .release-notes-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  padding: 1rem 1.5rem;
+  background: var(--color-background-tertiary);
+}
+
+.release-notes-title {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.release-notes-title svg {
+  color: var(--color-accent);
+}
+
+.release-notes-title h3 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.refresh-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.release-notes-card.enhanced .release-notes-content {
+  overflow-y: auto;
+  max-height: 400px;
+  background: var(--color-background-primary);
+}
+
+.release-notes-loading {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem;
+  gap: 1rem;
+}
+
+.loading-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  color: var(--color-accent);
+  background: rgb(64 158 255 / 12%);
+}
+
+.release-notes-loading span {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.error-icon {
+  font-size: 2rem;
+}
+
+.release-notes-error span {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.release-notes-empty {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 3rem;
+  gap: 0.75rem;
+}
+
+.empty-icon {
+  font-size: 2rem;
+}
+
+.release-notes-empty span {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.release-notes-card.enhanced .release-notes-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top: 1px solid var(--color-border);
+  padding: 0.75rem 1.5rem;
+  background: var(--color-background-tertiary);
+}
+
+/* Dark Mode for Advanced & Update */
+:root.dark .advanced-action-card,
+:root.auto.dark .advanced-action-card {
+  border-color: var(--color-border);
+  background: var(--color-background-secondary);
+}
+
+:root.dark .advanced-action-card:hover,
+:root.auto.dark .advanced-action-card:hover {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .server-config-card,
+:root.auto.dark .server-config-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .server-config-card:hover,
+:root.auto.dark .server-config-card:hover {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .encryption-key-section,
+:root.auto.dark .encryption-key-section {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .update-status-card,
+:root.auto.dark .update-status-card {
+  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
+  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
+}
+
+:root.dark .release-notes-card.enhanced,
+:root.auto.dark .release-notes-card.enhanced {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .release-notes-card.enhanced .release-notes-header,
+:root.auto.dark .release-notes-card.enhanced .release-notes-header {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .release-notes-card.enhanced .release-notes-content,
+:root.auto.dark .release-notes-card.enhanced .release-notes-content {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .release-notes-card.enhanced .release-notes-footer,
+:root.auto.dark .release-notes-card.enhanced .release-notes-footer {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .update-preference-card,
+:root.auto.dark .update-preference-card {
+  background: var(--color-background-secondary);
+}
+
+/* Responsive for Advanced & Update */
+@media (width <= 768px) {
+  .advanced-action-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .server-config-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .update-status-card {
+    flex-direction: column;
+    padding: 1.5rem;
+    text-align: center;
+  }
+
+  .version-info {
+    justify-content: center;
+  }
+}
+
+/* ==================== System Settings Panel ==================== */
+
+/* Section Icon Wrapper - Additional Colors */
+.section-icon-wrapper.language {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+}
+
+.section-icon-wrapper.window {
+  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
+}
+
+.section-icon-wrapper.startup {
+  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
+}
+
+/* System Option Grid */
+.system-option-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.system-option-card {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem;
+  background: var(--color-background-tertiary);
+}
+
+.system-option-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  gap: 0.5rem;
+}
+
+.system-option-header svg {
+  color: var(--color-accent);
+}
+
+/* Window Size Card */
+.window-size-card {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+  gap: 1rem;
+}
+
+.window-size-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
+}
+
+.window-size-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 25px;
+  height: 25px;
+  color: white;
+  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
+  flex-shrink: 0;
+}
+
+.window-size-info {
+  flex: 1;
+}
+
+.window-size-info h4 {
+  margin-top: 0.2rem;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.window-size-info p {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+}
+
+.window-size-arrow {
+  color: var(--color-text-tertiary);
+  transition: all 0.25s ease;
+  flex-shrink: 0;
+}
+
+.window-size-card:hover .window-size-arrow {
+  color: var(--color-accent);
+  transform: translateX(4px);
+}
+
+/* System Toggles Grid */
+.system-toggles-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.system-toggle-card {
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.25rem;
+  background: var(--color-background-tertiary);
+}
+
+.system-toggle-card .switch-label {
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+.system-toggle-card.with-action {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+}
+
+.toggle-with-action-content {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  gap: 0.5rem;
+}
+
+.toggle-with-action-content svg {
+  color: var(--color-accent);
+}
+
+/* Startup Options Grid */
+.startup-options-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.startup-toggle-card {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0.25rem;
+  background: var(--color-background-tertiary);
+}
+
+.startup-toggle-card .switch-label {
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+/* Shortcut Action Card */
+.shortcut-action-card {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+  gap: 1rem;
+}
+
+.shortcut-action-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
+}
+
+.shortcut-action-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 44px;
+  height: 44px;
+  color: white;
+  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
+  flex-shrink: 0;
+}
+
+.shortcut-action-info {
+  flex: 1;
+}
+
+.shortcut-action-info h4 {
+  margin: 0 0 0.25rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.shortcut-action-info p {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+}
+
+.shortcut-action-arrow {
+  color: var(--color-text-tertiary);
+  transition: all 0.25s ease;
+  flex-shrink: 0;
+}
+
+.shortcut-action-card:hover .shortcut-action-arrow {
+  color: var(--color-accent);
+  transform: translateX(4px);
+}
+
+/* ==================== Upload Settings Panel ==================== */
+
+/* Section Icon Wrapper - Upload Colors */
+.section-icon-wrapper.upload {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+}
+
+.section-icon-wrapper.processing {
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+}
+
+.section-icon-wrapper.clipboard {
+  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
+}
+
+.section-icon-wrapper.link {
+  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
+}
+
+.section-icon-wrapper.picbed {
+  background: linear-gradient(135deg, #f56c6c 0%, #f89898 100%);
+}
+
+.section-icon-wrapper.gallery {
+  background: linear-gradient(135deg, #b37feb 0%, #d3adf7 100%);
+}
+
+/* Upload Behavior Grid */
+.upload-behavior-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.upload-feature-card {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0.25rem;
+  background: var(--color-background-tertiary);
+}
+
+.upload-feature-card .switch-label {
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+.upload-feature-card.picbed-selection {
+  padding: 1rem;
+  grid-column: 1 / -1;
+}
+
+.picbed-selection-header {
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.checkbox-group.compact {
+  gap: 0.5rem;
+}
+
+/* Upload Action Card */
+.upload-action-card {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+  gap: 0.75rem;
+}
+
+.upload-action-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgb(64 158 255 / 15%);
+}
+
+.upload-action-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+  color: var(--color-accent);
+  background: rgb(64 158 255 / 12%);
+  flex-shrink: 0;
+}
+
+.upload-action-info {
+  flex: 1;
+}
+
+.upload-action-info h4 {
+  margin: 0 0 0.125rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.upload-action-info p {
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.upload-action-arrow {
+  color: var(--color-text-tertiary);
+  transition: all 0.25s ease;
+  flex-shrink: 0;
+}
+
+.upload-action-card:hover .upload-action-arrow {
+  color: var(--color-accent);
+  transform: translateX(4px);
+}
+
+/* Processing Actions Grid */
+.processing-actions-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-bottom: 1rem;
+  gap: 1rem;
+}
+
+.processing-action-card {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+  gap: 1rem;
+}
+
+.processing-action-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
+}
+
+.processing-action-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 30px;
+  height: 30px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.processing-action-icon.rename {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+}
+
+.processing-action-icon.image {
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+}
+
+.processing-action-info {
+  flex: 1;
+}
+
+.processing-action-info h4 {
+  margin: 0 0 0.25rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.processing-action-info p {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+}
+
+/* Upload Toggles Grid */
+.upload-toggles-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.75rem;
+}
+
+.upload-toggle-card {
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.25rem;
+  background: var(--color-background-tertiary);
+}
+
+.upload-toggle-card .switch-label {
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+.upload-toggle-card.standalone {
+  grid-column: 1 / -1;
+  margin-top: 1rem;
+}
+
+/* URL Format Action Card */
+.url-format-action-card {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1.25rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  cursor: pointer;
+  gap: 1rem;
+}
+
+.url-format-action-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
+}
+
+.url-format-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 30px;
+  height: 30px;
+  color: white;
+  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
+  flex-shrink: 0;
+}
+
+.url-format-info {
+  flex: 1;
+}
+
+.url-format-info h4 {
+  margin: 0 0 0.25rem;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.url-format-info p {
+  margin: 0;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+}
+
+.url-format-arrow {
+  color: var(--color-text-tertiary);
+  transition: all 0.25s ease;
+  flex-shrink: 0;
+}
+
+.url-format-action-card:hover .url-format-arrow {
+  color: var(--color-accent);
+  transform: translateX(4px);
+}
+
+/* Short URL Section */
+.short-url-section {
+  margin-bottom: 1rem;
+}
+
+.short-url-config {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-top: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem;
+  background: var(--color-background-tertiary);
+  gap: 1rem;
+}
+
+.short-url-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.short-url-field label {
+  margin-bottom: 0.5rem;
+  font-size: 0.825rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* PicBed Checkbox Grid */
+.picbed-checkbox-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.picbed-checkbox-card {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 0.625rem 0.875rem;
+  background: var(--color-background-tertiary);
+  transition: all 0.2s ease;
+  cursor: pointer;
+  gap: 0.5rem;
+}
+
+.picbed-checkbox-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
+}
+
+/* ==================== Enhanced Dialog Styles ==================== */
+
+.enhanced-dialog {
+  width: 500px;
+  max-width: 90vw;
+}
+
+.dialog-header-content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.dialog-icon-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 40px;
+  height: 40px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.dialog-icon-wrapper.link {
+  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
+}
+
+.dialog-icon-wrapper.network {
+  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
+}
+
+.dialog-icon-wrapper.window {
+  background: linear-gradient(135deg, #909399 0%, #c0c4cc 100%);
+}
+
+.dialog-icon-wrapper.update {
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+}
+
+.dialog-icon-wrapper.rename {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+}
+
+/* Placeholder Info Card */
+.placeholder-info-card {
+  margin-bottom: 1.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 1rem;
+  background: var(--color-background-tertiary);
+}
+
+.placeholder-info-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  gap: 0.5rem;
+}
+
+.placeholder-info-title svg {
+  color: var(--color-accent);
+}
+
+.placeholder-info-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.placeholder-info-item {
+  display: flex;
+  align-items: center;
+  font-size: 0.825rem;
+  gap: 0.75rem;
+}
+
+.placeholder-info-item code {
+  border-radius: 6px;
+  padding: 0.25rem 0.5rem;
+  min-width: 80px;
+  font-family: 'SF Mono', Monaco, Menlo, monospace;
+  font-weight: 600;
+  text-align: center;
+  color: white;
+  background: var(--color-accent);
+}
+
+.placeholder-info-item span {
+  color: var(--color-text-secondary);
+}
+
+/* Proxy Config Grid */
+.proxy-config-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.proxy-config-card {
+  display: flex;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 1rem;
+  background: var(--color-background-tertiary);
+  gap: 0.75rem;
+}
+
+.proxy-config-card.full-width {
+  grid-column: 1 / -1;
+}
+
+.proxy-config-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  width: 36px;
+  height: 36px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.proxy-config-icon.upload {
+  background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
+}
+
+.proxy-config-icon.plugin {
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+}
+
+.proxy-config-icon.mirror {
+  background: linear-gradient(135deg, #e6a23c 0%, #f5c55c 100%);
+}
+
+.proxy-config-field {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.proxy-config-field label {
+  margin-bottom: 0.5rem;
+  font-size: 0.825rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* Window Size Grid */
+.window-size-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  margin-bottom: 1rem;
+  gap: 1rem;
+}
+
+.window-size-field {
+  display: flex;
+  flex-direction: column;
+}
+
+.window-size-field label {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+  font-size: 0.825rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  gap: 0.375rem;
+}
+
+.window-size-field label svg {
+  color: var(--color-accent);
+}
+
+/* Update Dialog Styles */
+.update-dialog {
+  width: 480px;
+}
+
+.update-version-comparison {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 1.25rem;
+  gap: 1rem;
+}
+
+.version-card {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem 1.5rem;
+  min-width: 120px;
+  text-align: center;
+  background: var(--color-background-tertiary);
+  flex: 1;
+}
+
+.version-card.latest.has-update {
+  border-color: #67c23a;
+  background: rgb(103 194 58 / 10%);
+}
+
+.version-card-label {
+  margin-bottom: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+.version-card-value {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.version-card.latest.has-update .version-card-value {
+  color: #67c23a;
+}
+
+.version-arrow {
+  color: var(--color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.update-notice-card {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  padding: 1rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #67c23a;
+  background: rgb(103 194 58 / 12%);
+  gap: 0.5rem;
+}
+
+/* Rename Dialog Styles */
+.rename-dialog {
+  width: 600px;
+}
+
+.rename-toggle-card {
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.25rem;
+  background: var(--color-background-tertiary);
+}
+
+.rename-toggle-card .switch-label {
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+.rename-format-field label {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.rename-format-field label svg {
+  color: var(--color-accent);
+}
+
+/* Dark Mode Adjustments */
+:root.dark .system-option-card,
+:root.auto.dark .system-option-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .window-size-card,
+:root.auto.dark .window-size-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .window-size-card:hover,
+:root.auto.dark .window-size-card:hover {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .system-toggle-card,
+:root.auto.dark .system-toggle-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .startup-toggle-card,
+:root.auto.dark .startup-toggle-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .shortcut-action-card,
+:root.auto.dark .shortcut-action-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .shortcut-action-card:hover,
+:root.auto.dark .shortcut-action-card:hover {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .upload-feature-card,
+:root.auto.dark .upload-feature-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .upload-action-card,
+:root.auto.dark .upload-action-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .upload-action-card:hover,
+:root.auto.dark .upload-action-card:hover {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .processing-action-card,
+:root.auto.dark .processing-action-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .processing-action-card:hover,
+:root.auto.dark .processing-action-card:hover {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .upload-toggle-card,
+:root.auto.dark .upload-toggle-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .url-format-action-card,
+:root.auto.dark .url-format-action-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .url-format-action-card:hover,
+:root.auto.dark .url-format-action-card:hover {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .short-url-config,
+:root.auto.dark .short-url-config {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .picbed-checkbox-card,
+:root.auto.dark .picbed-checkbox-card {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .picbed-checkbox-card:hover,
+:root.auto.dark .picbed-checkbox-card:hover {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .enhanced-dialog,
+:root.auto.dark .enhanced-dialog {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .placeholder-info-card,
+:root.auto.dark .placeholder-info-card {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .proxy-config-card,
+:root.auto.dark .proxy-config-card {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .version-card,
+:root.auto.dark .version-card {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .rename-toggle-card,
+:root.auto.dark .rename-toggle-card {
+  background: var(--color-background-tertiary);
+}
+
+/* ============================
+   Log Dialog Styles
+   ============================ */
+.log-dialog {
+  max-width: 600px;
+}
+
+.dialog-icon-wrapper.log {
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+}
+
+.log-files-section {
+  margin-bottom: 1.5rem;
+}
+
+.log-files-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  gap: 0.5rem;
+}
+
+.log-files-title svg {
+  color: var(--color-accent);
+}
+
+.log-files-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+.log-file-card {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem;
+  text-align: center;
+  background: var(--color-background-tertiary);
+  transition: all 0.25s ease;
+  flex-direction: column;
+  cursor: pointer;
+  gap: 0.75rem;
+}
+
+.log-file-card:hover {
+  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgb(64 158 255 / 15%);
+}
+
+.log-file-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 42px;
+  height: 42px;
+  color: white;
+  background: linear-gradient(135deg, #67c23a 0%, #95d475 100%);
+}
+
+.log-file-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.log-file-name {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.log-file-hint {
+  font-size: 0.7rem;
+  color: var(--color-text-tertiary);
+}
+
+.log-settings-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 1rem;
+}
+
+/* ============================
+   Server Dialog Styles
+   ============================ */
+.server-dialog,
+.webserver-dialog {
+  max-width: 550px;
+}
+
+.dialog-icon-wrapper.server {
+  background: linear-gradient(135deg, #409eff 0%, #79bbff 100%);
+}
+
+.dialog-icon-wrapper.webserver {
+  background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
+}
+
+.server-notice-card {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 10px;
+  padding: 0.875rem 1rem;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  background: var(--color-background-tertiary);
+  line-height: 1.5;
+  gap: 0.75rem;
+}
+
+.server-toggle-card {
+  margin-bottom: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 0.25rem;
+  background: var(--color-background-tertiary);
+}
+
+.server-toggle-card .switch-label {
+  margin: 0;
+  border: none;
+  background: transparent;
+}
+
+.server-config-section {
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: 1rem;
+  background: var(--color-background-tertiary);
+}
+
+.server-config-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  gap: 0.5rem;
+}
+
+.server-config-title svg {
+  color: var(--color-accent);
+}
+
+.server-fields-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.server-key-field,
+.server-path-field {
+  margin-top: 1rem;
+}
+
+.server-key-field label,
+.server-path-field label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.server-key-field label svg,
+.server-path-field label svg {
+  color: var(--color-accent);
+}
+
+/* Dark mode for new dialog components */
+:root.dark .log-file-card,
+:root.auto.dark .log-file-card {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .log-file-card:hover,
+:root.auto.dark .log-file-card:hover {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .server-notice-card,
+:root.auto.dark .server-notice-card {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .server-toggle-card,
+:root.auto.dark .server-toggle-card {
+  background: var(--color-background-tertiary);
+}
+
+:root.dark .server-config-section,
+:root.auto.dark .server-config-section {
+  background: var(--color-background-tertiary);
+}
+
+/* Responsive Adjustments */
+@media (width <= 768px) {
+  .system-option-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .system-toggles-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .startup-options-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .upload-behavior-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .processing-actions-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .upload-toggles-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .short-url-config {
+    grid-template-columns: 1fr;
+  }
+
+  .proxy-config-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .window-size-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .update-version-comparison {
+    flex-direction: column;
+  }
+
+  .version-arrow {
+    transform: rotate(90deg);
+  }
+
+  .log-files-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .log-settings-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .server-fields-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.notes-body {
+  overflow-y: auto;
+  border-radius: 12px;
+  padding: 1.25rem;
+  max-height: 195px;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  background: #f8fafc;
+  color: #475569;
+}
+
+.notes-body :deep(h1),
+.notes-body :deep(h2),
+.notes-body :deep(h3) {
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.notes-body :deep(h1:first-child),
+.notes-body :deep(h2:first-child),
+.notes-body :deep(h3:first-child) {
+  margin-top: 0;
+}
+
+.notes-body :deep(p) {
+  margin-bottom: 0.875rem;
+}
+
+.notes-body :deep(ul),
+.notes-body :deep(ol) {
+  padding-left: 1.5rem;
+  margin: 0.875rem 0;
+}
+
+.notes-body :deep(li) {
+  margin-bottom: 0.375rem;
+}
+
+.notes-body :deep(code) {
+  border-radius: 4px;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.875em;
+  background: #e2e8f0;
+  color: #334155;
+}
+
+.notes-body :deep(pre) {
+  overflow-x: auto;
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 0.875rem 0;
+  background: #e2e8f0;
+}
+
+.notes-body :deep(pre code) {
+  padding: 0;
+  background: transparent;
+}