/* 
/* 
 * Modern主题样式文件
 * 作者: subk
 * 包含整个主题的所有CSS样式定义
 */
/* CSS变量定义，便于统一管理和修改主题色 */
:root {
    --primary-color: #409EFF;        /* 主色调：蓝色 */
    --success-color: #67C23A;        /* 成功色：绿色 */
    --warning-color: #E6A23C;        /* 警告色：橙色 */
    --danger-color: #F56C6C;         /* 危险色：红色 */
    --info-color: #909399;           /* 信息色：灰色 */
    --bg-color: #f5f7fa;             /* 背景色 */
    --text-color: #303133;           /* 文字颜色 */
    --border-color: #ebeef5;         /* 边框颜色 */
    --card-bg: #ffffff;              /* 卡片背景色 */
    --shadow-color: rgba(0, 0, 0, 0.1); /* 阴影颜色 */
    /* --- 调整为弹性高度变量 --- */
    --banner-height: 250px;          /* Banner 高度 (保持固定) */
    --search-nav-padding: 20px;      /* 搜索和导航区域的内边距 */
    --search-box-height: 44px;       /* 搜索框高度 */
    --nav-button-height: 40px;       /* 导航按钮高度 */
    --nav-gap: 15px;                 /* 导航按钮间距 */
    /* 彩色图标滤镜 */
    --icon-filter-1: hue-rotate(0deg) saturate(1.5);      /* 原始色相，高饱和 */
    --icon-filter-2: hue-rotate(45deg) saturate(1.5);     /* 旋转45度色相 */
    --icon-filter-3: hue-rotate(90deg) saturate(1.5);     /* 旋转90度色相 */
    --icon-filter-4: hue-rotate(135deg) saturate(1.5);    /* 旋转135度色相 */
    --icon-filter-5: hue-rotate(180deg) saturate(1.5);    /* 旋转180度色相 */
    --icon-filter-6: hue-rotate(225deg) saturate(1.5);    /* 旋转225度色相 */
    --icon-filter-7: hue-rotate(270deg) saturate(1.5);    /* 旋转270度色相 */
    --icon-filter-8: hue-rotate(315deg) saturate(1.5);    /* 旋转315度色相 */
    /* 备用基础背景色 (如果不用filter) */
    --icon-bg-color-1: #409EFF; /* 蓝 */
    --icon-bg-color-2: #67C23A; /* 绿 */
    --icon-bg-color-3: #E6A23C; /* 黄 */
    --icon-bg-color-4: #F56C6C; /* 红 */
    --icon-bg-color-5: #909399; /* 灰 */
    --icon-bg-color-6: #8A2BE2; /* 紫 */
    --icon-bg-color-7: #FF69B4; /* 粉 */
    --icon-bg-color-8: #20B2AA; /* 青 */
}
/* 重置默认样式 */
* {
    margin: 0;                      /* 清除外边距 */
    padding: 0;                     /* 清除内边距 */
    box-sizing: border-box;         /* 使用边框盒模型 */
}

/* 确保 html 和 body 占满整个视口 */
html, body {
    height: 100%;                   /* 高度100% */
    margin: 0;                      /* 清除外边距 */
    padding: 0;                     /* 清除内边距 */
}
/* 页面基础样式 */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;  /* 设置字体族 */
    background-color: var(--bg-color);      /* 页面背景色 */
    color: var(--text-color);               /* 文字颜色 */
    line-height: 1.6;               /* 行高 */
    /* --- 移除初始 padding-top，完全由JavaScript动态控制 --- */
    /* --- 关键修复：不使用flex布局，采用传统布局方式 --- */
    margin: 0;                      /* 确保无外边距 */
    padding: 0;                     /* 重置padding，让fixed-header正确定位 */
}
/* 固定头部区域 */
.fixed-header {
    position: fixed;                /* 固定定位 */
    top: 0;                         /* 顶部对齐 */
    left: 0;                        /* 左侧对齐 */
    width: 100%;                    /* 宽度100% */
    /* --- 修改为自适应高度，基于内容动态计算 --- */
    min-height: calc(var(--banner-height) + 120px); /* 最小高度：Banner + 基础搜索导航区域 */
    height: auto;                   /* 自适应高度 */
    background: white;              /* 背景色 */
    z-index: 1000;                  /* 层级设置，确保在最上层 */
    /* 更柔和的阴影效果 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    /* --- 移除 overflow: hidden，允许内容自然扩展 --- */
    overflow: visible;
    /* --- 添加弹性布局，保证内部元素正确排列 --- */
    display: flex;
    flex-direction: column;
}
/* 顶部Banner区域样式 */
.banner {
    /* --- 调整 Banner 高度为 250px --- */
    height: var(--banner-height);
    /* 背景渐变遮罩 */
    /* 注意：背景图片 URL 由 PHP 动态设置在 index.php 中的 style 属性里 */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
    background-size: cover;         /* 背景图片覆盖整个区域 */
    background-position: center;    /* 背景图片居中显示 */
    display: flex;                  /* 使用弹性布局 */
    align-items: center;            /* 垂直居中 */
    justify-content: center;        /* 水平居中 */
    text-align: center;             /* 文字居中 */
    color: white;                   /* 文字颜色为白色 */
    position: relative;             /* 相对定位 */
    overflow: hidden;               /* 隐藏溢出内容 */
}
/* Banner遮罩层 */
.banner::before {
    content: "";                    /* 伪元素内容为空 */
    position: absolute;             /* 绝对定位 */
    top: 0;                         /* 顶部对齐 */
    left: 0;                        /* 左侧对齐 */
    right: 0;                       /* 右侧对齐 */
    bottom: 0;                      /* 底部对齐 */
    /* --- 调整径向渐变遮罩效果，降低透明度 --- */
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.5) 100%);
}
/* Banner内容区域 */
.banner-content {
    position: relative;             /* 相对定位 */
    z-index: 2;                     /* 层级设置，确保在遮罩层之上 */
    max-width: 800px;               /* 最大宽度 */
    padding: 20px;                  /* 内边距 */
}
/* Banner主标题样式 */
.banner h1 {
    font-size: 2.5rem;                /* 字体大小 */
    margin-bottom: 10px;            /* 下边距 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);  /* 文字阴影效果 */
}
/* Banner副标题样式 */
.banner p {
    font-size: 1.1rem;              /* 字体大小 */
    opacity: 0.9;                   /* 透明度 */
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);   /* 文字阴影效果 */
}
/* 页面内容容器 */
.container {
    max-width: 1200px;              /* 最大宽度 */
    margin: 0 auto;                 /* 水平居中 */
    padding: 20px;                  /* 内边距 */
}
/* 搜索框容器 */
/* 后补充的，用于覆盖父容器解决其宽度较小的问题 */
.fixed-header .search-box {
    max-width: 600px;
    margin: -22px auto 20px;
    width: 100%;
}
/* 后补充的，用于覆盖父容器解决其宽度较小的问题 */
.search-box {
    max-width: 600px;               /* 最大宽度 */
    /* --- 调整搜索框外边距以适应新的布局 --- */
    margin: -22px auto 20px;         /* 外边距：上15px，左右自动，下20px */
    position: relative;             /* 相对定位，用于定位内部的放大镜图标 */
}
/* 搜索输入框样式 */
.search-box input {
    width: 100%;                    /* 宽度100% */
    /* --- 核心修改：为左侧图标预留空间 --- */
    padding: 12px 20px 12px 45px;   /* 内边距：上12px, 右20px, 下12px, 左45px (为图标留空间) */
    font-size: 16px;                /* 字体大小 */
    border: none;                   /* 无边框 */
    border-radius: 50px;            /* 圆角边框 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);  /* 阴影效果 */
    outline: none;                  /* 无轮廓 */
    transition: all 0.3s ease;      /* 过渡动画 */
}
/* --- 新增：在搜索框内创建放大镜图标 --- */
.search-box::before {
    content: "🔍";                  /* 伪元素内容为放大镜图标 */
    position: absolute;             /* 绝对定位 */
    left: 15px;                     /* 距离左侧 15px */
    top: 50%;                       /* 垂直居中 */
    transform: translateY(-50%);     /* 精确垂直居中 */
    font-size: 16px;                /* 图标字体大小 */
    color: var(--text-color);       /* 图标颜色，可以调整 */
    opacity: 0.7;                   /* 图标透明度，使其看起来更像背景 */
    pointer-events: none;           /* 确保图标不会阻挡鼠标事件 */
    z-index: 1;                     /* 确保图标在输入框内容之上 */
}
/* 搜索框获得焦点时的样式 */
.search-box input:focus {
    box-shadow: 0 4px 25px rgba(64, 158, 255, 0.4);  /* 更明显的阴影效果 */
}
/* --- 特别为 fixed-header 内的 .container 添加样式 --- */
.fixed-header > .container {
    width: 100%;              /* 宽度100%，使其撑满整个 fixed-header */
    max-width: 100%;          /* 确保最大宽度也是100% */
    padding: 0 20px;          /* 左右内边距，控制内容与屏幕边缘的距离，可根据需要调整 */
    margin: 0;                /* 移除默认的左右auto margin */
    /* --- 添加弹性布局，使内部元素能够自然排列 --- */
    display: flex;
    flex-direction: column;
    flex: 1; /* 占用剩余空间 */
    /* --- 保持原有的其他样式，如搜索框和分类导航的样式 --- */
}
/* 分类导航栏 */
.category-nav {
    display: flex;                  /* 弹性布局 */
    justify-content: center;        /* 水平居中 */
    /* --- 关键修改：强制不换行 --- */
    flex-wrap: nowrap;             /* 强制不换行 */
    width: 100%;                    /* 确保容器占满宽度 */
    /* --- 可选：处理极窄屏幕或按钮过多的情况 --- */
    overflow-x: auto;               /* 允许水平滚动 */
    /* 隐藏滚动条 (美化) - 适用于 Firefox */
    scrollbar-width: none;
    /* --- 调整项目间距和外边距 --- */
    gap: 15px;                      /* 项目间距 (增大) */
    /* --- 修改为弹性布局中的自然边距 --- */
    margin: 20px 0;                 /* 上下外边距，左右为0 */
    padding: 0 0 20px 0;            /* 内边距：上0，右左为0，下20px */
    /* --- 其他原有样式 ... --- */
}
/* 隐藏 Webkit 浏览器 (Chrome, Safari) 的滚动条 (可选) */
.category-nav::-webkit-scrollbar {
    display: none;
}
/* 隐藏 Webkit 浏览器 (Chrome, Safari) 的滚动条 (可选) */
.category-nav::-webkit-scrollbar {
    display: none;
}
/* 分类按钮样式 */
.category-btn {
    /* --- 调整按钮内边距和字体大小 --- */
    padding: 10px 22px;              /* 内边距 (增大) */
    background: var(--card-bg);     /* 背景色 */
    border: none;                   /* 无边框 */
    border-radius: 30px;            /* 圆角 */
    cursor: pointer;                /* 鼠标指针样式 */
    font-weight: 500;               /* 字体粗细 */
    transition: all 0.3s ease;      /* 过渡动画 */
    box-shadow: 0 2px 8px var(--shadow-color);   /* 阴影效果 */
    /* --- 调整字体大小 --- */
    font-size: 15px;                /* 字体大小 (增大) */
    text-decoration: none;          /* 无下划线 */
    color: inherit;                 /* 继承文字颜色 */
    display: flex;                  /* 使用弹性布局对齐图标和文字 */
    align-items: center;
    gap: 8px; /* 图标和文字间距 (增大) */
    /* 添加 white-space: nowrap 防止按钮文字换行 */
    white-space: nowrap;
}
/* 分类按钮悬停和激活状态 */
.category-btn:hover, .category-btn.active {
    background: var(--primary-color);            /* 背景色变为蓝色 */
    color: white;                   /* 文字颜色为白色 */
    transform: translateY(-2px);    /* 向上移动2px */
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);  /* 更明显的阴影 */
}
/* 页面主要内容区域 - 移除padding-top，使用body的padding-top */
.main-content {
    /* 不再需要额外的padding-top */
}
/* 分类内容区域 */
.category-group {
    margin-bottom: 40px;            /* 下边距 */
}
/* 最后一个分类区域去除下边距 */
.category-group:last-child {
    margin-bottom: 0;
}
/* 搜索结果容器 */
.search-results {
    display: none;                  /* 默认隐藏 */
    margin-bottom: 0;               /* 移除底部边距，确保footer贴底 */
    /* 添加搜索结果区域的动态高度控制 */
    min-height: auto;               /* 最小高度自适应 */
    max-height: none;               /* 最大高度不限制 */
    /* 添加过渡动画 */
    transition: all 0.3s ease;
}

/* 搜索模式下的搜索结果容器 - 确保footer贴底 */
.main-content.search-mode .search-results {
    margin-bottom: 0;               /* 搜索模式下移除底部边距，让footer贴底 */
    flex: 1 0 auto;                 /* 关键修复：让搜索结果容器占用剩余空间 */
}
/* 分类标题栏 */
.category-header {
    display: flex;                  /* 弹性布局 */
    align-items: center;            /* 垂直居中 */
    margin-bottom: 20px;            /* 下边距 */
    padding-bottom: 10px;           /* 下内边距 */
    border-bottom: 2px solid var(--border-color);  /* 底部边框 */
    gap: 12px; /* 图标和文字间距 (增大) */
}
/* 分类标题样式 */
.category-header h2 {
    font-size: 1.5rem;              /* 字体大小 */
    color: var(--text-color);       /* 文字颜色 */
    margin: 0;                      /* 移除默认margin */
    display: flex;                  /* 使用弹性布局对齐图标和文字 */
    align-items: center;
    gap: 12px; /* 图标和文字间距 (增大) */
}
/* 分类描述样式 */
.category-header .category-desc {
    color: var(--info-color);       /* 文字颜色 */
    font-size: 0.9rem;              /* 字体大小 */
    margin: 0;                      /* 移除默认margin */
}
/* 网站链接列表 */
.websites-list {
    display: flex;                  /* 弹性布局 */
    flex-wrap: wrap;                /* 允许换行 */
    gap: 15px;                      /* 项目间距 */
}
/* 单个网站链接项 */
.website-item {
    display: flex;                  /* 弹性布局 */
    align-items: center;            /* 垂直居中 */
    background: var(--card-bg);     /* 背景色 */
    border-radius: 10px;            /* 圆角 */
    padding: 12px 15px;             /* 内边距 */
    transition: all 0.3s ease;      /* 过渡动画 */
    box-shadow: 0 2px 8px var(--shadow-color);   /* 阴影效果 */
    text-decoration: none;          /* 无下划线 */
    color: inherit;                 /* 继承文字颜色 */
    min-width: 200px;               /* 最小宽度 */
    /* 新增：固定宽度和高度 */
    width: 200px;
    height: 60px;
    /* 新增：超出内容隐藏 */
    overflow: hidden;
    /* 新增：相对定位，为提示框定位做准备 */
    position: relative; /* 关键：为伪元素提供定位上下文 */
}
/* 网站链接项悬停效果 */
.website-item:hover {
    transform: translateY(-3px);    /* 向上移动3px */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);   /* 更明显的阴影 */
    /* 移除原来的 overflow: visible 和 z-index，因为我们不改变布局 */
    /* overflow: visible; */
    /* z-index: 100; */
}
/* 网站信息区域 */
.website-info {
    /* 新增：确保信息区域不会超出容器 */
    overflow: hidden; /* 关键：实现省略号效果 */
    flex: 1;
    position: relative; /* 为内部元素定位提供参考 */
    /* 移除原来的悬停相关样式 */
    /* overflow: visible; */
}
/* 网站信息区域标题 */
.website-info h3 {
    font-size: 15px;                /* 字体大小 */
    margin-bottom: 3px;             /* 下边距 */
    white-space: nowrap;            /* 不换行 */
    overflow: hidden;               /* 隐藏溢出内容 */
    text-overflow: ellipsis;        /* 省略号 */
    transition: all 0.3s ease;
    position: relative; /* 关键：为伪元素提供定位上下文 */
    margin: 0; /* 确保没有额外边距影响布局 */
    padding: 0;
    display: block; /* 确保是块级元素以便悬停 */
}
/* 网站信息区域描述 */
.website-info p {
    font-size: 12px;                /* 字体大小 */
    color: var(--info-color);       /* 文字颜色 */
    margin: 0;                      /* 清除外边距 */
    white-space: nowrap;            /* 不换行 */
    overflow: hidden;               /* 隐藏溢出内容 */
    text-overflow: ellipsis;        /* 省略号 */
    transition: all 0.3s ease;
    position: relative; /* 关键：为伪元素提供定位上下文 */
    padding: 0;
    display: block; /* 确保是块级元素以便悬停 */
}
/* --- 新增：悬停时显示完整标题内容 (使用 title 属性) --- */
.website-info h3:hover::after {
    content: attr(title); /* 从 title 属性获取内容 */
    position: absolute;
    left: 0;
    top: 100%; /* 显示在元素下方 */
    background: white; /* 白色背景 */
    border: 1px solid #000; /* 黑色边框 */
    padding: 4px 8px;
    font-size: 12px;
    color: var(--text-color); /* 使用默认文字颜色 */
    z-index: 10; /* 确保在其他元素之上 */
    width: max-content;
    max-width: 250px; /* 限制最大宽度 */
    word-break: break-all; /* 允许长单词换行 */
    line-height: 1.4;
    box-shadow: none; /* 无阴影 */
    border-radius: 0; /* 无圆角 */
    pointer-events: none; /* 防止提示框干扰鼠标事件 */
}
/* --- 新增：悬停时显示完整描述内容 (使用 title 属性) --- */
.website-info p:hover::after {
    content: attr(title); /* 从 title 属性获取内容 */
    position: absolute;
    left: 0;
    top: 100%; /* 显示在元素下方 */
    background: white; /* 白色背景 */
    border: 1px solid #000; /* 黑色边框 */
    padding: 4px 8px;
    font-size: 12px;
    color: var(--info-color); /* 使用描述文字颜色 */
    z-index: 10; /* 确保在其他元素之上 */
    width: max-content;
    max-width: 250px; /* 限制最大宽度 */
    word-break: break-all; /* 允许长单词换行 */
    line-height: 1.4;
    box-shadow: none; /* 无阴影 */
    border-radius: 0; /* 无圆角 */
    pointer-events: none; /* 防止提示框干扰鼠标事件 */
}
/* 网站图标容器 */
.website-icon {
    width: 36px;                    /* 宽度 */
    height: 36px;                   /* 高度 */
    /* 移除固定的背景色，让滤镜效果更明显 */
    /* background: var(--primary-color); */
    background: transparent; /* 默认背景透明 */
    border-radius: 8px;             /* 圆角 */
    /* --- 确保使用 Flexbox 居中内容 --- */
    display: flex;                  /* 弹性布局 */
    align-items: center;            /* 垂直居中 */
    justify-content: center;        /* 水平居中 */
    /* --- 确保内容不被压缩 --- */
    flex-shrink: 0;
    margin-right: 12px;             /* 右边距 */
    /* 文字样式 (针对首字母) */
    font-size: 16px;
    color: #333; /* 深色文字 */
    font-weight: bold;
    overflow: hidden;               /* 隐藏溢出内容 */
    /* 添加过渡动画 */
    transition: filter 0.3s ease, background-color 0.3s ease;
}
/* 网站图标图片样式 (针对网站favicon) */
.website-icon img {
    /* --- 保持图片原始尺寸，例如 16x16, 32x32 --- */
    width: auto;
    height: auto;
    max-width: 100%;  /* 确保图片不会超出容器 */
    max-height: 100%; /* 确保图片不会超出容器 */
    /* 将图片在容器内居中 */
    display: block; /* 使 margin: auto 生效 */
    margin: auto;
}
/* --- 彩色图标核心样式 --- */
/* 为包含文本（首字母）的 .website-icon 应用基础背景色 */
.website-icon:not(:has(> img)):not(:empty) { /* 选择不包含img子元素但非空的 .website-icon */
    /* 使用 CSS 变量定义一组基础背景色 */
    background-color: var(--icon-bg-color, var(--primary-color)); /* 默认使用主题主色 */
    color: white; /* 白色文字 */
}
/* 为不同的网站图标应用不同的背景色 */
/* 使用 websites-list 下的 .website-item 的 nth-child 来选择不同的图标 */
.websites-list .website-item:nth-child(8n+1) .website-icon:not(:has(> img)):not(:empty) {
    --icon-bg-color: var(--icon-bg-color-1);
}
.websites-list .website-item:nth-child(8n+2) .website-icon:not(:has(> img)):not(:empty) {
    --icon-bg-color: var(--icon-bg-color-2);
}
.websites-list .website-item:nth-child(8n+3) .website-icon:not(:has(> img)):not(:empty) {
    --icon-bg-color: var(--icon-bg-color-3);
}
.websites-list .website-item:nth-child(8n+4) .website-icon:not(:has(> img)):not(:empty) {
    --icon-bg-color: var(--icon-bg-color-4);
}
.websites-list .website-item:nth-child(8n+5) .website-icon:not(:has(> img)):not(:empty) {
    --icon-bg-color: var(--icon-bg-color-5);
}
.websites-list .website-item:nth-child(8n+6) .website-icon:not(:has(> img)):not(:empty) {
    --icon-bg-color: var(--icon-bg-color-6);
}
.websites-list .website-item:nth-child(8n+7) .website-icon:not(:has(> img)):not(:empty) {
    --icon-bg-color: var(--icon-bg-color-7);
}
.websites-list .website-item:nth-child(8n+8) .website-icon:not(:has(> img)):not(:empty) {
    --icon-bg-color: var(--icon-bg-color-8);
}

/* 响应式设计 - 平板及以下设备 */
@media (max-width: 768px) {
    :root {
        /* --- 移动端优化变量 --- */
        --banner-height: 180px;       /* 移动端 Banner 高度 (减小) */
        --nav-gap: 10px;              /* 移动端导航按钮间距 */
    }
    /* 调整body padding，移除固定值，由JavaScript动态控制 */
    /* body {
        padding-top: calc(var(--banner-height) + 100px);
    } */
    /* Banner高度调整 */
    .banner {
        height: var(--banner-height);
    }
    /* Banner主标题字体大小调整 */
    .banner h1 {
        font-size: 2rem;
    }
    /* Banner副标题字体大小调整 */
    .banner p {
        font-size: 1rem;
    }
    /* 搜索框外边距调整 (移动端也需要调整负边距) */
    .search-box {
        margin: -20px auto 20px; /* 调整移动端外边距 */
    }
    /* --- 移动端分类导航栏调整 --- */
    .category-nav {
        /* 在移动端允许换行以适应小屏幕 */
        flex-wrap: wrap;
        gap: var(--nav-gap); /* 使用变量控制间距 */
        margin: 15px 0;      /* 移动端更小的外边距 */
        padding: 0 0 15px 0; /* 移动端更小的内边距 */
        /* 移动端可以显示滚动条，方便用户知道可以滚动 */
        overflow-x: auto;
        scrollbar-width: thin; /* Firefox 显示细滚动条 */
    }
    /* 移动端显示细滚动条 (Webkit) */
    .category-nav::-webkit-scrollbar {
        height: 3px;
    }
    .category-nav::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.1);
        border-radius: 3px;
    }
    .category-nav::-webkit-scrollbar-thumb {
        background: var(--primary-color);
        border-radius: 3px;
    }
    /* 分类按钮内边距和字体大小调整 */
    .category-btn {
        padding: 8px 16px; /* 调整移动端内边距 */
        font-size: 14px;   /* 调整移动端字体大小 */
        /* 移动端保持不换行 */
        white-space: nowrap;
        flex-shrink: 0;    /* 防止按钮被压缩 */
    }
    /* 网站链接项最小宽度调整 */
    .website-item {
        min-width: 100%;
        /* 移动端适配：移除固定宽度，使用100%宽度 */
        width: 100%;
        /* 保持高度不变 */
        height: 60px;
    }
    /* --- 新增：移动端可能不需要悬停提示，可以隐藏 --- */
    .website-info h3:hover::after,
    .website-info p:hover::after {
        display: none; /* 在小屏幕上禁用悬停提示 */
    }
    /* 分类标题栏调整为垂直布局 */
    .category-header {
        flex-direction: column;
        align-items: flex-start;
    }
    /* 分类标题下边距调整 */
    .category-header h2 {
        margin-bottom: 5px;
    }
    /* 容器内边距调整 */
    .container {
        padding: 15px;
    }
    /* 移动端悬停效果调整 - 移除旧的悬停样式 */
    /*
    .website-item:hover .website-info h3,
    .website-item:hover .website-info p {
        position: static;
        box-shadow: none;
        background: transparent;
    }
    */
}

/* 页面包装器，用于处理 flex 布局 */
.page-wrapper {
    display: flex;
    flex-direction: column;
    /* --- 关键修复：确保page-wrapper占满剩余视口高度 --- */
    min-height: calc(100vh - var(--banner-height) - 120px); /* 减去固定头部的最小高度 */
}

/* 主要内容占用可用空间 */
.main-content {
    /* --- 关键修复：让main-content在page-wrapper内部占用剩余空间 --- */
    flex: 1 0 auto; /* 在page-wrapper内部占用剩余空间，保证footer在底部 */
    /* 添加搜索模式的特殊处理 */
    transition: none; /* 移除过渡效果，避免布局闪烁 */
    /* --- 确保在内容不足时能够撑满page-wrapper --- */
    min-height: 0;
}

/* 搜索模式下的主要内容区域 - 关键修复 */
.main-content.search-mode {
    flex: 1 0 auto; /* 搜索模式下仍然占用剩余空间，确保footer贴底 */
}

/* 搜索模式下的page-wrapper - 关键修复 */
.main-content.search-mode ~ footer {
    margin-top: auto; /* 确保footer在搜索模式下也能贴底 */
}

/* 搜索模式下的容器样式优化 - 减少底部内边距 */
.main-content.search-mode .container {
    padding-bottom: 10px;           /* 搜索模式下减少底部内边距 */
}

/* 页脚保持在底部 */
footer {
    flex-shrink: 0;                 /* 防止页脚缩减 */
    text-align: center;             /* 文字居中 */
    padding: 30px 0;                /* 上下内边距 */
    /* --- 关键修复：移除所有margin，确保footer紧贴内容 --- */
    margin: 0;                      /* 确保无外边距 */
    /* --- 修改背景色 --- */
    background: #2C3E50;            /* 设置背景色为 #2C3E50 */
    /* --- 修改文字颜色 --- */
    color: var(--info-color);       /* 设置默认文字颜色为灰色 */
}

/* --- 为 footer 内的链接添加特殊样式 --- */
footer a {
    /* 继承父元素 (footer) 的颜色 */
    color: inherit;
    /* 去除下划线 */
    text-decoration: none;
}

/* --- 为 footer 内的链接添加悬停效果 (可选) --- */
footer a:hover {
    /* 可以稍微调整颜色或添加下划线表示悬停 */
    /* 例如，稍微提亮颜色: */
    /* color: #b0b0b0; */
    /* 或者添加下划线: */
    text-decoration: underline;
    /* 这里我们先不加特殊悬停效果，保持简洁 */
}