🐛 Fix(custom): fix an issue eslint not worked as expected

2026-06-12 03:00:29 +08:00 · 2025-12-30 13:20:28 +08:00
parent 4fb5a26270
commit b53eccce13
185 changed files with 8014 additions and 7627 deletions
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -486,7 +486,7 @@ import {
  SearchIcon,
  SortAscIcon,
  TrashIcon,
-  XIcon
+  XIcon,
 } from 'lucide-vue-next'
 import { computed, nextTick, onActivated, onBeforeMount, onBeforeUnmount, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -522,12 +522,12 @@ const previewImageRef = ref<HTMLImageElement>()
 const dialogVisible = ref(false)
 const imgInfo = reactive({
  id: '',
-  imgUrl: ''
+  imgUrl: '',
 })
 const choosedList: IObjT<boolean> = reactive({})
 const gallerySliderControl = reactive({
  visible: false,
-  index: 0
+  index: 0,
 })
 const deleteCloud = ref<boolean>(false)
 const isAlwaysForceReload = ref<boolean>(false)
@@ -546,12 +546,12 @@ const pasteStyleMap = {
  HTML: 'HTML',
  URL: 'URL',
  UBB: 'UBB',
-  Custom: 'Custom'
+  Custom: 'Custom',
 }
 const useShortUrl = ref<string>('')
 const shortURLMap = {
  [t('pages.gallery.shortUrl')]: t('pages.gallery.shortUrl'),
-  [t('pages.gallery.longUrl')]: t('pages.gallery.longUrl')
+  [t('pages.gallery.longUrl')]: t('pages.gallery.longUrl'),
 }
 const fileSortNameReverse = ref(false)
 const fileSortTimeReverse = ref(false)
@@ -574,7 +574,7 @@ const gridBreakpoints = [
  { min: 768, cols: 3 },
  { min: 1024, cols: 4 },
  { min: 1280, cols: 6 },
-  { min: 1536, cols: 7 }
+  { min: 1536, cols: 7 },
 ]

 const imageLoadStates = reactive<Record<string, boolean>>({})
@@ -591,7 +591,7 @@ const imagePreviewState = reactive({
  startTranslateY: 0,
  isSwipeMode: false,
  swipeStartX: 0,
-  swipeThreshold: 100
+  swipeThreshold: 100,
 })

 const advancedRenameList = {
@@ -604,20 +604,20 @@ const advancedRenameList = {
    { label: t('pages.settings.upload.placeholder.minute'), value: '{i}' },
    { label: t('pages.settings.upload.placeholder.second'), value: '{s}' },
    { label: t('pages.settings.upload.placeholder.millisecond'), value: '{ms}' },
-    { label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' }
+    { label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' },
  ],
  categoryHash: [
    { label: t('pages.settings.upload.placeholder.md5'), value: '{md5}' },
    { label: t('pages.settings.upload.placeholder.md5-16'), value: '{md5-16}' },
    { label: t('pages.settings.upload.placeholder.uuid'), value: '{uuid}' },
    { label: t('pages.settings.upload.placeholder.sha256'), value: '{sha256}' },
-    { label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' }
+    { label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' },
  ],
  categoryFile: [
    { label: t('pages.settings.upload.placeholder.filename'), value: '{filename}' },
    { label: t('pages.settings.upload.placeholder.localFolder'), value: '{localFolder:n}' },
-    { label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' }
-  ]
+    { label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' },
+  ],
 }

 const matchedCount = computed(() => {
@@ -641,7 +641,7 @@ const dateRange = computed({
      dateRangeStart.value = ''
      dateRangeEnd.value = ''
    }
-  }
+  },
 })

 function copyPlaceholder(placeholder: string) {
@@ -692,7 +692,7 @@ const imageTransformStyle = computed(() => {
  return {
    transform: `translate(${imagePreviewState.translateX}px, ${imagePreviewState.translateY}px) scale(${imagePreviewState.scale})`,
    cursor: imagePreviewState.isDragging ? 'grabbing' : isDraggable ? 'grab' : 'default',
-    transition: 'none'
+    transition: 'none',
  }
 })

@@ -1068,7 +1068,7 @@ function getGallery(): IGalleryItem[] {
          ...item,
          src: item.galleryPath || item.imgUrl || '',
          key: item.id || `item-${index}`,
-          intro: item.fileName || ''
+          intro: item.fileName || '',
        }
      })
  } else {
@@ -1077,7 +1077,7 @@ function getGallery(): IGalleryItem[] {
        ...item,
        src: item.galleryPath || item.imgUrl || '',
        key: item.id || `item-${index}`,
-        intro: item.fileName || ''
+        intro: item.fileName || '',
      }
    })
  }
@@ -1188,7 +1188,7 @@ async function copy(item: ImgInfo) {
  const result = await window.electron.triggerRPC<[string, string]>(IRPCActionType.GALLERY_PASTE_TEXT, getRawData(item))
  if (result && result[1] && item.id) {
    await $$db.updateById(item.id, {
-      shortUrl: result[1]
+      shortUrl: result[1],
    })
    updateGallery()
  }
@@ -1205,7 +1205,7 @@ function remove(item: ImgInfo, _: number) {
    type: 'warning',
    confirmButtonText: t('common.confirm'),
    cancelButtonText: t('common.cancel'),
-    center: true
+    center: true,
  }).then(async result => {
    if (!result) return
    const file = await $$db.getById(item.id!)
@@ -1238,14 +1238,14 @@ function handleIsAlwaysForceReload(event: Event) {
  const ev = (event.target as HTMLInputElement).checked
  isAlwaysForceReload.value = ev
  saveConfig({
-    [configPaths.settings.isAlwaysForceReload]: ev
+    [configPaths.settings.isAlwaysForceReload]: ev,
  })
  window.electron.sendRPC(IRPCActionType.REFRESH_SETTING_WINDOW)
 }

 function handleDeleteCloudFile(event: Event) {
  saveConfig({
-    [configPaths.settings.deleteCloudFile]: (event.target as HTMLInputElement).checked
+    [configPaths.settings.deleteCloudFile]: (event.target as HTMLInputElement).checked,
  })
 }

@@ -1257,7 +1257,7 @@ function openDialog(item: ImgInfo) {

 async function confirmModify() {
  await $$db.updateById(imgInfo.id, {
-    imgUrl: imgInfo.imgUrl
+    imgUrl: imgInfo.imgUrl,
  })
  message.success(t('pages.gallery.operationSucceed'))
  dialogVisible.value = false
@@ -1295,7 +1295,7 @@ function multiRemove() {
      type: 'warning',
      confirmButtonText: t('common.confirm'),
      cancelButtonText: t('common.cancel'),
-      center: true
+      center: true,
    }).then(async result => {
      if (!result) return
      const files: IResult<ImgInfo>[] = []
@@ -1311,13 +1311,13 @@ function multiRemove() {
                const result = await ALLApi.delete(file)
                if (result) {
                  message.success(`${file.fileName} ${t('pages.gallery.cloudDeleteSucceed')}`, {
-                    duration: multiRemoveNumber > 5 ? 1000 : 2000
+                    duration: multiRemoveNumber > 5 ? 1000 : 2000,
                  })
                  files.push(file)
                  await $$db.removeById(key)
                } else {
                  message.error(`${file.fileName} ${t('pages.gallery.cloudDeleteFailed')}`, {
-                    duration: multiRemoveNumber > 5 ? 1000 : 2000
+                    duration: multiRemoveNumber > 5 ? 1000 : 2000,
                  })
                }
              } else {
@@ -1362,7 +1362,7 @@ async function multiCopy() {
        copyString.push(result ? result[0] : '')
        if (result && result[1] && item.id) {
          await $$db.updateById(item.id, {
-            shortUrl: result[1]
+            shortUrl: result[1],
          })
          updateGallery()
        }
@@ -1467,11 +1467,11 @@ function handleBatchRename() {
    matchedFiles[i].newUrl = matchedFiles[i].newUrl.replaceAll('{auto}', (i + 1).toString())
  }
  const duplicateFilesNum = matchedFiles.filter(
-    (item: any) => matchedFiles.filter((item2: any) => item2.newUrl === item.newUrl).length > 1
+    (item: any) => matchedFiles.filter((item2: any) => item2.newUrl === item.newUrl).length > 1,
  ).length
  const renamefunc = async (item: any) => {
    await $$db.updateById(item.id, {
-      imgUrl: item.newUrl
+      imgUrl: item.newUrl,
    })
  }
  const rename = () => {
@@ -1498,7 +1498,7 @@ function handleBatchRename() {
      type: 'warning',
      confirmButtonText: t('common.confirm'),
      cancelButtonText: t('common.cancel'),
-      center: true
+      center: true,
    })
      .then(result => {
        if (!result) return
@@ -1548,8 +1548,8 @@ onActivated(async () => {
 export default {
  name: 'GalleryPage',
  components: {
-    VirtualScroller
-  }
+    VirtualScroller,
+  },
 }
 </script>

--- a/src/renderer/pages/MiniPage.vue
+++ b/src/renderer/pages/MiniPage.vue
@@ -5,7 +5,7 @@
      :class="{
        'is-dragover': dragover,
        uploading: isShowingProgress,
-        linux: osGlobal === 'linux'
+        linux: osGlobal === 'linux',
      }"
      :style="{ backgroundPosition: '0 ' + progress + '%' }"
      @drop.prevent="onDrop"
@@ -15,7 +15,7 @@
      <img
        v-if="!dragover && !isShowingProgress"
        :src="logoPath ? logoPath : './squareLogo.png'"
-        style="width: 100%; height: 100%; border-radius: 50%"
+        style="border-radius: 50%; width: 100%; height: 100%"
        draggable="false"
        @dragstart.prevent
      />
@@ -110,8 +110,8 @@ function handleURLDrag(items: DataTransferItemList, dataTransfer: DataTransfer)
  if (urlMatch) {
    window.electron.sendRPC(IRPCActionType.UPLOAD_CHOOSED_FILES, [
      {
-        path: urlMatch[1]
-      }
+        path: urlMatch[1],
+      },
    ])
  }
 }
@@ -132,7 +132,7 @@ function ipcSendFiles(files: FileList) {
  Array.from(files).forEach(item => {
    const obj = {
      name: item.name,
-      path: window.electron.showFilePath(item)
+      path: window.electron.showFilePath(item),
    }
    sendFiles.push(obj)
  })
@@ -157,7 +157,7 @@ function handleMouseMove(e: MouseEvent) {
      x: xLoc,
      y: yLoc,
      width: 64,
-      height: 64
+      height: 64,
    })
  }
 }
@@ -198,7 +198,7 @@ onBeforeUnmount(() => {

 <script lang="ts">
 export default {
-  name: 'MiniPage'
+  name: 'MiniPage',
 }
 </script>

--- a/src/renderer/pages/PicGoSetting.vue
+++ b/src/renderer/pages/PicGoSetting.vue
@@ -1303,7 +1303,7 @@ import {
  RefreshCw,
  RotateCcw,
  Server,
-  Settings
+  Settings,
 } from 'lucide-vue-next'
 import type { IConfig } from 'piclist'
 import pkg from 'root/package.json'
@@ -1339,20 +1339,20 @@ const tabs = computed(() => [
  { id: 'sync', label: t('pages.settings.sync.title'), icon: RotateCcw },
  { id: 'upload', label: t('pages.settings.upload.title'), icon: CloudUpload },
  { id: 'advanced', label: t('pages.settings.advanced.title'), icon: Server },
-  { id: 'update', label: t('pages.settings.update.title'), icon: RefreshCw }
+  { id: 'update', label: t('pages.settings.update.title'), icon: RefreshCw },
 ])

 const shortUrlServerList = [
  { label: 'c1n', value: 'c1n' },
  { label: 'yourls', value: 'yourls' },
  { label: 'xyTom/Url-Shorten-Worker', value: 'cf_worker' },
-  { label: 'ccbikai/Sink', value: 'sink' }
+  { label: 'ccbikai/Sink', value: 'sink' },
 ]

 const languageList = [
  { label: '简体中文', value: 'zh-CN' },
  { label: '繁體中文', value: 'zh-TW' },
-  { label: 'English', value: 'en' }
+  { label: 'English', value: 'en' },
 ]

 const formOfSetting = ref<ISettingForm>({
@@ -1396,7 +1396,7 @@ const formOfSetting = ref<ISettingForm>({
  proxy: '',
  mainWindowWidth: 1200,
  mainWindowHeight: 800,
-  enableSecondUploader: false
+  enableSecondUploader: false,
 })

 const proxy = ref('')
@@ -1432,7 +1432,7 @@ const autoWatchKeys = [
  'autoCopy',
  'encodeOutputURL',
  'useShortUrl',
-  'enableSecondUploader'
+  'enableSecondUploader',
 ]

 const addWatch = () => {
@@ -1441,7 +1441,7 @@ const addWatch = () => {
      () => formOfSetting.value[key as keyof ISettingForm],
      value => {
        saveConfig({ [`settings.${key}`]: value })
-      }
+      },
    )
  })

@@ -1482,20 +1482,20 @@ const advancedRenameList = {
    { label: t('pages.settings.upload.placeholder.minute'), value: '{i}' },
    { label: t('pages.settings.upload.placeholder.second'), value: '{s}' },
    { label: t('pages.settings.upload.placeholder.millisecond'), value: '{ms}' },
-    { label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' }
+    { label: t('pages.settings.upload.placeholder.timestamp'), value: '{timestamp}' },
  ],
  categoryHash: [
    { label: t('pages.settings.upload.placeholder.md5'), value: '{md5}' },
    { label: t('pages.settings.upload.placeholder.md5-16'), value: '{md5-16}' },
    { label: t('pages.settings.upload.placeholder.uuid'), value: '{uuid}' },
    { label: t('pages.settings.upload.placeholder.sha256'), value: '{sha256}' },
-    { label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' }
+    { label: t('pages.settings.upload.placeholder.sha256-n'), value: '{sha256-n}' },
  ],
  categoryFile: [
    { label: t('pages.settings.upload.placeholder.filename'), value: '{filename}' },
    { label: t('pages.settings.upload.placeholder.localFolder'), value: '{localFolder:n}' },
-    { label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' }
-  ]
+    { label: t('pages.settings.upload.placeholder.randomString'), value: '{str-n}' },
+  ],
 }

 function copyPlaceholder(placeholder: string) {
@@ -1529,7 +1529,7 @@ const logLevel = {
  error: t('pages.settings.advanced.logLevelList.error'),
  info: t('pages.settings.advanced.logLevelList.info'),
  warn: t('pages.settings.advanced.logLevelList.warn'),
-  none: t('pages.settings.advanced.logLevelList.none')
+  none: t('pages.settings.advanced.logLevelList.none'),
 }

 const server = ref({ port: 36677, host: '0.0.0.0', enable: true })
@@ -1549,7 +1549,7 @@ const sync = ref<any>({
  password: '',
  authType: 'basic',
  sslEnabled: true,
-  webdavSavePath: ''
+  webdavSavePath: '',
 })

 const syncType = ['github', 'gitee', 'gitea', 'webdav']
@@ -1571,7 +1571,7 @@ async function cancelSyncSetting() {
    webdavPassword: '',
    webdavAuthType: 'basic',
    webdavSslEnabled: true,
-    webdavSavePath: ''
+    webdavSavePath: '',
  }
 }

@@ -1652,7 +1652,7 @@ async function initData() {
    webdavPassword: '',
    webdavAuthType: 'basic',
    webdavSslEnabled: true,
-    webdavSavePath: ''
+    webdavSavePath: '',
  }
  formOfSetting.value.logFileSizeLimit = enforceNumber(settings.logFileSizeLimit) || 10
  addProxyWatch()
@@ -1702,7 +1702,7 @@ function confirmCustomLink() {
 async function handleCancelAdvancedRename() {
  advancedRenameVisible.value = false
  advancedRename.value = toRaw(
-    (await getConfig<any>(configPaths.buildIn.rename)) || { enable: false, format: '{filename}' }
+    (await getConfig<any>(configPaths.buildIn.rename)) || { enable: false, format: '{filename}' },
  )
 }

@@ -1722,7 +1722,7 @@ function handleMigrateFromPicGo() {
    type: 'warning',
    confirmButtonText: t('common.confirm'),
    cancelButtonText: t('common.cancel'),
-    center: true
+    center: true,
  }).then(result => {
    if (result) {
      window.electron
@@ -1871,7 +1871,7 @@ async function confirmWindowSize() {
  const height = enforceNumber(formOfSetting.value.mainWindowHeight)
  saveConfig({
    [configPaths.settings.mainWindowWidth]: rawPicGoSize.value ? 800 : width < 100 ? 100 : width,
-    [configPaths.settings.mainWindowHeight]: rawPicGoSize.value ? 450 : height < 100 ? 100 : height
+    [configPaths.settings.mainWindowHeight]: rawPicGoSize.value ? 450 : height < 100 ? 100 : height,
  })
  await getMainWindowSize()
 }
@@ -1906,7 +1906,7 @@ function confirmLogLevelSetting() {
  }
  saveConfig({
    [configPaths.settings.logLevel]: formOfSetting.value.logLevel,
-    [configPaths.settings.logFileSizeLimit]: formOfSetting.value.logFileSizeLimit
+    [configPaths.settings.logFileSizeLimit]: formOfSetting.value.logFileSizeLimit,
  })
  logFileVisible.value = false
 }
@@ -1940,7 +1940,7 @@ const syncTaskList = [
  { task: IRPCActionType.CONFIGURE_UPLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 },
  { task: IRPCActionType.CONFIGURE_DOWNLOAD_COMMON_CONFIG, label: t('pages.settings.sync.commonConfig'), number: 2 },
  { task: IRPCActionType.CONFIGURE_DOWNLOAD_MANAGE_CONFIG, label: t('pages.settings.sync.manageConfig'), number: 2 },
-  { task: IRPCActionType.CONFIGURE_DOWNLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 }
+  { task: IRPCActionType.CONFIGURE_DOWNLOAD_ALL_CONFIG, label: t('pages.settings.sync.allConfig'), number: 4 },
 ]

 async function syncTaskFn(task: string, number: number) {
--- a/src/renderer/pages/Plugin.vue
+++ b/src/renderer/pages/Plugin.vue
@@ -211,7 +211,7 @@ import {
  SearchIcon,
  SettingsIcon,
  XCircleIcon,
-  XIcon
+  XIcon,
 } from 'lucide-vue-next'
 import { computed, onBeforeMount, onBeforeUnmount, reactive, ref, toRaw, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -223,7 +223,7 @@ import {
  PICGO_CONFIG_PLUGIN,
  PICGO_HANDLE_PLUGIN_DONE,
  PICGO_HANDLE_PLUGIN_ING,
-  PICGO_TOGGLE_PLUGIN
+  PICGO_TOGGLE_PLUGIN,
 } from '@/utils/constant'
 import { getConfig, saveConfig } from '@/utils/dataSender'
 import { IRPCActionType } from '@/utils/enum'
@@ -240,7 +240,7 @@ const dialogVisible = ref(false)
 const pluginNameList = ref<string[]>([])
 const loading = ref(true)
 const needReload = ref(false)
-const latestVersionMap = reactive<{ [key: string]: string }>({})
+const latestVersionMap = reactive<Record<string, string>>({})
 const $configForm = ref<InstanceType<typeof ConfigForm> | null>(null)

 function setSrc(e: Event) {
@@ -351,7 +351,7 @@ const uninstallSuccessHandler = (plugin: string) => {
 const picgoConfigPluginHandler = (
  _currentType: 'plugin' | 'transformer' | 'uploader',
  _configName: string,
-  _config: any
+  _config: any,
 ) => {
  currentType.value = _currentType
  configName.value = _configName
@@ -402,12 +402,12 @@ function reloadApp() {

 async function handleReload() {
  saveConfig({
-    needReload: true
+    needReload: true,
  })
  needReload.value = true
  if ('Notification' in window) {
    const successNotification = new Notification(t('pages.plugin.updateSuccess'), {
-      body: t('pages.plugin.needRestart')
+      body: t('pages.plugin.needRestart'),
    })
    successNotification.onclick = () => {
      reloadApp()
@@ -425,23 +425,23 @@ async function handleConfirmConfig() {
    switch (currentType.value) {
      case 'plugin':
        saveConfig({
-          [`${configName.value}`]: result
+          [`${configName.value}`]: result,
        })
        break
      case 'uploader':
        saveConfig({
-          [`picBed.${configName.value}`]: result
+          [`picBed.${configName.value}`]: result,
        })
        break
      case 'transformer':
        saveConfig({
-          [`transformer.${configName.value}`]: result
+          [`transformer.${configName.value}`]: result,
        })
        break
    }
    if ('Notification' in window) {
      const successNotification = new Notification(t('pages.plugin.setResult'), {
-        body: t('pages.plugin.setSuccess')
+        body: t('pages.plugin.setSuccess'),
      })
      successNotification.onclick = () => {
        return true
@@ -491,7 +491,7 @@ function handleSearchResult(item: INPMSearchResultObject) {
    hasInstall: pluginNameList.value.some(plugin => plugin === pkg.name),
    version: pkg.version,
    gui,
-    ing: false // installing or uninstalling
+    ing: false, // installing or uninstalling
  }
 }

@@ -502,7 +502,7 @@ async function handleRestoreState(item: string, name: string) {
    if (current === name) {
      saveConfig({
        [configPaths.picBed.current]: 'smms',
-        [configPaths.picBed.uploader]: 'smms'
+        [configPaths.picBed.uploader]: 'smms',
      })
    }
  }
@@ -510,7 +510,7 @@ async function handleRestoreState(item: string, name: string) {
    const current = await getConfig(configPaths.picBed.transformer)
    if (current === name) {
      saveConfig({
-        [configPaths.picBed.transformer]: 'path'
+        [configPaths.picBed.transformer]: 'path',
      })
    }
  }
@@ -568,7 +568,7 @@ onBeforeUnmount(() => {

 <script lang="ts">
 export default {
-  name: 'PluginPage'
+  name: 'PluginPage',
 }
 </script>

--- a/src/renderer/pages/RenamePage.vue
+++ b/src/renderer/pages/RenamePage.vue
@@ -54,7 +54,7 @@ const validationError = ref<string>('')

 const form = reactive({
  fileName: '',
-  originName: ''
+  originName: '',
 })

 const handleFileName = (newName: string, _originName: string, _id: string) => {
@@ -114,29 +114,29 @@ onBeforeUnmount(() => {
 </script>
 <script lang="ts">
 export default {
-  name: 'RenamePage'
+  name: 'RenamePage',
 }
 </script>
 <style scoped>
 .rename-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
  padding: 2rem;
  min-height: 100vh;
  background: var(--color-background-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }

 .rename-card {
-  background: var(--color-background-primary);
-  border-radius: 12px;
-  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.1),
-    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  overflow: hidden;
  border: 1px solid var(--color-border);
+  border-radius: 12px;
  width: 100%;
  max-width: 500px;
-  overflow: hidden;
+  background: var(--color-background-primary);
+  box-shadow:
+    0 20px 25px -5px rgb(0 0 0 / 10%),
+    0 10px 10px -5px rgb(0 0 0 / 4%);
 }

 /* Form */
@@ -167,58 +167,58 @@ export default {
 }

 .form-input {
-  width: 100%;
-  padding: 0.875rem 1rem;
-  padding-right: 2.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
-  background: var(--color-background-primary);
-  color: var(--color-text-primary);
+  padding: 0.875rem 1rem;
+  padding-right: 2.5rem;
+  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 {
-  outline: none;
  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
 }

 .form-input.input-error {
  border-color: #f56c6c;
-  box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
+  box-shadow: 0 0 0 2px rgb(245 108 108 / 20%);
 }

 .input-clear {
  position: absolute;
-  right: 0.75rem;
  top: 50%;
-  transform: translateY(-50%);
+  right: 0.75rem;
  display: flex;
-  align-items: center;
  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 4px;
  width: 24px;
  height: 24px;
-  border-radius: 4px;
-  border: none;
-  background: var(--color-background-tertiary);
  color: var(--color-text-secondary);
-  cursor: pointer;
+  background: var(--color-background-tertiary);
  transition: all 0.2s ease;
+  transform: translateY(-50%);
+  cursor: pointer;
 }

 .input-clear:hover {
-  background: var(--color-background-secondary);
  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
 }

 .validation-error {
+  display: flex;
+  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #f56c6c;
-  display: flex;
-  align-items: center;
  gap: 0.25rem;
 }

@@ -234,17 +234,17 @@ export default {
 /* Buttons */
 .btn {
  display: inline-flex;
-  align-items: center;
  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  border-radius: 8px;
+  align-items: center;
  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 1.5rem;
+  min-width: fit-content;
  font-size: 0.875rem;
  font-weight: 500;
-  cursor: pointer;
  transition: all 0.2s ease;
-  min-width: fit-content;
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .btn:disabled {
@@ -254,12 +254,12 @@ export default {

 .btn:hover:not(:disabled) {
  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
 }

 .btn-primary {
-  background: #409eff;
  color: white;
+  background: #409eff;
 }

 .btn-primary:hover:not(:disabled) {
@@ -267,18 +267,18 @@ export default {
 }

 .btn-secondary {
-  background: var(--color-background-primary);
-  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
 }

 .btn-secondary:hover:not(:disabled) {
-  background: var(--color-background-secondary);
  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
 }

 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
  .rename-container {
    padding: 1rem;
  }
@@ -293,12 +293,12 @@ export default {
  }

  .btn {
-    width: 100%;
    justify-content: center;
+    width: 100%;
  }
 }

-@media (max-width: 480px) {
+@media (width <= 480px) {
  .rename-container {
    padding: 0.75rem;
  }
@@ -326,9 +326,11 @@ export default {
  100% {
    transform: translateX(0);
  }
+
  25% {
    transform: translateX(-4px);
  }
+
  75% {
    transform: translateX(4px);
  }
@@ -342,7 +344,7 @@ export default {
 :root.dark .rename-card,
 :root.auto.dark .rename-card {
  box-shadow:
-    0 20px 25px -5px rgba(0, 0, 0, 0.3),
-    0 10px 10px -5px rgba(0, 0, 0, 0.2);
+    0 20px 25px -5px rgb(0 0 0 / 30%),
+    0 10px 10px -5px rgb(0 0 0 / 20%);
 }
 </style>
--- a/src/renderer/pages/ShortKey.vue
+++ b/src/renderer/pages/ShortKey.vue
@@ -95,7 +95,7 @@
          </div>
          <div class="modal-footer">
            <button class="btn btn-secondary" @click="cancelKeyBinding">
-              {{ $t('CANCEL') }}
+              {{ $t('common.cancel') }}
            </button>
            <button class="btn btn-primary" @click="confirmKeyBinding">
              {{ $t('common.confirm') }}
@@ -131,7 +131,7 @@ onBeforeMount(async () => {
  list.value = Object.keys(shortKeyConfig).map(item => {
    return {
      ...shortKeyConfig[item],
-      from: calcOrigin(item)
+      from: calcOrigin(item),
    }
  })
 })
@@ -189,7 +189,7 @@ onBeforeUnmount(() => {

 <script lang="ts">
 export default {
-  name: 'ShortkeyPage'
+  name: 'ShortkeyPage',
 }
 </script>

--- a/src/renderer/pages/Toolbox.vue
+++ b/src/renderer/pages/Toolbox.vue
@@ -65,7 +65,7 @@
            'item-active': activeTypes.includes(key),
            'item-error': item.status === IToolboxItemCheckStatus.ERROR,
            'item-success': item.status === IToolboxItemCheckStatus.SUCCESS,
-            'item-loading': item.status === IToolboxItemCheckStatus.LOADING
+            'item-loading': item.status === IToolboxItemCheckStatus.LOADING,
          }"
        >
          <div class="item-header" @click="toggleItem(key)">
@@ -124,11 +124,11 @@ const fixList = reactive<IToolboxMap>({
    handlerText: t('pages.toolbox.openConfigFile'),
    handler(value: string) {
      window.electron.sendRPC(IRPCActionType.OPEN_FILE, value)
-    }
+    },
  },
  [IToolboxItemType.IS_GALLERY_FILE_BROKEN]: {
    title: t('pages.toolbox.checkGalleryFileBroken'),
-    status: IToolboxItemCheckStatus.INIT
+    status: IToolboxItemCheckStatus.INIT,
  },
  [IToolboxItemType.HAS_PROBLEM_WITH_CLIPBOARD_PIC_UPLOAD]: {
    title: t('pages.toolbox.checkProblemWithClipboardPicUpload'), // picgo-image-clipboard folder
@@ -136,13 +136,13 @@ const fixList = reactive<IToolboxMap>({
    handlerText: t('pages.toolbox.openFilePath'),
    handler(value: string) {
      window.electron.sendRPC(IRPCActionType.OPEN_FILE, value)
-    }
+    },
  },
  [IToolboxItemType.HAS_PROBLEM_WITH_PROXY]: {
    title: t('pages.toolbox.checkProblemWithProxy'),
    status: IToolboxItemCheckStatus.INIT,
-    hasNoFixMethod: true
-  }
+    hasNoFixMethod: true,
+  },
 })

 const progress = computed(() => {
@@ -214,7 +214,7 @@ const handleFix = async () => {
      })
      .map(async key => {
        return window.electron.triggerRPC<IToolboxCheckRes>(IRPCActionType.TOOLBOX_CHECK_FIX, key)
-      })
+      }),
  )

  fixRes
@@ -233,7 +233,7 @@ const handleFix = async () => {
    type: 'warning',
    confirmButtonText: t('common.confirm'),
    cancelButtonText: t('common.cancel'),
-    center: true
+    center: true,
  }).then(result => {
    if (!result) return
    window.electron.sendRPC(IRPCActionType.RELOAD_APP)
@@ -246,7 +246,7 @@ onUnmounted(() => {
 </script>
 <script lang="ts">
 export default {
-  name: 'ToolBoxPage'
+  name: 'ToolBoxPage',
 }
 </script>

--- a/src/renderer/pages/TrayPage.vue
+++ b/src/renderer/pages/TrayPage.vue
@@ -95,7 +95,7 @@ type IResult<T> = T & {
 const files = ref<IResult<ImgInfo>[]>([])
 const notification = reactive({
  title: t('pages.tray.copySuccess'),
-  body: ''
+  body: '',
 })

 const clipboardFiles = ref<ImgInfo[]>([])
@@ -116,7 +116,7 @@ const formatCustomLink = (customLink: string, item: ImgInfo) => {
  const formatObj = {
    url,
    fileName,
-    extName
+    extName,
  }
  const keys = Object.keys(formatObj) as ['url', 'fileName', 'extName']
  keys.forEach(item => {
@@ -160,8 +160,8 @@ async function pasteTemplate(style: string, item: ImgInfo, customLink: string |
    UBB: `[IMG]${url}[/IMG]`,
    Custom: formatCustomLink(_customLink, {
      ...item,
-      url
-    })
+      url,
+    }),
  }
  return tpl[style]
 }
@@ -173,7 +173,7 @@ function disableDragFile() {
      e = e || event
      e.preventDefault()
    },
-    false
+    false,
  )
  window.addEventListener(
    'drop',
@@ -181,7 +181,7 @@ function disableDragFile() {
      e = e || event
      e.preventDefault()
    },
-    false
+    false,
  )
 }

@@ -204,7 +204,7 @@ const dragFilesHandler = async (_files: string[]) => {
  }
  files.value = (await $$db.get<ImgInfo>({
    orderBy: 'desc',
-    limit: 5
+    limit: 5,
  }))!.data
 }

@@ -215,7 +215,7 @@ const clipboardFilesHandler = (files: ImgInfo[]) => {
 const uploadFilesHandler = async () => {
  files.value = (await $$db.get<ImgInfo>({
    orderBy: 'desc',
-    limit: 5
+    limit: 5,
  }))!.data
  uploadFlag.value = false
 }
@@ -243,7 +243,7 @@ onBeforeUnmount(() => {

 <script lang="ts">
 export default {
-  name: 'TrayPage'
+  name: 'TrayPage',
 }
 </script>

--- a/src/renderer/pages/Upload.vue
+++ b/src/renderer/pages/Upload.vue
@@ -160,7 +160,7 @@ import {
  LinkIcon,
  Settings,
  UploadCloudIcon,
-  XIcon
+  XIcon,
 } from 'lucide-vue-next'
 import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -200,7 +200,7 @@ const pasteFormatList = ref<Record<string, string>>({
  [IPasteStyle.HTML]: '<img src="url"/>',
  [IPasteStyle.URL]: 'http://test.com/test.png',
  [IPasteStyle.UBB]: '[img]url[/img]',
-  [IPasteStyle.CUSTOM]: ''
+  [IPasteStyle.CUSTOM]: '',
 })

 watch(picBedGlobal, () => {
@@ -248,7 +248,7 @@ async function handlePicBedNameClick(_picBedName: string, picBedConfigName: stri
  const currentPicBedConfig = ((await getConfig<any[]>(`uploader.${currentPicBed}`)) as any) || {}
  const configList = await window.electron.triggerRPC<IUploaderConfigItem>(
    IRPCActionType.PICBED_GET_CONFIG_LIST,
-    currentPicBed
+    currentPicBed,
  )
  const currentConfigList = configList?.configList ?? []
  const config = currentConfigList.find((item: any) => item._configName === formatedpicBedConfigName)
@@ -256,11 +256,11 @@ async function handlePicBedNameClick(_picBedName: string, picBedConfigName: stri
    name: PICBEDS_PAGE,
    params: {
      type: currentPicBed,
-      configId: config?._id || ''
+      configId: config?._id || '',
    },
    query: {
-      defaultConfigId: currentPicBedConfig.defaultId || ''
-    }
+      defaultConfigId: currentPicBedConfig.defaultId || '',
+    },
  })
 }

@@ -293,8 +293,8 @@ function handleURLDrag(items: DataTransferItemList, dataTransfer: DataTransfer)
  if (urlMatch) {
    window.electron.sendRPC(IRPCActionType.UPLOAD_CHOOSED_FILES, [
      {
-        path: urlMatch[1]
-      }
+        path: urlMatch[1],
+      },
    ])
  } else {
    message.error(t('pages.upload.dragValidPictureOrUrl'))
@@ -315,7 +315,7 @@ function ipcSendFiles(files: FileList) {
  Array.from(files).forEach(item => {
    const obj = {
      name: item.name,
-      path: window.electron.showFilePath(item)
+      path: window.electron.showFilePath(item),
    }
    sendFiles.push(obj)
  })
@@ -334,14 +334,14 @@ async function getUseShortUrl() {
 function updatePasteStyle(style: string) {
  pasteStyle.value = style
  saveConfig({
-    [configPaths.settings.pasteStyle]: style || IPasteStyle.MARKDOWN
+    [configPaths.settings.pasteStyle]: style || IPasteStyle.MARKDOWN,
  })
 }

 function updateUrlType(shortUrl: boolean) {
  useShortUrl.value = shortUrl
  saveConfig({
-    [configPaths.settings.useShortUrl]: shortUrl
+    [configPaths.settings.useShortUrl]: shortUrl,
  })
 }

@@ -355,7 +355,7 @@ async function uploadURLFiles() {
    value: isUrl(str) ? str : '',
    title: t('pages.upload.inputUrlTip'),
    placeholder: t('pages.upload.httpPrefixTip') + '\n' + t('pages.upload.multipleUrlsHint'),
-    multiLine: true
+    multiLine: true,
  })
 }

@@ -386,7 +386,7 @@ function handleInputBoxValue(val: string) {
        ? t('pages.upload.inputValidUrl') + ': ' + invalidUrls[0]
        : t('pages.upload.invalidUrlsFound', {
            count: invalidUrls.length,
-            urls: invalidUrls.slice(0, 3).join(', ') + (invalidUrls.length > 3 ? '...' : '')
+            urls: invalidUrls.slice(0, 3).join(', ') + (invalidUrls.length > 3 ? '...' : ''),
          })
    message.error(errorMessage)
  }
@@ -434,7 +434,7 @@ onBeforeMount(() => {

 <script lang="ts">
 export default {
-  name: 'UploadPage'
+  name: 'UploadPage',
 }
 </script>

--- a/src/renderer/pages/UploaderConfigPage.vue
+++ b/src/renderer/pages/UploaderConfigPage.vue
@@ -103,7 +103,7 @@ async function selectItem(id: string) {
  if (store?.state.defaultPicBed === type.value) {
    window.electron.sendRPC(
      IRPCActionType.TRAY_SET_TOOL_TIP,
-      `${type.value} ${curConfigList.value.find(item => item._id === id)?._configName || ''}`
+      `${type.value} ${curConfigList.value.find(item => item._id === id)?._configName || ''}`,
    )
  }
  defaultConfigId.value = id
@@ -125,7 +125,7 @@ onBeforeMount(() => {
 async function getCurrentConfigList() {
  const configList = await window.electron.triggerRPC<IUploaderConfigItem>(
    IRPCActionType.PICBED_GET_CONFIG_LIST,
-    type.value
+    type.value,
  )
  curConfigList.value = configList?.configList ?? []
  defaultConfigId.value = configList?.defaultId ?? ''
@@ -136,11 +136,11 @@ function openEditPage(configId: string) {
    name: PICBEDS_PAGE,
    params: {
      type: type.value,
-      configId
+      configId,
    },
    query: {
-      defaultConfigId: defaultConfigId.value
-    }
+      defaultConfigId: defaultConfigId.value,
+    },
  })
 }

@@ -155,7 +155,7 @@ async function deleteConfig(id: string) {
    type: 'warning',
    confirmButtonText: t('common.confirm'),
    cancelButtonText: t('common.cancel'),
-    center: true
+    center: true,
  })
  if (!result) return
  const res = await window.electron.triggerRPC<IUploaderConfigItem>(IRPCActionType.PICBED_DELETE_CONFIG, type.value, id)
@@ -170,15 +170,15 @@ function addNewConfig() {
    name: PICBEDS_PAGE,
    params: {
      type: type.value,
-      configId: ''
-    }
+      configId: '',
+    },
  })
 }

 function setDefaultPicBed(type: string) {
  saveConfig({
    [configPaths.picBed.current]: type,
-    [configPaths.picBed.uploader]: type
+    [configPaths.picBed.uploader]: type,
  })

  store?.setDefaultPicBed(type)
@@ -189,7 +189,7 @@ function setDefaultPicBed(type: string) {
 </script>
 <script lang="ts">
 export default {
-  name: 'UploaderConfigPage'
+  name: 'UploaderConfigPage',
 }
 </script>

--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -1,9 +1,9 @@
 .piclist-settings {
+  overflow-y: auto;
  padding: 1.5rem;
  min-height: 100vh;
-  background: var(--color-background-secondary);
  color: var(--color-text-primary);
-  overflow-y: auto;
+  background: var(--color-background-secondary);
  scrollbar-width: none;
  -ms-overflow-style: none;
 }
@@ -17,12 +17,12 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
-  background: var(--color-surface);
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
 }

 .header-content {
@@ -44,8 +44,8 @@

 .settings-header p {
  margin: 0;
-  color: var(--color-text-secondary);
  font-size: 0.875rem;
+  color: var(--color-text-secondary);
 }

 .header-actions {
@@ -56,29 +56,29 @@
 /* Tab Navigation */
 .tab-navigation {
  display: flex;
-  background: var(--color-background-primary);
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0.25rem;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  border: 1px solid var(--color-border);
+  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;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  background: transparent;
  border: none;
  border-radius: 8px;
-  color: var(--color-text-secondary);
+  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
-  cursor: pointer;
+  color: var(--color-text-secondary);
+  background: transparent;
  transition: all 0.2s ease;
+  gap: 0.5rem;
+  cursor: pointer;
  flex: 1;
-  justify-content: center;
 }

 .tab-button:hover {
@@ -87,9 +87,9 @@
 }

 .tab-button.active {
-  background: #409eff;
  color: white;
-  box-shadow: 0 2px 4px rgba(64, 158, 255, 0.3);
+  background: #409eff;
+  box-shadow: 0 2px 4px rgb(64 158 255 / 30%);
 }

 /* Settings Content */
@@ -105,24 +105,24 @@
 }

 .settings-section {
-  background: var(--color-background-primary);
+  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);
-  border: 1px solid var(--color-border);
 }

 .settings-section h2 {
-  margin: 0 0 0.5rem 0;
+  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 0;
-  color: var(--color-text-secondary);
+  margin: 0 0 1.5rem;
  font-size: 0.875rem;
+  color: var(--color-text-secondary);
 }

 /* Form Elements */
@@ -134,7 +134,7 @@
  margin-bottom: 0;
 }

-.form-group > label:not(.switch-label):not(.radio-option) {
+.form-group > label:not(.switch-label, .radio-option) {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
@@ -145,13 +145,13 @@
 .form-input,
 .form-textarea,
 .form-select {
-  width: 100%;
-  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
-  background: var(--color-background-primary);
-  color: var(--color-text-primary);
+  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;
 }
@@ -159,50 +159,48 @@
 .form-input:focus,
 .form-textarea:focus,
 .form-select:focus {
-  outline: none;
  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgba(64, 158, 255, 0.2));
+  outline: none;
+  box-shadow: 0 0 0 2px var(--el-color-primary-light-9, rgb(64 158 255 / 20%));
 }

 .form-textarea {
-  resize: vertical;
  min-height: 80px;
+  resize: vertical;
 }

 .form-range {
+  margin-bottom: 0.5rem;
+  border-radius: 3px;
  width: 100%;
  height: 6px;
-  border-radius: 3px;
  background: #e4e7ed;
  outline: none;
-  margin-bottom: 0.5rem;
-  -webkit-appearance: none;
  appearance: none;
 }

 .form-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
+  border-radius: 50%;
  width: 20px;
  height: 20px;
-  border-radius: 50%;
  background: #409eff;
+  appearance: none;
  cursor: pointer;
 }

 .form-range::-moz-range-thumb {
+  border: none;
+  border-radius: 50%;
  width: 20px;
  height: 20px;
-  border-radius: 50%;
  background: #409eff;
  cursor: pointer;
-  border: none;
 }

 .range-value {
  font-size: 0.875rem;
-  color: var(--color-text-secondary);
  text-align: center;
+  color: var(--color-text-secondary);
 }

 /* Grid Layout */
@@ -216,18 +214,18 @@
 .switch-label {
  display: flex;
  align-items: center;
-  gap: 0.75rem;
-  cursor: pointer;
-  padding: 1rem;
  border: 1px solid var(--color-border-secondary);
  border-radius: 8px;
+  padding: 1rem;
  background: var(--color-background-tertiary);
  transition: all 0.2s ease;
+  gap: 0.75rem;
+  cursor: pointer;
 }

 .switch-label:hover {
-  background: var(--color-background-secondary);
  border-color: var(--color-border);
+  background: var(--color-background-secondary);
 }

 .switch-input {
@@ -238,24 +236,24 @@

 .switch-slider {
  position: relative;
+  border-radius: 12px;
  width: 44px;
  height: 24px;
  background: var(--color-border);
-  border-radius: 12px;
  transition: background-color 0.3s;
  flex-shrink: 0;
 }

 .switch-slider::before {
-  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
+  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: white;
-  border-radius: 50%;
  transition: transform 0.3s;
+  content: '';
 }

 .switch-input:checked + .switch-slider {
@@ -271,9 +269,9 @@
 }

 .switch-title {
+  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--color-text-primary);
-  margin-bottom: 0.25rem;
 }

 .switch-description {
@@ -291,18 +289,18 @@
 .radio-option {
  display: flex;
  align-items: center;
-  gap: 0.75rem;
-  cursor: pointer;
-  padding: 0.75rem;
  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 {
-  background: var(--color-background-secondary);
  border-color: var(--color-border);
+  background: var(--color-background-secondary);
 }

 .radio-input {
@@ -313,10 +311,10 @@

 .radio-indicator {
  position: relative;
-  width: 20px;
-  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
+  width: 20px;
+  height: 20px;
  flex-shrink: 0;
 }

@@ -325,14 +323,14 @@
 }

 .radio-input:checked + .radio-indicator::after {
-  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
+  border-radius: 50%;
  width: 10px;
  height: 10px;
  background: #409eff;
-  border-radius: 50%;
+  content: '';
  transform: translate(-50%, -50%);
 }

@@ -344,17 +342,17 @@
 /* Buttons */
 .btn {
  display: flex;
-  align-items: center;
  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  border-radius: 8px;
+  align-items: center;
  border: none;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  min-width: fit-content;
  font-size: 0.875rem;
  font-weight: 500;
-  cursor: pointer;
  transition: all 0.2s ease;
-  min-width: fit-content;
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .btn:disabled {
@@ -364,12 +362,12 @@

 .btn:hover:not(:disabled) {
  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
 }

 .btn-primary {
-  background: #409eff;
  color: white;
+  background: #409eff;
 }

 .btn-primary:hover:not(:disabled) {
@@ -377,9 +375,9 @@
 }

 .btn-secondary {
-  background: var(--color-background-tertiary);
-  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
 }

 .btn-secondary:hover:not(:disabled) {
@@ -387,8 +385,8 @@
 }

 .btn-danger {
-  background: #f56c6c;
  color: white;
+  background: #f56c6c;
 }

 .btn-danger:hover:not(:disabled) {
@@ -405,18 +403,18 @@
 .checkbox-option {
  display: flex;
  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  padding: 0.5rem 0.75rem;
  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 {
-  background: var(--color-background-secondary);
  border-color: var(--color-border);
+  background: var(--color-background-secondary);
 }

 .checkbox-input {
@@ -427,25 +425,25 @@

 .checkbox-indicator {
  position: relative;
-  width: 16px;
-  height: 16px;
  border: 2px solid var(--color-border);
  border-radius: 4px;
+  width: 16px;
+  height: 16px;
  flex-shrink: 0;
 }

 .checkbox-input:checked + .checkbox-indicator {
-  background: #409eff;
  border-color: #409eff;
+  background: #409eff;
 }

 .checkbox-input:checked + .checkbox-indicator::after {
-  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
-  color: white;
  font-size: 10px;
+  color: white;
+  content: '✓';
  transform: translate(-50%, -50%);
 }

@@ -466,47 +464,44 @@

 .input-addon-btn {
  display: flex;
-  align-items: center;
  justify-content: center;
-  width: 40px;
+  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 8px;
-  background: var(--color-background-tertiary);
+  width: 40px;
  color: var(--color-text-secondary);
-  cursor: pointer;
+  background: var(--color-background-tertiary);
  transition: all 0.2s ease;
+  cursor: pointer;
 }

 .input-addon-btn:hover {
-  background: var(--color-background-secondary);
  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
 }

 /* Dialog Overlay */
 .dialog-overlay {
  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  inset: 0;
  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 80%);
 }

 .dialog {
-  background: var(--color-surface);
-  border-radius: var(--radius-2xl);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-xl);
-  padding: 1.5rem;
-  max-width: 90vw;
-  width: 80vw;
-  max-height: 80vh;
  overflow-y: auto;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-2xl);
+  padding: 1.5rem;
+  width: 80vw;
+  max-width: 90vw;
+  max-height: 80vh;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xl);
+  box-shadow: 0 10px 25px rgb(0 0 0 / 15%);
 }

 .dialog-header {
@@ -523,29 +518,29 @@
 }

 .dialog-close {
-  background: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
  border: none;
-  font-size: 1.5rem;
-  cursor: pointer;
-  color: var(--color-text-secondary);
+  border-radius: 6px;
  width: 32px;
  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 6px;
+  font-size: 1.5rem;
+  color: var(--color-text-secondary);
+  background: none;
  transition: all 0.2s ease;
+  cursor: pointer;
 }

 .dialog-close:hover {
-  background: var(--color-background-secondary);
  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
 }

 .dialog-content {
+  overflow-y: auto;
  margin-bottom: 1.5rem;
  padding: 0.2rem;
-  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
 }
@@ -571,13 +566,13 @@

 /* Notice Text */
 .notice-text {
-  background: rgba(0, 128, 255, 0.1);
-  color: #1c2630ff;
-  padding: 1rem;
-  border-radius: 8px;
  margin-bottom: 1rem;
-  text-align: center;
+  border-radius: 8px;
+  padding: 1rem;
  font-size: 0.925rem;
+  text-align: center;
+  color: #1c2630ff;
+  background: rgb(0 128 255 / 10%);
 }

 /* Small text */
@@ -587,7 +582,7 @@ small {
 }

 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
  .piclist-settings {
    padding: 1rem;
  }
@@ -605,8 +600,8 @@ small {
  }
  
  .dialog {
-    width: 95%;
    margin: 1rem;
+    width: 95%;
  }
 }

@@ -622,8 +617,8 @@ small {
 :root.auto.dark .settings-header,
 :root.auto.dark .tab-navigation,
 :root.auto.dark .settings-section {
-  background: var(--color-background-secondary);
  border-color: var(--color-border);
+  background: var(--color-background-secondary);
 }

 :root.dark .form-input,
@@ -632,9 +627,9 @@ small {
 :root.auto.dark .form-input,
 :root.auto.dark .form-textarea,
 :root.auto.dark .form-select {
-  background: var(--color-background-tertiary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
 }

 :root.dark .switch-slider::before,
@@ -644,9 +639,9 @@ small {

 :root.dark .btn-secondary,
 :root.auto.dark .btn-secondary {
-  background: var(--color-background-tertiary);
  border-color: var(--color-border);
  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
 }

 :root.dark .btn-secondary:hover,
@@ -656,8 +651,8 @@ small {

 :root.dark .switch-label,
 :root.auto.dark .switch-label {
-  background: var(--color-background-tertiary);
  border-color: var(--color-border);
+  background: var(--color-background-tertiary);
 }

 :root.dark .switch-label:hover,
@@ -669,8 +664,8 @@ small {
 :root.dark .checkbox-option,
 :root.auto.dark .radio-option,
 :root.auto.dark .checkbox-option {
-  background: var(--color-background-tertiary);
  border-color: var(--color-border);
+  background: var(--color-background-tertiary);
 }

 :root.dark .radio-option:hover,
@@ -687,14 +682,14 @@ small {

 /* Placeholder Help Styles */
 .placeholder-help {
-  background: var(--color-background-tertiary);
+  overflow-y: auto;
+  margin-top: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 0;
-  margin-top: 0.75rem;
  max-height: 400px;
-  overflow-y: auto;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  background: var(--color-background-tertiary);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
 }

 .placeholder-category {
@@ -706,13 +701,13 @@ small {
 }

 .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);
-  padding: 0.875rem 1rem 0.5rem;
  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
-  border-bottom: 1px solid var(--color-border-light);
-  margin: 0;
  letter-spacing: 0.02em;
 }

@@ -726,37 +721,37 @@ small {
 .placeholder-item {
  display: flex;
  align-items: center;
+  margin: 0;
+  border-radius: 0;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
-  border-radius: 0;
-  margin: 0;
 }

 .placeholder-item:hover {
-  background: rgba(var(--color-accent-rgb), 0.08);
+  background: rgb(var(--color-accent-rgb), 0.08);
 }

 .placeholder-item code {
-  background: var(--color-blue-common);
-  color: white;
-  padding: 0.3rem 0.6rem;
-  border-radius: 8px;
-  font-size: 1rem;
-  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  margin-right: 0.875rem;
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 8px;
+  padding: 0.3rem 0.6rem;
  min-width: 80px;
-  text-align: center;
+  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;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  border: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
 }

 .placeholder-item span {
-  color: var(--color-text-primary);
  font-weight: 500;
+  color: var(--color-text-primary);
  flex: 1;
 }

@@ -766,13 +761,13 @@ small {
 }

 .placeholder-help::-webkit-scrollbar-track {
-  background: transparent;
  border-radius: 10px;
+  background: transparent;
 }

 .placeholder-help::-webkit-scrollbar-thumb {
-  background: var(--color-border);
  border-radius: 10px;
+  background: var(--color-border);
  transition: background 0.2s ease;
 }

@@ -783,15 +778,15 @@ small {
 /* Dark theme adjustments */
 :root.dark .placeholder-help,
 :root.auto.dark .placeholder-help {
-  background: var(--color-background-secondary);
  border-color: var(--color-border);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  background: var(--color-background-secondary);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
 }

 :root.dark .category-title,
 :root.auto.dark .category-title {
-  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%);
  border-bottom-color: var(--color-border);
+  background: linear-gradient(135deg, var(--color-background-tertiary) 0%, var(--color-background-secondary) 100%);
 }

 :root.dark .placeholder-category,
@@ -801,22 +796,22 @@ small {

 :root.dark .placeholder-item:hover,
 :root.auto.dark .placeholder-item:hover {
-  background: rgba(var(--color-accent-rgb), 0.12);
+  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);
-  border-color: rgba(255, 255, 255, 0.15);
 }

 /* 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);
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
 }

 .update-info > div {
@@ -829,26 +824,26 @@ small {
 }

 .update-notice {
-  color: var(--color-success) !important;
  font-weight: 500;
+  color: var(--color-success) !important;
 }

 /* Release Notes Card */
 .release-notes-card {
-  background: var(--color-surface);
+  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  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);
-  border-bottom: 1px solid var(--color-border);
 }

 .release-notes-header h3 {
@@ -865,16 +860,16 @@ small {

 .btn-sm {
  padding: 0.375rem 0.75rem;
-  font-size: 0.875rem;
  min-height: auto;
+  font-size: 0.875rem;
 }

 .btn-link {
-  background: transparent;
  border: none;
-  color: var(--color-accent);
-  text-decoration: underline;
  padding: 0.25rem;
+  text-decoration: underline;
+  color: var(--color-accent);
+  background: transparent;
 }

 .btn-link:hover {
@@ -883,9 +878,9 @@ small {
 }

 .release-notes-content {
-  background: var(--color-background);
-  max-height: 400px;
  overflow-y: auto;
+  max-height: 400px;
+  background: var(--color-background);
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
 }
@@ -899,8 +894,8 @@ small {
 }

 .release-notes-content::-webkit-scrollbar-thumb {
-  background: var(--color-accent);
  border-radius: 3px;
+  background: var(--color-accent);
 }

 .release-notes-content::-webkit-scrollbar-thumb:hover {
@@ -910,13 +905,13 @@ small {
 .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);
-  font-size: 0.925rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
  gap: 0.5rem;
 }

@@ -932,27 +927,27 @@ small {

 .release-notes-pre {
  margin: 0;
+  border: none;
  padding: 1.5rem;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
  font-size: 0.875rem;
-  line-height: 1.6;
+  font-family: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, monospace;
  white-space: pre-wrap;
-  word-wrap: break-word;
  color: var(--color-text-primary);
  background: transparent;
-  border: none;
+  line-height: 1.6;
+  overflow-wrap: break-word;
 }

 .release-notes-footer {
-  padding: 0.75rem 1.5rem;
-  background: var(--color-background-secondary);
  border-top: 1px solid var(--color-border);
+  padding: 0.75rem 1.5rem;
  text-align: center;
+  background: var(--color-background-secondary);
 }

 .release-notes-footer small {
-  color: var(--color-text-secondary);
  font-size: 0.75rem;
+  color: var(--color-text-secondary);
 }

 /* Rotation animation for loading icons */
@@ -960,6 +955,7 @@ small {
  from {
    transform: rotate(0deg);
  }
+
  to {
    transform: rotate(360deg);
  }
--- a/src/renderer/pages/css/PluginPage.css
+++ b/src/renderer/pages/css/PluginPage.css
@@ -5,39 +5,39 @@ html, body {

 /* Container */
 .plugin-container {
+  display: flex;
+  overflow-y: auto;
+  margin: 0;
  padding: 1rem;
  width: 100%;
-  margin: 0;
-  display: flex;
+  min-height: 100vh;
  flex-direction: column;
  gap: 1.25rem;
-  min-height: 100vh;
  box-sizing: border-box;
-  overflow-y: auto;
 }

 /* Card Base */
 .plugin-card {
-  background: var(--color-surface);
+  overflow: hidden;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-xl);
-  overflow: hidden;
-  transition: var(--transition-medium);
+  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
+  transition: var(--transition-medium);
 }

 .plugin-card:hover {
-  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
 }

 /* Header Card */
 .header-card .card-header {
  display: flex;
-  align-items: center;
  justify-content: space-between;
-  padding: 1rem 1.5rem;
+  align-items: center;
  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 1rem 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
 }
@@ -50,23 +50,23 @@ html, body {
 }

 .header-icon {
-  color: var(--color-accent);
  display: flex;
  align-items: center;
+  color: var(--color-accent);
 }

 .header-content h1 {
+  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin: 0;
  letter-spacing: -0.025em;
 }

 .header-content p {
+  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
-  margin: 0;
 }

 .header-actions {
@@ -79,17 +79,17 @@ html, body {
 .action-button {
  display: flex;
  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  background: var(--color-accent);
-  color: white;
  border: none;
  border-radius: var(--radius-md);
+  padding: 0.625rem 1rem;
  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
  font-family: inherit;
+  font-weight: 500;
+  color: white;
+  background: var(--color-accent);
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .action-button:hover {
@@ -99,15 +99,15 @@ html, body {
 }

 .action-button.secondary {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
 }

 .action-button.secondary:hover {
-  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
+  background: var(--color-surface);
 }

 .action-button.small {
@@ -133,26 +133,26 @@ html, body {
 .search-icon {
  position: absolute;
  left: 1rem;
-  color: var(--color-text-secondary);
  z-index: 1;
+  color: var(--color-text-secondary);
 }

 .search-input {
-  width: 100%;
-  padding: 0.75rem 1rem 0.75rem 3rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
+  padding: 0.75rem 1rem 0.75rem 3rem;
+  width: 100%;
  font-size: 0.875rem;
-  transition: var(--transition-fast);
  font-family: inherit;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
 }

 .search-input:focus {
-  outline: none;
  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
 }

 .search-input::placeholder {
@@ -162,27 +162,27 @@ html, body {
 .clear-button {
  position: absolute;
  right: 0.5rem;
-  padding: 0.5rem;
-  background: transparent;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  border-radius: var(--radius-md);
-  transition: var(--transition-fast);
  display: flex;
  align-items: center;
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 0.5rem;
+  color: var(--color-text-secondary);
+  background: transparent;
+  transition: var(--transition-fast);
+  cursor: pointer;
 }

 .clear-button:hover {
-  background: var(--color-surface);
  color: var(--color-text-primary);
+  background: var(--color-surface);
 }

 /* Notice Card */
 .notice-card {
-  border-radius: var(--radius-lg);
  border-color: var(--color-warning);
-  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, var(--color-surface) 100%);
+  border-radius: var(--radius-lg);
+  background: linear-gradient(135deg, rgb(255 193 7 / 10%) 0%, var(--color-surface) 100%);
 }

 .notice-content {
@@ -207,33 +207,30 @@ html, body {
 /* Loading */
 .loading-overlay {
  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
+  inset: 0;
  z-index: 100;
+  display: flex;
+  justify-content: center;
+  align-items: center;
  border-radius: var(--radius-xl);
+  background: rgb(0 0 0 / 50%);
+  flex-direction: column;
+  gap: 1rem;
 }

 .loading-spinner {
-  width: 40px;
-  height: 40px;
  border: 3px solid var(--color-border);
  border-top: 3px solid var(--color-accent);
  border-radius: 50%;
+  width: 40px;
+  height: 40px;
  animation: spin 1s linear infinite;
 }

 .loading-text {
-  color: white;
  font-size: 0.875rem;
  font-weight: 500;
+  color: white;
 }

@keyframes spin {
@@ -252,13 +249,13 @@ html, body {
 /* Plugin Item Card */
 .plugin-item-card {
  position: relative;
+  display: flex;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
-  transition: var(--transition-medium);
-  display: flex;
-  flex-direction: column;
-  min-height: 200px;
  height: auto;
+  min-height: 200px;
+  transition: var(--transition-medium);
+  flex-direction: column;
 }

 .plugin-item-card:hover {
@@ -276,22 +273,22 @@ html, body {
  position: absolute;
  top: 1rem;
  right: 1rem;
+  z-index: 1;
+  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
-  border-radius: var(--radius-sm);
-  z-index: 1;
 }

 .cli-badge {
-  background: var(--color-info);
  color: var(--color-blue-common);
+  background: var(--color-info);
 }

 .update-badge {
-  background: var(--color-success);
-  color: white;
  right: 3.5rem;
+  color: white;
+  background: var(--color-success);
 }

 /* Plugin Header */
@@ -303,12 +300,12 @@ html, body {
 }

 .plugin-logo {
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-md);
  width: 48px;
  height: 48px;
-  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
-  border: 1px solid var(--color-border-secondary);
 }

 .plugin-info {
@@ -317,18 +314,18 @@ html, body {
 }

 .plugin-name {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0 0 0.25rem 0;
-  cursor: pointer;
-  transition: var(--transition-fast);
  display: flex;
  align-items: center;
-  gap: 0.5rem;
-  text-overflow: ellipsis;
  overflow: hidden;
+  margin: 0 0 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+  text-overflow: ellipsis;
  white-space: nowrap;
+  color: var(--color-text-primary);
+  transition: var(--transition-fast);
+  cursor: pointer;
+  gap: 0.5rem;
 }

 .plugin-name:hover {
@@ -336,42 +333,42 @@ html, body {
 }

 .plugin-version {
+  border-radius: var(--radius-sm);
+  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  background: var(--color-surface-elevated);
-  padding: 0.125rem 0.375rem;
-  border-radius: var(--radius-sm);
 }

 .plugin-author {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  margin: 0;
-  text-overflow: ellipsis;
  overflow: hidden;
+  margin: 0;
+  font-size: 0.875rem;
+  text-overflow: ellipsis;
  white-space: nowrap;
+  color: var(--color-text-secondary);
 }

 /* Plugin Description */
 .plugin-description {
-  margin-bottom: 1.5rem;
-  flex: 1;
  display: flex;
  align-items: flex-start;
+  margin-bottom: 1.5rem;
+  flex: 1;
 }

 .plugin-description p {
+  display: -webkit-box;
+  overflow: hidden;
+  margin: 0;
+  min-height: 2.6rem;
  font-size: 0.875rem;
+  text-overflow: ellipsis;
  color: var(--color-text-secondary);
  line-height: 1.5;
-  margin: 0;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
-  min-height: 2.6rem;
 }

 /* Plugin Actions */
@@ -383,16 +380,16 @@ html, body {
 .plugin-button {
  display: flex;
  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.75rem 1rem;
  border: none;
  border-radius: var(--radius-md);
+  padding: 0.75rem 1rem;
+  width: 100%;
  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
  font-family: inherit;
+  font-weight: 500;
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .plugin-button:disabled {
@@ -401,8 +398,8 @@ html, body {
 }

 .install-button {
-  background: var(--color-success);
  color: white;
+  background: var(--color-success);
 }

 .install-button:hover:not(:disabled) {
@@ -411,20 +408,20 @@ html, body {

 .installing-button,
 .processing-button {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
 }

 .installed-button {
-  background: var(--color-success-light);
-  color: var(--color-success);
  border: 1px solid var(--color-success);
+  color: var(--color-success);
+  background: var(--color-success-light);
 }

 .settings-button {
-  background: var(--color-accent);
  color: white;
+  background: var(--color-accent);
 }

 .settings-button:hover:not(:disabled) {
@@ -433,24 +430,24 @@ html, body {
 }

 .disabled-button {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
 }

 .disabled-button:hover:not(:disabled) {
-  background: var(--color-surface);
  border-color: var(--color-warning);
  color: var(--color-warning);
+  background: var(--color-surface);
 }

 /* Button Spinner */
 .button-spinner {
+  border: 2px solid transparent;
+  border-top: 2px solid currentcolor;
+  border-radius: 50%;
  width: 16px;
  height: 16px;
-  border: 2px solid transparent;
-  border-top: 2px solid currentColor;
-  border-radius: 50%;
  animation: spin 1s linear infinite;
 }

@@ -474,83 +471,80 @@ html, body {
 }

 .empty-content h3 {
+  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin: 0;
 }

 .empty-content p {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
  margin: 0;
  max-width: 400px;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
 }

 /* Modal */
 .modal-overlay {
  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  inset: 0;
  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 50%);
 }

 .modal-container {
-  background: var(--color-surface);
+  display: flex;
+  margin: 2rem;
+  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-xl);
+  width: 100%;
  max-width: 70vw;
  max-height: 80vh;
-  width: 100%;
-  margin: 2rem;
-  display: flex;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xl);
  flex-direction: column;
-  border: 1px solid var(--color-border);
 }

 .modal-header {
  display: flex;
-  align-items: center;
  justify-content: space-between;
-  padding: 1.5rem 1.5rem 0 1.5rem;
+  align-items: center;
+  padding: 1.5rem 1.5rem 0;
 }

 .modal-title {
+  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin: 0;
 }

 .modal-close {
  display: flex;
-  align-items: center;
  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  background: transparent;
+  align-items: center;
  border: none;
  border-radius: var(--radius-md);
+  width: 2rem;
+  height: 2rem;
  color: var(--color-text-secondary);
-  cursor: pointer;
+  background: transparent;
  transition: var(--transition-fast);
+  cursor: pointer;
 }

 .modal-close:hover {
-  background: var(--color-surface-elevated);
  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
 }

 .modal-content {
-  flex: 1;
-  padding: 1.5rem;
  overflow-y: auto;
+  padding: 1.5rem;
+  flex: 1;
 }

 .modal-content::-webkit-scrollbar {
@@ -558,13 +552,13 @@ html, body {
 }

 .modal-content::-webkit-scrollbar-track {
-  background: var(--color-surface-elevated);
  border-radius: 3px;
+  background: var(--color-surface-elevated);
 }

 .modal-content::-webkit-scrollbar-thumb {
-  background: var(--color-border);
  border-radius: 3px;
+  background: var(--color-border);
 }

 .modal-content::-webkit-scrollbar-thumb:hover {
@@ -573,26 +567,26 @@ html, body {

 .modal-footer {
  display: flex;
-  align-items: center;
  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 1.5rem;
+  align-items: center;
  border-top: 1px solid var(--color-border-secondary);
+  padding: 1.5rem;
+  gap: 0.75rem;
 }

 /* Buttons */
 .btn {
  display: flex;
  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--radius-md);
+  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
  font-family: inherit;
+  font-weight: 500;
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .btn:disabled {
@@ -606,8 +600,8 @@ html, body {
 }

 .btn-primary {
-  background: var(--color-accent);
  color: white;
+  background: var(--color-accent);
 }

 .btn-primary:hover:not(:disabled) {
@@ -615,14 +609,14 @@ html, body {
 }

 .btn-secondary {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
 }

 .btn-secondary:hover:not(:disabled) {
-  background: var(--color-surface);
  border-color: var(--color-accent);
+  background: var(--color-surface);
 }

 /* Transitions */
@@ -638,7 +632,7 @@ html, body {
 }

 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
  .plugin-container {
    padding: 0.75rem;
    gap: 1rem;
@@ -651,8 +645,8 @@ html, body {
  }

  .header-actions {
-    width: 100%;
    justify-content: flex-start;
+    width: 100%;
    flex-wrap: wrap;
  }

@@ -661,17 +655,17 @@ html, body {
  }

  .modal-container {
-    max-width: 95vw;
    margin: 1rem;
+    max-width: 95vw;
  }

  .action-button {
-    min-width: 120px;
    justify-content: center;
+    min-width: 120px;
  }
 }

-@media (max-width: 480px) {
+@media (width <= 480px) {
  .plugin-container {
    padding: 0.5rem;
  }
@@ -687,8 +681,8 @@ html, body {
  }

  .action-button {
-    width: 100%;
    justify-content: center;
+    width: 100%;
  }
 }

@@ -700,15 +694,15 @@ html, body {

 :root.dark .plugin-card,
 :root.auto.dark .plugin-card {
-  background: var(--color-surface-elevated);
  border-color: var(--color-border-secondary);
+  background: var(--color-surface-elevated);
 }

 :root.dark .search-input,
 :root.auto.dark .search-input {
-  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
 }

 :root.dark .search-input:focus,
@@ -718,20 +712,20 @@ html, body {

 :root.dark .modal-container,
 :root.auto.dark .modal-container {
-  background: var(--color-surface);
  border-color: var(--color-border);
+  background: var(--color-surface);
 }

 :root.dark .btn-secondary,
 :root.auto.dark .btn-secondary {
-  background: var(--color-surface-elevated);
  border-color: var(--color-border);
+  background: var(--color-surface-elevated);
 }

 :root.dark .btn-secondary:hover,
 :root.auto.dark .btn-secondary:hover {
-  background: var(--color-surface);
  border-color: var(--color-accent);
+  background: var(--color-surface);
 }

 /* Accessibility */
@@ -755,7 +749,7 @@ html, body {
 }

 .plugin-name:focus-visible {
+  border-radius: var(--radius-sm);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
-  border-radius: var(--radius-sm);
 }
--- a/src/renderer/pages/css/ShortKey.css
+++ b/src/renderer/pages/css/ShortKey.css
@@ -1,9 +1,9 @@
 .shortkey-container {
+  overflow-y: auto;
  padding: 1.5rem;
  min-height: 100vh;
-  background: var(--color-background-secondary);
  color: var(--color-text-primary);
-  overflow-y: auto;
+  background: var(--color-background-secondary);
  scrollbar-width: none;
  -ms-overflow-style: none;
 }
@@ -17,12 +17,12 @@
  display: flex;
  justify-content: space-between;
  align-items: center;
-  background: var(--color-surface);
+  margin-bottom: 1.5rem;
+  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
-  margin-bottom: 1.5rem;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  border: 1px solid var(--color-border);
+  background: var(--color-surface);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
 }

 .header-content {
@@ -44,17 +44,17 @@

 .shortkey-header p {
  margin: 0;
-  color: var(--color-text-secondary);
  font-size: 0.875rem;
+  color: var(--color-text-secondary);
 }

 /* Card */
 .shortkey-card {
-  background: var(--color-background-primary);
-  border-radius: 12px;
-  box-shadow: 0 2px 8px var(--color-border);
-  border: 1px solid var(--color-border);
  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  background: var(--color-background-primary);
+  box-shadow: 0 2px 8px var(--color-border);
 }

 /* Table */
@@ -69,18 +69,18 @@
 }

 .shortkey-table th {
-  background: var(--color-background-tertiary);
-  color: var(--color-text-primary);
-  font-weight: 600;
-  font-size: 0.875rem;
-  padding: 1rem;
-  text-align: left;
  border-bottom: 1px solid var(--color-border);
+  padding: 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-align: left;
+  color: var(--color-text-primary);
+  background: var(--color-background-tertiary);
 }

 .shortkey-table td {
-  padding: 1rem;
  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 1rem;
  vertical-align: middle;
 }

@@ -94,9 +94,9 @@

 /* Table Cells */
 .name-cell {
+  width: 25%;
  font-weight: 500;
  color: var(--color-text-primary);
-  width: 25%;
 }

 .key-cell {
@@ -109,20 +109,20 @@
 }

 .key-display {
-  background: var(--color-background-tertiary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
-  font-family: monospace;
  font-size: 0.75rem;
+  font-family: monospace;
  color: var(--color-text-primary);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  background: var(--color-background-tertiary);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
 }

 .no-binding {
+  font-size: 0.875rem;
  color: var(--color-text-secondary);
  font-style: italic;
-  font-size: 0.875rem;
 }

 .status-cell {
@@ -131,22 +131,22 @@

 .status-badge {
  display: inline-block;
-  padding: 0.25rem 0.75rem;
  border-radius: 12px;
+  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
 }

 .status-enabled {
-  background: rgba(103, 194, 58, 0.1);
+  border: 1px solid rgb(103 194 58 / 20%);
  color: #67c23a;
-  border: 1px solid rgba(103, 194, 58, 0.2);
+  background: rgb(103 194 58 / 10%);
 }

 .status-disabled {
-  background: rgba(245, 108, 108, 0.1);
+  border: 1px solid rgb(245 108 108 / 20%);
  color: #f56c6c;
-  border: 1px solid rgba(245, 108, 108, 0.2);
+  background: rgb(245 108 108 / 10%);
 }

 .source-cell {
@@ -154,8 +154,8 @@
 }

 .source-name {
-  color: var(--color-text-secondary);
  font-size: 0.875rem;
+  color: var(--color-text-secondary);
 }

 .actions-cell {
@@ -171,18 +171,18 @@
 /* Buttons */
 .btn {
  display: inline-flex;
-  align-items: center;
  justify-content: center;
-  gap: 0.375rem;
-  padding: 0.5rem 0.875rem;
-  border-radius: 6px;
+  align-items: center;
  border: none;
+  border-radius: 6px;
+  padding: 0.5rem 0.875rem;
+  min-width: fit-content;
  font-size: 0.75rem;
  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: fit-content;
  text-decoration: none;
+  transition: all 0.2s ease;
+  gap: 0.375rem;
+  cursor: pointer;
 }

 .btn:disabled {
@@ -192,7 +192,7 @@

 .btn:hover:not(:disabled) {
  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
 }

 .btn-sm {
@@ -201,8 +201,8 @@
 }

 .btn-primary {
-  background: #409eff;
  color: white;
+  background: #409eff;
 }

 .btn-primary:hover:not(:disabled) {
@@ -210,19 +210,19 @@
 }

 .btn-secondary {
-  background: var(--color-background-tertiary);
-  color: var(--color-text-primary);
  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);
  border-color: var(--color-accent);
+  background: var(--color-background-secondary);
 }

 .btn-success {
-  background: #67c23a;
  color: white;
+  background: #67c23a;
 }

 .btn-success:hover:not(:disabled) {
@@ -230,8 +230,8 @@
 }

 .btn-danger {
-  background: #f56c6c;
  color: white;
+  background: #f56c6c;
 }

 .btn-danger:hover:not(:disabled) {
@@ -241,35 +241,32 @@
 /* Modal */
 .modal-overlay {
  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  inset: 0;
  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
  padding: 1rem;
+  background: rgb(0 0 0 / 50%);
 }

 .modal-content {
-  background: var(--color-background-primary);
-  border-radius: 12px;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  border: 1px solid var(--color-border);
-  max-width: 500px;
-  width: 100%;
-  max-height: 90vh;
  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  width: 100%;
+  max-width: 500px;
+  max-height: 90vh;
+  background: var(--color-background-primary);
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);
 }

 .modal-header {
  display: flex;
-  align-items: center;
  justify-content: space-between;
-  padding: 1.5rem;
+  align-items: center;
  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 1.5rem;
 }

 .modal-title {
@@ -281,21 +278,21 @@

 .modal-close {
  display: flex;
-  align-items: center;
  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 6px;
  width: 32px;
  height: 32px;
-  border-radius: 6px;
-  border: none;
-  background: var(--color-background-tertiary);
  color: var(--color-text-secondary);
-  cursor: pointer;
+  background: var(--color-background-tertiary);
  transition: all 0.2s ease;
+  cursor: pointer;
 }

 .modal-close:hover {
-  background: var(--color-background-secondary);
  color: var(--color-text-primary);
+  background: var(--color-background-secondary);
 }

 .modal-body {
@@ -305,10 +302,10 @@
 .modal-footer {
  display: flex;
  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 1rem 1.5rem;
  border-top: 1px solid var(--color-border-secondary);
+  padding: 1rem 1.5rem;
  background: var(--color-background-tertiary);
+  gap: 0.75rem;
 }

 /* Form Elements */
@@ -325,39 +322,39 @@
 }

 .form-input {
-  width: 100%;
-  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
-  background: var(--color-background-primary);
-  color: var(--color-text-primary);
+  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 {
-  outline: none;
  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(64 158 255 / 20%);
 }

 .key-input {
  font-family: monospace;
-  text-align: center;
  font-weight: 600;
+  text-align: center;
  letter-spacing: 0.5px;
 }

 .input-hint {
  margin-top: 0.5rem;
  font-size: 0.75rem;
-  color: var(--color-text-secondary);
  text-align: center;
+  color: var(--color-text-secondary);
 }

 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
  .shortkey-container {
    padding: 1rem;
  }
@@ -398,7 +395,7 @@
  }
 }

-@media (max-width: 480px) {
+@media (width <= 480px) {
  .shortkey-container {
    padding: 0.75rem;
  }
--- a/src/renderer/pages/css/ToolboxPage.css
+++ b/src/renderer/pages/css/ToolboxPage.css
@@ -5,39 +5,39 @@ html, body {

 /* Container */
 .toolbox-container {
+  display: flex;
+  overflow-y: auto;
+  margin: 0;
  padding: 1rem;
  width: 100%;
-  margin: 0;
-  display: flex;
+  min-height: 100vh;
  flex-direction: column;
  gap: 1.25rem;
-  min-height: 100vh;
  box-sizing: border-box;
-  overflow-y: auto;
 }

 /* Card Base */
 .toolbox-card {
-  background: var(--color-surface);
+  overflow: hidden;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-xl);
-  overflow: hidden;
-  transition: var(--transition-medium);
+  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
+  transition: var(--transition-medium);
 }

 .toolbox-card:hover {
-  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
 }

 /* Header Card */
 .header-card .card-header {
  display: flex;
-  align-items: center;
  justify-content: space-between;
-  padding: 1rem 1.5rem;
+  align-items: center;
  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 1rem 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
 }
@@ -50,9 +50,9 @@ html, body {
 }

 .header-logo {
+  border-radius: var(--radius-lg);
  width: 48px;
  height: 48px;
-  border-radius: var(--radius-lg);
  object-fit: cover;
 }

@@ -63,17 +63,17 @@ html, body {
 }

 .header-title {
+  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin: 0;
  letter-spacing: -0.025em;
 }

 .header-subtitle {
+  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
-  margin: 0;
 }

 .header-actions {
@@ -85,20 +85,20 @@ html, body {

 .action-button {
  display: flex;
+  justify-content: center;
  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.25rem;
-  background: var(--color-accent);
-  color: white;
  border: none;
  border-radius: var(--radius-lg);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
+  padding: 0.75rem 1.25rem;
  min-width: 120px;
-  justify-content: center;
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 500;
+  color: white;
+  background: var(--color-accent);
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .action-button:hover:not(.disabled) {
@@ -114,31 +114,31 @@ html, body {
 }

 .action-button.secondary {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
 }

 .action-button.secondary:hover {
-  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
+  background: var(--color-surface);
 }

 .action-button.small {
  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
  min-width: auto;
+  font-size: 0.75rem;
 }

 .success-tips {
-  padding: 0.75rem 1.25rem;
-  background: linear-gradient(135deg, rgba(103, 194, 58, 0.1) 0%, var(--color-surface) 100%);
-  border: 1px solid rgba(103, 194, 58, 0.3);
+  border: 1px solid rgb(103 194 58 / 30%);
  border-radius: var(--radius-lg);
-  color: #67C23A;
+  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
+  color: #67C23A;
+  background: linear-gradient(135deg, rgb(103 194 58 / 10%) 0%, var(--color-surface) 100%);
 }

 .cant-fix-container {
@@ -149,8 +149,8 @@ html, body {
 }

 .cant-fix-text {
-  color: var(--color-text-secondary);
  font-size: 0.875rem;
+  color: var(--color-text-secondary);
 }

 /* Progress Card */
@@ -159,37 +159,34 @@ html, body {
 }

 .progress-container {
-  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
+  padding: 1rem 1.5rem;
  gap: 1rem;
 }

 .progress-bar {
-  flex: 1;
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--radius-full);
  height: 8px;
  background: var(--color-surface-elevated);
-  border-radius: var(--radius-full);
-  overflow: hidden;
-  position: relative;
+  flex: 1;
 }

 .progress-fill {
+  position: relative;
+  border-radius: var(--radius-full);
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
-  border-radius: var(--radius-full);
  transition: width 0.3s ease-in-out;
-  position: relative;
 }

 .progress-fill::after {
-  content: '';
  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
+  inset: 0;
+  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 20%) 50%, transparent 100%);
+  content: '';
  animation: shimmer 2s infinite;
 }

@@ -199,11 +196,11 @@ html, body {
 }

 .progress-text {
+  min-width: 40px;
  font-size: 0.875rem;
  font-weight: 600;
-  color: var(--color-text-primary);
-  min-width: 40px;
  text-align: right;
+  color: var(--color-text-primary);
 }

 /* Items Card */
@@ -212,10 +209,10 @@ html, body {
 }

 .card-title {
+  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin: 0;
 }

 .items-list {
@@ -253,15 +250,15 @@ html, body {

 .item-header {
  display: flex;
-  align-items: center;
  justify-content: space-between;
+  align-items: center;
  padding: 1rem 1.5rem;
-  cursor: pointer;
  transition: var(--transition-fast);
+  cursor: pointer;
 }

 .item-header:hover {
-  background: rgba(0, 0, 0, 0.02);
+  background: rgb(0 0 0 / 2%);
 }

 .item-title {
@@ -275,10 +272,10 @@ html, body {
 }

 .item-chevron {
-  color: var(--color-text-secondary);
-  transition: var(--transition-fast);
  display: flex;
  align-items: center;
+  color: var(--color-text-secondary);
+  transition: var(--transition-fast);
 }

 .item-active .item-chevron {
@@ -288,33 +285,33 @@ html, body {

 .item-content-enter-active,
 .item-content-leave-active {
-  transition: all 0.3s ease;
  overflow: hidden;
+  transition: all 0.3s ease;
 }

 .item-content-enter-from,
 .item-content-leave-to {
-  opacity: 0;
  max-height: 0;
+  opacity: 0;
 }

 .item-content-enter-to,
 .item-content-leave-from {
-  opacity: 1;
  max-height: 200px;
+  opacity: 1;
 }

 .item-content {
-  padding: 0 1.5rem 1rem;
  border-top: 1px solid var(--color-border-secondary);
+  padding: 0 1.5rem 1rem;
  background: var(--color-surface);
 }

 .item-message {
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  line-height: 1.5;
  margin-bottom: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  line-height: 1.5;
 }

 .item-actions {
@@ -323,7 +320,7 @@ html, body {
 }

 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
  .toolbox-container {
    padding: 0.75rem;
    gap: 1rem;
@@ -366,6 +363,6 @@ html, body {
 /* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .item-header:hover {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgb(255 255 255 / 5%);
  }
 }
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -5,30 +5,30 @@ html, body {

 /* Container */
 .upload-container {
+  display: flex;
+  overflow-y: auto;
+  margin: 0;
  padding: 1rem;
  width: 100%;
-  margin: 0;
-  display: flex;
+  min-height: 100vh;
  flex-direction: column;
  gap: 1.25rem;
-  min-height: 100vh;
  box-sizing: border-box;
-  overflow-y: auto;
 }

 /* Card Base */
 .upload-card {
-  background: var(--color-background-secondary);
+  overflow: hidden;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-xl);
-  overflow: hidden;
-  transition: var(--transition-medium);
+  background: var(--color-background-secondary);
  box-shadow: var(--shadow-sm);
+  transition: var(--transition-medium);
 }

 .upload-card:hover {
-  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
 }

 /* Compact cards styling */
@@ -45,10 +45,10 @@ html, body {
 /* Header Card */
 .header-card .card-header {
  display: flex;
-  align-items: center;
  justify-content: space-between;
-  padding: 1rem 1.5rem;
+  align-items: center;
  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 1rem 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
 }
@@ -60,24 +60,24 @@ html, body {
 .provider-button {
  display: flex;
  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
+  padding: 0.75rem 1rem;
  width: auto;
  min-width: 200px;
+  font-family: inherit;
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  gap: 0.75rem;
+  cursor: pointer;
  flex-shrink: 0;
 }

 .provider-button:hover {
-  background: var(--color-surface);
  border-color: var(--color-accent);
-  transform: translateY(-1px);
+  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
 }

 .provider-info {
@@ -119,17 +119,17 @@ html, body {
 .action-button {
  display: flex;
  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  background: var(--color-accent);
-  color: white;
  border: none;
  border-radius: var(--radius-md);
+  padding: 0.625rem 1rem;
  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
  font-family: inherit;
+  font-weight: 500;
+  color: white;
+  background: var(--color-accent);
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .action-button:hover {
@@ -139,15 +139,15 @@ html, body {
 }

 .action-button.secondary {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
 }

 .action-button.secondary:hover {
-  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-accent);
+  background: var(--color-surface);
 }

 /* Main Upload Card */
@@ -157,19 +157,19 @@ html, body {

 .upload-zone {
  position: relative;
-  padding: 3rem 2rem;
-  cursor: pointer;
-  transition: var(--transition-medium);
+  margin: 1rem;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-xl);
+  padding: 3rem 2rem;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background-secondary) 100%);
-  margin: 1rem;
+  transition: var(--transition-medium);
+  cursor: pointer;
 }

 .upload-zone:hover,
 .upload-zone.drag-active {
  border-color: var(--color-accent);
-  background: linear-gradient(135deg, var(--color-surface-elevated) 0%, rgba(0, 122, 255, 0.05) 100%);
+  background: linear-gradient(135deg, var(--color-surface-elevated) 0%, rgb(0 122 255 / 5%) 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
 }
@@ -183,14 +183,14 @@ html, body {
 }

 .upload-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
  width: 80px;
  height: 80px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--color-accent) 0%, rgba(0, 122, 255, 0.8) 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
  color: white;
+  background: linear-gradient(135deg, var(--color-accent) 0%, rgb(0 122 255 / 80%) 100%);
  transition: var(--transition-medium);
 }

@@ -201,17 +201,17 @@ html, body {
 }

 .upload-title {
+  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin: 0;
  letter-spacing: -0.025em;
 }

 .upload-subtitle {
+  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
-  margin: 0;
 }

 .upload-formats {
@@ -232,24 +232,24 @@ html, body {
 /* Progress */
 .progress-container {
  margin: 1rem 1.5rem;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-lg);
  padding: 1rem;
  background: var(--color-surface-elevated);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border-secondary);
 }

 .progress-bar {
-  height: 6px;
-  background: var(--color-border-secondary);
-  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
+  border-radius: 3px;
+  height: 6px;
+  background: var(--color-border-secondary);
 }

 .progress-fill {
+  border-radius: 3px;
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%);
-  border-radius: 3px;
  transition: width var(--transition-medium);
 }

@@ -258,54 +258,54 @@ html, body {
 }

 .progress-text {
+  display: block;
  font-size: 0.875rem;
  font-weight: 500;
-  color: var(--color-text-secondary);
  text-align: center;
-  display: block;
+  color: var(--color-text-secondary);
 }

 /* Quick Actions Card */
 .card-header {
-  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 1rem 1.5rem;
 }

 .card-title {
+  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin: 0;
  letter-spacing: -0.025em;
 }

 .quick-actions {
-  padding: 1rem 1.5rem;
  display: grid;
+  padding: 1rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
 }

 .quick-action-button {
  display: flex;
-  flex-direction: row;
  align-items: center;
-  gap: 0.5rem;
-  padding: 0.875rem 1rem;
-  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
-  cursor: pointer;
-  transition: var(--transition-medium);
+  padding: 0.875rem 1rem;
  font-family: inherit;
  text-align: left;
+  background: var(--color-surface-elevated);
+  transition: var(--transition-medium);
+  flex-direction: row;
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .quick-action-button:hover {
-  background: var(--color-surface);
  border-color: var(--color-accent);
-  transform: translateY(-2px);
+  background: var(--color-surface);
  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
 }

 .quick-action-button span {
@@ -316,8 +316,8 @@ html, body {

 /* Settings Card */
 .settings-content {
-  padding: 1.25rem 1.5rem;
  display: flex;
+  padding: 1.25rem 1.5rem;
  flex-direction: column;
  gap: 1.5rem;
 }
@@ -328,7 +328,7 @@ html, body {
  gap: 0.75rem;
 }

-@media (min-width: 768px) {
+@media (width >= 768px) {
  .settings-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
@@ -341,11 +341,11 @@ html, body {
  }
 }

-@media (min-width: 1024px) {
+@media (width >= 1024px) {
  .upload-container {
+    margin: 0 auto;
    padding: 1.5rem 2rem;
    max-width: 1200px;
-    margin: 0 auto;
  }

  .quick-actions {
@@ -358,10 +358,10 @@ html, body {
 }

 .setting-label {
+  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
-  margin: 0;
 }

 .format-buttons {
@@ -371,16 +371,16 @@ html, body {
 }

 .format-button {
-  padding: 0.4rem 0.75rem;
-  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
+  padding: 0.4rem 0.75rem;
  font-size: 0.7rem;
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-weight: 500;
  color: var(--color-text-secondary);
-  cursor: pointer;
+  background: var(--color-surface-elevated);
  transition: var(--transition-fast);
-  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  cursor: pointer;
 }

 .format-button:hover {
@@ -389,31 +389,31 @@ html, body {
 }

 .format-button.active {
-  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
+  background: var(--color-accent);
 }

 .url-toggle {
  display: flex;
-  background: var(--color-surface-elevated);
+  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
-  overflow: hidden;
  width: 100%;
+  background: var(--color-surface-elevated);
 }

 .toggle-button {
-  flex: 1;
-  padding: 0.625rem 0.875rem;
-  background: transparent;
  border: none;
+  padding: 0.625rem 0.875rem;
  font-size: 0.8rem;
+  font-family: inherit;
  font-weight: 500;
  color: var(--color-text-secondary);
-  cursor: pointer;
+  background: transparent;
  transition: var(--transition-fast);
-  font-family: inherit;
+  flex: 1;
+  cursor: pointer;
 }

 .toggle-button:hover {
@@ -421,8 +421,8 @@ html, body {
 }

 .toggle-button.active {
-  background: var(--color-accent);
  color: white;
+  background: var(--color-accent);
 }

 .toggle-button:first-child.active {
@@ -438,66 +438,66 @@ html, body {
 /* Modal */
 .modal-overlay {
  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
-  align-items: center;
  justify-content: center;
-  padding: 2rem;
+  align-items: center;
  overflow-y: auto;
+  padding: 2rem;
+  background: rgb(0 0 0 / 50%);
+  inset: 0;
 }

 .modal-container {
-  background: var(--color-surface);
-  border-radius: var(--radius-2xl);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-xl);
-  max-width: 90vw;
-  width: 80vw;
-  height: 80vh;
-  max-height: 90vh;
  overflow: hidden;
  margin: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-2xl);
+  width: 80vw;
+  max-width: 90vw;
+  height: 80vh;
+  max-height: 90vh;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xl);
 }

 .modal-header {
  display: flex;
-  align-items: center;
  justify-content: space-between;
-  padding: 1.5rem 2rem;
+  align-items: center;
  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 1.5rem 2rem;
 }

 .modal-title {
+  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin: 0;
 }

 .modal-close {
  display: flex;
-  align-items: center;
  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--color-surface-elevated);
+  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
-  cursor: pointer;
+  width: 32px;
+  height: 32px;
  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+  cursor: pointer;
 }

 .modal-close:hover {
-  background: var(--color-surface);
  border-color: var(--color-danger);
  color: var(--color-danger);
+  background: var(--color-surface);
 }

 .modal-content {
-  padding: 0.2rem;
  overflow-y: auto;
+  padding: 0.2rem;
  max-height: calc(90vh - 120px);
  scrollbar-width: none;
  -ms-overflow-style: none;
@@ -521,7 +521,7 @@ html, body {


 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
  .upload-container {
    padding: 0.75rem;
    gap: 1rem;
@@ -547,8 +547,8 @@ html, body {
  }

  .upload-zone {
-    padding: 2rem 1rem;
    margin: 0.75rem;
+    padding: 2rem 1rem;
  }

  .upload-icon {
@@ -581,7 +581,7 @@ html, body {
  }
 }

-@media (max-width: 480px) {
+@media (width <= 480px) {
  .upload-container {
    padding: 0.5rem;
  }
@@ -605,8 +605,8 @@ html, body {
  }

  .provider-button {
-    min-width: unset;
    width: 100%;
+    min-width: unset;
  }
 }

@@ -620,14 +620,15 @@ html, body {
 :root.dark .upload-zone.drag-active,
 :root.auto.dark .upload-zone:hover,
 :root.auto.dark .upload-zone.drag-active {
-  background: linear-gradient(135deg, var(--color-surface) 0%, rgba(0, 122, 255, 0.1) 100%);
+  background: linear-gradient(135deg, var(--color-surface) 0%, rgb(0 122 255 / 10%) 100%);
 }

 /* Animation for upload icon */
@keyframes float {
  0%, 100% {
-    transform: translateY(0px);
+    transform: translateY(0);
  }
+
  50% {
    transform: translateY(-10px);
  }
--- a/src/renderer/pages/css/UploaderConfigPage.css
+++ b/src/renderer/pages/css/UploaderConfigPage.css
@@ -1,49 +1,49 @@
 /* Container */
 .config-container {
+  display: flex;
+  overflow-y: auto;
+  margin: 0;
  padding: 1rem;
  width: 100%;
-  margin: 0;
-  display: flex;
+  min-height: 100vh;
  flex-direction: column;
  gap: 1.25rem;
-  min-height: 100vh;
  box-sizing: border-box;
-  overflow-y: auto;
 }

 /* Card Base */
 .config-card {
-  background: var(--color-surface);
+  overflow: hidden;
  border: 1px solid var(--color-border-secondary);
  border-radius: var(--radius-xl);
-  overflow: hidden;
-  transition: var(--transition-medium);
+  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
+  transition: var(--transition-medium);
 }

 .config-card:hover {
-  box-shadow: var(--shadow-md);
  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
 }

 /* Header Card */
 .header-card .card-header {
-  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 1.5rem 2rem;
 }

 .page-title {
+  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin: 0;
  letter-spacing: -0.025em;
 }

 /* Main Card */
 .main-card {
-  background: var( --color-background-secondary);
  padding: 1.5rem;
+  background: var( --color-background-secondary);
 }

 .config-grid {
@@ -53,14 +53,14 @@
  width: 100%;
 }

-@media (max-width: 768px) {
+@media (width <= 768px) {
  .config-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
 }

-@media (min-width: 1200px) {
+@media (width >= 1200px) {
  .config-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
@@ -69,24 +69,24 @@

 /* Config Items */
 .config-item {
-  background: var(--color-surface-elevated);
+  position: relative;
+  display: flex;
+  justify-content: space-between;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
-  cursor: pointer;
-  transition: var(--transition-medium);
-  position: relative;
  min-height: 120px;
-  display: flex;
+  background: var(--color-surface-elevated);
+  transition: var(--transition-medium);
+  cursor: pointer;
  flex-direction: column;
-  justify-content: space-between;
 }

 .config-item:hover {
-  background: var(--color-surface);
  border-color: var(--color-accent);
-  transform: translateY(-2px);
+  background: var(--color-surface);
  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
 }

 .config-item.selected {
@@ -101,28 +101,28 @@
 }

 .config-name {
+  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
-  margin-bottom: 0.5rem;
  line-height: 1.4;
 }

 .config-update-time {
+  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
-  margin-bottom: 0.75rem;
 }

 .default-badge {
  display: inline-flex;
  align-items: center;
+  border-radius: var(--radius-md);
  padding: 0.25rem 0.75rem;
-  background: var(--color-accent);
-  color: white;
  font-size: 0.75rem;
  font-weight: 500;
-  border-radius: var(--radius-md);
+  color: white;
+  background: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.025em;
 }
@@ -137,16 +137,16 @@

 .action-btn {
  display: flex;
-  align-items: center;
  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--color-surface-elevated);
+  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: var(--transition-fast);
+  width: 32px;
+  height: 32px;
  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  cursor: pointer;
 }

 .action-btn:hover {
@@ -172,12 +172,12 @@

 /* Add New Config Item */
 .config-item-add {
-  border: 2px dashed var(--color-border);
-  background: var(--color-surface);
  display: flex;
-  align-items: center;
  justify-content: center;
+  align-items: center;
+  border: 2px dashed var(--color-border);
  min-height: 120px;
+  background: var(--color-surface);
 }

 .config-item-add:hover {
@@ -210,27 +210,27 @@
 }

 .card-actions {
-  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: center;
+  padding: 1.25rem 1.5rem;
 }

 .primary-button {
  display: flex;
+  justify-content: center;
  align-items: center;
-  gap: 0.5rem;
-  padding: 0.875rem 2rem;
-  background: var(--color-accent);
-  color: white;
  border: none;
  border-radius: var(--radius-lg);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
+  padding: 0.875rem 2rem;
  min-width: 200px;
-  justify-content: center;
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 500;
+  color: white;
+  background: var(--color-accent);
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .primary-button:hover:not(:disabled) {
@@ -240,15 +240,15 @@
 }

 .primary-button:disabled {
-  background: var(--color-border);
  color: var(--color-text-secondary);
+  background: var(--color-border);
+  box-shadow: none;
  cursor: not-allowed;
  transform: none;
-  box-shadow: none;
 }

 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
  .config-container {
    padding: 0.75rem;
    gap: 1rem;
@@ -287,10 +287,10 @@
  }
 }

-@media (min-width: 1024px) {
+@media (width >= 1024px) {
  .config-container {
+    margin: 0 auto;
    padding: 1.5rem 2rem;
    max-width: 1200px;
-    margin: 0 auto;
  }
 }
--- a/src/renderer/pages/picbeds/index.vue
+++ b/src/renderer/pages/picbeds/index.vue
@@ -153,7 +153,7 @@ const handleConfirm = async () => {
        IRPCActionType.UPLOADER_UPDATE_CONFIG,
        type.value,
        rawResult?._id,
-        rawResult
+        rawResult,
      )
      message.success(t('pages.picBedConfigs.setSuccess'))
      $router.back()
@@ -263,41 +263,41 @@ async function handleCopyApi() {

 <script lang="ts">
 export default {
-  name: 'PicbedsPage'
+  name: 'PicbedsPage',
 }
 </script>

 <style scoped>
 #picbeds-page {
-  min-height: 100vh;
-  background: var(--color-background-tertiar);
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--color-background-tertiar);
 }

 .page-container {
-  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
+  max-width: 1000px;
 }

 .page-content {
-  background: var(--color-background-secondary);
-  border-radius: 16px;
-  box-shadow:
-    0 8px 8px rgba(0, 0, 0, 0.12),
-    0 4px 8px rgba(0, 0, 0, 0.08);
  overflow: auto;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 16px;
+  background: var(--color-background-secondary);
+  box-shadow:
+    0 8px 8px rgb(0 0 0 / 12%),
+    0 4px 8px rgb(0 0 0 / 8%);
 }

 /* Header Section */
 .page-header {
  display: flex;
-  align-items: center;
  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgb(229 231 235 / 80%);
  padding: 2rem 2rem 1.5rem;
-  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
  background: var(--color-background-secondary);
 }

@@ -308,16 +308,15 @@ export default {
 }

 .page-title {
+  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
-  margin: 0;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
  background-clip: text;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  -webkit-text-fill-color: transparent;
 }

 .page-title:hover {
@@ -327,38 +326,38 @@ export default {

 .link-button {
  display: flex;
-  align-items: center;
  justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  align-items: center;
  border: none;
  border-radius: 8px;
-  background: rgba(59, 130, 246, 0.1);
+  width: 2rem;
+  height: 2rem;
  color: #3b82f6;
-  cursor: pointer;
+  background: rgb(59 130 246 / 10%);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
 }

 .link-button:hover {
-  background: rgba(59, 130, 246, 0.2);
+  background: rgb(59 130 246 / 20%);
  transform: translateY(-1px);
 }

 /* Action Buttons */
 .action-button {
+  position: relative;
  display: flex;
  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
+  overflow: hidden;
  border: none;
  border-radius: 12px;
+  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
-  position: relative;
-  overflow: hidden;
+  font-weight: 500;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  gap: 0.5rem;
+  cursor: pointer;
 }

 .action-button::before {
@@ -368,7 +367,7 @@ export default {
  left: -100%;
  width: 100%;
  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 20%), transparent);
  transition: left 0.6s;
 }

@@ -377,48 +376,48 @@ export default {
 }

 .action-button.primary {
-  background: var(--color-blue-common);
  color: white;
-  box-shadow: 0 2px 2px rgba(0, 122, 255, 0.3);
+  background: var(--color-blue-common);
+  box-shadow: 0 2px 2px rgb(0 122 255 / 30%);
 }

 .action-button.primary:hover {
  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.4);
+  box-shadow: 0 2px 4px rgb(0 122 255 / 40%);
 }

 .action-button.secondary {
-  background: var(--color-surface-elevated);
-  color: #475569;
  border: 1px solid #e2e8f0;
+  color: #475569;
+  background: var(--color-surface-elevated);
 }

 .action-button.secondary:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
 }

 .action-button.success {
-  background: var(--color-success);
  color: white;
-  box-shadow: 0 4px 4px rgba(16, 185, 129, 0.3);
+  background: var(--color-success);
+  box-shadow: 0 4px 4px rgb(16 185 129 / 30%);
 }

 .action-button.success:hover {
  transform: translateY(-2px);
-  box-shadow: 0 8px 6px rgba(16, 185, 129, 0.4);
+  box-shadow: 0 8px 6px rgb(16 185 129 / 40%);
 }

 .action-button.warning {
-  background: var(--color-warning);
-  color: white;
  position: relative;
+  color: white;
+  background: var(--color-warning);
 }

 .action-button.warning:hover {
  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
+  box-shadow: 0 4px 6px rgb(245 158 11 / 30%);
 }

 .dropdown-arrow {
@@ -458,17 +457,17 @@ export default {
 .dropdown-menu {
  position: absolute;
  top: 100%;
-  left: 0;
  right: 0;
+  left: 0;
+  z-index: 1000;
+  overflow: hidden;
+  overflow-y: auto;
  margin-top: 0.5rem;
-  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
-  overflow: hidden;
-  z-index: 1000;
  max-height: 300px;
-  overflow-y: auto;
+  background: white;
+  box-shadow: 0 8px 32px rgb(0 0 0 / 12%);
 }

 .dropdown-menu.dropdown-up {
@@ -480,20 +479,20 @@ export default {

 .dropdown-item {
  display: block;
-  width: 100%;
-  padding: 0.75rem 1rem;
  border: none;
-  background: transparent;
-  color: #374151;
+  padding: 0.75rem 1rem;
+  width: 100%;
  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
  text-align: left;
+  color: #374151;
+  background: transparent;
+  transition: all 0.2s ease;
+  cursor: pointer;
 }

 .dropdown-item:hover {
-  background: #f3f4f6;
  color: #007aff;
+  background: #f3f4f6;
 }

 .dropdown-item:last-child {
@@ -507,57 +506,54 @@ export default {
 }

 .empty-content {
-  max-width: 400px;
  margin: 0 auto;
+  max-width: 400px;
 }

 .empty-icon {
-  color: #9ca3af;
  margin-bottom: 1.5rem;
+  color: #9ca3af;
 }

 .empty-content h3 {
+  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: #374151;
-  margin: 0 0 0.5rem;
 }

 .empty-content p {
-  color: #6b7280;
  margin: 0;
+  color: #6b7280;
  line-height: 1.6;
 }

 /* Loading Overlay */
 .loading-overlay {
  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
+  inset: 0;
  z-index: 2000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 50%);
+  flex-direction: column;
+  gap: 1rem;
 }

 .loading-spinner {
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 3px solid rgba(255, 255, 255, 0.3);
+  border: 3px solid rgb(255 255 255 / 30%);
  border-top: 3px solid white;
  border-radius: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
  animation: spin 1s linear infinite;
 }

 .loading-text {
-  color: white;
  font-size: 0.875rem;
  font-weight: 500;
+  color: white;
 }

 /* Transitions */
@@ -583,6 +579,7 @@ export default {
  0% {
    transform: rotate(0deg);
  }
+
  100% {
    transform: rotate(360deg);
  }
@@ -596,34 +593,33 @@ export default {

 :root.dark .page-content,
 :root.auto.dark .page-content {
+  border-color: rgb(75 85 99 / 30%);
  background: var(--color-background-secondary);
-  border-color: rgba(75, 85, 99, 0.3);
 }

 :root.dark .page-header,
 :root.auto.dark .page-header {
+  border-color: rgb(75 85 99 / 30%);
  background: var(--color-background-secondary);
-  border-color: rgba(75, 85, 99, 0.3);
 }

 :root.dark .page-title,
 :root.auto.dark .page-title {
  background: linear-gradient(135deg, #f9fafb 0%, #d1d5db 100%);
-  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
 }

 :root.dark .dropdown-menu,
 :root.auto.dark .dropdown-menu {
-  background: #374151;
  border-color: #4b5563;
+  background: #374151;
 }

 :root.dark .dropdown-menu.dropdown-up,
 :root.auto.dark .dropdown-menu.dropdown-up {
-  background: #374151;
  border-color: #4b5563;
+  background: #374151;
 }

 :root.dark .dropdown-item,
@@ -633,12 +629,12 @@ export default {

 :root.dark .dropdown-item:hover,
 :root.auto.dark .dropdown-item:hover {
-  background: #4b5563;
  color: #60a5fa;
+  background: #4b5563;
 }

 /* Responsive Design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
  .page-container {
    padding: 1rem;
  }
@@ -660,19 +656,19 @@ export default {
  }

  .action-button {
-    width: 100%;
    justify-content: center;
+    width: 100%;
  }

  .toast {
+    top: 1rem;
    right: 1rem;
    left: 1rem;
-    top: 1rem;
    min-width: auto;
  }
 }

-@media (max-width: 480px) {
+@media (width <= 480px) {
  .page-container {
    padding: 0.5rem;
  }