.announcement-modal-overlay {
            position: fixed;      /* 固定定位，相对于浏览器窗口定位，不会随滚动移动 */
            top: 0;              /* 距离顶部0像素 */
            left: 0;             /* 距离左侧0像素 */
            right: 0;            /* 距离右侧0像素 */
            bottom: 0;           /* 距离底部0像素 */
            background: rgba(0, 0, 0, 0.6);  /* 半透明黑色背景，rgba中的a是透明度(0-1) */
            display: flex;       /* 使用flex布局，方便居中对齐 */
            justify-content: center;  /* 水平方向居中 */
            align-items: center;      /* 垂直方向居中 */
            z-index: 9999;       /* z-index控制层叠顺序，值越大越在上面，9999确保在最上层 */
            animation: fadeIn 0.3s ease;  /* 添加淡入动画，0.3秒完成 */
            backdrop-filter: blur(5px);   /* 背景模糊效果，让弹窗更突出 */
        }

        /* 淡入动画关键帧定义 - 控制动画的开始和结束状态 */
        @keyframes fadeIn {
            from { opacity: 0; }   /* 动画开始时，元素完全透明（看不见） */
            to { opacity: 1; }     /* 动画结束时，元素完全不透明（正常显示） */
        }

        /* 公告弹窗主体 - 实际显示公告内容的白色卡片 */
        .announcement-modal {
            background: linear-gradient(145deg, #ffffff, #f0f9ff);  /* 渐变背景：从白色到淡蓝色 */
            border-radius: 24px;   /* 圆角边框，值越大圆角越明显 */
            padding: 40px;         /* 内边距，控制内容与边框的距离 */
            max-width: 480px;      /* 最大宽度，防止弹窗在大屏幕上太宽 */
            width: 90%;            /* 响应式宽度，在小屏幕上占90%宽度 */
            text-align: center;    /* 文本居中对齐 */
            position: relative;    /* 相对定位，允许子元素使用绝对定位 */
            box-shadow: 0 25px 80px rgba(6, 182, 212, 0.3);  /* 阴影效果：水平偏移0，垂直偏移25px，模糊80px，青色半透明 */
            animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);  /* 滑入动画，使用自定义贝塞尔曲线 */
            border: 1px solid rgba(6, 182, 212, 0.15);  /* 边框：1像素宽，青色半透明 */
        }

        /* 滑入动画关键帧定义 - 控制弹窗从下方滑入 */
        @keyframes slideUp {
            from {
                opacity: 0;                          /* 开始时完全透明 */
                transform: translateY(30px) scale(0.95);  /* 向下偏移30像素，并缩小到95% */
            }
            to {
                opacity: 1;                          /* 结束时完全不透明 */
                transform: translateY(0) scale(1);    /* 回到原始位置，恢复原始大小 */
            }
        }

        /* 公告弹窗关闭按钮 */
        .announcement-close {
            position: absolute;    /* 绝对定位 */
            top: 15px;             /* 距离顶部15px */
            right: 15px;           /* 距离右侧15px */
            width: 36px;           /* 宽度 */
            height: 36px;          /* 高度 */
            border-radius: 50%;    /* 圆形按钮 */
            border: none;          /* 无边框 */
            background: rgba(0, 0, 0, 0.05);  /* 淡灰色背景 */
            color: #64748b;        /* 图标颜色 */
            font-size: 16px;       /* 字体大小 */
            cursor: pointer;       /* 鼠标悬停变为手型 */
            transition: all 0.3s;  /* 过渡效果 */
        }

        /* 关闭按钮悬停状态 */
        .announcement-close:hover {
            background: rgba(0, 0, 0, 0.1);  /* 加深背景色 */
            color: #1e293b;                   /* 加深文字颜色 */
            transform: rotate(90deg);         /* 旋转90度 */
        }

        /* 公告弹窗图标 */
        .announcement-icon {
            width: 80px;           /* 宽度 */
            height: 80px;          /* 高度 */
            margin: 0 auto 25px;   /* 水平居中，底部间距 */
            background: linear-gradient(135deg, #06b6d4, #3b82f6);  /* 渐变背景 */
            border-radius: 50%;    /* 圆形 */
            display: flex;         /* flex布局 */
            justify-content: center;  /* 水平居中 */
            align-items: center;      /* 垂直居中 */
            font-size: 36px;       /* 图标大小 */
            color: white;          /* 图标颜色 */
            box-shadow: 0 10px 30px rgba(6, 182, 212, 0.4);  /* 发光阴影 */
        }

        /* 公告标题 */
        .announcement-title {
            font-size: 1.5rem;     /* 字体大小 */
            font-weight: 700;      /* 字重 */
            color: #1e293b;        /* 文字颜色 */
            margin-bottom: 15px;   /* 底部间距 */
            background: linear-gradient(135deg, #06b6d4, #3b82f6);  /* 渐变背景 */
            -webkit-background-clip: text;   /* 背景裁剪为文字形状 */
            -webkit-text-fill-color: transparent;  /* 文字填充透明 */
            background-clip: text;            /* 背景裁剪兼容 */
        }

        /* 公告内容 */
        .announcement-content {
            font-size: 1rem;       /* 字体大小 */
            color: #64748b;        /* 文字颜色 */
            line-height: 1.8;      /* 行高 */
            margin-bottom: 30px;   /* 底部间距 */
        }

        /* 公告确认按钮 */
        .announcement-btn {
            background: linear-gradient(135deg, #06b6d4, #3b82f6);  /* 渐变背景 */
            border: none;          /* 无边框 */
            border-radius: 30px;   /* 圆角 */
            padding: 14px 40px;    /* 内边距 */
            font-size: 1rem;       /* 字体大小 */
            font-weight: 600;      /* 字重 */
            color: white;          /* 文字颜色 */
            cursor: pointer;       /* 鼠标手型 */
            transition: all 0.3s;  /* 过渡效果 */
            box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);  /* 阴影 */
        }

        /* 确认按钮悬停状态 */
        .announcement-btn:hover {
            transform: translateY(-3px);    /* 向上移动3px */
            box-shadow: 0 12px 30px rgba(6, 182, 212, 0.4);  /* 加深阴影 */
        }

        /* ========== 主布局样式 ========== */
        /* 主内容区域 - 使用grid布局，分为主内容和侧边栏两列 */
        .main-content {
            display: grid;              /* grid布局 */
            grid-template-columns: 1fr 320px;  /* 主内容占1fr，侧边栏固定320px */
            gap: 30px;                 /* 两列之间的间距 */
            align-items: start;        /* 顶部对齐 */
            padding: 10px 0;           /* 上下内边距 */
        }

        /* 主内容区域容器 */
        .main-section {
            display: flex;             /* flex布局 */
            flex-direction: column;    /* 垂直排列 */
            gap: 12px;                /* 子元素间距 */
        }

        /* 顶部行 - 轮播图和侧边推荐的容器 */
        .top-row {
            display: flex;             /* flex布局 */
            gap: 20px;                /* 子元素间距 */
            align-items: stretch;      /* 拉伸对齐，使高度一致 */
        }

        /* 精选文章卡片 */
        .featured-card {
            height: 100%;              /* 占满父容器高度 */
            background: var(--grad-card);  /* 使用主题渐变背景变量 */
            border-radius: var(--radius-xl);  /* 使用主题圆角变量 */
            overflow: hidden;          /* 隐藏溢出内容 */
            box-shadow: var(--shadow-card);   /* 使用主题阴影变量 */
            border: 1px solid var(--border-light);  /* 使用主题边框变量 */
            transition: all 0.4s ease; /* 过渡动画 */
            position: relative;        /* 相对定位 */
        }
        
        /* 精选卡片悬停效果 */
        .featured-card:hover {
            box-shadow: var(--shadow-hover);  /* 悬停时加深阴影 */
            transform: translateY(-5px);      /* 向上移动5px */
        }

        /* ========== 轮播图样式 ========== */
        /* 轮播图容器 */
        .carousel-container {
            flex: 2;                   /* 占2份空间 */
            position: relative;        /* 相对定位，用于子元素绝对定位 */
            border-radius: var(--radius-xl);  /* 圆角 */
            overflow: hidden;          /* 隐藏溢出 */
            height: 420px;             /* 固定高度，防止图片加载时跳动 */
            min-height: 420px;         /* 确保最小高度一致 */
        }

        /* 轮播图主体 */
        .carousel {
            position: relative;        /* 相对定位 */
            width: 100%;               /* 宽度100% */
            height: 100%;              /* 高度100% */
        }

        /* 轮播项 */
        .carousel-item {
            position: absolute;        /* 绝对定位，固定在容器内 */
            top: 0;
            left: 0;
            width: 100%;               /* 宽度100% */
            height: 100%;              /* 高度100% */
            display: none;             /* 默认隐藏 */
            cursor: pointer;           /* 鼠标手型 */
        }

        /* 激活状态的轮播项 */
        .carousel-item.active {
            display: block;            /* 显示 */
            animation: fadeIn 0.5s ease;  /* 淡入动画 */
        }

        /* 轮播项内的精选卡片 */
        .carousel-item .featured-card {
            width: 100%;
            height: 100%;
            border-radius: 0;           /* 轮播中不要额外圆角，由外层控制 */
            border: none;
        }

        /* 轮播项内的封面 */
        .carousel-item .featured-cover {
            width: 100%;
            height: 100%;
        }

        /* 轮播项内的封面图片 - 使用object-fit: cover统一横图竖图 */
        .carousel-item .featured-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;        /* 裁剪填充，统一显示 */
            object-position: center center;  /* 居中显示 */
            transition: transform 0.6s ease;
        }

        /* 淡入动画（复用之前定义的） */
        @keyframes fadeIn {
            from { opacity: 0; }   /* 开始透明 */
            to { opacity: 1; }     /* 结束不透明 */
        }

        /* 轮播左右切换按钮 */
        .carousel-prev,
        .carousel-next {
            position: absolute;        /* 绝对定位 */
            top: 50%;                  /* 垂直居中 */
            transform: translateY(-50%);  /* 向上偏移50%自身高度 */
            background: rgba(0, 0, 0, 0.5);  /* 半透明背景 */
            color: white;              /* 白色图标 */
            border: none;              /* 无边框 */
            width: 45px;               /* 宽度 */
            height: 45px;              /* 高度 */
            border-radius: 50%;        /* 圆形按钮 */
            display: flex;             /* flex布局 */
            align-items: center;       /* 垂直居中 */
            justify-content: center;   /* 水平居中 */
            font-size: 1.2rem;         /* 图标大小 */
            cursor: pointer;           /* 鼠标手型 */
            transition: all 0.3s;      /* 过渡效果 */
            z-index: 10;               /* 层级高于轮播内容 */
        }

        /* 切换按钮悬停效果 */
        .carousel-prev:hover,
        .carousel-next:hover {
            background: rgba(0, 0, 0, 0.7);  /* 加深背景 */
            transform: translateY(-50%) scale(1.1);  /* 放大1.1倍 */
        }

        /* 上一个按钮位置 */
        .carousel-prev {
            left: 15px;                /* 距离左侧15px */
        }

        /* 下一个按钮位置 */
        .carousel-next {
            right: 15px;               /* 距离右侧15px */
        }

        /* 轮播指示器容器 */
        .carousel-indicators {
            position: absolute;        /* 绝对定位 */
            bottom: 20px;              /* 距离底部20px */
            left: 50%;                 /* 水平居中 */
            transform: translateX(-50%);  /* 向左偏移50%自身宽度 */
            display: flex;             /* flex布局 */
            gap: 10px;                /* 间距 */
            z-index: 10;               /* 层级高于轮播内容 */
        }

        /* 单个指示器 */
        .indicator {
            width: 12px;               /* 宽度 */
            height: 12px;              /* 高度 */
            border-radius: 50%;        /* 圆形 */
            background: rgba(255, 255, 255, 0.5);  /* 半透明白色 */
            cursor: pointer;           /* 鼠标手型 */
            transition: all 0.3s;      /* 过渡效果 */
        }

        /* 激活状态的指示器 */
        .indicator.active {
            background: white;         /* 白色 */
            width: 30px;               /* 变长 */
            border-radius: 6px;        /* 变为椭圆 */
        }
        
        /* ========== 精选文章封面样式 ========== */
        /* 精选文章封面容器 */
        .featured-cover {
            height: 100%;              /* 高度100% */
            overflow: hidden;          /* 隐藏溢出 */
            position: relative;        /* 相对定位，用于遮罩层绝对定位 */
        }
        
        /* 封面图片 */
        .featured-cover img {
            width: 100%;               /* 宽度100% */
            height: 100%;              /* 高度100% */
            object-fit: cover;         /* 裁剪填充 */
            transition: transform 0.6s ease;  /* 缩放过渡动画 */
        }
        
        /* 悬停时图片放大效果 */
        .featured-card:hover .featured-cover img {
            transform: scale(1.08);    /* 放大到1.08倍 */
        }
        
        /* 封面遮罩层 */
        .featured-overlay {
            position: absolute;        /* 绝对定位 */
            bottom: 0;                 /* 从底部开始 */
            left: 0;                   /* 从左侧开始 */
            right: 0;                  /* 到右侧结束 */
            height: 160px;             /* 180px→160px，更紧凑 */
            /* 渐变背景：从底部黑色渐变到透明 */
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
            display: flex;             /* flex布局 */
            flex-direction: column;    /* 垂直排列 */
            justify-content: flex-end; /* 底部对齐 */
            padding: 20px;             /* 30px→20px，更紧凑 */
        }
        
        /* 分类标签 */
        .featured-category {
            display: inline-block;     /* 行内块 */
            background: var(--grad-primary);  /* 主题渐变背景 */
            color: white;              /* 白色文字 */
            padding: 4px 14px;         /* 6px 18px→4px 14px，更紧凑 */
            border-radius: 20px;       /* 圆角 */
            font-size: 0.75rem;        /* 0.8rem→0.75rem，略缩小 */
            font-weight: 600;          /* 字重 */
            margin-bottom: 8px;        /* 15px→8px，更紧凑 */
            align-self: flex-start;    /* 左对齐 */
            box-shadow: 0 2px 10px rgba(6, 182, 212, 0.4);  /* 发光效果 */
        }
        
        /* 精选文章标题 */
        .featured-title {
            font-size: 1.8rem;         /* 2rem→1.8rem，略缩小 */
            font-weight: 700;          /* 字重 */
            color: white;              /* 白色文字 */
            line-height: 1.15;         /* 1.3→1.15，行高明显收紧 */
            margin-bottom: 6px;        /* 12px→6px，更紧凑 */
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);  /* 文字阴影 */
        }
        
        /* 标题链接 */
        .featured-title a {
            color: white;              /* 白色 */
            text-decoration: none;     /* 无下划线 */
            transition: color 0.3s ease;  /* 颜色过渡 */
        }
        
        /* 标题链接悬停效果 */
        .featured-title a:hover {
            color: #a5f3fc;            /* 青色高亮 */
        }
        
        /* 精选文章元信息（日期、浏览量、评论数） */
        .featured-meta {
            display: flex;             /* flex布局 */
            gap: 12px;                 /* 20px→12px，更紧凑 */
            color: rgba(255,255,255,0.8);  /* 半透明白色 */
            font-size: 0.85rem;        /* 0.9rem→0.85rem，略缩小 */
        }

        /* ========== 侧边推荐卡片样式 ========== */
        /* 侧边推荐卡片容器 */
        .side-cards {
            flex: 1;                   /* 占1份空间 */
            display: flex;             /* flex布局 */
            flex-direction: column;    /* 垂直排列 */
            gap: 15px;                /* 卡片间距 */
            padding: 16px;            /* 内边距 */
            background: var(--grad-card);  /* 主题渐变背景 */
            border-radius: var(--radius-lg);  /* 圆角 */
            border: 1px solid var(--border-light);  /* 边框 */
            box-shadow: var(--shadow-card);   /* 阴影 */
            height: 100%;              /* 高度100% */
        }
        
        /* 单个侧边推荐卡片 */
        .side-card {
            background: var(--grad-card);    /* 主题渐变背景 */
            border-radius: var(--radius-md); /* 圆角 */
            overflow: hidden;              /* 隐藏溢出 */
            box-shadow: var(--shadow-card); /* 阴影 */
            border: 1px solid var(--border-light);  /* 边框 */
            transition: all 0.3s ease;     /* 过渡动画 */
            position: relative;            /* 相对定位 */
            flex: 1;                       /* 均分高度 */
            display: flex;                 /* flex布局 */
            flex-direction: column;        /* 垂直排列 */
            min-height: 0;                 /* 允许收缩 */
        }
        
        /* 侧边卡片悬停效果 */
        .side-card:hover {
            box-shadow: var(--shadow-hover);  /* 加深阴影 */
            transform: translateY(-3px);      /* 向上移动3px */
        }
        
        /* 侧边卡片封面 */
        .side-cover {
            height: 110px;             /* 固定高度 */
            overflow: hidden;          /* 隐藏溢出 */
            position: relative;        /* 相对定位，用于分类标签 */
        }
        
        /* 侧边卡片封面图片 */
        .side-cover img {
            width: 100%;               /* 宽度100% */
            height: 100%;              /* 高度100% */
            object-fit: cover;         /* 裁剪填充 */
            transition: transform 0.3s ease;  /* 缩放过渡 */
        }
        
        /* 悬停时图片放大 */
        .side-card:hover .side-cover img {
            transform: scale(1.1);     /* 放大到1.1倍 */
        }
        
        /* 侧边卡片分类标签 */
        .side-category {
            position: absolute;        /* 绝对定位 */
            top: 8px;                  /* 距离顶部8px */
            left: 8px;                 /* 距离左侧8px */
            background: var(--grad-primary);  /* 主题渐变背景 */
            color: #1e293b;            /* 深色文字 */
            padding: 4px 10px;         /* 内边距 */
            border-radius: 10px;       /* 圆角 */
            font-size: 0.7rem;         /* 字体大小 */
            font-weight: 600;          /* 字重 */
        }
        
        /* 侧边卡片内容区域 */
        .side-body {
            padding: 12px;             /* 内边距 */
        }
        
        /* 侧边卡片标题 */
        .side-title {
            font-size: 0.9rem;         /* 字体大小 */
            font-weight: 600;          /* 字重 */
            color: #1e293b;            /* 深色文字 */
            text-decoration: none;     /* 无下划线 */
            display: -webkit-box;      /* webkit弹性盒 */
            -webkit-line-clamp: 2;     /* 最多显示2行 */
            -webkit-box-orient: vertical;  /* 垂直排列 */
            overflow: hidden;          /* 隐藏溢出 */
            line-height: 1.4;          /* 行高 */
        }
        
        /* 标题链接 */
        .side-title a {
            color: #1e293b;            /* 深色文字 */
            text-decoration: none;     /* 无下划线 */
            transition: color 0.3s ease;  /* 颜色过渡 */
        }
        
        /* 标题链接悬停效果 */
        .side-title a:hover {
            color: var(--color-primary);  /* 主题色高亮 */
        }
        
        /* 侧边卡片元信息 */
        .side-meta {
            display: flex;             /* flex布局 */
            gap: 12px;                /* 间距 */
            color: #64748b;           /* 灰色文字 */
            font-size: 0.8rem;        /* 字体大小 */
            margin-top: 8px;          /* 顶部间距 */
        }

        /* ========== 热门文章网格样式 ========== */
        /* 热门文章网格容器 */
        .stats-grid {
            display: grid;                    /* grid布局 */
            grid-template-columns: repeat(4, 1fr);  /* 4列等宽 */
            gap: 16px;                       /* 间距 */
            padding: 16px;                   /* 内边距 */
            background: var(--grad-card);     /* 主题渐变背景 */
            border-radius: var(--radius-lg);  /* 圆角 */
            border: 1px solid var(--border-light);  /* 边框 */
            box-shadow: var(--shadow-card);   /* 阴影 */
        }
        
        /* 热门文章卡片 */
        .stat-card {
            background: var(--grad-card);    /* 主题渐变背景 */
            border-radius: var(--radius-md); /* 圆角 */
            overflow: hidden;              /* 隐藏溢出 */
            box-shadow: var(--shadow-card); /* 阴影 */
            border: 1px solid var(--border-light);  /* 边框 */
            transition: all 0.3s ease;     /* 过渡动画 */
            position: relative;            /* 相对定位 */
        }
        
        /* 热门卡片悬停效果 */
        .stat-card:hover {
            box-shadow: var(--shadow-hover);  /* 加深阴影 */
            transform: translateY(-3px);      /* 向上移动3px */
        }
        
        /* 热门卡片封面 */
        .hot-cover {
            height: 140px;             /* 固定高度 */
            overflow: hidden;          /* 隐藏溢出 */
            position: relative;        /* 相对定位，用于排名标签 */
        }
        
        /* 热门卡片封面图片 */
        .hot-cover img {
            width: 100%;               /* 宽度100% */
            height: 100%;              /* 高度100% */
            object-fit: cover;         /* 裁剪填充 */
            transition: transform 0.3s ease;  /* 缩放过渡 */
        }
        
        /* 悬停时图片放大 */
        .stat-card:hover .hot-cover img {
            transform: scale(1.1);     /* 放大到1.1倍 */
        }
        
        /* 热门排名标签 */
        .hot-rank {
            position: absolute;        /* 绝对定位 */
            top: 8px;                  /* 距离顶部8px */
            right: 8px;                /* 距离右侧8px */
            width: 26px;               /* 宽度 */
            height: 26px;              /* 高度 */
            border-radius: 50%;        /* 圆形 */
            background: var(--grad-primary);  /* 主题渐变背景 */
            color: white;              /* 白色文字 */
            font-size: 0.8rem;         /* 字体大小 */
            font-weight: 700;          /* 字重 */
            display: flex;             /* flex布局 */
            align-items: center;       /* 垂直居中 */
            justify-content: center;   /* 水平居中 */
            box-shadow: 0 2px 8px rgba(6, 182, 212, 0.4);  /* 发光效果 */
        }
        
        /* 热门卡片信息区域 */
        .hot-info {
            padding: 14px;             /* 内边距 */
        }
        
        /* 热门卡片标题 */
        .hot-title {
            font-size: 0.9rem;         /* 字体大小 */
            font-weight: 600;          /* 字重 */
            color: #1e293b;            /* 深色文字 */
            text-decoration: none;     /* 无下划线 */
            display: -webkit-box;      /* webkit弹性盒 */
            -webkit-line-clamp: 2;     /* 最多显示2行 */
            -webkit-box-orient: vertical;  /* 垂直排列 */
            overflow: hidden;          /* 隐藏溢出 */
            line-height: 1.4;          /* 行高 */
            margin-bottom: 8px;        /* 底部间距 */
        }
        
        /* 热门标题悬停效果 */
        .hot-title:hover {
            color: var(--color-primary);  /* 主题色高亮 */
        }
        
        /* 热门卡片元信息 */
        .hot-meta {
            font-size: 0.8rem;         /* 字体大小 */
            color: var(--text-gray);   /* 灰色文字 */
        }
        
        /* 热门卡片元信息图标 */
        .hot-meta i {
            color: var(--color-primary);  /* 主题色图标 */
            margin-right: 4px;        /* 右侧间距 */
        }

        /* ========== 侧边栏热门文章列表样式 ========== */
        /* 侧边栏热门文章列表容器 */
        .hot-articles {
            display: flex;             /* flex布局 */
            flex-direction: column;    /* 垂直排列 */
            gap: 12px;                /* 间距 */
        }

        /* 侧边栏热门文章卡片 */
        .hot-article-card {
            background: white;         /* 白色背景 */
            border-radius: var(--radius-md); /* 圆角 */
            overflow: hidden;          /* 隐藏溢出 */
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);  /* 轻微阴影 */
            border: 1px solid var(--border-light);  /* 边框 */
            transition: all 0.3s ease; /* 过渡动画 */
        }

        /* 侧边栏热门卡片悬停效果 */
        .hot-article-card:hover {
            transform: translateY(-2px);      /* 向上移动2px */
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);  /* 加深阴影 */
        }

        /* 卡片链接 */
        .hot-article-card a {
            display: flex;             /* flex布局 */
            align-items: center;       /* 垂直居中 */
            text-decoration: none;     /* 无下划线 */
        }

        /* 侧边栏热门卡片封面 */
        .hot-article-cover {
            width: 80px;               /* 固定宽度 */
            height: 65px;              /* 固定高度 */
            overflow: hidden;          /* 隐藏溢出 */
            position: relative;        /* 相对定位 */
            flex-shrink: 0;            /* 不收缩 */
        }

        /* 侧边栏热门卡片封面图片 */
        .hot-article-cover img {
            width: 100%;               /* 宽度100% */
            height: 100%;              /* 高度100% */
            object-fit: cover;         /* 裁剪填充 */
            transition: transform 0.3s ease;  /* 缩放过渡 */
        }

        /* 悬停时图片放大 */
        .hot-article-card:hover .hot-article-cover img {
            transform: scale(1.1);     /* 放大到1.1倍 */
        }

        /* 侧边栏热门卡片信息区域 */
        .hot-article-info {
            padding: 12px 14px;        /* 内边距 */
            flex: 1;                   /* 占剩余空间 */
            min-width: 0;              /* 允许收缩 */
        }

        /* 侧边栏热门卡片标题 */
        .hot-article-title {
            font-size: 0.88rem;        /* 字体大小 */
            font-weight: 600;          /* 字重 */
            color: var(--text-dark);   /* 深色文字 */
            display: -webkit-box;      /* webkit弹性盒 */
            -webkit-line-clamp: 2;     /* 最多显示2行 */
            -webkit-box-orient: vertical;  /* 垂直排列 */
            overflow: hidden;          /* 隐藏溢出 */
            line-height: 1.4;          /* 行高 */
            margin-bottom: 6px;        /* 底部间距 */
        }

        /* 标题悬停效果 */
        .hot-article-card:hover .hot-article-title {
            color: var(--color-primary);  /* 主题色高亮 */
        }

        /* 侧边栏热门卡片浏览量 */
        .hot-article-views {
            font-size: 0.78rem;        /* 字体大小 */
            color: var(--text-gray);   /* 灰色文字 */
        }

        /* 浏览量图标 */
        .hot-article-views i {
            color: var(--color-primary);  /* 主题色图标 */
            margin-right: 4px;        /* 右侧间距 */
        }

        /* ========== 文章列表样式 ========== */
        /* 文章列表容器 */
        .article-list {
            background: var(--grad-card);    /* 主题渐变背景 */
            border-radius: var(--radius-lg); /* 圆角 */
            padding: 28px;                  /* 内边距 */
            box-shadow: var(--shadow-card);  /* 阴影 */
            border: 1px solid var(--border-light);  /* 边框 */
        }
        
        /* 区块标题 */
        .section-title {
            font-size: 1.4rem;         /* 字体大小 */
            font-weight: 700;          /* 字重 */
            color: #1e293b;            /* 深色文字 */
            margin-bottom: 25px;       /* 底部间距 */
            padding-bottom: 15px;      /* 底部内边距 */
            position: relative;        /* 相对定位，用于伪元素 */
        }
        
        /* 区块标题下划线 */
        .section-title::after {
            content: '';              /* 空内容 */
            position: absolute;       /* 绝对定位 */
            bottom: 0;                /* 距离底部0 */
            left: 0;                  /* 距离左侧0 */
            width: 60px;              /* 宽度60px */
            height: 4px;              /* 高度4px */
            background: var(--grad-primary);  /* 主题渐变背景 */
            border-radius: 2px;       /* 圆角 */
        }

        /* 文章列表头部（标题+排序） */
        .article-list-header {
            display: flex;             /* flex布局 */
            justify-content: space-between;  /* 两端对齐 */
            align-items: center;       /* 垂直居中 */
            margin-bottom: 25px;       /* 底部间距 */
        }

        /* 排序标签容器 */
        .sort-tabs {
            display: flex;             /* flex布局 */
            gap: 8px;                 /* 间距 */
        }

        /* 单个排序标签 */
        .sort-tab {
            padding: 8px 16px;        /* 内边距 */
            border-radius: 20px;       /* 圆角 */
            font-size: 0.9rem;        /* 字体大小 */
            color: #475569;           /* 灰色文字 */
            background: #f1f5f9;      /* 浅灰色背景 */
            transition: all 0.3s ease; /* 过渡动画 */
            text-decoration: none;     /* 无下划线 */
        }

        /* 排序标签悬停效果 */
        .sort-tab:hover {
            background: #e2e8f0;      /* 加深背景 */
            color: #334155;           /* 加深文字 */
        }

        /* 激活状态的排序标签 */
        .sort-tab.active {
            background: var(--grad-primary);  /* 主题渐变背景 */
            color: white;              /* 白色文字 */
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);  /* 发光效果 */
        }

        /* 无结果提示 */
        .no-results {
            text-align: center;         /* 文字居中 */
            padding: 60px 20px;        /* 内边距 */
            color: #94a3b8;            /* 灰色文字 */
        }

        /* 无结果图标 */
        .no-results i {
            font-size: 4rem;            /* 图标大小 */
            margin-bottom: 16px;       /* 底部间距 */
            opacity: 0.5;              /* 半透明 */
        }

        /* 无结果提示文字 */
        .no-results p {
            font-size: 1.1rem;         /* 字体大小 */
            margin-bottom: 8px;        /* 底部间距 */
        }

        /* 无结果提示小字 */
        .no-results-hint {
            font-size: 0.9rem !important;  /* 字体大小（强制覆盖） */
            color: #cbd5e1 !important;     /* 浅灰色（强制覆盖） */
        }
        
        /* 文章列表项容器 */
        .article-items {
            display: flex;             /* flex布局 */
            flex-direction: column;    /* 垂直排列 */
            gap: 20px;                /* 间距 */
        }
        
        /* 单个文章项 */
        .article-item {
            display: flex;             /* flex布局 */
            gap: 20px;                /* 间距 */
            padding: 16px;            /* 内边距 */
            background: rgba(255,255,255,0.6);  /* 半透明白色背景 */
            border-radius: var(--radius-md); /* 圆角 */
            transition: all 0.3s ease; /* 过渡动画 */
            border: 1px solid transparent;  /* 透明边框 */
        }
        
        /* 文章项悬停效果 */
        .article-item:hover {
            background: white;         /* 白色背景 */
            border-color: var(--border-light);  /* 显示边框 */
            box-shadow: 0 2px 10px rgba(6, 182, 212, 0.08);  /* 轻微阴影 */
            transform: translateX(5px);        /* 向右移动5px */
        }
        
        /* 文章项封面 */
        .article-item-cover {
            width: 120px;              /* 固定宽度 */
            height: 80px;              /* 固定高度 */
            border-radius: var(--radius-sm); /* 圆角 */
            overflow: hidden;          /* 隐藏溢出 */
            flex-shrink: 0;            /* 不收缩 */
        }
        
        /* 文章项封面图片 */
        .article-item-cover img {
            width: 100%;               /* 宽度100% */
            height: 100%;              /* 高度100% */
            object-fit: cover;         /* 裁剪填充 */
        }
        
        /* 文章项内容区域 */
        .article-item-content {
            flex: 1;                   /* 占剩余空间 */
            display: flex;             /* flex布局 */
            flex-direction: column;    /* 垂直排列 */
            justify-content: space-between;  /* 两端对齐 */
        }
        
        /* 文章项标题 */
        .article-item-title {
            font-size: 1.1rem;         /* 字体大小 */
            font-weight: 600;          /* 字重 */
            color: #1e293b;            /* 深色文字 */
            text-decoration: none;     /* 无下划线 */
            transition: color 0.3s ease;  /* 颜色过渡 */
            display: -webkit-box;      /* webkit弹性盒 */
            -webkit-line-clamp: 2;     /* 最多显示2行 */
            -webkit-box-orient: vertical;  /* 垂直排列 */
            overflow: hidden;          /* 隐藏溢出 */
        }
        
        /* 文章标题悬停效果 */
        .article-item-title:hover {
            color: var(--color-primary);  /* 主题色高亮 */
        }
        
        /* 文章项元信息 */
        .article-item-meta {
            display: flex;             /* flex布局 */
            gap: 15px;                /* 间距 */
            color: #64748b;           /* 灰色文字 */
            font-size: 0.85rem;        /* 字体大小 */
        }

        /* ========== 侧边栏样式 ========== */
        /* 侧边栏容器 */
        .sidebar {
            display: flex;             /* flex布局 */
            flex-direction: column;    /* 垂直排列 */
            gap: 25px;                /* 卡片间距 */
        }
        
        /* 侧边栏卡片通用样式 */
        .sidebar-card {
            background: var(--grad-card);    /* 主题渐变背景 */
            border-radius: var(--radius-lg); /* 圆角 */
            padding: 26px;                  /* 内边距 */
            box-shadow: var(--shadow-card);  /* 阴影 */
            border: 1px solid var(--border-light);  /* 边框 */
        }
        
        /* 侧边栏标题 */
        .sidebar-title {
            font-size: 1.15rem;        /* 字体大小 */
            font-weight: 700;          /* 字重 */
            color: var(--text-dark);   /* 深色文字 */
            margin-bottom: 20px;       /* 底部间距 */
            padding-bottom: 15px;      /* 底部内边距 */
            position: relative;        /* 相对定位，用于伪元素 */
            display: flex;             /* flex布局 */
            align-items: center;       /* 垂直居中 */
            gap: 10px;                /* 图标与文字间距 */
        }
        
        /* 侧边栏标题下划线 */
        .sidebar-title::after {
            content: '';              /* 空内容 */
            position: absolute;       /* 绝对定位 */
            bottom: 0;                /* 距离底部0 */
            left: 0;                  /* 距离左侧0 */
            right: 0;                 /* 距离右侧0 */
            height: 2px;              /* 高度2px */
            background: var(--grad-primary);  /* 主题渐变背景 */
        }
        
        /* 侧边栏标题图标 */
        .sidebar-title i {
            background: var(--grad-primary);   /* 主题渐变背景 */
            -webkit-background-clip: text;    /* 背景裁剪为文字形状 */
            -webkit-text-fill-color: transparent;  /* 文字填充透明 */
            background-clip: text;             /* 背景裁剪兼容 */
        }

        /* 博主资料卡片 */
        .profile-card {
            text-align: center;         /* 文字居中 */
        }
        
        /* 博主头像 */
        .profile-avatar {
            width: 90px;               /* 宽度 */
            height: 90px;              /* 高度 */
            border-radius: 50%;        /* 圆形 */
            background: var(--grad-primary);  /* 主题渐变背景 */
            margin: 0 auto 18px;       /* 水平居中，底部间距 */
            display: flex;             /* flex布局 */
            align-items: center;       /* 垂直居中 */
            justify-content: center;   /* 水平居中 */
            font-size: 2.2rem;         /* 图标大小 */
            color: white;              /* 白色 */
            box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);  /* 发光效果 */
            position: relative;        /* 相对定位，用于伪元素 */
            overflow: hidden;          /* 隐藏溢出 */
        }
        
        /* 头像图片 */
        .profile-avatar img {
            width: 100%;               /* 宽度100% */
            height: 100%;              /* 高度100% */
            object-fit: cover;         /* 裁剪填充 */
        }
        
        /* 头像发光效果伪元素 */
        .profile-avatar::before {
            content: '';              /* 空内容 */
            position: absolute;       /* 绝对定位 */
            width: 100%;              /* 宽度100% */
            height: 100%;             /* 高度100% */
            border-radius: 50%;       /* 圆形 */
            background: var(--grad-primary);  /* 主题渐变背景 */
            filter: blur(15px);       /* 模糊效果 */
            opacity: 0.4;             /* 半透明 */
            z-index: -1;              /* 在底层 */
        }
        
        /* 博主名称 */
        .profile-name {
            font-size: 1.2rem;         /* 字体大小 */
            font-weight: 700;          /* 字重 */
            color: #1e293b;            /* 深色文字 */
            margin-bottom: 8px;        /* 底部间距 */
        }
        
        /* 博主描述 */
        .profile-desc {
            color: #64748b;           /* 灰色文字 */
            font-size: 0.9rem;        /* 字体大小 */
            margin-bottom: 22px;       /* 底部间距 */
        }
        
        /* 博主统计数据 */
        .profile-stats {
            display: flex;             /* flex布局 */
            justify-content: center;   /* 水平居中 */
            gap: 45px;                /* 间距 */
            padding-top: 20px;        /* 顶部内边距 */
            border-top: 1px solid var(--border-light);  /* 顶部边框 */
        }
        
        /* 单个统计项 */
        .stat-item {
            text-align: center;         /* 文字居中 */
        }
        
        /* 统计数字 */
        .stat-number {
            font-size: 1.6rem;         /* 字体大小 */
            font-weight: 700;          /* 字重 */
            background: var(--grad-primary);   /* 主题渐变背景 */
            -webkit-background-clip: text;    /* 背景裁剪为文字形状 */
            -webkit-text-fill-color: transparent;  /* 文字填充透明 */
            background-clip: text;             /* 背景裁剪兼容 */
        }
        
        /* 统计标签 */
        .stat-label {
            font-size: 0.8rem;         /* 字体大小 */
            color: var(--text-gray);   /* 灰色文字 */
            margin-top: 3px;           /* 顶部间距 */
        }

        /* ========== 用户登录状态样式 ========== */
        /* 用户登录状态容器 */
        .login-status {
            padding: 15px 0;           /* 上下内边距 */
        }

        /* 用户小头像 */
        .user-avatar-sm {
            width: 50px;                /* 宽度 */
            height: 50px;               /* 高度 */
            border-radius: 50%;         /* 圆形 */
            background: var(--grad-primary);  /* 主题渐变背景 */
            display: flex;              /* flex布局 */
            align-items: center;        /* 垂直居中 */
            justify-content: center;    /* 水平居中 */
            margin: 0 auto 12px;        /* 水平居中，底部间距 */
            font-size: 1.5rem;          /* 图标大小 */
            color: white;               /* 白色 */
            overflow: hidden;           /* 隐藏溢出 */
        }

        /* 用户小头像图片 */
        .user-avatar-sm img {
            width: 100%;                /* 宽度100% */
            height: 100%;               /* 高度100% */
            object-fit: cover;          /* 裁剪填充 */
            box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);  /* 发光效果 */
        }

        /* 用户信息区域 */
        .user-info {
            text-align: center;         /* 文字居中 */
            margin-bottom: 15px;        /* 底部间距 */
        }

        /* 用户名称 */
        .user-name {
            font-size: 1.1rem;          /* 字体大小 */
            font-weight: 600;           /* 字重 */
            color: #1e293b;             /* 深色文字 */
            margin-bottom: 4px;         /* 底部间距 */
        }

        /* 用户余额 */
        .user-balance {
            font-size: 0.9rem;          /* 字体大小 */
            color: var(--color-primary);  /* 主题色 */
            font-weight: 500;           /* 字重 */
        }

        /* 用户操作按钮容器 */
        .user-actions {
            display: flex;              /* flex布局 */
            gap: 10px;                 /* 间距 */
        }

        /* 操作按钮 */
        .btn-action {
            flex: 1;                   /* 均分宽度 */
            padding: 10px;             /* 内边距 */
            text-align: center;         /* 文字居中 */
            border-radius: 8px;         /* 圆角 */
            text-decoration: none;      /* 无下划线 */
            font-size: 0.85rem;        /* 字体大小 */
            font-weight: 500;          /* 字重 */
            background: var(--grad-primary);  /* 主题渐变背景 */
            color: #1e293b;            /* 深色文字 */
            transition: all 0.3s ease;  /* 过渡动画 */
            display: flex;              /* flex布局 */
            align-items: center;        /* 垂直居中 */
            justify-content: center;    /* 水平居中 */
            gap: 6px;                  /* 图标与文字间距 */
        }

        /* 操作按钮悬停效果 */
        .btn-action:hover {
            transform: translateY(-2px);       /* 向上移动2px */
            box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);  /* 发光效果 */
        }

        /* 危险操作按钮（退出等） */
        .btn-action-danger {
            background: rgba(239, 68, 68, 0.1);  /* 红色透明背景 */
            color: #ef4444;            /* 红色文字 */
        }

        /* 危险按钮悬停效果 */
        .btn-action-danger:hover {
            background: rgba(239, 68, 68, 0.2);  /* 加深红色背景 */
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);  /* 红色发光 */
        }

        /* 登录表单容器 */
        .login-form {
            padding: 10px 0;           /* 上下内边距 */
        }

        /* 表单组 */
        .login-form .form-group {
            margin-bottom: 12px;       /* 底部间距 */
        }

        /* 表单输入框 */
        .login-form input {
            width: 100%;                /* 宽度100% */
            padding: 10px 14px;        /* 内边距 */
            border: 1px solid var(--border-light);  /* 边框 */
            border-radius: 8px;         /* 圆角 */
            font-size: 0.9rem;         /* 字体大小 */
            background: rgba(255,255,255,0.6);  /* 半透明白色背景 */
            transition: all 0.3s ease;  /* 过渡动画 */
            outline: none;             /* 去除默认焦点边框 */
        }

        /* 输入框聚焦状态 */
        .login-form input:focus {
            border-color: var(--color-primary);  /* 主题色边框 */
            box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);  /* 聚焦光晕 */
        }

        /* 输入框占位符 */
        .login-form input::placeholder {
            color: #94a3b8;            /* 灰色占位符 */
        }

        /* 登录提交按钮 */
        .btn-submit {
            width: 100%;                /* 宽度100% */
            padding: 12px;             /* 内边距 */
            border: none;              /* 无边框 */
            border-radius: 8px;         /* 圆角 */
            font-size: 0.95rem;        /* 字体大小 */
            font-weight: 600;          /* 字重 */
            background: var(--grad-primary);  /* 主题渐变背景 */
            color: #1e293b;            /* 深色文字 */
            cursor: pointer;           /* 鼠标手型 */
            transition: all 0.3s ease;  /* 过渡动画 */
            display: flex;              /* flex布局 */
            align-items: center;        /* 垂直居中 */
            justify-content: center;    /* 水平居中 */
            gap: 8px;                  /* 图标与文字间距 */
        }

        /* 提交按钮悬停效果 */
        .btn-submit:hover {
            transform: translateY(-2px);       /* 向上移动2px */
            box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);  /* 发光效果 */
        }

        /* 登录链接区域 */
        .login-links {
            text-align: center;         /* 文字居中 */
            margin-top: 12px;           /* 顶部间距 */
        }

        /* 登录链接 */
        .login-links a {
            font-size: 0.85rem;        /* 字体大小 */
            color: var(--color-primary);  /* 主题色 */
            text-decoration: none;      /* 无下划线 */
        }

        /* 登录链接悬停效果 */
        .login-links a:hover {
            text-decoration: underline;  /* 下划线 */
        }

        /* ========== 分类列表样式 ========== */
        /* 分类列表 */
        .category-list {
            list-style: none;           /* 无列表标记 */
            padding: 0;                /* 无内边距 */
        }
        
        /* 分类列表项 */
        .category-list li {
            margin-bottom: 10px;        /* 底部间距 */
        }
        
        /* 分类链接 */
        .category-list a {
            display: flex;              /* flex布局 */
            align-items: center;        /* 垂直居中 */
            justify-content: space-between;  /* 两端对齐 */
            color: #475569;            /* 灰色文字 */
            text-decoration: none;      /* 无下划线 */
            padding: 12px 15px;        /* 内边距 */
            border-radius: var(--radius-sm); /* 圆角 */
            transition: all 0.3s ease;  /* 过渡动画 */
        }
        
        /* 分类链接悬停效果 */
        .category-list a:hover {
            background: var(--grad-primary);  /* 主题渐变背景 */
            color: #1e293b;            /* 深色文字 */
            transform: translateX(5px);       /* 向右移动5px */
        }
        
        /* 分类文章数量 */
        .category-count {
            background: rgba(0,0,0,0.08);  /* 深色透明背景 */
            padding: 4px 12px;         /* 内边距 */
            border-radius: 15px;        /* 圆角 */
            font-size: 0.75rem;        /* 字体大小 */
            font-weight: 600;          /* 字重 */
            color: #64748b;            /* 灰色文字 */
        }

        /* ========== 日历卡片样式 ========== */
        .calendar-card {
            padding: 0;
            overflow: hidden;
        }
        .calendar-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 16px 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
        }
        .calendar-nav-btn {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 8px;
            background: rgba(255,255,255,0.2);
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            font-size: 0.8rem;
        }
        .calendar-nav-btn:hover {
            background: rgba(255,255,255,0.35);
            transform: scale(1.1);
        }
        .calendar-title {
            font-size: 1rem;
            font-weight: 700;
            text-align: center;
            flex: 1;
        }
        .calendar-body {
            padding: 12px;
        }
        .calendar-weekdays {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
            margin-bottom: 6px;
        }
        .calendar-weekday {
            text-align: center;
            font-size: 0.75rem;
            font-weight: 600;
            color: #94a3b8;
            padding: 4px 0;
        }
        .calendar-weekday.weekend {
            color: #f87171;
        }
        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 2px;
        }
        .calendar-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.82rem;
            border-radius: 8px;
            cursor: default;
            transition: all 0.2s;
            color: #475569;
            position: relative;
        }
        .calendar-day:hover {
            background: #f1f5f9;
        }
        .calendar-day.other-month {
            color: #cbd5e1;
        }
        .calendar-day.today {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            font-weight: 700;
            box-shadow: 0 3px 10px rgba(102,126,234,0.4);
        }
        .calendar-day.weekend {
            color: #f87171;
        }
        .calendar-day.weekend.today {
            color: #fff;
        }
        .calendar-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 16px 14px;
            font-size: 0.78rem;
            color: #64748b;
            border-top: 1px solid #f1f5f9;
            margin-top: 6px;
        }
        .calendar-today-label {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .calendar-today-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        /* ========== 倒计时卡片样式 ========== */
        /* 倒计时卡片容器 */
        .countdown-card {
            background: var(--grad-card);    /* 主题渐变背景 */
            border-radius: var(--radius-lg); /* 圆角 */
            padding: 26px;                  /* 内边距 */
            box-shadow: var(--shadow-card);  /* 阴影 */
            border: 1px solid var(--border-light);  /* 边框 */
        }
        
        /* 倒计时标题 */
        .countdown-title {
            font-size: 1.15rem;        /* 字体大小 */
            font-weight: 700;          /* 字重 */
            color: #1e293b;            /* 深色文字 */
            margin-bottom: 20px;       /* 底部间距 */
            padding-bottom: 15px;      /* 底部内边距 */
            position: relative;        /* 相对定位，用于伪元素 */
        }
        
        /* 倒计时标题下划线 */
        .countdown-title::after {
            content: '';              /* 空内容 */
            position: absolute;       /* 绝对定位 */
            bottom: 0;                /* 距离底部0 */
            left: 0;                  /* 距离左侧0 */
            width: 50px;              /* 宽度50px */
            height: 3px;              /* 高度3px */
            background: var(--grad-primary);  /* 主题渐变背景 */
            border-radius: 2px;       /* 圆角 */
        }
        
        /* 进度列表 */
        .progress-list {
            display: flex;             /* flex布局 */
            flex-direction: column;    /* 垂直排列 */
            gap: 20px;                /* 间距 */
        }
        
        /* 单个进度项 */
        .progress-item {
            display: flex;             /* flex布局 */
            flex-direction: column;    /* 垂直排列 */
            gap: 6px;                 /* 间距 */
        }
        
        /* 进度头部（标签+数值） */
        .progress-header {
            display: flex;             /* flex布局 */
            justify-content: space-between;  /* 两端对齐 */
            align-items: center;       /* 垂直居中 */
            font-size: 0.9rem;         /* 字体大小 */
        }
        
        /* 进度标签 */
        .progress-header span:first-child {
            color: #334155;            /* 深色文字 */
            font-weight: 600;          /* 字重 */
        }
        
        /* 进度数值 */
        .progress-value {
            color: #64748b;           /* 灰色文字 */
            font-weight: 600;          /* 字重 */
        }
        
        /* 进度条容器 */
        .progress-bar-wrap {
            height: 8px;              /* 高度 */
            background: rgba(0,0,0,0.06);  /* 深色透明背景 */
            border-radius: 4px;        /* 圆角 */
            overflow: hidden;          /* 隐藏溢出 */
        }
        
        /* 进度条 */
        .progress-bar {
            height: 100%;             /* 高度100% */
            border-radius: 4px;        /* 圆角 */
            transition: width 1s ease; /* 宽度过渡动画 */
        }
        
        /* 今日进度条颜色 */
        .day-progress {
            background: linear-gradient(90deg, #3b82f6, #22d3ee);  /* 蓝色渐变 */
        }
        
        /* 本周进度条颜色 */
        .week-progress {
            background: linear-gradient(90deg, #fbbf24, #f87171);  /* 橙红渐变 */
        }
        
        /* 本月进度条颜色 */
        .month-progress {
            background: linear-gradient(90deg, #f87171, #f472b6);  /* 红粉渐变 */
        }
        
        /* 本年进度条颜色 */
        .year-progress {
            background: linear-gradient(90deg, #34d399, #3b82f6);  /* 绿蓝渐变 */
        }
        
        /* 进度百分比 */
        .progress-percent {
            text-align: right;         /* 右对齐 */
            font-size: 0.85rem;        /* 字体大小 */
            font-weight: 600;          /* 字重 */
            color: var(--text-gray);   /* 灰色文字 */
        }

        /* 生日倒计时 */
        .birthday-countdown {
            margin-top: 20px;            /* 顶部间距 */
            padding-top: 15px;          /* 顶部内边距 */
            border-top: 1px solid var(--border-light);  /* 顶部边框 */
            text-align: center;          /* 文字居中 */
        }

        /* 生日标签 */
        .birthday-label {
            font-size: 0.85rem;        /* 字体大小 */
            color: var(--text-gray);   /* 灰色文字 */
            margin-bottom: 5px;        /* 底部间距 */
        }

        /* 生日天数 */
        .birthday-value {
            font-size: 1.5rem;         /* 字体大小 */
            font-weight: 700;          /* 字重 */
            background: linear-gradient(135deg, #ec4899, #f472b6);  /* 粉色渐变 */
            -webkit-background-clip: text;    /* 背景裁剪为文字形状 */
            -webkit-text-fill-color: transparent;  /* 文字填充透明 */
            background-clip: text;             /* 背景裁剪兼容 */
        }

        /* ========== 标签云样式 ========== */
        /* 标签云容器 */
        .tag-cloud {
            display: flex;             /* flex布局 */
            flex-wrap: wrap;           /* 自动换行 */
            gap: 8px;                 /* 间距 */
        }

        /* 标签链接 */
        .tag-cloud a {
            padding: 6px 14px;        /* 内边距 */
            border-radius: 20px;       /* 圆角 */
            font-size: 0.85rem;        /* 字体大小 */
            text-decoration: none;      /* 无下划线 */
            transition: all 0.3s;      /* 过渡动画 */
        }

        /* 标签悬停效果 */
        .tag-cloud a:hover {
            transform: translateY(-2px);      /* 向上移动2px */
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);  /* 阴影效果 */
        }

        /* ========== 每日语录样式 ========== */
        /* 语录卡片 */
        .quote-card {
            text-align: center;         /* 文字居中 */
        }

        /* 语录内容 */
        .quote-content {
            padding: 10px 0;           /* 上下内边距 */
        }

        /* 语录文字 */
        .quote-content p {
            margin: 0 0 10px 0;        /* 底部间距 */
            font-style: italic;        /* 斜体 */
            color: #334155;            /* 深色文字 */
            font-size: 0.95rem;        /* 字体大小 */
            line-height: 1.6;          /* 行高 */
        }

        /* 语录作者 */
        .quote-author {
            font-size: 0.8rem !important;        /* 字体大小（强制覆盖） */
            color: var(--text-gray) !important;   /* 灰色文字（强制覆盖） */
            font-style: normal !important;       /* 正常字体（强制覆盖） */
            margin-bottom: 0 !important;         /* 无底部间距（强制覆盖） */
        }

        /* ========== 访客统计样式 ========== */
        /* 访客统计卡片 */
        .visitors-card {
            text-align: center;         /* 文字居中 */
        }

        /* 访客统计内容 */
        .visitors-content {
            display: flex;             /* flex布局 */
            justify-content: center;   /* 水平居中 */
            gap: 30px;                /* 间距 */
        }

        /* 单个访客项 */
        .visitor-item {
            display: flex;             /* flex布局 */
            align-items: center;       /* 垂直居中 */
            gap: 10px;                /* 间距 */
        }

        /* 访客图标 */
        .visitor-item i {
            font-size: 1.5rem;         /* 图标大小 */
            background: var(--grad-primary);   /* 主题渐变背景 */
            -webkit-background-clip: text;    /* 背景裁剪为文字形状 */
            -webkit-text-fill-color: transparent;  /* 文字填充透明 */
            background-clip: text;             /* 背景裁剪兼容 */
        }

        /* 访客数字 */
        .visitor-number {
            font-size: 1.3rem;         /* 字体大小 */
            font-weight: 700;          /* 字重 */
            color: #1e293b;            /* 深色文字 */
        }

        /* 访客标签 */
        .visitor-label {
            font-size: 0.8rem;         /* 字体大小 */
            color: var(--text-gray);   /* 灰色文字 */
        }

        /* ========== 管理员按钮样式 ========== */
        /* 管理员按钮 */
        .btn-admin {
            background: var(--grad-primary);   /* 主题渐变背景 */
            color: #1e293b;                    /* 深色文字 */
            padding: 10px 22px;                /* 内边距 */
            border-radius: 25px;               /* 圆角 */
            text-decoration: none;              /* 无下划线 */
            font-weight: 600;                  /* 字重 */
            font-size: 0.9rem;                /* 字体大小 */
            transition: all 0.3s ease;         /* 过渡动画 */
            box-shadow: 0 4px 15px rgba(0,0,0,0.15);  /* 阴影 */
            border: 1px solid rgba(0,0,0,0.05); /* 边框 */
        }
        
        /* 管理员按钮悬停效果 */
        .btn-admin:hover {
            box-shadow: 0 6px 25px rgba(0,0,0,0.2);  /* 加深阴影 */
            transform: translateY(-3px);              /* 向上移动3px */
        }

        /* ========== 移动端菜单样式 ========== */
        /* 菜单切换按钮 */
        .menu-toggle {
            display: none;             /* 默认隐藏（桌面端） */
            background: none;         /* 无背景 */
            border: none;             /* 无边框 */
            font-size: 1.5rem;        /* 图标大小 */
            color: #1e293b;           /* 深色文字 */
            cursor: pointer;          /* 鼠标手型 */
            padding: 8px 12px;       /* 内边距 */
            border-radius: 8px;       /* 圆角 */
            transition: background 0.3s ease;  /* 背景过渡 */
        }

        /* 菜单切换按钮悬停效果 */
        .menu-toggle:hover {
            background: rgba(255,255,255,0.5);  /* 白色透明背景 */
        }

        /* 移动端侧边栏遮罩 */
        .mobile-sidebar-overlay {
            display: none;            /* 默认隐藏（桌面端） */
            position: fixed;          /* 固定定位 */
            top: 0;                   /* 从顶部开始 */
            left: 0;                  /* 从左侧开始 */
            right: 0;                 /* 到右侧结束 */
            bottom: 0;                /* 到底部结束 */
            background: rgba(0,0,0,0.5);  /* 半透明黑色背景 */
            z-index: 900;             /* 层级 */
            opacity: 0;               /* 初始透明 */
            pointer-events: none;     /* 初始无点击事件 */
            transition: opacity 0.3s ease;  /* 透明度过渡 */
        }

        /* 移动端侧边栏遮罩激活状态 */
        .mobile-sidebar-overlay.active {
            display: block;           /* 激活时显示（关键修复：覆盖display:none） */
            opacity: 1;               /* 完全不透明 */
            pointer-events: auto;     /* 启用点击事件 */
        }

        /* 移动端侧边栏 */
        .mobile-sidebar {
            display: none;            /* 默认隐藏（桌面端） */
            position: fixed;          /* 固定定位 */
            top: 0;                   /* 从顶部开始 */
            left: -300px;             /* 初始在左侧外 */
            width: 300px;             /* 宽度 */
            height: 100vh;            /* 高度占满视口 */
            background: white;        /* 白色背景 */
            z-index: 1000;            /* 最高层级 */
            transition: left 0.3s ease;  /* 位置过渡 */
            overflow-y: auto;         /* 垂直滚动 */
            box-shadow: 4px 0 30px rgba(0,0,0,0.1);  /* 阴影 */
        }

        /* 移动端侧边栏激活状态 */
        .mobile-sidebar.active {
            display: flex;            /* 激活时显示（关键修复：覆盖display:none） */
            flex-direction: column;   /* 垂直排列内部元素 */
            left: 0;                  /* 移入屏幕 */
        }

        /* 移动端侧边栏头部 */
        .mobile-sidebar-header {
            display: flex;             /* flex布局 */
            align-items: center;       /* 垂直居中 */
            gap: 15px;                /* 间距 */
            padding: 30px 20px;       /* 内边距 */
            border-bottom: 1px solid var(--border-light);  /* 底部边框 */
        }

        /* 移动端小头像 */
        .profile-avatar-sm {
            width: 60px;               /* 宽度 */
            height: 60px;              /* 高度 */
            border-radius: 50%;        /* 圆形 */
            background: var(--grad-primary);  /* 主题渐变背景 */
            display: flex;             /* flex布局 */
            align-items: center;       /* 垂直居中 */
            justify-content: center;   /* 水平居中 */
            font-size: 1.5rem;         /* 图标大小 */
            color: white;              /* 白色 */
            overflow: hidden;          /* 隐藏溢出 */
        }
        
        /* 移动端小头像图片 */
        .profile-avatar-sm img {
            width: 100%;               /* 宽度100% */
            height: 100%;              /* 高度100% */
            object-fit: cover;         /* 裁剪填充 */
        }

        /* 移动端资料信息 */
        .profile-info-sm {
            flex: 1;                   /* 占剩余空间 */
        }

        /* 移动端资料名称 */
        .profile-name-sm {
            font-size: 1.1rem;         /* 字体大小 */
            font-weight: 700;          /* 字重 */
            color: #1e293b;            /* 深色文字 */
        }

        /* 移动端资料描述 */
        .profile-desc-sm {
            font-size: 0.85rem;        /* 字体大小 */
            color: var(--text-gray);   /* 灰色文字 */
            margin-top: 4px;           /* 顶部间距 */
        }

        /* 移动端资料统计 */
        .profile-stats-sm {
            display: flex;             /* flex布局 */
            justify-content: center;   /* 水平居中 */
            gap: 40px;                /* 间距 */
            padding: 20px;            /* 内边距 */
            border-bottom: 1px solid var(--border-light);  /* 底部边框 */
        }

        /* 移动端统计项 */
        .stat-item-sm {
            text-align: center;         /* 文字居中 */
        }

        /* 移动端统计数字 */
        .stat-number-sm {
            font-size: 1.4rem;         /* 字体大小 */
            font-weight: 700;          /* 字重 */
            background: var(--grad-primary);   /* 主题渐变背景 */
            -webkit-background-clip: text;    /* 背景裁剪为文字形状 */
            -webkit-text-fill-color: transparent;  /* 文字填充透明 */
            background-clip: text;             /* 背景裁剪兼容 */
        }

        /* 移动端统计标签 */
        .stat-label-sm {
            font-size: 0.75rem;        /* 字体大小 */
            color: var(--text-gray);   /* 灰色文字 */
            margin-top: 2px;           /* 顶部间距 */
        }

        /* 移动端导航 */
        .mobile-nav {
            padding: 10px 0;           /* 上下内边距 */
        }

        /* 移动端导航项 */
        .mobile-nav-item {
            display: flex;             /* flex布局 */
            align-items: center;       /* 垂直居中 */
            gap: 15px;                /* 间距 */
            padding: 14px 20px;       /* 内边距 */
            color: #475569;           /* 灰色文字 */
            text-decoration: none;      /* 无下划线 */
            transition: all 0.3s ease;  /* 过渡动画 */
            font-size: 0.95rem;        /* 字体大小 */
            font-weight: 500;          /* 字重 */
        }

        /* 移动端导航项悬停效果 */
        .mobile-nav-item:hover {
            background: var(--grad-primary);  /* 主题渐变背景 */
            color: #1e293b;            /* 深色文字 */
        }

        /* 移动端导航项激活状态 */
        .mobile-nav-item.active {
            background: var(--grad-primary);  /* 主题渐变背景 */
            color: #1e293b;            /* 深色文字 */
            border-left: 3px solid var(--color-primary);  /* 左侧主题色边框 */
        }

        /* 移动端导航图标 */
        .mobile-nav-item i {
            width: 20px;               /* 固定宽度 */
            font-size: 1rem;           /* 图标大小 */
        }

        /* ========== 分页样式 ========== */
        /* 分页容器 */
        .pagination {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
            margin: 30px 0;
            justify-content: center;
            padding: 20px 30px;
            background: linear-gradient(135deg, #fff 0%, rgba(var(--color-primary-rgb), 0.04) 100%);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(var(--color-primary-rgb), 0.08);
            border: 1px solid rgba(var(--color-primary-rgb), 0.1);
        }
        /* 分页按钮通用样式 */
        .pagination button {
            min-width: 40px;
            height: 40px;
            padding: 0 12px;
            border: none;
            background: linear-gradient(145deg, #ffffff, #f8f8f8);
            border-radius: 10px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            color: #666;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        }
        .pagination button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(var(--color-primary-rgb), 0.2);
            color: var(--color-primary);
            font-weight: 600;
        }
        /* 当前激活页 */
        .pagination button.active {
            background: var(--grad-primary);
            color: #1e293b;
            font-weight: 700;
            box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.4);
            transform: scale(1.08);
        }
        .pagination button.active:hover {
            transform: scale(1.08);
        }
        /* 禁用状态 */
        .pagination button:disabled {
            cursor: not-allowed;
            opacity: 0.4;
            transform: none;
            box-shadow: none;
        }
        /* 省略号 */
        .pagination .ellipsis {
            padding: 0 8px;
            color: #bbb;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 2px;
        }

        /* ========== 页脚样式 ========== */
        .footer {
            margin-top: 40px;
            padding: 50px 0 70px;
            text-align: center;
            background: rgba(255,255,255,0.25);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            position: relative;
            border-top: 1px solid rgba(255,255,255,0.5);
            box-shadow: 0 -10px 40px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        .footer .container {
            position: relative;
            z-index: 1;
        }
        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--grad-primary);
            opacity: 0.6;
        }
        .footer::after {
            content: '';
            position: absolute;
            bottom: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.15) 0%, transparent 60%);
            pointer-events: none;
        }
        .footer .container {
            position: relative;
            z-index: 1;
        }
        .footer p {
            color: rgba(0,0,0,0.55);
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }
        .footer-brand {
            font-size: 1.3rem;
            font-weight: 700;
            background: var(--grad-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 8px;
            display: inline-block;
        }
        .footer-slogan {
            font-size: 0.8rem;
            color: rgba(0,0,0,0.4);
            margin-bottom: 20px;
            font-style: italic;
        }
        /* 页脚认证图标 */
        .footer-certs {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin: 15px 0;
        }
        .footer-cert {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 18px;
            border-radius: 25px;
            background: rgba(255,255,255,0.7);
            border: 1px solid rgba(0,0,0,0.06);
            color: #334155;
            font-size: 0.8rem;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .footer-cert:hover {
            background: var(--grad-primary);
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            border-color: transparent;
        }
        .footer-cert i { font-size: 0.9rem; }
        /* 页脚隐私链接 */
        .footer-links {
            margin: 18px 0;
            display: flex;
            justify-content: center;
            gap: 18px;
            flex-wrap: wrap;
            align-items: center;
        }
        .footer-links a {
            color: rgba(0,0,0,0.55);
            text-decoration: none;
            font-size: 0.85rem;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 8px;
            border-radius: 8px;
        }
        .footer-links a:hover {
            color: var(--color-primary);
            background: rgba(255,255,255,0.5);
            transform: translateY(-1px);
        }
        .footer-links .sep {
            color: rgba(0,0,0,0.15);
            font-size: 0.7rem;
        }
        .footer-divider {
            width: 60px;
            height: 2px;
            background: var(--grad-primary);
            border-radius: 2px;
            margin: 15px auto;
            opacity: 0.4;
        }
        .footer-bottom {
            margin-top: 15px;
            padding-top: 18px;
            border-top: 1px solid rgba(0,0,0,0.06);
            text-align: center;
        }
        /* 版权信息 */
        .footer-copyright {
            font-size: 1.05rem;
            font-weight: 500;
            margin: 0 0 14px;
            color: rgba(0,0,0,0.6);
        }
        /* 备案信息（ICP + 公安）居中胶囊徽章 */
        .footer-beian {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
        }
        .footer-beian a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.86rem;
            font-weight: 500;
            line-height: 1;
            color: rgba(0,0,0,0.58);
            text-decoration: none;
            background: rgba(255,255,255,0.65);
            border: 1px solid rgba(0,0,0,0.07);
            padding: 8px 16px;
            border-radius: 999px;
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            box-shadow: 0 2px 10px rgba(0,0,0,0.04);
            transition: all 0.3s ease;
        }
        .footer-beian a img {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }
        .footer-beian a:hover {
            color: var(--color-primary);
            border-color: var(--color-primary);
            background: #fff;
            box-shadow: 0 6px 18px rgba(59,130,246,0.18);
            transform: translateY(-2px);
        }
        .footer-beian .beian-sep {
            color: rgba(0,0,0,0.2);
            font-size: 0.8rem;
        }
        @media (max-width: 480px) {
            .footer-beian { gap: 8px; }
            .footer-beian a {
                padding: 8px 16px;
                font-size: 0.82rem;
            }
            .footer-beian .beian-sep { display: none; }
        }

        /* 宠物特效 */
        .pets-container {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 5px;
            pointer-events: none;
            padding-bottom: 10px;
        }
        .pet {
            font-size: 1.5rem;
            display: inline-block;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            transform-origin: bottom center;
        }
        .pet:nth-child(1) { animation-delay: 0s; }
        .pet:nth-child(2) { animation-delay: 0.15s; }
        .pet:nth-child(3) { animation-delay: 0.3s; }
        .pet:nth-child(4) { animation-delay: 0.45s; }
        .pet:nth-child(5) { animation-delay: 0.6s; }
        .pet:nth-child(6) { animation-delay: 0.75s; }
        .pet:nth-child(7) { animation-delay: 0.9s; }
        .pet-bounce { animation-name: petBounce; }
        .pet-wiggle { animation-name: petWiggle; }
        .pet-float { animation-name: petFloat; }
        .pet-rainbow { animation-name: petRainbow; }
        @keyframes petBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-12px); }
        }
        @keyframes petWiggle {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-10deg); }
            75% { transform: rotate(10deg); }
        }
        @keyframes petFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            33% { transform: translateY(-8px) rotate(3deg); }
            66% { transform: translateY(-4px) rotate(-2deg); }
        }
        @keyframes petRainbow {
            0%, 100% { transform: translateY(0) scale(1); filter: hue-rotate(0deg); }
            50% { transform: translateY(-10px) scale(1.1); filter: hue-rotate(180deg); }
        }
        
        /* ========== 音乐播放器 ========== */
        .music-player-fab {
            position: fixed;
            bottom: 25px;
            left: 25px;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6);
            background-size: 200% 200%;
            animation: mpAurora 4s ease infinite;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 9999;
            box-shadow: 0 8px 30px rgba(6,182,212,0.4), 0 0 40px rgba(59,130,246,0.2);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            color: white;
            border: 2px solid rgba(255,255,255,0.3);
            font-size: 1.3rem;
        }
        .music-player-fab:hover {
            transform: scale(1.12) rotate(8deg);
            box-shadow: 0 12px 40px rgba(6,182,212,0.5), 0 0 60px rgba(139,92,246,0.3);
        }
        /* SSL认证图标 - 页脚右下角定位 */
        .myssl-badge {
            position: absolute;
            bottom: 10px;
            right: 15px;
            width: 80px;
            height: auto;
            line-height: 0;
            z-index: 2;
        }
        .myssl-badge img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.12);
            transition: all 0.3s ease;
        }
        .myssl-badge:hover img {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(0,0,0,0.2);
        }
        @media (max-width: 500px) {
            .myssl-badge { width: 64px; bottom: 5px; right: 8px; }
        }
        .music-player-fab.playing {
            animation: mpAurora 4s ease infinite, mpGlowPulse 2s ease-in-out infinite;
        }
        @keyframes mpAurora {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }
        @keyframes mpGlowPulse {
            0%, 100% { box-shadow: 0 8px 30px rgba(6,182,212,0.4), 0 0 40px rgba(59,130,246,0.2); }
            50% { box-shadow: 0 8px 40px rgba(6,182,212,0.6), 0 0 70px rgba(139,92,246,0.4); }
        }
        @keyframes mpSpin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .music-player-panel {
            position: fixed;
            bottom: 95px;
            left: 25px;
            width: 320px;
            background: rgba(255,255,255,0.75);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
            border-radius: 24px;
            box-shadow: 0 25px 70px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.6) inset;
            z-index: 9998;
            overflow: hidden;
            transform: translateY(20px) scale(0.96);
            opacity: 0;
            pointer-events: none;
            transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid rgba(255,255,255,0.6);
        }
        .music-player-panel.active {
            transform: translateY(0) scale(1);
            opacity: 1;
            pointer-events: auto;
        }
        .mp-header {
            background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
            background-size: 200% 200%;
            animation: mpAurora 6s ease infinite;
            padding: 22px 20px;
            color: white;
            display: flex;
            align-items: center;
            gap: 14px;
            position: relative;
            overflow: hidden;
        }
        .mp-header::after {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 120px;
            height: 120px;
            background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
        }
        .mp-cover {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(255,255,255,0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            flex-shrink: 0;
            animation: mpSpin 10s linear infinite;
            animation-play-state: paused;
            position: relative;
            box-shadow: 0 0 0 3px rgba(255,255,255,0.4), 0 0 25px rgba(0,0,0,0.2);
        }
        .mp-cover::before {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 65%);
            pointer-events: none;
        }
        .mp-cover.playing { animation-play-state: running; }
        .mp-info { flex: 1; min-width: 0; z-index: 1; }
        .mp-title { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,0.15); }
        .mp-artist { font-size: 0.8rem; opacity: 0.9; margin-top: 3px; }
        .mp-close {
            background: rgba(255,255,255,0.2);
            border: none; color: white;
            cursor: pointer; padding: 6px; font-size: 1rem;
            opacity: 0.9; transition: all 0.3s;
            border-radius: 50%;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            z-index: 1;
        }
        .mp-close:hover { opacity: 1; background: rgba(255,255,255,0.35); transform: rotate(90deg); }
        .mp-body { padding: 0 20px 18px; }
        .mp-progress {
            display: flex; align-items: center; gap: 10px;
            margin: 18px 0 12px;
        }
        .mp-time { font-size: 0.72rem; color: #64748b; min-width: 36px; font-variant-numeric: tabular-nums; }
        .mp-bar {
            flex: 1; height: 6px;
            background: rgba(0,0,0,0.08);
            border-radius: 6px;
            overflow: visible;
            cursor: pointer;
            position: relative;
            transition: height 0.2s;
        }
        .mp-bar:hover { height: 8px; }
        .mp-bar-fill {
            height: 100%;
            background: linear-gradient(90deg, #06b6d4, #3b82f6, #8b5cf6);
            border-radius: 6px;
            width: 0%;
            transition: width 0.1s linear;
            position: relative;
            box-shadow: 0 0 8px rgba(59,130,246,0.3);
        }
        .mp-bar-handle {
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%) scale(0);
            width: 14px;
            height: 14px;
            background: white;
            border: 3px solid #3b82f6;
            border-radius: 50%;
            cursor: grab;
            box-shadow: 0 2px 10px rgba(59,130,246,0.4);
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .mp-bar:hover .mp-bar-handle,
        .mp-bar.dragging .mp-bar-handle {
            transform: translateY(-50%) scale(1);
        }
        .mp-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 18px;
            margin: 8px 0 16px;
        }
        .mp-btn {
            background: rgba(0,0,0,0.04);
            border: none;
            cursor: pointer; font-size: 1.1rem;
            color: #475569; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            padding: 10px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            width: 40px; height: 40px;
        }
        .mp-btn:hover { color: #3b82f6; transform: scale(1.12); background: rgba(59,130,246,0.1); }
        .mp-btn:active { transform: scale(0.95); }
        .mp-btn.play-btn {
            width: 54px; height: 54px;
            background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6);
            background-size: 200% 200%;
            animation: mpAurora 4s ease infinite;
            color: white;
            font-size: 1.3rem;
            box-shadow: 0 6px 20px rgba(59,130,246,0.4), 0 0 30px rgba(139,92,246,0.2);
            border: 2px solid rgba(255,255,255,0.3);
        }
        .mp-btn.play-btn:hover { transform: scale(1.08); box-shadow: 0 8px 30px rgba(59,130,246,0.5), 0 0 40px rgba(139,92,246,0.3); }
        .mp-btn.play-btn:active { transform: scale(0.96); }
        .mp-volume {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 4px 0 2px;
        }
        .mp-volume-btn {
            background: none; border: none;
            cursor: pointer; color: #64748b;
            font-size: 0.95rem; padding: 4px;
            transition: color 0.3s;
        }
        .mp-volume-btn:hover { color: #3b82f6; }
        .mp-volume-slider {
            -webkit-appearance: none; appearance: none;
            width: 70px; height: 4px;
            background: rgba(0,0,0,0.08);
            border-radius: 4px; outline: none;
            cursor: pointer;
            overflow: hidden;
        }
        .mp-volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 12px; height: 12px;
            background: #3b82f6;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 0 8px rgba(59,130,246,0.4);
        }
        .mp-volume-slider::-moz-range-thumb {
            width: 12px; height: 12px;
            background: #3b82f6;
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }
        .mp-eq {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 3px;
            height: 20px;
            margin: 4px 0;
        }
        .mp-eq span {
            display: block;
            width: 3px;
            background: linear-gradient(to top, #06b6d4, #3b82f6, #8b5cf6);
            border-radius: 2px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .mp-eq.active span {
            animation: mpEq 0.8s ease-in-out infinite;
            opacity: 1;
        }
        .mp-eq span:nth-child(1) { animation-delay: 0s; }
        .mp-eq span:nth-child(2) { animation-delay: 0.15s; }
        .mp-eq span:nth-child(3) { animation-delay: 0.3s; }
        .mp-eq span:nth-child(4) { animation-delay: 0.45s; }
        .mp-eq span:nth-child(5) { animation-delay: 0.2s; }
        @keyframes mpEq {
            0%, 100% { height: 3px; }
            50% { height: 18px; }
        }
        .mp-playlist {
            max-height: 150px;
            overflow-y: auto;
            border-top: 1px solid rgba(0,0,0,0.06);
            padding-top: 8px;
            margin-top: 8px;
        }
        .mp-playlist::-webkit-scrollbar { width: 4px; }
        .mp-playlist::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.25); border-radius: 2px; }
        .mp-playlist::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.4); }
        .mp-playlist-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
            font-size: 0.85rem;
            color: #334155;
            position: relative;
            overflow: hidden;
        }
        .mp-playlist-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 0;
            background: linear-gradient(180deg, #06b6d4, #3b82f6, #8b5cf6);
            border-radius: 0 3px 3px 0;
            transition: height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .mp-playlist-item:hover {
            background: rgba(59,130,246,0.06);
            transform: translateX(4px);
        }
        .mp-playlist-item:hover::before { height: 60%; }
        .mp-playlist-item.active {
            background: linear-gradient(90deg, rgba(59,130,246,0.12), rgba(139,92,246,0.06));
            color: #3b82f6;
            font-weight: 600;
        }
        .mp-playlist-item.active::before { height: 70%; }
        .mp-playlist-item .idx {
            width: 26px; height: 26px;
            border-radius: 8px;
            background: rgba(0,0,0,0.05);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.72rem; flex-shrink: 0;
            transition: all 0.3s;
        }
        .mp-playlist-item.active .idx {
            background: linear-gradient(135deg, #06b6d4, #3b82f6);
            color: white;
            box-shadow: 0 3px 10px rgba(59,130,246,0.3);
        }
        .mp-playlist-item.playing .idx i {
            animation: mpIconPulse 1s ease-in-out infinite;
            display: inline-block;
        }
        @keyframes mpIconPulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2); opacity: 0.7; }
        }
        .mp-playlist-item .name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mp-empty { text-align: center; color: #94a3b8; padding: 20px 15px; font-size: 0.85rem; }
        
        @media (max-width: 500px) {
            .music-player-panel { width: calc(100vw - 50px); left: 15px; bottom: 95px; }
            .music-player-fab { left: 15px; bottom: 15px; width: 52px; height: 52px; }
            .mp-volume-slider { width: 50px; }
        }

        /* 无文章提示 */
        .no-articles {
            grid-column: 1 / -1;       /* 占满所有列 */
            text-align: center;        /* 文字居中 */
            padding: 100px 0;         /* 上下内边距 */
        }
        
        /* 无文章图标 */
        .no-articles i {
            font-size: 5rem;           /* 图标大小 */
            background: var(--grad-primary);   /* 主题渐变背景 */
            -webkit-background-clip: text;    /* 背景裁剪为文字形状 */
            -webkit-text-fill-color: transparent;  /* 文字填充透明 */
            background-clip: text;             /* 背景裁剪兼容 */
            margin-bottom: 25px;       /* 底部间距 */
        }
        
        /* 无文章提示文字 */
        .no-articles p {
            color: var(--text-gray);   /* 灰色文字 */
            font-size: 1.1rem;         /* 字体大小 */
        }

        /* ========== 首页商品展示区样式 ========== */
        .homepage-products {
            background: var(--grad-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-light);
            padding: 24px;
            margin-top: 20px;
            box-shadow: var(--shadow-card);
        }

        .homepage-products-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .homepage-products-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .homepage-products-title i {
            color: var(--color-primary);
        }

        .homepage-products-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }

        .homepage-product-card {
            background: var(--bg-card);
            border-radius: var(--radius-md);
            border: 1px solid var(--border-light);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .homepage-product-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        .homepage-product-image {
            width: 100%;
            height: 160px;
            object-fit: cover;
            background: var(--bg-secondary);
        }

        .homepage-product-info {
            padding: 14px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .homepage-product-name {
            font-size: 0.95rem;
            font-weight: 500;
            color: var(--text-primary);
            margin-bottom: 8px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            min-height: 44px;
        }

        .homepage-product-price-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: auto;
        }

        .homepage-product-price {
            font-size: 1.1rem;
            font-weight: 700;
            color: #e74c3c;
        }

        .homepage-product-price::before {
            content: '¥';
            font-size: 0.8rem;
        }

        .homepage-product-btn {
            background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
            color: white;
            border: none;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            transition: opacity 0.3s ease;
        }

        .homepage-product-btn:hover {
            opacity: 0.9;
        }

        /* ========== 首页广告位样式 ========== */
        .homepage-banners {
            margin-top: 20px;
        }

        .homepage-banner {
            background: var(--grad-card);
            border-radius: var(--radius-lg);
            border: 1px solid var(--border-light);
            overflow: hidden;
            margin-bottom: 16px;
            display: flex;
            align-items: stretch;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-decoration: none;
            color: inherit;
            display: flex;
        }

        .homepage-banner:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

        .homepage-banner-image {
            width: 200px;
            height: 120px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .homepage-banner-content {
            flex: 1;
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .homepage-banner-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .homepage-banner-desc {
            font-size: 0.9rem;
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .homepage-banner-badge {
            display: inline-block;
            background: linear-gradient(135deg, #ff6b6b, #ee5a52);
            color: white;
            font-size: 0.7rem;
            padding: 3px 8px;
            border-radius: 10px;
            margin-bottom: 10px;
            width: fit-content;
        }

        /* ========== 响应式媒体查询 ========== */
        /* 大屏幕响应式（最大宽度1200px） */
        @media (max-width: 1200px) {
            /* 主内容区域改为单列布局 */
            .main-content {
                grid-template-columns: 1fr;
            }
            /* 侧边栏移到下方 */
            .sidebar {
                order: 2;
            }
            /* 热门文章网格改为2列 */
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                padding: 16px;
                background: var(--grad-card);
                border-radius: var(--radius-lg);
                border: 1px solid var(--border-light);
                box-shadow: var(--shadow-card);
            }
            /* 侧边推荐卡片调整内边距 */
            .side-cards {
                padding: 16px;
                background: var(--grad-card);
                border-radius: var(--radius-lg);
                border: 1px solid var(--border-light);
                box-shadow: var(--shadow-card);
            }
            /* 商品展示区改为2列 */
            .homepage-products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* 中等屏幕响应式（最大宽度768px） */
        @media (max-width: 768px) {
            /* 恢复手机端原有间距 */
            .main-content {
                padding: 30px 0;
            }
            /* 文章列表头部改为垂直排列 */
            .article-list-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            /* 排序标签缩小 */
            .sort-tab {
                padding: 4px 10px;
                font-size: 0.75rem;
                color: #334155;
            }
            /* 公告弹窗调整 */
            .announcement-modal {
                margin: 15px;
                padding: 30px 25px;
                max-width: 100%;
            }
            /* 公告图标缩小 */
            .announcement-icon {
                width: 65px;
                height: 65px;
                font-size: 28px;
                margin-bottom: 20px;
            }
            /* 公告标题缩小 */
            .announcement-title {
                font-size: 1.3rem;
            }
            /* 公告内容缩小 */
            .announcement-content {
                font-size: 0.9rem;
            }
            /* 公告按钮调整 */
            .announcement-btn {
                padding: 12px 30px;
                font-size: 0.95rem;
            }

            /* 显示菜单切换按钮 */
            .menu-toggle {
                display: block;
            }
            /* 顶部行改为垂直排列 */
            .top-row {
                flex-direction: column;
                gap: 12px;
            }
            /* ========== 轮播图：手机端=在当前基础上放大一倍（142px→284px） ========== */
            .carousel-container {
                flex: none !important;
                height: 284px !important;            /* 142px × 2 */
                min-height: 284px !important;
                width: calc(100% - 32px) !important;
                margin: 0 auto !important;
                border-radius: 46px !important;      /* 23px × 2 */
                box-shadow: 0 16px 56px rgba(6, 182, 212, 0.18) !important;
                border: 2px solid rgba(255,255,255,0.6) !important;
                overflow: hidden !important;
            }
            /* 遮罩层：228px，顶部露出56px（56/284≈19.7%≈20%） */
            .carousel-container .featured-overlay {
                position: absolute !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                height: 228px !important;            /* 114px × 2 */
                background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%) !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: flex-end !important;
                padding: 24px 32px !important;       /* 12 16 × 2 */
            }
            .carousel-container .featured-title {
                font-size: 1.1rem !important;        /* 0.8rem放大约37.5% */
                line-height: 1.25 !important;
                margin-bottom: 7px !important;
                display: block !important;
                overflow: visible !important;
                -webkit-line-clamp: 2 !important;
                -webkit-box-orient: vertical;
            }
            .carousel-container .featured-category {
                font-size: 0.72rem !important;       /* 0.52rem放大约38% */
                padding: 4px 14px !important;
                margin-bottom: 7px !important;
                border-radius: 21px !important;
                align-self: flex-start !important;
                line-height: 1.3 !important;
            }
            .carousel-container .featured-meta {
                font-size: 0.72rem !important;       /* 0.52rem放大约38% */
                gap: 12px !important;
                flex-wrap: wrap !important;
                opacity: 1 !important;
            }
            .carousel-container .carousel-prev,
            .carousel-container .carousel-next {
                width: 34px !important;              /* 25px放大约36% */
                height: 34px !important;
                font-size: 0.95rem !important;       /* 0.7rem放大约36% */
            }
            .carousel-container .carousel-prev { left: 16px !important; }  /* 8px × 2 */
            .carousel-container .carousel-next { right: 16px !important; } /* 8px × 2 */
            .carousel-container .carousel-indicators {
                bottom: 36px !important;             /* 18px × 2 */
                gap: 20px !important;                /* 10px × 2 */
            }
            .carousel-container .indicator {
                width: 24px !important;              /* 12px × 2 */
                height: 24px !important;
            }
            .carousel-container .indicator.active {
                width: 60px !important;              /* 30px × 2 */
                border-radius: 12px !important;      /* 6px × 2 */
            }
            /* 侧边推荐卡片改为网格布局 */
            .side-cards {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                padding: 12px;
            }
            /* 侧边卡片去除底部间距 */
            .side-card {
                margin-bottom: 0;
            }
            /* 热门文章网格调整 */
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
                padding: 12px;
            }
            /* 商品展示区改为2列 */
            .homepage-products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            /* 商品展示区内边距调整 */
            .homepage-products {
                padding: 16px;
            }
            /* 广告位改为垂直布局 */
            .homepage-banner {
                flex-direction: column;
            }
            .homepage-banner-image {
                width: 100%;
                height: 150px;
            }
            /* 搜索框调整 */
            .search-box input {
                width: 180px;
                padding: 8px 32px 8px 15px;
                font-size: 0.8rem;
            }
            /* 头部容器调整 */
            .header-container {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                position: relative;
            }
            /* 菜单切换按钮调整 */
            .menu-toggle {
                position: relative;
                z-index: 9999;
                flex-shrink: 0;
                width: 48px;
                height: 48px;
                padding: 10px;
            }
            /* 导航链接区域调整 */
            .nav-links {
                flex: 1;
                justify-content: center;
                position: relative;
                pointer-events: none;
            }
            /* 隐藏导航链接 */
            .nav-links .nav-link {
                display: none;
            }
            /* 隐藏分类选择 */
            .nav-links .category-select {
                display: none;
            }
            /* 博客标题缩小 */
            .nav-links .blog-title {
                font-size: 1.2rem;
            }
            /* 隐藏管理员按钮 */
            .nav-links .btn-admin {
                display: none;
            }
            /* 文章项改为垂直排列 */
            .article-item {
                flex-direction: column;
            }
            /* 文章项封面调整 */
            .article-item-cover {
                width: 100%;
                height: 150px;
            }
            /* 显示移动端侧边栏遮罩 */
            .mobile-sidebar-overlay {
                display: block;
            }
            /* 显示移动端侧边栏 */
            .mobile-sidebar {
                display: flex;
                flex-direction: column;
            }
        }
        
        /* 小屏幕响应式（最大宽度576px） */
        @media (max-width: 576px) {
            /* 热门文章网格保持2列 */
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            /* ========== 轮播图：小屏=在当前基础上放大一倍（126px→252px） ========== */
            .carousel-container {
                flex: none !important;
                height: 252px !important;             /* 126px × 2 */
                min-height: 252px !important;
                width: calc(100% - 24px) !important;
                margin: 0 auto !important;
                border-radius: 40px !important;       /* 20px × 2 */
                box-shadow: 0 14px 48px rgba(6, 182, 212, 0.18) !important;
                border: 2px solid rgba(255,255,255,0.6) !important;
                overflow: hidden !important;
            }
            /* 遮罩层：202px，顶部露50px（50/252≈19.8%≈20%） */
            .carousel-container .featured-overlay {
                position: absolute !important;
                bottom: 0 !important;
                left: 0 !important;
                right: 0 !important;
                height: 202px !important;             /* 101px × 2 */
                background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, transparent 100%) !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: flex-end !important;
                padding: 20px 28px !important;        /* 10 14 × 2 */
            }
            .carousel-container .featured-title {
                font-size: 1.05rem !important;        /* 0.75rem放大约40% */
                line-height: 1.25 !important;
                margin-bottom: 6px !important;
                display: block !important;
                overflow: visible !important;
                -webkit-line-clamp: 2 !important;
                -webkit-box-orient: vertical;
            }
            .carousel-container .featured-category {
                font-size: 0.7rem !important;         /* 0.5rem放大40% */
                padding: 3px 12px !important;
                margin-bottom: 6px !important;
                border-radius: 18px !important;
                line-height: 1.3 !important;
                align-self: flex-start !important;
            }
            .carousel-container .featured-meta {
                display: flex !important;
                font-size: 0.7rem !important;         /* 0.5rem放大40% */
                gap: 11px !important;
                flex-wrap: wrap !important;
            }
            .carousel-container .carousel-prev,
            .carousel-container .carousel-next {
                width: 30px !important;               /* 22px放大约36% */
                height: 30px !important;
                font-size: 0.87rem !important;        /* 0.63rem放大约38% */
                background: rgba(0, 0, 0, 0.45) !important;
            }
            .carousel-container .carousel-prev { left: 12px !important; }  /* 6px × 2 */
            .carousel-container .carousel-next { right: 12px !important; } /* 6px × 2 */
            .carousel-container .carousel-indicators {
                bottom: 32px !important;              /* 16px × 2 */
                gap: 18px !important;                 /* 9px × 2 */
            }
            .carousel-container .indicator {
                width: 24px !important;               /* 12px × 2 */
                height: 24px !important;
            }
            .carousel-container .indicator.active {
                width: 56px !important;               /* 28px × 2 */
                border-radius: 12px !important;       /* 6px × 2 */
            }
        }