/* ===== 滑动容器 - 外层包装 ===== */
    .kk-slider-container {
        width: 100%; /* 宽度100%适应父容器 */
        overflow: hidden; /* 隐藏溢出内容 */
        position: relative; /* 相对定位 */
        margin-top: 2px; /* 上边距 */
        border-radius: 8px; /* 圆角边框 */
        background: none; /* 无背景 */
        isolation: isolate; /* 隔离渲染上下文 */
        padding: 2px; /* 内边距 */
    }
    
    /* ===== 滑动区域 - 实际滚动区域 ===== */
    .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隐藏滚动条 */
        cursor: grab; /* 抓取手势光标 */
        white-space: nowrap; /* 防止子元素换行 */
    }
    /* 移动端隐藏滚动条 */
    .kk-slider::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera隐藏滚动条 */
    }
    
    /* ===== 平台卡片样式 ===== */
    .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 {
        padding: 6px 10px; /* 内边距 */
        display: block; /* 块级布局 */
        overflow: hidden; /* 清除浮动 */
        color: white; /* 文字颜色 */
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* 底部边框 */
    }
    
    /* 平台标题样式 */
    .kk-platform-title {
        font-size: 1.1rem; /* 字体大小 */
        float: left; /* 左浮动 */
    }
    
    /* 热度标题样式 */
    .kk-heat-title {
        font-size: 1rem; /* 字体大小 */
        float: right; /* 右浮动 */
    }
    
    /* 百度平台头部颜色 */
    .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 {
        display: block; /* 块级布局 */
        height: calc(100% - 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 {
        display: block; /* 块级布局 */
        padding: 4px 6px; /* 内边距 */
        border-bottom: 1px solid #f0f0f0; /* 底部边框 */
        cursor: pointer; /* 指针光标 */
        -webkit-tap-highlight-color: transparent !important; /* 针对Webkit内核浏览器去除点击高亮 */
        tap-highlight-color: transparent !important; /* 标准属性，去除点击时的高亮/阴影效果 */
        position: relative; /* 为热度值的绝对定位提供参考 */
        text-align: left; /* 确保内容整体靠左对齐 */
    }
    
    /* 悬停时标题颜色变化 */
    .kk-hot-item:hover .kk-title {
        color: green; /* 悬停时标题颜色 */
    }
    
    /* 序号样式 */
    .kk-index {
        width: 20px; /* 宽度 */
        height: 20px; /* 高度 */
        display: inline-block; /* 行内块布局 */
        text-align: center; /* 文字居中 */
        line-height: 20px; /* 垂直居中 */
        border-radius: 4px; /* 圆角 */
        font-size: 14px; /* 字体大小 */
        margin-right: 10px; /* 右边距 */
        color: white; /* 文字颜色 */
        vertical-align: middle; /* 垂直居中对齐 */
    }
    
    /* 第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 {
        display: inline-block; /* 行内块布局 */
        font-size: 15px; /* 字体大小 */
        color: #000000; /* 纯黑色 */
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 隐藏溢出 */
        text-overflow: ellipsis; /* 文本溢出显示省略号 */
        text-align: left; /* 确保文字从左侧开始 */
        vertical-align: middle; /* 垂直居中对齐 */
        max-width: calc(100% - 100px); /* 限制最大宽度，为序号和热度值留空间 */
        letter-spacing: -0.1px; /* 减小字间距，让文字更紧凑 */
    }
    
    /* 热度值样式 */
    .kk-hot-value {
        display: inline-block; /* 行内块布局 */
        color: #ff3b30; /* 红色文字 */
        font-size: 14px; /* 字体大小 */
        vertical-align: middle; /* 垂直居中对齐 */
        position: absolute; /* 绝对定位 */
        right: 10px; /* 距离右侧10px */
        top: 50%; /* 垂直居中 */
        transform: translateY(-50%); /* 垂直居中修正 */
    }
    
    /* ===== 加载中状态样式 ===== */
    .kk-loading {
        display: flex; /* 使用flex布局实现居中 */
        flex-direction: column; /* 垂直方向排列 */
        justify-content: center; /* 垂直居中 */
        align-items: center; /* 水平居中 */
        text-align: center; /* 文本居中 */
        padding: 20px; /* 内边距 */
        color: #666; /* 文字颜色 */
        height: 100%; /* 高度100% */
        min-height: 300px; /* 最小高度确保有足够空间 */
    }
    
    /* 旋转动画 */
    .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: 768px) {
        .kk-platform {
            width: calc(100% - 20px); /* 平台卡片样式标准移动端宽度 */
        }
        .kk-title {
            font-weight: 300; /* 标题保持稍细的字体粗细 */
        }
    }
    
    /* ===== 夜间模式样式 ===== */
    .dark-theme .kk-platform {
        background: #1e1e2e; /* 深蓝灰色背景 */
    }
    .dark-theme .kk-title {
        color: #e0e0e0 !important; /* 浅灰色文字：夜间模式标题颜色适配 */
    }
    .dark-theme .kk-hot-item:hover .kk-title {
        color: green !important; /* 悬停时标题颜色：夜间模式标题颜色适配 */
    }
    .dark-theme .kk-hot-item {
        border-bottom: 1px solid #2d2d3d; /* 深色边框：夜间模式热搜项边框 */
    }
    .dark-theme .kk-index-normal {
        background: #2d2d3d; /* 深色背景：夜间模式普通序号样式 ↕ */
        color: #a0a0a0; /* 浅灰色文字 */
    }
    
    /* ===================== 进度条样式 ===================== */
    
    /* 进度条容器 - 隐藏在底部，鼠标悬停时显示 */
    .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; /* 无过渡效果 - 确保实时更新 */
    }