/* 基础样式 */
       :root {
           --bg-color: #f8fafc;
           --text-color: #334155;
           --card-bg: rgba(255, 255, 255, 0.5);
           --nav-bg: rgba(241, 245, 249, 0.5);
           --primary-color: #3b82f6;
           --secondary-color: #2563eb;
           --accent-color: #60a5fa;
           --border-color: rgba(226, 232, 240, 0.2);
           --border-radius: 12px;
           --transition-speed: 0.3s;
           --shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
           --scrollbar-width: 14px;
           --blur-amount: 2px;
       }

       /* 滚动条样式 - 添加到:root变量之后 */
       /* 为html和body元素添加滚动条样式 */
       html::-webkit-scrollbar,
       body::-webkit-scrollbar {
           width: var(--scrollbar-width);
           height: var(--scrollbar-width);
       }

       html::-webkit-scrollbar-track,
       body::-webkit-scrollbar-track {
           background: transparent;
           border-radius: 10px;
       }

       html::-webkit-scrollbar-thumb,
       body::-webkit-scrollbar-thumb {
           background: rgba(59, 130, 246, 0.3);
           border-radius: 10px;
           border: 3px solid transparent;
           background-clip: padding-box;
       }

       html::-webkit-scrollbar-thumb:hover,
       body::-webkit-scrollbar-thumb:hover {
           background: rgba(59, 130, 246, 0.5);
           border: 2px solid transparent;
           background-clip: padding-box;
       }

       html::-webkit-scrollbar-thumb:active,
       body::-webkit-scrollbar-thumb:active {
           background: rgba(59, 130, 246, 0.7);
       }

       html::-webkit-scrollbar-corner,
       body::-webkit-scrollbar-corner {
           background: transparent;
       }

       /* 通用滚动条样式 */
       ::-webkit-scrollbar {
           width: var(--scrollbar-width);
           height: var(--scrollbar-width);
       }

       ::-webkit-scrollbar-track {
           background: transparent;
           border-radius: 10px;
       }

       ::-webkit-scrollbar-thumb {
           background: rgba(59, 130, 246, 0.3);
           border-radius: 10px;
           border: 3px solid transparent;
           background-clip: padding-box;
       }

       ::-webkit-scrollbar-thumb:hover {
           background: rgba(59, 130, 246, 0.5);
           border: 2px solid transparent;
           background-clip: padding-box;
       }

       ::-webkit-scrollbar-thumb:active {
           background: rgba(59, 130, 246, 0.7);
       }

       ::-webkit-scrollbar-corner {
           background: transparent;
       }

       /* Firefox滚动条样式 */
       html {
           scrollbar-width: thin;
           scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
       }

       * {
           scrollbar-width: thin;
           scrollbar-color: rgba(59, 130, 246, 0.3) transparent;
       }

       /* 深色模式下的滚动条 */
       [data-theme="dark"] html::-webkit-scrollbar-thumb,
       [data-theme="dark"] body::-webkit-scrollbar-thumb {
           background: rgba(96, 165, 250, 0.3);
       }

       [data-theme="dark"] html::-webkit-scrollbar-thumb:hover,
       [data-theme="dark"] body::-webkit-scrollbar-thumb:hover {
           background: rgba(96, 165, 250, 0.5);
       }

       [data-theme="dark"] html::-webkit-scrollbar-thumb:active,
       [data-theme="dark"] body::-webkit-scrollbar-thumb:active {
           background: rgba(96, 165, 250, 0.7);
       }

       [data-theme="dark"] html {
           scrollbar-color: rgba(96, 165, 250, 0.3) transparent;
       }

       [data-theme="dark"] ::-webkit-scrollbar-thumb {
           background: rgba(96, 165, 250, 0.3);
       }

       [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
           background: rgba(96, 165, 250, 0.5);
       }

       [data-theme="dark"] ::-webkit-scrollbar-thumb:active {
           background: rgba(96, 165, 250, 0.7);
       }

       [data-theme="dark"] * {
           scrollbar-color: rgba(96, 165, 250, 0.3) transparent;
       }

       /* 现代黑主题下的滚动条 */
       [data-color-theme="modern-black"] html::-webkit-scrollbar-thumb,
       [data-color-theme="modern-black"] body::-webkit-scrollbar-thumb {
           background: rgba(51, 51, 51, 0.3);
       }

       [data-color-theme="modern-black"] html::-webkit-scrollbar-thumb:hover,
       [data-color-theme="modern-black"] body::-webkit-scrollbar-thumb:hover {
           background: rgba(51, 51, 51, 0.5);
       }

       [data-color-theme="modern-black"] html::-webkit-scrollbar-thumb:active,
       [data-color-theme="modern-black"] body::-webkit-scrollbar-thumb:active {
           background: rgba(51, 51, 51, 0.7);
       }

       [data-color-theme="modern-black"] html {
           scrollbar-color: rgba(51, 51, 51, 0.3) transparent;
       }

       [data-color-theme="modern-black"] ::-webkit-scrollbar-thumb {
           background: rgba(51, 51, 51, 0.3);
       }

       [data-color-theme="modern-black"] ::-webkit-scrollbar-thumb:hover {
           background: rgba(51, 51, 51, 0.5);
       }

       [data-color-theme="modern-black"] ::-webkit-scrollbar-thumb:active {
           background: rgba(51, 51, 51, 0.7);
       }

       [data-color-theme="modern-black"] * {
           scrollbar-color: rgba(51, 51, 51, 0.3) transparent;
       }

       /* 深色模式+现代黑主题组合下的滚动条 */
       [data-theme="dark"][data-color-theme="modern-black"] html::-webkit-scrollbar-thumb,
       [data-theme="dark"][data-color-theme="modern-black"] body::-webkit-scrollbar-thumb {
           background: rgba(241, 245, 249, 0.3);
       }

       [data-theme="dark"][data-color-theme="modern-black"] html::-webkit-scrollbar-thumb:hover,
       [data-theme="dark"][data-color-theme="modern-black"] body::-webkit-scrollbar-thumb:hover {
           background: rgba(241, 245, 249, 0.5);
       }

       [data-theme="dark"][data-color-theme="modern-black"] html::-webkit-scrollbar-thumb:active,
       [data-theme="dark"][data-color-theme="modern-black"] body::-webkit-scrollbar-thumb:active {
           background: rgba(241, 245, 249, 0.7);
       }

       [data-theme="dark"][data-color-theme="modern-black"] html {
           scrollbar-color: rgba(241, 245, 249, 0.3) transparent;
       }

       [data-theme="dark"][data-color-theme="modern-black"] ::-webkit-scrollbar-thumb {
           background: rgba(241, 245, 249, 0.3);
       }

       [data-theme="dark"][data-color-theme="modern-black"] ::-webkit-scrollbar-thumb:hover {
           background: rgba(241, 245, 249, 0.5);
       }

       [data-theme="dark"][data-color-theme="modern-black"] ::-webkit-scrollbar-thumb:active {
           background: rgba(241, 245, 249, 0.7);
       }

       [data-theme="dark"][data-color-theme="modern-black"] * {
           scrollbar-color: rgba(241, 245, 249, 0.3) transparent;
       }

       /* 深色模式 */
       [data-theme="dark"] {
           --bg-color: #0f172a;
           --text-color: #e2e8f0;
           --card-bg: rgba(30, 41, 59, 0.5);
           --nav-bg: rgba(30, 41, 59, 0.5);
           --primary-color: #60a5fa;
           --secondary-color: #3b82f6;
           --accent-color: #93c5fd;
           --border-color: rgb(51, 65, 85, 0.2);
           --shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
       }

       /* 现代黑主题 */
       [data-color-theme="modern-black"] {
           --primary-color: #333333;
           --secondary-color: #222222;
           --accent-color: #444444;
       }

       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       /* 模糊背景效果 */
       body::before {
           content: "";
           position: fixed;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: url('https://rba.kanostar.top/adapt') center/cover no-repeat;
           filter: blur(var(--blur-amount)) brightness(0.9);
           z-index: -1;
       }

       [data-theme="dark"] body::before {
           filter: blur(var(--blur-amount)) brightness(0.4);
       }

       body {
           background-color: var(--bg-color);
           color: var(--text-color);
           transition: background-color var(--transition-speed), color var(--transition-speed);
           min-height: 100vh;
           font-family: 'GoogleSans-Bold', 'vivoSans-Bold', sans-serif;
           line-height: 1.6;
           scroll-behavior: smooth;
           background: rgba(248, 250, 252, 0.7);
           backdrop-filter: blur(5px);
       }

       /* 导航栏样式 */
       nav {
           background-color: var(--nav-bg) !important;
           border-bottom: 1px solid var(--border-color);
           padding: 0.6rem 0;
           display: flex;
           align-items: center;
           position: sticky;
           top: 0;
           z-index: 100;
           backdrop-filter: blur(10px);
       }

       .nav-container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 20px;
           width: 100%;
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       .brand {
           font-weight: 700;
           font-size: 1.5rem;
           color: var(--primary-color);
           display: flex;
           align-items: center;
           gap: 10px;
           text-decoration: none;
       }

       .brand i {
           font-size: 1.6rem;
       }

       .nav-buttons {
           display: flex;
           gap: 10px;
       }

       .nav-button {
           background: rgba(59, 130, 246, 0.1);
           border: none;
           border-radius: 6px;
           padding: 8px 16px;
           color: var(--primary-color);
           font-weight: 500;
           cursor: pointer;
           display: flex;
           align-items: center;
           gap: 8px;
           transition: all var(--transition-speed);
           backdrop-filter: blur(5px);
       }

       .nav-button:hover {
           background: rgba(59, 130, 246, 0.2);
           transform: translateY(-2px);
       }

       .theme-toggle {
           background: none;
           border: none;
           cursor: pointer;
           font-size: 1.3rem;
           padding: 6px 10px;
           border-radius: 50%;
           color: var(--text-color);
           transition: all var(--transition-speed);
           display: flex;
           align-items: center;
           justify-content: center;
           width: 36px;
           height: 36px;
           backdrop-filter: blur(5px);
       }

       .theme-toggle:hover {
           background-color: rgba(0, 0, 0, 0.05);
       }

       [data-theme="dark"] .theme-toggle:hover {
           background-color: rgba(255, 255, 255, 0.05);
       }

       /* 优化现代黑主题深色模式 */
       [data-theme="dark"][data-color-theme="modern-black"] {
           --text-color: #f8fafc;
           --card-bg: rgba(17, 24, 39, 0.5);
           --nav-bg: rgba(17, 24, 39, 0.5);
           --primary-color: #f1f5f9;
           --secondary-color: #e2e8f0;
       }

       /* 修复现代黑主题按钮文字颜色 */
       [data-theme="dark"][data-color-theme="modern-black"] .resource-card a {
           color: rgb(0, 0, 0) !important;
       }

       /* 内容区域 */
       .container {
           max-width: 900px;
           margin: 30px auto;
           padding: 0 20px;
           z-index: 10;
           /* 低于遮罩层 */
           position: relative;
       }

       .card {
           background: var(--card-bg);
           border-radius: var(--border-radius);
           padding: 30px;
           box-shadow: var(--shadow);
           transition: all var(--transition-speed);
           border: 1px solid var(--border-color);
           backdrop-filter: blur(10px);
       }

       /* Markdown内容样式 */
       #markdown-content {
           line-height: 1.7;
       }

       #markdown-content>* {
           margin: 0.7em 0;
       }

       #markdown-content h1 {
           font-size: 2.2rem;
           margin-top: 0.5em;
           margin-bottom: 0.8em;
           padding-bottom: 0.3em;
           color: var(--primary-color);
           border-bottom: 2px solid var(--primary-color);
       }

       #markdown-content h2 {
           font-size: 1.8rem;
           margin-top: 1.5em;
           margin-bottom: 0.8em;
           color: var(--primary-color);
       }

       #markdown-content p {
           margin: 0.8em 0;
           font-size: 1.05rem;
       }

       #markdown-content ul {
           margin: 0.8em 0;
           padding-left: 1.8em;
       }

       #markdown-content li {
           margin: 0.5em 0;
           font-size: 1.05rem;
       }

       #markdown-content li::marker {
           color: var(--primary-color);
       }

       #markdown-content hr {
           margin: 1.8em 0;
           border: none;
           border-top: 1px solid var(--border-color);
           height: 1px;
       }

       #markdown-content strong {
           color: var(--primary-color);
       }

       /* 引用区块 */
       blockquote {
           border-left: 4px solid var(--primary-color);
           margin: 1.5em 0;
           padding: 1em 1.5em;
           background-color: rgba(59, 130, 246, 0.05);
           border-radius: 0 var(--border-radius) var(--border-radius) 0;
           color: var(--text-color);
           backdrop-filter: blur(5px);
       }

       [data-theme="dark"] blockquote {
           background-color: rgba(59, 130, 246, 0.1);
       }

       /* 代码块样式 */
       pre {
           position: relative;
           padding: 1.4em !important;
           border-radius: var(--border-radius);
           overflow-x: auto;
           background-color: rgba(0, 0, 0, 0.03) !important;
           border: 1px solid var(--border-color);
           margin: 1.5em 0;
           font-size: 0.95rem;
           backdrop-filter: blur(5px);
       }

       [data-theme="dark"] pre {
           background-color: rgba(0, 0, 0, 0.15) !important;
       }

       .copy-btn {
           position: absolute;
           right: 12px;
           top: 12px;
           padding: 6px 12px;
           background: rgba(59, 130, 246, 0.1);
           border: none;
           border-radius: 6px;
           cursor: pointer;
           color: var(--primary-color);
           transition: all 0.2s;
           font-size: 0.85rem;
           display: flex;
           align-items: center;
           gap: 5px;
           font-weight: 500;
           backdrop-filter: blur(5px);
       }

       .copy-btn:hover {
           background: rgba(59, 130, 246, 0.2);
       }

       /* 资源卡片 */
       .resources {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
           gap: 24px;
           margin: 30px 0;
       }

       .resource-card {
           border-radius: var(--border-radius);
           padding: 22px;
           transition: all var(--transition-speed);
           box-shadow: var(--shadow);
           border: 1px solid var(--border-color);
           display: flex;
           flex-direction: column;
           backdrop-filter: blur(5px);
       }

       .resource-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
           border-color: var(--primary-color);
       }

       .resource-card h3 {
           color: var(--primary-color);
           margin-bottom: 12px;
           font-size: 1.3rem;
           display: flex;
           align-items: center;
           gap: 8px;
       }

       .resource-card p {
           color: var(--text-color);
           flex-grow: 1;
           margin-bottom: 15px;
           font-size: 0.95rem;
           opacity: 0.9;
       }

       .resource-card a {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           gap: 8px;
           padding: 10px 16px;
           background: var(--primary-color);
           color: rgb(255, 255, 255);
           border-radius: 8px;
           text-decoration: none;
           font-weight: 500;
           transition: all var(--transition-speed);
           font-size: 0.95rem;
           margin-top: auto;
       }

       .resource-card a:hover {
           background: var(--secondary-color);
           transform: translateY(-2px);
       }

       /* 页脚样式 - 已优化 */
       footer {
           background-color: var(--nav-bg) !important;
           text-align: center;
           padding: 20px 0;
           margin-top: 40px;
           border-top: 1px solid var(--border-color);
           font-size: 0.85rem;
           color: var(--text-color);
           opacity: 0.8;
           backdrop-filter: blur(20px);
       }

       /* footer {
           color: #f8fafc;
       } */

       .contact {
           display: inline-flex;
           align-items: center;
           gap: 8px;
           background: rgba(255, 255, 255, 0.5);
           padding: 6px 12px;
           border-radius: 30px;
           margin-top: 10px;
           color: var(--primary-color);
           font-weight: 500;
           font-size: 0.85rem;
           backdrop-filter: blur(20px);
       }

       [data-theme="dark"][data-color-theme="modern-black"] .contact {
           color: var(--primary-color);
       }

       /* 返回顶部按钮 - 现在在导航栏中 */
       .back-to-top-nav {
           display: flex;
           align-items: center;
           justify-content: center;
           width: 36px;
           height: 36px;
           background: rgba(59, 130, 246, 0.1);
           color: var(--primary-color);
           border-radius: 50%;
           cursor: pointer;
           transition: all var(--transition-speed);
           border: none;
           font-size: 1.2rem;
           backdrop-filter: blur(5px);
       }

       .back-to-top-nav:hover {
           background: rgba(59, 130, 246, 0.2);
           transform: translateY(-2px);
       }

       /* 下拉菜单样式 */
       .dropdown {
           position: relative;
           display: inline-block;
       }

       .dropdown-toggle {
           position: relative;
           padding-right: 30px;
       }

       .dropdown-menu {
           display: none;
           position: absolute;
           right: 0;
           background: var(--card-bg);
           border: 1px solid var(--border-color);
           border-radius: var(--border-radius);
           padding: 8px 0;
           z-index: 9999;
           min-width: 160px;
           backdrop-filter: blur(10px);
           box-shadow: var(--shadow);
       }

       .dropdown-toggle {
           position: relative;
           padding-right: 10px;
           /* 减少右侧内边距 */
       }

       .dropdown-arrow {
           margin-left: 5px;
           font-size: 0.8rem;
           transition: transform 0.3s;
           position: absolute;
           /* 绝对定位 */
           right: 14px;
           /* 距离右侧 */
           top: 50%;
           /* 垂直居中 */
           transform: translateY(-50%);
       }

       /* 保持移动端隐藏 */
       @media (max-width: 768px) {
           .dropdown-arrow {
               display: none !important;
           }
       }

       /* 确保按钮文本和图标对齐 */
       .nav-button {
           position: relative;
           /* 为绝对定位的子元素提供参照 */
           padding-right: 40px;
           /* 给箭头留出空间 */
       }

       .dropdown-menu .dropdown-item {
           width: 100%;
           text-align: left;
           padding: 12px 20px;
           background: none;
           color: var(--primary-color);
       }

       .dropdown-menu .dropdown-item:hover {
           background: rgba(59, 130, 246, 0.1);
       }

       .dropdown:hover .dropdown-menu {
           display: block;
       }

       .theme-option {
           width: 40px;
           height: 40px;
           border-radius: 50%;
           border: 2px solid transparent;
           cursor: pointer;
           transition: all 0.2s;
           display: flex;
           align-items: center;
           justify-content: center;
           color: white;
       }

       .theme-option.active {
           border-color: var(--text-color);
           transform: scale(1.1);
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
       }

       .theme-option.blue {
           background: linear-gradient(135deg, #3b82f6, #2563eb);
       }

       .theme-option.modern-black {
           background: linear-gradient(135deg, #333333, #222222);
       }

       .theme-option i {
           opacity: 0;
           transition: opacity 0.2s;
       }

       .theme-option.active i {
           opacity: 1;
       }

       /* 响应式设计 */
       @media (max-width: 768px) {
           .container {
               padding: 0 15px;
           }

           .card {
               padding: 25px 20px;
           }

           .resources {
               grid-template-columns: 1fr;
               gap: 20px;
           }

           #markdown-content h1 {
               font-size: 1.9rem;
           }

           #markdown-content h2 {
               font-size: 1.6rem;
           }

           .nav-container {
               padding: 0 15px;
           }

           /* 窄屏幕下只显示图标 */
           .nav-button span {
               display: none;
           }

           .nav-button {
               padding: 8px;
               width: 36px;
               height: 36px;
               justify-content: center;
           }

           .dropdown .nav-button span {
               display: none;
           }

           /* 隐藏原来的返回顶部按钮 */
           .back-to-top {
               display: none;
           }
       }

       /* 文章卡片样式 */
       .article-card {
           cursor: pointer;
           transition: all var(--transition-speed);
       }

       .article-card.selected {
           border-color: var(--primary-color);
           box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
           transform: translateY(-5px);
       }

       .article-card h3 {
           display: flex;
           align-items: center;
           gap: 8px;
       }

       .article-card a.read-article-btn {
           color: white;
           padding: 10px 16px;
           border-radius: 8px;
           text-decoration: none;
           display: inline-flex;
           align-items: center;
           gap: 8px;
           transition: all var(--transition-speed);
           margin-top: auto;
       }

       .article-card a.read-article-btn:hover {
           background: var(--secondary-color);
           transform: translateY(-2px);
       }

       /* 错误消息样式 */
       .error-message {
           animation: fadeIn 0.3s ease;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
           }

           to {
               opacity: 1;
           }
       }

       /* 响应式调整 */
       @media (max-width: 768px) {
           .article-card {
               padding: 18px;
           }

           .article-card h3 {
               font-size: 1.2rem;
           }
       }

       /* 统一链接样式 - 添加到您的style.css文件中 */
       a {
           color: var(--primary-color);
           text-decoration: none;
           font-weight: 500;
           transition: all var(--transition-speed);
           position: relative;
           padding: 0 2px;
       }

       a:hover {
           color: var(--secondary-color);
           text-decoration: none;
       }

       a::after {
           position: absolute;
           bottom: -1px;
           left: 0;
           width: 100%;
           height: 1px;
           background-color: var(--primary-color);
           opacity: 0.5;
           transform: scaleX(0.95);
           transition: transform var(--transition-speed);
       }

       a:hover::after {
           transform: scaleX(1);
           opacity: 0.8;
       }

       /* 移除访问过的链接样式 */
       a:visited,
       a:visited:hover {
           color: var(--primary-color);
       }

       /* 确保资源卡片中的链接不受影响 */
       .resource-card a {
           color: white !important;
           text-decoration: none !important;
       }

       .resource-card a::after {
           display: none !important;
       }

       /* 代码块中的链接保持原样 */
       pre a,
       code a {
           color: inherit !important;
           text-decoration: underline !important;
       }

       pre a::after,
       code a::after {
           display: none !important;
       }

       /* 修复Banner和搜索框的间距问题 */
       .banner-ab-container {
           margin: 0 0 2em 0;
           border-radius: var(--border-radius);
           overflow: hidden;
           box-shadow: var(--shadow);
           transition: margin 0.2s ease;
           z-index: 10;
           /* 低于遮罩层 */
           position: relative;
       }

       /* 移除固定的推下距离，改为动态计算 */
       .banner-ab-container.pushed-down {
           margin-top: 0;
           /* 改为动态计算 */
       }

       /* 恢复Banner的悬停展开效果 */
       .banner-ab {
           position: relative;
           width: 100%;
           height: 180px;
           overflow: hidden;
           border-radius: var(--border-radius);
           transition: height 0.4s ease;
       }

       /* 悬停时增加高度 */
       .banner-ab.expanded {
           height: 280px;
       }

       /* 调整Banner容器在展开时的外边距 */
       .banner-ab-container.expanded {
           margin-bottom: 2.8em;
       }

       .banner-items {
           position: relative;
           width: 100%;
           height: 100%;
       }

       .banner-item {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           opacity: 0;
           transition: opacity 0.2s ease;
           display: flex;
           align-items: center;
           justify-content: center;
           background: var(--card-bg);
           backdrop-filter: blur(10px);
       }

       .banner-item.active {
           opacity: 1;
           z-index: 2;
       }

       .banner-item a {
           display: block;
           width: 100%;
           height: 100%;
           position: relative;
       }

       .banner-item img {
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       .banner-nav {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           background: rgba(0, 0, 0, 0.3);
           border: none;
           color: white;
           width: 36px;
           height: 36px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           z-index: 3;
           opacity: 0;
           transition: opacity 0.3s ease, background 0.3s ease;
       }

       .banner-prev {
           left: 15px;
       }

       .banner-next {
           right: 15px;
       }

       .banner-ab:hover .banner-nav {
           opacity: 1;
       }

       .banner-nav:hover {
           background: rgba(0, 0, 0, 0.6);
       }

       .banner-indicators {
           position: absolute;
           bottom: 15px;
           left: 50%;
           transform: translateX(-50%);
           display: flex;
           gap: 8px;
           z-index: 3;
       }

       .banner-indicator {
           width: 10px;
           height: 10px;
           border-radius: 50%;
           background: rgba(255, 255, 255, 0.5);
           cursor: pointer;
           transition: background 0.3s ease, transform 0.3s ease;
       }

       .banner-indicator.active {
           background: white;
           transform: scale(1.2);
       }

       .banner-indicator:hover {
           background: rgba(255, 255, 255, 0.8);
       }

       /* 响应式调整 */
       @media (max-width: 768px) {
           .banner-ab {
               height: 150px;
           }

           .banner-nav {
               opacity: 0.7 !important;
               /* 移动端始终显示导航按钮 */
           }
       }

       /* 主题模式选项样式 */
       .theme-mode-container {
           display: flex;
           flex-direction: column;
           gap: 8px;
       }

       .theme-mode-option {
           display: flex;
           align-items: center;
           gap: 10px;
           padding: 8px 12px;
           border-radius: 6px;
           cursor: pointer;
           transition: background-color var(--transition-speed);
       }

       .theme-mode-option:hover {
           background-color: rgba(59, 130, 246, 0.1);
       }

       .theme-mode-check {
           opacity: 0;
           transition: opacity var(--transition-speed);
           color: var(--primary-color);
       }

       .theme-mode-option.active .theme-mode-check {
           opacity: 1;
       }

       /* 修复搜索框和Banner的定位 */
       .search-container {
           margin-bottom: 1em;
           display: flex;
           justify-content: center;
           transition: all 0.2s ease;
           position: relative;
           z-index: 20;
           /* 提高z-index确保搜索框在Banner上方 */
       }

       .search-box {
           position: relative;
           width: 80%;
           max-width: 500px;
           transition: all 0.2s ease;
       }

       .search-box.expanded {
           width: 100%;
           max-width: none;
       }

       #bing-search-form {
           display: flex;
           background: var(--card-bg);
           border-radius: var(--border-radius);
           overflow: hidden;
           box-shadow: var(--shadow);
           border: 1px solid var(--border-color);
           backdrop-filter: blur(10px);
           transition: all 0.2s ease;
       }

       #bing-search-form.focused {
           border-color: var(--primary-color);
           box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
       }

       .search-history {
           position: absolute;
           top: calc(100% + 8px);
           left: 0;
           right: 0;
           background: var(--card-bg);
           border-radius: var(--border-radius);
           box-shadow: var(--shadow);
           border: 1px solid var(--border-color);
           backdrop-filter: blur(10px);
           z-index: 1000;
           max-height: 0;
           overflow: hidden;
           opacity: 0;
           transition: all 0.2s ease;
           transform: translateY(-10px);
       }

       .search-history.visible {
           max-height: 300px;
           opacity: 1;
           transform: translateY(0);
       }

       #search-input {
           flex: 1;
           padding: 12px 16px;
           border: none;
           background: transparent;
           color: var(--text-color);
           font-size: 1rem;
           outline: none;
       }

       #search-input::placeholder {
           color: var(--text-color);
           opacity: 0.6;
       }

       .search-btn {
           padding: 12px 16px;
           border: none;
           background: var(--primary-color);
           color: white;
           cursor: pointer;
           transition: background-color 0.2s ease;
       }

       .search-btn:hover {
           background: var(--secondary-color);
       }

       /* 现代黑深色模式下搜索按钮图标颜色 */
       [data-theme="dark"][data-color-theme="modern-black"] .search-btn {
           color: #000 !important;
       }

       .history-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 12px 16px;
           border-bottom: 1px solid var(--border-color);
           font-size: 0.9rem;
           font-weight: 500;
       }

       .clear-history {
           background: none;
           border: none;
           color: var(--primary-color);
           cursor: pointer;
           font-size: 0.8rem;
           padding: 4px 8px;
           border-radius: 4px;
           transition: background-color 0.2s ease;
       }

       .clear-history:hover {
           background: rgba(239, 68, 68, 0.1);
           color: #dc2626;
       }

       .history-list {
           list-style: none;
           padding: 0;
           margin: 0;
       }

       .history-list li {
           padding: 10px 16px;
           border-bottom: 1px solid var(--border-color);
           cursor: pointer;
           transition: background-color 0.2s ease;
           display: flex;
           justify-content: space-between;
           align-items: center;
       }

       .history-list li:last-child {
           border-bottom: none;
       }

       .history-list li:hover {
           background: rgba(59, 130, 246, 0.1);
       }

       .history-list .remove-item {
           color: #dc2626;
           background: none;
           border: none;
           cursor: pointer;
           opacity: 0.7;
           padding: 4px;
           border-radius: 4px;
           transition: opacity 0.2s ease;
       }

       .history-list .remove-item:hover {
           opacity: 1;
           background: rgba(239, 68, 68, 0.1);
       }

       /* 响应式调整 */
       @media (max-width: 768px) {
           .search-container {
               margin-bottom: 1.5em;
               padding: 0 15px;
           }

           .search-box {
               width: 100%;
           }

           .search-history.visible {
               max-height: 250px;
           }
       }

       /* 全局遮罩层 */
       .overlay {
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.5);
           backdrop-filter: blur(3px);
           z-index: 15;
           /* 在搜索框之下，在其他内容之上 */
           opacity: 0;
           visibility: hidden;
           transition: all 0.3s ease;
       }

       .overlay.visible {
           opacity: 1;
           visibility: visible;
       }

       /* 资源描述样式 */
       .resource-description {
           color: var(--text-color);
           flex-grow: 1;
           margin-bottom: 15px;
           font-size: 0.95rem;
           opacity: 0.9;
       }

       .resource-description b {
           color: var(--primary-color);
           font-weight: 600;
       }

       .resource-description p {
           margin: 0.3em 0;
       }

       /* 资源更新通知动画 */
       @keyframes slideInRight {
           from {
               transform: translateX(100%);
               opacity: 0;
           }

           to {
               transform: translateX(0);
               opacity: 1;
           }
       }

       @keyframes fadeOut {
           from {
               opacity: 1;
           }

           to {
               opacity: 0;
           }
       }