From 94fe4f4972d05a106e51a269c46be1607317ec41 Mon Sep 17 00:00:00 2001
From: Kuingsmile <96409857+Kuingsmile@users.noreply.github.com>
Date: Sat, 3 Jan 2026 15:12:42 +0800
Subject: [PATCH] :sparkles: Feature(custom): add selected inhint and optimize
 UI of manage file explorer page

---
 .stylelintrc.cjs                             |   80 +-
 src/renderer/components/VirtualScroller.vue  |  187 +-
 src/renderer/hooks/useVirtualGrid.ts         |   65 +-
 src/renderer/manage/pages/BucketPage.vue     |  488 ++-
 src/renderer/manage/pages/css/BucketPage.css | 2646 +++++++--------
 src/renderer/manage/pages/css/ManageMain.css | 1357 ++++----
 src/renderer/pages/Gallery.vue               |    9 +-
 src/renderer/pages/css/Gallery.css           | 3059 +++++++++---------
 8 files changed, 3865 insertions(+), 4026 deletions(-)

diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index 954bd9ff..6e580c45 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -1,6 +1,6 @@
 module.exports = {
   extends: ['stylelint-config-standard', 'stylelint-config-html/vue', 'stylelint-config-standard-vue'],
-  plugins: ['stylelint-order'],
+  plugins: [],
   rules: {
     // 这里是允许了空的style标签
     'no-empty-source': null,
@@ -36,83 +36,5 @@ module.exports = {
     // property-no-vendor-prefix
     'property-no-vendor-prefix': true,
     // 属性的排序
-    'order/properties-order': [
-      'position',
-      'top',
-      'right',
-      'bottom',
-      'left',
-      'z-index',
-      'display',
-      'justify-content',
-      'align-items',
-      'float',
-      'clear',
-      'overflow',
-      'overflow-x',
-      'overflow-y',
-      'margin',
-      'margin-top',
-      'margin-right',
-      'margin-bottom',
-      'margin-left',
-      'border',
-      'border-style',
-      'border-width',
-      'border-color',
-      'border-top',
-      'border-top-style',
-      'border-top-width',
-      'border-top-color',
-      'border-right',
-      'border-right-style',
-      'border-right-width',
-      'border-right-color',
-      'border-bottom',
-      'border-bottom-style',
-      'border-bottom-width',
-      'border-bottom-color',
-      'border-left',
-      'border-left-style',
-      'border-left-width',
-      'border-left-color',
-      'border-radius',
-      'padding',
-      'padding-top',
-      'padding-right',
-      'padding-bottom',
-      'padding-left',
-      'width',
-      'min-width',
-      'max-width',
-      'height',
-      'min-height',
-      'max-height',
-      'font-size',
-      'font-family',
-      'font-weight',
-      'text-align',
-      'text-justify',
-      'text-indent',
-      'text-overflow',
-      'text-decoration',
-      'white-space',
-      'color',
-      'background',
-      'background-position',
-      'background-repeat',
-      'background-size',
-      'background-color',
-      'background-clip',
-      'opacity',
-      'filter',
-      'list-style',
-      'outline',
-      'visibility',
-      'box-shadow',
-      'text-shadow',
-      'resize',
-      'transition',
-    ],
   },
 }
diff --git a/src/renderer/components/VirtualScroller.vue b/src/renderer/components/VirtualScroller.vue
index 248ce1ff..ea825870 100644
--- a/src/renderer/components/VirtualScroller.vue
+++ b/src/renderer/components/VirtualScroller.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" class="virtual-scroller" :style="{ height: `${containerHeight}px` }" @scroll="handleScroll">
+  <div ref="containerRef" class="virtual-scroller" @scroll="handleScroll">
     <div class="virtual-scroller-content" :style="contentStyles">
       <div
         class="virtual-scroller-viewport"
@@ -8,15 +8,11 @@
       >
         <div
           v-for="realIndex in visibleIndexes"
-          :key="
-            itemsRef[realIndex] && itemsRef[realIndex][props.keyField || 'id']
-              ? itemsRef[realIndex][props.keyField || 'id']
-              : realIndex
-          "
+          :key="items[realIndex] && items[realIndex][keyField || 'id'] ? items[realIndex][keyField || 'id'] : realIndex"
           class="virtual-scroller-item"
           :style="itemStyle"
         >
-          <slot :item="itemsRef[realIndex]" :index="realIndex" />
+          <slot :item="items[realIndex]" :index="realIndex" />
         </div>
       </div>
     </div>
@@ -24,73 +20,43 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'
 
 import { useVirtualGrid } from '@/hooks/useVirtualGrid'
 
-type Item = any
 interface Breakpoint {
   min: number
   cols: number
 }
 
-const props = withDefaults(
-  defineProps<{
-    items: Item[]
-    itemHeight: number
-    height?: number
-    gridItems?: number
-    gridBreakpoints?: Breakpoint[]
-    bufferFactor?: number
-    pageMode?: boolean
-    keyField?: string
-    itemPadding?: number
-    viewMode?: 'list' | 'grid'
-  }>(),
-  {
-    height: 400,
-    gridItems: 1,
-    gridBreakpoints: () => [],
-    bufferFactor: 0.5,
-    pageMode: false,
-    keyField: 'id',
-    itemPadding: 0,
-    viewMode: 'grid',
-  },
-)
+const {
+  items,
+  itemHeight,
+  gridBreakpoints = [],
+  bufferFactor = 0.5,
+  keyField = 'id',
+  itemPadding = 8,
+  viewMode = 'grid',
+} = defineProps<{
+  items: any[]
+  itemHeight: number
+  gridBreakpoints?: Breakpoint[]
+  bufferFactor?: number
+  keyField?: string
+  itemPadding?: number
+  viewMode?: 'list' | 'grid'
+}>()
 
 const containerRef = useTemplateRef('containerRef')
-const containerHeight = ref<number>(props.pageMode ? 0 : props.height)
+const containerHeight = ref(0)
 const containerWidth = ref<number>(0)
 const parentScrollListeners = ref<HTMLElement[]>([])
-
-const itemsRef = ref<Item[]>(props.items)
-watch(
-  () => props.items,
-  v => {
-    itemsRef.value = v
-  },
-)
-
-const localViewMode = ref<'list' | 'grid'>(props.viewMode)
-watch(
-  () => props.viewMode,
-  v => {
-    localViewMode.value = v
-  },
-)
-
-const sortedBreakpoints = computed<Breakpoint[]>(() => [...props.gridBreakpoints].sort((a, b) => a.min - b.min))
-
-const isForcedList = computed(() => localViewMode.value === 'list')
+const sortedBreakpoints = computed<Breakpoint[]>(() => [...gridBreakpoints].sort((a, b) => a.min - b.min))
 
 const effectiveCols = computed<number>(() => {
-  if (isForcedList.value) return 1
-
-  const base = Math.max(1, props.gridItems || 1)
-
+  if (viewMode === 'list') return 1
   const w = containerWidth.value || 0
-  let cols = base
+  let cols = 1
   for (const bp of sortedBreakpoints.value) {
     if (w >= bp.min) cols = Math.max(1, bp.cols)
   }
@@ -101,11 +67,11 @@ const isGridMode = computed(() => effectiveCols.value > 1)
 
 const { gridCalculations, visibleIndexes, viewportOffset, updateScrollTop, scrollToItem, scrollToTop, scrollToBottom } =
   useVirtualGrid({
-    items: itemsRef,
-    itemHeight: props.itemHeight,
+    items: () => items,
+    itemHeight,
     containerHeight,
     gridItems: effectiveCols,
-    bufferFactor: props.bufferFactor,
+    bufferFactor,
   })
 
 const contentStyles = computed(() => ({
@@ -118,13 +84,13 @@ const viewportStyle = computed(() => {
   }
   if (isGridMode.value) {
     base['--items-per-row'] = String(effectiveCols.value)
-    base['--row-height'] = `${props.itemHeight}px`
-    base['--item-gap'] = `${props.itemPadding}px`
+    base['--row-height'] = `${itemHeight}px`
+    base['--item-gap'] = `${itemPadding}px`
   }
   return base
 })
 
-const itemStyle = computed(() => (isGridMode.value ? {} : { height: `${props.itemHeight}px` }))
+const itemStyle = computed(() => (isGridMode.value ? {} : { height: `${itemHeight}px` }))
 
 function handleScroll() {
   const c = containerRef.value
@@ -133,7 +99,6 @@ function handleScroll() {
 }
 
 function handlePageScroll() {
-  if (!props.pageMode) return
   const now = Date.now()
   if (now - lastScrollTime.value < 16) return
   lastScrollTime.value = now
@@ -158,74 +123,56 @@ let ro: ResizeObserver | null = null
 const lastScrollTime = ref(0)
 
 function updateContainerMetrics() {
-  const el = containerRef.value
-  if (!el) return
-  const rect = el.getBoundingClientRect()
+  if (!containerRef.value) return
+  const rect = containerRef.value.getBoundingClientRect()
   containerWidth.value = rect.width
-  if (props.pageMode) {
-    containerHeight.value = Math.max(200, window.innerHeight - rect.top - 12)
-  } else {
-    containerHeight.value = props.height
-  }
+  containerHeight.value = Math.max(200, window.innerHeight - rect.top - 12)
 }
 
-onMounted(() => {
-  const el = containerRef.value
-  if (!el) return
-  ro = new ResizeObserver(updateContainerMetrics)
-  ro.observe(el as unknown as Element)
-  if (props.pageMode) {
-    ro.observe(document.documentElement)
-    window.addEventListener('scroll', handlePageScroll, { passive: true })
-    let parent = el.parentElement
-    while (parent) {
-      if (parent.scrollHeight > parent.clientHeight) {
-        parent.addEventListener('scroll', handlePageScroll, { passive: true })
-        parentScrollListeners.value.push(parent)
-      }
-      parent = parent.parentElement
-    }
-  }
-  updateContainerMetrics()
-  if (props.pageMode) {
-    window.addEventListener('resize', updateContainerMetrics, { passive: true })
-  }
-})
-
-onBeforeUnmount(() => {
-  if (ro) ro.disconnect()
-  window.removeEventListener('resize', updateContainerMetrics)
-  if (props.pageMode) {
-    window.removeEventListener('scroll', handlePageScroll)
-    parentScrollListeners.value.forEach(parent => {
-      parent.removeEventListener('scroll', handlePageScroll)
-    })
-    parentScrollListeners.value = []
-  }
-})
-
 function scrollTo(index: number) {
   scrollToItem(index)
 }
 
-function setViewMode(mode: 'list' | 'grid') {
-  localViewMode.value = mode
-}
-function toggleViewMode() {
-  setViewMode(isGridMode.value ? 'list' : 'grid')
-}
-
 function refresh() {
   updateContainerMetrics()
   if (containerRef.value) {
     updateScrollTop(containerRef.value.scrollTop)
   }
-  if (props.pageMode) {
-    handlePageScroll()
-  }
+  handlePageScroll()
 }
 
-defineExpose({ scrollTo, scrollToTop, scrollToBottom, setViewMode, toggleViewMode, refresh })
+onMounted(() => {
+  if (!containerRef.value) return
+  ro = new ResizeObserver(updateContainerMetrics)
+  ro.observe(containerRef.value)
+
+  ro.observe(document.documentElement)
+  window.addEventListener('scroll', handlePageScroll, { passive: true })
+  let parent = containerRef.value.parentElement
+  while (parent) {
+    if (parent.scrollHeight > parent.clientHeight) {
+      parent.addEventListener('scroll', handlePageScroll, { passive: true })
+      parentScrollListeners.value.push(parent)
+    }
+    parent = parent.parentElement
+  }
+
+  updateContainerMetrics()
+
+  window.addEventListener('resize', updateContainerMetrics, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  if (ro) ro.disconnect()
+  window.removeEventListener('resize', updateContainerMetrics)
+  window.removeEventListener('scroll', handlePageScroll)
+  parentScrollListeners.value.forEach(parent => {
+    parent.removeEventListener('scroll', handlePageScroll)
+  })
+  parentScrollListeners.value = []
+})
+
+defineExpose({ scrollTo, scrollToTop, scrollToBottom, refresh })
 </script>
 
 <style scoped>
diff --git a/src/renderer/hooks/useVirtualGrid.ts b/src/renderer/hooks/useVirtualGrid.ts
index 77221c53..70703656 100644
--- a/src/renderer/hooks/useVirtualGrid.ts
+++ b/src/renderer/hooks/useVirtualGrid.ts
@@ -1,47 +1,44 @@
-import type { Ref } from 'vue'
-import { computed, isRef, ref, watch } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, ref, toValue, watch } from 'vue'
 
 export interface UseVirtualGridOptions {
-  items: Ref<any[]>
+  items: MaybeRefOrGetter<any[]>
   itemHeight: number
-  containerHeight: Ref<number>
-  gridItems?: number | Ref<number>
+  containerHeight: MaybeRefOrGetter<number>
+  gridItems?: number | MaybeRefOrGetter<number>
   bufferFactor?: number
 }
 
 export function useVirtualGrid(options: UseVirtualGridOptions) {
   const { items, itemHeight, containerHeight, gridItems = 1, bufferFactor = 0.5 } = options
 
-  const gridItemsRef = isRef(gridItems) ? gridItems : ref(gridItems)
   const scrollTop = ref(0)
 
   const gridCalculations = computed(() => {
-    const itemsPerRow = Math.max(1, gridItemsRef.value || 1)
-    const totalRows = Math.ceil(items.value.length / itemsPerRow)
-    const rowHeight = itemHeight
-    const totalHeight = totalRows * rowHeight
+    const currentItems = toValue(items)
+    const itemsPerRow = Math.max(1, toValue(gridItems) || 1)
+    const totalRows = Math.ceil(currentItems.length / itemsPerRow)
+    const totalHeight = totalRows * itemHeight
 
     return {
       itemsPerRow,
       totalRows,
-      rowHeight,
+      itemHeight,
       totalHeight,
     }
   })
 
   const visibleRange = computed(() => {
-    const { rowHeight, totalRows } = gridCalculations.value
-    const height = containerHeight.value
+    const { itemHeight, totalRows } = gridCalculations.value
+    const height = toValue(containerHeight)
 
-    if (!height || !rowHeight || totalRows === 0) {
+    if (!height || !itemHeight || totalRows === 0) {
       return { startRow: 0, endRow: 0, visibleRows: 0 }
     }
-
-    const buffer = Math.ceil((height / rowHeight) * bufferFactor)
-    const startRow = Math.max(0, Math.floor(scrollTop.value / rowHeight) - buffer)
-    const visibleRows = Math.ceil(height / rowHeight) + buffer * 2
+    const buffer = Math.ceil((height / itemHeight) * bufferFactor)
+    const startRow = Math.max(0, Math.floor(scrollTop.value / itemHeight) - buffer)
+    const visibleRows = Math.ceil(height / itemHeight) + buffer * 2
     const endRow = Math.min(totalRows, startRow + visibleRows)
-
     return { startRow, endRow, visibleRows }
   })
 
@@ -53,7 +50,7 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
     for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
       for (let col = 0; col < itemsPerRow; col++) {
         const itemIndex = rowIndex * itemsPerRow + col
-        if (itemIndex < items.value.length) {
+        if (itemIndex < toValue(items).length) {
           indexes.push(itemIndex)
         }
       }
@@ -63,9 +60,9 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
   })
 
   const viewportOffset = computed(() => {
-    const { rowHeight } = gridCalculations.value
+    const { itemHeight } = gridCalculations.value
     const { startRow } = visibleRange.value
-    return startRow * rowHeight
+    return startRow * itemHeight
   })
 
   function updateScrollTop(newScrollTop: number) {
@@ -73,9 +70,9 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
   }
 
   function scrollToItem(index: number) {
-    const { itemsPerRow, rowHeight } = gridCalculations.value
+    const { itemsPerRow, itemHeight } = gridCalculations.value
     const rowIndex = Math.floor(index / itemsPerRow)
-    scrollTop.value = rowIndex * rowHeight
+    scrollTop.value = rowIndex * itemHeight
   }
 
   function scrollToTop() {
@@ -84,24 +81,20 @@ export function useVirtualGrid(options: UseVirtualGridOptions) {
 
   function scrollToBottom() {
     const { totalHeight } = gridCalculations.value
-    scrollTop.value = Math.max(0, totalHeight - containerHeight.value)
+    scrollTop.value = Math.max(0, totalHeight - toValue(containerHeight))
   }
 
-  watch(containerHeight, () => {
-    const { totalHeight } = gridCalculations.value
-    if (scrollTop.value > totalHeight - containerHeight.value) {
-      scrollTop.value = Math.max(0, totalHeight - containerHeight.value)
-    }
-  })
-
   watch(
-    () => items.value.length,
-    () => {
+    () => [toValue(containerHeight), toValue(items).length],
+    ([newHeight]) => {
       const { totalHeight } = gridCalculations.value
-      if (scrollTop.value > totalHeight - containerHeight.value) {
-        scrollTop.value = Math.max(0, totalHeight - containerHeight.value)
+      const maxScroll = Math.max(0, totalHeight - (newHeight as number))
+
+      if (scrollTop.value > maxScroll) {
+        scrollTop.value = maxScroll
       }
     },
+    { flush: 'post' },
   )
 
   return {
diff --git a/src/renderer/manage/pages/BucketPage.vue b/src/renderer/manage/pages/BucketPage.vue
index a8a246ad..4edcbbbd 100644
--- a/src/renderer/manage/pages/BucketPage.vue
+++ b/src/renderer/manage/pages/BucketPage.vue
@@ -266,246 +266,138 @@
     </div>
 
     <!-- Content Card -->
-    <div class="bucket-card content-card">
-      <!-- Fullscreen Header (only visible in fullscreen mode) -->
-      <div v-if="isContentFullscreen" class="fullscreen-header">
-        <div class="fullscreen-header-left">
-          <div class="fullscreen-breadcrumb">
-            <HomeIcon class="action-icon" />
-            <template v-if="configMap.prefix !== '/'">
-              <template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
-                <ChevronRightIcon class="breadcrumb-separator" />
-                <button class="breadcrumb-item" @click="handleBreadcrumbClick(Number(index))">
-                  {{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}
-                </button>
-              </template>
+    <!-- Fullscreen Header (only visible in fullscreen mode) -->
+    <div v-if="isContentFullscreen" class="bucket-card fullscreen-header">
+      <div class="fullscreen-header-left">
+        <div class="fullscreen-breadcrumb">
+          <HomeIcon class="action-icon" />
+          <template v-if="configMap.prefix !== '/'">
+            <template v-for="(item, index) in configMap.prefix.replace(/\/$/g, '').split('/')" :key="index">
+              <ChevronRightIcon class="breadcrumb-separator" />
+              <button class="breadcrumb-item" @click="handleBreadcrumbClick(Number(index))">
+                {{ item === '' ? t('pages.manage.bucket.rootFolder') : item }}
+              </button>
             </template>
-            <template v-else>
-              <span class="breadcrumb-item current">
-                {{ t('pages.manage.bucket.rootFolder') }}
-              </span>
-            </template>
-          </div>
+          </template>
+          <template v-else>
+            <span class="breadcrumb-item current">
+              {{ t('pages.manage.bucket.rootFolder') }}
+            </span>
+          </template>
         </div>
+      </div>
 
-        <div class="fullscreen-header-center">
-          <div class="file-info">
-            <div class="file-info-item">
-              <FileIcon class="action-icon" />
-              <span>{{ `${t('pages.manage.bucket.fileNum', { num: currentPageFilesInfo.length })}` }}</span>
-            </div>
-            <div class="file-info-item">
-              <span>{{ `${t('pages.manage.bucket.pageFileSize', { size: calculateAllFileSize })}` }}</span>
-            </div>
+      <div class="fullscreen-header-center">
+        <div class="file-info">
+          <div class="file-info-item">
+            <FileIcon class="action-icon" />
+            <span>{{ `${t('pages.manage.bucket.fileNum', { num: currentPageFilesInfo.length })}` }}</span>
           </div>
-        </div>
-
-        <div class="fullscreen-header-right">
-          <!-- Search -->
-          <input
-            v-model="searchText"
-            type="text"
-            class="search-input"
-            :placeholder="t('pages.manage.bucket.searchPlaceholder')"
-          />
-
-          <!-- Exit Fullscreen -->
-          <div class="tooltip">
-            <button class="action-button secondary" @click="toggleContentFullscreen">
-              <ShrinkIcon class="action-icon" />
-              <span class="tooltip-text">{{ t('pages.manage.bucket.exitFullScreen') }}</span>
-            </button>
+          <div class="file-info-item">
+            <span>{{ `${t('pages.manage.bucket.pageFileSize', { size: calculateAllFileSize })}` }}</span>
           </div>
         </div>
       </div>
 
-      <div class="content-area">
-        <!-- Virtual Scroller -->
-        <div class="virtual-scroller-container">
-          <VirtualScroller
-            ref="virtualScrollerRef"
-            :items="filterList"
-            :item-height="layoutStyle === 'grid' ? 240 : 70"
-            :view-mode="layoutStyle"
-            :grid-breakpoints="gridBreakpoints"
-            :page-mode="true"
-            :buffer-factor="0.5"
-            key-field="key"
-            :item-padding="8"
+      <div class="fullscreen-header-right">
+        <!-- Search -->
+        <input
+          v-model="searchText"
+          type="text"
+          class="search-input"
+          :placeholder="t('pages.manage.bucket.searchPlaceholder')"
+        />
+
+        <!-- Exit Fullscreen -->
+        <div class="tooltip">
+          <button class="action-button secondary" @click="toggleContentFullscreen">
+            <ShrinkIcon class="action-icon" />
+            <span class="tooltip-text">{{ t('pages.manage.bucket.exitFullScreen') }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="bucket-card content-area">
+      <!-- Virtual Scroller -->
+      <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
+        ref="virtualScrollerRef"
+        :items="filterList"
+        class="virtual-gallery-scroller"
+        :item-height="layoutStyle === 'grid' ? 240 : 70"
+        :view-mode="layoutStyle"
+        :grid-breakpoints="gridBreakpoints"
+        key-field="key"
+      >
+        <template #default="{ item, index }">
+          <!-- Grid View -->
+          <div
+            v-if="layoutStyle === 'grid'"
+            class="file-grid-item"
+            :class="{ selected: item.checked }"
+            @click="handleClickFile(item)"
           >
-            <template #default="{ item, index }">
-              <!-- Grid View -->
-              <div
-                v-if="layoutStyle === 'grid'"
-                class="file-grid-item"
-                :class="{ selected: item.checked }"
-                @click="handleClickFile(item)"
-              >
-                <div class="file-preview">
-                  <!-- Image Preview -->
-                  <template
-                    v-if="!item.isDir && !['webdavplist', 'sftp', 'local', 's3plist'].includes(currentPicBedName)"
-                  >
-                    <img v-if="isShowThumbnail && item.isImage" :src="item.url" class="file-image" @error="() => {}" />
-                    <img v-else :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`" class="file-image" />
-                  </template>
+            <div class="file-preview">
+              <!-- Image Preview -->
+              <template v-if="!item.isDir && !['webdavplist', 'sftp', 'local', 's3plist'].includes(currentPicBedName)">
+                <img v-if="isShowThumbnail && item.isImage" :src="item.url" class="file-image" @error="() => {}" />
+                <img v-else :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`" class="file-image" />
+              </template>
 
-                  <!-- S3 PreSign Image -->
-                  <ImagePreSign
-                    v-else-if="!item.isDir && currentPicBedName === 's3plist' && isUsePreSignedUrl"
-                    :is-show-thumbnail="isShowThumbnail"
-                    :item="item"
-                    :alias="configMap.alias"
-                    :url="item.url"
-                    :config="handleGetS3Config(item)"
-                  />
+              <!-- S3 PreSign Image -->
+              <ImagePreSign
+                v-else-if="!item.isDir && currentPicBedName === 's3plist' && isUsePreSignedUrl"
+                :is-show-thumbnail="isShowThumbnail"
+                :item="item"
+                :alias="configMap.alias"
+                :url="item.url"
+                :config="handleGetS3Config(item)"
+              />
 
-                  <!-- WebDAV Image -->
-                  <ImageWebdav
-                    v-else-if="!item.isDir && currentPicBedName === 'webdavplist' && item.isImage"
-                    :is-show-thumbnail="isShowThumbnail"
-                    :item="item"
-                    :config="handleGetWebdavConfig()"
-                    :url="item.url"
-                  />
+              <!-- WebDAV Image -->
+              <ImageWebdav
+                v-else-if="!item.isDir && currentPicBedName === 'webdavplist' && item.isImage"
+                :is-show-thumbnail="isShowThumbnail"
+                :item="item"
+                :config="handleGetWebdavConfig()"
+                :url="item.url"
+              />
 
-                  <!-- Local Image -->
-                  <ImageLocal
-                    v-else-if="!item.isDir && currentPicBedName === 'local' && item.isImage"
-                    :is-show-thumbnail="isShowThumbnail"
-                    :item="item"
-                    :local-path="item.key"
-                  />
+              <!-- Local Image -->
+              <ImageLocal
+                v-else-if="!item.isDir && currentPicBedName === 'local' && item.isImage"
+                :is-show-thumbnail="isShowThumbnail"
+                :item="item"
+                :local-path="item.key"
+              />
 
-                  <!-- Default File Icon -->
-                  <template v-else-if="!item.isDir">
-                    <img :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`" class="file-image" />
-                  </template>
+              <!-- Default File Icon -->
+              <template v-else-if="!item.isDir">
+                <img :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`" class="file-image" />
+              </template>
 
-                  <!-- Folder Icon -->
-                  <template v-else>
-                    <FolderIcon class="file-icon" />
-                  </template>
-                </div>
+              <!-- Folder Icon -->
+              <template v-else>
+                <FolderIcon class="file-icon" />
+              </template>
+            </div>
 
-                <div class="file-info-section">
-                  <div class="file-name" :title="item.fileName" @click.stop="copyToClipboard(item.fileName ?? '')">
-                    {{ formatFileName(item.fileName ?? '', 25) }}
-                  </div>
-                  <div class="file-meta">
-                    <span>{{ formatFileSize(item.fileSize) }}</span>
-                    <span>{{ item.formatedTime }}</span>
-                  </div>
-                  <div class="file-actions">
-                    <div class="file-action-group">
-                      <!-- Rename -->
-                      <button
-                        v-if="!item.isDir && isShowRenameFileIcon"
-                        class="file-action-button"
-                        @click.stop="handleRenameFile(item)"
-                      >
-                        <EditIcon class="action-icon" />
-                      </button>
-
-                      <!-- Download Folder -->
-                      <button
-                        v-if="item.isDir"
-                        class="file-action-button"
-                        @click.stop="handleFolderBatchDownload(item)"
-                      >
-                        <DownloadIcon class="action-icon" />
-                      </button>
-
-                      <!-- Copy Link Dropdown -->
-                      <div class="file-actions-dropdown" :data-dropdown-index="index">
-                        <button class="file-action-button" @click.stop="toggleCopyDropdown(index, $event)">
-                          <CopyIcon class="action-icon" />
-                        </button>
-                        <teleport to="body">
-                          <div
-                            v-if="copyDropdownIndex === index"
-                            class="file-actions-dropdown-content floating"
-                            :style="getDropdownStyle(index)"
-                            data-floating-dropdown
-                          >
-                            <div
-                              v-for="format in linkFormatList"
-                              :key="format"
-                              class="file-actions-dropdown-item"
-                              @click.stop="copyLink(item, format)"
-                            >
-                              {{ t(`pages.manage.bucket.linkFormat.${format}`) }}
-                            </div>
-                            <div
-                              v-if="isShowPresignedUrl"
-                              class="file-actions-dropdown-item"
-                              @click.stop="async () => copyToClipboard(await getPreSignedUrl(item))"
-                            >
-                              {{ t('pages.manage.bucket.linkFormat.presign') }}
-                            </div>
-                          </div>
-                        </teleport>
-                      </div>
-
-                      <!-- File Info -->
-                      <button class="file-action-button" @click.stop="handleShowFileInfo(item)">
-                        <InfoIcon class="action-icon" />
-                      </button>
-
-                      <!-- Delete -->
-                      <button class="file-action-button danger" @click.stop="handleDeleteFile(item)">
-                        <Trash2Icon class="action-icon" />
-                      </button>
-                    </div>
-
-                    <!-- Checkbox -->
-                    <input v-model="item.checked" type="checkbox" class="file-checkbox" @click.stop />
-                  </div>
-                </div>
+            <div class="file-info-section">
+              <div class="file-name" :title="item.fileName" @click.stop="copyToClipboard(item.fileName ?? '')">
+                {{ formatFileName(item.fileName ?? '', 25) }}
               </div>
-
-              <!-- List View -->
-              <div
-                v-else
-                class="file-list-item"
-                :class="{ selected: item.checked }"
-                @click="handleCheckChangeOther(item)"
-              >
-                <!-- Checkbox -->
-                <input v-model="item.checked" type="checkbox" class="file-list-checkbox file-checkbox" @click.stop />
-
-                <!-- Icon -->
-                <div class="file-list-icon">
-                  <template v-if="!item.isDir">
-                    <img
-                      v-if="isShowThumbnail && item.isImage"
-                      :src="item.url"
-                      class="file-image"
-                      style="border-radius: 4px; width: 32px; height: 32px; object-fit: cover"
-                      @error="() => {}"
-                    />
-                    <img
-                      v-else
-                      :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
-                      style="width: 32px; height: 32px; object-fit: contain"
-                    />
-                  </template>
-                  <FolderIcon v-else class="file-icon" style="width: 32px; height: 32px" />
-                </div>
-
-                <!-- File Info -->
-                <div class="file-list-info" @click.stop="handleClickFile(item)">
-                  <div class="file-list-name">
-                    {{ formatFileName(item.fileName ?? '', 40) }}
-                  </div>
-                  <div class="file-list-meta">
-                    <span>{{ formatFileSize(item.fileSize) }}</span>
-                    <span>{{ item.formatedTime }}</span>
-                  </div>
-                </div>
-
-                <!-- Actions -->
-                <div class="file-list-actions">
+              <div class="file-meta">
+                <span>{{ formatFileSize(item.fileSize) }}</span>
+                <span>{{ item.formatedTime }}</span>
+              </div>
+              <div class="file-actions">
+                <div class="file-action-group">
                   <!-- Rename -->
                   <button
                     v-if="!item.isDir && isShowRenameFileIcon"
@@ -520,23 +412,36 @@
                     <DownloadIcon class="action-icon" />
                   </button>
 
-                  <!-- Copy Link -->
-                  <button
-                    class="file-action-button"
-                    @click.stop="
-                      async () =>
-                        copyToClipboard(
-                          await formatLink(
-                            item.url,
-                            item.fileName,
-                            manageStore.config.settings.pasteFormat ?? '$markdown',
-                            manageStore.config.settings.customPasteFormat ?? '$url',
-                          ),
-                        )
-                    "
-                  >
-                    <CopyIcon class="action-icon" />
-                  </button>
+                  <!-- Copy Link Dropdown -->
+                  <div class="file-actions-dropdown" :data-dropdown-index="index">
+                    <button class="file-action-button" @click.stop="toggleCopyDropdown(index, $event)">
+                      <CopyIcon class="action-icon" />
+                    </button>
+                    <teleport to="body">
+                      <div
+                        v-if="copyDropdownIndex === index"
+                        class="file-actions-dropdown-content floating"
+                        :style="getDropdownStyle(index)"
+                        data-floating-dropdown
+                      >
+                        <div
+                          v-for="format in linkFormatList"
+                          :key="format"
+                          class="file-actions-dropdown-item"
+                          @click.stop="copyLink(item, format)"
+                        >
+                          {{ t(`pages.manage.bucket.linkFormat.${format}`) }}
+                        </div>
+                        <div
+                          v-if="isShowPresignedUrl"
+                          class="file-actions-dropdown-item"
+                          @click.stop="async () => copyToClipboard(await getPreSignedUrl(item))"
+                        >
+                          {{ t('pages.manage.bucket.linkFormat.presign') }}
+                        </div>
+                      </div>
+                    </teleport>
+                  </div>
 
                   <!-- File Info -->
                   <button class="file-action-button" @click.stop="handleShowFileInfo(item)">
@@ -548,11 +453,95 @@
                     <Trash2Icon class="action-icon" />
                   </button>
                 </div>
+
+                <!-- Checkbox -->
+                <input v-model="item.checked" type="checkbox" class="file-checkbox" @click.stop />
               </div>
-            </template>
-          </VirtualScroller>
-        </div>
-      </div>
+            </div>
+          </div>
+
+          <!-- List View -->
+          <div v-else class="file-list-item" :class="{ selected: item.checked }" @click="handleCheckChangeOther(item)">
+            <!-- Checkbox -->
+            <input v-model="item.checked" type="checkbox" class="file-list-checkbox file-checkbox" @click.stop />
+
+            <!-- Icon -->
+            <div class="file-list-icon">
+              <template v-if="!item.isDir">
+                <img
+                  v-if="isShowThumbnail && item.isImage"
+                  :src="item.url"
+                  class="file-image"
+                  style="border-radius: 4px; width: 32px; height: 32px; object-fit: cover"
+                  @error="() => {}"
+                />
+                <img
+                  v-else
+                  :src="`./assets/icons/${getFileIconPath(item.fileName ?? '')}`"
+                  style="width: 32px; height: 32px; object-fit: contain"
+                />
+              </template>
+              <FolderIcon v-else class="file-icon" style="width: 32px; height: 32px" />
+            </div>
+
+            <!-- File Info -->
+            <div class="file-list-info" @click.stop="handleClickFile(item)">
+              <div class="file-list-name">
+                {{ formatFileName(item.fileName ?? '', 40) }}
+              </div>
+              <div class="file-list-meta">
+                <span>{{ formatFileSize(item.fileSize) }}</span>
+                <span>{{ item.formatedTime }}</span>
+              </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="file-list-actions">
+              <!-- Rename -->
+              <button
+                v-if="!item.isDir && isShowRenameFileIcon"
+                class="file-action-button"
+                @click.stop="handleRenameFile(item)"
+              >
+                <EditIcon class="action-icon" />
+              </button>
+
+              <!-- Download Folder -->
+              <button v-if="item.isDir" class="file-action-button" @click.stop="handleFolderBatchDownload(item)">
+                <DownloadIcon class="action-icon" />
+              </button>
+
+              <!-- Copy Link -->
+              <button
+                class="file-action-button"
+                @click.stop="
+                  async () =>
+                    copyToClipboard(
+                      await formatLink(
+                        item.url,
+                        item.fileName,
+                        manageStore.config.settings.pasteFormat ?? '$markdown',
+                        manageStore.config.settings.customPasteFormat ?? '$url',
+                      ),
+                    )
+                "
+              >
+                <CopyIcon class="action-icon" />
+              </button>
+
+              <!-- File Info -->
+              <button class="file-action-button" @click.stop="handleShowFileInfo(item)">
+                <InfoIcon class="action-icon" />
+              </button>
+
+              <!-- Delete -->
+              <button class="file-action-button danger" @click.stop="handleDeleteFile(item)">
+                <Trash2Icon class="action-icon" />
+              </button>
+            </div>
+          </div>
+        </template>
+      </VirtualScroller>
     </div>
 
     <!-- URL Upload Dialog -->
@@ -779,7 +768,6 @@
                 )
               "
               :item-height="60"
-              :height="300"
               view-mode="list"
             >
               <template #default="{ item }">
@@ -869,7 +857,7 @@
                     {{ t('pages.manage.bucket.clearAll') }}
                   </button>
                 </div>
-                <VirtualScroller :items="uploadingTaskList" :item-height="60" :height="400" view-mode="list">
+                <VirtualScroller :items="uploadingTaskList" :item-height="60" view-mode="list">
                   <template #default="{ item }">
                     <div class="file-list-item">
                       <div class="file-list-info">
@@ -904,7 +892,6 @@
                 <VirtualScroller
                   :items="uploadedTaskList.filter(item => item.status === 'uploaded')"
                   :item-height="60"
-                  :height="400"
                   view-mode="list"
                 >
                   <template #default="{ item }">
@@ -944,7 +931,6 @@
                 <VirtualScroller
                   :items="uploadedTaskList.filter(item => item.status !== 'uploaded')"
                   :item-height="60"
-                  :height="400"
                   view-mode="list"
                 >
                   <template #default="{ item }">
@@ -1045,7 +1031,7 @@
                     {{ t('pages.manage.bucket.openDownloadFolder') }}
                   </button>
                 </div>
-                <VirtualScroller :items="downloadingTaskList" :item-height="60" :height="500" view-mode="list">
+                <VirtualScroller :items="downloadingTaskList" :item-height="60" view-mode="list">
                   <template #default="{ item }">
                     <div class="file-list-item">
                       <div class="file-list-info">
@@ -1084,7 +1070,6 @@
                 <VirtualScroller
                   :items="downloadedTaskList.filter(item => item.status === 'downloaded')"
                   :item-height="60"
-                  :height="500"
                   view-mode="list"
                 >
                   <template #default="{ item }">
@@ -1128,7 +1113,6 @@
                 <VirtualScroller
                   :items="downloadedTaskList.filter(item => item.status !== 'downloaded')"
                   :item-height="60"
-                  :height="500"
                   view-mode="list"
                 >
                   <template #default="{ item }">
diff --git a/src/renderer/manage/pages/css/BucketPage.css b/src/renderer/manage/pages/css/BucketPage.css
index fd769ffc..c7538749 100644
--- a/src/renderer/manage/pages/css/BucketPage.css
+++ b/src/renderer/manage/pages/css/BucketPage.css
@@ -1,1319 +1,1327 @@
-/* BucketPage Styles */
-
-.bucket-container {
-  position: relative;
-  display: flex;
-  overflow: hidden;
-  padding: 1rem;
-  height: 100vh;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Header Card */
-.bucket-card {
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-xl);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-sm);
-  transition: var(--transition-medium);
-}
-
-.bucket-card:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-}
-
-.header-card {
-  flex-shrink: 0;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 0.75rem 1rem;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-  min-width: 200px;
-}
-
-.custom-domain-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem;
-  width: 200px;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-}
-
-.custom-domain-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-.custom-domain-select {
-  position: relative;
-  width: 200px;
-}
-
-.select-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 2rem 0.5rem 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.select-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-.select-arrow {
-  position: absolute;
-  top: 50%;
-  right: 0.75rem;
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-secondary);
-  transition: var(--transition-fast);
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.select-dropdown {
-  position: absolute;
-  top: 100%;
-  right: 0;
-  left: 0;
-  z-index: 1000;
-  overflow-y: auto;
-  margin-top: 0.25rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  max-height: 200px;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-lg);
-}
-
-.select-option {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.select-option:hover {
-  background: var(--color-surface-elevated);
-}
-
-.custom-domain-link {
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-decoration: none;
-  color: var(--color-accent);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.custom-domain-link:hover {
-  text-decoration: underline;
-  color: var(--color-accent-hover);
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.action-button {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  gap: 0.25rem;
-  cursor: pointer;
-}
-
-.action-button:hover {
-  color: white;
-  background: var(--color-accent);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-.action-button.primary {
-  color: white;
-  background: var(--color-blue-common);
-}
-
-.action-button.primary:hover {
-  background: var(--color-accent-hover);
-}
-
-.action-button.secondary {
-  border: 1px solid var(--color-border);
-  background: var(--color-surface-elevated);
-}
-
-.action-button.secondary:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.action-button.danger {
-  color: white;
-  background: var(--color-error);
-}
-
-.action-button.danger:hover {
-  background: var(--color-error);
-}
-
-.action-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.search-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem;
-  width: 200px;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-}
-
-.search-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-/* Breadcrumb */
-.breadcrumb-card {
-  flex-shrink: 0;
-}
-
-.breadcrumb-container {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.75rem 1rem;
-  flex-wrap: wrap;
-}
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  gap: 0.25rem;
-  cursor: pointer;
-}
-
-.breadcrumb-item:hover {
-  color: var(--color-accent);
-}
-
-.breadcrumb-item.current {
-  font-weight: 500;
-  color: var(--color-text-primary);
-  cursor: default;
-}
-
-.breadcrumb-separator {
-  margin: 0 0.125rem;
-  color: var(--color-text-tertiary);
-}
-
-/* Control Panel */
-.control-panel-card {
-  flex-shrink: 0;
-}
-
-.control-panel {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  gap: 1rem;
-  flex-wrap: wrap;
-}
-
-.control-left {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  flex: 1;
-}
-
-.file-info {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.file-info-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.control-center {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.control-right {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.view-toggle {
-  display: flex;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-}
-
-.view-toggle-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  padding: 0.5rem;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.view-toggle-button.active {
-  color: white;
-  background: var(--color-accent);
-}
-
-.view-toggle-button:not(.active):hover {
-  background: var(--color-surface);
-}
-
-.dropdown {
-  position: relative;
-}
-
-.dropdown-button {
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.dropdown-button:hover {
-  border-color: var(--color-accent);
-  background: var(--color-surface);
-}
-
-.dropdown-content {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  margin-top: 0.25rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  min-width: 150px;
-  background: var(--color-background-primary);
-  box-shadow: var(--shadow-lg);
-}
-
-.dropdown-item {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.dropdown-item:hover {
-  color: var(--color-accent);
-  background: var(--color-surface-elevated);
-}
-
-.page-input {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.25rem 0.5rem;
-  width: 80px;
-  font-size: 0.875rem;
-  text-align: center;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.page-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-}
-
-/* Content Area */
-.content-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.content-area {
-  position: relative;
-  overflow: visible hidden;
-  padding: 0.5rem;
-  background: var(--color-background-secondary);
-  flex: 1;
-}
-
-/* Virtual Scroller Container */
-.virtual-scroller-container {
-  overflow: visible;
-  width: 100%;
-  height: 100%;
-}
-
-/* File Grid Item */
-.file-grid-item {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  overflow: visible;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  height: 220px;
-  background: var(--color-surface);
-  transition: var(--transition-medium);
-  flex-direction: column;
-  cursor: pointer;
-}
-
-.file-grid-item:hover {
-  z-index: 10;
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.file-grid-item.selected {
-  z-index: 10;
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
-}
-
-.file-preview {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-  background: var(--color-surface-elevated);
-  aspect-ratio: 16/9;
-}
-
-.file-image {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  transition: var(--transition-medium);
-}
-
-.file-icon {
-  width: 48px;
-  height: 48px;
-  color: var(--color-text-tertiary);
-}
-
-.file-info-section {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  justify-content: space-between;
-  padding: 0.75rem;
-  flex: 1;
-  flex-direction: column;
-}
-
-.file-name {
-  overflow: hidden;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-primary);
-  cursor: pointer;
-}
-
-.file-name:hover {
-  color: var(--color-accent);
-}
-
-.file-meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-.file-actions {
-  position: relative;
-  z-index: 10;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.file-action-group {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.file-action-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-sm);
-  padding: 0.375rem;
-  width: 28px;
-  height: 28px;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.file-action-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface);
-  transform: translateY(-1px);
-}
-
-.file-action-button.danger:hover {
-  color: var(--color-error);
-  background: rgb(239 68 68 / 10%);
-}
-
-.file-checkbox {
-  position: relative;
-  border: 2px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  width: 16px;
-  height: 16px;
-  background: var(--color-surface);
-  transition: var(--transition-fast);
-  appearance: none;
-  cursor: pointer;
-}
-
-.file-checkbox:checked {
-  border-color: var(--color-accent);
-  background: var(--color-accent);
-}
-
-.file-checkbox:checked::after {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  font-size: 10px;
-  font-weight: bold;
-  color: white;
-  content: '✓';
-  transform: translate(-50%, -50%);
-}
-
-/* File List Item */
-.file-list-item {
-  display: flex;
-  align-items: center;
-  margin: 0;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  padding: 0.75rem 1rem;
-  width: 100%;
-  background: var(--color-surface);
-  transition: var(--transition-medium);
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-.file-list-item:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-sm);
-  transform: translateY(-1px);
-}
-
-.file-list-item.selected {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
-}
-
-.file-list-checkbox {
-  flex-shrink: 0;
-  margin-right: 0.25rem;
-}
-
-.file-list-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  flex-shrink: 0;
-}
-
-.file-list-info {
-  margin-right: 1rem;
-  min-width: 0;
-  flex: 1;
-}
-
-.file-list-name {
-  overflow: hidden;
-  margin-bottom: 0.25rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-primary);
-  cursor: pointer;
-}
-
-.file-list-name:hover {
-  color: var(--color-accent);
-}
-
-.file-list-path {
-  overflow: hidden;
-  margin-bottom: 0.25rem;
-  font-size: 0.75rem;
-  font-family: 'SF Mono', Monaco, Inconsolata, 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Cascadia Code', 'Courier New', monospace;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-tertiary);
-  opacity: 0.8;
-}
-
-.file-list-meta {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-.file-list-actions {
-  display: flex;
-  gap: 0.25rem;
-  flex-shrink: 0;
-}
-
-/* File Actions Dropdown */
-.file-actions-dropdown {
-  position: relative;
-  z-index: 100;
-}
-
-.file-actions-dropdown-content {
-   position: absolute;
-  top: 100%;
-  right: 0;
-  z-index: 3000;
-  overflow: visible;
-  overflow-y: auto;
-  margin-top: 0.25rem;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  min-width: 120px;
-  max-width: 200px;
-
-  /* Ensure dropdown is never clipped */
-  max-height: 300px;
-  white-space: nowrap;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-lg);
-  transform-origin: top right;
-  animation: dropdown-appear 0.15s ease-out;
-}
-
-@keyframes dropdown-appear {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-5px);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-.file-actions-dropdown-content.position-left {
-  right: auto;
-  left: 0;
-  transform-origin: top left;
-}
-
-.file-actions-dropdown-content.position-up {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 0.25rem;
-  transform-origin: bottom right;
-}
-
-.file-actions-dropdown-content.position-up.position-left {
-  transform-origin: bottom left;
-}
-
-.content-fullscreen .file-actions-dropdown-content {
-  z-index: 4000;
-}
-
-@media (width <= 768px) {
-  .file-actions-dropdown-content {
-    min-width: 120px;
-    max-width: 150px;
-  }
-}
-
-.file-actions-dropdown-item {
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-background-primary);
-  transition: var(--transition-fast);
-  cursor: pointer;
-  gap: 0.5rem;
-}
-
-.file-actions-dropdown-item:last-child {
-  border-bottom: none;
-}
-
-.file-actions-dropdown-item:hover {
-  color: var(--color-blue-common);
-  background: var(--color-surface-elevated);
-}
-
-/* Modal Overlay */
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 2000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(0 0 0 / 50%);
-}
-
-.modal-container {
-  display: flex;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  max-width: 90vw;
-  max-height: 90vh;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-xl);
-  flex-direction: column;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  flex-shrink: 0;
-}
-
-.modal-title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.modal-close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.5rem;
-  color: var(--color-text-secondary);
-  background: none;
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.modal-close:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.modal-content {
-  overflow-y: auto;
-  padding: 1.5rem;
-  background: var(--color-background-primary);
-  flex: 1;
-}
-
-.modal-footer {
-  display: flex;
-  justify-content: flex-end;
-  border-top: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  background: var(--color-background-primary);
-  gap: 0.75rem;
-  flex-shrink: 0;
-}
-
-/* Form Elements */
-.form-group {
-  margin-bottom: 1rem;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.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-surface-elevated);
-  transition: var(--transition-fast);
-}
-
-.form-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-.form-textarea {
-  min-height: 100px;
-  resize: vertical;
-}
-
-.form-select {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem 2rem 0.75rem 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  cursor: pointer;
-  appearance: none;
-}
-
-.form-select:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 3px var(--color-accent-soft);
-}
-
-/* Switch */
-.switch-container {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  width: 44px;
-  height: 24px;
-}
-
-.switch input {
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-
-.switch-slider {
-  position: absolute;
-  inset: 0;
-  border-radius: 24px;
-  background-color: var(--color-border);
-  transition: 0.3s;
-  cursor: pointer;
-}
-
-.switch-slider::before {
-  position: absolute;
-  bottom: 3px;
-  left: 3px;
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  background-color: white;
-  transition: 0.3s;
-  content: "";
-}
-
-input:checked + .switch-slider {
-  background-color: var(--color-accent);
-}
-
-input:checked + .switch-slider::before {
-  transform: translateX(20px);
-}
-
-.switch-label {
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-}
-
-/* Drawer */
-.drawer-overlay {
-  position: fixed;
-  inset: 32px 0 0;
-  z-index: 2000;
-  display: flex;
-  justify-content: flex-end;
-  background: rgb(0 0 0 / 50%);
-}
-
-.drawer-container {
-  display: flex;
-  width: 60%;
-  max-width: 800px;
-  height: 100%;
-  background: var(--color-background-secondary);
-  box-shadow: var(--shadow-xl);
-  transition: transform 0.3s ease-out;
-  flex-direction: column;
-  transform: translateX(100%);
-}
-
-.drawer-overlay.open .drawer-container {
-  transform: translateX(0);
-}
-
-.drawer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1rem 1.5rem;
-  flex-shrink: 0;
-}
-
-.drawer-title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.drawer-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.5rem;
-}
-
-/* Upload Area */
-.upload-area {
-  border: 2px dashed var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 3rem 2rem;
-  text-align: center;
-  background: var(--color-surface-elevated);
-  transition: var(--transition-medium);
-  cursor: pointer;
-}
-
-.upload-area:hover,
-.upload-area.dragover {
-  border-color: var(--color-accent);
-  background: var(--color-accent-soft);
-}
-
-.upload-area-text {
-  margin-bottom: 0.5rem;
-  font-size: 1.125rem;
-  color: var(--color-text-secondary);
-}
-
-.upload-area-subtext {
-  font-size: 0.875rem;
-  color: var(--color-text-tertiary);
-}
-
-/* Tabs */
-.tabs-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.tabs-header {
-  display: flex;
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.tab-button {
-  position: relative;
-  border: none;
-  border-bottom: 2px solid transparent;
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-secondary);
-  background: none;
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.tab-button:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.tab-button.active {
-  border-bottom-color: var(--color-accent);
-  color: var(--color-accent);
-}
-
-.tab-badge {
-  position: absolute;
-  top: 0.25rem;
-  right: 0.25rem;
-  border-radius: 10px;
-  padding: 0.125rem 0.375rem;
-  min-width: 16px;
-  font-size: 0.625rem;
-  text-align: center;
-  color: white;
-  background: var(--color-accent);
-}
-
-.tab-content {
-  display: flex;
-  overflow: hidden;
-  flex: 1;
-  flex-direction: column;
-}
-
-.tab-panel {
-  overflow-y: auto;
-  padding: 1rem;
-  flex: 1;
-}
-
-/* Progress Bar */
-.progress-bar {
-  overflow: hidden;
-  border-radius: 4px;
-  width: 100%;
-  height: 8px;
-  background: var(--color-surface-elevated);
-}
-
-.progress-fill {
-  border-radius: 4px;
-  height: 100%;
-  background: var(--color-accent);
-  transition: width 0.3s ease;
-}
-
-/* Badge */
-.badge {
-  display: inline-flex;
-  align-items: center;
-  border-radius: var(--radius-sm);
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.badge.success {
-  color: var(--color-success);
-  background: var(--color-success-soft);
-}
-
-.badge.error {
-  color: var(--color-error);
-  background: var(--color-error-soft);
-}
-
-.badge.warning {
-  color: var(--color-warning);
-  background: var(--color-warning-soft);
-}
-
-/* Tooltip */
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip-text {
-  position: absolute;
-  top: 125%;
-  left: 50%;
-  z-index: 1000;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.5rem;
-  width: max-content;
-  max-width: 200px;
-  font-size: 0.75rem;
-  text-align: center;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  opacity: 0;
-  visibility: hidden;
-  box-shadow: var(--shadow-md);
-  transition: opacity 0.3s;
-  transform: translateX(-50%);
-}
-
-.tooltip:hover .tooltip-text {
-  opacity: 1;
-  visibility: visible;
-}
-
-/* File Actions Dropdown */
-@media (width <= 768px) {
-  .file-actions-dropdown-content {
-    min-width: 100px;
-    max-width: 140px;
-  }
-}
-
-/* Empty State */
-.empty-state {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 4rem 2rem;
-  text-align: center;
-  flex-direction: column;
-}
-
-.empty-state-icon {
-  margin-bottom: 1rem;
-  width: 64px;
-  height: 64px;
-  color: var(--color-text-tertiary);
-}
-
-.empty-state-title {
-  margin-bottom: 0.5rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.empty-state-description {
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-/* Responsive Design */
-@media (width <= 768px) {
-  .bucket-container {
-    padding: 0.5rem;
-  }
-  
-  .card-header {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .header-left {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.5rem;
-  }
-  
-  .control-panel {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.75rem;
-  }
-  
-  .file-grid-item {
-    overflow: auto;
-    height: 240px;
-  }
-  
-  .drawer-container {
-    width: 90%;
-  }
-}
-
-/* Transitions */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from, .fade-leave-to {
-  opacity: 0;
-}
-
-.slide-enter-active, .slide-leave-active {
-  transition: transform 0.3s ease;
-}
-
-.slide-enter-from, .slide-leave-to {
-  transform: translateX(100%);
-}
-
-/* Fullscreen Styles */
-.content-fullscreen {
-  padding: 0;
-  gap: 0;
-}
-
-.content-fullscreen .content-card {
-  display: flex;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  flex: 1;
-  flex-direction: column;
-}
-
-.fullscreen-header {
-  z-index: 100;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border-secondary);
-  padding: 0.75rem 1rem;
-  background: var(--color-surface);
-  flex-shrink: 0;
-}
-
-.fullscreen-header-left {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 200px;
-}
-
-.fullscreen-header-center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1;
-}
-
-.fullscreen-header-right {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  min-width: 200px;
-  gap: 0.75rem;
-  flex: 1;
-}
-
-.fullscreen-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.content-fullscreen .content-area {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: visible;
-}
-
-.content-fullscreen .virtual-scroller-container {
-  flex: 1;
-  overflow: visible;
-}
-
-/* Responsive adjustments for fullscreen */
-@media (width <= 768px) {
-  .fullscreen-header {
-    flex-direction: column;
-    gap: 0.75rem;
-    padding: 1rem;
-  }
-  
-  .fullscreen-header-left,
-  .fullscreen-header-center,
-  .fullscreen-header-right {
-    width: 100%;
-    min-width: unset;
-  }
-  
-  .fullscreen-header-right {
-    justify-content: space-between;
-  }
-}
+/* BucketPage Styles */
+
+.bucket-container {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  padding: 1rem;
+  height: 100vh;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Header Card */
+.bucket-card {
+  overflow: hidden;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-xl);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-medium);
+}
+
+.bucket-card:hover {
+  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
+}
+
+.header-card {
+  flex-shrink: 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 0.75rem 1rem;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+  min-width: 200px;
+}
+
+.custom-domain-input {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.75rem;
+  width: 200px;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+}
+
+.custom-domain-input:focus {
+  border-color: var(--color-accent);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+.custom-domain-select {
+  position: relative;
+  width: 200px;
+}
+
+.select-input {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 2rem 0.5rem 0.75rem;
+  width: 100%;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.select-input:focus {
+  border-color: var(--color-accent);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+.select-arrow {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-secondary);
+  transition: var(--transition-fast);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.select-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  z-index: 1000;
+  overflow-y: auto;
+  margin-top: 0.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  max-height: 200px;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+}
+
+.select-option {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.select-option:hover {
+  background: var(--color-surface-elevated);
+}
+
+.custom-domain-link {
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-decoration: none;
+  color: var(--color-accent);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.custom-domain-link:hover {
+  text-decoration: underline;
+  color: var(--color-accent-hover);
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.action-button {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  gap: 0.25rem;
+  cursor: pointer;
+}
+
+.action-button:hover {
+  color: white;
+  background: var(--color-accent);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.action-button.primary {
+  color: white;
+  background: var(--color-blue-common);
+}
+
+.action-button.primary:hover {
+  background: var(--color-accent-hover);
+}
+
+.action-button.secondary {
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-elevated);
+}
+
+.action-button.secondary:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.action-button.danger {
+  color: white;
+  background: var(--color-error);
+}
+
+.action-button.danger:hover {
+  background: var(--color-error);
+}
+
+.action-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.search-input {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.75rem;
+  width: 200px;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+}
+
+.search-input:focus {
+  border-color: var(--color-accent);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+/* Breadcrumb */
+.breadcrumb-card {
+  flex-shrink: 0;
+}
+
+.breadcrumb-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1rem;
+  flex-wrap: wrap;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  gap: 0.25rem;
+  cursor: pointer;
+}
+
+.breadcrumb-item:hover {
+  color: var(--color-accent);
+}
+
+.breadcrumb-item.current {
+  font-weight: 500;
+  color: var(--color-text-primary);
+  cursor: default;
+}
+
+.breadcrumb-separator {
+  margin: 0 0.125rem;
+  color: var(--color-text-tertiary);
+}
+
+/* Control Panel */
+.control-panel-card {
+  flex-shrink: 0;
+}
+
+.control-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.control-left {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+}
+
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.file-info-item {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.control-center {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.control-right {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.view-toggle {
+  display: flex;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.view-toggle-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  padding: 0.5rem;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.view-toggle-button.active {
+  color: white;
+  background: var(--color-accent);
+}
+
+.view-toggle-button:not(.active):hover {
+  background: var(--color-surface);
+}
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown-button {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.dropdown-button:hover {
+  border-color: var(--color-accent);
+  background: var(--color-surface);
+}
+
+.dropdown-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  margin-top: 0.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  min-width: 150px;
+  background: var(--color-background-primary);
+  box-shadow: var(--shadow-lg);
+}
+
+.dropdown-item {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.dropdown-item:hover {
+  color: var(--color-accent);
+  background: var(--color-surface-elevated);
+}
+
+.page-input {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.25rem 0.5rem;
+  width: 80px;
+  font-size: 0.875rem;
+  text-align: center;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.page-input:focus {
+  border-color: var(--color-accent);
+  outline: none;
+}
+
+/* Content Area */
+.content-area {
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+}
+
+.content-area::-webkit-scrollbar {
+  width: 8px;
+}
+
+.content-area::-webkit-scrollbar-track {
+  border-radius: var(--radius-md);
+  background: var(--color-surface-elevated);
+}
+
+.content-area::-webkit-scrollbar-thumb {
+  border-radius: var(--radius-md);
+  background: var(--color-border);
+  transition: var(--transition-fast);
+}
+
+.content-area::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-secondary);
+}
+
+/* Virtual Scroller Container */
+.virtual-gallery-scroller {
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+}
+
+/* File Grid Item */
+.virtual-gallery-scroller .file-grid-item {
+  display: flex;
+  overflow: visible;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-lg);
+  margin: 0;
+  background: var(--color-surface);
+  cursor: pointer;
+  transition: var(--transition-medium);
+  width: 100%;
+  height: calc(100% - 8px);
+  box-sizing: border-box;
+  flex-direction: column;
+}
+
+.virtual-gallery-scroller .file-grid-item:hover {
+  border-color: var(--color-border);
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.virtual-gallery-scroller .file-grid-item.selected {
+  border-color: var(--color-blue-common);
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
+}
+
+.virtual-gallery-scroller .file-preview {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background: var(--color-surface-elevated);
+  flex: 1;
+  aspect-ratio: auto;
+}
+
+.file-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  transition: var(--transition-medium);
+}
+
+.file-icon {
+  width: 48px;
+  height: 48px;
+  color: var(--color-text-tertiary);
+}
+
+.file-info-section {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.75rem;
+  min-height: 80px;
+  flex-shrink: 0;
+  flex-direction: column;
+}
+
+.file-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);
+  cursor: pointer;
+}
+
+.file-name:hover {
+  color: var(--color-accent);
+}
+
+.file-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.file-actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-action-group {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.file-action-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 0.375rem;
+  width: 32px;
+  height: 32px;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.file-action-button:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface);
+  transform: translateY(-1px);
+}
+
+.file-action-button.danger:hover {
+  color: var(--color-error);
+  background: rgb(239 68 68 / 10%);
+}
+
+.file-checkbox {
+  position: relative;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  width: 16px;
+  height: 16px;
+  background: var(--color-surface);
+  transition: var(--transition-fast);
+  appearance: none;
+  cursor: pointer;
+}
+
+.file-checkbox:checked {
+  border-color: var(--color-accent);
+  background: var(--color-accent);
+}
+
+.file-checkbox:checked::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  font-size: 10px;
+  font-weight: bold;
+  color: white;
+  content: '✓';
+  transform: translate(-50%, -50%);
+}
+
+/* File List Item */
+.file-list-item {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-lg);
+  padding: 0.75rem 1rem;
+  width: 100%;
+  background: var(--color-surface);
+  transition: var(--transition-medium);
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.file-list-item:hover {
+  border-color: var(--color-border);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
+}
+
+.file-list-item.selected {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
+}
+
+.file-list-checkbox {
+  flex-shrink: 0;
+  margin-right: 0.25rem;
+}
+
+.file-list-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+}
+
+.file-list-info {
+  margin-right: 1rem;
+  min-width: 0;
+  flex: 1;
+}
+
+.file-list-name {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  cursor: pointer;
+}
+
+.file-list-name:hover {
+  color: var(--color-accent);
+}
+
+.file-list-path {
+  overflow: hidden;
+  margin-bottom: 0.25rem;
+  font-size: 0.75rem;
+  font-family: 'SF Mono', Monaco, Inconsolata, 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Cascadia Code', 'Courier New', monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-tertiary);
+  opacity: 0.8;
+}
+
+.file-list-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.file-list-actions {
+  display: flex;
+  gap: 0.25rem;
+  flex-shrink: 0;
+}
+
+/* File Actions Dropdown */
+.file-actions-dropdown {
+  position: relative;
+  z-index: 100;
+}
+
+.file-actions-dropdown-content {
+   position: absolute;
+  top: 100%;
+  right: 0;
+  z-index: 3000;
+  overflow: visible;
+  overflow-y: auto;
+  margin-top: 0.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  min-width: 120px;
+  max-width: 200px;
+
+  /* Ensure dropdown is never clipped */
+  max-height: 300px;
+  white-space: nowrap;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+  transform-origin: top right;
+  animation: dropdown-appear 0.15s ease-out;
+}
+
+@keyframes dropdown-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+.file-actions-dropdown-content.position-left {
+  right: auto;
+  left: 0;
+  transform-origin: top left;
+}
+
+.file-actions-dropdown-content.position-up {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+  transform-origin: bottom right;
+}
+
+.file-actions-dropdown-content.position-up.position-left {
+  transform-origin: bottom left;
+}
+
+.content-fullscreen .file-actions-dropdown-content {
+  z-index: 4000;
+}
+
+@media (width <= 768px) {
+  .file-actions-dropdown-content {
+    min-width: 120px;
+    max-width: 150px;
+  }
+}
+
+.file-actions-dropdown-item {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-background-primary);
+  transition: var(--transition-fast);
+  cursor: pointer;
+  gap: 0.5rem;
+}
+
+.file-actions-dropdown-item:last-child {
+  border-bottom: none;
+}
+
+.file-actions-dropdown-item:hover {
+  color: var(--color-blue-common);
+  background: var(--color-surface-elevated);
+}
+
+/* Modal Overlay */
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 50%);
+}
+
+.modal-container {
+  display: flex;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  max-width: 90vw;
+  max-height: 90vh;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xl);
+  flex-direction: column;
+}
+
+.modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  padding: 1rem 1.5rem;
+  flex-shrink: 0;
+}
+
+.modal-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.modal-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 0.5rem;
+  color: var(--color-text-secondary);
+  background: none;
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.modal-close:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.modal-content {
+  overflow-y: auto;
+  padding: 1.5rem;
+  background: var(--color-background-primary);
+  flex: 1;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid var(--color-border);
+  padding: 1rem 1.5rem;
+  background: var(--color-background-primary);
+  gap: 0.75rem;
+  flex-shrink: 0;
+}
+
+/* Form Elements */
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.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-surface-elevated);
+  transition: var(--transition-fast);
+}
+
+.form-input:focus {
+  border-color: var(--color-accent);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+.form-textarea {
+  min-height: 100px;
+  resize: vertical;
+}
+
+.form-select {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.75rem 2rem 0.75rem 0.75rem;
+  width: 100%;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  cursor: pointer;
+  appearance: none;
+}
+
+.form-select:focus {
+  border-color: var(--color-accent);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-accent-soft);
+}
+
+/* Switch */
+.switch-container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+}
+
+.switch input {
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+
+.switch-slider {
+  position: absolute;
+  inset: 0;
+  border-radius: 24px;
+  background-color: var(--color-border);
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.switch-slider::before {
+  position: absolute;
+  bottom: 3px;
+  left: 3px;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  transition: 0.3s;
+  content: "";
+}
+
+input:checked + .switch-slider {
+  background-color: var(--color-accent);
+}
+
+input:checked + .switch-slider::before {
+  transform: translateX(20px);
+}
+
+.switch-label {
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+}
+
+/* Drawer */
+.drawer-overlay {
+  position: fixed;
+  inset: 32px 0 0;
+  z-index: 2000;
+  display: flex;
+  justify-content: flex-end;
+  background: rgb(0 0 0 / 50%);
+}
+
+.drawer-container {
+  display: flex;
+  width: 60%;
+  max-width: 800px;
+  height: 100%;
+  background: var(--color-background-secondary);
+  box-shadow: var(--shadow-xl);
+  transition: transform 0.3s ease-out;
+  flex-direction: column;
+  transform: translateX(100%);
+}
+
+.drawer-overlay.open .drawer-container {
+  transform: translateX(0);
+}
+
+.drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  padding: 1rem 1.5rem;
+  flex-shrink: 0;
+}
+
+.drawer-title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.drawer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.5rem;
+}
+
+/* Upload Area */
+.upload-area {
+  border: 2px dashed var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 3rem 2rem;
+  text-align: center;
+  background: var(--color-surface-elevated);
+  transition: var(--transition-medium);
+  cursor: pointer;
+}
+
+.upload-area:hover,
+.upload-area.dragover {
+  border-color: var(--color-accent);
+  background: var(--color-accent-soft);
+}
+
+.upload-area-text {
+  margin-bottom: 0.5rem;
+  font-size: 1.125rem;
+  color: var(--color-text-secondary);
+}
+
+.upload-area-subtext {
+  font-size: 0.875rem;
+  color: var(--color-text-tertiary);
+}
+
+/* Tabs */
+.tabs-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.tabs-header {
+  display: flex;
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.tab-button {
+  position: relative;
+  border: none;
+  border-bottom: 2px solid transparent;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+  background: none;
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.tab-button:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.tab-button.active {
+  border-bottom-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.tab-badge {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  border-radius: 10px;
+  padding: 0.125rem 0.375rem;
+  min-width: 16px;
+  font-size: 0.625rem;
+  text-align: center;
+  color: white;
+  background: var(--color-accent);
+}
+
+.tab-content {
+  display: flex;
+  overflow: hidden;
+  flex: 1;
+  flex-direction: column;
+}
+
+.tab-panel {
+  overflow-y: auto;
+  padding: 1rem;
+  flex: 1;
+}
+
+/* Progress Bar */
+.progress-bar {
+  overflow: hidden;
+  border-radius: 4px;
+  width: 100%;
+  height: 8px;
+  background: var(--color-surface-elevated);
+}
+
+.progress-fill {
+  border-radius: 4px;
+  height: 100%;
+  background: var(--color-accent);
+  transition: width 0.3s ease;
+}
+
+/* Badge */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--radius-sm);
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.badge.success {
+  color: var(--color-success);
+  background: var(--color-success-soft);
+}
+
+.badge.error {
+  color: var(--color-error);
+  background: var(--color-error-soft);
+}
+
+.badge.warning {
+  color: var(--color-warning);
+  background: var(--color-warning-soft);
+}
+
+/* Tooltip */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+.tooltip-text {
+  position: absolute;
+  top: 125%;
+  left: 50%;
+  z-index: 1000;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.5rem;
+  width: max-content;
+  max-width: 200px;
+  font-size: 0.75rem;
+  text-align: center;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  opacity: 0;
+  visibility: hidden;
+  box-shadow: var(--shadow-md);
+  transition: opacity 0.3s;
+  transform: translateX(-50%);
+}
+
+.tooltip:hover .tooltip-text {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* File Actions Dropdown */
+@media (width <= 768px) {
+  .file-actions-dropdown-content {
+    min-width: 100px;
+    max-width: 140px;
+  }
+}
+
+/* Responsive Design */
+@media (width <= 768px) {
+  .bucket-container {
+    padding: 0.5rem;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .header-left {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+
+  .control-panel {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.75rem;
+  }
+
+  .file-grid-item {
+    overflow: auto;
+    height: 240px;
+  }
+
+  .drawer-container {
+    width: 90%;
+  }
+}
+
+/* Transitions */
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.slide-enter-active, .slide-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.slide-enter-from, .slide-leave-to {
+  transform: translateX(100%);
+}
+
+/* Fullscreen Styles */
+.content-fullscreen {
+  padding: 0;
+  gap: 0;
+}
+
+.content-fullscreen .content-card {
+  display: flex;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  flex: 1;
+  flex-direction: column;
+}
+
+.fullscreen-header {
+  z-index: 100;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border-secondary);
+  padding: 0.75rem 1rem;
+  background: var(--color-surface);
+  flex-shrink: 0;
+}
+
+.fullscreen-header-left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 200px;
+}
+
+.fullscreen-header-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+}
+
+.fullscreen-header-right {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  min-width: 200px;
+  gap: 0.75rem;
+  flex: 1;
+}
+
+.fullscreen-breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.content-fullscreen .content-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: visible;
+}
+
+.content-fullscreen .virtual-scroller-container {
+  flex: 1;
+  overflow: visible;
+}
+
+/* Responsive adjustments for fullscreen */
+@media (width <= 768px) {
+  .fullscreen-header {
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 1rem;
+  }
+
+  .fullscreen-header-left,
+  .fullscreen-header-center,
+  .fullscreen-header-right {
+    width: 100%;
+    min-width: unset;
+  }
+
+  .fullscreen-header-right {
+    justify-content: space-between;
+  }
+}
+
+
+.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-text-secondary);
+}
+
+.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);
+}
diff --git a/src/renderer/manage/pages/css/ManageMain.css b/src/renderer/manage/pages/css/ManageMain.css
index 32631cab..618fd959 100644
--- a/src/renderer/manage/pages/css/ManageMain.css
+++ b/src/renderer/manage/pages/css/ManageMain.css
@@ -1,675 +1,682 @@
-/* ManageMain Page Styles */
-
-.manage-container {
-  display: flex;
-  padding: 0.75rem;
-  height: 97%;
-  flex-direction: column;
-}
-
-.manage-card {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  background: var(--color-background-secondary);
-  box-shadow: var(--shadow-sm);
-}
-
-.header-card {
-  padding: 0.5rem;
-}
-
-.card-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.header-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 68px;
-  height: 48px;
-}
-
-.header-icon-img {
-  width: 40px;
-  height: 40px;
-  object-fit: contain;
-}
-
-.header-text .header-title {
-  margin: 0 0 0.01rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.header-text .header-subtitle {
-  margin: 0;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-}
-
-.header-actions {
-  display: flex;
-  gap: 1rem;
-}
-
-.main-card {
-  flex: 1;
-  overflow: hidden;
-  min-height: 0; /* Fix for flex overflow */
-}
-
-.main-layout {
-  display: flex;
-  height:99%;
-}
-
-.sidebar {
-  display: flex;
-  border-right: 1px solid var(--color-border);
-  min-width: 120px;
-  max-width: 400px;
-  min-height: 0; /* Fix for flex overflow */
-  background: var(--color-surface-secondary);
-  transition: width 0.1s ease-out;
-  flex-direction: column;
-}
-
-.resize-handle {
-  position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 4px;
-  background: transparent;
-  cursor: col-resize;
-  flex-shrink: 0;
-}
-
-.resize-handle:hover {
-  background: var(--color-border);
-}
-
-.resize-handle:hover .resize-line {
-  opacity: 1;
-}
-
-.resize-line {
-  border-radius: 1px;
-  width: 2px;
-  height: 40px;
-  background: var(--color-accent);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.sidebar-header {
-  border-bottom: 1px solid var(--color-border);
-  padding: 1rem;
-  flex-shrink: 0;
-}
-
-.sidebar-title {
-  margin: 0;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.sidebar-content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.5rem;
-  min-height: 0;
-}
-
-.loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 2rem;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.loading-spinner {
-  border: 2px solid var(--color-border);
-  border-top: 2px solid var(--color-accent);
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.loading-text {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-}
-
-.menu-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  border-radius: var(--radius-md);
-  padding: 0.75rem;
-  font-size: 0.875rem;
-  transition: var(--transition-fast);
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-.menu-item:hover {
-  background: var(--color-surface);
-}
-
-.menu-item.active {
-  color: white;
-  background: var(--color-accent);
-}
-
-.menu-item.active .menu-icon {
-  color: white;
-}
-
-.menu-icon {
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-}
-
-.menu-icon.active {
-  color: var(--color-accent);
-}
-
-.menu-text {
-  overflow: hidden;
-  min-width: 0;
-  font-weight: 500;
-  line-height: 1.2;
-  overflow-wrap: break-word;
-  flex: 1;
-}
-
-.sidebar-footer {
-  border-top: 1px solid var(--color-border);
-  padding: 0.5rem;
-  flex-shrink: 0;
-}
-
-.footer-actions {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.footer-action-item {
-  display: flex;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  text-align: left;
-  color: var(--color-text-primary);
-  background: none;
-  transition: var(--transition-fast);
-  gap: 0.75rem;
-  cursor: pointer;
-}
-
-.footer-action-item:hover {
-  background: var(--color-surface);
-}
-
-.action-icon {
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-secondary);
-  flex-shrink: 0;
-}
-
-.action-text {
-  font-weight: 500;
-}
-
-.content-area {
-  overflow-y: auto;
-  padding: 1.5rem;
-  min-height: 0;
-  flex: 1;
-}
-
-.action-button {
-  display: flex;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-lg);
-  padding: 0.75rem 1.5rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 500;
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.action-button.primary {
-  color: white;
-  background: var(--color-accent);
-}
-
-.action-button.primary:hover {
-  background: var(--color-accent-hover);
-  transform: translateY(-1px);
-  box-shadow: var(--shadow-md);
-}
-
-.action-button.secondary {
-  border: 1px solid var(--color-border);
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.action-button.secondary:hover {
-  border-color: var(--color-accent);
-  color: var(--color-accent);
-  background: var(--color-surface);
-}
-
-.button-icon {
-  width: 16px;
-  height: 16px;
-}
-
-/* Dialog styles */
-.dialog-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 2000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(0 0 0 / 50%);
-}
-
-.dialog-container {
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  width: 90%;
-  max-width: 600px;
-  max-height: 80vh;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-xl);
-}
-
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 1.5rem 1.5rem 0;
-}
-
-.dialog-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.dialog-close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-sm);
-  padding: 0.25rem;
-  width: 24px;
-  height: 24px;
-  color: var(--color-text-secondary);
-  background: none;
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.dialog-close:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.close-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.dialog-content {
-  padding: 1.5rem;
-}
-
-.choice-cos {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 1rem;
-}
-
-.picbed-card {
-  position: relative;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-lg);
-  padding: 1.5rem;
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  flex-direction: column;
-  cursor: pointer;
-}
-
-.picbed-card:hover {
-  border-color: var(--color-accent);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.picbed-card.active {
-  border-color: var(--color-accent);
-  background-color: rgb(64 158 255 / 10%);
-}
-
-.picbed-card.main-card {
-  border-color: var(--color-error);
-}
-
-.picbed-card.main-card:hover {
-  border-color: var(--color-error);
-  background-color: rgb(255 59 48 / 10%);
-}
-
-.card-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 0.75rem;
-  width: 40px;
-  height: 40px;
-}
-
-.picbed-icon {
-  width: 32px;
-  height: 32px;
-  object-fit: contain;
-}
-
-.main-icon {
-  width: 24px;
-  height: 24px;
-  color: var(--color-error);
-}
-
-.card-content {
-  text-align: center;
-}
-
-.card-title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.main-title {
-  color: var(--color-error);
-}
-
-.check-icon {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
-  width: 20px;
-  height: 20px;
-  color: var(--color-accent);
-}
-
-/* Drawer styles */
-.drawer-overlay {
-  position: fixed;
-  inset: 32px 0 0;
-  z-index: 2000;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  background: rgb(0 0 0 / 50%);
-}
-
-.drawer-container {
-  overflow-y: auto;
-  width: 400px;
-  max-width: 90vw;
-  height: 100vh;
-  background: var(--color-surface);
-  box-shadow: var(--shadow-xl);
-}
-
-.drawer-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid var(--color-border);
-  padding: 1.5rem;
-}
-
-.drawer-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.drawer-close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-sm);
-  padding: 0.25rem;
-  width: 24px;
-  height: 24px;
-  color: var(--color-text-secondary);
-  background: none;
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.drawer-close:hover {
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-}
-
-.drawer-content {
-  padding: 1.5rem;
-}
-
-.form-header {
-  display: flex;
-  justify-content: center;
-  padding: 2rem 0;
-}
-
-.form-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 60px;
-  height: 60px;
-}
-
-.picbed-form-icon {
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
-}
-
-.form-divider {
-  margin: 1.5rem 0;
-  height: 1px;
-  background: var(--color-border);
-}
-
-.form-group {
-  margin-bottom: 1.5rem;
-}
-
-.form-label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-}
-
-.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-surface-elevated);
-  transition: var(--transition-fast);
-  box-sizing: border-box;
-}
-
-.form-input:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
-}
-
-.input-group {
-  display: flex;
-}
-
-.group-input {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-right: none;
-}
-
-.input-append {
-  border: 1px solid var(--color-border);
-  border-left: none;
-  padding: 0.75rem;
-  font-size: 0.875rem;
-  color: var(--color-text-secondary);
-  background: var(--color-background-secondary);
-  border-top-right-radius: var(--radius-md);
-  border-bottom-right-radius: var(--radius-md);
-}
-
-.select-wrapper {
-  position: relative;
-}
-
-.form-select {
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
-  width: 100%;
-  font-size: 0.875rem;
-  color: var(--color-text-primary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  appearance: none;
-  cursor: pointer;
-}
-
-.form-select:focus {
-  border-color: var(--color-accent);
-  outline: none;
-  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
-}
-
-.select-arrow {
-  position: absolute;
-  top: 50%;
-  right: 0.75rem;
-  width: 16px;
-  height: 16px;
-  color: var(--color-text-secondary);
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.switch-label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.switch-input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.switch-slider {
-  position: relative;
-  border-radius: 0.75rem;
-  width: 3rem;
-  height: 1.5rem;
-  background: var(--color-border);
-  transition: var(--transition-fast);
-}
-
-.switch-button {
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  border-radius: 50%;
-  width: 1.25rem;
-  height: 1.25rem;
-  background: white;
-  box-shadow: var(--shadow-sm);
-  transition: var(--transition-fast);
-}
-
-.switch-input:checked + .switch-slider {
-  background: var(--color-accent);
-}
-
-.switch-input:checked + .switch-slider .switch-button {
-  transform: translateX(1.5rem);
-}
-
-.form-actions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 2rem;
-  gap: 1rem;
-}
+/* ManageMain Page Styles */
+
+html, body {
+  overflow-x: hidden;
+}
+
+.manage-container {
+  display: flex;
+  padding: 0.75rem;
+  height: 97%;
+  flex-direction: column;
+}
+
+.manage-card {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  background: var(--color-background-secondary);
+  box-shadow: var(--shadow-sm);
+}
+
+.header-card {
+  padding: 0.5rem;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.header-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 68px;
+  height: 48px;
+}
+
+.header-icon-img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.header-text .header-title {
+  margin: 0 0 0.01rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.header-text .header-subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+}
+
+.header-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.main-card {
+  flex: 1;
+  overflow: hidden;
+  min-height: 0; /* Fix for flex overflow */
+}
+
+.main-layout {
+  display: flex;
+  height:99%;
+}
+
+.sidebar {
+  display: flex;
+  border-right: 1px solid var(--color-border);
+  min-width: 120px;
+  max-width: 400px;
+  min-height: 0; /* Fix for flex overflow */
+  background: var(--color-surface-secondary);
+  transition: width 0.1s ease-out;
+  flex-direction: column;
+}
+
+.resize-handle {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 4px;
+  background: transparent;
+  cursor: col-resize;
+  flex-shrink: 0;
+}
+
+.resize-handle:hover {
+  background: var(--color-border);
+}
+
+.resize-handle:hover .resize-line {
+  opacity: 1;
+}
+
+.resize-line {
+  border-radius: 1px;
+  width: 2px;
+  height: 40px;
+  background: var(--color-accent);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.sidebar-header {
+  border-bottom: 1px solid var(--color-border);
+  padding: 1rem;
+  flex-shrink: 0;
+}
+
+.sidebar-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0.5rem;
+  min-height: 0;
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.loading-spinner {
+  border: 2px solid var(--color-border);
+  border-top: 2px solid var(--color-accent);
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-text {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-md);
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  transition: var(--transition-fast);
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.menu-item:hover {
+  background: var(--color-surface);
+}
+
+.menu-item.active {
+  color: white;
+  background: var(--color-accent);
+}
+
+.menu-item.active .menu-icon {
+  color: white;
+}
+
+.menu-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+}
+
+.menu-icon.active {
+  color: var(--color-accent);
+}
+
+.menu-text {
+  overflow: hidden;
+  min-width: 0;
+  font-weight: 500;
+  line-height: 1.2;
+  overflow-wrap: break-word;
+  flex: 1;
+}
+
+.sidebar-footer {
+  border-top: 1px solid var(--color-border);
+  padding: 0.5rem;
+  flex-shrink: 0;
+}
+
+.footer-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.footer-action-item {
+  display: flex;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 0.75rem;
+  width: 100%;
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--color-text-primary);
+  background: none;
+  transition: var(--transition-fast);
+  gap: 0.75rem;
+  cursor: pointer;
+}
+
+.footer-action-item:hover {
+  background: var(--color-surface);
+}
+
+.action-icon {
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-secondary);
+  flex-shrink: 0;
+}
+
+.action-text {
+  font-weight: 500;
+}
+
+.content-area {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-lg);
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 500;
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.action-button.primary {
+  color: white;
+  background: var(--color-accent);
+}
+
+.action-button.primary:hover {
+  background: var(--color-accent-hover);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.action-button.secondary {
+  border: 1px solid var(--color-border);
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.action-button.secondary:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+  background: var(--color-surface);
+}
+
+.button-icon {
+  width: 16px;
+  height: 16px;
+}
+
+/* Dialog styles */
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 2000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(0 0 0 / 50%);
+}
+
+.dialog-container {
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  width: 90%;
+  max-width: 600px;
+  max-height: 80vh;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xl);
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 1.5rem 0;
+}
+
+.dialog-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.dialog-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 0.25rem;
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-secondary);
+  background: none;
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.dialog-close:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.close-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.dialog-content {
+  padding: 1.5rem;
+}
+
+.choice-cos {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1rem;
+}
+
+.picbed-card {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.picbed-card:hover {
+  border-color: var(--color-accent);
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.picbed-card.active {
+  border-color: var(--color-accent);
+  background-color: rgb(64 158 255 / 10%);
+}
+
+.picbed-card.main-card {
+  border-color: var(--color-error);
+}
+
+.picbed-card.main-card:hover {
+  border-color: var(--color-error);
+  background-color: rgb(255 59 48 / 10%);
+}
+
+.card-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  width: 40px;
+  height: 40px;
+}
+
+.picbed-icon {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+
+.main-icon {
+  width: 24px;
+  height: 24px;
+  color: var(--color-error);
+}
+
+.card-content {
+  text-align: center;
+}
+
+.card-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.main-title {
+  color: var(--color-error);
+}
+
+.check-icon {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  width: 20px;
+  height: 20px;
+  color: var(--color-accent);
+}
+
+/* Drawer styles */
+.drawer-overlay {
+  position: fixed;
+  inset: 32px 0 0;
+  z-index: 2000;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  background: rgb(0 0 0 / 50%);
+}
+
+.drawer-container {
+  overflow-y: auto;
+  width: 400px;
+  max-width: 90vw;
+  height: 100vh;
+  background: var(--color-surface);
+  box-shadow: var(--shadow-xl);
+}
+
+.drawer-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  padding: 1.5rem;
+}
+
+.drawer-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.drawer-close {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-sm);
+  padding: 0.25rem;
+  width: 24px;
+  height: 24px;
+  color: var(--color-text-secondary);
+  background: none;
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.drawer-close:hover {
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+}
+
+.drawer-content {
+  padding: 1.5rem;
+}
+
+.form-header {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 0;
+}
+
+.form-icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 60px;
+  height: 60px;
+}
+
+.picbed-form-icon {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.form-divider {
+  margin: 1.5rem 0;
+  height: 1px;
+  background: var(--color-border);
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.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-surface-elevated);
+  transition: var(--transition-fast);
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  border-color: var(--color-accent);
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
+}
+
+.input-group {
+  display: flex;
+}
+
+.group-input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-right: none;
+}
+
+.input-append {
+  border: 1px solid var(--color-border);
+  border-left: none;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--color-text-secondary);
+  background: var(--color-background-secondary);
+  border-top-right-radius: var(--radius-md);
+  border-bottom-right-radius: var(--radius-md);
+}
+
+.select-wrapper {
+  position: relative;
+}
+
+.form-select {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.75rem 2.5rem 0.75rem 0.75rem;
+  width: 100%;
+  font-size: 0.875rem;
+  color: var(--color-text-primary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  appearance: none;
+  cursor: pointer;
+}
+
+.form-select:focus {
+  border-color: var(--color-accent);
+  outline: none;
+  box-shadow: 0 0 0 2px rgb(0 122 255 / 20%);
+}
+
+.select-arrow {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  width: 16px;
+  height: 16px;
+  color: var(--color-text-secondary);
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.switch-label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.switch-input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.switch-slider {
+  position: relative;
+  border-radius: 0.75rem;
+  width: 3rem;
+  height: 1.5rem;
+  background: var(--color-border);
+  transition: var(--transition-fast);
+}
+
+.switch-button {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  border-radius: 50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  background: white;
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-fast);
+}
+
+.switch-input:checked + .switch-slider {
+  background: var(--color-accent);
+}
+
+.switch-input:checked + .switch-slider .switch-button {
+  transform: translateX(1.5rem);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 2rem;
+  gap: 1rem;
+}
diff --git a/src/renderer/pages/Gallery.vue b/src/renderer/pages/Gallery.vue
index e1feeea7..11e07592 100644
--- a/src/renderer/pages/Gallery.vue
+++ b/src/renderer/pages/Gallery.vue
@@ -202,16 +202,12 @@
         v-else
         :key="componentKey"
         ref="virtualScrollerRef"
-        v-model:view-mode="viewMode"
+        :view-mode="viewMode"
         class="virtual-gallery-scroller"
         :items="filterList"
-        :item-height="itemHeight"
-        :grid-items="4"
+        :item-height="300"
         :grid-breakpoints="effectiveGridBreakpoints"
         key-field="key"
-        :page-mode="true"
-        :buffer-factor="0.5"
-        :item-padding="8"
       >
         <template #default="{ item, index }">
           <div class="gallery-item" :class="{ selected: choosedList[item.id || ''] }">
@@ -590,7 +586,6 @@ const viewMode = useStorage<'list' | 'grid'>('galleryViewMode', 'grid')
 const componentKey = ref(0)
 const currentSortField = ref<'name' | 'time' | 'ext' | 'check'>('name')
 const userGridColumns = useStorage<number>('galleryGridColumns', 4)
-const itemHeight = 300
 
 const effectiveGridBreakpoints = computed(() => {
   return [{ min: 0, cols: userGridColumns.value }]
diff --git a/src/renderer/pages/css/Gallery.css b/src/renderer/pages/css/Gallery.css
index 2c2d87c8..9baa0bb8 100644
--- a/src/renderer/pages/css/Gallery.css
+++ b/src/renderer/pages/css/Gallery.css
@@ -1,1538 +1,1521 @@
-/* Global scrolling behavior */
-html, body {
-  overflow-x: hidden;
-}
-
-/* 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-surface);
-  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-icon {
-  display: flex;
-  align-items: center;
-  color: var(--color-blue-common);
-}
-
-.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.625rem 1rem;
-  font-size: 0.875rem;
-  font-family: inherit;
-  font-weight: 500;
-  color: white;
-  background: var(--color-blue-common);
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.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 {
-  width: 0;
-  height: 0;
-  opacity: 0;
-}
-
-.switch-slider {
-  position: absolute;
-  inset: 0;
-  border-radius: 24px;
-  background-color: #cccccc;
-  transition: 0.3s;
-  cursor: pointer;
-}
-
-.switch-slider::before {
-  position: absolute;
-  bottom: 3px;
-  left: 3px;
-  border-radius: 50%;
-  width: 18px;
-  height: 18px;
-  background-color: white;
-  transition: 0.3s;
-  content: "";
-}
-
-input:checked + .switch-slider {
-  background-color: var(--color-blue-common);
-}
-
-input:checked + .switch-slider::before {
-  transform: translateX(20px);
-}
-
-/* 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-surface-elevated);
-  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-border);
-  outline: none;
-  appearance: none;
-  cursor: pointer;
-}
-
-.grid-slider::-webkit-slider-thumb {
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  background: var(--color-blue-common);
-  transition: var(--transition-fast);
-  appearance: none;
-  cursor: pointer;
-}
-
-.grid-slider::-webkit-slider-thumb:hover {
-  transform: scale(1.15);
-  box-shadow: 0 0 0 3px rgb(56 114 250 / 20%);
-}
-
-.grid-slider::-moz-range-thumb {
-  border: none;
-  border-radius: 50%;
-  width: 14px;
-  height: 14px;
-  background: var(--color-blue-common);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.grid-slider::-moz-range-thumb:hover {
-  transform: scale(1.15);
-  box-shadow: 0 0 0 3px rgb(56 114 250 / 20%);
-}
-
-.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-blue-common);
-  line-height: 1;
-}
-
-/* Filter Card */
-.filter-card {
-  border-radius: var(--radius-lg);
-}
-
-.filter-content {
-  padding: 1rem; /* Reduced from 1.25rem for compactness */
-}
-
-.filter-row {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 0.75rem; /* Reduced from 1rem */
-  gap: 0.75rem; /* Reduced from 1rem for more compact layout */
-  flex-wrap: wrap;
-}
-
-.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 {
-  margin-bottom: 0.125rem;
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--color-text-primary); 
-  line-height: 1.4;
-}
-
-/* Custom Select */
-.custom-select {
-  border: 1px solid var(--color-border);
-  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-surface);
-  transition: var(--transition-fast);
-  cursor: pointer;
-  line-height: 1.4;
-}
-
-.custom-select:focus {
-  border-color: var(--color-blue-common);
-  outline: none;
-  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
-}
-
-/* Custom Multiselect */
-.custom-multiselect {
-  position: relative;
-}
-
-.multiselect-trigger {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  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-surface);
-  transition: var(--transition-fast);
-  cursor: pointer;
-  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 rgb(59 130 246 / 10%);
-}
-
-.multiselect-dropdown {
-  position: fixed;
-  z-index: 1000;
-  overflow-y: auto;
-  margin-top: 2px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  padding: 0.375rem 0.5rem;
-  min-width: 200px;
-  max-height: 280px;
-  color: var(--color-text-primary);
-  background: var(--color-surface);
-  box-shadow: var(--shadow-lg);
-}
-
-.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-surface);
-  transition: var(--transition-fast);
-  gap: 0.25rem;
-  cursor: pointer;
-  line-height: 1.4;
-}
-
-.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 {
-  border: 1px solid var(--color-border);
-  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-surface);
-  transition: var(--transition-fast);
-  flex: 1;
-  line-height: 1.2;
-}
-
-.date-input:focus {
-  border-color: var(--color-blue-common);
-  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;
-}
-
-.sort-button {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  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-surface);
-  transition: var(--transition-fast);
-  gap: 0.25rem;
-  cursor: pointer;
-  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 rgb(59 130 246 / 10%);
-}
-
-.sort-options {
-  position: fixed;
-  z-index: 1000;
-  margin-top: 2px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  min-width: 160px;
-  background: var(--color-surface);
-  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-surface);
-  transition: var(--transition-fast);
-  cursor: pointer;
-  line-height: 1.4;
-}
-
-.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 {
-  border: 1px solid var(--color-border);
-  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-surface);
-  transition: var(--transition-fast);
-}
-
-.search-input:focus {
-  border-color: var(--color-blue-common);
-  outline: none;
-  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
-}
-
-.search-icon {
-  position: absolute;
-  left: 0.75rem;
-  z-index: 1;
-  color: var(--color-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;
-}
-
-.action-btn {
-  display: flex;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  padding: 0.625rem 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-blue-common);
-}
-
-.copy-btn.active:hover {
-  background: var(--color-accent-hover);
-}
-
-.edit-btn {
-  color: white;
-  background: var(--color-success);
-}
-
-.edit-btn.active:hover {
-  background: #059669;
-}
-
-.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: #d97706;
-}
-
-/* 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-text-secondary);
-}
-
-.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;
-}
-
-.gallery-item {
-  overflow: hidden;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-lg);
-  background: var(--color-surface);
-  transition: var(--transition-medium);
-  cursor: pointer;
-}
-
-.gallery-item:hover {
-  border-color: var(--color-border);
-  box-shadow: var(--shadow-md);
-  transform: translateY(-2px);
-}
-
-.gallery-item.selected {
-  border-color: var(--color-blue-common);
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
-}
-
-/* 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;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-}
-
-.image-loader {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: var(--color-surface-elevated);
-}
-
-.loader-spinner {
-  border: 2px solid var(--color-border);
-  border-top: 2px solid var(--color-blue-common);
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Image Info */
-.image-info {
-  padding: 1rem;
-}
-
-.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;
-}
-
-.icon-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  width: 32px;
-  height: 32px;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.icon-button:hover {
-  color: var(--color-text-primary);
-  transform: translateY(-1px);
-}
-
-.copy-icon:hover {
-  color: var(--color-copy);
-  background: rgb(6 182 212 / 10%);
-}
-
-.edit-icon:hover {
-  color: var(--color-success);
-  background: rgb(16 185 129 / 10%);
-}
-
-.delete-icon:hover {
-  color: var(--color-error);
-  background: rgb(239 68 68 / 10%);
-}
-
-/* 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: 18px;
-  height: 18px;
-  transition: var(--transition-fast);
-}
-
-.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark {
-  border-color: var(--color-blue-common);
-  background: var(--color-blue-common);
-}
-
-.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
-  position: absolute;
-  top: -1px;
-  left: 3px;
-  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: 50%;
-  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;
-}
-
-.nav-button {
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: 50%;
-  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: 500;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-primary);
-  flex: 1;
-}
-
-.image-counter {
-  font-size: 0.875rem;
-  white-space: nowrap;
-  color: var(--color-text-secondary);
-}
-
-/* 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%);
-}
-
-.modal-container {
-  overflow-y: auto;
-  border-radius: var(--radius-xl);
-  width: 90%;
-  max-width: 500px;
-  max-height: 90vh;
-  background: var(--color-background-primary);
-  box-shadow: var(--shadow-lg);
-}
-
-.modal-container.large {
-  max-width: 700px;
-}
-
-.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);
-}
-
-.modal-close-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border: none;
-  border-radius: var(--radius-md);
-  width: 32px;
-  height: 32px;
-  color: var(--color-text-secondary);
-  background: var(--color-surface-elevated);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.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;
-  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;
-}
-
-.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;
-}
-
-.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-surface);
-  transition: var(--transition-fast);
-  box-sizing: border-box;
-}
-
-.form-input:focus {
-  border-color: var(--color-blue-common);
-  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: 50%;
-  width: 20px;
-  height: 20px;
-  color: white;
-  background: var(--color-blue-common);
-  transition: var(--transition-fast);
-  cursor: pointer;
-}
-
-.info-button:hover {
-  background: var(--color-blue-common);
-}
-
-.info-panel {
-  margin-top: 1rem;
-  border: 1px solid var(--color-border-secondary);
-  border-radius: var(--radius-md);
-  padding: 1rem;
-  background: var(--color-surface-elevated);
-}
-
-.info-panel h4 {
-  margin: 0 0 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-primary);
-}
-
-.placeholder-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 0;
-  padding: 0.5rem 0;
-}
-
-.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: 8px;
-  padding: 0.3rem 0.6rem;
-  min-width: 80px;
-  font-size: 1rem;
-  font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
-  font-weight: 600;
-  text-align: center;
-  color: white;
-  background: var(--color-blue-common);
-  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
-  letter-spacing: 0.02em;
-  flex-shrink: 0;
-}
-
-.placeholder-item span {
-  font-size: 0.75rem;
-  font-weight: 500;
-  color: var(--color-text-primary);
-  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-blue-common);
-  transition: var(--transition-fast);
-  gap: 0.5rem;
-  cursor: pointer;
-}
-
-.btn-primary:hover {
-  background: var(--color-blue-common);
-  transform: translateY(-1px);
-  box-shadow: var(--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-surface-elevated);
-  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;
-  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;
-  margin: 0;
-  width: 100%;
-  height: calc(100% - 8px);
-  box-sizing: border-box;
-  flex-direction: column;
-}
-
-.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-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;
-}
-
-.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;
-}
-
-.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;
-  text-align: center;
-  color: var(--color-text-tertiary);
-}
-
-.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: 12px;
-  padding: 0;
-  max-height: 400px;
-  background: var(--color-background-tertiary);
-  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
-}
-
-.placeholder-category {
-  border-bottom: 1px solid var(--color-border-light);
-}
-
-.placeholder-category:last-child {
-  border-bottom: none;
-}
-
-.category-title {
-  margin: 0;
-  border-bottom: 1px solid var(--color-border-light);
-  padding: 0.875rem 1rem 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text-secondary);
-  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
-  letter-spacing: 0.02em;
-}
-
-
-
-
-.placeholder-item:hover {
-  background: rgb(var(--color-accent-rgb), 0.08);
-}
-
-
+/* Global scrolling behavior */
+html, body {
+  overflow-x: hidden;
+}
+
+/* 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-surface);
+  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-icon {
+  display: flex;
+  align-items: center;
+  color: var(--color-blue-common);
+}
+
+.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.625rem 1rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  font-weight: 500;
+  color: white;
+  background: var(--color-blue-common);
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.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 {
+  width: 0;
+  height: 0;
+  opacity: 0;
+}
+
+.switch-slider {
+  position: absolute;
+  inset: 0;
+  border-radius: 24px;
+  background-color: #cccccc;
+  transition: 0.3s;
+  cursor: pointer;
+}
+
+.switch-slider::before {
+  position: absolute;
+  bottom: 3px;
+  left: 3px;
+  border-radius: 50%;
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  transition: 0.3s;
+  content: "";
+}
+
+input:checked + .switch-slider {
+  background-color: var(--color-blue-common);
+}
+
+input:checked + .switch-slider::before {
+  transform: translateX(20px);
+}
+
+/* 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-surface-elevated);
+  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-border);
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+.grid-slider::-webkit-slider-thumb {
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  background: var(--color-blue-common);
+  transition: var(--transition-fast);
+  appearance: none;
+  cursor: pointer;
+}
+
+.grid-slider::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+  box-shadow: 0 0 0 3px rgb(56 114 250 / 20%);
+}
+
+.grid-slider::-moz-range-thumb {
+  border: none;
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  background: var(--color-blue-common);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.grid-slider::-moz-range-thumb:hover {
+  transform: scale(1.15);
+  box-shadow: 0 0 0 3px rgb(56 114 250 / 20%);
+}
+
+.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-blue-common);
+  line-height: 1;
+}
+
+/* Filter Card */
+.filter-card {
+  border-radius: var(--radius-lg);
+}
+
+.filter-content {
+  padding: 1rem; /* Reduced from 1.25rem for compactness */
+}
+
+.filter-row {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 0.75rem; /* Reduced from 1rem */
+  gap: 0.75rem; /* Reduced from 1rem for more compact layout */
+  flex-wrap: wrap;
+}
+
+.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 {
+  margin-bottom: 0.125rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  line-height: 1.4;
+}
+
+/* Custom Select */
+.custom-select {
+  border: 1px solid var(--color-border);
+  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-surface);
+  transition: var(--transition-fast);
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+.custom-select:focus {
+  border-color: var(--color-blue-common);
+  outline: none;
+  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
+}
+
+/* Custom Multiselect */
+.custom-multiselect {
+  position: relative;
+}
+
+.multiselect-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  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-surface);
+  transition: var(--transition-fast);
+  cursor: pointer;
+  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 rgb(59 130 246 / 10%);
+}
+
+.multiselect-dropdown {
+  position: fixed;
+  z-index: 1000;
+  overflow-y: auto;
+  margin-top: 2px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: 0.375rem 0.5rem;
+  min-width: 200px;
+  max-height: 280px;
+  color: var(--color-text-primary);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-lg);
+}
+
+.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-surface);
+  transition: var(--transition-fast);
+  gap: 0.25rem;
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+.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 {
+  border: 1px solid var(--color-border);
+  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-surface);
+  transition: var(--transition-fast);
+  flex: 1;
+  line-height: 1.2;
+}
+
+.date-input:focus {
+  border-color: var(--color-blue-common);
+  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;
+}
+
+.sort-button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid var(--color-border);
+  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-surface);
+  transition: var(--transition-fast);
+  gap: 0.25rem;
+  cursor: pointer;
+  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 rgb(59 130 246 / 10%);
+}
+
+.sort-options {
+  position: fixed;
+  z-index: 1000;
+  margin-top: 2px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  min-width: 160px;
+  background: var(--color-surface);
+  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-surface);
+  transition: var(--transition-fast);
+  cursor: pointer;
+  line-height: 1.4;
+}
+
+.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 {
+  border: 1px solid var(--color-border);
+  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-surface);
+  transition: var(--transition-fast);
+}
+
+.search-input:focus {
+  border-color: var(--color-blue-common);
+  outline: none;
+  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
+}
+
+.search-icon {
+  position: absolute;
+  left: 0.75rem;
+  z-index: 1;
+  color: var(--color-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;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 0.625rem 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-blue-common);
+}
+
+.copy-btn.active:hover {
+  background: var(--color-accent-hover);
+}
+
+.edit-btn {
+  color: white;
+  background: var(--color-success);
+}
+
+.edit-btn.active:hover {
+  background: #059669;
+}
+
+.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: #d97706;
+}
+
+/* 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-text-secondary);
+}
+
+.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);
+  border-top: 2px solid var(--color-blue-common);
+  border-radius: 50%;
+  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;
+}
+
+.icon-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-md);
+  width: 32px;
+  height: 32px;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.icon-button:hover {
+  color: var(--color-text-primary);
+  transform: translateY(-1px);
+}
+
+.copy-icon:hover {
+  color: var(--color-copy);
+  background: rgb(6 182 212 / 10%);
+}
+
+.edit-icon:hover {
+  color: var(--color-success);
+  background: rgb(16 185 129 / 10%);
+}
+
+.delete-icon:hover {
+  color: var(--color-error);
+  background: rgb(239 68 68 / 10%);
+}
+
+/* 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: 18px;
+  height: 18px;
+  transition: var(--transition-fast);
+}
+
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark {
+  border-color: var(--color-blue-common);
+  background: var(--color-blue-common);
+}
+
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-mark::after {
+  position: absolute;
+  top: -1px;
+  left: 3px;
+  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: 50%;
+  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;
+}
+
+.nav-button {
+  position: absolute;
+  z-index: 10;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: 50%;
+  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: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--color-text-primary);
+  flex: 1;
+}
+
+.image-counter {
+  font-size: 0.875rem;
+  white-space: nowrap;
+  color: var(--color-text-secondary);
+}
+
+/* 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%);
+}
+
+.modal-container {
+  overflow-y: auto;
+  border-radius: var(--radius-xl);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  background: var(--color-background-primary);
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-container.large {
+  max-width: 700px;
+}
+
+.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);
+}
+
+.modal-close-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  border-radius: var(--radius-md);
+  width: 32px;
+  height: 32px;
+  color: var(--color-text-secondary);
+  background: var(--color-surface-elevated);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.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;
+  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;
+}
+
+.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;
+}
+
+.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-surface);
+  transition: var(--transition-fast);
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  border-color: var(--color-blue-common);
+  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: 50%;
+  width: 20px;
+  height: 20px;
+  color: white;
+  background: var(--color-blue-common);
+  transition: var(--transition-fast);
+  cursor: pointer;
+}
+
+.info-button:hover {
+  background: var(--color-blue-common);
+}
+
+.info-panel {
+  margin-top: 1rem;
+  border: 1px solid var(--color-border-secondary);
+  border-radius: var(--radius-md);
+  padding: 1rem;
+  background: var(--color-surface-elevated);
+}
+
+.info-panel h4 {
+  margin: 0 0 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+}
+
+.placeholder-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0;
+  padding: 0.5rem 0;
+}
+
+.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: 8px;
+  padding: 0.3rem 0.6rem;
+  min-width: 80px;
+  font-size: 1rem;
+  font-family: 'SF Mono', Monaco, Menlo, 'Ubuntu Mono', monospace;
+  font-weight: 600;
+  text-align: center;
+  color: white;
+  background: var(--color-blue-common);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
+  letter-spacing: 0.02em;
+  flex-shrink: 0;
+}
+
+.placeholder-item span {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+  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-blue-common);
+  transition: var(--transition-fast);
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  background: var(--color-blue-common);
+  transform: translateY(-1px);
+  box-shadow: var(--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-surface-elevated);
+  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;
+  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-surface);
+  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-blue-common);
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
+}
+
+.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-blue-common);
+  box-shadow: 0 0 0 2px rgb(59 130 246 / 20%);
+}
+
+.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;
+}
+
+.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;
+  text-align: center;
+  color: var(--color-text-tertiary);
+}
+
+.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: 12px;
+  padding: 0;
+  max-height: 400px;
+  background: var(--color-background-tertiary);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 6%);
+}
+
+.placeholder-category {
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.placeholder-category:last-child {
+  border-bottom: none;
+}
+
+.category-title {
+  margin: 0;
+  border-bottom: 1px solid var(--color-border-light);
+  padding: 0.875rem 1rem 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  background: linear-gradient(135deg, var(--color-background-secondary) 0%, var(--color-background-tertiary) 100%);
+  letter-spacing: 0.02em;
+}
+
+
+
+
+.placeholder-item:hover {
+  background: rgb(var(--color-accent-rgb), 0.08);
+}
+
+