@charset "UTF-8";
/* ============================================================================
 * 页面全局基础主要样式
 * ============================================================================ */

    /* ===== 基础重置 ===== */
    * {
        margin: 0;                                 /* 外边距重置 */
        padding: 0;                                /* 内边距重置 */
        box-sizing: border-box;                    /* 使用border-box盒模型 */
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif; /* 设置默认字体 */
    }
    
    /* ===== 页面整体样式 ===== */
    /* body：整个页面的根容器，使用Flex垂直布局，确保底部版权始终在视口底部 */
    body {
        background: #f8f9fa;                       /* 浅灰色背景，提升阅读舒适度 */
        color: #333;                               /* 默认文字颜色深灰色 */
        min-height: 100vh;                         /* 最小高度为视口高度，确保撑满屏幕 */
        display: flex;                             /* 使用Flex布局 */
        flex-direction: column;                    /* 垂直方向排列子元素 */
        overflow-x: hidden;                        /* 隐藏水平溢出内容，避免滚动条 */
        padding: 0 2px 2px 2px;                    /* 移除顶部固定内边距，仅保留左右下边距 */
        transition: background-color 0.3s ease, color 0.3s ease; /* 平滑过渡夜间模式切换 */
    }
    
    /* ==== 移除交互元素的默认样式 ==== */
    button, input, textarea, select, a, a img {
        -webkit-appearance: none;     /* 移除iOS/Android原生样式 */
        appearance: none;             /* 移除现代浏览器原生样式 */
        outline: none;                /* 移除焦点轮廓线 */
        box-shadow: none;             /* 移除阴影效果 */
        -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
        text-decoration: none;        /* 移除链接下划线 */
    }
    input:focus, textarea:focus, select:focus, button:focus,
    *:active, *:focus {
        outline: none !important;     /* 强制移除焦点轮廓 */
     /* box-shadow: none !important; */ /* 强制移除焦点阴影 */
        -webkit-tap-highlight-color: transparent; /* 保持点击透明 */
    }
    
    /* ===== 主内容容器：用于正常排列标题和热榜，不再整体居中，避免跳动 ===== */
    /* .main-content：包裹标题区和热榜容器，利用flex将版权推至底部，但标题位置固定 */
    .main-content {
        flex: 1;                                   /* 占据剩余空间，将版权推至底部 */
        display: flex;                             /* 内部使用Flex实现垂直排列 */
        flex-direction: column;                    /* 垂直排列内部元素 */
        justify-content: flex-start;               /* 从顶部开始排列，不整体居中，防止跳动 */
        align-items: center;                       /* 水平居中（可选，子元素宽度自适应） */
        width: 100%;                               /* 宽度占满父容器 */
    }
    
    /* ===== 标题区域样式 ===== */
    /* .aggregate-header：整个标题区域（包含图标、主标题、时间信息）的容器，通过上边距固定在视口一定位置 */
    .aggregate-header {
        display: flex;                             /* 弹性布局 */
        flex-direction: column;                    /* 垂直排列主标题与时间信息 */
        align-items: center;                       /* 水平居中对齐 */
        justify-content: center;                   /* 垂直居中（本容器内） */
        gap: 8px;                                  /* 主标题与时间信息的间距 */
        padding: 0 16px;                           /* 左右内边距，保持内容不贴边 */
        margin-bottom: 0;                          /* 移除下边距，由热榜容器自然衔接 */
        text-align: center;                        /* 文字居中 */
        flex-shrink: 0;                            /* 防止被压缩 */
        margin-top: 15vh;                          /* 使用视口高度单位固定标题距离顶部距离，加载前后位置不变 */
        /* 移动端适配时会缩小上边距 */
    }
    /* .title-row：图标和主标题的水平排列容器 */
    .title-row {
        display: flex;                             /* 水平排列图标与主标题 */
        align-items: center;                       /* 垂直居中 */
        justify-content: center;                   /* 水平居中 */
        gap: 12px;                                 /* 图标与标题间距 */
    }
    /* .header-logo：网站图标的样式，夜间模式图标路径由JS动态切换，并作为可点击元素 */
    .header-logo {
        width: 40px;                               /* 图标宽度 */
        height: 40px;                              /* 图标高度 */
        object-fit: contain;                       /* 保持比例缩放，不裁剪 */
        display: block;                            /* 块级显示，便于控制尺寸 */
        transition: opacity 0.2s ease;             /* 平滑切换效果 */
        cursor: pointer;                           /* 鼠标悬停显示手型，提示可点击切换夜间模式 */
        outline: none;                             /* 移除点击时的轮廓阴影 */
        -webkit-tap-highlight-color: transparent;  /* 移除移动端点击高亮 */
    }
    /* .aggregate-header span：主标题文字样式 */
    .aggregate-header span {
        font-size: 1.8rem;                         /* 主标题字体大小 */
        font-weight: 600;                          /* 字重加粗 */
        background: linear-gradient(135deg, #1a2a6c, #b21f1f); /* 渐变色文字效果 */
        background-clip: text;                     /* 背景仅作用于文字区域 */
        -webkit-background-clip: text;             /* WebKit内核兼容 */
        color: transparent;                        /* 文字透明，显示背景渐变 */
        letter-spacing: 1px;                       /* 字间距稍微加大 */
        transition: background 0.3s ease;          /* 平滑过渡夜间模式切换 */
    }
    /* .datetime-info：显示公历、星期、农历的时间信息容器 */
    .datetime-info {
        font-size: 0.9rem;                         /* 比主标题小一号 */
        color: #666;                               /* 灰色文字，不抢眼 */
        background: rgba(255, 255, 255, 0.7);      /* 半透白背景，增加可读性 */
        backdrop-filter: blur(4px);                /* 背景模糊效果，提升质感 */
        padding: 4px 12px;                         /* 上下左右内边距 */
        border-radius: 30px;                       /* 圆角胶囊形状 */
        display: inline-block;                     /* 行内块，宽度由内容撑开 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);    /* 轻微阴影，增强层次 */
        letter-spacing: 0.5px;                     /* 适当字间距 */
        font-weight: 450;                          /* 中等字重 */
        transition: all 0.2s ease;                 /* 过渡效果，用于夜间模式切换 */
    }
    
    /* ===== 夜间模式整体样式（使用 html.dark-theme 确保高优先级，避免闪烁） ===== */
    /* 夜间模式 body 背景及文字颜色 */
    html.dark-theme body {
        background: #121212;                       /* 深色背景 */
        color: #e0e0e0;                            /* 浅色文字 */
    }
    /* 夜间模式标题渐变文字 */
    html.dark-theme .aggregate-header span {
        background: linear-gradient(135deg, #e0e0e0, #ffb347); /* 夜间模式渐变，更柔和 */
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
    }
    /* 夜间模式时间信息样式 */
    html.dark-theme .datetime-info {
        background: rgba(30, 30, 46, 0.8);          /* 深色半透背景 */
        color: #ccc;                               /* 浅灰色文字 */
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);      /* 阴影加深一点 */
    }
    /* 夜间模式版权信息样式 */
    html.dark-theme .copyright {
        color: #aaa;                               /* 稍亮的灰色 */
        border-top-color: rgba(255,255,255,0.1);   /* 白色半透边框 */
    }
    /* 夜间模式平台卡片样式 */
    html.dark-theme .kk-platform {
        background: #1e1e2e;                       /* 深蓝灰色背景，护眼 */
    }
    html.dark-theme .kk-title {
        color: #e0e0e0 !important;                 /* 浅灰色文字，保证对比度 */
    }
    html.dark-theme .kk-hot-item:hover .kk-title {
        color: green !important;                   /* 悬停时绿色，保持一致 */
    }
    html.dark-theme .kk-hot-item {
        border-bottom: 1px solid #2d2d3d;          /* 深色边框，分隔清晰 */
    }
    html.dark-theme .kk-index-normal {
        background: #2d2d3d;                       /* 深色背景序号 */
        color: #a0a0a0;                            /* 浅灰色文字 */
    }
    html.dark-theme .kk-hot-value {
        background: #1e1e2e;                       /* 与卡片背景一致，避免白色透出 */
    }
    /* 夜间模式滚动条轨道颜色适配 */
    html.dark-theme .kk-hot-list::-webkit-scrollbar-track {
        background: #2d2d3d;                       /* 深色轨道 */
    }
    html.dark-theme .kk-hot-list::-webkit-scrollbar-thumb {
        background: #5a5a6e;                       /* 较亮滑块 */
    }
    html.dark-theme .kk-hot-list::-webkit-scrollbar-thumb:hover {
        background: #7a7a8e;                       /* 悬停更亮 */
    }
    /* 夜间模式进度条容器背景稍亮 */
    html.dark-theme .kk-progress-container {
        background: rgba(255, 255, 255, 0.2);      /* 半透白，更明显 */
    }
    /* 夜间模式垂直滑块适配 */
    html.dark-theme .kk-vertical-slider {
        background: #3a3a4a;                       /* 深灰色背景 */
        border: 1px solid rgba(255, 255, 255, 0.1); /* 浅色边框，适应深色 */
    }
    html.dark-theme .kk-vertical-slider:hover {
        background: #4a4a5a;                       /* 悬停稍亮 */
    }
    
    /* 移动端标题适配：减小上边距以适应小屏幕 */
    @media (max-width: 768px) {
        .header-logo {
            width: 32px;                           /* 移动端图标缩小 */
            height: 32px;
        }
        .aggregate-header span {
            font-size: 1.4rem;                     /* 移动端主标题字体缩小 */
        }
        .datetime-info {
            font-size: 0.7rem;                     /* 移动端时间字体更小 */
            padding: 3px 10px;                     /* 内边距相应减小 */
        }
        .aggregate-header {
            gap: 6px;                              /* 缩小间距 */
            margin-top: 10vh;                      /* 移动端上边距适当减小，仍保持固定位置 */
        }
    }
    
    /* ===== 滑动容器 - 外层包装 ===== */
    /* .kk-slider-container：水平滚动区域的父容器，包含滑动区、进度条、垂直滑块 */
    .kk-slider-container {
        width: 100%;                               /* 宽度100%适应父容器 */
        overflow: hidden;                          /* 隐藏溢出内容 */
        position: relative;                        /* 相对定位，用于进度条和垂直滑块定位 */
        margin-top: 0;                          /* 与标题的间距，可根据需要微调（标题固定后，此间距保持视觉舒适） */
        margin-bottom: 20px;                       /* 底部间距，与版权信息保持距离 */
        border-radius: 8px;                        /* 圆角边框，柔和边缘 */
        background: none;                          /* 无背景，透明 */
        isolation: isolate;                        /* 隔离渲染上下文，避免层级冲突 */
        padding: 2px;                              /* 内边距，为进度条留空间 */
        flex-shrink: 0;                            /* 防止被压缩 */
    }
    
    /* ===== 滑动区域 - 实际滚动区域 ===== */
    /* .kk-slider：水平滚动的内容容器，内部放置所有平台卡片 */
    .kk-slider {
        display: block;                            /* 块级布局 */
        padding: 4px;                              /* 内边距，避免卡片紧贴边缘 */
        overflow-x: auto;                          /* 允许水平滚动 */
        scroll-behavior: smooth;                   /* 平滑滚动效果 */
        -webkit-overflow-scrolling: touch;         /* 移动端滚动优化，流畅 */
        scrollbar-width: none;                     /* Firefox隐藏滚动条 */
        -ms-overflow-style: none;                  /* IE/Edge隐藏滚动条 */
        white-space: nowrap;                       /* 防止子元素换行，实现水平排列 */
    }
    /* 移动端隐藏滚动条 */
    .kk-slider::-webkit-scrollbar {
        display: none;                             /* Chrome/Safari/Opera隐藏滚动条 */
    }
    
    /* ===== 平台卡片样式 ===== */
    /* .kk-platform：单个平台的热榜卡片容器 */
    .kk-platform {
        display: inline-block;                     /* 行内块布局，实现水平排列 */
        width: calc(100% - 40px);                  /* 基础宽度计算，预留左右边距空间 */
        max-width: 400px;                          /* 最大宽度限制，防止卡片过宽 */
        background: white;                         /* 白色背景 */
        border-radius: 8px;                        /* 圆角 */
        overflow: hidden;                          /* 隐藏溢出内容，保持圆角效果 */
        box-shadow: 0 2px 2px 0.5px rgba(46, 204, 113, 0.9); /* 绿色阴影，突出卡片 */
        height: 400px;                             /* 固定高度，保证卡片一致 */
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; /* 字体栈 */
        text-rendering: optimizeLegibility;        /* 优化字体渲染，提高清晰度 */
        -webkit-font-smoothing: antialiased;       /* 抗锯齿处理，使字体边缘平滑 */
        line-height: normal;                       /* 正常行高，避免影响外部 */
        letter-spacing: normal;                    /* 正常字母间距 */
        word-spacing: normal;                      /* 正常单词间距 */
        vertical-align: top;                       /* 顶部对齐，防止基线不对齐 */
        margin-right: 1px;                         /* 右侧微小间距，替代gap */
        white-space: normal;                       /* 内部元素正常换行 */
    }
    /* 最后一个平台卡片去掉右边距 */
    .kk-platform:last-child {
        margin-right: 0;
    }
    /* 容器内部所有元素重置（避免继承外部样式） */
    .kk-platform * {
        all: unset;                                /* 取消所有继承的CSS属性值 */
        box-sizing: border-box;                    /* 统一盒模型为边框盒 */
    }
    
    /* ===== 平台头部样式 ===== */
    /* .kk-platform-header：平台卡片的头部区域，包含平台名称和热度标题 */
    .kk-platform-header {
        padding: 6px 10px;                         /* 上下左右内边距 */
        display: block;                            /* 块级显示 */
        overflow: hidden;                          /* 清除浮动 */
        color: white;                              /* 文字白色，与头部背景对比 */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 底部浅色边框，分隔头部与内容 */
    }
    /* .kk-platform-title：平台名称样式 */
    .kk-platform-title {
        font-size: 1.1rem;                         /* 字体大小 */
        float: left;                               /* 左浮动，与右侧热度标题同行 */
    }
    /* .kk-heat-title：热度标题样式（仅在有热度值的平台显示） */
    .kk-heat-title {
        font-size: 1rem;                           /* 字体大小 */
        float: right;                              /* 右浮动 */
    }
    
    /* ===== 热搜列表容器 ===== */
    /* .kk-hot-list：卡片内热搜项列表的滚动容器 */
    .kk-hot-list {
        display: block;                            /* 块级布局 */
        height: calc(100% - 40px);                 /* 计算高度，减去头部高度（约40px） */
        overflow-y: auto;                          /* 允许垂直滚动，显示更多条目 */
        padding: 4px 0;                            /* 上下内边距，让滚动条不贴边 */
    }
    /* 热搜列表滚动条样式 */
    .kk-hot-list::-webkit-scrollbar {
        width: 4px;                                /* 滚动条宽度，细窄不占空间 */
    }
    .kk-hot-list::-webkit-scrollbar-track {
        background: #f1f1f1;                       /* 滚动条轨道背景浅灰色 */
        border-radius: 4px;                        /* 轨道圆角 */
    }
    .kk-hot-list::-webkit-scrollbar-thumb {
        background: #c1c1c1;                       /* 滚动条滑块灰色 */
        border-radius: 4px;                        /* 滑块圆角 */
    }
    .kk-hot-list::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;                       /* 滑块悬停时深灰色 */
    }
    
    /* ===== 单个热搜项样式 ===== */
    /* .kk-hot-item：单条热搜资讯的容器 */
    .kk-hot-item {
        display: flex;                             /* flex布局，灵活排列序号、标题、热度 */
        align-items: center;                       /* 垂直居中对齐内部元素 */
        padding: 4px 6px;                          /* 内边距，增加点击区域 */
        border-bottom: 1px solid #f0f0f0;          /* 底部浅色边框，分隔条目 */
        cursor: pointer;                           /* 鼠标悬停显示手型，提示可点击 */
        -webkit-tap-highlight-color: transparent !important; /* 去除移动端点击高亮 */
        tap-highlight-color: transparent !important; /* 标准属性，去除点击高亮 */
        position: relative;                        /* 为热度值的绝对定位提供参考 */
        text-align: left;                          /* 内容左对齐 */
        flex-wrap: nowrap;                         /* 禁止换行，保持一行 */
        overflow: hidden;                          /* 隐藏溢出内容 */
        gap: 8px;                                  /* flex子项间距 */
    }
    /* .kk-hot-item-wrap：允许标题换行的变体（用于特殊平台） */
    .kk-hot-item-wrap .kk-title {
        white-space: normal !important;            /* 允许换行 */
        overflow: visible !important;              /* 允许内容显示 */
        text-overflow: clip !important;            /* 不使用省略号 */
        line-height: 1.2;                          /* 行高适当增加，提升可读性 */
        padding-top: 2px;                          /* 顶部内边距微调 */
        padding-bottom: 2px;                       /* 底部内边距微调 */
    }
    /* 悬停时标题颜色变化，提升交互反馈 */
    .kk-hot-item:hover .kk-title {
        color: green;                              /* 标题变为绿色 */
    }
    
    /* 序号样式（基础样式） */
    /* .kk-index：热搜排名的序号容器，包含数字 */
    .kk-index {
        min-width: 20px;                           /* 最小宽度确保内容完整显示 */
        height: 20px;                              /* 固定高度 */
        display: flex;                             /* flex居中内容 */
        align-items: center;                       /* 垂直居中 */
        justify-content: center;                   /* 水平居中 */
        border-radius: 4px;                        /* 小圆角 */
        font-size: 14px;                           /* 字号适中 */
        color: white;                              /* 默认白色文字（深色背景时） */
        padding: 0 4px;                            /* 左右内边距，增加宽度 */
        box-sizing: border-box;                    /* 内边距计入宽度 */
        flex-shrink: 0;                            /* 禁止收缩，保持固定宽度 */
    }
    /* .kk-index-1：第1名特殊样式 - 深红色，醒目 */
    .kk-index-1 {
        background: #8B0000;                       /* 深红色背景 */
    }
    /* .kk-index-2：第2名特殊样式 - 红色，次醒目 */
    .kk-index-2 {
        background: #FF0000;                       /* 红色背景 */
    }
    /* .kk-index-3：第3名特殊样式 - 浅红色，略醒目 */
    .kk-index-3 {
        background: #FF6B6B;                       /* 浅红色背景 */
    }
    /* .kk-index-normal：普通序号样式（4名及以后） */
    .kk-index-normal {
        background: #f0f0f0;                       /* 浅灰色背景 */
        color: #666;                               /* 深灰色文字，不抢眼 */
    }
    
    /* 标题样式 */
    /* .kk-title：热搜资讯的标题文本 */
    .kk-title {
        font-size: 15px;                           /* 标准字号 */
        color: #000000;                            /* 纯黑色，保证阅读对比度 */
        white-space: nowrap;                       /* 默认不换行，超出省略 */
        overflow: hidden;                          /* 隐藏溢出 */
        text-overflow: ellipsis;                   /* 文本溢出显示省略号 */
        text-align: left;                          /* 左对齐 */
        flex: 1;                                   /* 占据剩余空间，自动伸缩 */
        min-width: 0;                              /* 允许压缩，防止溢出 */
        letter-spacing: -0.1px;                    /* 微小负间距，让文字更紧凑 */
        padding-right: 50px;                       /* 右侧预留空间给热度值（绝对定位） */
        box-sizing: border-box;                    /* 内边距计入宽度 */
    }
    /* 针对没有热度值的平台，标题不需要预留右侧空间 */
    .kk-title:last-child {
        padding-right: 0px;                        /* 减小右侧预留空间，仅保留少量 */
    }
    /* .kk-hot-value：热度数值样式（仅在需要显示热度的平台出现） */
    .kk-hot-value {
        color: #ff3b30;                            /* 红色文字，突出热度 */
        font-size: 14px;                           /* 字号略小 */
        flex-shrink: 0;                            /* 禁止收缩，保持固定宽度 */
        position: absolute;                        /* 绝对定位，脱离文档流，避免影响标题宽度 */
        right: 10px;                               /* 距离右侧10px */
        top: 50%;                                  /* 垂直居中 */
        transform: translateY(-50%);               /* 垂直偏移修正，实现真正居中 */
        background: white;                         /* 白色背景，避免标题文字透出 */
        padding-left: 4px;                         /* 左侧内边距，让文字不贴边 */
    }
    
    /* ===== 加载中状态样式 ===== */
    /* .kk-loading：数据加载时的占位容器 */
    .kk-loading {
        display: flex;                             /* flex居中布局 */
        flex-direction: column;                    /* 垂直排列 */
        justify-content: center;                   /* 垂直居中 */
        align-items: center;                       /* 水平居中 */
        text-align: center;                        /* 文字居中 */
        padding: 20px;                             /* 内边距，撑开空间 */
        color: #666;                               /* 灰色文字 */
        height: 100%;                              /* 占满父容器高度 */
        min-height: 300px;                         /* 最小高度，保证加载动画可见 */
    }
    /* .kk-spinner：旋转加载动画 */
    .kk-spinner {
        display: block;                            /* 块级显示 */
        width: 30px;                               /* 宽度30px */
        height: 30px;                              /* 高度30px */
        border: 3px solid rgba(102, 102, 102, 0.3); /* 半透明灰色边框 */
        border-radius: 50%;                        /* 圆形 */
        border-top-color: #666;                    /* 顶部边框颜色加深，形成旋转效果 */
        animation: kk-spin 1s ease-in-out infinite; /* 无限旋转动画 */
        margin-bottom: 15px;                       /* 与文字间距 */
    }
    /* 旋转动画关键帧 */
    @keyframes kk-spin {
        to { 
            transform: rotate(360deg);              /* 旋转一圈 */
        }
    }
    
    /* ===== 版权信息样式 ===== */
    /* .copyright：底部版权声明区域 */
    .copyright {
        text-align: center;                        /* 文字居中 */
        font-size: 12px;                           /* 小号字体 */
        color: #999;                               /* 浅灰色，不干扰主内容 */
        padding: 16px 16px 12px 16px;              /* 上下内边距，左右内边距 */
        border-top: 1px solid rgba(0,0,0,0.05);    /* 极浅上边框，视觉分隔 */
        background: transparent;                   /* 透明背景，融入页面 */
        flex-shrink: 0;                            /* 防止被压缩，始终显示 */
        margin-top: 0;                             /* 取消上边距，由.main-content撑开 */
        transition: color 0.3s ease, border-color 0.3s ease; /* 平滑过渡夜间模式 */
    }
    /* 移动端版权信息调整 */
    @media (max-width: 768px) {
        .copyright {
            padding: 12px 12px 10px 12px;          /* 减小内边距，节省空间 */
            font-size: 10px;                       /* 字体再小一点 */
        }
    }
    
    /* ===== 响应式设计 移动端卡片宽度适配 ===== */
    @media (max-width: 768px) {
        .kk-platform {
            width: calc(100% - 12px);              /* 移动端卡片宽度略微增大，左右留白更少 */
        }
        .kk-title {
            font-weight: 300;                      /* 标题稍细，减轻视觉重量 */
            padding-right: 42px;                     /* 移动端减小右侧留白，多显示几个字 */
        }
        .kk-slider-container {
            margin-top: 0;                      /* 移动端上间距减小，适应垂直居中布局 */
            margin-bottom: 15px;                   /* 下间距减小 */
        }
        /* 移动端热度值靠右移动并半透明背景 */
        .kk-hot-value {
            right: 4px;                               /* 比PC端(10px)更靠右边缘 */
            background-color: rgba(255, 255, 255, 0.8); /* 背景半透明0.8，避免文字重叠 */
        }
        /* 夜间模式移动端热度值背景半透明适配 */
        html.dark-theme .kk-hot-value {
            background-color: rgba(30, 30, 46, 0.8);   /* 深色半透明，保持0.8透明度 */
        }
    }
    
    /* ===================== 进度条样式 ===================== */
    /* .kk-progress-container：水平滚动进度条的容器，默认隐藏，鼠标悬停时显示 */
    .kk-progress-container {
        position: absolute;                        /* 绝对定位，相对于滑动容器 */
        bottom: 0;                                 /* 紧贴容器底部 */
        left: 0;                                   /* 左侧对齐 */
        width: 100%;                               /* 宽度占满 */
        height: 2px;                               /* 高度2像素，细条不占空间 */
        background: rgba(255, 255, 255, 0.1);      /* 半透背景，基础轨道 */
        opacity: 0;                                /* 默认完全透明，隐藏 */
        transition: opacity 0.3s ease;             /* 透明度过渡，平滑显示/隐藏 */
        z-index: 10;                               /* 确保在最上层 */
        pointer-events: none;                      /* 防止进度条干扰鼠标事件 */
    }
    /* 当鼠标悬停在滑动容器上时显示进度条 */
    .kk-slider-container:hover .kk-progress-container {
        opacity: 1;                                /* 完全不透明，显示进度条 */
    }
    /* .kk-progress-bar：实际进度条，宽度由JS动态更新 */
    .kk-progress-bar {
        height: 100%;                              /* 高度填充容器 */
        width: 0%;                                 /* 初始宽度为0，由JS动态更新 */
        background: linear-gradient(90deg, #ff3f81, #2932e1); /* 粉紫渐变，醒目 */
        border-radius: 0 2px 2px 0;                /* 右侧圆角，美观 */
        transition: none;                          /* 无过渡效果，实时更新宽度 */
    }
    
    /* ===================== 垂直滑块样式（PC端） ===================== */
    /* .kk-vertical-slider-container：垂直滑块的容器，仅在PC端显示 */
    .kk-vertical-slider-container {
        position: absolute;                        /* 绝对定位，相对于滑动容器 */
        right: 4px;                                /* 距离右侧4px */
        top: 8px;                                  /* 距离顶部8px */
        bottom: 8px;                               /* 距离底部8px，高度自适应 */
        width: 16px;                               /* 容器宽度16px，容纳滑块和线 */
        z-index: 20;                               /* 高于普通内容 */
        opacity: 0;                                /* 默认透明，鼠标悬停显示 */
        transition: opacity 0.3s ease;             /* 透明度过渡 */
        pointer-events: auto;                      /* 允许鼠标事件 */
    }
    /* .kk-vertical-line：垂直滑块的轨道（细线） */
    .kk-vertical-line {
        position: absolute;                        /* 绝对定位，相对容器 */
        left: 50%;                                 /* 水平居中 */
        top: 0;                                    /* 从顶部开始 */
        bottom: 0;                                 /* 到底部结束 */
        width: 2px;                                /* 线宽2px，细长 */
        background: linear-gradient(to bottom,     /* 垂直渐变，营造光效 */
            rgba(255, 255, 255, 0.2) 0%,          /* 顶部半透白 */
            rgba(255, 255, 255, 0.8) 50%,         /* 中部亮白 */
            rgba(255, 255, 255, 0.2) 100%);       /* 底部半透白 */
        transform: translateX(-50%);               /* 水平居中修正 */
        border-radius: 1px;                        /* 微小圆角 */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);   /* 阴影增强立体感 */
    }
    /* .kk-vertical-slider：可拖拽的滑块按钮 */
    .kk-vertical-slider {
        position: absolute;                        /* 绝对定位，沿垂直线移动 */
        left: 50%;                                 /* 水平居中 */
        width: 12px;                               /* 宽度12px */
        height: 24px;                              /* 高度24px，易于抓取 */
        background: #ffffff;                       /* 白色背景 */
        border-radius: 4px;                        /* 圆角矩形 */
        transform: translateX(-50%);               /* 水平居中修正 */
        cursor: grab;                              /* 抓取光标 */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* 阴影突出立体感 */
        border: 1px solid rgba(0, 0, 0, 0.1);     /* 浅色边框 */
        transition: background-color 0.2s ease,    /* 背景色过渡 */
                    transform 0.1s ease;           /* 缩放过渡 */
        z-index: 21;                               /* 高于垂直线 */
    }
    /* 滑块悬停效果 */
    .kk-vertical-slider:hover {
        background: #f0f0f0;                       /* 浅灰色背景 */
        transform: translateX(-50%) scale(1.05);   /* 轻微放大，交互反馈 */
    }
    /* 滑块拖动效果 */
    .kk-vertical-slider:active {
        cursor: grabbing;                          /* 抓取中光标 */
        transform: translateX(-50%) scale(0.95);   /* 轻微缩小，模拟按下 */
    }
    /* 移动端完全隐藏垂直滑块 */
    @media (max-width: 768px) {
        .kk-vertical-slider-container {
            display: none !important;              /* 强制隐藏，不占用空间 */
        }
    }
    /* PC端确保显示 */
    @media (min-width: 769px) {
        .kk-vertical-slider-container {
            display: block !important;             /* 强制显示 */
        }
    }





/* ============================================================================
 * 滚动日报组件样式
 * ============================================================================ */

        /* ========== 主容器样式 ========== */
        .eryuribao-container {
            width: 100%;                /* 宽度占满父容器 */
            overflow: hidden;           /* 隐藏溢出内容（滚动轨道超出部分） */
            background-color: transparent; /* 透明背景，适配任何底色 */
            border: 1px dashed #4caf50;  /* 默认边框为绿色（当天资讯） */
            border-radius: 8px;         /* 圆角半径，柔和边缘 */
            position: relative;         /* 相对定位，供内部绝对定位元素参考 */
            height: 36px;               /* 固定高度，紧凑设计 */
            margin: 30px 0 1px;       /* 上边距（整体下移），下边距（使后续元素上移） */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影，提升立体感 */
            display: block;             /* 块级显示，占满宽度 */
            transition: border-color 0.2s ease; /* 边框颜色过渡平滑 */
        }
        
        /* 非当天资讯时边框变为黄色（通过JS动态添加类） */
        .eryuribao-container.outdated {
            border-color: #ffcc00;      /* 黄色虚线边框，提示非当日资讯 */
        }
        
        /* ========== 滚动轨道样式 ========== */
        .eryuribao-track {
            display: inline-block;      /* 行内块，使内容横向排列 */
            white-space: nowrap;        /* 强制不换行，实现水平滚动 */
            position: absolute;         /* 绝对定位，相对父容器 */
            left: 100%;                 /* 初始位置在容器右侧外部（右侧外） */
            top: -2.6px;                /* 微调垂直位置，向上移动0.5px，使资讯内容更靠上 */
            padding: 0;                 /* 清除内边距 */
            visibility: hidden;         /* 初始隐藏，避免加载时闪烁 */
            animation-play-state: paused; /* 初始暂停动画，内容加载完成后启动 */
        }
        
        /* 滚动动画关键帧：从起点向左滚动到完全离开视口，实现无缝循环 */
        @keyframes scrollAnimation {
            0% {
                transform: translateX(0); /* 初始位置不变 */
            }
            100% {
                transform: translateX(calc(-100% - 100vw)); /* 向左移动自身宽度+视口宽度 */
            }
        }
        
        /* 鼠标悬停时暂停动画，方便用户阅读 */
        .eryuribao-container:hover .eryuribao-track {
            animation-play-state: paused !important;
        }
        
        /* ========== 单个滚动项样式 ========== */
        .eryuribao-item {
            display: inline-block;      /* 横向排列，构成跑马灯内容 */
            padding: 0 20px;            /* 左右内边距，拉开各项间距 */
            color: #333;                /* 默认文字颜色（深色模式会覆盖） */
            position: relative;         /* 相对定位，用于伪元素分隔线定位 */
            line-height: 36px;          /* 行高与容器高度一致，实现垂直居中 */
            font-size: 14px;            /* 字号适中，清晰可读 */
        }
        
        /* 分隔线：除最后一项外，右侧添加竖线分隔符 */
        .eryuribao-item:not(:last-child):after {
            content: "|";               /* 竖线分隔符 */
            position: absolute;         /* 绝对定位，相对于父项 */
            right: 0;                   /* 靠右对齐 */
            color: #e6e6e6;             /* 浅灰色，不抢眼 */
            top: 50%;                  /* 垂直居中 */
            transform: translateY(-50%); /* 精确垂直居中 */
        }
        
        /* ========== 序号样式 ========== */
        .eryuribao-rank {
            font-weight: bold;          /* 加粗，突出排名顺序 */
            color: #ff8200;             /* 橙色，醒目 */
            margin-right: 5px;          /* 与标题间距 */
        }
        
        /* ========== 标题样式（纯文本，无链接） ========== */
        .eryuribao-title {
            text-decoration: none;      /* 无下划线 */
            color: inherit;             /* 继承父级颜色，方便深色模式统一控制 */
            user-select: none;          /* 禁止用户选择文本（避免拖拽时选中） */
            -webkit-user-drag: none;    /* 禁止拖拽（WebKit内核） */
            -moz-user-select: none;     /* 禁止选择（Firefox） */
            cursor: default;            /* 默认鼠标样式（非链接） */
        }
        
        /* 悬停效果：与序号色一致，保持交互反馈 */
        .eryuribao-title:hover {
            color: #ff8200;             /* 悬停变橙色 */
        }
        
        /* 微语前缀 “微语：” 专属绿色，且不受悬停影响 */
        .tip-label {
            color: green !important;    /* 绿色，强制覆盖 */
        }
        /* 悬停时微语前缀保持绿色，不被父级覆盖 */
        .eryuribao-title:hover .tip-label {
            color: green !important;
        }
        
        /* ========== 右下角标签 ========== */
        .eryuribao-label {
            position: absolute;         /* 绝对定位，相对父容器 */
            right: 8px;                 /* 距离右侧8px */
            bottom: -1px;             /* 向下微调，与滚动资讯形成更明显间距 */
            top: auto;                 /* 清除默认top */
            font-size: 11px;            /* 字号稍小，精致不干扰 */
            color: #999;                /* 灰色文字，低调 */
            z-index: 2;                /* 层级稍高，确保显示在轨道之上 */
            background-color: transparent; /* 透明背景 */
            pointer-events: none;       /* 不干扰鼠标事件，保证悬停滚动暂停正常 */
            white-space: nowrap;        /* 禁止换行，保持单行 */
        }
        
        /* ========== 间隔元素（用于无缝滚动） ========== */
        .eryuribao-spacer {
            display: inline-block;      /* 行内块，参与滚动 */
            width: 80px;               /* 固定宽度，制造视觉空隙 */
            text-align: center;        /* 文字居中 */
            color: #ccc;               /* 浅灰色，不抢眼 */
            font-size: 12px;           /* 适当字号 */
            letter-spacing: 2px;       /* 字间距，视觉舒展 */
        }
        
        /* ========== 加载提示信息样式 ========== */
        .eryuribao-message {
            text-align: center;         /* 居中显示 */
            padding: 10px 0;           /* 上下内边距，增加点击区域 */
            color: #666;               /* 默认灰色 */
            font-size: 14px;            /* 字号适中 */
            width: 100%;                /* 占满宽度 */
            position: absolute;         /* 绝对定位，覆盖容器 */
            top: 50%;                  /* 垂直居中 */
            transform: translateY(-50%); /* 偏移自身高度一半，精确居中 */
            margin: 0 auto;            /* 水平自动居中 */
            z-index: 1;                /* 层级低于轨道，但高于背景 */
            background: transparent;    /* 透明背景，不遮挡边框 */
            pointer-events: none;       /* 不干扰点击，让滚动条可点击 */
        }
        
        /* ========== 深色模式适配 ========== */
        /* 当父级或根元素添加 .dark-theme 类时，自动切换文字颜色 */
        .dark-theme .eryuribao-item {
            color: #e0e0e0;           /* 资讯内容文字变浅灰，深色背景下可读 */
        }
        .dark-theme .eryuribao-rank {
            color: #ffaa33;           /* 序号亮橙色，更醒目 */
        }
        .dark-theme .eryuribao-label {
            color: #aaa;              /* 右下角标签颜色适配深色 */
        }
        .dark-theme .eryuribao-title:hover {
            color: #ffaa33;          /* 悬停色适配深色主题 */
        }
        .dark-theme .tip-label {
            color: #6fbf6f !important; /* 微语前缀在深色下保持绿色但调亮，确保对比度 */
        }





/* ============================================================================
 * 浮动搜索框组件样式
 * ============================================================================ */

        /* 搜索框主容器 - 固定圆形按钮，右上角 */
        .eryusousuo-box {
            position: fixed;                  /* 固定定位，不随页面滚动 */
            top: 20px;                        /* 距离顶部20px */
            right: 20px;                      /* 距离右侧20px */
            width: 44px;                      /* 初始圆形宽度 */
            height: 44px;                     /* 初始圆形高度 */
            background-color: #ffffff;        /* 日间白色背景 */
            border-radius: 50%;               /* 圆形外观 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 轻微阴影提升层次 */
            transition: width 0.35s cubic-bezier(0.2, 0.9, 0.4, 1.1), /* 宽度平滑展开 */
                        border-radius 0.3s ease,                     /* 圆角过渡 */
                        box-shadow 0.2s;                             /* 阴影过渡 */
            overflow: visible;                /* 下拉菜单溢出可见 */
            z-index: 1000;                    /* 确保在最上层 */
            cursor: pointer;                  /* 圆形时显示手型，提示可点击 */
        }
        
        /* 展开状态 - 由 JS 添加 .hover-force 类控制（不再依赖 :hover） */
        .eryusousuo-box.hover-force {
            width: 260px;                     /* 展开后的宽度（PC端默认） */
            border-radius: 22px 22px 0 22px;     /* PC段圆角样式 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 展开时阴影加深 */
        }
        
        /* 搜索输入框样式 - 修复溢出：使用 border-box 让 padding 包含在宽度内 */
        .eryusousuo-input {
            width: 100%;                      /* 占满父容器宽度 */
            height: 44px;                     /* 与按钮同高 */
            font-size: 15px;                  /* 字体大小适中 */
            padding: 0 60px 0 16px;           /* 右侧留出放大镜和清除按钮空间，左侧内边距16px */
            border: none;                     /* 无边框，融入背景 */
            border-radius: 22px 22px 0 22px;     /* 与父容器圆角一致（左上左下右上圆角，右下直角） */
            background-color: transparent;    /* 透明背景，显示父容器背景色 */
            color: #1f2d3d;                   /* 日间深灰色文字 */
            outline: none;                    /* 移除外发光 */
            opacity: 0;                       /* 圆形时透明不可见 */
            cursor: pointer;                  /* 圆形时显示手型 */
            box-sizing: border-box;           /* 使 padding 包含在 width 内，避免文字溢出 */
        }
        
        /* 收缩状态（未展开） - 让透明度立即变为0，避免宽度收缩时文本右移 */
        .eryusousuo-box:not(.hover-force) .eryusousuo-input {
            transition: opacity 0s;           /* 收缩时文本瞬间消失，无视觉位移 */
        }
        
        /* 展开状态 - 输入框可见并平滑淡入 */
        .eryusousuo-box.hover-force .eryusousuo-input {
            opacity: 1;                       /* 完全显示 */
            cursor: text;                     /* 变为文本输入光标 */
            transition: opacity 0.2s ease 0.1s; /* 展开时平滑淡入，延迟0.1s */
        }
        
        /* 占位符样式 - 日间 */
        .eryusousuo-input::placeholder {
            color: #9aa6b5;                   /* 浅灰色占位文字 */
            font-weight: 400;                 /* 正常字重 */
        }
        
        /* 清除按钮 (×) - 默认隐藏 */
        .eryusousuo-clear {
            position: absolute;               /* 绝对定位，相对于父容器 */
            right: 35px;                      /* 紧靠放大镜左侧（距离右侧35px） */
            top: 50%;                         /* 垂直居中 */
            transform: translateY(-50%);      /* 精确垂直居中 */
            width: 24px;                      /* 固定宽度24px */
            height: 24px;                     /* 固定高度24px */
            line-height: 24px;                /* 文字垂直居中 */
            text-align: center;               /* 文字水平居中 */
            font-size: 22px;                  /* 乘号大小22px */
            font-weight: 300;                 /* 细体字重 */
            color: #8f9bb3;                   /* 日间灰色 */
            cursor: default;                  /* 默认箭头 */
            opacity: 0;                       /* 默认隐藏 */
            transition: opacity 0.2s ease, color 0.2s; /* 淡入淡出过渡 */
            border-radius: 50%;               /* 圆形背景（悬停效果） */
            z-index: 2;                       /* 位于输入框上方 */
            pointer-events: none;             /* 默认不可点击 */
        }
        
        /* 展开且有内容时 - 显示清除按钮 */
        .eryusousuo-box.hover-force .eryusousuo-input:not(:placeholder-shown) ~ .eryusousuo-clear {
            opacity: 0.7;                     /* 半透明显示 */
            cursor: pointer;                  /* 手型光标 */
            pointer-events: auto;             /* 变为可点击 */
        }
        
        /* 清除按钮悬停效果 */
        .eryusousuo-clear:hover {
            color: #e5484d;                   /* 悬停变红色 */
            opacity: 1;                       /* 完全不透明 */
        }
        
        /* 放大镜图标 (搜索按钮) - 默认居中圆形状态 */
        .eryusousuo-fangdajing {
            position: absolute;               /* 绝对定位 */
            left: 50%;                        /* 水平居中（相对于父容器） */
            top: 50%;                         /* 垂直居中 */
            transform: translate(-50%, -50%); /* 精确水平+垂直居中 */
            width: 24px;                      /* 图标容器宽24px */
            height: 24px;                     /* 图标容器高24px */
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%235f6c84"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center; /* SVG 放大镜图标 */
            background-size: 20px;            /* 图标实际大小20px */
            cursor: pointer;                  /* 手型光标 */
            opacity: 0.8;                     /* 轻微半透明 */
            transition: none;                 /* 移除过渡，避免干扰抖动动画 */
            z-index: 2;                       /* 位于输入框上方 */
            filter: brightness(0.95);         /* 略微变暗 */
        }
        
        /* 圆形状态下放大镜稍大且居中（未展开时） */
        .eryusousuo-box .eryusousuo-fangdajing {
            opacity: 1;                       /* 完全不透明 */
            width: 26px;                      /* 稍大一点，更易点击 */
            height: 26px;                     /* 稍大一点 */
            background-size: 22px;            /* 图标稍大22px */
        }
        
        /* 展开状态下放大镜移到右侧（仅当 .hover-force 存在时） */
        .eryusousuo-box.hover-force .eryusousuo-fangdajing {
            left: auto;                       /* 取消居中定位 */
            right: 12px;                      /* 距离右侧12px */
            transform: translateY(-50%);      /* 仅垂直居中 */
            top: 50%;                         /* 垂直居中 */
            opacity: 0.9;                     /* 略微加深 */
            transition: all 0.2s ease;        /* 展开时平滑移动（不影响抖动） */
        }
        
        /* 未展开时悬停动画：精确抖动三下（逆时针/顺时针各30°，共三个来回） */
        @keyframes shakeRotate {
            0%   { transform: translate(-50%, -50%) rotate(0deg);   }   /* 起始0° */
            8%   { transform: translate(-50%, -50%) rotate(-30deg); }   /* 第1次逆时针30° */
            16%  { transform: translate(-50%, -50%) rotate(30deg);  }   /* 第1次顺时针30° */
            25%  { transform: translate(-50%, -50%) rotate(-30deg); }   /* 第2次逆时针30° */
            33%  { transform: translate(-50%, -50%) rotate(30deg);  }   /* 第2次顺时针30° */
            41%  { transform: translate(-50%, -50%) rotate(-30deg); }   /* 第3次逆时针30° */
            50%  { transform: translate(-50%, -50%) rotate(30deg);  }   /* 第3次顺时针30° */
            66%  { transform: translate(-50%, -50%) rotate(0deg);   }   /* 快速回到0° */
            100% { transform: translate(-50%, -50%) rotate(0deg);   }   /* 稳定在0° */
        }
        
        /* 仅当父容器未展开（无 .hover-force）且鼠标悬停在整个按钮上时，放大镜执行精确抖动动画（只播放一次） */
        .eryusousuo-box:not(.hover-force):hover .eryusousuo-fangdajing {
            animation: shakeRotate 0.35s ease-in-out 1 forwards; /* 0.35秒一次，结束保持最后状态（0°） */
            transform: translate(-50%, -50%) rotate(0deg);       /* 确保动画结束后回到原位 */
        }
        
        /* 右侧透明遮罩层 - 禁止点击按钮右侧区域（保留原有逻辑） */
        .eryusousuo-right-zhezhaoceng {
            position: fixed;                  /* 固定定位，不随页面滚动 */
            top: 20px;                        /* 与搜索框主容器的 top 值一致 */
            height: 44px;                     /* 与搜索框主容器高度一致 */
            left: calc(100vw - 20px);         /* 紧贴按钮右侧边缘（按钮右边缘 = 视口宽度 - 20px） */
            right: 0;                         /* 延伸到屏幕最右端 */
            background: transparent;          /* 完全透明，无视觉干扰 */
            pointer-events: auto;             /* 拦截鼠标/触摸事件，阻止下层元素被点击 */
            z-index: 10000;                   /* 确保位于所有内容的最上层 */
        }
        
        /* 下拉菜单容器 - 紧贴搜索框底部，右对齐，默认隐藏 */
        .eryusousuo-dropdown {
            position: absolute;               /* 绝对定位，相对于搜索框容器 */
            top: 44px;                        /* 紧贴搜索框底部（无间隙） */
            right: 0;                         /* 右对齐（PC和移动端统一） */
            width: 173px;                     /* PC端默认宽度（260 * 2/3 ≈ 173px） */
            background-color: rgba(255, 255, 255, 0.98); /* 日间白色背景，透明度0.98 */
            border-radius: 0 0 8px 8px;     /* 左上右上直角，左下右下小圆角 */
            list-style: none;                 /* 去除列表默认样式 */
            padding: 8px 0;                   /* 上下内边距8px，左右无 */
            margin: 0;                        /* 清除外边距 */
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15); /* 阴影 */
            display: none;                    /* 默认隐藏，JS控制显示 */
            z-index: 1001;                    /* 高于搜索框容器 */
            max-height: 320px;                /* 最大高度320px，超出可滚动 */
            overflow-y: auto;                 /* 垂直滚动 */
            border: 1px solid #e2e8f0;        /* 浅边框 */
            border-top: none;                 /* 顶部无边框，与搜索框无缝衔接 */
            scrollbar-width: none;            /* Firefox 隐藏滚动条 */
            -ms-overflow-style: none;         /* IE/Edge 隐藏滚动条 */
        }
        
        /* Chrome/Safari 隐藏滚动条 */
        .eryusousuo-dropdown::-webkit-scrollbar {
            display: none;                    /* 隐藏滚动条但保留功能 */
        }
        
        /* 下拉菜单项 */
        .eryusousuo-dropdown li {
            display: block;                   /* 块级显示 */
            width: 100%;                      /* 占满宽度 */
            padding: 0;                       /* 无内边距（由内部链接控制） */
            margin: 0;                        /* 无外边距 */
            border-bottom: 1px solid #e2e8f0; /* 下边框分隔线 */
        }
        
        /* 下拉菜单链接样式 */
        .eryusousuo-dropdown a {
            display: block;                   /* 块级显示，便于点击 */
            padding: 8px 12px;                /* 内边距8px上下，12px左右 */
            text-decoration: none;            /* 去掉下划线 */
            color: #1e293b;                   /* 深灰色文字 */
            font-size: 14px;                  /* 字体略小，适应窄宽度 */
            font-weight: 450;                 /* 中等粗细 */
            transition: background 0.2s, color 0.2s; /* 背景和颜色过渡 */
            border-radius: 8px;               /* 圆角背景 */
            margin: 2px 4px;                  /* 外边距略微减小 */
            white-space: normal;              /* 允许换行，避免溢出 */
            word-break: break-word;           /* 长单词换行 */
        }
        
        /* 下拉菜单链接悬停效果 */
        .eryusousuo-dropdown a:hover {
            background: #f1f5f9;              /* 悬停浅灰背景 */
            color: #0f172a;                   /* 深色文字 */
        }
        
        /* 当前选中搜索引擎高亮 */
        .eryusousuo-dropdown li.active a {
            color: #059669 !important;        /* 绿色文字，提高优先级 */
            background: rgba(5, 150, 105, 0.1); /* 淡绿背景 */
            font-weight: 500;                 /* 加粗 */
        }
        
        /* ==============================
           移动端专属样式
           ============================== */
        @media (max-width: 768px) {
            .eryusousuo-box {
                top: 12px;                    /* 顶部距离减小 */
                right: 12px;                  /* 右侧距离减小 */
                width: 40px;                  /* 初始圆形宽度40px */
                height: 40px;                 /* 初始圆形高度40px */
            }
            .eryusousuo-box.hover-force {
                width: 200px;                 /* 移动端展开宽度200px */
                border-radius: 20px 20px 0 20px; /* 移动端圆角 */
                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* 阴影加深 */
            }
            .eryusousuo-input {
                height: 40px;                 /* 输入框高度40px，与按钮同高 */
                border-radius: 20px 20px 0 20px; /* 与父容器圆角完全一致 */
            }
            .eryusousuo-dropdown {
                top: 40px;                    /* 紧贴搜索框底部 */
                width: 133px;                 /* 比输入框窄1/3 */
                max-height: 260px;            /* 最大高度260px */
            }
            .eryusousuo-dropdown a {
                padding: 6px 8px;             /* 减小内边距适应窄宽 */
                font-size: 13px;              /* 字体略小 */
                margin: 2px 2px;              /* 减小外边距 */
            }
        }
        
        /* ==============================
           夜间模式适配（依赖外部 .dark-theme 类）
           ============================== */
        .dark-theme .eryusousuo-box {
            background-color: #2d2d3a;        /* 深色背景 */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); /* 更深阴影 */
        }
        .dark-theme .eryusousuo-box.hover-force {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* 展开时阴影加深 */
        }
        .dark-theme .eryusousuo-input {
            color: #e2e8f0;                   /* 浅色文字 */
        }
        .dark-theme .eryusousuo-input::placeholder {
            color: #94a3b8;                   /* 浅灰色占位符 */
        }
        .dark-theme .eryusousuo-clear {
            color: #94a3b8;                   /* 浅灰色清除按钮 */
        }
        .dark-theme .eryusousuo-clear:hover {
            color: #f87171;                   /* 悬停红色 */
        }
        .dark-theme .eryusousuo-fangdajing {
            filter: brightness(1.2);          /* 调亮图标 */
            opacity: 0.9;                     /* 略微透明 */
        }
        .dark-theme .eryusousuo-dropdown {
            background-color: rgba(30, 41, 59, 0.98); /* 深色半透明背景 */
            border: 1px solid #334155;        /* 深色边框 */
            border-top: none;                 /* 顶部无边框 */
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); /* 深色阴影 */
        }
        .dark-theme .eryusousuo-dropdown li {
            border-bottom: 1px solid #334155; /* 深色分隔线 */
        }
        .dark-theme .eryusousuo-dropdown a {
            color: #cbd5e1;                   /* 浅灰文字 */
        }
        .dark-theme .eryusousuo-dropdown a:hover {
            background: #334155;              /* 深色悬停背景 */
            color: #f1f5f9;                   /* 白色文字 */
        }
        .dark-theme .eryusousuo-dropdown li.active a {
            color: #34d399 !important;        /* 亮绿色高亮 */
            background: rgba(52, 211, 153, 0.15); /* 半透绿背景 */
        }