From 11ac8b37b407dd4ee8758daf7a8452ebb72be140 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Tue, 20 Jan 2026 17:43:35 +0800
Subject: [PATCH] :construction: WIP(custom): migrate to tailwind, refator
 gallery page

---
 src/renderer/components/VirtualScroller.vue |   12 +-
 src/renderer/pages/Gallery.vue              |  628 ++++----
 src/renderer/pages/css/Gallery.css          | 1563 +------------------
 src/renderer/pages/css/UploadPage.css       |   18 +-
 4 files changed, 433 insertions(+), 1788 deletions(-)

diff --git a/src/renderer/components/VirtualScroller.vue b/src/renderer/components/VirtualScroller.vue
index ea825870..de2505cd 100644
--- a/src/renderer/components/VirtualScroller.vue
+++ b/src/renderer/components/VirtualScroller.vue
@@ -1,15 +1,19 @@
 <template>
-  <div ref="containerRef" class="virtual-scroller" @scroll="handleScroll">
-    <div class="virtual-scroller-content" :style="contentStyles">
+  <div
+    ref="containerRef"
+    class="relative overflow-auto will-change-transform contain-[layout_style_paint] [-webkit-overflow-scrolling:touch]"
+    @scroll="handleScroll"
+  >
+    <div class="relative w-full" :style="contentStyles">
       <div
-        class="virtual-scroller-viewport"
+        class="group absolute inset-[0_auto_auto_0] w-full will-change-transform backface-hidden [.is-grid]:grid [.is-grid]:auto-rows-(--row-height,1px) [.is-grid]:grid-cols-[repeat(var(--items-per-row,1),minmax(0,1fr))] [.is-grid]:gap-(--item-gap,0)"
         :class="{ 'is-grid': isGridMode, 'is-list': !isGridMode }"
         :style="viewportStyle"
       >
         <div
           v-for="realIndex in visibleIndexes"
           :key="items[realIndex] && items[realIndex][keyField || 'id'] ? items[realIndex][keyField || 'id'] : realIndex"
-          class="virtual-scroller-item"
+          class="w-full"
           :style="itemStyle"
         >
           <slot :item="items[realIndex]" :index="realIndex" />
diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue
index d338b5f5..bf1aa801 100644
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -1,306 +1,367 @@
 <template>
-  <div class="gallery-container">
+  <div class="relative no-scrollbar flex h-full w-full items-center justify-center">
     <!-- Header Card -->
-    <div class="gallery-card header-card">
-      <div class="card-header">
-        <div class="header-content">
-          <div class="header-icon">
+    <div
+      class="relative z-1 no-scrollbar flex h-full w-full flex-col items-center justify-start gap-4 overflow-auto rounded-xl border-none p-4 shadow-sm"
+    >
+      <div
+        class="flex w-full items-center justify-between gap-4 rounded-2xl border border-border-secondary px-6 py-2 shadow-md max-md:items-stretch max-md:p-5"
+      >
+        <div class="flex flex-1 items-center gap-4">
+          <div class="flex items-center text-accent">
             <ImagesIcon :size="24" />
           </div>
           <div>
-            <h1>{{ t('pages.gallery.title') }}</h1>
-            <p v-if="selectedCount > 0">{{ `${selectedCount}/${filterList.length} ${t('pages.gallery.selected')}` }}</p>
-            <p v-else>{{ `${filterList.length} ${t('pages.gallery.images')}` }}</p>
+            <h1 class="m-0 text-2xl font-semibold tracking-tight text-main">{{ t('pages.gallery.title') }}</h1>
+            <p v-if="selectedCount > 0" class="m-0 text-sm text-secondary">
+              {{ `${selectedCount}/${filterList.length} ${t('pages.gallery.selected')}` }}
+            </p>
+            <p v-else class="m-0 text-sm text-secondary">{{ `${filterList.length} ${t('pages.gallery.images')}` }}</p>
           </div>
         </div>
-        <div class="header-actions">
-          <div class="grid-size-control">
-            <GridIcon :size="14" />
+        <div class="flex flex-wrap items-center gap-2">
+          <div class="flex items-center gap-1.5 rounded-md border border-border-secondary px-2 py-1.5">
+            <GridIcon :size="14" class="text-main" />
             <input
               v-model.number="userGridColumns"
               type="range"
               min="1"
               max="15"
               step="1"
-              class="grid-slider"
+              class="grid-slider h-[4px] w-[70px] cursor-pointer appearance-none rounded-[2px] bg-(--color-background-tertiary) outline-none [&::-moz-range-thumb]:h-[14px] [&::-moz-range-thumb]:w-[14px] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-accent [&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-200 [&::-webkit-slider-thumb]:h-[15px] [&::-webkit-slider-thumb]:w-[15px] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-accent [&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-200 hover:[&::-webkit-slider-thumb]:scale-110 hover:[&::-webkit-slider-thumb]:shadow-[0_0_0_2px_rgba(var(--color-accent-rgb),0.4)]"
               :title="t('pages.gallery.gridSize')"
             />
           </div>
-          <div class="sync-delete-toggle">
-            <span class="toggle-label">{{ t('pages.gallery.isAlwaysForceReload') }}</span>
-            <label class="custom-switch">
-              <input v-model="isAlwaysForceReload" type="checkbox" @change="handleIsAlwaysForceReload" />
-              <span class="switch-slider" />
+          <div class="flex items-center gap-2">
+            <span class="text-sm text-secondary">{{ t('pages.gallery.isAlwaysForceReload') }}</span>
+            <label class="relative inline-block h-[20px] w-[44px]">
+              <input
+                v-model="isAlwaysForceReload"
+                class="peer/fir h-0 w-0 opacity-0"
+                type="checkbox"
+                @change="handleIsAlwaysForceReload"
+              />
+              <span
+                class="switch-slider peer-checked/fir:bg-accent peer-checked/fir:bg-none! peer-checked/fir:before:translate-x-[22px]"
+              />
             </label>
           </div>
-          <div class="sync-delete-toggle">
-            <span class="toggle-label">{{ t('pages.gallery.syncDelete') }}</span>
-            <label class="custom-switch">
-              <input v-model="deleteCloud" type="checkbox" @change="handleDeleteCloudFile" />
-              <span class="switch-slider" />
+          <div class="flex items-center gap-2">
+            <span class="text-sm text-secondary">{{ t('pages.gallery.syncDelete') }}</span>
+            <label class="relative inline-block h-[20px] w-[44px]">
+              <input
+                v-model="deleteCloud"
+                class="peer/sec h-0 w-0 opacity-0"
+                type="checkbox"
+                @change="handleDeleteCloudFile"
+              />
+              <span
+                class="switch-slider peer-checked/sec:bg-accent peer-checked/sec:bg-none! peer-checked/sec:before:translate-x-[22px]"
+              />
             </label>
           </div>
-          <button class="action-button view-mode-toggle" :title="getViewModeLabel()" @click="toggleViewMode">
+          <button class="head-action-button relative" :title="getViewModeLabel()" @click="toggleViewMode">
             <component :is="getViewModeIcon()" :size="16" />
-            {{ getViewModeLabel() }}
+            <span class="mt-0.5">{{ getViewModeLabel() }}</span>
           </button>
-          <button class="action-button" @click="toggleHandleBar">
+          <button class="head-action-button" @click="toggleHandleBar">
             <ChevronDownIcon v-if="!handleBarActive" :size="16" />
             <ChevronUpIcon v-else :size="16" />
-            {{ t('pages.gallery.hideFilters') }}
+            <span class="mt-0.5">{{ t('pages.gallery.hideFilters') }}</span>
           </button>
-          <button class="action-button" @click="refreshPage">
+          <button class="head-action-button" @click="refreshPage">
             <RefreshCwIcon :size="16" />
-            {{ t('pages.gallery.refresh') }}
+            <span class="mt-0.5">{{ t('pages.gallery.refresh') }}</span>
           </button>
         </div>
       </div>
-    </div>
 
-    <!-- Filter Controls Card -->
-    <transition name="filter-slide">
-      <div v-show="handleBarActive" class="gallery-card filter-card">
-        <div class="filter-content">
-          <div class="filter-row">
-            <div class="filter-group">
-              <label class="filter-label">{{ t('pages.gallery.picBedType') }}</label>
-              <div class="custom-multiselect">
-                <button
-                  class="multiselect-trigger"
-                  :class="{ active: picBedDropdownOpen }"
-                  @click="togglePicBedDropdown($event)"
-                >
-                  <span v-if="choosedPicBed.length === 0">{{ t('pages.gallery.chooseShowedPicBed') }}</span>
-                  <span v-else>{{ choosedPicBed.length }} {{ t('pages.gallery.selected') }}</span>
-                  <ChevronDownIcon :size="16" />
-                </button>
-                <div v-show="picBedDropdownOpen" class="multiselect-dropdown">
-                  <label v-for="item in filteredPicBedG" :key="item.type" class="multiselect-option">
-                    <input v-model="choosedPicBed" type="checkbox" :value="item.type" />
-                    {{ item.name }}
-                  </label>
-                </div>
-              </div>
-            </div>
-
-            <div class="filter-group">
-              <label class="filter-label">{{ t('pages.gallery.dateRange') }}</label>
-              <div class="date-range-picker">
-                <input v-model="dateRangeStart" type="date" class="date-input" placeholder="Start date" />
-                <span class="date-separator">-</span>
-                <input v-model="dateRangeEnd" type="date" class="date-input" placeholder="End date" />
-              </div>
-            </div>
-
-            <div class="filter-group">
-              <label class="filter-label">{{ t('pages.gallery.pasteFormat') }}</label>
-              <select v-model="pasteStyle" class="custom-select" @change="handlePasteStyleChange">
-                <option v-for="(value, key) in pasteStyleMap" :key="key" :value="value" class="select-option">
-                  {{ key }}
-                </option>
-              </select>
-            </div>
-
-            <div class="filter-group">
-              <label class="filter-label">{{ t('pages.gallery.urlType') }}</label>
-              <select v-model="useShortUrl" class="custom-select" @change="handleUseShortUrlChange">
-                <option v-for="(value, key) in shortURLMap" :key="key" :value="value" class="select-option">
-                  {{ key }}
-                </option>
-              </select>
-            </div>
-
-            <div class="filter-group">
-              <label class="filter-label">{{ t('pages.gallery.sort') }}</label>
-              <div class="sort-dropdown">
-                <button class="sort-button" :class="{ active: sortDropdownOpen }" @click="toggleSortDropdown($event)">
-                  <SortAscIcon :size="14" />
-                  {{ t(`pages.gallery.sortBy.${currentSortField}`) }}
-                  <ChevronDownIcon :size="14" />
-                </button>
-                <div v-show="sortDropdownOpen" class="sort-options">
-                  <button
-                    v-for="key in ['name', 'ext', 'time', 'check']"
-                    :key="key"
-                    class="sort-option"
-                    @click="sortFile(key as any)"
-                  >
-                    {{ t(`pages.gallery.sortBy.${key}`) }}
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!-- Second Row - Search and Actions -->
-          <div class="filter-row">
-            <div class="search-group">
-              <div class="search-input-wrapper">
-                <SearchIcon :size="16" class="search-icon" />
-                <input
-                  v-model="searchText"
-                  type="text"
-                  class="search-input"
-                  :placeholder="$t('pages.gallery.searchFilename')"
-                />
-                <button v-if="searchText" class="clear-button" @click="cleanSearch">
-                  <XIcon :size="15" />
-                </button>
-              </div>
-            </div>
-
-            <div class="search-group">
-              <div class="search-input-wrapper">
-                <LinkIcon :size="16" class="search-icon" />
-                <input
-                  v-model="searchTextURL"
-                  type="text"
-                  class="search-input"
-                  :placeholder="t('pages.gallery.searchUrl')"
-                />
-                <button v-if="searchTextURL" class="clear-button" @click="cleanSearchUrl">
-                  <XIcon :size="14" />
-                </button>
-              </div>
-            </div>
-
-            <div class="action-buttons">
-              <button class="action-btn copy-btn" :class="{ active: isMultiple(choosedList) }" @click="multiCopy">
-                <ClipboardIcon :size="16" />
-                {{ t('pages.gallery.copy') }}
-              </button>
-              <button
-                class="action-btn edit-btn"
-                :class="{ active: filterList.length > 0 }"
-                @click="() => (isShowBatchRenameDialog = true)"
-              >
-                <EditIcon :size="16" />
-                {{ t('pages.gallery.edit') }}
-              </button>
-              <button class="action-btn delete-btn" :class="{ active: isMultiple(choosedList) }" @click="multiRemove">
-                <TrashIcon :size="16" />
-                {{ `${t('pages.gallery.delete')}${selectedCount > 0 ? ` (${selectedCount})` : ''}` }}
-              </button>
-              <button class="action-btn select-btn" :class="{ active: filterList.length > 0 }" @click="toggleSelectAll">
-                <CheckSquareIcon :size="16" />
-                {{ isAllSelected ? t('pages.gallery.cancel') : t('pages.gallery.selectAll') }}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-
-    <!-- Gallery Grid -->
-    <div class="gallery-card gallery-content">
-      <div v-if="filterList.length === 0" class="empty-state">
-        <ImageIcon :size="64" class="empty-icon" />
-        <h3>{{ t('pages.gallery.noImagesFound') }}</h3>
-        <p>{{ t('pages.gallery.tryAdjustingFilters') }}</p>
-      </div>
-
-      <VirtualScroller
-        v-else
-        :key="componentKey"
-        ref="virtualScrollerRef"
-        :view-mode="viewMode"
-        class="virtual-gallery-scroller"
-        :items="filterList"
-        :item-height="300"
-        :grid-breakpoints="effectiveGridBreakpoints"
-        key-field="key"
+      <!-- Filter Controls Card -->
+      <div
+        v-show="handleBarActive"
+        class="flex w-full flex-wrap items-center justify-between gap-2 rounded-2xl border border-border-secondary px-6 py-2 shadow-md max-md:items-stretch max-md:p-5"
       >
-        <template #default="{ item, index }">
-          <div
-            class="gallery-item"
-            :class="{ selected: choosedList[item.id || ''] }"
-            @click="handleChooseImage(!choosedList[item.id || ''], index)"
-          >
-            <div class="image-container" @click.stop="zoomImage(index)">
-              <img
-                :src="
-                  imageErrorStates[item.key || '']
-                    ? './errorLoading.png'
-                    : isAlwaysForceReload
-                      ? addCacheBustParam(item.src)
-                      : item.src
-                "
-                class="gallery-image"
-                :class="{ loading: !imageLoadStates[item.key || ''] }"
-                @load="onImageLoad(item.key || '')"
-                @error="onImageError(item.key || '')"
-              />
-              <div v-if="!imageLoadStates[item.key || '']" class="image-loader">
-                <div class="loader-spinner" />
-              </div>
-            </div>
-
-            <div class="image-info">
-              <div class="image-name" :title="item.fileName">
-                {{ formatFileName(item.fileName || '') }}
-              </div>
-
-              <div class="image-actions">
-                <div class="action-icons">
-                  <button :title="t('pages.gallery.copy')" class="icon-button copy-icon" @click.stop="copy(item)">
-                    <ClipboardIcon :size="16" />
-                  </button>
-                  <button :title="t('pages.gallery.edit')" class="icon-button edit-icon" @click.stop="openDialog(item)">
-                    <EditIcon :size="16" />
-                  </button>
-                  <button
-                    :title="t('pages.gallery.delete')"
-                    class="icon-button delete-icon"
-                    @click.stop="remove(item, index)"
-                  >
-                    <TrashIcon :size="16" />
-                  </button>
-                </div>
-
-                <label class="custom-checkbox" @click.stop>
-                  <input
-                    v-model="choosedList[item.id ? item.id : '']"
-                    type="checkbox"
-                    @change="e => handleChooseImage((e.target as HTMLInputElement).checked, index)"
-                  />
-                  <span class="checkbox-mark" />
+        <div class="mb-1 flex w-full flex-wrap items-start gap-3">
+          <div class="filter-group">
+            <label class="filter-label">{{ t('pages.gallery.picBedType') }}</label>
+            <div class="custom-multiselect relative">
+              <button
+                class="flex h-[28px] w-full cursor-pointer items-center justify-between rounded-md border border-border-secondary px-2 py-1.5 text-sm leading-[1.4] text-main transition-all duration-fast ease-apple hover:border-accent-hover focus:[.active]:border-accent-hover focus:[.active]:shadow-sm"
+                :class="{ active: picBedDropdownOpen }"
+                @click="togglePicBedDropdown($event)"
+              >
+                <span v-if="choosedPicBed.length === 0">{{ t('pages.gallery.chooseShowedPicBed') }}</span>
+                <span v-else>{{ choosedPicBed.length }} {{ t('pages.gallery.selected') }}</span>
+                <ChevronDownIcon :size="16" />
+              </button>
+              <div
+                v-show="picBedDropdownOpen"
+                class="multiselect-dropdown shadow-lg; fixed z-1000 mt-[2px] no-scrollbar max-h-[280px] min-w-[185px] overflow-y-auto rounded-md border border-border-secondary bg-bg-tertiary px-2 py-1.5 text-main"
+              >
+                <label
+                  v-for="item in filteredPicBedG"
+                  :key="item.type"
+                  class="flex min-h-[unset] cursor-pointer items-center justify-between px-2 py-1 text-sm leading-[1.4] transition-all duration-fast ease-apple hover:bg-accent-hover"
+                >
+                  <input v-model="choosedPicBed" type="checkbox" :value="item.type" class="m-0" />
+                  {{ item.name }}
                 </label>
               </div>
             </div>
           </div>
-        </template>
-      </VirtualScroller>
-    </div>
 
+          <div class="filter-group">
+            <label class="filter-label">{{ t('pages.gallery.dateRange') }}</label>
+            <div class="flex w-full flex-wrap items-center gap-2 max-md:items-start">
+              <input v-model="dateRangeStart" type="date" class="date-input" placeholder="Start date" />
+              <span class="shrink-0 font-medium text-secondary">-</span>
+              <input v-model="dateRangeEnd" type="date" class="date-input" placeholder="End date" />
+            </div>
+          </div>
+
+          <div class="filter-group">
+            <label class="filter-label">{{ t('pages.gallery.pasteFormat') }}</label>
+            <select v-model="pasteStyle" class="custom-select" @change="handlePasteStyleChange">
+              <option
+                v-for="(value, key) in pasteStyleMap"
+                :key="key"
+                :value="value"
+                class="bg-bg-tertiary text-sm text-main"
+              >
+                {{ key }}
+              </option>
+            </select>
+          </div>
+
+          <div class="filter-group">
+            <label class="filter-label">{{ t('pages.gallery.urlType') }}</label>
+            <select v-model="useShortUrl" class="custom-select" @change="handleUseShortUrlChange">
+              <option
+                v-for="(value, key) in shortURLMap"
+                :key="key"
+                :value="value"
+                class="bg-bg-tertiary text-sm text-main"
+              >
+                {{ key }}
+              </option>
+            </select>
+          </div>
+
+          <div class="filter-group">
+            <label class="filter-label">{{ t('pages.gallery.sort') }}</label>
+            <div class="sort-dropdown relative">
+              <button class="sort-button" :class="{ active: sortDropdownOpen }" @click="toggleSortDropdown($event)">
+                <SortAscIcon :size="14" />
+                {{ t(`pages.gallery.sortBy.${currentSortField}`) }}
+                <ChevronDownIcon :size="14" />
+              </button>
+              <div
+                v-show="sortDropdownOpen"
+                class="sort-options fixed z-10 mt-[2px] min-w-[150px] overflow-hidden rounded-md border border-border-secondary bg-bg-tertiary shadow-lg"
+              >
+                <button
+                  v-for="key in ['name', 'ext', 'time', 'check']"
+                  :key="key"
+                  class="block min-h-[unset] w-full cursor-pointer border-none bg-bg-tertiary px-2 py-1 text-center text-sm leading-[1.4] text-main transition-all duration-fast ease-apple hover:bg-accent-hover"
+                  @click="sortFile(key as any)"
+                >
+                  {{ t(`pages.gallery.sortBy.${key}`) }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Second Row - Search and Actions -->
+        <div class="mb-1 flex w-full flex-wrap items-start gap-3">
+          <div class="relative flex min-w-[100px] flex-row items-center gap-2">
+            <SearchIcon :size="16" class="absolute left-3 z-1 text-secondary" />
+            <input
+              v-model="searchText"
+              type="text"
+              class="search-input"
+              :placeholder="$t('pages.gallery.searchFilename')"
+            />
+            <button v-if="searchText" class="clear-button" @click="cleanSearch">
+              <XIcon :size="15" />
+            </button>
+          </div>
+
+          <div class="relative flex min-w-[100px] flex-row items-center gap-2">
+            <LinkIcon :size="16" class="absolute left-3 z-1 text-secondary" />
+            <input
+              v-model="searchTextURL"
+              type="text"
+              class="search-input"
+              :placeholder="t('pages.gallery.searchUrl')"
+            />
+            <button v-if="searchTextURL" class="clear-button" @click="cleanSearchUrl">
+              <XIcon :size="14" />
+            </button>
+          </div>
+
+          <div class="flex flex-1 flex-wrap gap-3">
+            <button class="action-btn copy-btn" :class="{ active: isMultiple(choosedList) }" @click="multiCopy">
+              <ClipboardIcon :size="16" />
+              <span class="mt-1"> {{ t('pages.gallery.copy') }}</span>
+            </button>
+            <button
+              class="action-btn edit-btn"
+              :class="{ active: filterList.length > 0 }"
+              @click="() => (isShowBatchRenameDialog = true)"
+            >
+              <EditIcon :size="16" />
+              <span class="mt-1"> {{ t('pages.gallery.edit') }}</span>
+            </button>
+            <button class="action-btn delete-btn" :class="{ active: isMultiple(choosedList) }" @click="multiRemove">
+              <TrashIcon :size="16" />
+              <span class="mt-1">
+                {{ `${t('pages.gallery.delete')}${selectedCount > 0 ? ` (${selectedCount})` : ''}` }}</span
+              >
+            </button>
+            <button class="action-btn select-btn" :class="{ active: filterList.length > 0 }" @click="toggleSelectAll">
+              <CheckSquareIcon :size="16" />
+              <span class="mt-1">{{ isAllSelected ? t('pages.gallery.cancel') : t('pages.gallery.selectAll') }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Gallery Grid -->
+      <div
+        class="no-scrollbar flex min-h-[500px] w-full flex-1 flex-col flex-wrap items-center justify-center gap-2 overflow-auto rounded-2xl border border-border-secondary p-1 shadow-md"
+      >
+        <div v-if="filterList.length === 0" class="flex flex-col items-center justify-center px-8 py-16 text-center">
+          <ImageIcon :size="64" class="mb-4 text-accent" />
+          <h3 class="mx-0 mt-0 mb-2 text-xl font-semibold text-main">{{ t('pages.gallery.noImagesFound') }}</h3>
+          <p class="m-0 text-secondary">{{ t('pages.gallery.tryAdjustingFilters') }}</p>
+        </div>
+
+        <VirtualScroller
+          v-else
+          :key="componentKey"
+          ref="virtualScrollerRef"
+          :view-mode="viewMode"
+          class="virtual-gallery-scroller min-h-0 w-full flex-1 p-1"
+          :items="filterList"
+          :item-height="300"
+          :grid-breakpoints="effectiveGridBreakpoints"
+          key-field="key"
+        >
+          <template #default="{ item, index }">
+            <div
+              class="group/image m-0 box-border flex h-[calc(100%-8px)] w-full cursor-pointer flex-col overflow-hidden rounded-lg border border-border-secondary transition-all duration-fast ease-apple hover:-translate-y-[2px] hover:border-border hover:shadow-md [.selected]:border-2 [.selected]:border-accent [.selected]:shadow-md"
+              :class="{ selected: choosedList[item.id || ''] }"
+              @click="handleChooseImage(!choosedList[item.id || ''], index)"
+            >
+              <div
+                class="relative flex aspect-auto min-h-0 flex-1 items-center justify-center overflow-hidden"
+                @click.stop="zoomImage(index)"
+              >
+                <img
+                  :src="
+                    imageErrorStates[item.key || '']
+                      ? './errorLoading.png'
+                      : isAlwaysForceReload
+                        ? addCacheBustParam(item.src)
+                        : item.src
+                  "
+                  class="h-full w-full object-contain transition-all duration-fast ease-apple"
+                  :class="{ loading: !imageLoadStates[item.key || ''] }"
+                  @load="onImageLoad(item.key || '')"
+                  @error="onImageError(item.key || '')"
+                />
+                <div
+                  v-if="!imageLoadStates[item.key || '']"
+                  class="absolute inset-0 flex items-center justify-center bg-surface-elevated"
+                >
+                  <div
+                    class="h-[24px] w-[24px] animate-spin rounded-full border-2 border-t-2 border-border-secondary border-t-accent"
+                  />
+                </div>
+              </div>
+
+              <div class="flex min-h-[80px] shrink-0 flex-col justify-between p-3">
+                <div
+                  class="mb-3 overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap text-main"
+                  :title="(item.fileName || '').toString().length > 30 ? item.fileName || '' : ''"
+                >
+                  {{ formatFileName(item.fileName || '') }}
+                </div>
+
+                <div class="flex items-center justify-between">
+                  <div class="flex gap-2">
+                    <button :title="t('pages.gallery.copy')" class="icon-button copy-icon" @click.stop="copy(item)">
+                      <ClipboardIcon :size="16" />
+                    </button>
+                    <button
+                      :title="t('pages.gallery.edit')"
+                      class="icon-button edit-icon"
+                      @click.stop="openDialog(item)"
+                    >
+                      <EditIcon :size="16" />
+                    </button>
+                    <button
+                      :title="t('pages.gallery.delete')"
+                      class="icon-button delete-icon"
+                      @click.stop="remove(item, index)"
+                    >
+                      <TrashIcon :size="16" />
+                    </button>
+                  </div>
+
+                  <label class="relative flex cursor-pointer items-center" @click.stop>
+                    <input
+                      v-model="choosedList[item.id ? item.id : '']"
+                      type="checkbox"
+                      class="peer absolute h-0 w-0 cursor-pointer opacity-0"
+                      @change="e => handleChooseImage((e.target as HTMLInputElement).checked, index)"
+                    />
+                    <span
+                      class="relative inline-block h-[16px] w-[16px] rounded-sm border-2 border-border transition-all duration-fast ease-apple peer-checked:border-accent-hover peer-checked:bg-accent peer-checked:after:absolute peer-checked:after:top-[-2px] peer-checked:after:left-px peer-checked:after:text-[12px] peer-checked:after:font-bold peer-checked:after:text-white peer-checked:after:content-['✓']"
+                    />
+                  </label>
+                </div>
+              </div>
+            </div>
+          </template>
+        </VirtualScroller>
+      </div>
+    </div>
     <!-- Custom Image Preview Modal -->
     <transition name="modal">
       <div
         v-if="gallerySliderControl.visible"
-        class="image-preview-modal"
+        class="image-preview-modal fixed inset-0 z-1000 flex items-center justify-center outline-none"
         tabindex="0"
         @click.stop
         @wheel="handleImageWheel"
         @keydown="handleKeydown"
       >
-        <div class="modal-backdrop" :class="advancedAnimation" />
-        <div class="modal-content">
-          <button class="modal-close" @click="handleClose">
+        <div class="absolute inset-0 bg-black/50" :class="{ 'advanced-animation': enableAdvancedAnimation }" />
+        <div class="relative max-h-[90vh] max-w-[90vw] overflow-hidden rounded-xl bg-surface shadow-lg">
+          <button
+            class="absolute top-4 right-4 z-10 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full border border-white bg-danger/90 text-white hover:bg-danger hover:text-white"
+            @click="handleClose"
+          >
             <XIcon :size="24" />
           </button>
 
           <!-- Zoom controls -->
-          <div class="zoom-controls">
+          <div class="absolute top-4 left-4 z-10 flex items-center gap-2 rounded-lg bg-black/70 p-2">
             <button class="zoom-btn" :disabled="imagePreviewState.scale <= 0.1" @click="zoomOut">
               <span>-</span>
             </button>
-            <span class="zoom-level">{{ Math.round(imagePreviewState.scale * 100) }}%</span>
+            <span class="min-w-[50px] text-center text-sm font-medium text-white"
+              >{{ Math.round(imagePreviewState.scale * 100) }}%</span
+            >
             <button class="zoom-btn" :disabled="imagePreviewState.scale >= 5" @click="zoomIn">
               <span>+</span>
             </button>
             <button class="zoom-btn reset-btn" @click="resetImageTransform">Reset</button>
           </div>
 
-          <div class="image-navigation">
+          <div class="relative flex items-center">
             <button
               class="nav-button prev"
               :disabled="gallerySliderControl.index === 0"
@@ -310,7 +371,7 @@
             </button>
 
             <div
-              class="image-viewer"
+              class="relative flex h-[80vh] w-[90vw] items-center justify-center overflow-hidden bg-black select-none active:cursor-grab!"
               @mousedown="handleImageMouseDown"
               @mousemove="handleImageMouseMove"
               @mouseup="handleImageMouseUp"
@@ -323,7 +384,7 @@
                 ref="previewImageRef"
                 :src="currentPreviewImage?.src"
                 :alt="currentPreviewImage?.intro"
-                class="preview-image"
+                class="block h-auto max-h-none w-auto max-w-none origin-center object-contain"
                 :style="imageTransformStyle"
                 @load="onPreviewImageLoad"
                 @dragstart.prevent
@@ -340,10 +401,14 @@
             </button>
           </div>
 
-          <div class="image-details">
-            <h3>{{ currentPreviewImage?.intro }}</h3>
-            <div class="image-counter">{{ gallerySliderControl.index + 1 }} / {{ filterList.length }}</div>
-            <div class="image-help-text">
+          <div class="flex items-center justify-between border border-border-secondary px-6 py-4">
+            <h3 class="m-0 mr-4 flex-1 overflow-hidden text-base font-semibold text-ellipsis text-main">
+              {{ currentPreviewImage?.intro }}
+            </h3>
+            <div class="mt-1 mr-4 text-sm font-semibold whitespace-nowrap text-main">
+              {{ gallerySliderControl.index + 1 }} / {{ filterList.length }}
+            </div>
+            <div class="mt-1 text-center text-xs font-medium text-main">
               {{ t('pages.gallery.previewHelp') }}
             </div>
           </div>
@@ -353,15 +418,20 @@
 
     <!-- Edit URL Modal -->
     <transition name="modal">
-      <div v-if="dialogVisible" class="modal-overlay" :class="advancedAnimation" @click="dialogVisible = false">
+      <div
+        v-if="dialogVisible"
+        class="modal-overlay"
+        :class="{ 'advanced-animation': enableAdvancedAnimation }"
+        @click="dialogVisible = false"
+      >
         <div class="modal-container" @click.stop>
           <div class="modal-header">
-            <h3>{{ t('pages.gallery.changeImageUrl') }}</h3>
+            <h3 class="m-0 text-xl font-semibold text-main">{{ t('pages.gallery.changeImageUrl') }}</h3>
             <button class="modal-close-btn" @click="dialogVisible = false">
               <XIcon :size="20" />
             </button>
           </div>
-          <div class="modal-body">
+          <div class="p-6">
             <input v-model="imgInfo.imgUrl" type="text" class="form-input" placeholder="Enter new URL" />
           </div>
           <div class="modal-footer">
@@ -381,18 +451,17 @@
       <div
         v-if="isShowBatchRenameDialog"
         class="modal-overlay"
-        :class="advancedAnimation"
-        @click="isShowBatchRenameDialog = false"
+        :class="{ 'advanced-animation': enableAdvancedAnimation }"
       >
-        <div class="modal-container large" @click.stop>
+        <div class="modal-container" @click.stop>
           <div class="modal-header">
-            <h3>{{ t('pages.gallery.batchEditUrl') }}</h3>
+            <h3 class="m-0 text-xl font-semibold text-main">{{ t('pages.gallery.batchEditUrl') }}</h3>
             <button class="modal-close-btn" @click="isShowBatchRenameDialog = false">
               <XIcon :size="20" />
             </button>
           </div>
-          <div class="modal-body">
-            <div class="form-group">
+          <div class="p-6">
+            <div class="mb-6 last:mb-0">
               <label class="form-label">
                 {{ t('pages.gallery.regexPattern', { matched: matchedCount || 0 }) }}
               </label>
@@ -404,20 +473,34 @@
                 @focus="showMatchedUrls = true"
                 @blur="showMatchedUrls = false"
               />
-              <div v-if="showMatchedUrls && matchedUrls.length > 0" class="matched-urls-tooltip">
-                <div class="tooltip-header">Matched URLs ({{ matchedUrls.length }}):</div>
-                <div class="tooltip-content">
-                  <div v-for="(url, index) in matchedUrls" :key="index" class="url-item">
+              <div
+                v-if="showMatchedUrls && matchedUrls.length > 0"
+                class="absolute z-1000 mt-2 max-h-[300px] max-w-[650px] overflow-hidden rounded-md border border-border-secondary bg-bg-tertiary p-0 shadow-md"
+              >
+                <div
+                  class="border-b border-b-border-secondary bg-bg-secondary px-4 py-3 text-sm font-semibold text-main"
+                >
+                  Matched URLs ({{ matchedUrls.length }}):
+                </div>
+                <div class="max-h-[240px] overflow-auto p-2">
+                  <div
+                    v-for="(url, index) in matchedUrls"
+                    :key="index"
+                    class="rounded-sm px-3 py-2 font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] text-sm break-all text-secondary transition-all duration-fast ease-apple hover:bg-surface-elevated"
+                  >
                     {{ url }}
                   </div>
                 </div>
               </div>
             </div>
 
-            <div class="form-group">
+            <div class="mb-6 last:mb-0">
               <label class="form-label">
                 {{ t('pages.gallery.replacedWith') }}
-                <button class="info-button" @click="showFormatInfo = !showFormatInfo">
+                <button
+                  class="flex h-[20px] w-[20px] cursor-pointer items-center justify-around rounded-full border-none bg-accent text-white transition-all duration-fast ease-apple hover:bg-accent-hover"
+                  @click="showFormatInfo = !showFormatInfo"
+                >
                   <InfoIcon :size="16" />
                 </button>
               </label>
@@ -425,10 +508,12 @@
             </div>
 
             <!-- Format Info Panel -->
-            <div v-if="showFormatInfo" class="form-group">
+            <div v-if="showFormatInfo" class="mb-6 last:mb-0">
               <label>{{ t('pages.settings.upload.availablePlaceholders') }}</label>
-              <div class="placeholder-help">
-                <div class="placeholder-category">
+              <div
+                class="mt-3 max-h-[400px] overflow-y-auto rounded-lg border border-border bg-bg-tertiary p-0 shadow-sm"
+              >
+                <div class="border-b border-b-border last:border-b-0">
                   <div class="category-title">
                     {{ t('pages.settings.upload.placeholder.categoryTime') }}
                   </div>
@@ -701,10 +786,6 @@ function copyPlaceholder(placeholder: string) {
   message.success(t('pages.settings.upload.copySuccess', { content: placeholder }))
 }
 
-const advancedAnimation = computed(() => ({
-  advancedAnimation: enableAdvancedAnimation.value,
-}))
-
 const filterList = computed(() => {
   return getGallery()
 })
@@ -774,7 +855,6 @@ function onPreviewImageLoad() {
 function togglePicBedDropdown(event?: Event) {
   picBedDropdownOpen.value = !picBedDropdownOpen.value
   if (sortDropdownOpen.value) sortDropdownOpen.value = false
-
   if (picBedDropdownOpen.value && event) {
     nextTick(() => {
       const trigger = event.target as HTMLElement
diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index 046418ef..5266200a 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -1,1075 +1,106 @@
-@import url('./common/advancedAnimation.css');
+@import "tailwindcss" reference;
+@import "../../assets/css/theme.css" reference;
+@import "../../assets/css/utilities.css" reference;
 
-/* Global scrolling behavior */
-html, body {
-  overflow-x: hidden;
-}
-
-.header-icon {
-  display: flex;
-  align-items: center;
-  color: var(--color-accent);
-}
-
-/* Custom Scrollbar Styles */
-.gallery-content::-webkit-scrollbar {
-  width: 8px;
-}
-
-.gallery-content::-webkit-scrollbar-track {
-  border-radius: var(--radius-md);
-  background: var(--color-surface-elevated);
-}
-
-.gallery-content::-webkit-scrollbar-thumb {
-  border-radius: var(--radius-md);
-  background: var(--color-border);
-  transition: var(--transition-fast);
-}
-
-.gallery-content::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
-/* Container */
-.gallery-container {
-  display: flex;
-  overflow: hidden;
-  margin: 0;
-  padding: 1rem;
-  width: 100%;
-  height: 100vh;
-  flex-direction: column;
-  gap: 1.25rem;
-  box-sizing: border-box;
-}
-
-/* Card Base */
-.gallery-card {
-  overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  background: var(--color-background-secondary);
-  box-shadow: var(--shadow-sm);
-  transition: var(--transition-medium);
-}
-
-.gallery-card:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-}
-
-/* Header Card */
-.header-card .card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 1rem 1.5rem;
-  flex-wrap: wrap;
-  gap: 1rem;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-}
-
-.header-content h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  letter-spacing: -0.025em;
-}
-
-.header-content p {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.action-button {
-  display: flex;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.325rem 0.5rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 500;
-  color: white;
-  background: var(--color-accent);
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.action-button:hover {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-/* View Mode Toggle */
-.view-mode-toggle {
-  position: relative;
-}
-
-.view-mode-toggle:hover {
-  background: var(--color-accent-hover) !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: 20px;
-}
-
-.custom-switch input {
-  width: 0;
-  height: 0;
-  opacity: 0;
+.head-action-button {
+  @apply flex items-center border-none rounded-md px-2 py-1.5 text-sm font-medium text-white bg-accent font-[inherit] gap-2 cursor-pointer transition-all duration-fast ease-apple;
+  @apply hover:bg-accent-hover hover:-translate-y-px hover:shadow-md;
 }
 
 .switch-slider {
-  position: absolute;
-  inset: 0;
-  border-radius: 24px;
-  background: linear-gradient(180deg, #d0d3d9 0%, #c0c4cc 100%);
-  box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%);
-  transition: all var(--transition-medium);
-  cursor: pointer;
-}
-
-.switch-slider::before {
-  position: absolute;
-  bottom: 2px;
-  left: 2px;
-  border-radius: var(--radius-round);
-  width: 17px;
-  height: 17px;
-  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
-  box-shadow:
-    0 2px 6px rgb(0 0 0 / 20%),
-    0 1px 2px rgb(0 0 0 / 10%);
-  transition: all var(--transition-medium);
-  content: "";
-}
-
-input:checked + .switch-slider {
-  background: var(--color-accent);
-  box-shadow:
-    inset 0 1px 3px rgb(0 0 0 / 10%),
-    0 2px 8px color-mix(in srgb, var(--color-accent), transparent 30%);
-}
-
-input:checked + .switch-slider::before {
-  transform: translateX(22px);
-}
-
-/* Grid Size Control */
-.grid-size-control {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.375rem 0.5rem;
-  background: var(--color-background-secondary);
-  gap: 0.375rem;
-}
-
-.grid-size-control .control-label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  white-space: nowrap;
-  color: var(--color-text-secondary);
-}
-
-.grid-slider {
-  border-radius: 2px;
-  width: 70px;
-  height: 4px;
-  background: var(--color-background-tertiary);
-  outline: none;
-  appearance: none;
-  cursor: pointer;
-}
-
-.grid-slider::-webkit-slider-thumb {
-  border-radius: var(--radius-round);
-  width: 15px;
-  height: 15px;
-  background: var(--color-accent);
-  transition: var(--transition-fast);
-  appearance: none;
-  cursor: pointer;
-}
-
-.grid-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.15);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 60%);
-}
-
-.grid-slider::-moz-range-thumb {
-  border: none;
-  border-radius: var(--radius-round);
-  width: 14px;
-  height: 14px;
-  background: var(--color-accent);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.grid-slider::-moz-range-thumb:hover {
-  transform: scale(1.15);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent), transparent 60%);
-}
-
-.grid-value {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--radius-sm);
-  padding: 0.125rem 0.375rem;
-  min-width: 20px;
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: white;
-  background: var(--color-accent);
-  line-height: 1;
-}
-
-/* Filter Card */
-.filter-card {
-  border-radius: var(--radius-lg);
-}
-
-.filter-content {
-  padding: 1rem;
-}
-
-.filter-row {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 0.75rem;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.filter-row:last-child {
-  margin-bottom: 0;
+  @apply  absolute inset-0 cursor-pointer rounded-2xl bg-[linear-gradient(180deg,#d0d3d9_0%,#c0c4cc_100%)] shadow-sm transition-all duration-medium ease-standard;
+  @apply before:absolute before:bottom-[2px] before:left-[2px] before:h-[17px] before:w-[17px] before:rounded-full before:shadow-sm before:transition-all before:ease-standard before:duration-medium before:content-[""] before:bg-[linear-gradient(180deg,#ffffff_0%,#f5f5f5_100%)];
 }
 
 .filter-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  min-width: 140px;
-  flex: 1 1 auto;
-  max-width: 220px;
+  @apply flex flex-col gap-3 flex-1 min-w-[140px];
 }
 
 .filter-label {
-  margin-bottom: 0.125rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  line-height: 1.4;
+  @apply mb-0 text-sm font-semibold text-secondary leading-[1.4];
 }
 
-/* Custom Select */
 .custom-select {
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.375rem 0.5rem;
-  width: 100%;
-  min-width: 0;
-  height: 28px;
-  font-size: 0.85rem;
-  text-align: center;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-  line-height: 1.4;
-}
-
-.custom-select:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent), transparent 80%);
-}
-
-.select-option {
-  font-size: 0.85rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-}
-
-/* Custom Multiselect */
-.custom-multiselect {
-  position: relative;
-}
-
-.multiselect-trigger {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.375rem 0.5rem;
-  width: 100%;
-  height: 28px;
-  font-size: 0.85rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-  line-height: 1.4;
-}
-
-.multiselect-trigger:hover {
-  border-color: var(--color-accent-hover);
-}
-
-.multiselect-trigger:focus,
-.multiselect-trigger.active {
-  border-color: var(--color-accent-hover);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 80%);
-}
-
-.multiselect-dropdown {
-  position: fixed;
-  z-index: 1000;
-  overflow-y: auto;
-  margin-top: 2px;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.375rem 0.5rem;
-  min-width: 200px;
-  max-height: 280px;
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-  box-shadow: var(--shadow-lg);
-  scrollbar-width: none;
-}
-
-.multiselect-option {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.25rem 0.5rem;
-  min-height: unset;
-  font-size: 0.95rem;
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  gap: 0.25rem;
-  cursor: pointer;
-  line-height: 1.4;
-}
-
-.multiselect-option:hover {
-  background: var(--color-accent-hover);
-}
-
-.multiselect-option input[type="checkbox"] {
-  margin: 0;
-}
-
-/* Date Range Picker */
-.date-range-picker {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
+  @apply border border-border-secondary rounded-md px-2 py-1.5 w-full min-w-0 h-[28px] text-sm text-main transition-all duration-fast ease-apple cursor-pointer text-center leading-[1.4];
+  @apply focus:border-accent focus:outline-none focus:shadow-md;
 }
 
 .date-input {
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.375rem 0.5rem;
-  min-width: 0;
-  height: 28px;
-  font-size: 0.75rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  flex: 1;
-  line-height: 1.2;
-}
-
-.date-input:focus {
-  border-color: var(--color-accent-hover);
-  outline: none;
-  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
-}
-
-.date-separator {
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-}
-
-/* Sort Dropdown */
-.sort-dropdown {
-  position: relative;
+  @apply border border-border-secondary rounded-md px-2 py-1.5 min-w-[20px] h-[28px] text-xs text-main transition-all duration-fast ease-apple flex-1 leading-[1.2];
+  @apply focus:border-accent-hover focus:outline-none focus:shadow-md;
 }
 
 .sort-button {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.375rem 0.5rem;
-  width: 100%;
-  height: 28px;
-  font-size: 0.85rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  gap: 0.25rem;
-  cursor: pointer;
-  line-height: 1.4;
-}
-
-.sort-button:hover {
-  border-color: var(--color-accent-hover);
-}
-
-.sort-button:focus,
-.sort-button.active {
-  border-color: var(--color-accent-hover);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 80%);
-}
-
-.sort-options {
-  position: fixed;
-  z-index: 1000;
-  margin-top: 2px;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  min-width: 160px;
-  background: var(--color-background-tertiary);
-  box-shadow: var(--shadow-lg);
-}
-
-.sort-option {
-  display: block;
-  border: none;
-  padding: 0.25rem 0.5rem;
-  width: 100%;
-  min-height: unset;
-  font-size: 0.95rem;
-  text-align: center;
-  color: var(--color-text-primary);
-  background: var(--color-background-tertiary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-  line-height: 1.4;
-}
-
-.sort-option:hover {
-  background: var(--color-accent-hover);
-}
-
-/* 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;
+  @apply flex justify-between items-center border border-border-secondary rounded-md px-2 py-1.5 w-full h-[28px] text-sm text-main transition-all duration-fast ease-apple cursor-pointer gap-1 leading-[1.4];
+  @apply hover:border-accent-hover;
+  @apply focus:[.active]:border-accent-hover focus:[.active]:shadow-md;
 }
 
 .search-input {
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
-  width: 100%;
-  font-size: 0.8rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-}
-
-.search-input:focus {
-  border-color: var(--color-accent-hover);
-  outline: none;
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-hover), transparent 40%);
-}
-
-.search-input::placeholder {
-  color: var(--color-text-secondary);
-}
-
-.search-icon {
-  position: absolute;
-  left: 0.75rem;
-  z-index: 1;
-  color: var(--color-text-secondary);
+  @apply border border-border-secondary rounded-md pt-2 pr-3 pb-2 pl-9 w-full text-sm text-main transition-all duration-fast ease-apple;
+  @apply focus:border-accent-hover focus:outline-none focus:shadow-md;
+  @apply placeholder:text-secondary;
 }
 
 .clear-button {
-  position: absolute;
-  right: 0.75rem;
-  display: flex;
-  align-items: center;
-  border: none;
-  padding: 0;
-  color: var(--color-text-secondary);
-  background: none;
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.clear-button:hover {
-  color: var(--color-text-primary);
-}
-
-/* Action Buttons */
-.action-buttons {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
+  @apply absolute flex right-3 border-none items-center p-0 text-secondary bg-none transition-all duration-fast ease-apple cursor-pointer;
+  @apply hover:text-main;
 }
 
 .action-btn {
-  display: flex;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.425rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  opacity: 0.5;
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: not-allowed;
-}
-
-.action-btn.active {
-  cursor: pointer;
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.action-btn.active:hover {
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-.copy-btn {
-  color: white;
-  background: var(--color-accent);
-}
-
-.copy-btn.active:hover {
-  background: var(--color-accent-hover);
-}
-
-.edit-btn {
-  color: white;
-  background: var(--color-success);
-}
-
-.edit-btn.active:hover {
-  background: var(--color-success);
-}
-
-.delete-btn {
-  color: white;
-  background: var(--color-danger);
-}
-
-.delete-btn.active:hover {
-  background: var(--color-danger);
-}
-
-.select-btn {
-  color: white;
-  background: var(--color-warning);
-}
-
-.select-btn.active:hover {
-  background: var(--color-warning);
-}
-
-/* Filter Slide Animation */
-.filter-slide-enter-active,
-.filter-slide-leave-active {
-  overflow: hidden;
-  max-height: 300px;
-  transition: all var(--transition-medium);
-}
-
-.filter-slide-enter-from,
-.filter-slide-leave-to {
-  max-height: 0;
-  opacity: 0;
-  transform: translateY(-10px);
-}
-
-/* Gallery Content */
-.gallery-content {
-  display: flex;
-  overflow: hidden;
-  min-height: 0;
-  flex: 1;
-  flex-direction: column;
-}
-
-.empty-state {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 4rem 2rem;
-  text-align: center;
-  flex-direction: column;
-}
-
-.empty-icon {
-  margin-bottom: 1rem;
-  color: var(--color-accent);
-}
-
-.empty-state h3 {
-  margin: 0 0 0.5rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.empty-state p {
-  margin: 0;
-  color: var(--color-text-secondary);
-}
-
-/* Gallery Grid */
-.gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 1.5rem;
-  padding: 1.5rem;
-}
-
-/* Image Container */
-
-.image-placeholder {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-}
-
-.loader-spinner {
-  border: 2px solid var(--color-border-secondary);
-  border-top: 2px solid var(--color-accent);
-  border-radius: var(--radius-round);
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Image Info */
-
-.image-name {
-  overflow: hidden;
-  margin-bottom: 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-primary);
-}
-
-.image-actions {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.action-icons {
-  display: flex;
-  gap: 0.5rem;
+  @apply flex items-center justify-center border-none rounded-md px-4 py-[0.425rem] text-sm font-medium text-white transition-all duration-fast ease-apple gap-2 flex-1 opacity-60 cursor-not-allowed;
+  @apply [.active]:cursor-pointer [.active]:opacity-100 [.active]:transform-none;
+  @apply [.active:hover]:-translate-y-px [.active:hover]:shadow-sm;
+  @apply [.copy-btn]:text-white [.copy-btn]:bg-accent [.copy-btn.active:hover]:bg-accent-hover;
+  @apply [.edit-btn]:text-white [.edit-btn]:bg-success [.edit-btn.active:hover]:bg-success/80;
+  @apply [.delete-btn]:text-white [.delete-btn]:bg-danger [.delete-btn.active:hover]:bg-danger/80;
+  @apply [.select-btn]:text-white [.select-btn]:bg-warning [.select-btn.active:hover]:bg-warning/80;
 }
 
 .icon-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  width: 25px;
-  height: 25px;
-  color: var(--color-text-secondary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.icon-button:hover {
-  color: var(--color-text-primary);
-  transform: translateY(-1px);
-}
-
-.copy-icon:hover {
-  color: var(--color-warning);
-  background: color-mix(in srgb, var(--color-warning), transparent 90%);
-}
-
-.edit-icon:hover {
-  color: var(--color-success);
-  background: color-mix(in srgb, var(--color-success), transparent 90%);
-}
-
-.delete-icon:hover {
-  color: var(--color-error);
-  background: color-mix(in srgb, var(--color-error), transparent 90%);
-}
-
-/* Custom Checkbox */
-.custom-checkbox {
-  position: relative;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.custom-checkbox input[type="checkbox"] {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.checkbox-mark {
-  position: relative;
-  display: inline-block;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  width: 16px;
-  height: 16px;
-  transition: var(--transition-fast);
-}
-
-.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark {
-  border-color: var(--color-accent-hover);
-  background: var(--color-accent);
-}
-
-.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
-  position: absolute;
-  top: -2px;
-  left: 1px;
-  font-size: 12px;
-  font-weight: bold;
-  color: white;
-  content: '✓';
-}
-
-/* Image Preview Modal */
-.image-preview-modal {
-  position: fixed;
-  z-index: 1000;
-  inset: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  outline: none;
-}
-
-.modal-backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgb(0 0 0 / 80%);
-}
-
-.modal-content {
-  position: relative;
-  overflow: hidden;
-  border-radius: var(--radius-xl);
-  max-width: 90vw;
-  max-height: 90vh;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-lg);
-}
-
-.modal-close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-round);
-  width: 40px;
-  height: 40px;
-  color: white;
-  background: rgb(0 0 0 / 50%);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.modal-close:hover {
-  background: rgb(0 0 0 / 70%);
-}
-
-.image-navigation {
-  position: relative;
-  display: flex;
-  align-items: center;
+  @apply flex items-center justify-center border-none rounded-md w-[25px] h-[25px] text-secondary transition-all duration-fast ease-apple cursor-pointer;
+  @apply hover:text-main hover:-translate-y-px;
+  @apply [.copy-icon]:hover:text-warning [.copy-icon]:hover:bg-warning/10;
+  @apply [.edit-icon]:hover:text-success [.edit-icon]:hover:bg-success/10;
+  @apply [.delete-icon]:hover:text-error [.delete-icon]:hover:bg-error/10;
 }
 
 .nav-button {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-round);
-  width: 48px;
-  height: 48px;
-  color: white;
-  background: rgb(0 0 0 / 50%);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.nav-button:hover:not(:disabled) {
-  background: rgb(0 0 0 / 70%);
-}
-
-.nav-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.nav-button.prev {
-  left: 1rem;
-}
-
-.nav-button.next {
-  right: 1rem;
-}
-
-.image-viewer {
-   position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  width: 90vw;
-  height: 80vh;
-  background: #000000;
-  user-select: none;
-}
-
-.preview-image {
-  object-fit: contain;
-  display: block;
-  width: auto;
-  max-width: none;
-  height: auto;
-  max-height: none;
-  transform-origin: center center;
-}
-
-.image-details {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top: 1px solid var(--color-border-secondary);
-  padding: 1rem 1.5rem;
-}
-
-.image-details h3 {
-  overflow: hidden;
-  margin: 0;
-  margin-right: 1rem;
-  font-size: 1rem;
-  font-weight: 600;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-primary);
-  flex: 1;
-}
-
-.image-counter {
-  font-size: 0.875rem;
-  margin-right: 1rem;
-  margin-top: 0.25rem;
-  font-weight: 600;
-  white-space: nowrap;
-  color: var(--color-text-primary);
+  @apply absolute flex z-10 justify-center items-center border-none rounded-full w-[48px] h-[48px] text-white bg-[rgb(0_0_0_/50%)] transition-all duration-fast ease-apple cursor-pointer;
+  @apply not-disabled:hover:bg-accent;
+  @apply disabled:opacity-50 disabled:cursor-not-allowed;
+  @apply [.prev]:left-4 [.next]:right-4;
 }
 
 /* Modal Overlay */
 .modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(0 0 0 / 50%);
+  @apply fixed inset-0 z-1000 flex justify-center items-center bg-[rgb(0_0_0_/50%)];
 }
 
 .modal-container {
-  overflow-y: auto;
-  border-radius: var(--radius-xl);
-  width: 90%;
-  max-width: 500px;
-  max-height: 90vh;
-  background: var(--color-background-tertiary);
-  box-shadow: var(--shadow-lg);
-}
-
-.modal-container.large {
-  max-width: 700px;
+  @apply overflow-auto rounded-xl w-[90%] max-w-[700px] max-h-[90vh] bg-bg-tertiary shadow-lg;
 }
 
 .modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 1.5rem;
-}
-
-.modal-header h3 {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
+  @apply flex justify-between items-center border-b border-border-secondary p-6;
 }
 
 .modal-close-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  width: 32px;
-  height: 32px;
-  color: var(--color-text-secondary);
-  background: var(--color-background-tertiary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.modal-close-btn:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.modal-body {
-  padding: 1.5rem;
+  @apply flex items-center justify-center border border-border-secondary rounded-full w-[32px] h-[32px] text-secondary bg-bg-tertiary transition-all duration-fast ease-apple cursor-pointer;
+  @apply hover:text-main hover:bg-danger;
 }
 
 .modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  border-top: 1px solid var(--color-border-secondary);
-  padding: 1.5rem;
-  gap: 0.75rem;
-}
-
-/* Form Elements */
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-group:last-child {
-  margin-bottom: 0;
+  @apply flex justify-end border-t border-border-secondary p-6 gap-3;
 }
 
 .form-label {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  gap: 0.5rem;
+  @apply flex items-center mb-2 text-sm font-medium text-main gap-2;
 }
 
 .form-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  box-sizing: border-box;
-}
-
-.form-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
-}
-
-.info-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-round);
-  width: 20px;
-  height: 20px;
-  color: white;
-  background: var(--color-accent);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.info-button:hover {
-  background: var(--color-accent-hover);
+  @apply border border-border rounded-md p-3 w-full text-sm text-main bg-bg-secondary transition-all duration-fast ease-apple box-border;
+  @apply focus:border-accent focus:outline-none focus:shadow-md;
 }
 
 .placeholder-grid {
@@ -1080,508 +111,34 @@ input:checked + .switch-slider::before {
 }
 
 .placeholder-item {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  margin: 0;
-  border-radius: 0;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  line-height: 1.4;
-}
-
-.placeholder-item code {
-  margin-right: 0.875rem;
-  border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: var(--radius-md);
-  padding: 0.3rem 0.6rem;
-  min-width: 80px;
-  font-size: 1rem;
-  font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
-  font-weight: 600;
-  text-align: center;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
-  letter-spacing: 0.02em;
-  flex-shrink: 0;
-}
-
-.placeholder-item span {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  flex: 1;
+  @apply gap-2 flex items-center m-0 rounded-none py-2 px-4 text-sm leading-[1.4] flex-col;
+  @apply hover:bg-accent/30 hover:border hover:border-accent;
+  @apply [&_code]:mr-3.5 [&_code]:border [&_code]:border-white/20 [&_code]:rounded-md [&_code]:px-2.5 [&_code]:py-1 [&_code]:min-w-[80px] [&_code]:text-base [&_code]:font-['SF_Mono',Monaco,'Cascadia_Code','Roboto_Mono',Consolas,'Courier_New',monospace] [&_code]:font-semibold [&_code]:text-center [&_code]:text-main [&_code]:bg-bg-secondary [&_code]:shadow-sm [&_code]:tracking-[0.02em] [&_code]:shrink-0;
+  @apply [&_span]:text-xs [&_span]:font-medium [&_span]:text-main [&_span]:flex-1;
 }
 
 /* Buttons */
 .btn-primary {
-  display: flex;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 500;
-  color: white;
-  background: var(--color-accent);
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.btn-primary:hover {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
+  @apply flex items-center border-none rounded-md px-6 py-3 text-sm font-medium font-[inherit] text-white bg-accent gap-2 cursor-pointer transition-all duration-fast ease-apple;
+  @apply hover:bg-accent-hover hover:-translate-y-px hover:shadow-sm;
 }
 
 .btn-secondary {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.btn-secondary:hover {
-  background: var(--color-border-secondary);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-sm);
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .gallery-container {
-    padding: 0.75rem;
-    gap: 1rem;
-  }
-
-  .header-content {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.5rem;
-  }
-
-  .header-actions {
-    justify-content: flex-start;
-    width: 100%;
-  }
-
-  .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 (width <= 1024px) {
-  .filter-group,
-  .search-group {
-    min-width: 160px;
-    max-width: 220px;
-  }
-}
-
-@media (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 (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;
-  padding: 1rem;
-  min-height: 0;
-}
-
-.virtual-gallery-scroller .virtual-scroller {
-  width: 100%;
-  height: 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 {
-  display: flex;
-  overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  margin: 0;
-  background: var(--color-background-secondary);
-  cursor: pointer;
-  width: 100%;
-  height: calc(100% - 8px);
-  box-sizing: border-box;
-  flex-direction: column;
-  transition: var(--transition-medium);
-}
-
-.virtual-gallery-scroller .gallery-item:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.virtual-gallery-scroller .gallery-item.selected {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 40%);
-}
-
-.virtual-gallery-scroller .image-container {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  min-height: 0;
-  background: var(--color-background-secondary);
-  flex: 1;
-  aspect-ratio: auto;
-}
-
-.virtual-gallery-scroller .image-container.selected {
-  outline: 2px solid var(--color-accent);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent), transparent 60%);
-}
-
-.virtual-gallery-scroller .image-info {
-  display: flex;
-  justify-content: space-between;
-  padding: 0.75rem;
-  min-height: 80px;
-  flex-shrink: 0;
-  flex-direction: column;
-}
-
-.virtual-gallery-scroller .gallery-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  transition: var(--transition-medium);
-}
-
-.virtual-gallery-scroller .gallery-image.loading {
-  opacity: 0;
-}
-
-.virtual-gallery-scroller .image-loader {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: var(--color-surface-elevated);
-}
-
-/* Enhanced Image Preview Styles */
-.zoom-controls {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  border-radius: var(--radius-lg);
-  padding: 0.5rem;
-  background: rgb(0 0 0 / 70%);
-  gap: 0.5rem;
+  @apply flex items-center border border-border rounded-md px-6 py-3 text-sm font-medium font-[inherit] text-main bg-bg-secondary gap-2 cursor-pointer transition-all duration-fast ease-apple;
+ @apply hover:bg-border-secondary hover:-translate-y-px hover:shadow-sm;
 }
 
 .zoom-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  width: 32px;
-  height: 32px;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: white;
-  background: rgb(255 255 255 / 10%);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.zoom-btn:hover:not(:disabled) {
-  background: rgb(255 255 255 / 20%);
-}
-
-.zoom-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.zoom-btn.reset-btn {
-  padding: 0 0.75rem;
-  width: auto;
-  font-size: 0.75rem;
-}
-
-.zoom-level {
-  min-width: 50px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-align: center;
-  color: white;
-}
-
-.image-help-text {
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-align: center;
-  color: var(--color-text-primary);
-}
-
-.image-viewer:active {
-  cursor: grabbing !important;
-}
-
-/* Responsive adjustments for mobile */
-@media (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 {
-    min-width: 40px;
-    font-size: 0.75rem;
-  }
-
-  .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 {
-  overflow-y: auto;
-  margin-top: 0.75rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 0;
-  max-height: 400px;
-  background: var(--color-background-tertiary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
-}
-
-.placeholder-category {
-  border-bottom: 1px solid var(--color-border);
-}
-
-.placeholder-category:last-child {
-  border-bottom: none;
+  @apply flex justify-center items-center border-none rounded-md w-[32px] h-[32px] text-sm font-semibold text-white bg-[rgb(255_255_255_/10%)] transition-all duration-fast ease-apple cursor-pointer;
+  @apply not-disabled:hover:bg-[rgb(255_255_255_/20%)];
+  @apply disabled:opacity-50 disabled:cursor-not-allowed;
+  @apply [.reset-btn]:py-0 [.reset-btn]:w-auto [.reset-btn]:px-3 [.reset-btn]:text-xs;
 }
 
 .category-title {
-  margin: 0;
-  border-bottom: 1px solid var(--color-border);
-  padding: 0.875rem 1rem 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
-  letter-spacing: 0.02em;
+  @apply m-0 border-b border-border pt-3.5 px-4 pb-2 text-sm font-semibold text-secondary bg-[linear-gradient(180deg,var(--color-background-secondary)_0%,var(--color-background-tertiary)_100%)];
 }
 
 .placeholder-item:hover {
   background: color-mix(in srgb, var(--color-accent), transparent 95%);
 }
-
-.matched-urls-tooltip {
-  position: absolute;
-  z-index: 1000;
-  margin-top: 0.5rem;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 0;
-  max-width: 100%;
-  max-height: 300px;
-  background: var(--color-background-tertiary);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
-  overflow: hidden;
-}
-
-.matched-urls-tooltip .tooltip-header {
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-  background: var(--color-background-secondary);
-}
-
-.matched-urls-tooltip .tooltip-content {
-  padding: 0.5rem;
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-.matched-urls-tooltip .url-item {
-  padding: 0.5rem 0.75rem;
-  font-family: var(--font-mono, 'Courier New', monospace);
-  font-size: 0.813rem;
-  color: var(--color-text-secondary);
-  word-break: break-all;
-  border-radius: var(--radius-sm);
-  transition: var(--transition-fast);
-}
-
-.matched-urls-tooltip .url-item:hover {
-  background: var(--color-surface-elevated);
-}
-
-.matched-urls-tooltip .tooltip-content::-webkit-scrollbar {
-  width: 6px;
-}
-
-.matched-urls-tooltip .tooltip-content::-webkit-scrollbar-track {
-  border-radius: var(--radius-sm);
-  background: var(--color-surface-elevated);
-}
-
-.matched-urls-tooltip .tooltip-content::-webkit-scrollbar-thumb {
-  border-radius: var(--radius-sm);
-  background: var(--color-border);
-}
-
-.matched-urls-tooltip .tooltip-content::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-secondary);
-}
-
-
diff --git a/src/renderer/pages/css/UploadPage.css b/src/renderer/pages/css/UploadPage.css
index c5ad2bc1..b6152d3d 100644
--- a/src/renderer/pages/css/UploadPage.css
+++ b/src/renderer/pages/css/UploadPage.css
@@ -1,20 +1,24 @@
-@import "tailwindcss" reference;
-@import "../../assets/css/theme.css" reference;
-@import "../../assets/css/utilities.css" reference;
+@import 'tailwindcss' reference;
+@import '../../assets/css/theme.css' reference;
+@import '../../assets/css/utilities.css' reference;
 
 .segmented-button {
-  @apply flex items-center border-none border-r-border-secondary border-r py-2.5 px-4 text-sm font-[inherit] font-medium text-secondary duration-fast ease-standard gap-2 cursor-pointer whitespace-nowrap last:border-r-0 hover:text-accent-hover hover:bg-bg-tertiary;
+  @apply flex cursor-pointer items-center gap-2 border-r border-none border-r-border-secondary px-4 py-2.5 font-[inherit] text-sm font-medium whitespace-nowrap text-secondary duration-fast ease-standard last:border-r-0 hover:bg-bg-tertiary hover:text-accent-hover;
 }
 
 /* Quick Actions Card */
 .quick-action-button {
-  @apply relative flex flex-1 items-center border border-border-secondary rounded-lg px-4 py-3.5 font-[inherit] text-left bg-bg-secondary duration-medium ease-standard gap-2 cursor-pointer hover:border-accent-hover hover:shadow-md hover:-translate-y-[2px] [.has-badge]:pr-12 max-xs:py-3 max-xs:px-3.5 focus-visible:focus-ring;
+  @apply relative flex flex-1 cursor-pointer items-center gap-2 rounded-lg border border-border-secondary bg-bg-secondary px-4 py-3.5 text-left font-[inherit] duration-medium ease-standard hover:-translate-y-[2px] hover:border-accent-hover hover:shadow-md focus-visible:focus-ring max-xs:px-3.5 max-xs:py-3 [.has-badge]:pr-12;
 }
 
 .filter-tab {
-  @apply py-2 px-4 text-sm font-medium border border-border-secondary rounded-md bg-bg-secondary text-secondary cursor-pointer transition-all duration-fast ease-standard whitespace-nowrap shadow-sm hover:border-accent hover:text-main hover:-translate-y-px hover:shadow-md [.active]:bg-accent [.active]:border-transparent [.active]:text-white [.active]:shadow-lg;
+  @apply cursor-pointer rounded-md border border-border-secondary bg-bg-secondary px-4 py-2 text-sm font-medium whitespace-nowrap text-secondary shadow-sm transition-all duration-fast ease-standard;
+  @apply hover:-translate-y-px hover:border-accent hover:text-main hover:shadow-md;
+  @apply [.active]:border-transparent [.active]:bg-accent [.active]:text-white [.active]:shadow-lg;
 }
 
 .task-icon-btn {
-  @apply flex items-center justify-center w-[32px] h-[32px] p-0 border border-border rounded-md bg-surface-elevated text-secondary cursor-pointer transition-all duration-fast ease-standard hover:border-accent hover:bg-accent hover:text-white hover:-translate-y-px [.is-high]:bg-warning [.is-high]:border-warning [.is-high]:text-white [.danger:hover]:bg-danger [.danger:hover]:border-danger [.danger:hover]:text-white;
+  @apply flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-md border border-border bg-surface-elevated p-0 text-secondary transition-all duration-fast ease-standard;
+  @apply hover:-translate-y-px hover:border-accent hover:bg-accent hover:text-white;
+  @apply [.danger:hover]:border-danger [.danger:hover]:bg-danger [.danger:hover]:text-white [.is-high]:border-warning [.is-high]:bg-warning [.is-high]:text-white;
 }