diff --git a/src/renderer/manage/pages/css/LoginPage.css b/src/renderer/manage/pages/css/LoginPage.css
index f806e377..e391b3ae 100644
--- a/src/renderer/manage/pages/css/LoginPage.css
+++ b/src/renderer/manage/pages/css/LoginPage.css
@@ -1,743 +1,743 @@
-/* Container */
-.login-container {
-  padding: 1rem;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  min-height: 100vh;
-  box-sizing: border-box;
-  overflow-y: auto;
-}
-
-/* Card Base */
-.login-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  transition: var(--transition-medium);
-  box-shadow: var(--shadow-sm);
-}
-
-.login-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-border);
-}
-
-/* Header Card */
-.header-card .card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--color-border-secondary);
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-}
-
-.header-icon {
-  color: var(--color-blue-common);
-  display: flex;
-  align-items: center;
-}
-
-.header-content h1 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-  letter-spacing: -0.025em;
-}
-
-.header-content p {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-/* Action Button Base */
-.action-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: var(--transition-fast);
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.action-button:hover {
-  background: var(--color-background-secondary);
-  border-color: var(--color-border-darker);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.action-button:active {
-  transform: translateY(0);
-  box-shadow: none;
-}
-
-.action-button.primary {
-  background: var(--color-blue-common);
-  color: white;
-  border-color: var(--color-blue-common);
-}
-
-.action-button.primary:hover {
-  background: var(--color-accent);
-  border-color: var(--color-accent);
-}
-
-.action-button.secondary {
-  background: var(--color-background-secondary);
-  color: var(--color-text-secondary);
-}
-
-.action-button.danger {
-  background: var(--color-danger);
-  color: white;
-  border-color: var(--color-danger);
-}
-
-.action-button.danger:hover {
-  background: var(--color-danger);
-  border-color: var(--color-danger);
-}
-
-/* Tabs */
-.tabs-card {
-  border-radius: var(--radius-lg);
-}
-
-.tabs-container {
-  padding: 0.75rem 1rem;
-  overflow: hidden;
-}
-
-.tabs-nav-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.tabs-nav {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  width: 100%;
-  align-items: center;
-}
-
-.tab-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  background: var(--color-background-secondary);
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-  transition: var(--transition-fast);
-  cursor: pointer;
-  white-space: nowrap;
-  min-width: fit-content;
-  flex: 0 0 auto;
-}
-
-.tab-button:hover {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-border);
-  color: var(--color-text-primary);
-}
-
-.tab-button.active {
-  background: var(--color-primary);
-  color: white;
-  border-color: var(--color-primary);
-}
-
-.tab-icon {
-  width: 16px;
-  height: 16px;
-  object-fit: contain;
-}
-
-/* Content */
-.content-card {
-  flex: 1;
-}
-
-.tab-content {
-  padding: 1.5rem;
-}
-
-/* Config List */
-.config-list-container {
-  width: 100%;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 3rem 1rem;
-  color: var(--color-text-secondary);
-}
-
-.empty-icon {
-  color: var(--color-text-tertiary);
-  margin-bottom: 1rem;
-}
-
-.empty-state h3 {
-  margin: 0 0 0.5rem 0;
-  color: var(--color-text-primary);
-  font-size: 1.25rem;
-  font-weight: 600;
-}
-
-.empty-state p {
-  margin: 0;
-  font-size: 0.875rem;
-}
-
-.config-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.5rem;
-}
-
-.config-item {
-  background: var(--color-background-secondary);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  padding: 1.25rem;
-  transition: var(--transition-medium);
-}
-
-.config-item:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-sm);
-}
-
-.config-header {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.config-icon {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-}
-
-.config-info {
-  flex: 1;
-}
-
-.config-alias {
-  margin: 0 0 0.25rem 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.config-type {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.config-details {
-  margin-bottom: 1rem;
-}
-
-.details-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
-  border: none;
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.details-button:hover {
-  background: var(--color-background-secondary);
-  color: var(--color-text-primary);
-}
-
-.details-button .rotated {
-  transform: rotate(180deg);
-}
-
-.config-table {
-  margin-top: 0.75rem;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-
-.table-row {
-  display: flex;
-  border-bottom: 1px solid var(--color-border-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.table-row:hover {
-  background: var(--color-surface-elevated);
-}
-
-.table-row:last-child {
-  border-bottom: none;
-}
-
-.table-key,
-.table-value {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-}
-
-.table-key {
-  background: var(--color-background-secondary);
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  width: 120px;
-  flex-shrink: 0;
-}
-
-.table-value {
-  flex: 1;
-  color: var(--color-text-primary);
-  word-break: break-all;
-}
-
-.config-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-/* PicBed Config */
-.picbed-config-container {
-  width: 100%;
-}
-
-.picbed-config {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.info-section {
-  margin-bottom: 2rem;
-}
-
-.info-card {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  padding: 1rem;
-  border-radius: var(--radius-md);
-  margin-bottom: 1rem;
-}
-
-.info-card.primary {
-  background: rgba(99, 102, 241, 0.1);
-  border: 1px solid rgba(99, 102, 241, 0.2);
-  color: var(--color-primary);
-}
-
-.info-card.reference {
-  background: rgba(107, 114, 128, 0.1);
-  border: 1px solid rgba(107, 114, 128, 0.2);
-  color: var(--color-text-secondary);
-}
-
-.info-card p {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.link-button {
-  color: var(--color-primary);
-  text-decoration: underline;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: inherit;
-  padding: 0;
-}
-
-.link-button:hover {
-  color: var(--color-primary-hover);
-}
-
-/* Form */
-.config-form {
-  margin-bottom: 2rem;
-}
-
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-bottom: 0.5rem;
-}
-
-.tooltip-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border: none;
-  border-radius: 50%;
-  background: var(--color-background-secondary);
-  color: var(--color-text-tertiary);
-  cursor: help;
-  transition: var(--transition-fast);
-}
-
-.tooltip-button:hover {
-  background: var(--color-border);
-  color: var(--color-text-secondary);
-}
-
-.form-input,
-.form-select {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-background-primary);
-  color: var(--color-text-primary);
-  font-size: 0.875rem;
-  transition: var(--transition-fast);
-}
-
-.form-input:focus,
-.form-select:focus {
-  outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
-}
-
-.form-input:disabled {
-  background: var(--color-background-secondary);
-  color: var(--color-text-tertiary);
-  cursor: not-allowed;
-}
-
-/* Custom Switch */
-.custom-switch {
-  position: relative;
-  display: inline-block;
-  width: 48px;
-  height: 24px;
-}
-
-.custom-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.switch-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: var(--color-border);
-  transition: var(--transition-fast);
-  border-radius: 24px;
-}
-
-.switch-slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: var(--transition-fast);
-  border-radius: 50%;
-}
-
-input:checked + .switch-slider {
-  background-color: var(--color-success);
-}
-
-input:checked + .switch-slider:before {
-  transform: translateX(24px);
-}
-
-/* Action Section */
-.action-section {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  flex-wrap: wrap;
-}
-
-.import-section {
-  flex: 1;
-}
-
-.main-actions {
-  display: flex;
-  gap: 0.75rem;
-}
-
-/* Dropdown */
-.dropdown-container {
-  position: relative;
-}
-
-.dropdown-trigger {
-  justify-content: space-between;
-  min-width: 200px;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background: var(--color-surface-elevated);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  z-index: 50;
-  margin-top: 0.25rem;
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.dropdown-item {
-  display: block;
-  width: 100%;
-  padding: 0.75rem;
-  border: none;
-  background: none;
-  color: var(--color-text-primary);
-  font-size: 0.875rem;
-  text-align: left;
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.dropdown-item:hover {
-  background: var(--color-background-secondary);
-}
-
-/* Config Table Section */
-.config-table-section {
-  margin-top: 2rem;
-}
-
-.config-table-section h3 {
-  margin: 0 0 1rem 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.responsive-table {
-  overflow-x: auto;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-}
-
-.config-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-}
-
-.config-table th {
-  background: var(--color-background-secondary);
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  padding: 0.75rem;
-  text-align: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-}
-
-.config-table td {
-  padding: 0.75rem;
-  text-align: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.config-table td:hover {
-  background: var(--color-surface-elevated);
-}
-
-.config-table tr:last-child td {
-  border-bottom: none;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .login-container {
-    padding: 0.75rem;
-    gap: 1rem;
-  }
-
-  .header-card .card-header {
-    padding: 0.75rem 1rem;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-
-  .header-actions {
-    width: 100%;
-    justify-content: flex-end;
-  }
-
-  .tabs-container {
-    padding: 0.5rem 0.75rem;
-  }
-
-  .tabs-nav {
-    gap: 0.375rem;
-  }
-
-  .tab-button {
-    padding: 0.5rem 0.75rem;
-    font-size: 0.8rem;
-    max-width: 150px;
-  }
-
-  .tab-icon {
-    width: 14px;
-    height: 14px;
-  }
-
-  .config-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .action-section {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .main-actions {
-    width: 100%;
-    justify-content: stretch;
-  }
-
-  .main-actions .action-button {
-    flex: 1;
-  }
-}
-
-@media (max-width: 480px) {
-  .login-container {
-    padding: 0.5rem;
-  }
-
-  .tabs-container {
-    padding: 0.5rem;
-  }
-
-  .tab-button {
-    padding: 0.375rem 0.5rem;
-    font-size: 0.75rem;
-    max-width: 120px;
-  }
-
-  .tab-button span {
-    display: none;
-  }
-
-  .tab-button.active span {
-    display: inline;
-  }
-}
-
-/* Form validation styles */
-.form-group.has-error .form-label {
-  color: var(--color-error);
-}
-
-.form-input.error,
-.form-select.error {
-  border-color: var(--color-error);
-  background-color: var(--color-error-surface);
-}
-
-.form-input.error:focus,
-.form-select.error:focus {
-  border-color: var(--color-error);
-  box-shadow: 0 0 0 2px var(--color-error-surface);
-}
-
-.required-marker {
-  color: var(--color-error);
-  margin-left: 0.25rem;
-  font-size: 1rem;
-  font-weight: 600;
-}
-
-.error-message {
-  color: var(--color-error);
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.error-message::before {
-  content: "⚠";
-  font-size: 0.875rem;
+/* Container */
+.login-container {
+  padding: 1rem;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  min-height: 100vh;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+/* Card Base */
+.login-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  transition: var(--transition-medium);
+  box-shadow: var(--shadow-sm);
+}
+
+.login-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border);
+}
+
+/* Header Card */
+.header-card .card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border-secondary);
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+}
+
+.header-icon {
+  color: var(--color-blue-common);
+  display: flex;
+  align-items: center;
+}
+
+.header-content h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+  letter-spacing: -0.025em;
+}
+
+.header-content p {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+/* Action Button Base */
+.action-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: var(--transition-fast);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.action-button:hover {
+  background: var(--color-background-secondary);
+  border-color: var(--color-border-darker);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.action-button:active {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+.action-button.primary {
+  background: var(--color-blue-common);
+  color: white;
+  border-color: var(--color-blue-common);
+}
+
+.action-button.primary:hover {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.action-button.secondary {
+  background: var(--color-background-secondary);
+  color: var(--color-text-secondary);
+}
+
+.action-button.danger {
+  background: var(--color-danger);
+  color: white;
+  border-color: var(--color-danger);
+}
+
+.action-button.danger:hover {
+  background: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+/* Tabs */
+.tabs-card {
+  border-radius: var(--radius-lg);
+}
+
+.tabs-container {
+  padding: 0.75rem 1rem;
+  overflow: hidden;
+}
+
+.tabs-nav-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.tabs-nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  width: 100%;
+  align-items: center;
+}
+
+.tab-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-md);
+  background: var( --color-surface-elevated);
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: var(--transition-fast);
+  cursor: pointer;
+  white-space: nowrap;
+  min-width: fit-content;
+  flex: 0 0 auto;
+}
+
+.tab-button:hover {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+.tab-button.active {
+  background: var(--color-primary);
+  color: white;
+  border-color: var(--color-primary);
+}
+
+.tab-icon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+/* Content */
+.content-card {
+  flex: 1;
+}
+
+.tab-content {
+  padding: 1.5rem;
+}
+
+/* Config List */
+.config-list-container {
+  width: 100%;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--color-text-secondary);
+}
+
+.empty-icon {
+  color: var(--color-text-tertiary);
+  margin-bottom: 1rem;
+}
+
+.empty-state h3 {
+  margin: 0 0 0.5rem 0;
+  color: var(--color-text-primary);
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.config-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 1.5rem;
+}
+
+.config-item {
+  background: var( --color-surface-elevated);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem;
+  transition: var(--transition-medium);
+}
+
+.config-item:hover {
+  border-color: var(--color-border);
+  box-shadow: var(--shadow-sm);
+}
+
+.config-header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.config-icon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.config-info {
+  flex: 1;
+}
+
+.config-alias {
+  margin: 0 0 0.25rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.config-type {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.config-details {
+  margin-bottom: 1rem;
+}
+
+.details-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.details-button:hover {
+  background: var(--color-background-secondary);
+  color: var(--color-text-primary);
+}
+
+.details-button .rotated {
+  transform: rotate(180deg);
+}
+
+.config-table {
+  margin-top: 0.75rem;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.table-row {
+  display: flex;
+  border-bottom: 1px solid var(--color-border-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.table-row:hover {
+  background: var(--color-surface-elevated);
+}
+
+.table-row:last-child {
+  border-bottom: none;
+}
+
+.table-key,
+.table-value {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.table-key {
+  background: var(--color-background-secondary);
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  width: 120px;
+  flex-shrink: 0;
+}
+
+.table-value {
+  flex: 1;
+  color: var(--color-text-primary);
+  word-break: break-all;
+}
+
+.config-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+/* PicBed Config */
+.picbed-config-container {
+  width: 100%;
+}
+
+.picbed-config {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.info-section {
+  margin-bottom: 2rem;
+}
+
+.info-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem;
+  border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+}
+
+.info-card.primary {
+  background: rgba(99, 102, 241, 0.1);
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  color: var(--color-primary);
+}
+
+.info-card.reference {
+  background: rgba(107, 114, 128, 0.1);
+  border: 1px solid rgba(107, 114, 128, 0.2);
+  color: var(--color-text-secondary);
+}
+
+.info-card p {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.link-button {
+  color: var(--color-primary);
+  text-decoration: underline;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: inherit;
+  padding: 0;
+}
+
+.link-button:hover {
+  color: var(--color-primary-hover);
+}
+
+/* Form */
+.config-form {
+  margin-bottom: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.tooltip-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-background-secondary);
+  color: var(--color-text-tertiary);
+  cursor: help;
+  transition: var(--transition-fast);
+}
+
+.tooltip-button:hover {
+  background: var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+.form-input,
+.form-select {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  transition: var(--transition-fast);
+}
+
+.form-input:focus,
+.form-select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.form-input:disabled {
+  background: var(--color-background-secondary);
+  color: var(--color-text-tertiary);
+  cursor: not-allowed;
+}
+
+/* Custom Switch */
+.custom-switch {
+  position: relative;
+  display: inline-block;
+  width: 48px;
+  height: 24px;
+}
+
+.custom-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-border);
+  transition: var(--transition-fast);
+  border-radius: 24px;
+}
+
+.switch-slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: var(--transition-fast);
+  border-radius: 50%;
+}
+
+input:checked + .switch-slider {
+  background-color: var(--color-success);
+}
+
+input:checked + .switch-slider:before {
+  transform: translateX(24px);
+}
+
+/* Action Section */
+.action-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+.import-section {
+  flex: 1;
+}
+
+.main-actions {
+  display: flex;
+  gap: 0.75rem;
+}
+
+/* Dropdown */
+.dropdown-container {
+  position: relative;
+}
+
+.dropdown-trigger {
+  justify-content: space-between;
+  min-width: 200px;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 50;
+  margin-top: 0.25rem;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  background: none;
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.dropdown-item:hover {
+  background: var(--color-background-secondary);
+}
+
+/* Config Table Section */
+.config-table-section {
+  margin-top: 2rem;
+}
+
+.config-table-section h3 {
+  margin: 0 0 1rem 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.responsive-table {
+  overflow-x: auto;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-md);
+}
+
+.config-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.config-table th {
+  background: var(--color-background-secondary);
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  padding: 0.75rem;
+  text-align: center;
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+
+.config-table td {
+  padding: 0.75rem;
+  text-align: center;
+  border-bottom: 1px solid var(--color-border-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.config-table td:hover {
+  background: var(--color-surface-elevated);
+}
+
+.config-table tr:last-child td {
+  border-bottom: none;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .login-container {
+    padding: 0.75rem;
+    gap: 1rem;
+  }
+
+  .header-card .card-header {
+    padding: 0.75rem 1rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: flex-end;
+  }
+
+  .tabs-container {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .tabs-nav {
+    gap: 0.375rem;
+  }
+
+  .tab-button {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.8rem;
+    max-width: 150px;
+  }
+
+  .tab-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .config-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .action-section {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .main-actions {
+    width: 100%;
+    justify-content: stretch;
+  }
+
+  .main-actions .action-button {
+    flex: 1;
+  }
+}
+
+@media (max-width: 480px) {
+  .login-container {
+    padding: 0.5rem;
+  }
+
+  .tabs-container {
+    padding: 0.5rem;
+  }
+
+  .tab-button {
+    padding: 0.375rem 0.5rem;
+    font-size: 0.75rem;
+    max-width: 120px;
+  }
+
+  .tab-button span {
+    display: none;
+  }
+
+  .tab-button.active span {
+    display: inline;
+  }
+}
+
+/* Form validation styles */
+.form-group.has-error .form-label {
+  color: var(--color-error);
+}
+
+.form-input.error,
+.form-select.error {
+  border-color: var(--color-error);
+  background-color: var(--color-error-surface);
+}
+
+.form-input.error:focus,
+.form-select.error:focus {
+  border-color: var(--color-error);
+  box-shadow: 0 0 0 2px var(--color-error-surface);
+}
+
+.required-marker {
+  color: var(--color-error);
+  margin-left: 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.error-message {
+  color: var(--color-error);
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.error-message::before {
+  content: "⚠";
+  font-size: 0.875rem;
 }
\ No newline at end of file
diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index 97db3abc..f1364643 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -1,1515 +1,1515 @@
-/* Global scrolling behavior */
-html, body {
-  overflow-x: hidden;
-}
-
-/* Custom Scrollbar Styles */
-.gallery-content::-webkit-scrollbar {
-  width: 8px;
-}
-
-.gallery-content::-webkit-scrollbar-track {
-  background: var(--color-surface-elevated);
-  border-radius: var(--radius-md);
-}
-
-.gallery-content::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: var(--radius-md);
-  transition: var(--transition-fast);
-}
-
-.gallery-content::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
-/* Container */
-.gallery-container {
-  padding: 1rem;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  height: 100vh;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-/* Card Base */
-.gallery-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  transition: var(--transition-medium);
-  box-shadow: var(--shadow-sm);
-}
-
-.gallery-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-border);
-}
-
-/* Header Card */
-.header-card .card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--color-border-secondary);
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-}
-
-.header-icon {
-  color: var(--color-blue-common);
-  display: flex;
-  align-items: center;
-}
-
-.header-content h1 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-  letter-spacing: -0.025em;
-}
-
-.header-content p {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.action-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  background: var(--color-blue-common);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
-}
-
-.action-button:hover {
-  background: var(--color-blue-common);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-/* View Mode Toggle */
-.view-mode-toggle {
-  position: relative;
-}
-
-.view-mode-toggle:hover {
-  background: var(--color-blue-common) !important;
-}
-
-.sync-delete-toggle {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.toggle-label {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-/* Custom Switch */
-.custom-switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-}
-
-.custom-switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.switch-slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #ccc;
-  transition: 0.3s;
-  border-radius: 24px;
-}
-
-.switch-slider:before {
-  position: absolute;
-  content: "";
-  height: 18px;
-  width: 18px;
-  left: 3px;
-  bottom: 3px;
-  background-color: white;
-  transition: 0.3s;
-  border-radius: 50%;
-}
-
-input:checked + .switch-slider {
-  background-color: var(--color-blue-common);
-}
-
-input:checked + .switch-slider:before {
-  transform: translateX(20px);
-}
-
-/* Filter Card */
-.filter-card {
-  border-radius: var(--radius-lg);
-}
-
-.filter-content {
-  padding: 1rem; /* Reduced from 1.25rem for compactness */
-}
-
-.filter-row {
-  display: flex;
-  gap: 0.75rem; /* Reduced from 1rem for more compact layout */
-  margin-bottom: 0.75rem; /* Reduced from 1rem */
-  flex-wrap: wrap;
-  align-items: flex-start;
-}
-
-.filter-row:last-child {
-  margin-bottom: 0;
-}
-
-.filter-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  min-width: 140px;
-  flex: 1 1 auto;
-  max-width: 220px;
-}
-
-.filter-label {
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-bottom: 0.125rem; 
-  line-height: 1.4;
-}
-
-/* Custom Select */
-.custom-select {
-  padding: 0.375rem 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  text-align: center;
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  font-size: 0.85rem;
-  transition: var(--transition-fast);
-  cursor: pointer;
-  width: 100%;
-  min-width: 0;
-  height: 28px;
-  line-height: 1.4;
-}
-
-.custom-select:focus {
-  outline: none;
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-/* Custom Multiselect */
-.custom-multiselect {
-  position: relative;
-}
-
-.multiselect-trigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0.375rem 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  height: 28px;
-  line-height: 1.4;
-}
-
-.multiselect-trigger:hover {
-  border-color: var(--color-blue-common);
-}
-
-.multiselect-trigger:focus,
-.multiselect-trigger.active {
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
-.multiselect-dropdown {
-  position: fixed;
-  padding: 0.375rem 0.5rem;
-  z-index: 1000;
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  max-height: 280px;
-  min-width: 200px;
-  overflow-y: auto;
-  margin-top: 2px;
-}
-
-.multiselect-option {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--color-surface);
-  gap: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.95rem;
-  line-height: 1.4;
-  min-height: unset;
-}
-
-.multiselect-option:hover {
-  background: var(--color-blue-common);
-}
-
-.multiselect-option input[type="checkbox"] {
-  margin: 0;
-}
-
-/* Date Range Picker */
-.date-range-picker {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-}
-
-.date-input {
-  padding: 0.375rem 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  font-size: 0.75rem;
-  transition: var(--transition-fast);
-  flex: 1;
-  min-width: 0;
-  height: 28px;
-  line-height: 1.2;
-}
-
-.date-input:focus {
-  outline: none;
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.date-separator {
-  color: var(--color-text-secondary);
-  font-weight: 500;
-  flex-shrink: 0;
-}
-
-/* Sort Dropdown */
-.sort-dropdown {
-  position: relative;
-}
-
-.sort-button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.25rem;
-  padding: 0.375rem 0.5rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  font-size: 0.85rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  width: 100%;
-  height: 28px;
-  line-height: 1.4;
-}
-
-.sort-button:hover {
-  border-color: var(--color-blue-common);
-}
-
-.sort-button:focus,
-.sort-button.active {
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-}
-
-.sort-options {
-  position: fixed;
-  z-index: 1000;
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-lg);
-  margin-top: 2px;
-  min-width: 160px;
-}
-
-.sort-option {
-  display: block;
-  width: 100%;
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  border: none;
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  font-size: 0.95rem;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  line-height: 1.4;
-  min-height: unset;
-}
-
-.sort-option:hover {
-  background: var(--color-blue-common);
-}
-
-/* Search Groups */
-.search-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  min-width: 180px;
-  flex: 1 1 auto;
-  max-width: 260px;
-}
-
-.search-input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.search-input {
-  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  font-size: 0.8rem;
-  transition: var(--transition-fast);
-  width: 100%;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.search-icon {
-  position: absolute;
-  left: 0.75rem;
-  color: var(--color-text-secondary);
-  z-index: 1;
-}
-
-.clear-button {
-  position: absolute;
-  right: 0.75rem;
-  background: none;
-  border: none;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  transition: var(--transition-fast);
-}
-
-.clear-button:hover {
-  color: var(--color-text-primary);
-}
-
-/* Action Buttons */
-.action-buttons {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: not-allowed;
-  transition: var(--transition-fast);
-  opacity: 0.5;
-}
-
-.action-btn.active {
-  cursor: pointer;
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.action-btn.active:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.copy-btn {
-  background: var(--color-blue-common);
-  color: white;
-}
-
-.copy-btn.active:hover {
-  background: var(--color-accent-hover);
-}
-
-.edit-btn {
-  background: var(--color-success);
-  color: white;
-}
-
-.edit-btn.active:hover {
-  background: #059669;
-}
-
-.delete-btn {
-  background: var(--color-danger);
-  color: white;
-}
-
-.delete-btn.active:hover {
-  background: var(--color-danger);
-}
-
-.select-btn {
-  background: var(--color-warning);
-  color: white;
-}
-
-.select-btn.active:hover {
-  background: #d97706;
-}
-
-/* Filter Slide Animation */
-.filter-slide-enter-active,
-.filter-slide-leave-active {
-  transition: all var(--transition-medium);
-  max-height: 300px;
-  overflow: hidden;
-}
-
-.filter-slide-enter-from,
-.filter-slide-leave-to {
-  max-height: 0;
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
-/* Gallery Content */
-.gallery-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 4rem 2rem;
-  text-align: center;
-}
-
-.empty-icon {
-  color: var(--color-text-secondary);
-  margin-bottom: 1rem;
-}
-
-.empty-state h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0 0 0.5rem 0;
-}
-
-.empty-state p {
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
-/* Gallery Grid */
-.gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 1.5rem;
-  padding: 1.5rem;
-}
-
-.gallery-item {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  transition: var(--transition-medium);
-  cursor: pointer;
-}
-
-.gallery-item:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-border);
-}
-
-.gallery-item.selected {
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
-}
-
-/* Image Container */
-.image-container {
-  position: relative;
-  aspect-ratio: 16/9;
-  overflow: hidden;
-  background: var(--color-surface-elevated);
-}
-
-.gallery-image {
-  transition: var(--transition-medium);
-}
-
-.gallery-image.loading {
-  opacity: 0;
-}
-
-.image-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-}
-
-.image-loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-surface-elevated);
-}
-
-.loader-spinner {
-  width: 24px;
-  height: 24px;
-  border: 2px solid var(--color-border);
-  border-top: 2px solid var(--color-blue-common);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Image Info */
-.image-info {
-  padding: 1rem;
-}
-
-.image-name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-bottom: 0.75rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.image-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.action-icons {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.icon-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.icon-button:hover {
-  color: var(--color-text-primary);
-  transform: translateY(-1px);
-}
-
-.copy-icon:hover {
-  color: var(--color-copy);
-  background: rgba(6, 182, 212, 0.1);
-}
-
-.edit-icon:hover {
-  color: var(--color-success);
-  background: rgba(16, 185, 129, 0.1);
-}
-
-.delete-icon:hover {
-  color: var(--color-error);
-  background: rgba(239, 68, 68, 0.1);
-}
-
-/* Custom Checkbox */
-.custom-checkbox {
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.custom-checkbox input[type="checkbox"] {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-}
-
-.checkbox-mark {
-  display: inline-block;
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  position: relative;
-  transition: var(--transition-fast);
-}
-
-.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark {
-  background: var(--color-blue-common);
-  border-color: var(--color-blue-common);
-}
-
-.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
-  content: '✓';
-  position: absolute;
-  top: -1px;
-  left: 3px;
-  color: white;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-/* Image Preview Modal */
-.image-preview-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.8);
-}
-
-.modal-content {
-  position: relative;
-  max-width: 90vw;
-  max-height: 90vh;
-  background: var(--color-surface);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  box-shadow: var(--shadow-lg);
-}
-
-.modal-close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  border: none;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.modal-close:hover {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-.image-navigation {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.nav-button {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border: none;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
-  color: white;
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.nav-button:hover:not(:disabled) {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-.nav-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.nav-button.prev {
-  left: 1rem;
-}
-
-.nav-button.next {
-  right: 1rem;
-}
-
-.image-viewer {
-  width: 90vw;
-  height: 80vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #000;
-}
-
-.preview-image {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-.image-details {
-  padding: 1rem 1.5rem;
-  border-top: 1px solid var(--color-border-secondary);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.image-details h3 {
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  margin-right: 1rem;
-}
-
-.image-counter {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  white-space: nowrap;
-}
-
-/* Modal Overlay */
-.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;
-  z-index: 1000;
-}
-
-.modal-container {
-  background: var(--color-background-primary);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-lg);
-  max-width: 500px;
-  width: 90%;
-  max-height: 90vh;
-  overflow-y: auto;
-}
-
-.modal-container.large {
-  max-width: 700px;
-}
-
-.modal-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.5rem;
-  border-bottom: 1px solid var(--color-border-secondary);
-}
-
-.modal-header h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-}
-
-.modal-close-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.modal-close-btn:hover {
-  color: var(--color-text-primary);
-  background: var(--color-border-secondary);
-}
-
-.modal-body {
-  padding: 1.5rem;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 1.5rem;
-  border-top: 1px solid var(--color-border-secondary);
-}
-
-/* Form Elements */
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group:last-child {
-  margin-bottom: 0;
-}
-
-.form-label {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  margin-bottom: 0.5rem;
-}
-
-.form-input {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-  font-size: 0.875rem;
-  transition: var(--transition-fast);
-  box-sizing: border-box;
-}
-
-.form-input:focus {
-  outline: none;
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-}
-
-.info-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border: none;
-  border-radius: 50%;
-  background: var(--color-blue-common);
-  color: white;
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.info-button:hover {
-  background: var(--color-blue-common);
-}
-
-.info-panel {
-  margin-top: 1rem;
-  padding: 1rem;
-  background: var(--color-surface-elevated);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border-secondary);
-}
-
-.info-panel h4 {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0 0 0.75rem 0;
-}
-
-.placeholder-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 0.5rem;
-}
-
-.placeholder-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.placeholder-item code {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.75rem;
-  background: var(--color-surface);
-  color: var(--color-blue-common);
-  padding: 0.25rem 0.5rem;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border);
-}
-
-.placeholder-item span {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-/* Buttons */
-.btn-primary {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  background: var(--color-blue-common);
-  color: white;
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
-}
-
-.btn-primary:hover {
-  background: var(--color-blue-common);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.btn-secondary {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
-}
-
-.btn-secondary:hover {
-  background: var(--color-border-secondary);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .gallery-container {
-    padding: 0.75rem;
-    gap: 1rem;
-  }
-  
-  .header-content {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
-  }
-  
-  .header-actions {
-    width: 100%;
-    justify-content: flex-start;
-  }
-  
-  .filter-row {
-    flex-direction: column;
-  }
-  
-  .action-buttons {
-    width: 100%;
-  }
-  
-  .gallery-grid {
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 1rem;
-    padding: 1rem;
-  }
-  
-  .modal-container {
-    margin: 1rem;
-    width: calc(100% - 2rem);
-  }
-  
-  .image-viewer {
-    width: 90vw;
-    height: 50vh;
-  }
-  
-  .nav-button.prev {
-    left: 0.5rem;
-  }
-  
-  .nav-button.next {
-    right: 0.5rem;
-  }
-}
-
-/* Lazy Loading */
-.load-more-trigger {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2rem;
-  min-height: 100px;
-}
-
-.loading-indicator {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  color: var(--color-text-secondary);
-}
-
-.loading-indicator span {
-  font-size: 0.875rem;
-}
-
-/* Improve responsive layout for smaller screens */
-@media (max-width: 1024px) {
-  .filter-group,
-  .search-group {
-    min-width: 160px;
-    max-width: 220px;
-  }
-}
-
-@media (max-width: 768px) {
-  .filter-group,
-  .search-group {
-    min-width: 140px;
-    max-width: 100%;
-    flex: 1 1 100%;
-  }
-  
-  .filter-row {
-    gap: 0.5rem;
-  }
-  
-  .filter-content {
-    padding: 0.75rem;
-  }
-  
-  .date-range-picker {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  
-  .date-input {
-    width: 100%;
-  }
-  
-  .date-separator {
-    display: none;
-  }
-}
-
-@media (max-width: 480px) {
-  .filter-content {
-    padding: 0.5rem;
-  }
-  
-  .filter-row {
-    gap: 0.5rem;
-  }
-  
-  .filter-group,
-  .search-group {
-    min-width: 100px;
-  }
-  
-  .filter-label {
-    font-size: 0.75rem;
-  }
-}
-
-/* Virtual Scroller Styles */
-.virtual-gallery-scroller {
-  width: 100%;
-  flex: 1;
-  min-height: 0;
-}
-
-.virtual-gallery-scroller .virtual-scroller {
-  height: 100%;
-  width: 100%;
-}
-
-.virtual-gallery-scroller .virtual-scroller-item {
-  overflow: visible;
-  box-sizing: border-box;
-}
-
-/* Ensure gallery items work well with virtual scroller */
-.virtual-gallery-scroller .gallery-item {
-  width: 100%;
-  height: calc(100% - 8px);
-  margin: 0;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-}
-
-.virtual-gallery-scroller .image-container {
-  flex: 1;
-  min-height: 0;
-  aspect-ratio: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  overflow: hidden;
-  background: var(--color-surface-elevated);
-}
-
-.virtual-gallery-scroller .image-info {
-  flex-shrink: 0;
-  padding: 0.75rem;
-  min-height: 80px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.virtual-gallery-scroller .gallery-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.virtual-gallery-scroller .image-loader {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--color-surface-elevated);
-}
-
-/* Enhanced Image Preview Styles */
-.image-preview-modal {
-  outline: none;
-}
-
-.zoom-controls {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: var(--radius-lg);
-  padding: 0.5rem;
-}
-
-.zoom-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: var(--radius-md);
-  background: rgba(255, 255, 255, 0.1);
-  color: white;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-size: 0.875rem;
-  font-weight: 600;
-}
-
-.zoom-btn:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.zoom-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.zoom-btn.reset-btn {
-  width: auto;
-  padding: 0 0.75rem;
-  font-size: 0.75rem;
-}
-
-.zoom-level {
-  color: white;
-  font-size: 0.875rem;
-  font-weight: 500;
-  min-width: 50px;
-  text-align: center;
-}
-
-.image-viewer {
-  overflow: hidden;
-  position: relative;
-  user-select: none;
-}
-
-.preview-image {
-  display: block;
-  max-width: none;
-  max-height: none;
-  width: auto;
-  height: auto;
-  transform-origin: center center;
-}
-
-.image-help-text {
-  font-size: 0.75rem;
-  color: var(--color-text-tertiary);
-  margin-top: 0.25rem;
-  text-align: center;
-}
-
-.image-viewer:active {
-  cursor: grabbing !important;
-}
-
-/* Responsive adjustments for mobile */
-@media (max-width: 768px) {
-  .zoom-controls {
-    top: 0.5rem;
-    left: 0.5rem;
-    gap: 0.25rem;
-    padding: 0.25rem;
-  }
-  
-  .zoom-btn {
-    width: 28px;
-    height: 28px;
-    font-size: 0.75rem;
-  }
-  
-  .zoom-level {
-    font-size: 0.75rem;
-    min-width: 40px;
-  }
-  
-  .modal-close {
-    top: 0.5rem;
-    right: 0.5rem;
-    width: 36px;
-    height: 36px;
-  }
-  
-  .nav-button {
-    width: 40px;
-    height: 40px;
-  }
-  
-  .nav-button.prev {
-    left: 0.5rem;
-  }
-  
-  .nav-button.next {
-    right: 0.5rem;
-  }
-}
-
-
-/* Placeholder Help Styles */
-.placeholder-help {
-  background: var(--color-background-tertiary);
-  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);
-}
-
-.placeholder-category {
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.placeholder-category:last-child {
-  border-bottom: none;
-}
-
-.category-title {
-  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;
-}
-
-.placeholder-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 0;
-  padding: 0.5rem 0;
-}
-
-.placeholder-item {
-  display: flex;
-  align-items: center;
-  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);
-}
-
-.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;
-  min-width: 80px;
-  text-align: center;
-  font-weight: 600;
-  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;
-  flex: 1;
-}
+/* Global scrolling behavior */
+html, body {
+  overflow-x: hidden;
+}
+
+/* Custom Scrollbar Styles */
+.gallery-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.gallery-content::-webkit-scrollbar-track {
+  background: var(--color-surface-elevated);
+  border-radius: var(--radius-md);
+}
+
+.gallery-content::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: var(--radius-md);
+  transition: var(--transition-fast);
+}
+
+.gallery-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
+
+/* Container */
+.gallery-container {
+  padding: 1rem;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  height: 100vh;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+/* Card Base */
+.gallery-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  transition: var(--transition-medium);
+  box-shadow: var(--shadow-sm);
+}
+
+.gallery-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border);
+}
+
+/* Header Card */
+.header-card .card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border-secondary);
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+}
+
+.header-icon {
+  color: var(--color-blue-common);
+  display: flex;
+  align-items: center;
+}
+
+.header-content h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+  letter-spacing: -0.025em;
+}
+
+.header-content p {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  background: var(--color-blue-common);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-family: inherit;
+}
+
+.action-button:hover {
+  background: var(--color-blue-common);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+/* View Mode Toggle */
+.view-mode-toggle {
+  position: relative;
+}
+
+.view-mode-toggle:hover {
+  background: var(--color-blue-common) !important;
+}
+
+.sync-delete-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.toggle-label {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+/* Custom Switch */
+.custom-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.custom-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  transition: 0.3s;
+  border-radius: 24px;
+}
+
+.switch-slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: 0.3s;
+  border-radius: 50%;
+}
+
+input:checked + .switch-slider {
+  background-color: var(--color-blue-common);
+}
+
+input:checked + .switch-slider:before {
+  transform: translateX(20px);
+}
+
+/* Filter Card */
+.filter-card {
+  border-radius: var(--radius-lg);
+}
+
+.filter-content {
+  padding: 1rem; /* Reduced from 1.25rem for compactness */
+}
+
+.filter-row {
+  display: flex;
+  gap: 0.75rem; /* Reduced from 1rem for more compact layout */
+  margin-bottom: 0.75rem; /* Reduced from 1rem */
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.filter-row:last-child {
+  margin-bottom: 0;
+}
+
+.filter-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  min-width: 140px;
+  flex: 1 1 auto;
+  max-width: 220px;
+}
+
+.filter-label {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.125rem; 
+  line-height: 1.4;
+}
+
+/* Custom Select */
+.custom-select {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  text-align: center;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-size: 0.85rem;
+  transition: var(--transition-fast);
+  cursor: pointer;
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  line-height: 1.4;
+}
+
+.custom-select:focus {
+  outline: none;
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+/* Custom Multiselect */
+.custom-multiselect {
+  position: relative;
+}
+
+.multiselect-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  height: 28px;
+  line-height: 1.4;
+}
+
+.multiselect-trigger:hover {
+  border-color: var(--color-blue-common);
+}
+
+.multiselect-trigger:focus,
+.multiselect-trigger.active {
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+.multiselect-dropdown {
+  position: fixed;
+  padding: 0.375rem 0.5rem;
+  z-index: 1000;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  max-height: 280px;
+  min-width: 200px;
+  overflow-y: auto;
+  margin-top: 2px;
+}
+
+.multiselect-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--color-surface);
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.95rem;
+  line-height: 1.4;
+  min-height: unset;
+}
+
+.multiselect-option:hover {
+  background: var(--color-blue-common);
+}
+
+.multiselect-option input[type="checkbox"] {
+  margin: 0;
+}
+
+/* Date Range Picker */
+.date-range-picker {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.date-input {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-size: 0.75rem;
+  transition: var(--transition-fast);
+  flex: 1;
+  min-width: 0;
+  height: 28px;
+  line-height: 1.2;
+}
+
+.date-input:focus {
+  outline: none;
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.date-separator {
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  flex-shrink: 0;
+}
+
+/* Sort Dropdown */
+.sort-dropdown {
+  position: relative;
+}
+
+.sort-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  width: 100%;
+  height: 28px;
+  line-height: 1.4;
+}
+
+.sort-button:hover {
+  border-color: var(--color-blue-common);
+}
+
+.sort-button:focus,
+.sort-button.active {
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+}
+
+.sort-options {
+  position: fixed;
+  z-index: 1000;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  margin-top: 2px;
+  min-width: 160px;
+}
+
+.sort-option {
+  display: block;
+  width: 100%;
+  padding: 0.25rem 0.5rem;
+  text-align: center;
+  border: none;
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  line-height: 1.4;
+  min-height: unset;
+}
+
+.sort-option:hover {
+  background: var(--color-blue-common);
+}
+
+/* Search Groups */
+.search-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 180px;
+  flex: 1 1 auto;
+  max-width: 260px;
+}
+
+.search-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-size: 0.8rem;
+  transition: var(--transition-fast);
+  width: 100%;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.search-icon {
+  position: absolute;
+  left: 0.75rem;
+  color: var(--color-text-secondary);
+  z-index: 1;
+}
+
+.clear-button {
+  position: absolute;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  transition: var(--transition-fast);
+}
+
+.clear-button:hover {
+  color: var(--color-text-primary);
+}
+
+/* Action Buttons */
+.action-buttons {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1rem;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: not-allowed;
+  transition: var(--transition-fast);
+  opacity: 0.5;
+}
+
+.action-btn.active {
+  cursor: pointer;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.action-btn.active:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.copy-btn {
+  background: var(--color-blue-common);
+  color: white;
+}
+
+.copy-btn.active:hover {
+  background: var(--color-accent-hover);
+}
+
+.edit-btn {
+  background: var(--color-success);
+  color: white;
+}
+
+.edit-btn.active:hover {
+  background: #059669;
+}
+
+.delete-btn {
+  background: var(--color-danger);
+  color: white;
+}
+
+.delete-btn.active:hover {
+  background: var(--color-danger);
+}
+
+.select-btn {
+  background: var(--color-warning);
+  color: white;
+}
+
+.select-btn.active:hover {
+  background: #d97706;
+}
+
+/* Filter Slide Animation */
+.filter-slide-enter-active,
+.filter-slide-leave-active {
+  transition: all var(--transition-medium);
+  max-height: 300px;
+  overflow: hidden;
+}
+
+.filter-slide-enter-from,
+.filter-slide-leave-to {
+  max-height: 0;
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+/* Gallery Content */
+.gallery-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4rem 2rem;
+  text-align: center;
+}
+
+.empty-icon {
+  color: var(--color-text-secondary);
+  margin-bottom: 1rem;
+}
+
+.empty-state h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 0.5rem 0;
+}
+
+.empty-state p {
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* Gallery Grid */
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1.5rem;
+  padding: 1.5rem;
+}
+
+.gallery-item {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  transition: var(--transition-medium);
+  cursor: pointer;
+}
+
+.gallery-item:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border);
+}
+
+.gallery-item.selected {
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+/* Image Container */
+.image-container {
+  position: relative;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+  background: var(--color-background-secondary);
+}
+
+.gallery-image {
+  transition: var(--transition-medium);
+}
+
+.gallery-image.loading {
+  opacity: 0;
+}
+
+.image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+}
+
+.image-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-surface-elevated);
+}
+
+.loader-spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--color-border);
+  border-top: 2px solid var(--color-blue-common);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Image Info */
+.image-info {
+  padding: 1rem;
+}
+
+.image-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.75rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.action-icons {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.icon-button:hover {
+  color: var(--color-text-primary);
+  transform: translateY(-1px);
+}
+
+.copy-icon:hover {
+  color: var(--color-copy);
+  background: rgba(6, 182, 212, 0.1);
+}
+
+.edit-icon:hover {
+  color: var(--color-success);
+  background: rgba(16, 185, 129, 0.1);
+}
+
+.delete-icon:hover {
+  color: var(--color-error);
+  background: rgba(239, 68, 68, 0.1);
+}
+
+/* Custom Checkbox */
+.custom-checkbox {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.custom-checkbox input[type="checkbox"] {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+
+.checkbox-mark {
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  position: relative;
+  transition: var(--transition-fast);
+}
+
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark {
+  background: var(--color-blue-common);
+  border-color: var(--color-blue-common);
+}
+
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
+  content: '✓';
+  position: absolute;
+  top: -1px;
+  left: 3px;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+/* Image Preview Modal */
+.image-preview-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-backdrop {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.modal-content {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.modal-close:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.image-navigation {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.nav-button {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.nav-button:hover:not(:disabled) {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.nav-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.nav-button.prev {
+  left: 1rem;
+}
+
+.nav-button.next {
+  right: 1rem;
+}
+
+.image-viewer {
+  width: 90vw;
+  height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #000;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.image-details {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--color-border-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.image-details h3 {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  margin-right: 1rem;
+}
+
+.image-counter {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+}
+
+/* Modal Overlay */
+.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;
+  z-index: 1000;
+}
+
+.modal-container {
+  background: var(--color-background-primary);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+  max-width: 500px;
+  width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+}
+
+.modal-container.large {
+  max-width: 700px;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+
+.modal-header h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.modal-close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.modal-close-btn:hover {
+  color: var(--color-text-primary);
+  background: var(--color-border-secondary);
+}
+
+.modal-body {
+  padding: 1.5rem;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  border-top: 1px solid var(--color-border-secondary);
+}
+
+/* Form Elements */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group:last-child {
+  margin-bottom: 0;
+}
+
+.form-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.form-input {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  font-size: 0.875rem;
+  transition: var(--transition-fast);
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.info-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-blue-common);
+  color: white;
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.info-button:hover {
+  background: var(--color-blue-common);
+}
+
+.info-panel {
+  margin-top: 1rem;
+  padding: 1rem;
+  background: var(--color-surface-elevated);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-border-secondary);
+}
+
+.info-panel h4 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0 0 0.75rem 0;
+}
+
+.placeholder-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0.5rem;
+}
+
+.placeholder-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.placeholder-item code {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.75rem;
+  background: var(--color-surface);
+  color: var(--color-blue-common);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--color-border);
+}
+
+.placeholder-item span {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+/* Buttons */
+.btn-primary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--color-blue-common);
+  color: white;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-family: inherit;
+}
+
+.btn-primary:hover {
+  background: var(--color-blue-common);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-secondary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-family: inherit;
+}
+
+.btn-secondary:hover {
+  background: var(--color-border-secondary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .gallery-container {
+    padding: 0.75rem;
+    gap: 1rem;
+  }
+  
+  .header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+  
+  .header-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  
+  .filter-row {
+    flex-direction: column;
+  }
+  
+  .action-buttons {
+    width: 100%;
+  }
+  
+  .gallery-grid {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 1rem;
+    padding: 1rem;
+  }
+  
+  .modal-container {
+    margin: 1rem;
+    width: calc(100% - 2rem);
+  }
+  
+  .image-viewer {
+    width: 90vw;
+    height: 50vh;
+  }
+  
+  .nav-button.prev {
+    left: 0.5rem;
+  }
+  
+  .nav-button.next {
+    right: 0.5rem;
+  }
+}
+
+/* Lazy Loading */
+.load-more-trigger {
+  grid-column: 1 / -1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  min-height: 100px;
+}
+
+.loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  color: var(--color-text-secondary);
+}
+
+.loading-indicator span {
+  font-size: 0.875rem;
+}
+
+/* Improve responsive layout for smaller screens */
+@media (max-width: 1024px) {
+  .filter-group,
+  .search-group {
+    min-width: 160px;
+    max-width: 220px;
+  }
+}
+
+@media (max-width: 768px) {
+  .filter-group,
+  .search-group {
+    min-width: 140px;
+    max-width: 100%;
+    flex: 1 1 100%;
+  }
+  
+  .filter-row {
+    gap: 0.5rem;
+  }
+  
+  .filter-content {
+    padding: 0.75rem;
+  }
+  
+  .date-range-picker {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .date-input {
+    width: 100%;
+  }
+  
+  .date-separator {
+    display: none;
+  }
+}
+
+@media (max-width: 480px) {
+  .filter-content {
+    padding: 0.5rem;
+  }
+  
+  .filter-row {
+    gap: 0.5rem;
+  }
+  
+  .filter-group,
+  .search-group {
+    min-width: 100px;
+  }
+  
+  .filter-label {
+    font-size: 0.75rem;
+  }
+}
+
+/* Virtual Scroller Styles */
+.virtual-gallery-scroller {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+.virtual-gallery-scroller .virtual-scroller {
+  height: 100%;
+  width: 100%;
+}
+
+.virtual-gallery-scroller .virtual-scroller-item {
+  overflow: visible;
+  box-sizing: border-box;
+}
+
+/* Ensure gallery items work well with virtual scroller */
+.virtual-gallery-scroller .gallery-item {
+  width: 100%;
+  height: calc(100% - 8px);
+  margin: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.virtual-gallery-scroller .image-container {
+  flex: 1;
+  min-height: 0;
+  aspect-ratio: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  background: var(--color-background-secondary);
+}
+
+.virtual-gallery-scroller .image-info {
+  flex-shrink: 0;
+  padding: 0.75rem;
+  min-height: 80px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.virtual-gallery-scroller .gallery-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.virtual-gallery-scroller .image-loader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-surface-elevated);
+}
+
+/* Enhanced Image Preview Styles */
+.image-preview-modal {
+  outline: none;
+}
+
+.zoom-controls {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: var(--radius-lg);
+  padding: 0.5rem;
+}
+
+.zoom-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.zoom-btn:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.zoom-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.zoom-btn.reset-btn {
+  width: auto;
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
+}
+
+.zoom-level {
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 500;
+  min-width: 50px;
+  text-align: center;
+}
+
+.image-viewer {
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+}
+
+.preview-image {
+  display: block;
+  max-width: none;
+  max-height: none;
+  width: auto;
+  height: auto;
+  transform-origin: center center;
+}
+
+.image-help-text {
+  font-size: 0.75rem;
+  color: var(--color-text-tertiary);
+  margin-top: 0.25rem;
+  text-align: center;
+}
+
+.image-viewer:active {
+  cursor: grabbing !important;
+}
+
+/* Responsive adjustments for mobile */
+@media (max-width: 768px) {
+  .zoom-controls {
+    top: 0.5rem;
+    left: 0.5rem;
+    gap: 0.25rem;
+    padding: 0.25rem;
+  }
+  
+  .zoom-btn {
+    width: 28px;
+    height: 28px;
+    font-size: 0.75rem;
+  }
+  
+  .zoom-level {
+    font-size: 0.75rem;
+    min-width: 40px;
+  }
+  
+  .modal-close {
+    top: 0.5rem;
+    right: 0.5rem;
+    width: 36px;
+    height: 36px;
+  }
+  
+  .nav-button {
+    width: 40px;
+    height: 40px;
+  }
+  
+  .nav-button.prev {
+    left: 0.5rem;
+  }
+  
+  .nav-button.next {
+    right: 0.5rem;
+  }
+}
+
+
+/* Placeholder Help Styles */
+.placeholder-help {
+  background: var(--color-background-tertiary);
+  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);
+}
+
+.placeholder-category {
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.placeholder-category:last-child {
+  border-bottom: none;
+}
+
+.category-title {
+  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;
+}
+
+.placeholder-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 0;
+  padding: 0.5rem 0;
+}
+
+.placeholder-item {
+  display: flex;
+  align-items: center;
+  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);
+}
+
+.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;
+  min-width: 80px;
+  text-align: center;
+  font-weight: 600;
+  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;
+  flex: 1;
+}
diff --git a/src/renderer/pages/css/PicgoSetting.css b/src/renderer/pages/css/PicgoSetting.css
index 902486fa..7ba78b76 100644
--- a/src/renderer/pages/css/PicgoSetting.css
+++ b/src/renderer/pages/css/PicgoSetting.css
@@ -622,7 +622,7 @@ small {
 :root.auto.dark .settings-header,
 :root.auto.dark .tab-navigation,
 :root.auto.dark .settings-section {
-  background: var(--color-background-tertiary);
+  background: var(--color-background-secondary);
   border-color: var(--color-border);
 }
 
diff --git a/src/renderer/pages/css/PluginPage.css b/src/renderer/pages/css/PluginPage.css
index c59a8643..3a0d1884 100644
--- a/src/renderer/pages/css/PluginPage.css
+++ b/src/renderer/pages/css/PluginPage.css
@@ -1,761 +1,761 @@
-/* Global scrolling behavior */
-html, body {
-  overflow-x: hidden;
-}
-
-/* Container */
-.plugin-container {
-  padding: 1rem;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  min-height: 100vh;
-  box-sizing: border-box;
-  overflow-y: auto;
-}
-
-/* Card Base */
-.plugin-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  transition: var(--transition-medium);
-  box-shadow: var(--shadow-sm);
-}
-
-.plugin-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-border);
-}
-
-/* Header Card */
-.header-card .card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--color-border-secondary);
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-}
-
-.header-icon {
-  color: var(--color-accent);
-  display: flex;
-  align-items: center;
-}
-
-.header-content h1 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin: 0;
-  letter-spacing: -0.025em;
-}
-
-.header-content p {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.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);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
-}
-
-.action-button:hover {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.action-button.secondary {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border);
-}
-
-.action-button.secondary:hover {
-  background: var(--color-surface);
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.action-button.small {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-}
-
-/* Search Card */
-.search-card {
-  border-radius: var(--radius-lg);
-}
-
-.search-container {
-  padding: 1rem 1.5rem;
-}
-
-.search-input-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.search-icon {
-  position: absolute;
-  left: 1rem;
-  color: var(--color-text-secondary);
-  z-index: 1;
-}
-
-.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);
-  font-size: 0.875rem;
-  transition: var(--transition-fast);
-  font-family: inherit;
-}
-
-.search-input:focus {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
-}
-
-.search-input::placeholder {
-  color: var(--color-text-secondary);
-}
-
-.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;
-}
-
-.clear-button:hover {
-  background: var(--color-surface);
-  color: var(--color-text-primary);
-}
-
-/* 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%);
-}
-
-.notice-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem 1.5rem;
-}
-
-.notice-icon {
-  color: var(--color-warning);
-  flex-shrink: 0;
-}
-
-.notice-text {
-  flex: 1;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-/* 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;
-  z-index: 100;
-  border-radius: var(--radius-xl);
-}
-
-.loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--color-border);
-  border-top: 3px solid var(--color-accent);
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-.loading-text {
-  color: white;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Plugin Grid */
-.plugin-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 1.25rem;
-  align-items: start;
-}
-
-/* Plugin Item Card */
-.plugin-item-card {
-  position: relative;
-  border-radius: var(--radius-lg);
-  padding: 1.5rem;
-  transition: var(--transition-medium);
-  display: flex;
-  flex-direction: column;
-  min-height: 200px;
-  height: auto;
-}
-
-.plugin-item-card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-}
-
-.plugin-item-card.disabled {
-  opacity: 0.7;
-}
-
-/* Plugin Badges */
-.cli-badge,
-.update-badge {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  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);
-}
-
-.update-badge {
-  background: var(--color-success);
-  color: white;
-  right: 3.5rem;
-}
-
-/* Plugin Header */
-.plugin-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
-
-.plugin-logo {
-  width: 48px;
-  height: 48px;
-  border-radius: var(--radius-md);
-  object-fit: cover;
-  flex-shrink: 0;
-  border: 1px solid var(--color-border-secondary);
-}
-
-.plugin-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.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;
-  white-space: nowrap;
-}
-
-.plugin-name:hover {
-  color: var(--color-accent);
-}
-
-.plugin-version {
-  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;
-  white-space: nowrap;
-}
-
-/* Plugin Description */
-.plugin-description {
-  margin-bottom: 1.5rem;
-  flex: 1;
-  display: flex;
-  align-items: flex-start;
-}
-
-.plugin-description p {
-  font-size: 0.875rem;
-  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 */
-.plugin-actions {
-  margin-top: auto;
-  padding-top: 1rem;
-}
-
-.plugin-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
-}
-
-.plugin-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.install-button {
-  background: var(--color-success);
-  color: white;
-}
-
-.install-button:hover:not(:disabled) {
-  transform: translateY(-1px);
-}
-
-.installing-button,
-.processing-button {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border);
-}
-
-.installed-button {
-  background: var(--color-success-light);
-  color: var(--color-success);
-  border: 1px solid var(--color-success);
-}
-
-.settings-button {
-  background: var(--color-accent);
-  color: white;
-}
-
-.settings-button:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-}
-
-.disabled-button {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-secondary);
-  border: 1px solid var(--color-border);
-}
-
-.disabled-button:hover:not(:disabled) {
-  background: var(--color-surface);
-  border-color: var(--color-warning);
-  color: var(--color-warning);
-}
-
-/* Button Spinner */
-.button-spinner {
-  width: 16px;
-  height: 16px;
-  border: 2px solid transparent;
-  border-top: 2px solid currentColor;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-/* Empty State */
-.empty-state {
-  border-radius: var(--radius-lg);
-  padding: 3rem 2rem;
-}
-
-.empty-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  text-align: center;
-}
-
-.empty-icon {
-  color: var(--color-text-secondary);
-  opacity: 0.5;
-}
-
-.empty-content h3 {
-  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;
-}
-
-/* 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;
-  z-index: 1000;
-}
-
-.modal-container {
-  background: var(--color-surface);
-  border-radius: var(--radius-xl);
-  box-shadow: var(--shadow-xl);
-  max-width: 70vw;
-  max-height: 80vh;
-  width: 100%;
-  margin: 2rem;
-  display: flex;
-  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;
-}
-
-.modal-title {
-  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;
-  border: none;
-  border-radius: var(--radius-md);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  transition: var(--transition-fast);
-}
-
-.modal-close:hover {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-}
-
-.modal-content {
-  flex: 1;
-  padding: 1.5rem;
-  overflow-y: auto;
-}
-
-.modal-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.modal-content::-webkit-scrollbar-track {
-  background: var(--color-surface-elevated);
-  border-radius: 3px;
-}
-
-.modal-content::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 3px;
-}
-
-.modal-content::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
-.modal-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 0.75rem;
-  padding: 1.5rem;
-  border-top: 1px solid var(--color-border-secondary);
-}
-
-/* Buttons */
-.btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: var(--transition-fast);
-  font-family: inherit;
-}
-
-.btn:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.btn-primary {
-  background: var(--color-accent);
-  color: white;
-}
-
-.btn-primary:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-}
-
-.btn-secondary {
-  background: var(--color-surface-elevated);
-  color: var(--color-text-primary);
-  border: 1px solid var(--color-border);
-}
-
-.btn-secondary:hover:not(:disabled) {
-  background: var(--color-surface);
-  border-color: var(--color-accent);
-}
-
-/* Transitions */
-.notice-enter-active,
-.notice-leave-active {
-  transition: all var(--transition-medium);
-}
-
-.notice-enter-from,
-.notice-leave-to {
-  opacity: 0;
-  transform: translateY(-1rem);
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .plugin-container {
-    padding: 0.75rem;
-    gap: 1rem;
-  }
-
-  .header-card .card-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-
-  .header-actions {
-    width: 100%;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-  }
-
-  .plugin-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .modal-container {
-    max-width: 95vw;
-    margin: 1rem;
-  }
-
-  .action-button {
-    min-width: 120px;
-    justify-content: center;
-  }
-}
-
-@media (max-width: 480px) {
-  .plugin-container {
-    padding: 0.5rem;
-  }
-
-  .plugin-item-card {
-    padding: 1rem;
-  }
-
-  .header-actions {
-    flex-direction: column;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  .action-button {
-    width: 100%;
-    justify-content: center;
-  }
-}
-
-/* Dark mode adjustments */
-:root.dark .plugin-container,
-:root.auto.dark .plugin-container {
-  background: var(--color-background-secondary);
-}
-
-:root.dark .plugin-card,
-:root.auto.dark .plugin-card {
-  background: var(--color-surface);
-  border-color: var(--color-border-secondary);
-}
-
-:root.dark .search-input,
-:root.auto.dark .search-input {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-border);
-  color: var(--color-text-primary);
-}
-
-:root.dark .search-input:focus,
-:root.auto.dark .search-input:focus {
-  border-color: var(--color-accent);
-}
-
-:root.dark .modal-container,
-:root.auto.dark .modal-container {
-  background: var(--color-surface);
-  border-color: var(--color-border);
-}
-
-:root.dark .btn-secondary,
-:root.auto.dark .btn-secondary {
-  background: var(--color-surface-elevated);
-  border-color: var(--color-border);
-}
-
-:root.dark .btn-secondary:hover,
-:root.auto.dark .btn-secondary:hover {
-  background: var(--color-surface);
-  border-color: var(--color-accent);
-}
-
-/* Accessibility */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Focus styles for keyboard navigation */
-.action-button:focus-visible,
-.plugin-button:focus-visible,
-.btn:focus-visible,
-.search-input:focus-visible,
-.clear-button:focus-visible,
-.modal-close:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
-.plugin-name:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-  border-radius: var(--radius-sm);
-}
+/* Global scrolling behavior */
+html, body {
+  overflow-x: hidden;
+}
+
+/* Container */
+.plugin-container {
+  padding: 1rem;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  min-height: 100vh;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+/* Card Base */
+.plugin-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  transition: var(--transition-medium);
+  box-shadow: var(--shadow-sm);
+}
+
+.plugin-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border);
+}
+
+/* Header Card */
+.header-card .card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--color-border-secondary);
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+}
+
+.header-icon {
+  color: var(--color-accent);
+  display: flex;
+  align-items: center;
+}
+
+.header-content h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+  letter-spacing: -0.025em;
+}
+
+.header-content p {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.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);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-family: inherit;
+}
+
+.action-button:hover {
+  background: var(--color-accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.action-button.secondary {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+}
+
+.action-button.secondary:hover {
+  background: var(--color-surface);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.action-button.small {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+/* Search Card */
+.search-card {
+  border-radius: var(--radius-lg);
+}
+
+.search-container {
+  padding: 1rem 1.5rem;
+}
+
+.search-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 1rem;
+  color: var(--color-text-secondary);
+  z-index: 1;
+}
+
+.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);
+  font-size: 0.875rem;
+  transition: var(--transition-fast);
+  font-family: inherit;
+}
+
+.search-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
+}
+
+.search-input::placeholder {
+  color: var(--color-text-secondary);
+}
+
+.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;
+}
+
+.clear-button:hover {
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+}
+
+/* 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%);
+}
+
+.notice-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+}
+
+.notice-icon {
+  color: var(--color-warning);
+  flex-shrink: 0;
+}
+
+.notice-text {
+  flex: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+/* 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;
+  z-index: 100;
+  border-radius: var(--radius-xl);
+}
+
+.loading-spinner {
+  width: 40px;
+  height: 40px;
+  border: 3px solid var(--color-border);
+  border-top: 3px solid var(--color-accent);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Plugin Grid */
+.plugin-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 1.25rem;
+  align-items: start;
+}
+
+/* Plugin Item Card */
+.plugin-item-card {
+  position: relative;
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  transition: var(--transition-medium);
+  display: flex;
+  flex-direction: column;
+  min-height: 200px;
+  height: auto;
+}
+
+.plugin-item-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-lg);
+}
+
+.plugin-item-card.disabled {
+  opacity: 0.7;
+}
+
+/* Plugin Badges */
+.cli-badge,
+.update-badge {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  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);
+}
+
+.update-badge {
+  background: var(--color-success);
+  color: white;
+  right: 3.5rem;
+}
+
+/* Plugin Header */
+.plugin-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+.plugin-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-md);
+  object-fit: cover;
+  flex-shrink: 0;
+  border: 1px solid var(--color-border-secondary);
+}
+
+.plugin-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.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;
+  white-space: nowrap;
+}
+
+.plugin-name:hover {
+  color: var(--color-accent);
+}
+
+.plugin-version {
+  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;
+  white-space: nowrap;
+}
+
+/* Plugin Description */
+.plugin-description {
+  margin-bottom: 1.5rem;
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+}
+
+.plugin-description p {
+  font-size: 0.875rem;
+  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 */
+.plugin-actions {
+  margin-top: auto;
+  padding-top: 1rem;
+}
+
+.plugin-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-family: inherit;
+}
+
+.plugin-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.install-button {
+  background: var(--color-success);
+  color: white;
+}
+
+.install-button:hover:not(:disabled) {
+  transform: translateY(-1px);
+}
+
+.installing-button,
+.processing-button {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+}
+
+.installed-button {
+  background: var(--color-success-light);
+  color: var(--color-success);
+  border: 1px solid var(--color-success);
+}
+
+.settings-button {
+  background: var(--color-accent);
+  color: white;
+}
+
+.settings-button:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+  transform: translateY(-1px);
+}
+
+.disabled-button {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+}
+
+.disabled-button:hover:not(:disabled) {
+  background: var(--color-surface);
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+}
+
+/* Button Spinner */
+.button-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* Empty State */
+.empty-state {
+  border-radius: var(--radius-lg);
+  padding: 3rem 2rem;
+}
+
+.empty-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  text-align: center;
+}
+
+.empty-icon {
+  color: var(--color-text-secondary);
+  opacity: 0.5;
+}
+
+.empty-content h3 {
+  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;
+}
+
+/* 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;
+  z-index: 1000;
+}
+
+.modal-container {
+  background: var(--color-surface);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-xl);
+  max-width: 70vw;
+  max-height: 80vh;
+  width: 100%;
+  margin: 2rem;
+  display: flex;
+  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;
+}
+
+.modal-title {
+  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;
+  border: none;
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.modal-close:hover {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.modal-content {
+  flex: 1;
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+.modal-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.modal-content::-webkit-scrollbar-track {
+  background: var(--color-surface-elevated);
+  border-radius: 3px;
+}
+
+.modal-content::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 3px;
+}
+
+.modal-content::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
+
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  border-top: 1px solid var(--color-border-secondary);
+}
+
+/* Buttons */
+.btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-family: inherit;
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.btn:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-primary {
+  background: var(--color-accent);
+  color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+}
+
+.btn-secondary {
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+}
+
+.btn-secondary:hover:not(:disabled) {
+  background: var(--color-surface);
+  border-color: var(--color-accent);
+}
+
+/* Transitions */
+.notice-enter-active,
+.notice-leave-active {
+  transition: all var(--transition-medium);
+}
+
+.notice-enter-from,
+.notice-leave-to {
+  opacity: 0;
+  transform: translateY(-1rem);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .plugin-container {
+    padding: 0.75rem;
+    gap: 1rem;
+  }
+
+  .header-card .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+  }
+
+  .header-actions {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .plugin-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .modal-container {
+    max-width: 95vw;
+    margin: 1rem;
+  }
+
+  .action-button {
+    min-width: 120px;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 480px) {
+  .plugin-container {
+    padding: 0.5rem;
+  }
+
+  .plugin-item-card {
+    padding: 1rem;
+  }
+
+  .header-actions {
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .action-button {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+/* Dark mode adjustments */
+:root.dark .plugin-container,
+:root.auto.dark .plugin-container {
+  background: var(--color-background-secondary);
+}
+
+:root.dark .plugin-card,
+:root.auto.dark .plugin-card {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border-secondary);
+}
+
+:root.dark .search-input,
+:root.auto.dark .search-input {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border);
+  color: var(--color-text-primary);
+}
+
+:root.dark .search-input:focus,
+:root.auto.dark .search-input:focus {
+  border-color: var(--color-accent);
+}
+
+:root.dark .modal-container,
+:root.auto.dark .modal-container {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+}
+
+:root.dark .btn-secondary,
+:root.auto.dark .btn-secondary {
+  background: var(--color-surface-elevated);
+  border-color: var(--color-border);
+}
+
+:root.dark .btn-secondary:hover,
+:root.auto.dark .btn-secondary:hover {
+  background: var(--color-surface);
+  border-color: var(--color-accent);
+}
+
+/* Accessibility */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Focus styles for keyboard navigation */
+.action-button:focus-visible,
+.plugin-button:focus-visible,
+.btn:focus-visible,
+.search-input:focus-visible,
+.clear-button:focus-visible,
+.modal-close:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.plugin-name:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
diff --git a/src/renderer/pages/css/UploadPage.css b/src/renderer/pages/css/UploadPage.css
index 0f26b8be..28a971f1 100644
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -18,7 +18,7 @@ html, body {
 
 /* Card Base */
 .upload-card {
-  background: var(--color-surface);
+  background: var(--color-background-secondary);
   border: 1px solid var(--color-border-secondary);
   border-radius: var(--radius-xl);
   overflow: hidden;
diff --git a/src/renderer/pages/css/UploaderConfigPage.css b/src/renderer/pages/css/UploaderConfigPage.css
index 39427878..4be2ab54 100644
--- a/src/renderer/pages/css/UploaderConfigPage.css
+++ b/src/renderer/pages/css/UploaderConfigPage.css
@@ -1,296 +1,296 @@
-/* Container */
-.config-container {
-  padding: 1rem;
-  width: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1.25rem;
-  min-height: 100vh;
-  box-sizing: border-box;
-  overflow-y: auto;
-}
-
-/* Card Base */
-.config-card {
-  background: var(--color-surface);
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  overflow: hidden;
-  transition: var(--transition-medium);
-  box-shadow: var(--shadow-sm);
-}
-
-.config-card:hover {
-  box-shadow: var(--shadow-md);
-  border-color: var(--color-border);
-}
-
-/* Header Card */
-.header-card .card-header {
-  padding: 1.5rem 2rem;
-  border-bottom: 1px solid var(--color-border-secondary);
-}
-
-.page-title {
-  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-tertiary);
-  padding: 1.5rem;
-}
-
-.config-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1rem;
-  width: 100%;
-}
-
-@media (max-width: 768px) {
-  .config-grid {
-    grid-template-columns: 1fr;
-    gap: 0.75rem;
-  }
-}
-
-@media (min-width: 1200px) {
-  .config-grid {
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-    gap: 1.25rem;
-  }
-}
-
-/* Config Items */
-.config-item {
-  background: var(--color-surface-elevated);
-  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;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.config-item:hover {
-  background: var(--color-surface);
-  border-color: var(--color-accent);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.config-item.selected {
-  border-color: var(--color-accent);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-md);
-}
-
-.config-content {
-  flex: 1;
-  margin-right: 2rem;
-}
-
-.config-name {
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  margin-bottom: 0.5rem;
-  line-height: 1.4;
-}
-
-.config-update-time {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  margin-bottom: 0.75rem;
-}
-
-.default-badge {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.25rem 0.75rem;
-  background: var(--color-accent);
-  color: white;
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-radius: var(--radius-md);
-  text-transform: uppercase;
-  letter-spacing: 0.025em;
-}
-
-.config-actions {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  display: flex;
-  gap: 0.5rem;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--color-surface-elevated);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: var(--transition-fast);
-  color: var(--color-text-secondary);
-}
-
-.action-btn:hover {
-  background: var(--color-surface);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.edit-btn:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.delete-btn:hover:not(.disabled) {
-  border-color: var(--color-danger);
-  color: var(--color-danger);
-}
-
-.delete-btn.disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-/* 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;
-  min-height: 120px;
-}
-
-.config-item-add:hover {
-  border-color: var(--color-accent);
-  background: var(--color-surface-elevated);
-  transform: translateY(-2px);
-}
-
-.add-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-  color: var(--color-text-secondary);
-  transition: var(--transition-fast);
-}
-
-.config-item-add:hover .add-content {
-  color: var(--color-accent);
-}
-
-.add-text {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-/* Actions Card */
-.actions-card {
-  border-radius: var(--radius-lg);
-}
-
-.card-actions {
-  padding: 1.25rem 1.5rem;
-  display: flex;
-  justify-content: center;
-}
-
-.primary-button {
-  display: flex;
-  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;
-  min-width: 200px;
-  justify-content: center;
-}
-
-.primary-button:hover:not(:disabled) {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.primary-button:disabled {
-  background: var(--color-border);
-  color: var(--color-text-secondary);
-  cursor: not-allowed;
-  transform: none;
-  box-shadow: none;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .config-container {
-    padding: 0.75rem;
-    gap: 1rem;
-  }
-
-  .header-card .card-header {
-    padding: 1rem 1.25rem;
-  }
-
-  .page-title {
-    font-size: 1.25rem;
-  }
-
-  .main-card {
-    padding: 1rem;
-  }
-
-  .config-item {
-    padding: 1rem;
-    min-height: 100px;
-  }
-
-  .config-actions {
-    top: 0.75rem;
-    right: 0.75rem;
-  }
-
-  .action-btn {
-    width: 28px;
-    height: 28px;
-  }
-
-  .primary-button {
-    padding: 0.75rem 1.5rem;
-    min-width: 180px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .config-container {
-    padding: 1.5rem 2rem;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
+/* Container */
+.config-container {
+  padding: 1rem;
+  width: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  min-height: 100vh;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+/* Card Base */
+.config-card {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-xl);
+  overflow: hidden;
+  transition: var(--transition-medium);
+  box-shadow: var(--shadow-sm);
+}
+
+.config-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border);
+}
+
+/* Header Card */
+.header-card .card-header {
+  padding: 1.5rem 2rem;
+  border-bottom: 1px solid var(--color-border-secondary);
+}
+
+.page-title {
+  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;
+}
+
+.config-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .config-grid {
+    grid-template-columns: 1fr;
+    gap: 0.75rem;
+  }
+}
+
+@media (min-width: 1200px) {
+  .config-grid {
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.25rem;
+  }
+}
+
+/* Config Items */
+.config-item {
+  background: var(--color-surface-elevated);
+  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;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.config-item:hover {
+  background: var(--color-surface);
+  border-color: var(--color-accent);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.config-item.selected {
+  border-color: var(--color-accent);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-md);
+}
+
+.config-content {
+  flex: 1;
+  margin-right: 2rem;
+}
+
+.config-name {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+.config-update-time {
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.75rem;
+}
+
+.default-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.75rem;
+  background: var(--color-accent);
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  text-transform: uppercase;
+  letter-spacing: 0.025em;
+}
+
+.config-actions {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--color-surface-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: var(--transition-fast);
+  color: var(--color-text-secondary);
+}
+
+.action-btn:hover {
+  background: var(--color-surface);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.edit-btn:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.delete-btn:hover:not(.disabled) {
+  border-color: var(--color-danger);
+  color: var(--color-danger);
+}
+
+.delete-btn.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* 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;
+  min-height: 120px;
+}
+
+.config-item-add:hover {
+  border-color: var(--color-accent);
+  background: var(--color-surface-elevated);
+  transform: translateY(-2px);
+}
+
+.add-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--color-text-secondary);
+  transition: var(--transition-fast);
+}
+
+.config-item-add:hover .add-content {
+  color: var(--color-accent);
+}
+
+.add-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Actions Card */
+.actions-card {
+  border-radius: var(--radius-lg);
+}
+
+.card-actions {
+  padding: 1.25rem 1.5rem;
+  display: flex;
+  justify-content: center;
+}
+
+.primary-button {
+  display: flex;
+  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;
+  min-width: 200px;
+  justify-content: center;
+}
+
+.primary-button:hover:not(:disabled) {
+  background: var(--color-accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.primary-button:disabled {
+  background: var(--color-border);
+  color: var(--color-text-secondary);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .config-container {
+    padding: 0.75rem;
+    gap: 1rem;
+  }
+
+  .header-card .card-header {
+    padding: 1rem 1.25rem;
+  }
+
+  .page-title {
+    font-size: 1.25rem;
+  }
+
+  .main-card {
+    padding: 1rem;
+  }
+
+  .config-item {
+    padding: 1rem;
+    min-height: 100px;
+  }
+
+  .config-actions {
+    top: 0.75rem;
+    right: 0.75rem;
+  }
+
+  .action-btn {
+    width: 28px;
+    height: 28px;
+  }
+
+  .primary-button {
+    padding: 0.75rem 1.5rem;
+    min-width: 180px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .config-container {
+    padding: 1.5rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
 }
\ No newline at end of file
diff --git a/src/renderer/pages/picbeds/index.vue b/src/renderer/pages/picbeds/index.vue
index 83a1d78d..03177a31 100644
--- a/src/renderer/pages/picbeds/index.vue
+++ b/src/renderer/pages/picbeds/index.vue
@@ -1,740 +1,740 @@
-<template>
-  <div id="picbeds-page">
-    <div class="page-container">
-      <div class="page-content">
-        <!-- Header Section -->
-        <div class="page-header">
-          <div class="header-title-section">
-            <h1
-              class="page-title"
-              @click="handleNameClick"
-            >
-              {{ picBedName }} {{ t('pages.picBedConfigs.title') }}
-            </h1>
-            <button
-              class="link-button"
-              :title="t('pages.picBedConfigs.viewDoc')"
-              @click="handleNameClick"
-            >
-              <ExternalLink :size="20" />
-            </button>
-          </div>
-          <button
-            class="action-button primary"
-            @click="handleCopyApi"
-          >
-            <Copy :size="20" />
-            {{ t('pages.picBedConfigs.copyAPI') }}
-          </button>
-        </div>
-
-        <!-- Config Form Section -->
-        <div
-          v-if="config.length > 0"
-          class="form-section"
-        >
-          <config-form
-            :id="type"
-            ref="$configForm"
-            :config="config"
-            type="uploader"
-            color-mode="white"
-          >
-            <!-- Action Buttons -->
-            <div class="action-buttons">
-              <button
-                class="action-button secondary"
-                type="button"
-                @click="handleReset"
-              >
-                <RotateCcw :size="18" />
-                {{ t('common.reset') }}
-              </button>
-
-              <button
-                class="action-button success"
-                type="button"
-                @click="handleConfirm"
-              >
-                <Check :size="18" />
-                {{ t('common.confirm') }}
-              </button>
-
-              <div
-                v-if="picBedConfigList.length > 0"
-                class="dropdown-wrapper"
-              >
-                <button
-                  class="action-button warning dropdown-trigger"
-                  type="button"
-                  @click="toggleDropdown"
-                  @blur="handleDropdownBlur"
-                >
-                  <Import :size="18" />
-                  {{ t('common.import') }}
-                  <svg
-                    class="dropdown-arrow"
-                    :class="{ 'dropdown-arrow-up': true }"
-                    width="12"
-                    height="8"
-                    viewBox="0 0 12 8"
-                    fill="none"
-                  >
-                    <path
-                      d="M1 1.5L6 6.5L11 1.5"
-                      stroke="currentColor"
-                      stroke-width="1.5"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    />
-                  </svg>
-                </button>
-
-                <transition name="dropdown">
-                  <div
-                    v-show="dropdownVisible"
-                    class="dropdown-menu"
-                    :class="{ 'dropdown-up': true }"
-                  >
-                    <button
-                      v-for="item in picBedConfigList"
-                      :key="item._id"
-                      class="dropdown-item"
-                      @click="handleConfigImport(item)"
-                    >
-                      {{ item._configName }}
-                    </button>
-                  </div>
-                </transition>
-              </div>
-            </div>
-          </config-form>
-        </div>
-
-        <!-- Empty State -->
-        <div
-          v-else
-          class="empty-state"
-        >
-          <div class="empty-content">
-            <FolderOpen
-              class="empty-icon"
-              :size="48"
-            />
-            <h3>{{ t('pages.picBedConfigs.noConfigOptions') }}</h3>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Loading Overlay -->
-    <div
-      v-if="loading"
-      class="loading-overlay"
-    >
-      <div class="loading-spinner" />
-      <span class="loading-text">Loading...</span>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import dayjs from 'dayjs'
-import { Check, Copy, ExternalLink, FolderOpen, Import, RotateCcw } from 'lucide-vue-next'
-import { onBeforeMount, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRoute, useRouter } from 'vue-router'
-
-import ConfigForm from '@/components/UnifiedConfigForm.vue'
-import useMessage from '@/hooks/useMessage'
-import { getRawData } from '@/utils/common'
-import { configPaths } from '@/utils/configPaths'
-import { getConfig } from '@/utils/dataSender'
-import { II18nLanguage, IRPCActionType } from '@/utils/enum'
-import { picBedManualUrlList } from '@/utils/static'
-import type { IPicGoPluginConfig, IStringKeyMap, IUploaderConfigItem, IUploaderConfigListItem } from '#/types/types'
-
-const { t } = useI18n()
-const message = useMessage()
-
-const type = ref('')
-const config = ref<IPicGoPluginConfig[]>([])
-const picBedConfigList = ref<IUploaderConfigListItem[]>([])
-const picBedName = ref('')
-const loading = ref(false)
-const dropdownVisible = ref(false)
-const $route = useRoute()
-const $router = useRouter()
-const $configForm = ref<InstanceType<typeof ConfigForm> | null>(null)
-
-type.value = $route.params.type as string
-
-onBeforeMount(async () => {
-  loading.value = true
-  try {
-    await getPicBeds()
-    await getPicBedConfigList()
-  } finally {
-    loading.value = false
-  }
-})
-
-function toggleDropdown (_: Event) {
-  dropdownVisible.value = !dropdownVisible.value
-}
-
-function handleDropdownBlur () {
-  setTimeout(() => {
-    dropdownVisible.value = false
-  }, 200)
-}
-
-const handleConfirm = async () => {
-  loading.value = true
-  try {
-    const result = (await $configForm.value?.validate()) || false
-    if (result !== false) {
-      const rawResult = getRawData(result)
-      await window.electron.triggerRPC<void>(IRPCActionType.UPLOADER_UPDATE_CONFIG, type.value, rawResult?._id, rawResult)
-      message.success(t('pages.picBedConfigs.setSuccess'))
-      $router.back()
-    } else {
-      message.error(t('pages.picBedConfigs.setFailedInfo'))
-    }
-  } catch (error) {
-    console.error('Failed to save configuration:', error)
-    message.error(t('pages.picBedConfigs.setFailedInfo'))
-  } finally {
-    loading.value = false
-  }
-}
-
-async function getPicBeds () {
-  try {
-    const result = await window.electron.triggerRPC<any>(IRPCActionType.PICBED_GET_PICBED_CONFIG, $route.params.type)
-    config.value = result.config
-    picBedName.value = result.name
-  } catch (error) {
-    console.error('Failed to get picbed config:', error)
-    message.error(t('pages.picBedConfigs.loadConfigFailed'))
-  }
-}
-
-async function getPicBedConfigList () {
-  try {
-    const res = (await window.electron.triggerRPC<IUploaderConfigItem>(IRPCActionType.PICBED_GET_CONFIG_LIST, type.value)) || undefined
-    const configList = res?.configList || []
-    picBedConfigList.value = configList.filter(item => item._id !== $route.params.configId)
-  } catch (error) {
-    console.error('Failed to get config list:', error)
-    message.error(t('pages.picBedConfigs.loadPicBedListFailed'))
-  }
-}
-
-async function handleConfigImport (configItem: IUploaderConfigListItem) {
-  try {
-    const { _id, _configName, _updatedAt, _createdAt, ...rest } = configItem
-    for (const key in rest) {
-      if (Object.prototype.hasOwnProperty.call(rest, key)) {
-        const value = rest[key]
-        $configForm.value?.updateRuleForm(key, value)
-      }
-    }
-    $configForm.value?.updateRuleForm('_configName', dayjs().format('YYYYMMDDHHmmss'))
-    dropdownVisible.value = false
-    message.success(t('pages.picBedConfigs.importConfigSuccess'))
-  } catch (error) {
-    console.error('Failed to import configuration:', error)
-    message.error(t('pages.picBedConfigs.importConfigFailed'))
-  }
-}
-
-const handleReset = async () => {
-  loading.value = true
-  try {
-    await window.electron.triggerRPC<void>(IRPCActionType.UPLOADER_RESET_CONFIG, type.value, $route.params.configId)
-    message.success(t('pages.picBedConfigs.resetSuccess'))
-    setTimeout(() => {
-      $router.back()
-    }, 1000)
-  } catch (error) {
-    console.error('Failed to reset configuration:', error)
-    message.error(t('pages.picBedConfigs.resetFailed'))
-  } finally {
-    loading.value = false
-  }
-}
-
-async function handleNameClick () {
-  try {
-    const lang = (await getConfig(configPaths.settings.language)) || II18nLanguage.ZH_CN
-    const url = picBedManualUrlList[lang === II18nLanguage.EN ? 'en' : 'zh_cn'][$route.params.type as string]
-    if (url) {
-      window.electron.sendRPC(IRPCActionType.OPEN_URL, url)
-    }
-  } catch (error) {
-    console.error('Failed to open documentation:', error)
-    message.error(t('pages.picBedConfigs.viewDocFailed'))
-  }
-}
-
-async function handleCopyApi () {
-  try {
-    const { port = 36677, host = '127.0.0.1' } = (await getConfig<IStringKeyMap>(configPaths.settings.server)) || {}
-    const serverKey = (await getConfig(configPaths.settings.serverKey)) || ''
-    const uploader = ((await getConfig(configPaths.uploader)) as IStringKeyMap) || {}
-    const picBedConfigList = uploader[$route.params.type as string].configList || []
-    const picBedConfig = picBedConfigList.find((item: IUploaderConfigListItem) => item._id === $route.params.configId)
-
-    if (!picBedConfig) {
-      message.error(t('pages.picBedConfigs.noConfigs'))
-      return
-    }
-
-    const apiUrl = `http://${host === '0.0.0.0' ? '127.0.0.1' : host}:${port}/upload?picbed=${$route.params.type}&configName=${picBedConfig._configName}${serverKey ? `&key=${serverKey}` : ''}`
-
-    try {
-      window.electron.clipboard.writeText(apiUrl)
-      message.success(`${t('pages.picBedConfigs.copyAPISucceed')} ${apiUrl}`)
-    } catch (clipboardError) {
-      console.error('Failed to copy to clipboard:', clipboardError)
-      message.error(t('pages.picBedConfigs.copyAPIFailed'))
-    }
-  } catch (error) {
-    console.error('Failed to generate API URL:', error)
-    message.error(t('pages.picBedConfigs.copyAPIFailed'))
-  }
-}
-</script>
-
-<script lang="ts">
-export default {
-  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;
-}
-
-.page-container {
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 2rem;
-}
-
-.page-content {
-  background: rgba(255, 255, 255, 0.95);
-  border-radius: 16px;
-  backdrop-filter: blur(20px);
-  box-shadow:
-    0 8px 16px rgba(0, 0, 0, 0.12),
-    0 2px 12px rgba(0, 0, 0, 0.08);
-  overflow: auto;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-/* Header Section */
-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 2rem 2rem 1.5rem;
-  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.8) 100%);
-}
-
-.header-title-section {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.page-title {
-  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;
-}
-
-.page-title:hover {
-  transform: translateY(-1px);
-  filter: brightness(1.1);
-}
-
-.link-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border: none;
-  border-radius: 8px;
-  background: rgba(59, 130, 246, 0.1);
-  color: #3b82f6;
-  cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.link-button:hover {
-  background: rgba(59, 130, 246, 0.2);
-  transform: translateY(-1px);
-}
-
-/* Action Buttons */
-.action-button {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: 12px;
-  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;
-}
-
-.action-button::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-  transition: left 0.6s;
-}
-
-.action-button:hover::before {
-  left: 100%;
-}
-
-.action-button.primary {
-  background: var(--color-blue-common);
-  color: white;
-  box-shadow: 0 2px 2px rgba(0, 122, 255, 0.3);
-}
-
-.action-button.primary:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.4);
-}
-
-.action-button.secondary {
-  background: var(--color-surface-elevated);
-  color: #475569;
-  border: 1px solid #e2e8f0;
-}
-
-.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);
-}
-
-.action-button.success {
-  background: var(--color-success);
-  color: white;
-  box-shadow: 0 4px 4px rgba(16, 185, 129, 0.3);
-}
-
-.action-button.success:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 6px rgba(16, 185, 129, 0.4);
-}
-
-.action-button.warning {
-  background: var(--color-warning);
-  color: white;
-  position: relative;
-}
-
-.action-button.warning:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
-}
-
-.dropdown-arrow {
-  margin-left: 0.5rem;
-  transition: transform 0.2s ease;
-}
-
-.dropdown-arrow-up {
-  transform: rotate(180deg);
-}
-
-.dropdown-trigger:hover .dropdown-arrow:not(.dropdown-arrow-up) {
-  transform: rotate(180deg);
-}
-
-.dropdown-trigger:hover .dropdown-arrow.dropdown-arrow-up {
-  transform: rotate(0deg);
-}
-
-/* Form Section */
-.form-section {
-  padding: 2rem;
-}
-
-.action-buttons {
-  display: flex;
-  gap: 1rem;
-  margin-top: 2rem;
-  flex-wrap: wrap;
-}
-
-/* Dropdown */
-.dropdown-wrapper {
-  position: relative;
-}
-
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  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;
-}
-
-.dropdown-menu.dropdown-up {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
-.dropdown-item {
-  display: block;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border: none;
-  background: transparent;
-  color: #374151;
-  font-size: 0.875rem;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  text-align: left;
-}
-
-.dropdown-item:hover {
-  background: #f3f4f6;
-  color: #007aff;
-}
-
-.dropdown-item:last-child {
-  border-bottom: none;
-}
-
-/* Empty State */
-.empty-state {
-  padding: 4rem 2rem;
-  text-align: center;
-}
-
-.empty-content {
-  max-width: 400px;
-  margin: 0 auto;
-}
-
-.empty-icon {
-  color: #9ca3af;
-  margin-bottom: 1.5rem;
-}
-
-.empty-content h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #374151;
-  margin: 0 0 0.5rem;
-}
-
-.empty-content p {
-  color: #6b7280;
-  margin: 0;
-  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);
-  backdrop-filter: blur(4px);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  z-index: 2000;
-}
-
-.loading-spinner {
-  width: 2.5rem;
-  height: 2.5rem;
-  border: 3px solid rgba(255, 255, 255, 0.3);
-  border-top: 3px solid white;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-.loading-text {
-  color: white;
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-/* Transitions */
-.dropdown-enter-active,
-.dropdown-leave-active {
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.dropdown-enter-from,
-.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(-0.5rem);
-}
-
-.dropdown-up.dropdown-enter-from,
-.dropdown-up.dropdown-leave-to {
-  opacity: 0;
-  transform: translateY(0.5rem);
-}
-
-/* Animations */
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Dark mode adjustments */
-:root.dark #picbeds-page,
-:root.auto.dark #picbeds-page {
-  background: var(--color-background-tertiar);
-}
-
-:root.dark .page-content,
-:root.auto.dark .page-content {
-  background: var(--color-surface-elevated);
-  border-color: rgba(75, 85, 99, 0.3);
-}
-
-:root.dark .page-header,
-:root.auto.dark .page-header {
-  background: var(--color-surface-elevated);
-  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;
-}
-
-:root.dark .dropdown-menu.dropdown-up,
-:root.auto.dark .dropdown-menu.dropdown-up {
-  background: #374151;
-  border-color: #4b5563;
-}
-
-:root.dark .dropdown-item,
-:root.auto.dark .dropdown-item {
-  color: #f9fafb;
-}
-
-:root.dark .dropdown-item:hover,
-:root.auto.dark .dropdown-item:hover {
-  background: #4b5563;
-  color: #60a5fa;
-}
-
-/* Responsive Design */
-@media (max-width: 768px) {
-  .page-container {
-    padding: 1rem;
-  }
-
-  .page-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-    padding: 1.5rem;
-  }
-
-  .header-title-section {
-    width: 100%;
-  }
-
-  .action-buttons {
-    flex-direction: column;
-    gap: 0.75rem;
-  }
-
-  .action-button {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .toast {
-    right: 1rem;
-    left: 1rem;
-    top: 1rem;
-    min-width: auto;
-  }
-}
-
-@media (max-width: 480px) {
-  .page-container {
-    padding: 0.5rem;
-  }
-
-  .form-section {
-    padding: 1.5rem;
-  }
-
-  .page-header {
-    padding: 1rem;
-  }
-}
-
-/* Focus styles for accessibility */
-.action-button:focus-visible,
-.link-button:focus-visible,
-.dropdown-item:focus-visible {
-  outline: 2px solid #007aff;
-  outline-offset: 2px;
-}
-</style>
+<template>
+  <div id="picbeds-page">
+    <div class="page-container">
+      <div class="page-content">
+        <!-- Header Section -->
+        <div class="page-header">
+          <div class="header-title-section">
+            <h1
+              class="page-title"
+              @click="handleNameClick"
+            >
+              {{ picBedName }} {{ t('pages.picBedConfigs.title') }}
+            </h1>
+            <button
+              class="link-button"
+              :title="t('pages.picBedConfigs.viewDoc')"
+              @click="handleNameClick"
+            >
+              <ExternalLink :size="20" />
+            </button>
+          </div>
+          <button
+            class="action-button primary"
+            @click="handleCopyApi"
+          >
+            <Copy :size="20" />
+            {{ t('pages.picBedConfigs.copyAPI') }}
+          </button>
+        </div>
+
+        <!-- Config Form Section -->
+        <div
+          v-if="config.length > 0"
+          class="form-section"
+        >
+          <config-form
+            :id="type"
+            ref="$configForm"
+            :config="config"
+            type="uploader"
+            color-mode="white"
+          >
+            <!-- Action Buttons -->
+            <div class="action-buttons">
+              <button
+                class="action-button secondary"
+                type="button"
+                @click="handleReset"
+              >
+                <RotateCcw :size="18" />
+                {{ t('common.reset') }}
+              </button>
+
+              <button
+                class="action-button success"
+                type="button"
+                @click="handleConfirm"
+              >
+                <Check :size="18" />
+                {{ t('common.confirm') }}
+              </button>
+
+              <div
+                v-if="picBedConfigList.length > 0"
+                class="dropdown-wrapper"
+              >
+                <button
+                  class="action-button warning dropdown-trigger"
+                  type="button"
+                  @click="toggleDropdown"
+                  @blur="handleDropdownBlur"
+                >
+                  <Import :size="18" />
+                  {{ t('common.import') }}
+                  <svg
+                    class="dropdown-arrow"
+                    :class="{ 'dropdown-arrow-up': true }"
+                    width="12"
+                    height="8"
+                    viewBox="0 0 12 8"
+                    fill="none"
+                  >
+                    <path
+                      d="M1 1.5L6 6.5L11 1.5"
+                      stroke="currentColor"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </button>
+
+                <transition name="dropdown">
+                  <div
+                    v-show="dropdownVisible"
+                    class="dropdown-menu"
+                    :class="{ 'dropdown-up': true }"
+                  >
+                    <button
+                      v-for="item in picBedConfigList"
+                      :key="item._id"
+                      class="dropdown-item"
+                      @click="handleConfigImport(item)"
+                    >
+                      {{ item._configName }}
+                    </button>
+                  </div>
+                </transition>
+              </div>
+            </div>
+          </config-form>
+        </div>
+
+        <!-- Empty State -->
+        <div
+          v-else
+          class="empty-state"
+        >
+          <div class="empty-content">
+            <FolderOpen
+              class="empty-icon"
+              :size="48"
+            />
+            <h3>{{ t('pages.picBedConfigs.noConfigOptions') }}</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Loading Overlay -->
+    <div
+      v-if="loading"
+      class="loading-overlay"
+    >
+      <div class="loading-spinner" />
+      <span class="loading-text">Loading...</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import dayjs from 'dayjs'
+import { Check, Copy, ExternalLink, FolderOpen, Import, RotateCcw } from 'lucide-vue-next'
+import { onBeforeMount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+
+import ConfigForm from '@/components/UnifiedConfigForm.vue'
+import useMessage from '@/hooks/useMessage'
+import { getRawData } from '@/utils/common'
+import { configPaths } from '@/utils/configPaths'
+import { getConfig } from '@/utils/dataSender'
+import { II18nLanguage, IRPCActionType } from '@/utils/enum'
+import { picBedManualUrlList } from '@/utils/static'
+import type { IPicGoPluginConfig, IStringKeyMap, IUploaderConfigItem, IUploaderConfigListItem } from '#/types/types'
+
+const { t } = useI18n()
+const message = useMessage()
+
+const type = ref('')
+const config = ref<IPicGoPluginConfig[]>([])
+const picBedConfigList = ref<IUploaderConfigListItem[]>([])
+const picBedName = ref('')
+const loading = ref(false)
+const dropdownVisible = ref(false)
+const $route = useRoute()
+const $router = useRouter()
+const $configForm = ref<InstanceType<typeof ConfigForm> | null>(null)
+
+type.value = $route.params.type as string
+
+onBeforeMount(async () => {
+  loading.value = true
+  try {
+    await getPicBeds()
+    await getPicBedConfigList()
+  } finally {
+    loading.value = false
+  }
+})
+
+function toggleDropdown (_: Event) {
+  dropdownVisible.value = !dropdownVisible.value
+}
+
+function handleDropdownBlur () {
+  setTimeout(() => {
+    dropdownVisible.value = false
+  }, 200)
+}
+
+const handleConfirm = async () => {
+  loading.value = true
+  try {
+    const result = (await $configForm.value?.validate()) || false
+    if (result !== false) {
+      const rawResult = getRawData(result)
+      await window.electron.triggerRPC<void>(IRPCActionType.UPLOADER_UPDATE_CONFIG, type.value, rawResult?._id, rawResult)
+      message.success(t('pages.picBedConfigs.setSuccess'))
+      $router.back()
+    } else {
+      message.error(t('pages.picBedConfigs.setFailedInfo'))
+    }
+  } catch (error) {
+    console.error('Failed to save configuration:', error)
+    message.error(t('pages.picBedConfigs.setFailedInfo'))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function getPicBeds () {
+  try {
+    const result = await window.electron.triggerRPC<any>(IRPCActionType.PICBED_GET_PICBED_CONFIG, $route.params.type)
+    config.value = result.config
+    picBedName.value = result.name
+  } catch (error) {
+    console.error('Failed to get picbed config:', error)
+    message.error(t('pages.picBedConfigs.loadConfigFailed'))
+  }
+}
+
+async function getPicBedConfigList () {
+  try {
+    const res = (await window.electron.triggerRPC<IUploaderConfigItem>(IRPCActionType.PICBED_GET_CONFIG_LIST, type.value)) || undefined
+    const configList = res?.configList || []
+    picBedConfigList.value = configList.filter(item => item._id !== $route.params.configId)
+  } catch (error) {
+    console.error('Failed to get config list:', error)
+    message.error(t('pages.picBedConfigs.loadPicBedListFailed'))
+  }
+}
+
+async function handleConfigImport (configItem: IUploaderConfigListItem) {
+  try {
+    const { _id, _configName, _updatedAt, _createdAt, ...rest } = configItem
+    for (const key in rest) {
+      if (Object.prototype.hasOwnProperty.call(rest, key)) {
+        const value = rest[key]
+        $configForm.value?.updateRuleForm(key, value)
+      }
+    }
+    $configForm.value?.updateRuleForm('_configName', dayjs().format('YYYYMMDDHHmmss'))
+    dropdownVisible.value = false
+    message.success(t('pages.picBedConfigs.importConfigSuccess'))
+  } catch (error) {
+    console.error('Failed to import configuration:', error)
+    message.error(t('pages.picBedConfigs.importConfigFailed'))
+  }
+}
+
+const handleReset = async () => {
+  loading.value = true
+  try {
+    await window.electron.triggerRPC<void>(IRPCActionType.UPLOADER_RESET_CONFIG, type.value, $route.params.configId)
+    message.success(t('pages.picBedConfigs.resetSuccess'))
+    setTimeout(() => {
+      $router.back()
+    }, 1000)
+  } catch (error) {
+    console.error('Failed to reset configuration:', error)
+    message.error(t('pages.picBedConfigs.resetFailed'))
+  } finally {
+    loading.value = false
+  }
+}
+
+async function handleNameClick () {
+  try {
+    const lang = (await getConfig(configPaths.settings.language)) || II18nLanguage.ZH_CN
+    const url = picBedManualUrlList[lang === II18nLanguage.EN ? 'en' : 'zh_cn'][$route.params.type as string]
+    if (url) {
+      window.electron.sendRPC(IRPCActionType.OPEN_URL, url)
+    }
+  } catch (error) {
+    console.error('Failed to open documentation:', error)
+    message.error(t('pages.picBedConfigs.viewDocFailed'))
+  }
+}
+
+async function handleCopyApi () {
+  try {
+    const { port = 36677, host = '127.0.0.1' } = (await getConfig<IStringKeyMap>(configPaths.settings.server)) || {}
+    const serverKey = (await getConfig(configPaths.settings.serverKey)) || ''
+    const uploader = ((await getConfig(configPaths.uploader)) as IStringKeyMap) || {}
+    const picBedConfigList = uploader[$route.params.type as string].configList || []
+    const picBedConfig = picBedConfigList.find((item: IUploaderConfigListItem) => item._id === $route.params.configId)
+
+    if (!picBedConfig) {
+      message.error(t('pages.picBedConfigs.noConfigs'))
+      return
+    }
+
+    const apiUrl = `http://${host === '0.0.0.0' ? '127.0.0.1' : host}:${port}/upload?picbed=${$route.params.type}&configName=${picBedConfig._configName}${serverKey ? `&key=${serverKey}` : ''}`
+
+    try {
+      window.electron.clipboard.writeText(apiUrl)
+      message.success(`${t('pages.picBedConfigs.copyAPISucceed')} ${apiUrl}`)
+    } catch (clipboardError) {
+      console.error('Failed to copy to clipboard:', clipboardError)
+      message.error(t('pages.picBedConfigs.copyAPIFailed'))
+    }
+  } catch (error) {
+    console.error('Failed to generate API URL:', error)
+    message.error(t('pages.picBedConfigs.copyAPIFailed'))
+  }
+}
+</script>
+
+<script lang="ts">
+export default {
+  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;
+}
+
+.page-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.page-content {
+  background: var(--color-background-secondary);
+  border-radius: 16px;
+  backdrop-filter: blur(20px);
+  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);
+}
+
+/* Header Section */
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem 2rem 1.5rem;
+  border-bottom: 1px solid rgba(229, 231, 235, 0.8);
+  background: var(--color-background-secondary);
+}
+
+.header-title-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.page-title {
+  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;
+}
+
+.page-title:hover {
+  transform: translateY(-1px);
+  filter: brightness(1.1);
+}
+
+.link-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 8px;
+  background: rgba(59, 130, 246, 0.1);
+  color: #3b82f6;
+  cursor: pointer;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.link-button:hover {
+  background: rgba(59, 130, 246, 0.2);
+  transform: translateY(-1px);
+}
+
+/* Action Buttons */
+.action-button {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 12px;
+  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;
+}
+
+.action-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.6s;
+}
+
+.action-button:hover::before {
+  left: 100%;
+}
+
+.action-button.primary {
+  background: var(--color-blue-common);
+  color: white;
+  box-shadow: 0 2px 2px rgba(0, 122, 255, 0.3);
+}
+
+.action-button.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 4px rgba(0, 122, 255, 0.4);
+}
+
+.action-button.secondary {
+  background: var(--color-surface-elevated);
+  color: #475569;
+  border: 1px solid #e2e8f0;
+}
+
+.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);
+}
+
+.action-button.success {
+  background: var(--color-success);
+  color: white;
+  box-shadow: 0 4px 4px rgba(16, 185, 129, 0.3);
+}
+
+.action-button.success:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 6px rgba(16, 185, 129, 0.4);
+}
+
+.action-button.warning {
+  background: var(--color-warning);
+  color: white;
+  position: relative;
+}
+
+.action-button.warning:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
+}
+
+.dropdown-arrow {
+  margin-left: 0.5rem;
+  transition: transform 0.2s ease;
+}
+
+.dropdown-arrow-up {
+  transform: rotate(180deg);
+}
+
+.dropdown-trigger:hover .dropdown-arrow:not(.dropdown-arrow-up) {
+  transform: rotate(180deg);
+}
+
+.dropdown-trigger:hover .dropdown-arrow.dropdown-arrow-up {
+  transform: rotate(0deg);
+}
+
+/* Form Section */
+.form-section {
+  padding: 2rem;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+  flex-wrap: wrap;
+}
+
+/* Dropdown */
+.dropdown-wrapper {
+  position: relative;
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  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;
+}
+
+.dropdown-menu.dropdown-up {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: none;
+  background: transparent;
+  color: #374151;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-align: left;
+}
+
+.dropdown-item:hover {
+  background: #f3f4f6;
+  color: #007aff;
+}
+
+.dropdown-item:last-child {
+  border-bottom: none;
+}
+
+/* Empty State */
+.empty-state {
+  padding: 4rem 2rem;
+  text-align: center;
+}
+
+.empty-content {
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.empty-icon {
+  color: #9ca3af;
+  margin-bottom: 1.5rem;
+}
+
+.empty-content h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #374151;
+  margin: 0 0 0.5rem;
+}
+
+.empty-content p {
+  color: #6b7280;
+  margin: 0;
+  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);
+  backdrop-filter: blur(4px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  z-index: 2000;
+}
+
+.loading-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 3px solid rgba(255, 255, 255, 0.3);
+  border-top: 3px solid white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.loading-text {
+  color: white;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Transitions */
+.dropdown-enter-active,
+.dropdown-leave-active {
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dropdown-enter-from,
+.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+
+.dropdown-up.dropdown-enter-from,
+.dropdown-up.dropdown-leave-to {
+  opacity: 0;
+  transform: translateY(0.5rem);
+}
+
+/* Animations */
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Dark mode adjustments */
+:root.dark #picbeds-page,
+:root.auto.dark #picbeds-page {
+  background: var(--color-background-tertiar);
+}
+
+:root.dark .page-content,
+:root.auto.dark .page-content {
+  background: var(--color-background-secondary);
+  border-color: rgba(75, 85, 99, 0.3);
+}
+
+:root.dark .page-header,
+:root.auto.dark .page-header {
+  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;
+}
+
+:root.dark .dropdown-menu.dropdown-up,
+:root.auto.dark .dropdown-menu.dropdown-up {
+  background: #374151;
+  border-color: #4b5563;
+}
+
+:root.dark .dropdown-item,
+:root.auto.dark .dropdown-item {
+  color: #f9fafb;
+}
+
+:root.dark .dropdown-item:hover,
+:root.auto.dark .dropdown-item:hover {
+  background: #4b5563;
+  color: #60a5fa;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .page-container {
+    padding: 1rem;
+  }
+
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.5rem;
+  }
+
+  .header-title-section {
+    width: 100%;
+  }
+
+  .action-buttons {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .action-button {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .toast {
+    right: 1rem;
+    left: 1rem;
+    top: 1rem;
+    min-width: auto;
+  }
+}
+
+@media (max-width: 480px) {
+  .page-container {
+    padding: 0.5rem;
+  }
+
+  .form-section {
+    padding: 1.5rem;
+  }
+
+  .page-header {
+    padding: 1rem;
+  }
+}
+
+/* Focus styles for accessibility */
+.action-button:focus-visible,
+.link-button:focus-visible,
+.dropdown-item:focus-visible {
+  outline: 2px solid #007aff;
+  outline-offset: 2px;
+}
+</style>
diff --git a/src/renderer/public/errorLoading.png b/src/renderer/public/errorLoading.png
index 2c0768b7..0a352a9b 100644
Binary files a/src/renderer/public/errorLoading.png and b/src/renderer/public/errorLoading.png differ