/* ===== 主容器样式 ===== */
        /* 资讯展示的主容器，固定宽高，圆角边框 */
        .ookk-container {
            width: 20%; /* 宽度 */
            height: 320px; /* 固定高度 */
            background: white; /* 白色背景 */
            border-radius: 12px; /* 圆角 */
            border: 2px solid #e0e0e0; /* 像素浅灰色实线边框 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 阴影效果，增加层次感 */
            overflow: hidden; /* 隐藏溢出内容 */
            display: flex; /* 使用flex布局 */
            flex-direction: column; /* 垂直方向排列子元素 */
            position: fixed; /* 固定定位，不随页面滚动 */
            bottom: 10px; /* 距离底部 */
            left: 50%; /* 水平居中 */
            transform: translateX(-50%) translateX(-199%); /* 水平居中后向左偏移 */
            margin: 0; /* 移除之前的margin和padding */
            z-index: 999; /* 确保在最上层 */
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif; /* 设置字体栈：苹方 → 微软雅黑 → 无衬线 */
            line-height: normal; /* 设置正常行高，避免影响外部 */
            letter-spacing: normal; /* 设置正常字母间距 */
            word-spacing: normal; /* 设置正常单词间距 */
        }
        /* 容器内部所有元素重置 */
        .ookk-container * {
            all: unset; /* 取消所有继承的CSS属性值 */
            box-sizing: border-box; /* 设置盒模型为边框盒 */
        }
        
        /* ===== 头部区域样式 ===== */
        /* 顶部标题区域样式 */
        .ookk-header {
            padding: 6px 10px; /* 内边距 */
            border-bottom: 1px solid #eee; /* 底部1像素浅灰色边框 */
            position: relative; /* 相对定位，为内部元素定位做准备 */
            display: flex; /* 使用flex布局 */
            justify-content: space-between; /* 子元素在主轴两端对齐 */
            align-items: center; /* 子元素在交叉轴居中 */
            background: #fafafa; /* 浅灰色背景 */
        }
        
        /* ===== 标题文字样式 ===== */
        /* 主标题样式 */
        .ookk-title {
            font-size: 16px; /* 字体大小16像素 */
            font-weight: bold; /* 粗体字重 */
            color: #333; /* 深灰色文字颜色 */
        }
        
        /* ===== 热点标签样式 ===== */
        /* 右上角热点标签样式 */
        .ookk-hot-tag {
            background: linear-gradient(45deg, #ff4e50, #f9d423); /* 渐变背景，从橙红色到黄色 */
            color: white; /* 白色文字 */
            padding: 4px 8px; /* 内边距：上下4px，左右8px */
            border-radius: 6px; /* 12像素圆角 */
            font-size: 12px; /* 字体大小12像素 */
            font-weight: bold; /* 粗体字重 */
        }
        
        /* ===== 内容区域样式 ===== */
        /* 资讯列表容器样式 */
        .ookk-content {
            flex: 1; /* 弹性增长，填充剩余空间 */
            overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
            padding: 10px; /* 内边距10像素 */
        }
        
        /* ===== 单条资讯项样式 ===== */
        /* 每条资讯的容器样式 */
        .ookk-news-item {
            display: flex; /* 使用flex布局 */
            padding: 5px; /* 内边距 */
            margin-bottom: 4px; /* 底部外边距，增加条目间距 */
            border-radius: 8px; /* 圆角 */
            transition: all 0s; /* 所有属性过渡动画，持续时间0.3秒 */
            align-items: center; /* 垂直居中 */
            cursor: pointer; /* 鼠标指针变为手型，表示可点击 */
            background: #f8f9fa; /* 浅灰色背景 */
            position: relative; /* 相对定位，为子元素绝对定位做准备 */
            -webkit-tap-highlight-color: transparent !important; /* 针对Webkit内核浏览器（Chrome、Safari等）去除点击高亮 */
            tap-highlight-color: transparent !important; /* 标准属性，去除点击时的高亮/阴影效果 */
        }
        
        /* ===== 资讯项悬停效果 ===== */
        /* 鼠标悬停时的样式变化 */
        .ookk-news-item:hover {
            background: #f0f2f5; /* 悬停时背景色变深 */
            transform: translateY(-1px); /* 向上轻微移动1像素，产生浮起效果 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 添加轻微阴影，增强立体感 */
        }
        
        /* ===== 排名数字样式 ===== */
        /* 资讯排名样式（左侧数字） */
        .ookk-rank {
            font-size: 14px; /* 字体大小14像素 */
            font-weight: bold; /* 粗体字重 */
            color: #888; /* 中灰色文字颜色 */
            min-width: 12px; /* 最小宽度，确保数字对齐 */
            text-align: center; /* 文字居中 */
            margin-right: 6px; /* 右侧外边距8像素，与标题分隔 */
        }
        
        /* ===== 资讯内容区域样式 ===== */
        /* 资讯标题和热度的容器 */
        .ookk-news-content {
            flex: 1; /* 弹性增长，填充剩余空间 */
            padding-right: 50px; /* 右侧内边距，为热度值留出充足空间 */
        }
        
        /* ===== 资讯标题文字样式 ===== */
        /* 资讯标题样式 */
        .ookk-news-title {
            font-size: 13px; /* 字体大小13像素 */
            color: #333; /* 深灰色文字 */
            line-height: 1.4; /* 行高1.4倍，提高可读性 */
            display: -webkit-box; /* 使用webkit多行文本截断 */
            -webkit-line-clamp: 2; /* 最多显示2行 */
            -webkit-box-orient: vertical; /* 垂直方向排列 */
            overflow: hidden; /* 隐藏溢出内容 */
        }
        .ookk-news-title:hover {
            color: green; /* 悬停时标题颜色 */
        }
        
        /* ===== 热度值样式 ===== */
        /* 热度值容器样式 - 调整到更靠右的位置 */
        .ookk-news-hot {
            position: absolute; /* 绝对定位，脱离文档流 */
            right: 4px; /* 距离右侧20像素，更加靠右 */
            top: 50%; /* 垂直居中 */
            transform: translateY(-50%); /* 向上平移自身高度50%，实现完美垂直居中 */
            font-size: 12px; /* 字体大小12像素 */
            color: #888; /* 中灰色文字 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
            background: rgba(255, 255, 255, 0.6); /* 半透明白色背景，透明度80% */
            padding: 3px 4px; /* 内边距：上下3px，左右8px */
            border-radius: 4px; /* 4像素圆角 */
            min-width: 40px; /* 最小宽度45像素，确保有足够空间 */
            justify-content: flex-end; /* 内容右对齐 */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加层次感 */
        }
        
        /* ===== 火焰图标样式 ===== */
        /* 纯CSS实现的火焰图标 */
        .ookk-fire-icon {
            color: #ff4e50; /* 火焰色（橙红色） */
            margin-right: 2px; /* 右侧外边距4像素，与数字分隔 */
            font-size: 10px; /* 字体大小11像素，略小于文字 */
            display: inline-block; /* 使用内联块元素 */
            position: relative; /* 相对定位 */
            width: 10px; /* 宽度 */
            height: 12px; /* 高度 */
        }
        
        /* 火焰图标的基础形状 */
        .ookk-fire-icon::before {
            content: "🔥";
            position: absolute; /* 绝对定位 */
            top: 50%; /* 居中 */
            left: 50%; /* 居中 */
            transform: translate(-50%, -50%); /* 平移居中 */
        }
        
        /* ===== 底部区域样式 ===== */
        /* 页面底部信息栏样式 */
        .ookk-footer {
            padding: 6px 10px; /* 内边距：上下10px，左右15px */
            border-top: 1px solid #eee; /* 顶部1像素浅灰色边框 */
            display: flex; /* 使用flex布局 */
            justify-content: space-between; /* 子元素在主轴两端对齐 */
            align-items: center; /* 子元素在交叉轴居中 */
            color: #888; /* 中灰色文字 */
            font-size: 10px; /* 字体大小12像素 */
            background: #fafafa; /* 浅灰色背景 */
        }
        
        /* ===== 更新时间文字样式 ===== */
        /* 更新时间容器样式 */
        .ookk-update-time {
            font-weight: bold; /* 粗体字重 */
            color: #666; /* 深灰色文字 */
            display: flex; /* 使用flex布局 */
            align-items: center; /* 垂直居中 */
        }
        
        /* ===== 实时时间数字样式 ===== */
        /* 实时时间显示样式 */
        .ookk-live-time {
            margin-left: 5px; /* 左侧外边距5像素，与文字分隔 */
            color: #ff4e50; /* 橙红色文字，突出显示 */
            font-family: monospace; /* 等宽字体，确保数字对齐 */
            min-width: 50px; /* 最小宽度50像素，避免布局抖动 */
            display: inline-block; /* 行内块元素 */
        }
        
        /* ===== 加载中状态样式 ===== */
        /* 数据加载中的提示样式 */
        .ookk-loading {
            text-align: center; /* 文字居中 */
            padding: 30px 10px; /* 内边距：上下30px，左右10px */
            color: #888; /* 中灰色文字 */
            /* 使用flex布局确保内部元素居中 */
            display: flex; /* 将容器设为flex布局 */
            flex-direction: column; /* 垂直方向排列子元素 */
            justify-content: center; /* 垂直居中 */
            align-items: center; /* 水平居中 */
            height: 100%; /* 确保占据整个内容区域高度 */
        }
        
        /* ===== 加载图标样式 ===== */
        /* 纯CSS实现的加载中转圈图标 */
        .ookk-loading-spinner {
            font-size: 20px; /* 字体大小20像素 */
            margin-bottom: 10px; /* 底部外边距10像素，与文字分隔 */
            color: #ff4e50; /* 橙红色图标 */
            display: inline-block; /* 使用内联块元素 */
            width: 20px; /* 宽度和高度 */
            height: 20px; /* 宽度和高度 */
            border: 2px solid rgba(255, 78, 80, 0.3); /* 边框样式：2像素实线，透明底色 */
            border-radius: 50%; /* 圆角50%，形成圆形 */
            border-top-color: #ff4e50; /* 边框顶部颜色，形成加载效果 */
            animation: ookk-spin 1s linear infinite; /* 动画：旋转360度，线性，无限循环 */
            vertical-align: middle; /* 移除inline-block的默认对齐问题 */
        }
        
        /* 旋转动画定义 */
        @keyframes ookk-spin {
            0% { transform: rotate(0deg); } /* 从0度开始 */
            100% { transform: rotate(360deg); } /* 到360度结束 */
        }
        
        /* ===== 错误状态样式 ===== */
        /* 数据加载错误的提示样式 */
        .ookk-error {
            text-align: center; /* 文字居中 */
            padding: 30px 10px; /* 内边距：上下30px，左右10px */
            color: #ff4e50; /* 橙红色文字，表示错误 */
            /* 添加flex布局确保内部元素居中 */
            display: flex; /* 将容器设为flex布局 */
            flex-direction: column; /* 垂直方向排列子元素 */
            justify-content: center; /* 垂直居中 */
            align-items: center; /* 水平居中 */
            height: 100%; /* 确保占据整个内容区域高度 */
        }
        
        /* ===== 错误图标样式 ===== */
        /* 纯CSS实现的错误提示图标 */
        .ookk-error-icon {
            font-size: 20px; /* 字体大小20像素 */
            margin-bottom: 10px; /* 底部外边距10像素，与文字分隔 */
            display: inline-block; /* 使用内联块元素 */
            width: 20px; /* 宽度和高度 */
            height: 20px; /* 宽度和高度 */
            position: relative; /* 相对定位 */
        }
        
        /* 错误图标的感叹号形状 */
        .ookk-error-icon::before {
            content: "!";
            position: absolute; /* 绝对定位 */
            top: 50%; /* 居中 */
            left: 50%; /* 居中 */
            transform: translate(-50%, -50%); /* 平移居中 */
            font-weight: bold; /* 粗体字重 */
            color: #ff4e50; /* 橙红色 */
        }
        
        /* ===== 刷新按钮样式 ===== */
        /* 重新加载按钮样式 */
        .ookk-refresh-btn {
            background: linear-gradient(45deg, #ff4e50, #f9d423); /* 渐变背景，从橙红色到黄色 */
            color: white; /* 白色文字 */
            border: none; /* 无边框 */
            padding: 6px 12px; /* 内边距：上下6px，左右12px */
            border-radius: 15px; /* 15像素圆角 */
            font-size: 12px; /* 字体大小12像素 */
            cursor: pointer; /* 手型光标，表示可点击 */
            margin-top: 12px; /* 顶部外边距12像素，与上方内容分隔 */
            transition: transform 0.2s; /* 变换动画，持续时间0.2秒 */
        }
        
        /* ===== 刷新按钮悬停效果 ===== */
        /* 鼠标悬停在刷新按钮上的效果 */
        .ookk-refresh-btn:hover {
            transform: scale(1.05); /* 轻微放大，产生点击感 */
        }
        
        /* ===== 滚动条整体样式 ===== */
        /* 内容区域滚动条样式 */
        .ookk-content::-webkit-scrollbar {
            width: 4px; /* 滚动条宽度4像素 */
        }
        
        /* ===== 滚动条轨道样式 ===== */
        /* 滚动条轨道（背景）样式 */
        .ookk-content::-webkit-scrollbar-track {
            background: #f1f1f1; /* 浅灰色背景 */
            border-radius: 10px; /* 10像素圆角 */
        }
        
        /* ===== 滚动条滑块样式 ===== */
        /* 滚动条滑块（可拖动部分）样式 */
        .ookk-content::-webkit-scrollbar-thumb {
            background: #ccc; /* 中灰色背景 */
            border-radius: 10px; /* 10像素圆角 */
        }
        
        /* ===== 滚动条滑块悬停样式 ===== */
        /* 鼠标悬停在滚动条滑块上的样式 */
        .ookk-content::-webkit-scrollbar-thumb:hover {
            background: #aaa; /* 深灰色背景 */
        }
        
        /* ===== 第一名特殊样式 ===== */
        /* 排名第一的资讯项特殊样式 */
        .ookk-top-1 {
            background: linear-gradient(90deg, rgba(255, 248, 225, 0.7) 0%, rgba(255, 248, 225, 0.3) 100%); /* 从左到右的渐变背景，金色系 */
            border-left: 3px solid #ffd700; /* 左侧3像素金色边框 */
        }
        
        /* ===== 第二名特殊样式 ===== */
        /* 排名第二的资讯项特殊样式 */
        .ookk-top-2 {
            background: linear-gradient(90deg, rgba(240, 240, 240, 0.7) 0%, rgba(240, 240, 240, 0.3) 100%); /* 从左到右的渐变背景，银色系 */
            border-left: 3px solid #c0c0c0; /* 左侧3像素银色边框 */
        }
        
        /* ===== 第三名特殊样式 ===== */
        /* 排名第三的资讯项特殊样式 */
        .ookk-top-3 {
            background: linear-gradient(90deg, rgba(255, 225, 200, 0.7) 0%, rgba(255, 225, 200, 0.3) 100%); /* 从左到右的渐变背景，铜色系 */
            border-left: 3px solid #cd7f32; /* 左侧3像素铜色边框 */
        }
        
        /* ===== 第一名数字样式 ===== */
        /* 排名第一的数字特殊样式 */
        .ookk-top-1 .ookk-rank {
            color: #ffd700; /* 金色数字 */
            font-size: 15px; /* 字体大小15像素，略大于普通排名 */
        }
        
        /* ===== 第二名数字样式 ===== */
        /* 排名第二的数字特殊样式 */
        .ookk-top-2 .ookk-rank {
            color: #c0c0c0; /* 银色数字 */
            font-size: 15px; /* 字体大小15像素，略大于普通排名 */
        }
        
        /* ===== 第三名数字样式 ===== */
        /* 排名第三的数字特殊样式 */
        .ookk-top-3 .ookk-rank {
            color: #cd7f32; /* 铜色数字 */
            font-size: 15px; /* 字体大小15像素，略大于普通排名 */
        }


        /* ===== 夜间模式样式 - 基于Catppuccin主题的深色配色方案 ===== */
        /* 主容器样式 - 深色背景和边框 */
        .dark-theme .ookk-container {
            background: #1e1e2e; /* 深蓝灰色背景 */
            border-color: #313244; /* 中灰色边框，替代原来的浅灰色 */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 更深的阴影效果 */
        }
        
        /* 头部区域样式 */
        .dark-theme .ookk-header {
            background: #181825; /* 更深的蓝灰色背景 */
            border-bottom-color: #313244; /* 中灰色底部边框 */
        }
        
        /* 标题文字样式 */
        .dark-theme .ookk-title {
            color: #cdd6f4; /* 浅蓝灰色文字，提高可读性 */
        }
        
        /* 热点标签样式 */
        .dark-theme .ookk-hot-tag {
            background: linear-gradient(45deg, #f5c2e7, #cba6f7); /* 粉紫色渐变 */
            color: #1e1e2e; /* 深色文字，与背景形成对比 */
        }
        
        /* 内容区域样式 */
        .dark-theme .ookk-content {
            background: #1e1e2e; /* 深蓝灰色背景 */
        }
        
        /* 资讯项样式 */
        .dark-theme .ookk-news-item {
            background: #181825; /* 更深的蓝灰色背景 */
        }
        
        /* 资讯项悬停效果 */
        .dark-theme .ookk-news-item:hover {
            background: #313244; /* 中灰色悬停背景 */
        }
        
        /* 排名数字样式 */
        .dark-theme .ookk-rank {
            color: #a6adc8; /* 中灰色文字 */
        }
        
        /* 资讯标题文字样式 */
        .dark-theme .ookk-news-title {
            color: #cdd6f4; /* 浅蓝灰色文字，提高可读性 */
        }
        
        /* 热度值样式 */
        .dark-theme .ookk-news-hot {
            color: #a6adc8; /* 中灰色文字 */
            background: rgba(49, 50, 68, 0.7); /* 半透明深灰色背景 */
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 更深的阴影效果 */
        }
        
        /* 火焰图标样式 */
        .dark-theme .ookk-fire-icon {
            color: #f38ba8; /* 粉红色火焰，在深色背景下更醒目 */
        }
        
        /* 底部区域样式 */
        .dark-theme .ookk-footer {
            background: #181825; /* 更深的蓝灰色背景 */
            border-top-color: #313244; /* 中灰色顶部边框 */
            color: #a6adc8; /* 中灰色文字 */
        }
        
        /* 更新时间文字样式 */
        .dark-theme .ookk-update-time {
            color: #a6adc8; /* 中灰色文字 */
        }
        
        /* 实时时间数字样式 */
        .dark-theme .ookk-live-time {
            color: #f38ba8; /* 粉红色文字，突出显示 */
        }
        
        /* 加载中状态样式 */
        .dark-theme .ookk-loading {
            color: #a6adc8; /* 中灰色文字 */
        }
        
        /* 加载图标样式 */
        .dark-theme .ookk-loading-spinner {
            border-color: rgba(243, 139, 168, 0.3); /* 粉红色半透明边框 */
            border-top-color: #f38ba8; /* 粉红色顶部边框，形成旋转效果 */
        }
        
        /* 错误状态样式 */
        .dark-theme .ookk-error {
            color: #f38ba8; /* 粉红色错误文字 */
        }
        
        /* 错误图标样式 */
        .dark-theme .ookk-error-icon::before {
            color: #f38ba8; /* 粉红色感叹号 */
        }
        
        /* 刷新按钮样式 */
        .dark-theme .ookk-refresh-btn {
            background: linear-gradient(45deg, #f5c2e7, #cba6f7); /* 粉紫色渐变 */
            color: #1e1e2e; /* 深色文字，与背景形成对比 */
        }
        
        /* 滚动条轨道样式 */
        .dark-theme .ookk-content::-webkit-scrollbar-track {
            background: #181825; /* 更深的蓝灰色轨道背景 */
        }
        
        /* 滚动条滑块样式 */
        .dark-theme .ookk-content::-webkit-scrollbar-thumb {
            background: #45475a; /* 中灰色滑块 */
        }
        
        /* 滚动条滑块悬停样式 */
        .dark-theme .ookk-content::-webkit-scrollbar-thumb:hover {
            background: #585b70; /* 浅灰色悬停效果 */
        }
        
        /* 第一名特殊样式 */
        .dark-theme .ookk-top-1 {
            background: linear-gradient(90deg, rgba(180, 190, 254, 0.15) 0%, rgba(180, 190, 254, 0.05) 100%); /* 浅蓝色半透明渐变背景 */
            border-left-color: #b4befe; /* 浅蓝色左侧边框 */
        }
        
        /* 第二名特殊样式 */
        .dark-theme .ookk-top-2 {
            background: linear-gradient(90deg, rgba(166, 173, 200, 0.15) 0%, rgba(166, 173, 200, 0.05) 100%); /* 中灰色半透明渐变背景 */
            border-left-color: #a6adc8; /* 中灰色左侧边框 */
        }
        
        /* 第三名特殊样式 */
        .dark-theme .ookk-top-3 {
            background: linear-gradient(90deg, rgba(152, 168, 186, 0.15) 0%, rgba(152, 168, 186, 0.05) 100%); /* 灰蓝色半透明渐变背景 */
            border-left-color: #98a8ba; /* 灰蓝色左侧边框 */
        }
        
        /* 第一名数字样式 */
        .dark-theme .ookk-top-1 .ookk-rank {
            color: #b4befe; /* 浅蓝色数字 */
        }
        
        /* 第二名数字样式 */
        .dark-theme .ookk-top-2 .ookk-rank {
            color: #a6adc8; /* 中灰色数字 */
        }
        
        /* 第三名数字样式 */
        .dark-theme .ookk-top-3 .ookk-rank {
            color: #98a8ba; /* 灰蓝色数字 */
        }
        
        /* 移动端隐藏热榜容器 */
        @media screen and (max-width: 768px) {
            .ookk-container {
                display: none;
            }
        }