/* ===== 滑动容器 - 外层包装 ===== */
        .kk-slider-container {
            width: 100%; /* 宽度100%适应父容器 */
            overflow: hidden; /* 隐藏溢出内容 */
            position: relative; /* 相对定位 */
            margin-top: 2px; /* 上边距 */
            border-radius: 8px; /* 圆角边框 */
            background: rgba(255, 255, 255, 0.1); /* 半透明白色背景 */
            padding: 2px; /* 内边距 */
        }
        
        /* ===== 滑动区域 - 实际滚动区域 ===== */
        .kk-slider {
            display: flex; /* 弹性布局 */
            gap: 4px; /* 子项间距 */
            padding: 4px; /* 内边距 */
            overflow-x: auto; /* 允许水平滚动 */
            scroll-behavior: smooth; /* 平滑滚动效果 */
            -webkit-overflow-scrolling: touch; /* 移动端滚动优化 */
            scrollbar-width: none; /* Firefox隐藏滚动条 */
            -ms-overflow-style: none; /* IE/Edge隐藏滚动条 */
            cursor: grab; /* 抓取手势光标 */
        }
        /* 移动端隐藏滚动条 */
        .kk-slider::-webkit-scrollbar {
            display: none; /* Chrome/Safari/Opera隐藏滚动条 */
        }
        
        /* ===== 平台卡片样式 ===== */
        .kk-platform {
            flex: 0 0 calc(100% - 40px); /* 不伸缩不收缩，基础宽度计算 */
            max-width: 400px; /* 最大宽度限制 */
            background: white; /* 白色背景 */
            border-radius: 8px; /* 圆角 */
            overflow: hidden; /* 隐藏溢出内容 */
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 阴影效果 */
            display: flex; /* 弹性布局 */
            flex-direction: column; /* 垂直方向排列 */
            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; /* 设置正常单词间距 */
          /*flex-shrink: 0;*/ /* 禁止卡片收缩 （使用固定宽度时使用） */
        }
        /* 容器内部所有元素重置 */
        .kk-platform * {
            all: unset; /* 取消所有继承的CSS属性值 */
            box-sizing: border-box; /* 设置盒模型为边框盒 */
        }
        
        /* ===== 平台头部样式 ===== */
        .kk-platform-header {
            padding: 6px 10px; /* 内边距 */
            display: flex; /* 弹性布局 */
            justify-content: space-between; /* 两端对齐 */
            align-items: center; /* 垂直居中 */
            color: white; /* 文字颜色 */
            border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 底部边框 */
        }
        
        /* 平台标题样式 */
        .kk-platform-title {
            font-size: 1.1rem; /* 字体大小 */
            font-weight: normal; /* 字体粗细 */
        }
        
        /* 热度标题样式 */
        .kk-heat-title {
            font-size: 1rem; /* 字体大小 */
            font-weight: normal; /* 字体粗细 */
          /*opacity: 0.9;*/ /* 透明度 */
        }
        
        /* 百度平台头部颜色 */
        .kk-baidu .kk-platform-header {
            background: #2932e1; /* 蓝色背景 */
        }
        
        /* 今日头条平台头部颜色 */
        .kk-jinritoutiao .kk-platform-header {
            background: #2ecc71; /* 绿色背景 */
        }
        
        /* 夸克平台头部颜色 */
        .kk-kuake .kk-platform-header {
            background: #ff3f81; /* 粉色背景 */
        }
        
        /* 抖音平台头部颜色 */
        .kk-douyin .kk-platform-header {
            background: #000000; /* 黑色背景 */
        }
        
        /* 微博平台头部颜色 */
        .kk-weibo .kk-platform-header {
            background: #8B7500; /* 深黄色背景 */
        }
        
        /* 搜狗平台头部颜色 */
        .kk-sogou .kk-platform-header {
            background: #FFA500; /* 橙色背景 */
        }
        
        /* ===== 热搜列表容器 ===== */
        .kk-hot-list {
            flex: 1; /* 占据剩余空间 */
            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 {
            display: flex; /* 弹性布局 */
            align-items: center; /* 垂直居中 */
            padding: 4px 6px; /* 内边距 */
            border-bottom: 1px solid #f0f0f0; /* 底部边框 */
            transition: background 0.2s; /* 背景色过渡效果 */
            cursor: pointer; /* 指针光标 */
            justify-content: flex-start; /* 确保内容从左侧开始 */
            -webkit-tap-highlight-color: transparent !important; /* 针对Webkit内核浏览器（Chrome、Safari等）去除点击高亮 */
            tap-highlight-color: transparent !important; /* 标准属性，去除点击时的高亮/阴影效果 */
        }
        
        /* 热搜项悬停效果 */
        .kk-hot-item:hover {
            background: #f9f9f9; /* 浅灰色背景 */
            color: green; /* 文字颜色 */
        }
        
        /* 序号样式 */
        .kk-index {
            width: 20px; /* 宽度 */
            height: 20px; /* 高度 */
            display: flex; /* 弹性布局 */
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
            border-radius: 4px; /* 圆角 */
            font-size: 14px; /* 字体大小 */
            font-weight: bold; /* 字体粗细 */
            margin-right: 10px; /* 右边距 */
            flex-shrink: 0; /* 禁止收缩 */
            color: white; /* 文字颜色 */
        }
        
        /* 第1名样式 - 深红色 */
        .kk-index-1 {
            background: #8B0000; /* 深红色 */
        }
        
        /* 第2名样式 - 红色 */
        .kk-index-2 {
            background: #FF0000; /* 红色 */
        }
        
        /* 第3名样式 - 浅红色 */
        .kk-index-3 {
            background: #FF6B6B; /* 浅红色 */
        }
        
        /* 普通序号样式 */
        .kk-index-normal {
            background: #f0f0f0; /* 浅灰色背景 */
            color: #666; /* 文字颜色 */
        }
        
        /* 标题样式 */
        .kk-title {
            flex: 1; /* 占据剩余空间 */
            font-size: 15px; /* 字体大小 */
            font-weight: 400 !important; /* 使用常规字重，使资讯内容更易阅读 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 隐藏溢出 */
            text-overflow: ellipsis; /* 文本溢出显示省略号 */
            margin-right: 15px; /* 右边距 */
            text-align: left; /* 确保文字从左侧开始 */
            justify-content: flex-start; /* 弹性项目从起始位置开始 */
            padding-left: 0; /* 确保左侧无额外内边距 */
        }
        .kk-hot-item:hover .kk-title {
            color: green; /* 悬停时标题颜色 */
        }
        
        /* 热度值样式 */
        .kk-hot-value {
            color: #ff3b30; /* 红色文字 */
            font-size: 14px; /* 字体大小 */
            font-weight: bold; /* 字体粗细 */
            flex-shrink: 0; /* 禁止收缩 */
        }
        
        /* ===== 加载中状态样式 ===== */
        .kk-loading {
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直方向排列 */
            justify-content: center; /* 垂直居中 */
            align-items: center; /* 水平居中 */
            height: 100%; /* 高度100% */
            text-align: center; /* 文本居中 */
            padding: 20px; /* 内边距 */
            color: #666; /* 文字颜色 */
        }
        
        /* 旋转动画 */
        .kk-spinner {
            display: block; /* 块级显示 */
            width: 30px; /* 宽度 */
            height: 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); } /* 360度旋转 */
        }
        
        /* ===== 响应式设计 ===== */
        
        /* 中等屏幕 */
        @media (max-width: 850px) {
            .kk-platform {
                flex: 0 0 calc(100% - 30px); /* 调整宽度计算 */
            }
        }
        
        /* 小屏幕 */
        @media (max-width: 600px) {
            .kk-platform {
                flex: 0 0 calc(100% - 20px); /* 调整宽度计算 */
            }
        }


        /* ===== 夜间模式区域 ===== */
        .dark-theme .kk-platform {
            background: #1e1e2e; /* 深蓝灰色背景 */
        }
        .dark-theme .kk-hot-item:hover {
            background: #313244; /* 中灰色悬停背景 */
        }
        
        
        /* ===================== 新增的进度条样式 ===================== */
        
        /* 进度条容器 - 隐藏在底部，鼠标悬停时显示 */
        .kk-progress-container {
            position: absolute;     /* 绝对定位 */
            bottom: 0;              /* 定位在容器底部 */
            left: 0;                /* 左侧对齐 */
            width: 100%;            /* 宽度100% */
            height: 4px;            /* 高度4像素 */
            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 {
            height: 100%;           /* 高度100%填充容器 */
            width: 0%;              /* 初始宽度为0 */
            background: linear-gradient(90deg, #ff3f81, #2932e1); /* 渐变背景 */
            border-radius: 0 2px 2px 0; /* 右侧圆角 */
            transition: none;       /* 无过渡效果 - 确保实时更新 */
        }