From 34fde7a4e6f6e45f64b7d0ef7b76221f83039960 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Thu, 1 Jan 2026 16:26:16 +0800
Subject: [PATCH] :zap: Perf(custom): remove backdrop-filter for better
 performance

---
 src/main/server/webServer/index.ts            |    1 -
 src/renderer/components/InputBoxDialog.vue    |    7 +-
 .../components/css/ImageProcessSetting.css    |    2 +-
 .../components/ui/ConfirmMessageBox.vue       |    1 -
 src/renderer/pages/css/UploaderConfigPage.css | 1211 ++++++++---------
 src/renderer/pages/picbeds/Picbeds.css        |    4 +-
 6 files changed, 610 insertions(+), 616 deletions(-)

diff --git a/src/main/server/webServer/index.ts b/src/main/server/webServer/index.ts
index 01e11ac9..01f2e57c 100644
--- a/src/main/server/webServer/index.ts
+++ b/src/main/server/webServer/index.ts
@@ -522,7 +522,6 @@ function generateErrorPage(errorCode: number, _e: string): string {
             background: rgba(255, 255, 255, 0.95);
             border-radius: 15px;
             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-            backdrop-filter: blur(10px);
             padding: 60px 40px;
             text-align: center;
             max-width: 500px;
diff --git a/src/renderer/components/InputBoxDialog.vue b/src/renderer/components/InputBoxDialog.vue
index 4cedd104..b53ef4d9 100644
--- a/src/renderer/components/InputBoxDialog.vue
+++ b/src/renderer/components/InputBoxDialog.vue
@@ -5,7 +5,7 @@
         <Transition name="inputbox-scale">
           <div v-if="showInputBoxVisible" class="inputbox-container" @click.stop>
             <button class="inputbox-close" @click="handleInputBoxCancel">
-              <X :size="20" />
+              <XIcon :size="20" />
             </button>
 
             <div class="inputbox-body">
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { X } from 'lucide-vue-next'
+import { XIcon } from 'lucide-vue-next'
 import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -165,7 +165,6 @@ export default {
   align-items: center;
   padding: 1rem;
   background: rgb(0 0 0 / 40%);
-  backdrop-filter: blur(4px);
 }
 
 /* Container */
@@ -224,7 +223,7 @@ export default {
 
 /* Body */
 .inputbox-body {
-  padding: 2rem 2rem 1.5rem;
+  padding: 1rem 1rem 0.5rem;
 }
 
 .inputbox-title {
diff --git a/src/renderer/components/css/ImageProcessSetting.css b/src/renderer/components/css/ImageProcessSetting.css
index 779925d1..ba85d62b 100644
--- a/src/renderer/components/css/ImageProcessSetting.css
+++ b/src/renderer/components/css/ImageProcessSetting.css
@@ -856,4 +856,4 @@ small {
 :root.dark small,
 :root.auto.dark small {
   background: var(--color-surface);
-}
\ No newline at end of file
+}
diff --git a/src/renderer/components/ui/ConfirmMessageBox.vue b/src/renderer/components/ui/ConfirmMessageBox.vue
index ba86b114..209d19a2 100644
--- a/src/renderer/components/ui/ConfirmMessageBox.vue
+++ b/src/renderer/components/ui/ConfirmMessageBox.vue
@@ -147,7 +147,6 @@ export default {
   align-items: center;
   padding: 1rem;
   background: rgb(0 0 0 / 40%);
-  backdrop-filter: blur(4px);
 }
 
 /* Container */
diff --git a/src/renderer/pages/css/UploaderConfigPage.css b/src/renderer/pages/css/UploaderConfigPage.css
index bb3672b4..5d728c0c 100644
--- a/src/renderer/pages/css/UploaderConfigPage.css
+++ b/src/renderer/pages/css/UploaderConfigPage.css
@@ -1,606 +1,605 @@
-/* Page Container */
-.config-page {
-  position: relative;
-  overflow: hidden auto;
-  min-height: 100vh;
-  background: var(--color-background);
-}
-
-/* Ambient Background Effect */
-.ambient-bg {
-  position: fixed;
-  top: -50%;
-  left: -50%;
-  z-index: 0;
-  width: 200%;
-  height: 200%;
-  background:
-    radial-gradient(circle at 20% 20%, rgb(var(--accent-rgb) / 8%) 0%, transparent 50%),
-    radial-gradient(circle at 80% 80%, rgb(var(--accent-rgb) / 5%) 0%, transparent 50%),
-    radial-gradient(circle at 40% 60%, rgb(59 130 246 / 5%) 0%, transparent 40%);
-  pointer-events: none;
-  animation: ambient-drift 20s ease-in-out infinite;
-}
-
-@keyframes ambient-drift {
-  0%,
-  100% {
-    transform: translate(0, 0) rotate(0deg);
-  }
-
-  25% {
-    transform: translate(2%, 1%) rotate(1deg);
-  }
-
-  50% {
-    transform: translate(-1%, 2%) rotate(-1deg);
-  }
-
-  75% {
-    transform: translate(1%, -1%) rotate(0.5deg);
-  }
-}
-
-/* Main Container */
-.config-container {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  margin: 0 auto;
-  padding: 2rem;
-  max-width: 1400px;
-  flex-direction: column;
-  gap: 2rem;
-}
-
-/* ============================================
-   Hero Header Section
-   ============================================ */
-.page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid rgb(var(--accent-rgb) / 15%);
-  border-radius: 20px;
-  padding: 1.75rem 2rem;
-  background: linear-gradient(
-    135deg,
-    rgb(var(--accent-rgb) / 8%) 0%,
-    var(--color-surface) 50%,
-    rgb(var(--accent-rgb) / 5%) 100%
-  );
-  backdrop-filter: blur(10px);
-  box-shadow:
-    0 4px 24px rgb(0 0 0 / 8%),
-    0 1px 2px rgb(0 0 0 / 4%),
-    inset 0 1px 0 rgb(255 255 255 / 5%);
-  flex-wrap: wrap;
-  gap: 1.5rem;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.header-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 14px;
-  width: 56px;
-  height: 56px;
-  color: var(--color-accent);
-  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 20%) 0%, rgb(var(--accent-rgb) / 10%) 100%);
-  box-shadow:
-    0 4px 12px rgb(var(--accent-rgb) / 20%),
-    inset 0 1px 0 rgb(255 255 255 / 10%);
-}
-
-.header-text {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.page-title {
-  margin: 0;
-  font-size: 1.625rem;
-  font-weight: 700;
-  color: var(--color-text-primary);
-  letter-spacing: -0.025em;
-}
-
-.page-subtitle {
-  margin: 0;
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-}
-
-.header-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-/* ============================================
-   Button Styles
-   ============================================ */
-.btn {
-  position: relative;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  border: none;
-  border-radius: 12px;
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 600;
-  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.btn-primary {
-  color: white;
-  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
-  box-shadow:
-    0 4px 14px rgb(var(--accent-rgb) / 35%),
-    0 2px 4px rgb(0 0 0 / 10%),
-    inset 0 1px 0 rgb(255 255 255 / 15%);
-}
-
-.btn-primary:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow:
-    0 8px 24px rgb(var(--accent-rgb) / 45%),
-    0 4px 8px rgb(0 0 0 / 15%),
-    inset 0 1px 0 rgb(255 255 255 / 20%);
-}
-
-.btn-primary:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-.btn-primary:disabled {
-  color: var(--color-text-secondary);
-  background: var(--color-border);
-  opacity: 0.6;
-  box-shadow: none;
-  cursor: not-allowed;
-}
-
-.btn-glow::before {
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 20%) 50%, transparent 100%);
-  transition: left 0.5s ease;
-  content: '';
-}
-
-.btn-glow:hover:not(:disabled)::before {
-  left: 100%;
-}
-
-/* ============================================
-   Main Content Area
-   ============================================ */
-.main-content {
-  flex: 1;
-}
-
-/* Config Grid */
-.config-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.25rem;
-}
-
-/* ============================================
-   Config Cards
-   ============================================ */
-.config-card {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: 16px;
-  padding: 1.25rem;
-  min-height: 180px;
-  background: var(--color-surface);
-  box-shadow:
-    0 2px 8px rgb(0 0 0 / 4%),
-    0 1px 2px rgb(0 0 0 / 6%);
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
-  animation-delay: var(--delay, 0ms);
-  flex-direction: column;
-  cursor: pointer;
-}
-
-@keyframes card-enter {
-  from {
-    opacity: 0;
-    transform: translateY(20px) scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-.config-card:hover {
-  border-color: var(--accent-rgb);
-  box-shadow:
-    0 12px 32px rgb(0 0 0 / 10%),
-    0 4px 12px rgb(0 0 0 / 6%),
-    0 0 0 1px rgb(var(--accent-rgb) / 10%);
-}
-
-.config-card:hover .card-glow {
-  opacity: 1;
-}
-
-.config-card:hover .card-actions {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-/* Active State */
-.config-card.is-active {
-  border-color: var(--color-success);
-  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 6%) 0%, var(--color-surface) 100%);
-  box-shadow:
-    0 4px 16px rgb(var(--accent-rgb) / 15%),
-    0 2px 4px rgb(0 0 0 / 6%),
-    inset 0 0 0 1px rgb(var(--accent-rgb) / 10%);
-}
-
-/* Card Glow Effect */
-.card-glow {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(circle at 50% 0%, rgb(var(--accent-rgb) / 8%) 0%, transparent 70%);
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-}
-
-/* Active Indicator */
-.active-indicator {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 2;
-}
-
-.indicator-dot {
-  border-radius: 50%;
-  width: 10px;
-  height: 10px;
-  background: var(--color-accent);
-  box-shadow: 0 0 12px var(--color-accent);
-  animation: pulse-dot 2s ease-in-out infinite;
-}
-
-@keyframes pulse-dot {
-  0%,
-  100% {
-    transform: scale(1);
-    box-shadow: 0 0 12px var(--color-accent);
-  }
-
-  50% {
-    transform: scale(1.1);
-    box-shadow: 0 0 20px var(--color-accent);
-  }
-}
-
-/* Card Header */
-.config-card .card-header {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 1rem;
-}
-
-.config-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 10px;
-  width: 40px;
-  height: 40px;
-  color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 12%);
-  transition: all 0.25s ease;
-}
-
-.config-card:hover .config-icon {
-  background: rgb(var(--accent-rgb) / 18%);
-  transform: scale(1.05);
-}
-
-.config-card.is-active .config-icon {
-  color: white;
-  background: var(--color-accent);
-  box-shadow: 0 4px 12px rgb(var(--accent-rgb) / 40%);
-}
-
-/* Card Actions */
-.config-card .card-actions {
-  display: flex;
-  opacity: 0;
-  transform: translateY(-4px);
-  transition: all 0.25s ease;
-  gap: 0.375rem;
-}
-
-.config-card.is-active .card-actions {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.action-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: 8px;
-  width: 30px;
-  height: 30px;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-  transition: all 0.2s ease;
-  cursor: pointer;
-}
-
-.action-btn:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 10%);
-  transform: scale(1.08);
-}
-
-.action-btn-danger:hover:not(.disabled) {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
-  background: rgb(239 68 68 / 10%);
-}
-
-.action-btn.disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-  pointer-events: none;
-}
-
-/* Card Body */
-.card-body {
-  position: relative;
-  z-index: 1;
-  flex: 1;
-}
-
-.config-name {
-  margin: 0 0 0.5rem;
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  line-height: 1.4;
-  letter-spacing: -0.01em;
-}
-
-.config-meta {
-  display: flex;
-  align-items: center;
-  font-size: 0.8rem;
-  color: var(--color-text-tertiary);
-  gap: 0.375rem;
-}
-
-/* Card Footer */
-.card-footer {
-  position: relative;
-  z-index: 1;
-  margin-top: auto;
-  padding-top: 1rem;
-}
-
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: 20px;
-  padding: 0.375rem 0.75rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  transition: all 0.25s ease;
-  gap: 0.375rem;
-}
-
-.status-badge.active {
-  color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 15%);
-}
-
-.status-badge.inactive {
-  color: var(--color-text-tertiary);
-  background: var(--color-surface-elevated);
-}
-
-.config-card:hover .status-badge.inactive {
-  color: var(--color-text-secondary);
-  background: rgb(var(--accent-rgb) / 8%);
-}
-
-/* ============================================
-   Add New Config Card
-   ============================================ */
-.config-card-add {
-  justify-content: center;
-  align-items: center;
-  border: 2px dashed var(--color-border);
-  background: var(--color-surface-elevated);
-}
-
-.config-card-add:hover {
-  border-style: solid;
-  border-color: var(--color-accent);
-  background: var(--color-surface);
-}
-
-.add-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  transition: all 0.25s ease;
-  gap: 0.75rem;
-}
-
-.add-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 2px dashed var(--color-border);
-  border-radius: 14px;
-  width: 56px;
-  height: 56px;
-  color: var(--color-text-tertiary);
-  background: var(--color-surface);
-  transition: all 0.3s ease;
-}
-
-.config-card-add:hover .add-icon {
-  border-style: solid;
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: rgb(var(--accent-rgb) / 10%);
-  transform: scale(1.05) rotate(90deg);
-}
-
-.add-text {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.add-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  transition: color 0.25s ease;
-}
-
-.config-card-add:hover .add-title {
-  color: var(--color-accent);
-}
-
-.add-hint {
-  font-size: 0.8rem;
-  color: var(--color-text-tertiary);
-}
-
-/* ============================================
-   Transition Group Animations
-   ============================================ */
-.config-list-enter-active {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.config-list-leave-active {
-  position: absolute;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.config-list-enter-from {
-  opacity: 0;
-  transform: translateY(20px) scale(0.9);
-}
-
-.config-list-leave-to {
-  opacity: 0;
-  transform: scale(0.9);
-}
-
-.config-list-move {
-  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* ============================================
-   Responsive Design
-   ============================================ */
-@media (width <= 768px) {
-  .config-container {
-    padding: 1rem;
-    gap: 1.25rem;
-  }
-
-  .page-header {
-    align-items: stretch;
-    border-radius: 16px;
-    padding: 1.25rem;
-    flex-direction: column;
-  }
-
-  .header-content {
-    justify-content: center;
-    text-align: center;
-    flex-direction: column;
-  }
-
-  .header-icon {
-    width: 48px;
-    height: 48px;
-  }
-
-  .page-title {
-    font-size: 1.375rem;
-  }
-
-  .header-actions {
-    justify-content: center;
-  }
-
-  .config-grid {
-    grid-template-columns: 1fr;
-    gap: 1rem;
-  }
-
-  .config-card {
-    min-height: 160px;
-  }
-
-  .config-card .card-actions {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (width >= 1200px) {
-  .config-container {
-    padding: 2.5rem 3rem;
-  }
-
-  .config-grid {
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 1.5rem;
-  }
-}
-
-@media (width >= 1600px) {
-  .config-grid {
-    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-  }
-}
\ No newline at end of file
+/* Page Container */
+.config-page {
+  position: relative;
+  overflow: hidden auto;
+  min-height: 100vh;
+  background: var(--color-background);
+}
+
+/* Ambient Background Effect */
+.ambient-bg {
+  position: fixed;
+  top: -50%;
+  left: -50%;
+  z-index: 0;
+  width: 200%;
+  height: 200%;
+  background:
+    radial-gradient(circle at 20% 20%, rgb(var(--accent-rgb) / 8%) 0%, transparent 50%),
+    radial-gradient(circle at 80% 80%, rgb(var(--accent-rgb) / 5%) 0%, transparent 50%),
+    radial-gradient(circle at 40% 60%, rgb(59 130 246 / 5%) 0%, transparent 40%);
+  pointer-events: none;
+  animation: ambient-drift 20s ease-in-out infinite;
+}
+
+@keyframes ambient-drift {
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  25% {
+    transform: translate(2%, 1%) rotate(1deg);
+  }
+
+  50% {
+    transform: translate(-1%, 2%) rotate(-1deg);
+  }
+
+  75% {
+    transform: translate(1%, -1%) rotate(0.5deg);
+  }
+}
+
+/* Main Container */
+.config-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  margin: 0 auto;
+  padding: 2rem;
+  max-width: 1400px;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+/* ============================================
+   Hero Header Section
+   ============================================ */
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid rgb(var(--accent-rgb) / 15%);
+  border-radius: 20px;
+  padding: 1.75rem 2rem;
+  background: linear-gradient(
+    135deg,
+    rgb(var(--accent-rgb) / 8%) 0%,
+    var(--color-surface) 50%,
+    rgb(var(--accent-rgb) / 5%) 100%
+  );
+  box-shadow:
+    0 4px 24px rgb(0 0 0 / 8%),
+    0 1px 2px rgb(0 0 0 / 4%),
+    inset 0 1px 0 rgb(255 255 255 / 5%);
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 14px;
+  width: 56px;
+  height: 56px;
+  color: var(--color-accent);
+  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 20%) 0%, rgb(var(--accent-rgb) / 10%) 100%);
+  box-shadow:
+    0 4px 12px rgb(var(--accent-rgb) / 20%),
+    inset 0 1px 0 rgb(255 255 255 / 10%);
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.625rem;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  letter-spacing: -0.025em;
+}
+
+.page-subtitle {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+/* ============================================
+   Button Styles
+   ============================================ */
+.btn {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border: none;
+  border-radius: 12px;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 600;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.btn-primary {
+  color: white;
+  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
+  box-shadow:
+    0 4px 14px rgb(var(--accent-rgb) / 35%),
+    0 2px 4px rgb(0 0 0 / 10%),
+    inset 0 1px 0 rgb(255 255 255 / 15%);
+}
+
+.btn-primary:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow:
+    0 8px 24px rgb(var(--accent-rgb) / 45%),
+    0 4px 8px rgb(0 0 0 / 15%),
+    inset 0 1px 0 rgb(255 255 255 / 20%);
+}
+
+.btn-primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn-primary:disabled {
+  color: var(--color-text-secondary);
+  background: var(--color-border);
+  opacity: 0.6;
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
+.btn-glow::before {
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent 0%, rgb(255 255 255 / 20%) 50%, transparent 100%);
+  transition: left 0.5s ease;
+  content: '';
+}
+
+.btn-glow:hover:not(:disabled)::before {
+  left: 100%;
+}
+
+/* ============================================
+   Main Content Area
+   ============================================ */
+.main-content {
+  flex: 1;
+}
+
+/* Config Grid */
+.config-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.25rem;
+}
+
+/* ============================================
+   Config Cards
+   ============================================ */
+.config-card {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: 16px;
+  padding: 1.25rem;
+  min-height: 180px;
+  background: var(--color-surface);
+  box-shadow:
+    0 2px 8px rgb(0 0 0 / 4%),
+    0 1px 2px rgb(0 0 0 / 6%);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: card-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1) backwards;
+  animation-delay: var(--delay, 0ms);
+  flex-direction: column;
+  cursor: pointer;
+}
+
+@keyframes card-enter {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.config-card:hover {
+  border-color: var(--accent-rgb);
+  box-shadow:
+    0 12px 32px rgb(0 0 0 / 10%),
+    0 4px 12px rgb(0 0 0 / 6%),
+    0 0 0 1px rgb(var(--accent-rgb) / 10%);
+}
+
+.config-card:hover .card-glow {
+  opacity: 1;
+}
+
+.config-card:hover .card-actions {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Active State */
+.config-card.is-active {
+  border-color: var(--color-success);
+  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 6%) 0%, var(--color-surface) 100%);
+  box-shadow:
+    0 4px 16px rgb(var(--accent-rgb) / 15%),
+    0 2px 4px rgb(0 0 0 / 6%),
+    inset 0 0 0 1px rgb(var(--accent-rgb) / 10%);
+}
+
+/* Card Glow Effect */
+.card-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle at 50% 0%, rgb(var(--accent-rgb) / 8%) 0%, transparent 70%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+}
+
+/* Active Indicator */
+.active-indicator {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 2;
+}
+
+.indicator-dot {
+  border-radius: 50%;
+  width: 10px;
+  height: 10px;
+  background: var(--color-accent);
+  box-shadow: 0 0 12px var(--color-accent);
+  animation: pulse-dot 2s ease-in-out infinite;
+}
+
+@keyframes pulse-dot {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 12px var(--color-accent);
+  }
+
+  50% {
+    transform: scale(1.1);
+    box-shadow: 0 0 20px var(--color-accent);
+  }
+}
+
+/* Card Header */
+.config-card .card-header {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+
+.config-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 40px;
+  height: 40px;
+  color: var(--color-accent);
+  background: rgb(var(--accent-rgb) / 12%);
+  transition: all 0.25s ease;
+}
+
+.config-card:hover .config-icon {
+  background: rgb(var(--accent-rgb) / 18%);
+  transform: scale(1.05);
+}
+
+.config-card.is-active .config-icon {
+  color: white;
+  background: var(--color-accent);
+  box-shadow: 0 4px 12px rgb(var(--accent-rgb) / 40%);
+}
+
+/* Card Actions */
+.config-card .card-actions {
+  display: flex;
+  opacity: 0;
+  transform: translateY(-4px);
+  transition: all 0.25s ease;
+  gap: 0.375rem;
+}
+
+.config-card.is-active .card-actions {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.action-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  width: 30px;
+  height: 30px;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.action-btn:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: rgb(var(--accent-rgb) / 10%);
+  transform: scale(1.08);
+}
+
+.action-btn-danger:hover:not(.disabled) {
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+  background: rgb(239 68 68 / 10%);
+}
+
+.action-btn.disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+/* Card Body */
+.card-body {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+}
+
+.config-name {
+  margin: 0 0 0.5rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.config-meta {
+  display: flex;
+  align-items: center;
+  font-size: 0.8rem;
+  color: var(--color-text-tertiary);
+  gap: 0.375rem;
+}
+
+/* Card Footer */
+.card-footer {
+  position: relative;
+  z-index: 1;
+  margin-top: auto;
+  padding-top: 1rem;
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 20px;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  transition: all 0.25s ease;
+  gap: 0.375rem;
+}
+
+.status-badge.active {
+  color: var(--color-accent);
+  background: rgb(var(--accent-rgb) / 15%);
+}
+
+.status-badge.inactive {
+  color: var(--color-text-tertiary);
+  background: var(--color-surface-elevated);
+}
+
+.config-card:hover .status-badge.inactive {
+  color: var(--color-text-secondary);
+  background: rgb(var(--accent-rgb) / 8%);
+}
+
+/* ============================================
+   Add New Config Card
+   ============================================ */
+.config-card-add {
+  justify-content: center;
+  align-items: center;
+  border: 2px dashed var(--color-border);
+  background: var(--color-surface-elevated);
+}
+
+.config-card-add:hover {
+  border-style: solid;
+  border-color: var(--color-accent);
+  background: var(--color-surface);
+}
+
+.add-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: all 0.25s ease;
+  gap: 0.75rem;
+}
+
+.add-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 2px dashed var(--color-border);
+  border-radius: 14px;
+  width: 56px;
+  height: 56px;
+  color: var(--color-text-tertiary);
+  background: var(--color-surface);
+  transition: all 0.3s ease;
+}
+
+.config-card-add:hover .add-icon {
+  border-style: solid;
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: rgb(var(--accent-rgb) / 10%);
+  transform: scale(1.05) rotate(90deg);
+}
+
+.add-text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.add-title {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  transition: color 0.25s ease;
+}
+
+.config-card-add:hover .add-title {
+  color: var(--color-accent);
+}
+
+.add-hint {
+  font-size: 0.8rem;
+  color: var(--color-text-tertiary);
+}
+
+/* ============================================
+   Transition Group Animations
+   ============================================ */
+.config-list-enter-active {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.config-list-leave-active {
+  position: absolute;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.config-list-enter-from {
+  opacity: 0;
+  transform: translateY(20px) scale(0.9);
+}
+
+.config-list-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.config-list-move {
+  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ============================================
+   Responsive Design
+   ============================================ */
+@media (width <= 768px) {
+  .config-container {
+    padding: 1rem;
+    gap: 1.25rem;
+  }
+
+  .page-header {
+    align-items: stretch;
+    border-radius: 16px;
+    padding: 1.25rem;
+    flex-direction: column;
+  }
+
+  .header-content {
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+  }
+
+  .header-icon {
+    width: 48px;
+    height: 48px;
+  }
+
+  .page-title {
+    font-size: 1.375rem;
+  }
+
+  .header-actions {
+    justify-content: center;
+  }
+
+  .config-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .config-card {
+    min-height: 160px;
+  }
+
+  .config-card .card-actions {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (width >= 1200px) {
+  .config-container {
+    padding: 2.5rem 3rem;
+  }
+
+  .config-grid {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+  }
+}
+
+@media (width >= 1600px) {
+  .config-grid {
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+  }
+}
diff --git a/src/renderer/pages/picbeds/Picbeds.css b/src/renderer/pages/picbeds/Picbeds.css
index f7797668..ebebdc91 100644
--- a/src/renderer/pages/picbeds/Picbeds.css
+++ b/src/renderer/pages/picbeds/Picbeds.css
@@ -66,7 +66,6 @@
     0 4px 24px rgb(0 0 0 / 8%),
     0 1px 2px rgb(0 0 0 / 4%),
     inset 0 1px 0 rgb(255 255 255 / 5%);
-  backdrop-filter: blur(10px);
   flex-wrap: wrap;
   gap: 1.5rem;
 }
@@ -442,7 +441,6 @@
   justify-content: center;
   align-items: center;
   background: rgb(0 0 0 / 60%);
-  backdrop-filter: blur(8px);
 }
 
 .loading-content {
@@ -583,4 +581,4 @@
 .dropdown-item:focus-visible {
   outline: 1px solid var(--color-accent);
   outline-offset: 2px;
-}
\ No newline at end of file
+}