/* 主题样式 - 可能经常修改的部分 */

/* 定义主题CSS变量 */
:root {
    /* 默认主题变量 */
    --bg-color: #f8fafc;
    --text-color: #334155;
    --header-bg: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    --sidebar-bg: #fff;
    --sidebar-text-color: #334155;
    --sidebar-hover-bg: #f0fdfa;
    --sidebar-hover-text: #0d9488;
    --sidebar-active-bg: #0d9488;
    --sidebar-active-text: white;
    --card-bg: #ffffff;
    --card-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    --card-hover-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --border-color: #e2e8f0;
    --footer-text-color: #64748b;
    --footer-link-color: #0d9488;
    --icon-color: #334155;
    --icon-hover-color: #0d9488;
    --font-family: 'Inter', 'Roboto', 'Noto Sans SC', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}



/* 暖色阅读主题 */
.theme-warm-reading {
    --bg-color: #f5f0e6;
    --text-color: #333333;
    --header-bg: linear-gradient(135deg, #d4c4a8 0%, #c7b391 100%);
    --sidebar-bg: #f5f0e6;
    --sidebar-text-color: #333333;
    --sidebar-hover-bg: #e8dccd;
    --sidebar-hover-text: #8b4513;
    --sidebar-active-bg: #8b4513;
    --sidebar-active-text: white;
    --card-bg: #f9f4e9;
    --card-shadow: 0 1px 2px 0 rgba(139,69,19,0.1);
    --card-hover-shadow: 0 4px 6px -1px rgba(139,69,19,0.15), 0 2px 4px -1px rgba(139,69,19,0.1);
    --border-color: #e8dccd;
    --footer-text-color: #6b5b47;
    --footer-link-color: #8b4513;
    --icon-color: #333333;
    --icon-hover-color: #8b4513;
    --font-family: Georgia, 'Times New Roman', serif;
}





/* 基础样式 */
body {
    font-family: var(--font-family);
    line-height: 1.5;
    background: var(--bg-color);
    margin: 0;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    color: var(--text-color);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 图标样式 */
.icon, img {
    color: var(--icon-color);
    fill: var(--icon-color);
    stroke: var(--icon-color);
}

img[width="16"][height="16"],
img.h-4.w-4,
img.inline-block.h-4.w-4 {
    color: var(--icon-color);
    fill: var(--icon-color);
    stroke: var(--icon-color);
    transition: color 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
}

.side-nav a:hover img,
.cursor-pointer.rounded-lg.bg-white.shadow-sm:hover img {
    color: var(--icon-hover-color);
    fill: var(--icon-hover-color);
    stroke: var(--icon-hover-color);
}

/* 优化标题字体 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family);
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
}

/* 优化中文字体显示 */
h1, h2, h3, h4, h5, h6, p, div, span, a {
    font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 针对中文标题的特殊处理 */
h1 {
    font-size: 1.5rem;
    line-height: 1.3;
}

h2 {
    font-size: 1.25rem;
    line-height: 1.35;
}

h3 {
    font-size: 1.125rem;
    line-height: 1.4;
}

h4 {
    font-size: 1rem;
    line-height: 1.4;
}

h5 {
    font-size: 0.9375rem;
    line-height: 1.45;
}

h6 {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* 分类标题特殊样式 */
.flex.items-center.text-sm.leading-8.text-gray-900 h2 a {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.4;
    text-decoration: none !important;
}

/* 侧边栏标题样式 */
.side-nav a span {
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 400;
}

/* 卡片标题样式 */
.truncate.text-sm.font-semibold.text-gray-700 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.4;
    margin-bottom: 0;
    margin-top: 0;
}

/* 阴影样式优化 */
.search-box {
    box-shadow: var(--card-hover-shadow);
}

.cursor-pointer.rounded-lg.bg-white.shadow-sm {
    box-shadow: var(--card-shadow);
}

.cursor-pointer.rounded-lg.bg-white.shadow-sm:hover {
    box-shadow: var(--card-hover-shadow);
}

.side-bar {
    box-shadow: var(--card-hover-shadow);
    z-index: 1;
}

/* 优化段落字体 */
p {
    font-family: var(--font-family);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-color);
}

/* 优化卡片描述文字 */
.text-xs.text-gray-500 {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #64748b;
    font-weight: 400;
}

/* 优化侧边栏文字 */
.side-nav a {
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 400;
    color: var(--sidebar-text-color);
}

/* 优化侧边栏悬停文字 */
.side-nav a:hover {
    color: var(--sidebar-hover-text);
    font-weight: 500;
}

/* 优化侧边栏激活文字 */
.side-nav a.active {
    color: var(--sidebar-active-text);
    font-weight: 500;
}

/* 优化页脚文字 */
footer a, footer p {
    color: var(--footer-text-color);
    font-weight: 400;
}

footer a:hover {
    color: var(--footer-link-color);
    font-weight: 500;
}

/* 优化搜索框文字 */
.search-box {
    color: white;
}

.search-bar input {
    color: #334155;
    font-weight: 400;
    font-family: var(--font-family);
}

/* 首页图标样式 - 与卡片保持一致 */
.cursor-pointer.rounded-lg.bg-white.shadow-sm .flex.h-4.w-4.items-center.justify-center.rounded-lg.border {
    border-color: var(--border-color);
    background-color: var(--card-bg);
    border-radius: 0.5rem; /* 与卡片保持一致的圆角 */
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* 与卡片一致的轻微阴影 */
}

.cursor-pointer.rounded-lg.bg-white.shadow-sm:hover .flex.h-4.w-4.items-center.justify-center.rounded-lg.border {
    background-color: var(--sidebar-hover-bg);
    border-color: var(--sidebar-hover-text);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); /* 悬停时与卡片一致的阴影 */
}

/* 分类标题样式 */
div.px-4 > div.flex.items-center.text-sm.leading-8.text-gray-900.space-x-2.mb-0 {
    margin-top: 0.0rem;
    margin-bottom: 0.3rem;
}

/* 首页横幅图片样式 */
.image-container {
    padding-left: 0.6rem;  /* 与卡片网格的pl-3一致 */
    padding-right: 0.75rem; /* 缩短右边距为原来的一半 */
    margin-bottom: 0.3rem; /* 与卡片网格的pb-8保持适当的间距 */
    /* 与卡片样式保持一致 */
    border-radius: 0.5rem; /* 与卡片保持一致的圆角 */
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    background-color: var(--card-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px; /* 与卡片最小高度一致 */
    overflow: hidden; /* 确保内容不超出圆角边界 */
}

.image-container img {
    border-radius: 0.5rem; /* 与卡片保持一致的圆角 */
    transition: all 0.3s ease;
    max-width: 100%;
    height: auto;
    object-fit: contain; /* 保持图片比例，避免压缩变形 */
    display: block; /* 确保图片作为块级元素居中 */
    margin: 0 auto; /* 图片在容器内居中 */
    padding: 0.75rem; /* 与卡片内容区相似的内边距 */
}

.image-container:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(2px);
}

.image-container img:hover {
    box-shadow: none; /* 避免双重阴影 */
}

/* 移动端适配 */
@media (max-width: 768px) {
    .image-container {
        padding-left: 0.5rem;  /* 与卡片网格边距保持一致 */
        padding-right: 0.5rem; /* 与卡片网格边距保持一致 */
        margin-bottom: 0.5rem; /* 与卡片网格边距保持一致 */
        width: calc(100% - 1rem); /* 考虑边距后的全宽 */
        margin-left: 0.5rem; /* 左边距与卡片对齐 */
    }
    
    .grid.grid-cols-1.gap-4.px-4.pb-8 {
        padding-left: 0.5rem !important;  /* 移动端卡片网格左边距，与图片容器对齐 */
        padding-right: 0.5rem !important; /* 移动端卡片网格右边距，与图片容器对齐 */
        padding-bottom: 2rem !important; /* 移动端卡片网格底部边距 */
    }
    
    /* 移动端侧边栏滚动 */
    .side-bar {
        width: 16rem; /* 移动端稍宽一些以适应内容 */
        transition: transform 0.3s ease; /* 添加滑动动画 */
    }
    
    .side-bar-content-wrapper {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* 使滚动更流畅 */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .image-container {
        padding-left: 0.75rem;  /* iPad端使用标准边距 */
        padding-right: 1.25rem; /* iPad端使用稍小的右边距 */
        margin-bottom: 1.5rem;
    }
    
    .grid.grid-cols-1.gap-4.px-4.pb-8 {
        padding-left: 0.75rem !important;  /* iPad端卡片网格左边距 */
        padding-right: 1.25rem !important; /* iPad端卡片网格右边距 */
        padding-bottom: 2rem !important; /* iPad端卡片网格底部边距 */
    }
}


/* 主题选择器样式 */
#theme-selector {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text-color);
    border-color: var(--border-color);
}

#theme-selector:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

#theme-selector option {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text-color);
}

#theme-selector option:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

/* 侧边栏样式 */
.side-bar {
    width: 14rem;
    border-left-width: 4px;
    border-color: var(--sidebar-active-bg); /* teal-600 */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 1;
    height: 100vh; /* 确保高度为视口高度 */
    min-height: 100vh; /* 确保最小高度 */
    flex: none; /* 禁用flex伸缩 */
}

/* 侧边栏内容包装器：用于控制内容和版权信息的布局 */
.side-bar-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* 防止横向滚动 */
    overflow-y: auto;
}

.logo-box {
    height: 8rem; /* 增加高度以提供更好的空间 */
    width: 100%; 
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 改为左对齐 */
    justify-content: center; /* 垂直居中 */
    color: #0f766e; /* teal-700 */
    padding-top: 1.25rem; /* 增加顶部内边距 */
    padding-bottom: 1.25rem; /* 增加底部内边距 */
    padding-left: 0.5rem; /* 添加左内边距，与菜单项对齐 */
    /* border-bottom: 1px solid #e2e8f0; */
}

/* 使 logo 副标题（ruance.tech）居中 */
.logo-box h5 {
    /* align-self: center; 单独使 h5 元素居中 */
    width: 100%; /* 确保 h5 元素占据整个宽度以正确居中 */
    /* text-align: center; 文字居中 */
    width: calc(100% - 6rem); /* 调整宽度以与菜单项对齐 */
    text-align: left; /* 左对齐，与菜单项对齐 */
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

/* 调整软测Hub标题的样式 */
.logo-box h1 {
    font-size: 1.875rem; /* text-sm大小，比原来的text-lg小两个字号 */
    font-weight: 400; /* font-normal */
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    width: calc(100% - 3.5rem); /* 调整宽度以与菜单项对齐 */
    text-align: left; /* 左对齐，与菜单项对齐 */
    padding-left: 0.5rem; /* 与菜单项对齐 */
    margin-left: 0; /* 确保左边距为0 */
}

.logo {
    width: 40px; /* 减小宽度 */
    height: 40px; /* 减小高度 */
    background: #0d9488; /* teal-600 */
    border-radius: 0.375rem; /* 减小圆角 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1rem; /* 减小字体 */
    margin-bottom: 0.25rem; /* 减少底部边距 */
}

.text-gray-700 {
    color: #374151;
}

.text-slate-500 {
    color: #64748b;
}

.text-white {
    color: #fff;
}

.text-gray-500 {
    color: #64748b;
}

/* 修改ml-3类定义为0.5rem */
.ml-3 {
    margin-left: 0.5rem;
}

/* 侧边栏导航链接样式 */
.side-nav a {
    font-size: 0.875rem; /* 根据附件规范 */
    line-height: 1.5rem; /* 增加行高以改善视觉效果 */
    padding: 0.5rem 0.75rem; /* 调整内边距 */
    display: block;
    border-radius: 0.375rem; /* 增加圆角以提升视觉效果 */
    margin: 0.375rem 0.5rem; /* 增加外边距以改善间距 */
    transition: all 0.2s ease;
    color: var(--sidebar-text-color);
    text-decoration: none;
    white-space: nowrap; /* 防止文本换行 */
    overflow: hidden; /* 隐藏溢出文本 */
    text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}

/* 特定菜单项调整：将'软件测试理论'菜单项向上移动 - 已移除，避免横向滚动问题 */
/* 
.side-nav a[href="#软件测试理论"] {
    position: relative;
    top: -25px;  
    margin-bottom: -25px;  
} 
*/

/* 确保侧边栏导航链接内的元素有适当的间距 */
.side-nav a.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
}

.side-nav a:hover {
    background-color: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
}

.side-nav a.active {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
}

/* 主内容区域 */
.main-container {
    margin-left: 14rem;
    margin-right: 0.75rem; /* 保持右边距与左边距对称 */
    width: calc(100% - 14.75rem);
    padding: 0.75rem; /* 减少内边距 */
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}

/* 搜索框样式：页面顶部的搜索区域 */
.search-box {
    /* 背景渐变：从深青色到浅青色 */
    background: var(--header-bg);
    /* 圆角设置：0.875rem */
    border-radius: 0.875rem;
    /* 阴影效果：青色阴影 */
    box-shadow: 0 8px 12px -2px rgba(13, 148, 136, 0.18), 0 4px 6px -4px rgba(13, 148, 136, 0.15);
    /* 外边距：减少外边距以与侧边栏对齐 */
    margin: 0.5rem;
    /* 内边距：1.5rem */
    padding: 1.5rem;
}

/* 搜索栏样式：搜索框内的输入区域 */
.search-bar {
    /* 定位设置：相对定位 */
    position: relative;
    /* 布局设置：弹性盒子 */
    display: flex;
    /* 高度设置：3rem */
    height: 3rem;
    /* 对齐方式：垂直居中 */
    align-items: center;
    /* 圆角设置：0.75rem */
    border-radius: 0.75rem;
    /* 边框设置：半透明白色边框 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 背景颜色：半透明白色 */
    background-color: rgba(255, 255, 255, 0.15);
    /* 内边距：0.5rem */
    padding: 0.5rem;
    /* 宽度设置：100% */
    width: 100%;
    /* 最大宽度：600px */
    max-width: 600px;
    /* 背景模糊效果：10px */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* 过渡效果：0.3秒平滑过渡 */
    transition: all 0.3s ease;
}

.search-bar:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.3);
}

.search-bar button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    color: #0d9488;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    width: 2.5rem;
    height: 2.5rem;
    transition: all 0.2s ease;
}

.search-bar button:hover {
    background-color: #f0fdfa;
    transform: scale(1.05);
}

/* 分类标题样式：文档分类的标题区域 */
.flex.items-center.text-sm.leading-8.text-gray-900 {
    /* 顶部外边距：0 (消除多余间距) */
    margin-top: 0;
    /* 底部外边距：0 (紧贴卡片) */
    margin-bottom: 0; /* 进一步减少底部边距 */
    /* 底部内边距：0 */
    padding-bottom: 0;
    /* 减小行高以减少垂直空间 */
    line-height: 1;
    /* 底部边框：已注释的浅灰色边框 */
    /* border-bottom: 1px solid #e2e8f0; */
    /* 确保左对齐 - 参考默认数据模板对齐 */
    margin-left: 0.25rem; /* 调整左边距，与卡片对齐 */
    padding-left: 0; /* 确保左内边距为0 */
    /* 减少高度，移除多余的行高 */
    height: auto; /* 移除固定高度，使用内容自适应 */
    min-height: auto; /* 移除最小高度限制 */
    /* 调整flex子项对齐 */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    /* 确保所有子元素垂直居中对齐 */
    align-items: center !important; /* 改为居中对齐 */
    /* 减少顶部内边距 */
    padding-top: 0;
    /* 减少整体边距 */
    margin: 0;
    /* 确保内容溢出时隐藏 */
    overflow: hidden;
    /* 确保容器垂直对齐 */
    vertical-align: middle;
}

/* 确保标题区域内的元素有适当的间距 */
.flex.items-center.text-sm.leading-8.text-gray-900.space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
}

/* 确保卡片内副标题区域的元素有适当的间距 */
.flex.items-center.space-x-3.w-full > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * (1 - var(--tw-space-x-reverse)));
}

.flex.items-center {
    align-items: center;
}

/* 分类标题链接样式：分类标题中的锚点链接 */
.flex.items-center.text-sm.leading-8.text-gray-900 h2 a {
    /* 文字颜色：灰色700 (与侧边栏保持一致) */
    color: #374151;
    /* 文本装饰：无下划线 */
    text-decoration: none !important;
    /* 字体粗细：600（半粗体） */
    font-weight: 600;
    /* 字体大小：0.875rem (与侧边栏保持一致) */
    font-size: 0.875rem;
    /* 垂直对齐：底部对齐 */
    vertical-align: bottom;
    /* 调整垂直位置 */
    align-self: flex-end;
    /* 移除底部外边距，确保紧贴底部 */
    margin-bottom: 0;
    /* 确保标题文本也对齐到底部 */
    display: inline-block;
    vertical-align: bottom;
    align-self: flex-end;
}

/* 分类标题h2元素样式：确保标题文本对齐到底部 */
.flex.items-center.text-sm.leading-8.text-gray-900 h2 {
    /* 调整垂直对齐 */
    vertical-align: bottom !important;
    align-self: flex-end !important;
    margin-bottom: 0;
    display: inline;
    /* 确保与图标底部对齐 */
    line-height: 1;
    padding-bottom: 0;
    /* 确保与相邻元素底部对齐 */
    align-self: flex-end !important;
}

/* 添加更明确的链接样式规则 */
.no-underline {
    text-decoration: none !important;
}

.hover\:no-underline:hover {
    text-decoration: none !important;
}

.focus\:no-underline:focus {
    text-decoration: none !important;
}

.visited\:no-underline:visited {
    text-decoration: none !important;
}

.flex.items-center.text-sm.leading-8.text-gray-900 .flex-shrink-0 {
    flex-shrink: 0;
    /* 确保图标底部对齐 */
    align-self: flex-end !important;
    vertical-align: bottom !important;
}

/* 针对分类标题中的图片进行底部对齐 */
.flex.items-center.text-sm.leading-8.text-gray-900 img {
    vertical-align: bottom !important;
    align-self: flex-end !important;
    margin-bottom: 0 !important;
}

/* 分类标题链接悬停效果：鼠标悬停时的颜色变化 */
.flex.items-center.text-sm.leading-8.text-gray-900 h2 a:hover {
    /* 文字颜色：青色 */
    color: #0d9488;
}

/* 文档卡片样式：包含文档图标、标题和描述的容器 */
.cursor-pointer.rounded-lg.bg-white.shadow-sm {
    /* 圆角设置：0.5rem */
    border-radius: 0.5rem;
    /* 阴影效果：轻微阴影 */
    box-shadow: var(--card-shadow);
    /* 边框设置：1px浅灰色边框 */
    border: 1px solid var(--border-color);
    /* 过渡效果：0.2秒平滑过渡 */
    transition: all 0.2s ease;
    /* 高度设置：100%填充父容器 */
    height: 100%;
    /* 布局设置：弹性盒子垂直布局 */
    display: flex;
    flex-direction: column;
    /* 统一卡片最小高度，确保内容显示完整且美观 */
    min-height: 100px;
    /* 确保内容正确对齐 */
    align-items: stretch;
    /* 固定卡片高度以确保统一性 */
    height: auto;
    /* 确保圆角效果 */
    overflow: hidden; /* 确保内容不超出圆角边界 */
    /* 使用主题背景色 */
    background-color: var(--card-bg);
}

/* 卡片悬停效果：鼠标悬停时的视觉反馈 */
.cursor-pointer.rounded-lg.bg-white.shadow-sm:hover {
    /* 位移效果：向下移动2px */
    transform: translateY(2px);
    /* 阴影增强：增加阴影效果 */
    box-shadow: var(--card-hover-shadow);
    /* 边框颜色变化：加深边框颜色 */
    border-color: var(--border-color);
}

/* 卡片内容容器样式 */
.relative.flex.items-center.p-3 {
    /* 确保内容在容器中正确对齐 */
    display: flex;
    align-items: center;
    padding: 0.75rem; /* 与模板中的p-3类保持一致 */
    padding-left: 1rem; /* 与模板中的pl-4类保持一致 */
    /* 使用 auto 宽度而不是 100%，避免过度拉伸 */
    width: 100%; /* 保持100%宽度，但通过内部元素控制布局 */
    /* 确保容器在 flex 布局中正确表现 */
    min-width: 0; /* 允许容器收缩 */
}

/* 图标容器样式：文档卡片中图标的容器 */
.flex.h-4.w-4.items-center.justify-center.rounded-lg.border.border-gray-100.p-1 {
    /* 宽度设置：1rem */
    width: 1rem;
    /* 高度设置：1rem */
    height: 1rem;
    /* 圆角设置：0.5rem */
    border-radius: 0.5rem;
    /* 边框设置：1px浅灰色边框 */
    border: 1px solid #e2e8f0;
    /* 内边距：0.25rem */
    padding: 0.25rem;
    /* 收缩属性：不允许收缩 */
    flex-shrink: 0;
    /* 垂直居中对齐 */
    align-self: center;
    /* 确保图标垂直对齐 */
    vertical-align: middle;
    /* 添加对齐基线 */
    align-items: center;
    display: flex;
    justify-content: center;
    /* 确保在flex容器中正确对齐 */
    margin: auto 0;
    /* 确保行高一致 */
    line-height: 1;
    /* 确保基线对齐 */
    baseline-shift: 0;
}

/* 增加更具体的选择器以确保样式优先级 */
.relative.flex.items-center .flex.h-4.w-4.items-center.justify-center.rounded-lg.border.border-gray-100.p-1 {
    width: 1rem;
    height: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    padding: 0.25rem;
    flex-shrink: 0;
    align-self: center;
    vertical-align: middle;
    align-items: center;
    display: flex;
    justify-content: center;
    margin: auto 0;
}

/* 副标题容器样式：包含副标题图标和副标题的容器 */
.ml-2.flex.flex-col.overflow-hidden {
    margin-left: 0.5rem; /* 左侧外边距：0.5rem，增加间距 */
    flex: 1 1 auto; /* 弹性盒子：自动调整大小，不占据所有剩余空间 */
    justify-content: center; /* 垂直居中对齐 */
    /* 确保标题垂直对齐 */
    vertical-align: middle;
    /* 添加对齐基线 */
    align-self: center;
    display: flex;
    align-items: center;
    /* 确保最小高度以保持对齐 */
    min-height: 1rem;
    /* 确保行高一致 */
    line-height: 1;
    /* 确保基线对齐 */
    baseline-shift: 0;
    /* 设置最小高度以改善布局 */
    min-height: 2.5rem;
    /* 优化左右布局 */
    flex-direction: row;
    max-width: calc(100% - 2rem); /* 限制最大宽度，避免占用过多空间 */
}

/* 修复卡片内副标题容器的溢出问题 */
.overflow-hidden {
    overflow: hidden;
    max-width: 100%; /* 确保不超出容器宽度 */
}

/* 修复卡片内容容器的布局 */
.flex.items-center.space-x-2.w-full {
    width: 100%;
    flex-wrap: nowrap; /* 防止换行 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 优化副标题容器在卡片中的显示 */
.relative.flex.items-center .overflow-hidden {
    min-width: 0; /* 允许flex项目收缩到内容大小以下 */
    flex: 1; /* 占据可用空间 */
}

/* 确保卡片内图标和标题之间的间距一致 */
.relative.flex.items-center .ml-2.flex.flex-col.overflow-hidden {
    margin-left: 0.5rem; /* 与space-x-2的间距保持一致 */
    line-height: 1;
    baseline-shift: 0;
    /* 优化左右布局 */
    flex-direction: row;
}

/* 增加更具体的选择器以确保样式优先级 */
.relative.flex.items-center .ml-2.flex.flex-col.overflow-hidden {
    margin-left: 0.5rem !important; /* 左侧外边距：0.5rem，增加间距 */
    flex: 1 1 auto; /* 弹性盒子：自动调整大小，不占据所有剩余空间 */
    justify-content: center; /* 垂直居中对齐 */
    vertical-align: middle;
    align-self: center;
    display: flex;
    align-items: center;
    min-height: 1rem;
    line-height: 1;
    baseline-shift: 0;
    /* 优化左右布局 */
    flex-direction: row;
    max-width: calc(100% - 2rem); /* 限制最大宽度，避免占用过多空间 */
}

/* 优化副标题容器在卡片中的显示 - 更具体选择器 */
.relative.flex.items-center .overflow-hidden {
    min-width: 0 !important; /* 允许flex项目收缩到内容大小以下 */
    flex: 1 !important; /* 占据可用空间 */
    max-width: 100% !important; /* 确保不超过容器宽度 */
}

/* 副标题容器自适应宽度 */
.overflow-hidden {
    flex: 1; /* 占据剩余空间 */
    min-width: 0; /* 允许收缩 */
    overflow: hidden; /* 隐藏溢出文本 */
}

/* 卡片内图标和标题容器的自适应布局 */
.flex.items-center.space-x-2.w-full {
    width: 100%;
    flex: 1;
    min-width: 0; /* 允许收缩 */
    overflow: hidden; /* 防止溢出 */
}

/* 确保标题文本正确截断 */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* 允许在flex容器中收缩 */
}

/* 卡片标题样式：文档卡片中的标题文字 */
.truncate.text-sm.font-semibold.text-gray-700 {
    /* 字体大小：0.875rem */
    font-size: 0.875rem;
    /* 字体粗细：600（半粗体） */
    font-weight: 600;
    /* 文字颜色：深灰色 */
    color: #334155;
    /* 底部外边距：0 */
    margin-bottom: 0;
    /* 顶部外边距：0 */
    margin-top: 0;
    /* 行高：进一步减小以减少垂直空间 */
    line-height: 1.2;
    /* 垂直居中对齐 */
    vertical-align: middle;
    /* 确保标题与图标在同一水平线上 */
    align-self: center;
    /* 添加flex属性确保正确对齐 */
    display: flex;
    align-items: center;
    /* 确保文本不换行 */
    white-space: nowrap;
    /* 确保行高一致 */
    line-height: 1;
    /* 确保基线对齐 */
    baseline-shift: 0;
}

/* 增加更具体的选择器以确保样式优先级 */
.ml-2.flex.flex-col.overflow-hidden .truncate.text-sm.font-semibold.text-gray-700 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.2;
    vertical-align: middle;
    align-self: center;
    display: flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1;
    baseline-shift: 0;
}

/* 卡片描述区域：文档卡片中的描述文字容器 */
.relative.w-full.text-xs.text-gray-500 {
    /* 字体大小：0.75rem */
    font-size: 0.75rem;
    /* 文字颜色：浅灰色 */
    color: #64748b;
    /* 行高：进一步减小以减少垂直空间 */
    line-height: 1.1;
    /* 内边距：进一步减少上下内边距以减小间距 */
    padding: 0 0.25rem 0.1rem 0.25rem;
    /* 弹性盒子：占据剩余空间 */
    flex: 1;
    /* 高度限制：只显示一行 */
    height: 1.1rem;
    /* 隐藏超出部分 */
    overflow: hidden;
    /* 确保文本显示为单行并添加省略号 */
    white-space: nowrap;
    text-overflow: ellipsis;
    /* 增强省略号效果 */
    display: block;
}

/* 卡片描述文本样式：控制文档卡片中的描述文字显示效果 */
.truncate.px-4.pb-4 {
    /* 内边距设置：进一步减少顶部和底部内边距 */
    padding: 0.05rem 0.25rem 0.05rem 0.25rem;
    /* 外边距清零 */
    margin: 0;
    /* 文本溢出处理：隐藏超出部分 */
    overflow: hidden;
    /* 文本溢出处理：显示省略号 */
    text-overflow: ellipsis;
    /* 文本换行控制：不换行，保持单行显示 */
    white-space: nowrap;
    /* 行高设置：进一步减小以减少垂直空间 */
    line-height: 1.1;
    /* 首行缩进：移除首行缩进 */
    text-indent: 0;
    /* 增强省略号效果 */
    display: block;
}

/* 卡片描述文本样式：控制文档卡片中的描述文字显示效果 */
.truncate.px-2.pb-1 {
    /* 内边距设置：进一步减少顶部和底部内边距 */
    padding: 0.05rem 0.25rem 0.05rem 0.25rem;
    /* 外边距清零 */
    margin: 0;
    /* 文本溢出处理：隐藏超出部分 */
    overflow: hidden;
    /* 文本溢出处理：显示省略号 */
    text-overflow: ellipsis;
    /* 文本换行控制：不换行，保持单行显示 */
    white-space: nowrap;
    /* 行高设置：进一步减小以减少垂直空间 */
    line-height: 1.1;
    /* 首行缩进：移除首行缩进 */
    text-indent: 0;
    /* 增强省略号效果 */
    display: block;
}

.absolute.right-3.top-1\/2.-mt-2.flex.h-4.w-4.items-center.justify-center {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    margin-top: -0.5rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 页脚样式：网站底部版权和备案信息显示区域 */
footer.text-xs.w-full.flex.items-center.justify-center.text-gray-500.leading-5,
/* 侧边栏底部版权信息样式 */
.side-bar .flex-shrink-0.mt-auto.border-t.border-gray-200.pt-3 p {
    /* 文本对齐：居中 */
    text-align: center;
    /* 内边距：调整底部内边距以与主内容区域页脚对齐 */
    padding: 0 0 0.5rem 0;
    /* 文字颜色：使用主题颜色 */
    color: var(--footer-text-color);
    /* 字体大小：0.75rem */
    font-size: 0.75rem;
    /* 行高：调整行高以提高可读性 */
    line-height: 1rem;
    /* 顶部边框：已注释 */
    /* border-top: 1px solid #e2e8f0; */
    /* 顶部外边距：减少外边距以与主内容区域页脚对齐 */
    margin-top: 0.5rem;
    /* 确保左右居中 */
    margin-left: auto;
    margin-right: auto;
    /* 确保宽度适应内容 */
    width: 100%;
}

footer.text-xs.w-full.flex.items-center.justify-center.text-gray-500.leading-5 a,
.side-bar .flex-shrink-0.mt-auto.border-t.border-gray-200.pt-3 p a {
    color: var(--footer-link-color);
    text-decoration: none;
}

footer.text-xs.w-full.flex.items-center.justify-center.text-gray-500.leading-5 a:hover,
.side-bar .flex-shrink-0.mt-auto.border-t.border-gray-200.pt-3 p a:hover {
    text-decoration: underline;
}

/* 响应式设计：针对不同屏幕尺寸的适配样式 */

/* 手机竖屏样式（≤479px） */
@media (max-width: 479px) {
    .main-container {
        margin-left: 0;
        margin-right: 0.5rem; /* 手机上增加右边距 */
        width: calc(100% - 0.5rem);
        padding: 0.5rem;
    }
    
    .side-bar {
        display: none;
        position: fixed;
        left: -100%; /* 初始位置在屏幕外 */
        top: 0;
        height: 100%;
        width: 14rem;
        z-index: 1000;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
        transition: left 0.3s ease; /* 添加滑动过渡效果 */
    }
    
    .side-bar.active {
        display: block;
        left: 0; /* 激活时显示在屏幕上 */
    }
    
    .search-box {
        padding: 0.75rem;
        margin: 0.25rem;
    }
    
    .search-bar {
        width: 100%;
        max-width: 100%;
        height: 2.5rem;
    }
    
    .search-box h1 {
        font-size: 1.25rem;
        line-height: 1.5rem;
        transform: translateY(-10px);
    }
    
    .flex.items-center.text-sm.leading-8.text-gray-900 {
        margin-left: 0.5rem;
    }
    
    .grid.grid-cols-1.gap-4 {
        margin-bottom: 0.5rem;
    }
    
    .logo-box {
        height: 6rem;
    }
    
    .logo {
        width: 40px;
        height: 40px;
        font-size: 0.875rem;
    }
    
    footer.text-xs.w-full.flex.items-center.justify-center.text-gray-500.leading-5 {
        padding: 0.5rem 0;
        font-size: 0.65rem;
    }
}

/* 手机横屏/小平板样式（480px-767px） */
@media (min-width: 480px) and (max-width: 767px) {
    .main-container {
        margin-left: 0;
        margin-right: 0.75rem; /* 小平板上增加右边距 */
        width: calc(100% - 0.75rem);
        padding: 0.75rem;
    }
    
    /* 让首页图片容器在此尺寸下也与卡片大小一致 */
    .image-container {
        padding: 0.5rem; /* 与卡片边距保持一致 */
        margin: 0.5rem 0.5rem 0.5rem 0.5rem; /* 上右下左边距与卡片一致 */
        width: calc(100% - 1rem); /* 考虑边距后的全宽 */
        min-height: 100px; /* 与卡片最小高度一致 */
    }
    
    .side-bar {
        width: 12rem !important; /* 小平板上调整宽度 */
        transform: translateX(0) !important; /* 覆盖base.css中的隐藏转换 */
        overflow-y: auto !important; /* 允许垂直滚动 */
        display: block !important; /* 确保小平板上显示侧边栏 */
        transition: none !important; /* 移除过渡效果 */
    }
    
    .side-bar.active {
        transform: translateX(0) !important;
        width: 12rem !important;
    }
    
    .main-container {
        margin-left: 12rem !important;
        width: calc(100% - 12rem) !important;
    }
    
    .search-box {
        padding: 1rem;
        margin: 0.5rem;
    }
    
    .search-bar {
        width: 100%;
        max-width: 100%;
    }
    
    .search-box h1 {
        font-size: 1.5rem;
        line-height: 1.75rem;
        transform: translateY(-12px);
    }
    
    .flex.items-center.text-sm.leading-8.text-gray-900 {
        margin-left: 0.75rem;
    }
    
    .grid.grid-cols-1.gap-4 {
        margin-bottom: 0.75rem;
    }
    
    footer.text-xs.w-full.flex.items-center.justify-center.text-gray-500.leading-5 {
        padding: 0.75rem 0;
    }
}

/* 平板竖屏样式（768px-991px） */
@media (min-width: 768px) and (max-width: 991px) {
    .search-bar {
        width: calc(100% - 4rem);
        max-width: calc(100% - 4rem);
    }
    
    .side-bar {
        width: 12rem !important;
        overflow-y: auto !important; /* 允许垂直滚动 */
        display: flex !important; /* 确保平板上显示侧边栏 */
        transform: translateX(0) !important; /* 确保侧边栏不被隐藏 */
        visibility: visible !important; /* 确保侧边栏可见 */
        opacity: 1 !important; /* 确保侧边栏不透明 */
        position: fixed !important; /* 确保侧边栏固定定位 */
    }
    
    .main-container {
        margin-left: 12rem !important;
        margin-right: 1rem; /* 平板上增加右边距 */
        width: calc(100% - 13rem) !important;
    }
    
    .search-box h1 {
        font-size: 1.75rem;
        line-height: 2rem;
    }
    
    footer.text-xs.w-full.flex.items-center.justify-center.text-gray-500.leading-5 {
        padding: 1rem 0;
    }
}

/* 平板横屏/小桌面样式（992px-1199px） */
@media (min-width: 992px) and (max-width: 1199px) {
    .search-bar {
        width: calc(100% - 6rem);
        max-width: calc(100% - 6rem);
    }
    
    .side-bar {
        width: 13rem !important;
        overflow-y: auto !important; /* 允许垂直滚动 */
        display: flex !important; /* 确保平板上显示侧边栏 */
        transform: translateX(0) !important; /* 确保侧边栏不被隐藏 */
        visibility: visible !important; /* 确保侧边栏可见 */
        opacity: 1 !important; /* 确保侧边栏不透明 */
        position: fixed !important; /* 确保侧边栏固定定位 */
    }
    
    .main-container {
        margin-left: 13rem !important;
        margin-right: 1rem; /* 小桌面增加右边距 */
        width: calc(100% - 14rem) !important;
    }
    
    .search-box h1 {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

/* 桌面端样式（1200px-1599px） */
@media (min-width: 1200px) and (max-width: 1599px) {
    .search-bar {
        width: calc(100% - 8rem);
        max-width: calc(100% - 8rem);
    }
    
    .side-bar {
        width: 14rem !important;
        overflow-y: auto; /* 允许垂直滚动 */
        display: block !important; /* 确保桌面端显示侧边栏 */
    }
    
    .main-container {
        margin-left: 14rem !important;
        margin-right: 1rem; /* 桌面端增加右边距 */
        width: calc(100% - 15rem) !important;
    }
}

/* 大屏幕桌面样式（≥1600px） */
@media (min-width: 1600px) {
    .search-bar {
        width: calc(100% - 10rem);
        max-width: calc(100% - 10rem);
    }
    
    .search-box h1 {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    
    .main-container {
        margin-left: 14rem !important;
        margin-right: 1rem;
        width: calc(100% - 15rem) !important;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* 针对高DPI屏幕优化，提高清晰度 */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    .search-box {
        box-shadow: var(--card-hover-shadow);
    }
    
    .cursor-pointer.rounded-lg.bg-white.shadow-sm {
        box-shadow: var(--card-shadow);
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    /* 针对触摸设备的优化 */
    .side-nav a {
        padding: 0.875rem 1rem; /* 为触摸操作增加更大的触摸目标 */
        min-height: 44px; /* 确保触摸目标至少44px，符合可访问性标准 */
    }
    
    .cursor-pointer.rounded-lg.bg-white.shadow-sm {
        min-height: 60px; /* 确保卡片有足够大的触摸目标 */
        min-width: 200px; /* 确保卡片有足够宽的触摸目标 */
    }
    
    .search-bar button {
        width: 3rem;
        height: 3rem;
        min-height: 44px;
        min-width: 44px;
    }
    
    /* 增加卡片点击区域的视觉反馈 */
    .cursor-pointer.rounded-lg.bg-white.shadow-sm:active {
        transform: scale(0.98); /* 点击时轻微缩小效果 */
        box-shadow: var(--card-hover-shadow);
    }
    
    /* 确保所有按钮有足够大的触摸区域 */
    button {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem;
    }
    
    /* 优化输入框在移动设备上的体验 */
    input[type="text"],
    input[type="search"] {
        min-height: 44px; /* 确保输入框足够大 */
        padding: 0.75rem;
        font-size: 1rem; /* 防止iOS缩放字体 */
    }
}

/* 窄屏幕设备优化（如iPhone 5/SE） */
@media (max-width: 320px) and (max-height: 568px) {
    .logo-box {
        height: 5rem;
    }
    
    .logo {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    
    .text-sm {
        font-size: 0.8rem;
    }
    
    .grid.grid-cols-1.gap-4 {
        gap: 0.4rem;
    }
}

/* 宽屏浏览器窗口优化（≥1200px） */
@media (min-width: 1200px) and (max-width: 1599px) {
    .main-container {
        padding: 1.25rem;
    }
    
    .search-box {
        margin: 0.75rem;
    }
    
    .flex.items-center.text-sm.leading-8.text-gray-900 {
        margin-left: 0.5rem;
    }
    
    /* 在1200px-1599px浏览器窗口显示5列网格 */
    .grid.grid-cols-1.gap-4.lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    
    /* 为1200px-1599px浏览器窗口确保侧边栏显示 */
    .side-bar {
        width: 13rem !important;
        overflow-y: auto !important; /* 允许垂直滚动 */
        display: flex !important; /* 确保显示侧边栏 */
        transform: translateX(0) !important; /* 确保侧边栏不被隐藏 */
        visibility: visible !important; /* 确保侧边栏可见 */
        opacity: 1 !important; /* 确保侧边栏不透明 */
        position: fixed !important; /* 确保侧边栏固定定位 */
    }
    
    .main-container {
        margin-left: 13rem !important;
        width: calc(100% - 13rem) !important;
    }
}

@media (min-width: 1600px) {
    /* 在1600px以上浏览器窗口显示5列网格 */
    .grid.grid-cols-1.gap-4.xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}



/* 平板设备优化 */
@media (min-width: 768px) and (max-width: 1023px) {
    .flex.items-center.text-sm.leading-8.text-gray-900 {
        margin-left: 0.25rem; /* 调整平板上的左边距 */
    }
}



/* 手机小屏幕优化 */
@media (max-width: 479px) {
    /* 优化字体大小以提高移动端可读性 */
    body {
        font-size: 16px; /* 防止移动端字体过小 */
    }
    
    h1 { font-size: 1.25rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1.05rem; }
    
    /* 优化卡片内文字大小 */
    .truncate.text-sm.font-semibold.text-gray-700 {
        font-size: 0.9rem !important; /* 稍微增大移动端卡片标题字体 */
    }
    
    .text-xs.text-gray-500 {
        font-size: 0.8rem !important; /* 稍微增大移动端描述文字 */
    }
    
    /* 优化触摸目标大小 */
    a, button, .cursor-pointer {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem;
    }
    
    /* 优化搜索框在移动端的体验 */
    .search-bar {
        min-height: 48px; /* 确保搜索框足够大 */
    }
    
    .search-bar input {
        font-size: 1rem; /* 防止iOS缩放 */
        padding: 0.5rem;
    }
    
    /* 优化分类标题在移动端的显示 */
    .flex.items-center.text-sm.leading-8.text-gray-900 {
        min-height: 50px; /* 增加分类标题的高度，便于点击 */
    }
    .grid.grid-cols-1.gap-4 {
        grid-template-columns: 1fr; /* 只显示1列 */
    }
    

    /* 让首页图片容器在手机上与卡片大小一致 */
    .image-container {
        padding: 0.5rem; /* 与卡片边距保持一致 */
        margin: 0.5rem 0.5rem 0.5rem 0.5rem; /* 上右下左边距与卡片一致 */
        width: calc(100% - 1rem); /* 考虑边距后的全宽 */
        min-height: 100px; /* 与卡片最小高度一致 */
    }
    
    .side-bar {
        display: none !important; /* 在小屏幕上隐藏侧边栏 */
        width: 14rem !important; /* 固定宽度 */
        height: 100vh !important; /* 全屏高度 */
        max-height: none !important; /* 移除最大高度限制 */
        position: fixed !important; /* 固定定位 */
        top: 0 !important; /* 距离顶部0 */
        left: -14rem !important; /* 初始隐藏在左边 */
        bottom: 0 !important; /* 距离底部0 */
        z-index: 1001 !important; /* 确保在最顶层 */
        border-radius: 0 !important; /* 移除圆角 */
        overflow-y: auto !important; /* 允许垂直滚动 */
        overflow-x: hidden !important; /* 隐藏横向滚动 */
        transform: translateX(0) !important; /* 初始化transform */
        transition: transform 0.3s ease-in-out !important; /* 平滑动画 */
        padding-top: max(env(safe-area-inset-top), 0.5rem) !important; /* iOS Safe Area适配 */
        padding-bottom: env(safe-area-inset-bottom, 0) !important; /* iOS Safe Area底部适配 */
    }
    
    .side-bar.active {
        display: block !important; /* 当激活时显示 */
        transform: translateX(14rem) !important; /* 滑入动画 */
    }
    
    .main-container {
        margin-left: 0;
        width: 100%;
        position: relative !important; /* 相对定位，防止被菜单覆盖 */
        z-index: 100 !important; /* 低于菜单的z-index */
    }
    
    /* iOS Safari兼容性：移除遮罩层的伪元素写法 */
    .side-bar.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        -webkit-backdrop-filter: blur(2px); /* WebKit前缀支持 */
        backdrop-filter: blur(2px); /* 背景模糊效果 */
        pointer-events: auto; /* 确保可以点击关闭 */
    }
}

/* 横屏设备优化 */
@media (orientation: landscape) and (max-height: 500px) {
    .search-box {
        margin: 0.25rem;
        padding: 0.75rem;
    }
    
    .search-box h1 {
        font-size: 1.25rem;
        line-height: 1.5rem;
        transform: translateY(-8px);
    }
    
    .main-container {
        margin-right: 0.5rem; /* 横屏设备增加右边距 */
        padding: 0.5rem;
    }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: var(--bg-color);
        color: var(--text-color);
        margin: 0;
        padding: 0;
    }
    
    .side-bar {
        background-color: var(--sidebar-bg);
        color: var(--sidebar-text-color);
        border-color: var(--sidebar-active-bg);
    }
    
    .logo-box {
        background-color: var(--sidebar-bg);
        color: var(--sidebar-hover-text);
    }
    
    .side-nav a {
        color: var(--sidebar-text-color);
        border-radius: 0.25rem;
    }
    
    .side-nav a:hover {
        background-color: var(--sidebar-hover-bg);
        color: var(--sidebar-hover-text);
    }
    
    .side-nav a.active {
        background-color: var(--sidebar-active-bg);
        color: var(--sidebar-active-text);
    }
    
    .search-box {
        background: var(--header-bg);
        color: var(--text-color);
        border-radius: 1rem;
    }
    
    .container {
        background-color: var(--bg-color);
        color: var(--text-color);
    }
    
    .search-bar {
        background-color: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    
    .search-bar:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }
    
    .cursor-pointer.rounded-lg.bg-white.shadow-sm {
        background: var(--card-bg);
        color: var(--text-color);
        border: 1px solid var(--border-color);
        box-shadow: var(--card-shadow);
        overflow: hidden; /* 确保内容不超出圆角边界 */
    }
    
    .relative.flex.items-center.p-3 {
        background-color: var(--card-bg);
        color: var(--text-color);
    }
    
    .relative.w-full.text-xs.text-gray-500 {
        color: var(--footer-text-color);
    }
    
    .flex.items-center.text-sm.leading-8.text-gray-900 h2 a {
        color: var(--text-color);
    }
    
    .flex.items-center.text-sm.leading-8.text-gray-900 h2 a:hover {
        color: var(--sidebar-hover-text);
    }
    
    .main-container {
        background-color: var(--bg-color);
        color: var(--text-color);
    }
    
    /* 确保所有文本元素在暗色模式下有适当的对比度 */
    .text-gray-700, .text-gray-800, .text-gray-900 {
        color: var(--text-color) !important;
    }
    
    /* 确保卡片标题在暗色模式下清晰可见 */
    .truncate.text-sm.font-semibold.text-gray-700 {
        color: var(--text-color) !important;
    }
    
    /* 确保卡片描述在暗色模式下清晰可见 */
    .truncate.text-xs.text-gray-500 {
        color: var(--footer-text-color) !important;
    }
    
    /* 修复分类标题颜色 */
    .flex.items-center.text-sm.leading-8.text-gray-900 {
        color: var(--text-color) !important;
    }
    
    /* 修复页脚文字颜色 */
    footer.text-xs.w-full.flex.items-center.justify-center.text-gray-500 {
        color: var(--footer-text-color) !important;
    }
}

/* SVG图标颜色调整 */
svg, .icon {
    fill: var(--icon-color);
    stroke: var(--icon-color);
}

img[src*=".svg"],
img[src*="icon"],
img.h-4.w-4 {
    filter: var(--icon-filter, none);
}

/* 为不同主题定义图标滤镜 */
:root {
    --icon-filter: none;
}



.theme-warm-reading {
    --icon-filter: none;
}

/* 隐藏主题切换开关 */
.theme-selector-container {
    display: none;
}

/* 主题切换开关样式 */
#theme-toggle {
    background-color: #cbd5e1; /* 灰色背景，表示默认主题 */
    transition: background-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

#theme-toggle.active {
    background-color: #f59e0b; /* 暖色主题的主色调 */
}

#theme-toggle .toggle-slider {
    transition: transform 0.3s ease;
    left: 1px; /* 调整初始位置 */
}

#theme-toggle.active .toggle-slider {
    transform: translateX(1rem); /* 1rem = 16px，滑动到右侧 */
}