---
import { getCollection, type CollectionEntry } from "astro:content";
import MainLayout from "../../layouts/MainLayout.astro";

// 获取URL参数
const { searchParams } = Astro.url;
const categoryParam = searchParams.get('category');
const cityParam = searchParams.get('city');
const tagParam = searchParams.get('tag');
const searchParam = searchParams.get('search');
const pageParam = parseInt(searchParams.get('page') || '1');

// 获取文化内容集合
const cultures = await getCollection("culture");

// 按照日期排序
const sortByDate = <T extends { data: { pubDate?: Date | string, updatedDate?: Date | string } }>(a: T, b: T): number => {
  return new Date(b.data.pubDate || b.data.updatedDate || 0).getTime() -
         new Date(a.data.pubDate || a.data.updatedDate || 0).getTime();
};

// 基于URL参数筛选数据
let filteredCultures = [...cultures];

// 应用分类筛选
if (categoryParam) {
  filteredCultures = filteredCultures.filter(culture => 
    culture.data.category && culture.data.category.toLowerCase() === categoryParam.toLowerCase()
  );
}

// 应用城市筛选
if (cityParam) {
  filteredCultures = filteredCultures.filter(culture => 
    culture.data.city && culture.data.city.some(city => city.toLowerCase() === cityParam.toLowerCase())
  );
}

// 应用标签筛选
if (tagParam) {
  filteredCultures = filteredCultures.filter(culture => 
    culture.data.tags && culture.data.tags.some(tag => tag.toLowerCase() === tagParam.toLowerCase())
  );
}

// 应用搜索筛选
if (searchParam) {
  const searchLower = searchParam.toLowerCase();
  filteredCultures = filteredCultures.filter(culture => 
    (culture.data.title && culture.data.title.toLowerCase().includes(searchLower)) ||
    (culture.data.description && culture.data.description.toLowerCase().includes(searchLower)) ||
    (culture.data.tags && culture.data.tags.some(tag => tag.toLowerCase().includes(searchLower)))
  );
}

// 先排序，再提取筛选项信息
const sortedCultures = filteredCultures.sort(sortByDate);

// 提取所有标签
const allTags: {name: string, count: number}[] = [];
cultures.forEach((culture: CollectionEntry<"culture">) => {
  culture.data.tags.forEach((tag: string) => {
    const existingTag = allTags.find(t => t.name === tag);
    if (existingTag) {
      existingTag.count++;
    } else {
      allTags.push({ name: tag, count: 1 });
    }
  });
});

// 按照标签出现次数排序
allTags.sort((a, b) => b.count - a.count);

// 获取所有分类并计数
const categories: {name: string, count: number}[] = [];
cultures.forEach((culture: CollectionEntry<"culture">) => {
  if (culture.data.category) {
    const existingCategory = categories.find(c => c.name === culture.data.category);
    if (existingCategory) {
      existingCategory.count++;
    } else {
      categories.push({ name: culture.data.category, count: 1 });
    }
  }
});

// 按照分类出现次数排序
categories.sort((a, b) => b.count - a.count);

// 获取所有城市并计数
const cities: {name: string, count: number}[] = [];
cultures.forEach((culture: CollectionEntry<"culture">) => {
  if (culture.data.city && culture.data.city.length > 0) {
    // 遍历每个城市数组
    culture.data.city.forEach(cityName => {
      const existingCity = cities.find(c => c.name === cityName);
      if (existingCity) {
        existingCity.count++;
      } else {
        cities.push({ name: cityName, count: 1 });
      }
    });
  }
});

// 按照城市出现次数排序
cities.sort((a, b) => b.count - a.count);

// 提取所有历史时期
const periods: {name: string, count: number}[] = [];
sortedCultures.forEach((culture: CollectionEntry<"culture">) => {
  if ((culture.data as any).period) {
    const existingPeriod = periods.find(p => p.name === (culture.data as any).period);
    if (existingPeriod) {
      existingPeriod.count++;
    } else {
      periods.push({ name: (culture.data as any).period, count: 1 });
    }
  }
});

// 按照历史时期出现次数排序
periods.sort((a, b) => b.count - a.count);

// 分页逻辑
const itemsPerPage = 9;
const page = pageParam;
const totalPages = Math.ceil(sortedCultures.length / itemsPerPage);
const currentPageCultures = sortedCultures.slice((page - 1) * itemsPerPage, page * itemsPerPage);

// 标记当前激活的筛选条件
const activeCategory = categoryParam || '';
const activeCity = cityParam || '';
const activeTag = tagParam || '';
const activeSearch = searchParam || '';

// 构建基础URL（不包含分页参数）
const buildUrl = (params: Record<string, string | null>) => {
  const url = new URL(Astro.url);
  const newParams = new URLSearchParams();
  
  // 添加现有参数
  if (categoryParam && params.category !== null) newParams.set('category', categoryParam);
  if (cityParam && params.city !== null) newParams.set('city', cityParam);
  if (tagParam && params.tag !== null) newParams.set('tag', tagParam);
  if (searchParam && params.search !== null) newParams.set('search', searchParam);
  
  // 覆盖或添加新参数
  Object.entries(params).forEach(([key, value]) => {
    if (value === null) {
      newParams.delete(key);
    } else if (value) {
      newParams.set(key, value);
    }
  });
  
  return `/culture${newParams.toString() ? '?' + newParams.toString() : ''}`;
};
---

<MainLayout title="河北文化典藏 - 河北游礼">
  <!-- 古籍书卷风格的头部 -->
  <div class="relative overflow-hidden bg-scroll-bg dark:bg-ancient-paper-dark min-h-[500px] flex items-center">
    <!-- 简洁的背景 -->
    <div class="absolute inset-0 bg-opacity-20 bg-amber-100 dark:bg-opacity-20 dark:bg-amber-900"></div>

    <!-- 古籍书卷式标题区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
      <div class="max-w-4xl mx-auto text-center">
        <!-- 书卷式内容区 -->
        <div class="relative py-12">
          <!-- 典籍风格标题 -->
          <div class="py-10 px-8">
            <div class="official-title">
              <h2 class="text-sm font-ancient tracking-[0.2em] text-ancient-red dark:text-ancient-red-dark mb-4">河北文化典藏</h2>
              <h1 class="text-5xl md:text-6xl font-ancient text-ancient-black dark:text-ancient-white mb-4 leading-snug">文化瑰宝</h1>
              <div class="w-40 h-0.5 mx-auto my-6 bg-ancient-accent dark:bg-ancient-accent-dark"></div>
            </div>

            <p class="font-ancient-body text-lg text-ancient-black dark:text-ancient-white max-w-2xl mx-auto leading-relaxed">
              典藏千年冀州文明，承载河北厚重历史文化积淀，
              <br>以字画诗词、戏曲非遗，述说河北文化的绵长与精彩
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>


  <!-- 主内容区域 - 古籍风格 -->
  <div class="bg-ancient-paper dark:bg-ancient-paper-dark py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 文化介绍语 - 书卷风格 -->
      <div class="mb-16 max-w-4xl mx-auto">
        <div class="px-8 py-10 text-center border-l-2 border-r-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 bg-ancient-paper-light/50 dark:bg-ancient-paper-dark/50 relative">
          <p class="text-xl text-ancient-black dark:text-ancient-white font-ancient-body leading-relaxed">
            河北，古称"冀州"，是中华文明的发祥地之一。这片土地上流传着众多的文化瑰宝，从京剧、评剧等传统戏曲，到皮影、剪纸等民间艺术，从千年古刹到悠久历史的传统习俗，共同构成了河北独特而丰富的文化景观。
          </p>
        </div>
      </div>

      <!-- 筛选状态显示 -->
      {(categoryParam || cityParam || tagParam || searchParam) && (
        <div class="mb-8 max-w-4xl mx-auto">
          <div class="p-4 border-l-4 border-ancient-accent dark:border-ancient-accent-dark bg-ancient-paper-light/80 dark:bg-ancient-paper-dark-light/80 flex justify-between items-center">
            <div class="flex flex-wrap gap-2 items-center">
              <span class="text-ancient-black/80 dark:text-ancient-white/80 font-ancient-small">当前筛选:</span>
              
              {categoryParam && (
                <div class="px-3 py-1 bg-ancient-paper/90 dark:bg-ancient-paper-dark/90 border border-ancient-accent/40 dark:border-ancient-accent-dark/40 text-sm font-ancient-small text-ancient-black dark:text-ancient-white rounded flex items-center">
                  <span class="mr-1">分类:</span>
                  <span class="font-medium">{categoryParam}</span>
                </div>
              )}
              
              {cityParam && (
                <div class="px-3 py-1 bg-amber-100/50 dark:bg-amber-900/30 border border-amber-200/70 dark:border-amber-700/40 text-sm font-ancient-small text-ancient-black dark:text-ancient-white rounded flex items-center">
                  <span class="mr-1">城市:</span>
                  <span class="font-medium">{cityParam}</span>
                </div>
              )}
              
              {tagParam && (
                <div class="px-3 py-1 bg-ancient-paper/90 dark:bg-ancient-paper-dark/90 border border-ancient-accent/40 dark:border-ancient-accent-dark/40 text-sm font-ancient-small text-ancient-black dark:text-ancient-white rounded flex items-center">
                  <span class="mr-1">标签:</span>
                  <span class="font-medium">{tagParam}</span>
                </div>
              )}
              
              {searchParam && (
                <div class="px-3 py-1 bg-ancient-paper/90 dark:bg-ancient-paper-dark/90 border border-ancient-accent/40 dark:border-ancient-accent-dark/40 text-sm font-ancient-small text-ancient-black dark:text-ancient-white rounded flex items-center">
                  <span class="mr-1">搜索:</span>
                  <span class="font-medium">"{searchParam}"</span>
                </div>
              )}
            </div>
            
            <a 
              href="/culture" 
              class="text-ancient-accent dark:text-ancient-accent-dark hover:text-ancient-red dark:hover:text-ancient-red-dark text-sm font-ancient-small flex items-center"
            >
              <span>清除筛选</span>
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </a>
          </div>
        </div>
      )}

      <!-- 无筛选结果提示 -->
      {sortedCultures.length === 0 && (
        <div class="my-12 max-w-xl mx-auto text-center">
          <div class="p-8 border-2 border-dashed border-ancient-accent/30 dark:border-ancient-accent-dark/30 bg-ancient-paper-light/50 dark:bg-ancient-paper-dark/50">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto text-ancient-accent/50 dark:text-ancient-accent-dark/50 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <h3 class="text-xl font-ancient text-ancient-black dark:text-ancient-white mb-2">未找到相关文化内容</h3>
            <p class="text-ancient-black/80 dark:text-ancient-white/80 font-ancient-body mb-4">
              {categoryParam && `没有找到分类为"${categoryParam}"的内容。`}
              {cityParam && `没有找到位于"${cityParam}"的内容。`}
              {tagParam && `没有找到标签为"${tagParam}"的内容。`}
              {searchParam && `没有找到包含"${searchParam}"的内容。`}
              {!categoryParam && !cityParam && !tagParam && !searchParam && '没有找到符合条件的内容。'}
            </p>
            <a href="/culture" class="inline-block mt-2 px-4 py-2 bg-ancient-accent dark:bg-ancient-accent-dark text-white rounded-md font-ancient-small">查看全部文化内容</a>
          </div>
        </div>
      )}

      <!-- 移动端筛选按钮和搜索框 -->
      <div class="lg:hidden mb-6 flex justify-between items-center">
        <button id="mobile-filter-toggle" class="bg-ancient-accent dark:bg-ancient-accent-dark text-ancient-white px-4 py-2 rounded-md inline-flex items-center shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
          </svg>
          <span class="inline-block">筛选</span>
        </button>

        <!-- 移动端搜索框 -->
        <form id="search-form-mobile" class="relative flex-grow mx-3" method="get" action="/culture">
          <input
            type="text"
            name="search"
            placeholder="搜索文化内容..."
            value={searchParam || ''}
            class="w-full text-ancient-black dark:text-ancient-white bg-ancient-paper-light/90 dark:bg-ancient-paper-dark/50 border border-ancient-accent/30 dark:border-ancient-accent-dark/30 rounded-full py-2 pl-3 pr-10 focus:outline-none focus:border-ancient-accent/70 dark:focus:border-ancient-accent-dark/70 font-ancient-body"
          />
          <!-- 保留现有参数 -->
          {categoryParam && <input type="hidden" name="category" value={categoryParam} />}
          {cityParam && <input type="hidden" name="city" value={cityParam} />}
          {tagParam && <input type="hidden" name="tag" value={tagParam} />}
          
          <button type="submit" class="absolute right-3 top-1/2 transform -translate-y-1/2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-ancient-accent dark:text-ancient-accent-dark" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
          </button>
        </form>
      </div>

      <!-- 移动端筛选抽屉 - 默认隐藏 -->
      <div id="mobile-filter-drawer" class="lg:hidden fixed inset-0 z-50 transform translate-x-full ">
        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="mobile-filter-backdrop"></div>
        <div class="absolute right-0 top-0 bottom-0 w-4/5 max-w-sm bg-ancient-paper-light dark:bg-ancient-paper-dark shadow-xl overflow-y-auto">
          <div class="p-4 border-b border-ancient-accent/20 dark:border-ancient-accent-dark/20 flex justify-between items-center">
            <h3 class="text-lg font-ancient-heading text-ancient-black dark:text-ancient-white">筛选</h3>
            <button id="mobile-filter-close" class="rounded-full p-2 text-ancient-black/70 dark:text-ancient-white/70 hover:bg-ancient-accent/10 dark:hover:bg-ancient-accent-dark/10">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

          <div class="p-4 space-y-6">
            <!-- 文化分类 - 移动端 -->
            <div>
              <h3 class="text-base font-ancient-heading text-ancient-black dark:text-ancient-white mb-3 flex items-center">
                <svg class="w-4 h-4 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                文化分类
              </h3>
              <div class="flex flex-wrap gap-2">
                {categories.slice(0, 6).map((category) => (
                  <a 
                    href={buildUrl({ category: category.name === activeCategory ? null : category.name })}
                    class:list={[
                      "px-3 py-1.5 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-sm font-ancient-small border rounded-md",
                      category.name === activeCategory 
                        ? "border-ancient-accent dark:border-ancient-accent-dark text-ancient-accent dark:text-ancient-accent-dark font-medium"
                        : "border-ancient-accent/30 dark:border-ancient-accent-dark/30 text-ancient-black dark:text-ancient-white hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50"
                    ]}
                  >
                    {category.name}
                    <span class="ml-1 text-xs text-ancient-black/60 dark:text-ancient-white/60">({category.count})</span>
                  </a>
                ))}
              </div>
            </div>

            <!-- 地域分布 - 移动端 -->
            <div>
              <h3 class="text-base font-ancient-heading text-ancient-black dark:text-ancient-white mb-3 flex items-center">
                <svg class="w-4 h-4 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                地域分布
              </h3>
              <div class="flex flex-wrap gap-2">
                {cities.slice(0, 6).map((city) => (
                  <a 
                    href={buildUrl({ city: city.name === activeCity ? null : city.name })}
                    class:list={[
                      "px-3 py-1.5 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-sm font-ancient-small border rounded-md",
                      city.name === activeCity 
                        ? "border-ancient-accent dark:border-ancient-accent-dark text-ancient-accent dark:text-ancient-accent-dark font-medium"
                        : "border-ancient-accent/30 dark:border-ancient-accent-dark/30 text-ancient-black dark:text-ancient-white hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50"
                    ]}
                  >
                    {city.name}
                    <span class="ml-1 text-xs text-ancient-black/60 dark:text-ancient-white/60">({city.count})</span>
                  </a>
                ))}
              </div>
            </div>

            <!-- 标签筛选 - 移动端 -->
            <div>
              <h3 class="text-base font-ancient-heading text-ancient-black dark:text-ancient-white mb-3 flex items-center">
                <svg class="w-4 h-4 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                特色标签
              </h3>
              <div class="flex flex-wrap gap-2">
                {allTags.slice(0, 12).map((tag) => (
                  <a 
                    href={buildUrl({ tag: tag.name === activeTag ? null : tag.name })}
                    class:list={[
                      "px-3 py-1.5 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-sm font-ancient-small border rounded-md",
                      tag.name === activeTag 
                        ? "border-ancient-accent dark:border-ancient-accent-dark text-ancient-accent dark:text-ancient-accent-dark font-medium"
                        : "border-ancient-accent/30 dark:border-ancient-accent-dark/30 text-ancient-black dark:text-ancient-white hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50"
                    ]}
                  >
                    {tag.name}
                    <span class="ml-1 text-xs text-ancient-black/60 dark:text-ancient-white/60">({tag.count})</span>
                  </a>
                ))}
              </div>
            </div>

            <!-- 底部应用按钮 -->
            <div class="border-t border-ancient-accent/20 dark:border-ancient-accent-dark/20 pt-3 flex justify-end">
              <button id="mobile-filter-close" class="bg-ancient-accent dark:bg-ancient-accent-dark text-ancient-white px-6 py-2 rounded-md shadow-md inline-flex items-center">
                <span class="inline-block">关闭筛选</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-4 gap-x-10 gap-y-6">
        <!-- 左侧筛选栏 - 古籍风格 - 只在桌面显示 -->
        <div class="hidden lg:block lg:col-span-1">
          <div class="sticky top-24 space-y-8 pt-0">
            <!-- 搜索框 - 书法风 -->
            <div class="bg-ancient-paper-light dark:bg-ancient-paper-dark-light p-6 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 shadow-md">
              <h3 class="text-lg font-ancient-heading text-ancient-black dark:text-ancient-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
                典籍检索
              </h3>

              <form id="search-form" class="relative" method="get" action="/culture">
                <input
                  type="text"
                  name="search"
                  placeholder="输入关键词..."
                  value={searchParam || ''}
                  class="w-full px-4 py-2 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 placeholder-ancient-black/50 dark:placeholder-ancient-white/50 text-ancient-black dark:text-ancient-white font-ancient-body focus:outline-none focus:border-ancient-accent dark:focus:border-ancient-accent-dark"
                />
                <!-- 保留现有参数 -->
                {categoryParam && <input type="hidden" name="category" value={categoryParam} />}
                {cityParam && <input type="hidden" name="city" value={cityParam} />}
                {tagParam && <input type="hidden" name="tag" value={tagParam} />}
                
                <button type="submit" class="absolute right-3 top-2 text-ancient-accent/70 dark:text-ancient-accent-dark/70">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                </button>
              </form>
            </div>

            <!-- 分类筛选 - 卷轴风格 -->
            <div class="bg-ancient-paper-light dark:bg-ancient-paper-dark-light p-6 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 shadow-md">
              <h3 class="text-lg font-ancient-heading text-ancient-black dark:text-ancient-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                文化分类
              </h3>

              <div class="space-y-2 font-ancient-body max-h-48 overflow-y-auto scrollbar-thin scrollbar-thumb-ancient-accent/30 dark:scrollbar-thumb-ancient-accent-dark/30 pr-2">
                {categories.map((category) => (
                  <a 
                    href={buildUrl({ category: category.name === activeCategory ? null : category.name })}
                    class:list={[
                      "flex items-center group cursor-pointer hover:bg-ancient-accent/10 dark:hover:bg-ancient-accent-dark/10 p-1.5 rounded",
                      { "bg-ancient-accent/20 dark:bg-ancient-accent-dark/20": category.name === activeCategory }
                    ]}
                  >
                    <div class="w-4 h-4 border border-ancient-accent/50 dark:border-ancient-accent-dark/50 mr-2 flex-shrink-0 group-hover:bg-ancient-accent/20 dark:group-hover:bg-ancient-accent-dark/20 relative">
                      {category.name === activeCategory && (
                        <div class="absolute inset-0 flex items-center justify-center">
                          <div class="w-2 h-3 border-r-2 border-b-2 border-ancient-accent dark:border-ancient-accent-dark transform rotate-45 -translate-y-1/4"></div>
                        </div>
                      )}
                    </div>
                    <div class="text-ancient-black dark:text-ancient-white group-hover:text-ancient-accent dark:group-hover:text-ancient-accent-dark">
                      <span>{category.name}</span>
                      <span class="text-ancient-black/60 dark:text-ancient-white/60 text-sm">({category.count})</span>
                    </div>
                  </a>
                ))}
              </div>
            </div>

            <!-- 城市筛选 - 新增部分 -->
            <div class="bg-ancient-paper-light dark:bg-ancient-paper-dark-light p-6 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 shadow-md">
              <h3 class="text-lg font-ancient-heading text-ancient-black dark:text-ancient-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>
                地域分布
              </h3>

              <div class="space-y-2 font-ancient-body max-h-48 overflow-y-auto scrollbar-thin scrollbar-thumb-ancient-accent/30 dark:scrollbar-thumb-ancient-accent-dark/30 pr-2">
                {cities.map((city) => (
                  <a 
                    href={buildUrl({ city: city.name === activeCity ? null : city.name })}
                    class:list={[
                      "flex items-center group cursor-pointer hover:bg-amber-100/50 dark:hover:bg-amber-800/20 p-1.5 rounded",
                      { "bg-amber-100/80 dark:bg-amber-800/30": city.name === activeCity }
                    ]}
                  >
                    <div class="w-4 h-4 border border-amber-300/50 dark:border-amber-700/50 mr-2 flex-shrink-0 group-hover:bg-amber-200/40 dark:group-hover:bg-amber-700/30 relative">
                      {city.name === activeCity && (
                        <div class="absolute inset-0 flex items-center justify-center">
                          <div class="w-2 h-3 border-r-2 border-b-2 border-amber-400 dark:border-amber-600 transform rotate-45 -translate-y-1/4"></div>
                        </div>
                      )}
                    </div>
                    <div class="text-ancient-black dark:text-ancient-white group-hover:text-amber-700 dark:group-hover:text-amber-300">
                      <span>{city.name}</span>
                      <span class="text-ancient-black/60 dark:text-ancient-white/60 text-sm">({city.count})</span>
                    </div>
                  </a>
                ))}
              </div>
            </div>

            <!-- 标签筛选 - 古籍风格 -->
            <div class="bg-ancient-paper-light dark:bg-ancient-paper-dark-light p-6 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 shadow-md">
              <h3 class="text-lg font-ancient-heading text-ancient-black dark:text-ancient-white mb-4 flex items-center">
                <svg class="w-5 h-5 mr-2 text-ancient-accent dark:text-ancient-accent-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                特色标签
              </h3>

              <div class="flex flex-wrap gap-2">
                {allTags.slice(0, 12).map((tag) => (
                  <a 
                    href={buildUrl({ tag: tag.name === activeTag ? null : tag.name })}
                    class:list={[
                      "px-3 py-1.5 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-sm font-ancient-small border rounded-md",
                      tag.name === activeTag 
                        ? "border-ancient-accent dark:border-ancient-accent-dark text-ancient-accent dark:text-ancient-accent-dark font-medium"
                        : "border-ancient-accent/30 dark:border-ancient-accent-dark/30 text-ancient-black dark:text-ancient-white hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50"
                    ]}
                  >
                    {tag.name}
                    <span class="ml-1 text-xs text-ancient-black/60 dark:text-ancient-white/60">({tag.count})</span>
                  </a>
                ))}
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 - 古籍风格 -->
        <div class="lg:col-span-3 lg:mt-0">
          <!-- 内容分类标签 - 古卷风格 -->
          <div class="flex flex-wrap gap-3 mb-8 lg:hidden">
            {/* 内容分类标签部分 */}
          </div>

          <!-- 文化内容列表 - 卷轴风格网格 -->
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 auto-rows-fr">
            {currentPageCultures.map((culture, index) => (
              <a href={`/culture/${culture.slug}`} class="block group h-full">
                <div class="ancient-card relative h-full bg-ancient-paper dark:bg-ancient-paper-dark flex flex-col shadow-lg group-hover:shadow-xl overflow-hidden" 
                     data-tags={JSON.stringify(culture.data.tags.map((tag: string) => tag.toLowerCase()))}
                     data-category={culture.data.category?.toLowerCase() || ''}
                     data-cities={JSON.stringify(culture.data.city?.map((city: string) => city.toLowerCase()) || [])}
                >
                  <div class="relative h-48 overflow-hidden border-b-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30">
                    <!-- 装饰元素 -->
                    <div class="absolute top-2 left-2 w-8 h-8 bg-ink-decoration opacity-10 dark:opacity-15"></div>
                    <div class="absolute bottom-2 right-2 w-8 h-8 bg-ink-decoration opacity-10 dark:opacity-15 rotate-180"></div>

                    <!-- 默认内容显示 -->
                    <div class="absolute inset-0 flex items-center justify-center">
                      <span class="text-ancient-black/40 dark:text-amber-100/60 font-ancient">{culture.data.title}</span>
                    </div>

                    <!-- 印章效果 -->
                    {index % 4 === 0 && (
                      <div class="absolute top-4 right-4 w-16 h-16 bg-seal-mark opacity-40 rotate-12"></div>
                    )}

                    {/* 文化类别标签 */}
                    {culture.data.category && (
                      <div class="absolute top-3 right-3 px-2 py-1 bg-ancient-paper/90 dark:bg-dark-surface text-ancient-black dark:text-amber-100 text-xs font-ancient-small border border-ancient-accent/30 dark:border-amber-700/50 category-tag" data-category-value={culture.data.category.toLowerCase()}>
                        {culture.data.category}
                      </div>
                    )}
                  </div>

                  <div class="p-5 flex flex-col flex-grow dark:bg-dark-card">
                    <div class="mb-3">
                      <h3 class="text-xl font-ancient text-ancient-black dark:text-amber-100 group-hover:text-ancient-red dark:group-hover:text-amber-300 ">
                        {culture.data.title}
                      </h3>
                      {(culture.data as any).period && (
                        <div class="text-sm text-ancient-black/70 dark:text-amber-200/80 mt-1 font-ancient-small period-tag" data-period-value={(culture.data as any).period.toLowerCase()}>
                          {(culture.data as any).period} 时期
                        </div>
                      )}
                    </div>

                    <p class="text-ancient-black/80 dark:text-amber-100/90 text-sm line-clamp-2 mb-4 font-ancient-body">
                      {culture.data.description}
                    </p>

                    <div class="flex flex-wrap gap-1.5 mb-4 min-h-[2rem]">
                      {culture.data.tags.slice(0, 3).map((tag: string) => (
                        <span class="px-2 py-1 bg-ancient-paper-light/50 dark:bg-dark-surface text-ancient-black/70 dark:text-amber-100/90 text-xs font-ancient-small border border-ancient-accent/20 dark:border-amber-700/40 tag-item" data-tag-value={tag.toLowerCase()}>
                          {tag}
                        </span>
                      ))}
                      {culture.data.tags.length > 3 && (
                        <span class="px-2 py-1 bg-ancient-paper-light/50 dark:bg-dark-surface text-ancient-black/70 dark:text-amber-100/90 text-xs font-ancient-small border border-ancient-accent/20 dark:border-amber-700/40">
                          +{culture.data.tags.length - 3}
                        </span>
                      )}
                    </div>

                    {/* 在卡片中添加城市信息显示 */}
                    <div class="min-h-[1.5rem]">
                      {culture.data.city && culture.data.city.length > 0 && (
                        <div class="flex flex-wrap gap-1.5 mt-1 mb-2">
                          {culture.data.city.slice(0, 2).map((cityName: string) => (
                            <span class="px-2 py-1 bg-amber-100/50 dark:bg-amber-900/50 text-ancient-black/70 dark:text-amber-100 text-xs font-ancient-small border border-amber-200/50 dark:border-amber-600/50 city-tag" data-city-value={cityName.toLowerCase()}>
                              {cityName}
                            </span>
                          ))}
                          {culture.data.city.length > 2 && (
                            <span class="px-2 py-1 bg-amber-100/50 dark:bg-amber-900/50 text-ancient-black/70 dark:text-amber-100 text-xs font-ancient-small border border-amber-200/50 dark:border-amber-600/50">
                              +{culture.data.city.length - 2}
                            </span>
                          )}
                        </div>
                      )}
                    </div>

                    <div class="flex items-center text-ancient-black/80 dark:text-amber-200 text-sm group-hover:translate-x-1 font-ancient-small group-hover:text-ancient-red dark:group-hover:text-amber-300 mt-auto">
                      查阅详情
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                      </svg>
                    </div>
                  </div>
                </div>
              </a>
            ))}
          </div>

          <!-- 无搜索结果提示 - 在客户端控制显示 -->
          <div id="no-results-message" class="hidden py-16">
            <div class="max-w-md mx-auto bg-ancient-paper-light dark:bg-ancient-paper-dark-light rounded-lg shadow-md p-8 border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 text-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-ancient-accent/50 dark:text-ancient-accent-dark/50" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
                <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
              </svg>
              <h3 class="mt-4 text-xl font-ancient-heading text-ancient-black dark:text-ancient-white">未找到匹配结果</h3>
              <p id="search-term-message" class="mt-2 text-ancient-black/80 dark:text-ancient-white/80 font-ancient-body">
                抱歉，未找到相关文化内容。请尝试其他关键词或浏览所有内容。
              </p>
              <div class="mt-6 flex flex-col space-y-3">
                <a href="/culture" class="text-ancient-red hover:text-ancient-red/70 dark:text-ancient-red-dark dark:hover:text-ancient-red-dark/70 font-ancient-small">
                  查看所有文化内容 &rarr;
                </a>
                <button id="reset-filters-btn" class="mx-auto px-4 py-2 bg-ancient-paper/70 dark:bg-ancient-paper-dark/70 text-ancient-black dark:text-ancient-white text-sm font-ancient-small border border-ancient-accent/30 dark:border-ancient-accent-dark/30 hover:border-ancient-accent/50 dark:hover:border-ancient-accent-dark/50 hover:text-ancient-accent dark:hover:text-ancient-accent-dark">
                  重置所有筛选条件
                </button>
              </div>
            </div>
          </div>

          <!-- 分页控件 - 古籍风格 -->
          {totalPages > 1 && (
            <div class="mt-16 flex justify-center">
              <div class="inline-flex bg-ancient-paper-light dark:bg-ancient-paper-dark-light border-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 rounded-md overflow-hidden">
                <!-- 上一页 -->
                <a
                  href={page > 1 ? buildUrl({ page: (page - 1).toString() }) : undefined}
                  class:list={[
                    "px-4 py-2 border-r-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 flex items-center space-x-1 font-ancient-small",
                    page > 1
                      ? "text-ancient-accent dark:text-ancient-accent-dark hover:bg-ancient-paper/70 dark:hover:bg-ancient-paper-dark/70" 
                      : "text-ancient-black/30 dark:text-ancient-white/30 cursor-not-allowed"
                  ]}
                >
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                  </svg>
                  <span>上一页</span>
                </a>

                <!-- 页码 -->
                {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                  const pageNum = i + 1;
                  return (
                    <a
                      href={buildUrl({ page: pageNum.toString() })}
                      class:list={[
                        "w-10 flex items-center justify-center border-r-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 font-ancient-small",
                        pageNum === page
                          ? "bg-ancient-accent/20 dark:bg-ancient-accent-dark/20 text-ancient-accent dark:text-ancient-accent-dark font-medium" 
                          : "text-ancient-black dark:text-ancient-white hover:bg-ancient-paper/70 dark:hover:bg-ancient-paper-dark/70"
                      ]}
                    >
                      {pageNum}
                    </a>
                  );
                })}

                <!-- 更多页 -->
                {totalPages > 5 && (
                  <span class="w-10 flex items-center justify-center border-r-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 text-ancient-black/50 dark:text-ancient-white/50 font-ancient-small">
                    ...
                  </span>
                )}

                <!-- 末页 -->
                {totalPages > 5 && (
                  <a
                    href={buildUrl({ page: totalPages.toString() })}
                    class="w-10 flex items-center justify-center border-r-2 border-ancient-accent/30 dark:border-ancient-accent-dark/30 text-ancient-black dark:text-ancient-white hover:bg-ancient-paper/70 dark:hover:bg-ancient-paper-dark/70 font-ancient-small"
                  >
                    {totalPages}
                  </a>
                )}

                <!-- 下一页 -->
                <a
                  href={page < totalPages ? buildUrl({ page: (page + 1).toString() }) : undefined}
                  class:list={[
                    "px-4 py-2 flex items-center space-x-1 font-ancient-small",
                    page < totalPages
                      ? "text-ancient-accent dark:text-ancient-accent-dark hover:bg-ancient-paper/70 dark:hover:bg-ancient-paper-dark/70" 
                      : "text-ancient-black/30 dark:text-ancient-white/30 cursor-not-allowed"
                  ]}
                >
                  <span>下一页</span>
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                  </svg>
                </a>
              </div>
            </div>
          )}

          <!-- 底部引言 - 古籍风格 -->
          <div class="mt-20 mb-10 text-center relative">
            <!-- 装饰元素 -->
            <div class="absolute left-1/4 top-0 w-16 h-1 bg-ancient-accent/30 dark:bg-ancient-accent-dark/30"></div>
            <div class="absolute right-1/4 bottom-0 w-16 h-1 bg-ancient-accent/30 dark:bg-ancient-accent-dark/30"></div>

            <blockquote class="text-xl text-ancient-black dark:text-ancient-white font-ancient italic">
              "文化是一个国家、一个民族的灵魂"
            </blockquote>
            <div class="mt-3 text-sm text-ancient-black/60 dark:text-ancient-white/60 font-ancient-small">— 河北历史文化研究院</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</MainLayout>

<script>
  document.addEventListener('DOMContentLoaded', () => {



    // 移动端筛选抽屉
    const mobileFilterToggle = document.getElementById('mobile-filter-toggle');
    const mobileFilterDrawer = document.getElementById('mobile-filter-drawer');
    const mobileFilterBackdrop = document.getElementById('mobile-filter-backdrop');
    const mobileFilterClose = document.getElementById('mobile-filter-close');

    // 打开移动端筛选抽屉
    if (mobileFilterToggle && mobileFilterDrawer) {
      mobileFilterToggle.addEventListener('click', () => {
        mobileFilterDrawer.classList.remove('translate-x-full');
        document.body.classList.add('overflow-hidden'); // 防止背景滚动
      });
    }

    // 关闭抽屉函数
    const closeFilterDrawer = () => {
      if (mobileFilterDrawer) {
        mobileFilterDrawer.classList.add('translate-x-full');
        document.body.classList.remove('overflow-hidden');
      }
    };

    // 点击背景关闭抽屉
    if (mobileFilterBackdrop) {
      mobileFilterBackdrop.addEventListener('click', closeFilterDrawer);
    }

    // 点击关闭按钮关闭抽屉
    if (mobileFilterClose) {
      mobileFilterClose.addEventListener('click', closeFilterDrawer);
    }

    // 获取所有筛选链接
    const filterLinks = document.querySelectorAll('a[href*="?category"], a[href*="?city"], a[href*="?taste"], a[href*="?tag"], a[href*="?ingredient"]');
    
    // 为每个筛选链接添加点击事件监听器
    filterLinks.forEach(link => {
      link.addEventListener('click', (e) => {
        e.preventDefault(); // 阻止默认行为
        
        const href = (link as HTMLAnchorElement).href;
        const url = new URL(href);
        
        // 获取当前的筛选参数
        const params = new URLSearchParams(window.location.search);
        const clickedParam = Array.from(url.searchParams.entries())[0];
        
        if (clickedParam) {
          const [paramName, paramValue] = clickedParam;
          
          // 如果当前参数值与点击的值相同，则移除该参数
          if (params.get(paramName) === paramValue) {
            params.delete(paramName);
          } else {
            // 否则设置新的参数值
            params.set(paramName, paramValue);
          }
          
          // 更新 URL，但不刷新页面
          const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
          window.history.pushState({}, '', newUrl);
          
          // 应用筛选
          applyFilters();
        }
      });
    });

    // 应用筛选函数
    function applyFilters() {
      const params = new URLSearchParams(window.location.search);
      const category = params.get('category')?.toLowerCase();
      const city = params.get('city')?.toLowerCase();
      const tag = params.get('tag')?.toLowerCase();
      const search = params.get('search')?.toLowerCase();
      
      // 获取所有文化卡片
      const cards = document.querySelectorAll('.ancient-card');
      let visibleCount = 0;
      
      cards.forEach(card => {
        let shouldShow = true;
        
        // 检查分类
        if (category && shouldShow) {
          const cardCategory = card.getAttribute('data-category');
          if (cardCategory !== category) {
            shouldShow = false;
          }
        }
        
        // 检查城市
        if (city && shouldShow) {
          try {
            const cardCities = JSON.parse(card.getAttribute('data-cities') || '[]');
            if (!cardCities.includes(city)) {
              shouldShow = false;
            }
          } catch (e) {
            shouldShow = false;
          }
        }
        
        // 检查标签
        if (tag && shouldShow) {
          try {
            const cardTags = JSON.parse(card.getAttribute('data-tags') || '[]');
            if (!cardTags.includes(tag)) {
              shouldShow = false;
            }
          } catch (e) {
            shouldShow = false;
          }
        }

        // 检查搜索关键词
        if (search && shouldShow) {
          const title = card.querySelector('h3')?.textContent?.toLowerCase() || '';
          const description = card.querySelector('p.line-clamp-2')?.textContent?.toLowerCase() || '';
          const tags = JSON.parse(card.getAttribute('data-tags') || '[]').join(' ').toLowerCase();
          const cities = JSON.parse(card.getAttribute('data-cities') || '[]').join(' ').toLowerCase();
          
          if (!title.includes(search) && 
              !description.includes(search) && 
              !tags.includes(search) && 
              !cities.includes(search)) {
            shouldShow = false;
          }
        }
        
        // 更新卡片显示状态
        const cardContainer = card.closest('a')?.parentElement;
        if (cardContainer) {
          if (shouldShow) {
            cardContainer.style.display = '';
            visibleCount++;
          } else {
            cardContainer.style.display = 'none';
          }
        }
      });

      // 更新 UI 显示
      updateFilterUI();
      
      // 处理无结果情况
      const noResultsMessage = document.getElementById('no-results-message');
      const searchTermMessage = document.getElementById('search-term-message');
      const gridContainer = document.querySelector('.grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-3') as HTMLElement;
      
      if (visibleCount === 0) {
        if (gridContainer) gridContainer.style.display = 'none';
        if (noResultsMessage) {
          noResultsMessage.style.display = 'block';
          if (searchTermMessage) {
            let message = '抱歉，未找到相关文化内容。';
            if (search) {
              message += `没有找到包含"${search}"的内容。`;
            }
            if (category) {
              message += `没有找到分类为"${category}"的内容。`;
            }
            if (city) {
              message += `没有找到位于"${city}"的内容。`;
            }
            if (tag) {
              message += `没有找到标签为"${tag}"的内容。`;
            }
            searchTermMessage.textContent = message;
          }
        }
          } else {
        if (gridContainer) gridContainer.style.display = 'grid';
        if (noResultsMessage) noResultsMessage.style.display = 'none';
      }
    }

    // 更新筛选 UI
    function updateFilterUI() {
      const params = new URLSearchParams(window.location.search);
      const currentCategory = params.get('category');
      const currentCity = params.get('city');
      const currentTag = params.get('tag');
      const currentSearch = params.get('search');
      
      console.log('当前筛选参数:', {
        category: currentCategory,
        city: currentCity,
        tag: currentTag,
        search: currentSearch
      });
      
      // 更新分类选中状态
      document.querySelectorAll('a[href*="?category"]').forEach(link => {
        try {
          const url = new URL((link as HTMLAnchorElement).href);
          const linkCategory = url.searchParams.get('category');
          
          // 检查是否选中
          const isSelected = currentCategory === linkCategory;
          console.log('分类项:', linkCategory, '是否选中:', isSelected);
          
          // 处理带复选框的分类项（桌面端左侧栏）
          const checkbox = link.querySelector('div.w-4.h-4');
          if (checkbox) {
            console.log('找到分类复选框:', checkbox);
            if (isSelected) {
              checkbox.className = 'w-4 h-4 border border-ancient-accent/50 dark:border-ancient-accent-dark/50 mr-2 flex-shrink-0 relative';
              checkbox.innerHTML = '<div class="absolute inset-0 flex items-center justify-center"><div class="w-2 h-3 border-r-2 border-b-2 border-ancient-accent dark:border-ancient-accent-dark transform rotate-45 -translate-y-1/4"></div></div>';
              // 同时更新父元素背景
              link.classList.add('bg-ancient-accent/10', 'dark:bg-ancient-accent-dark/10');
            } else {
              checkbox.className = 'w-4 h-4 border border-ancient-accent/50 dark:border-ancient-accent-dark/50 mr-2 flex-shrink-0 group-hover:bg-ancient-accent/20 dark:group-hover:bg-ancient-accent-dark/20';
              checkbox.innerHTML = '';
              link.classList.remove('bg-ancient-accent/10', 'dark:bg-ancient-accent-dark/10');
            }
          } 
        } catch (e) {
          console.error('Error updating category UI:', e);
        }
      });
      
      // 更新城市选中状态
      document.querySelectorAll('a[href*="?city"]').forEach(link => {
        try {
          const url = new URL((link as HTMLAnchorElement).href);
          const linkCity = url.searchParams.get('city');
          
          // 检查是否选中
          const isSelected = currentCity === linkCity;
          console.log('城市项:', linkCity, '是否选中:', isSelected);
          
          // 处理带复选框的城市项（桌面端左侧栏）
          const checkbox = link.querySelector('div.w-4.h-4');
          if (checkbox) {
            console.log('找到城市复选框:', checkbox);
            if (isSelected) {
              checkbox.className = 'w-4 h-4 border border-amber-300/50 dark:border-amber-700/50 mr-2 flex-shrink-0 relative';
              checkbox.innerHTML = '<div class="absolute inset-0 flex items-center justify-center"><div class="w-2 h-3 border-r-2 border-b-2 border-amber-400 dark:border-amber-600 transform rotate-45 -translate-y-1/4"></div></div>';
              // 移除橙色背景的添加
            } else {
              checkbox.className = 'w-4 h-4 border border-amber-300/50 dark:border-amber-700/50 mr-2 flex-shrink-0 group-hover:bg-amber-200/40 dark:group-hover:bg-amber-700/30';
              checkbox.innerHTML = '';
              // 移除背景移除代码，因为不再添加背景
            }
          } 
        } catch (e) {
          console.error('Error updating city UI:', e);
        }
      });
      
      // 更新标签选中状态
      document.querySelectorAll('a[href*="?tag"]').forEach(link => {
        try {
          const url = new URL((link as HTMLAnchorElement).href);
          const linkTag = url.searchParams.get('tag');
          
          // 检查是否选中
          const isSelected = currentTag === linkTag;
          
          // 标签可能有多种不同的样式结构，需要针对不同结构进行处理
          // 处理带有类名px-3的标签（桌面端和移动端通用标签样式）
          if (link.classList.contains('px-3')) {
            if (isSelected) {
              link.classList.add('border-ancient-accent', 'dark:border-ancient-accent-dark', 'text-ancient-accent', 'dark:text-ancient-accent-dark', 'font-medium', 'bg-ancient-accent/10', 'dark:bg-ancient-accent-dark/10', 'shadow-sm');
              link.classList.remove('border-ancient-accent/30', 'dark:border-ancient-accent-dark/30');
            } else {
              link.classList.remove('border-ancient-accent', 'dark:border-ancient-accent-dark', 'text-ancient-accent', 'dark:text-ancient-accent-dark', 'font-medium', 'bg-ancient-accent/10', 'dark:bg-ancient-accent-dark/10', 'shadow-sm');
              link.classList.add('border-ancient-accent/30', 'dark:border-ancient-accent-dark/30');
            }
          }
        } catch (e) {
          console.error('Error updating tag UI:', e);
        }
      });
      
      // 高亮显示当前筛选条件摘要（顶部筛选状态栏）
      if (currentCategory || currentCity || currentTag || currentSearch) {
        const filterSummary = document.querySelector('.flex.flex-wrap.gap-2.items-center');
        if (filterSummary) {
          filterSummary.classList.add('animate-pulse-once');
      setTimeout(() => {
            filterSummary.classList.remove('animate-pulse-once');
          }, 500);
        }
      }
    }

    // 初始化：如果 URL 中有筛选参数，应用筛选
    if (window.location.search) {
      applyFilters();
    }

    // 处理搜索表单提交
    const searchForm = document.getElementById('search-form');
    const searchFormMobile = document.getElementById('search-form-mobile');

    function handleSearch(e: Event) {
        e.preventDefault();
      const form = e.target as HTMLFormElement;
      const searchInput = form.querySelector('input[name="search"]') as HTMLInputElement;
      
      // 获取当前的筛选参数
      const params = new URLSearchParams(window.location.search);
      
      // 更新或删除搜索参数
      if (searchInput.value.trim()) {
        params.set('search', searchInput.value.trim());
        } else {
        params.delete('search');
      }
      
      // 更新 URL，但不刷新页面
      const newUrl = `${window.location.pathname}${params.toString() ? '?' + params.toString() : ''}`;
      window.history.pushState({}, '', newUrl);
      
      // 应用筛选
      applyFilters();
    }

    // 为搜索表单添加提交事件监听器
    if (searchForm) {
      searchForm.addEventListener('submit', handleSearch);
    }
    if (searchFormMobile) {
      searchFormMobile.addEventListener('submit', handleSearch);
    }

    // 重置筛选按钮
    const resetFiltersBtn = document.getElementById('reset-filters-btn');
    if (resetFiltersBtn) {
      resetFiltersBtn.addEventListener('click', () => {
        window.location.href = '/culture';
      });
    }
  });
</script>

<style>

  /* 古籍卡片样式 */
  .ancient-card {
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    background-color: rgba(248, 245, 232, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  [data-theme='dark'] .ancient-card {
    background: linear-gradient(145deg, rgba(32, 30, 34, 0.95), rgba(38, 36, 42, 0.95));
    border-color: rgba(184, 124, 80, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.03);
  }

  [data-theme='dark'] .ancient-card:hover {
    background: linear-gradient(145deg, rgba(40, 38, 48, 0.95), rgba(46, 43, 53, 0.95));
    border-color: rgba(201, 145, 95, 0.45);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  }

  .ancient-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* 书卷装饰 */
  .scroll-decoration {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
  }

  /* 印章效果 */
  .seal-mark {
    position: relative;
  }

  .seal-mark::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    transform: rotate(15deg);
  }

  /* 卷轴打开动画 */
  @keyframes unrollScroll {
    0% {
      opacity: 0;
      transform: translateY(-100px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 印章浮现动画 */
  @keyframes revealSeal {
    0% {
      opacity: 0;
      transform: scale(0.5) rotate(0deg);
    }
    50% {
      opacity: 0.5;
      transform: scale(1.2) rotate(15deg);
    }
    100% {
      opacity: 0.8;
      transform: scale(1) rotate(15deg);
    }
  }

  /* 水墨渐显动画 */
  @keyframes inkReveal {
    0% {
      opacity: 0;
      filter: blur(10px);
    }
    100% {
      opacity: 0.1;
      filter: blur(0);
    }
  }



  /* 隐藏滚动条但保留功能 */
  .hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .hide-scrollbar::-webkit-scrollbar {
    display: none;  /* Chrome, Safari, Opera */
  }

  /* 标题毛笔效果 */
  .official-title h1 {
    position: relative;
    display: inline-block;
  }

  .official-title h1::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background-color: #8a2c12;
    transform: rotate(-0.5deg);
  }

  [data-theme='dark'] .official-title h1::after {
    background-color: #c34c2a;
  }

  /* 勾选框样式 */
  .checkbox-container {
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 2px solid #8B5A2B;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .checkbox-selected {
    background-color: rgba(139, 90, 43, 0.2);
    border-color: #8B5A2B;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
  }

  .checkbox-unselected {
    background-color: transparent;
    border-color: rgba(139, 90, 43, 0.5);
  }

  .checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #8B5A2B;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .checkmark-visible {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  /* 标签选中状态样式 */
  .tag-selected {
    background-color: rgba(139, 90, 43, 0.2) !important;
    border-color: rgba(139, 90, 43, 0.9) !important;
    color: rgba(139, 90, 43, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .dark .tag-selected {
    background-color: rgba(139, 90, 43, 0.3) !important;
    border-color: rgba(139, 90, 43, 0.7) !important;
    color: rgba(215, 171, 101, 1) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }

  /* 确保标签选中时有完整边框 */
  .tag-selected {
    border-width: 1px;
    border-style: solid;
  }

  /* 删除选中标签后的彩色点 */
  .tag-selected::after {
    content: none;
  }

  /* 标签悬停效果 */
  .tag-item:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(139, 90, 43, 0.1);
  }

  /* 鼠标悬停在标签上的效果 */
  .tag-item:hover {
    border-color: rgba(156, 79, 46, 0.5) !important;
    background-color: rgba(156, 79, 46, 0.1) !important;
  }

  /* 专门处理复选框的样式 */
  .font-ancient-body.max-h-48 .flex.items-center.group.cursor-pointer .w-4.h-4 {
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border: 2px solid rgba(139, 90, 43, 0.5);
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }

  .font-ancient-body.max-h-48 .flex.items-center.group.cursor-pointer .w-4.h-4.bg-ancient-accent\/20 {
    background-color: rgba(139, 90, 43, 0.2) !important;
    border-color: #8B5A2B !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
  }

  /* 添加特定的悬停效果到类别项 */
  .flex.items-center.group.cursor-pointer:hover .w-4.h-4 {
    background-color: rgba(139, 90, 43, 0.1);
    border-color: #8B5A2B;
  }

  /* 黑暗模式下的背景和内容区优化 */
  [data-theme='dark'] .bg-ancient-paper-dark {
    background-color: #1e1a21;
  }

  [data-theme='dark'] .bg-ancient-paper-dark-light {
    background-color: #28232a;
  }

  [data-theme='dark'] .bg-ancient-paper-dark\/70,
  [data-theme='dark'] .bg-ancient-paper-dark\/50,
  [data-theme='dark'] .bg-ancient-paper-dark\/90 {
    background-color: rgba(30, 26, 33, 0.9) !important;
  }

  /* 黑暗模式下的文字颜色 */
  [data-theme='dark'] .text-ancient-white {
    color: #f4e8d8 !important;
  }

  [data-theme='dark'] .text-ancient-white\/70 {
    color: rgba(244, 232, 216, 0.8) !important;
  }

  [data-theme='dark'] .text-ancient-white\/80 {
    color: rgba(244, 232, 216, 0.9) !important;
  }

  [data-theme='dark'] .text-ancient-white\/40 {
    color: rgba(244, 232, 216, 0.6) !important;
  }

  /* 修改深色模式下琥珀色背景 */
  [data-theme='dark'] .dark\:bg-amber-800\/30 {
    background-color: rgba(100, 50, 20, 0.4) !important;
  }

  [data-theme='dark'] .dark\:border-amber-700\/30 {
    border-color: rgba(160, 80, 30, 0.5) !important;
  }

  /* 黑暗模式下的配色修正 */
  [data-theme='dark'] .border-ancient-accent-dark {
    border-color: rgba(215, 171, 101, 0.6);
  }

  [data-theme='dark'] .text-ancient-accent-dark {
    color: #d7ab65;
  }

  [data-theme='dark'] .bg-ancient-accent-dark {
    background-color: #9b763d;
  }

  [data-theme='dark'] .text-ancient-red-dark {
    color: #e67e56;
  }

  /* 黑暗模式下的卡片内标签 */
  [data-theme='dark'] .bg-ancient-paper-dark/50 {
    background-color: rgba(52, 46, 38, 0.5);
  }

  [data-theme='dark'] .bg-ancient-paper-dark/70 {
    background-color: rgba(52, 46, 38, 0.7);
  }

  [data-theme='dark'] .bg-ancient-paper-dark/90 {
    background-color: rgba(52, 46, 38, 0.9);
  }

  /* 黑暗模式下的城市标签 */
  [data-theme='dark'] .dark\:bg-amber-800\/30 {
    background-color: rgba(146, 64, 14, 0.3);
  }

  [data-theme='dark'] .dark\:border-amber-700\/30 {
    border-color: rgba(180, 83, 9, 0.4);
  }

  /* 黑暗模式下的勾选框 */
  [data-theme='dark'] .checkbox-container,
  [data-theme='dark'] .font-ancient-body.max-h-48 .flex.items-center.group.cursor-pointer .w-4.h-4 {
    border-color: rgba(215, 171, 101, 0.6);
  }

  [data-theme='dark'] .checkbox-selected,
  [data-theme='dark'] .font-ancient-body.max-h-48 .flex.items-center.group.cursor-pointer .w-4.h-4.bg-ancient-accent\/20 {
    background-color: rgba(155, 118, 61, 0.3) !important;
    border-color: rgba(215, 171, 101, 0.8) !important;
  }

  [data-theme='dark'] .checkmark {
    color: #d7ab65;
  }

  /* 黑暗模式下标签的悬停效果 */
  [data-theme='dark'] .tag-item:hover {
    border-color: rgba(215, 171, 101, 0.7) !important;
    background-color: rgba(155, 118, 61, 0.2) !important;
    color: #f5efe2 !important;
  }

  /* 黑暗模式下标签的选中状态 */
  [data-theme='dark'] .tag-selected {
    background-color: rgba(155, 118, 61, 0.25) !important;
    border-color: rgba(215, 171, 101, 0.7) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
    color: rgba(215, 171, 101, 0.9) !important;
  }

  /* 删除暗色模式下选中标签后的彩色点 */
  [data-theme='dark'] .tag-selected::after {
    content: none;
  }

  /* 黑暗模式下卡片标题的悬停效果 */
  [data-theme='dark'] .group-hover\:text-ancient-red-dark {
    color: #e67e56;
  }

  /* 高级悬停效果 */
  [data-theme='dark'] .ancient-card:hover .text-ancient-black\/40 {
    color: rgba(245, 239, 226, 0.6);
  }

  /* 增强卡片阴影渐变效果 */
  [data-theme='dark'] .ancient-card {
    backface-visibility: hidden;
  }

  /* 改善分页控件的黑暗模式样式 */
  [data-theme='dark'] .dark\:bg-ancient-paper-dark\/70 {
    background-color: rgba(52, 46, 38, 0.7);
  }

  [data-theme='dark'] .dark\:bg-ancient-red-dark\/10 {
    background-color: rgba(230, 126, 86, 0.1);
  }

  [data-theme='dark'] .dark\:hover\:bg-ancient-paper-dark:hover {
    background-color: rgba(52, 46, 38, 1);
  }

  /* 卷轴头部背景 */
  .bg-scroll-bg {
    background-color: var(--bg-scroll);
    background-image: linear-gradient(to right, rgba(139, 90, 43, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(139, 90, 43, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* 深色模式下的卷轴背景 */
  .bg-scroll-bg-dark {
    background-color: var(--color-dark-scroll);
    background-image: linear-gradient(to right, rgba(139, 90, 43, 0.1) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(139, 90, 43, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* 水墨效果 - 使用CSS渐变替代图片 */
  .bg-ink-splash {
    background: radial-gradient(ellipse at center, rgba(139, 90, 43, 0.6) 0%, rgba(139, 90, 43, 0) 70%);
  }

  .bg-ink-decoration {
    background: radial-gradient(ellipse at center, rgba(139, 90, 43, 0.5) 0%, rgba(139, 90, 43, 0) 70%);
  }

  .bg-ink-flower {
    background: radial-gradient(ellipse at center, rgba(139, 90, 43, 0.4) 0%, rgba(139, 90, 43, 0) 70%);
  }

  .bg-pattern {
    background-image: linear-gradient(to right, rgba(139, 90, 43, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(139, 90, 43, 0.05) 1px, transparent 1px);
    background-size: 10px 10px;
  }

  /* 自定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(236, 227, 212, 0.2);
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(193, 154, 107, 0.3);
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(193, 154, 107, 0.5);
  }

  /* 标签选中状态样式 */
  .tag-selected::after {
    content: none;
  }

  /* 勾选标记样式 */
  .checkmark {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 8px;
  }

  .checkmark:before, .checkmark:after {
    position: absolute;
    content: '';
    background-color: #d5a021;
  }

  .checkmark:before {
    width: 2px;
    height: 5px;
    top: 1px;
    left: 2px;
    transform: rotate(-45deg);
  }

  .checkmark:after {
    width: 2px;
    height: 8px;
    top: -1px;
    left: 5px;
    transform: rotate(45deg);
  }

  /* 移动端筛选项选中状态强化样式 */
  .mobile-selected {
    background-color: rgba(213, 160, 33, 0.2) !important;
    border-color: rgba(213, 160, 33, 0.8) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    position: relative;
    padding-right: 1.5rem !important;
  }

  .mobile-selected::after {
    content: '✓';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #d5a021;
    font-weight: bold;
  }

  .dark .mobile-selected {
    background-color: rgba(213, 160, 33, 0.3) !important;
    border-color: rgba(213, 160, 33, 0.6) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
  }

  .dark .mobile-selected::after {
    color: rgba(213, 171, 101, 0.9);
  }

  /* 特定类型的移动端筛选项选中状态 */
  .mobile-category-item.mobile-selected,
  .mobile-city-item.mobile-selected,
  .mobile-period-item.mobile-selected,
  .mobile-tag-item.mobile-selected {
    background-color: rgba(180, 83, 9, 0.2) !important;
    border-color: rgba(180, 83, 9, 0.6) !important;
  }

  .dark .mobile-category-item.mobile-selected,
  .dark .mobile-city-item.mobile-selected,
  .dark .mobile-period-item.mobile-selected,
  .dark .mobile-tag-item.mobile-selected {
    background-color: rgba(180, 83, 9, 0.3) !important;
    border-color: rgba(180, 83, 9, 0.6) !important;
  }

  .dark .mobile-category-item.mobile-selected::after,
  .dark .mobile-city-item.mobile-selected::after,
  .dark .mobile-period-item.mobile-selected::after,
  .dark .mobile-tag-item.mobile-selected::after {
    color: rgba(213, 171, 101, 0.9);
  }

  /* 移除所有重复的样式定义 */

  /* 卡片底部区域占据剩余空间 */
  .ancient-card > div:nth-child(2) {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  /* 确保卡片内部元素高度一致 */
  .ancient-card p.text-ancient-black\/80,
  .ancient-card p.dark\:text-ancient-white\/80 {
    min-height: 2.5rem; /* 约为两行文本的高度 */
  }

  /* 确保标签容器高度一致 */
  .ancient-card .flex.flex-wrap.gap-1\.5.mb-4 {
    min-height: 2rem; /* 足够容纳一行标签的高度 */
  }

  /* 查阅详情按钮放在底部 */
  .ancient-card div.flex.items-center.text-ancient-black\/80,
  .ancient-card div.dark\:text-ancient-white\/80 {
    margin-top: auto;
  }

  /* Grid等高卡片设置 */
  .grid.auto-rows-fr {
    grid-auto-rows: 1fr;
  }

  /* 确保ScrollReveal容器也是等高的 */
  .grid.auto-rows-fr > div {
    height: 100%;
    display: flex;
  }

  /* 确保卡片一致高度 */
  .ancient-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    background-color: rgba(248, 245, 232, 0.7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  }

  /* 卡片内容区域 */
  .ancient-card > div:nth-child(2) {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* 卡片标题区域 */
  .ancient-card .mb-3 {
    flex-shrink: 0;
  }

  /* 固定图片区域高度 */
  .ancient-card .aspect-\[5\/4\] {
    flex-shrink: 0;
  }

  /* 描述区域固定高度 */
  .ancient-card p.line-clamp-2 {
    height: 2.5rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex-shrink: 0;
    margin-bottom: 1rem;
  }

  /* 标签区固定高度 */
  .ancient-card .flex.flex-wrap.gap-1\.5.mb-4 {
    height: 2.5rem;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* 城市信息区固定高度 */
  .ancient-card .min-h-\[1\.5rem\] {
    height: 2rem;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* 查阅详情按钮固定在底部 */
  .ancient-card div.flex.items-center.group-hover\:translate-x-1 {
    margin-top: auto;
    flex-shrink: 0;
  }

  /* 确保筛选栏和卡片顶部对齐 */
  @media (min-width: 1024px) {
    .lg\:grid-cols-4 {
      align-items: start;
    }

    .lg\:grid-cols-4 > div:first-child,
    .lg\:grid-cols-4 > div:last-child {
      margin-top: 0;
      padding-top: 0;
    }

    .lg\:grid-cols-4 > div:first-child > div {
      margin-top: 0;
    }
  }

  /* 图片区域暗色模式 */
  [data-theme='dark'] .ancient-card .aspect-\[5\/4\] {
    background-color: rgba(40, 38, 45, 0.8) !important;
  }

  /* 暗色模式下卡片内文字颜色 */
  [data-theme='dark'] .ancient-card h3 {
    color: rgba(235, 220, 200, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

  [data-theme='dark'] .ancient-card:hover h3 {
    color: rgba(245, 230, 210, 0.98);
  }

  [data-theme='dark'] .ancient-card p {
    color: rgba(220, 210, 195, 0.85);
  }

  /* 暗色模式下标签样式 */
  [data-theme='dark'] .ancient-card .tag-item {
    background-color: rgba(50, 45, 55, 0.75);
    border-color: rgba(184, 134, 90, 0.4);
    color: rgba(235, 220, 200, 0.9);
  }

  /* 暗色模式下城市标签样式 */
  [data-theme='dark'] .ancient-card .city-tag {
    background-color: rgba(120, 60, 25, 0.3);
    border-color: rgba(150, 80, 30, 0.4);
    color: rgba(240, 220, 190, 0.85);
  }

  /* 卡片详情查看按钮暗色模式 */
  [data-theme='dark'] .ancient-card div.flex.items-center.text-ancient-black\/80 {
    color: rgba(215, 190, 155, 0.85) !important;
  }

  [data-theme='dark'] .ancient-card:hover div.flex.items-center.text-ancient-black\/80 {
    color: rgba(227, 161, 103, 0.95) !important;
  }


  /* 暗色模式下卡片内标题悬停样式 */
  [data-theme='dark'] .ancient-card .group-hover\:text-ancient-red-dark {
    color: rgba(227, 161, 103, 0.95) !important;
  }

  /* 暗色模式下卡片分类标签 */
  [data-theme='dark'] .ancient-card .category-tag {
    background-color: rgba(50, 45, 55, 0.85) !important;
    border-color: rgba(184, 134, 90, 0.4) !important;
  }

  /* 暗色模式下卡片阴影和边框过渡效果 */
  [data-theme='dark'] .ancient-card:hover {
    transform: translateY(-2px);
  }

  /* 优化暗色模式下卡片装饰元素 */
  [data-theme='dark'] .ancient-card .bg-ink-decoration {
    opacity: 0.15 !important;
  }

  /* 优化暗色模式下卡片内默认标题显示 */
  [data-theme='dark'] .ancient-card .text-ancient-white\/40 {
    color: rgba(236, 215, 185, 0.25) !important;
  }

  /* 优化暗色模式下印章效果 */
  [data-theme='dark'] .ancient-card .bg-seal-mark {
    opacity: 0.3 !important;
  }

  [data-theme='dark'] .ancient-card .image-area {
    background: linear-gradient(to bottom, rgba(28, 26, 32, 0.9), rgba(34, 31, 38, 0.95));
    border-bottom: 1px solid rgba(184, 134, 90, 0.25);
  }

  /* 强制修改卡片在暗色模式下的样式 */
  [data-theme='dark'] .ancient-card {
    background-color: var(--color-dark-card) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(160, 100, 60, 0.35) !important;
  }

  [data-theme='dark'] .ancient-card:hover {
    background-color: var(--color-dark-card) !important;
    border-color: rgba(180, 125, 75, 0.45) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-2px);
  }

  /* 古纸纹理背景 - 添加纹理感的CSS定义 */
  .bg-ancient-paper {
    background-color: var(--bg-paper);
  }

  .bg-ancient-paper-dark {
    background-color: var(--color-dark-paper);
  }

  .bg-ancient-paper-dark-light {
    background-color: rgba(52, 46, 38, 0.5);
  }

  /* 卷轴头部背景 */
  .bg-scroll-bg {
    background-color: var(--bg-scroll);
  }

  /* 深色模式下的卷轴背景 */
  .bg-scroll-bg-dark {
    background-color: var(--color-dark-scroll);
    background-image: linear-gradient(to right, rgba(139, 90, 43, 0.1) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(139, 90, 43, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* 地域分布样式 - 明亮模式 */
  .font-ancient-body.max-h-48 a[href*="?city"]:hover {
    background-color: rgba(251, 191, 36, 0.1);
  }

  .font-ancient-body.max-h-48 a[href*="?city"] .w-4.h-4 {
    border-color: rgba(251, 191, 36, 0.5);
  }

  .font-ancient-body.max-h-48 a[href*="?city"]:hover .w-4.h-4 {
    border-color: rgba(251, 191, 36, 0.8);
    background-color: rgba(251, 191, 36, 0.1);
  }

  .font-ancient-body.max-h-48 a[href*="?city"].bg-amber-100\/80 {
    background-color: rgba(251, 191, 36, 0.15);
  }

  .font-ancient-body.max-h-48 a[href*="?city"].bg-amber-100\/80 .w-4.h-4 {
    border-color: rgba(251, 191, 36, 0.8);
    background-color: rgba(251, 191, 36, 0.2);
  }

  /* 文化分类样式 - 明亮模式 */


  .font-ancient-body.max-h-48 a[href*="?category"]:hover {
    background-color: rgba(139, 90, 43, 0.1);
  }

  .font-ancient-body.max-h-48 a[href*="?category"] .w-4.h-4 {
    border-color: rgba(139, 90, 43, 0.5);
  }

  .font-ancient-body.max-h-48 a[href*="?category"]:hover .w-4.h-4 {
    border-color: rgba(139, 90, 43, 0.8);
    background-color: rgba(139, 90, 43, 0.1);
  }

  .font-ancient-body.max-h-48 a[href*="?category"].bg-ancient-accent\/20 {
    background-color: rgba(139, 90, 43, 0.15);
  }

  .font-ancient-body.max-h-48 a[href*="?category"].bg-ancient-accent\/20 .w-4.h-4 {
    border-color: rgba(139, 90, 43, 0.8);
    background-color: rgba(139, 90, 43, 0.2);
  }

  /* 文化分类样式 - 暗黑模式 */

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?category"]:hover {
    background-color: rgba(215, 171, 101, 0.1);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?category"] .w-4.h-4 {
    border-color: rgba(215, 171, 101, 0.5);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?category"]:hover .w-4.h-4 {
    border-color: rgba(215, 171, 101, 0.8);
    background-color: rgba(215, 171, 101, 0.1);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?category"].bg-ancient-accent\/20 {
    background-color: rgba(215, 171, 101, 0.15);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?category"].bg-ancient-accent\/20 .w-4.h-4 {
    border-color: rgba(215, 171, 101, 0.8);
    background-color: rgba(215, 171, 101, 0.2);
  }

  /* 地域分布样式 - 暗黑模式 */

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?city"]:hover {
    background-color: rgba(180, 83, 9, 0.2);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?city"] .w-4.h-4 {
    border-color: rgba(180, 83, 9, 0.5);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?city"]:hover .w-4.h-4 {
    border-color: rgba(180, 83, 9, 0.8);
    background-color: rgba(180, 83, 9, 0.2);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?city"].bg-amber-100\/80 {
    background-color: rgba(180, 83, 9, 0.25);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?city"].bg-amber-100\/80 .w-4.h-4 {
    border-color: rgba(180, 83, 9, 0.8);
    background-color: rgba(180, 83, 9, 0.3);
  }

  /* 文化分类和地域分布的勾选框基础样式 */
  .font-ancient-body.max-h-48 a[href*="?category"] .w-4.h-4,
  .font-ancient-body.max-h-48 a[href*="?city"] .w-4.h-4 {
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 勾选框选中状态 - 添加勾选图标 */
  .font-ancient-body.max-h-48 a[href*="?category"] .w-4.h-4 div,
  .font-ancient-body.max-h-48 a[href*="?city"] .w-4.h-4 div {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .font-ancient-body.max-h-48 a[href*="?category"] .w-4.h-4 div::before,
  .font-ancient-body.max-h-48 a[href*="?city"] .w-4.h-4 div::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -60%) rotate(45deg);
    opacity: 1;
  }

  /* 文化分类选中状态 */
  .font-ancient-body.max-h-48 a[href*="?category"].bg-ancient-accent\/20 {
    background-color: rgba(139, 90, 43, 0.1);
  }

  .font-ancient-body.max-h-48 a[href*="?category"].bg-ancient-accent\/20 .w-4.h-4 {
    border-color: rgba(139, 90, 43, 0.8);
    color: rgba(139, 90, 43, 0.8);
  }

  /* 地域分布选中状态 */
  .font-ancient-body.max-h-48 a[href*="?city"].bg-amber-100\/80 {
    background-color: rgba(251, 191, 36, 0.1);
  }

  .font-ancient-body.max-h-48 a[href*="?city"].bg-amber-100\/80 .w-4.h-4 {
    border-color: rgba(251, 191, 36, 0.8);
    color: rgba(251, 191, 36, 0.8);
  }

  /* 特色标签样式 */
  .flex.flex-wrap.gap-2 a[href*="?tag"] {
    position: relative;
    overflow: hidden;
  }

  .flex.flex-wrap.gap-2 a[href*="?tag"]:hover {
    background-color: rgba(139, 90, 43, 0.1);
    border-color: rgba(139, 90, 43, 0.5);
  }

  .flex.flex-wrap.gap-2 a[href*="?tag"].border-ancient-accent {
    background-color: rgba(139, 90, 43, 0.15);
    border-color: rgba(139, 90, 43, 0.8);
    color: rgba(139, 90, 43, 1);
    font-weight: 500;
  }

  /* 暗黑模式样式 */
  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?category"].bg-ancient-accent\/20 {
    background-color: rgba(215, 171, 101, 0.15);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?category"].bg-ancient-accent\/20 .w-4.h-4 {
    border-color: rgba(215, 171, 101, 0.8);
    color: rgba(215, 171, 101, 0.8);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?city"].bg-amber-100\/80 {
    background-color: rgba(180, 83, 9, 0.2);
  }

  [data-theme='dark'] .font-ancient-body.max-h-48 a[href*="?city"].bg-amber-100\/80 .w-4.h-4 {
    border-color: rgba(180, 83, 9, 0.8);
    color: rgba(180, 83, 9, 0.8);
  }

  [data-theme='dark'] .flex.flex-wrap.gap-2 a[href*="?tag"]:hover {
    background-color: rgba(215, 171, 101, 0.1);
    border-color: rgba(215, 171, 101, 0.5);
  }

  [data-theme='dark'] .flex.flex-wrap.gap-2 a[href*="?tag"].border-ancient-accent {
    background-color: rgba(215, 171, 101, 0.15);
    border-color: rgba(215, 171, 101, 0.8);
    color: rgba(215, 171, 101, 1);
  }

</style>
