/* 核心布局样式 */
body { background-color: #f5f5f5; margin: 0; padding: 0; font-family: "Microsoft YaHei", sans-serif; }
.g-container { width: 1200px; margin: 20px auto; display: flex; justify-content: space-between; align-items: flex-start; }

/* 左侧列表区 */
.main-left { width: 860px; background: #fff; padding: 20px; box-sizing: border-box; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.column-title { font-size: 18px; font-weight: bold; padding-bottom: 10px; border-bottom: 2px solid #eee; margin-bottom: 10px; position: relative; }
.column-title::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 80px; height: 2px; background: #28b87c; }

.article-item { display: flex; padding: 25px 0; border-bottom: 1px solid #f2f2f2; }
.article-item:last-child { border-bottom: none; }

/* 解决图片过大的核心代码 */
.article-img { width: 220px; height: 135px; flex-shrink: 0; margin-right: 20px; overflow: hidden; border-radius: 4px; }
.article-img img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.article-item:hover .article-img img { transform: scale(1.05); }

.article-info { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.article-info h3 { margin: 0 0 10px 0; font-size: 18px; line-height: 1.4; }
.article-info h3 a { color: #333; text-decoration: none; }
.article-info h3 a:hover { color: #28b87c; }
.article-info p { font-size: 14px; color: #777; line-height: 1.6; margin-bottom: 15px; height: 44px; overflow: hidden; }

.article-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #999; }
.meta-tag { color: #28b87c; background: #eaf8f2; padding: 2px 8px; border-radius: 2px; margin-right: 10px; }

/* 右侧侧边栏 */
.sidebar-right { width: 320px; }
.side-box { background: #fff; padding: 20px; margin-bottom: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.side-title { font-size: 16px; font-weight: bold; border-left: 4px solid #28b87c; padding-left: 10px; margin-bottom: 15px; }

/* 排行榜列表样式 */
.rank-list li { display: flex; align-items: center; margin-bottom: 15px; font-size: 14px; }
.rank-num { width: 20px; height: 20px; line-height: 20px; text-align: center; background: #eee; color: #999; font-size: 12px; margin-right: 10px; border-radius: 2px; }
/* 前三名颜色 */
.rank-list li:nth-child(1) .rank-num { background: #ff5a00; color: #fff; }
.rank-list li:nth-child(2) .rank-num { background: #ff9600; color: #fff; }
.rank-list li:nth-child(3) .rank-num { background: #ffc600; color: #fff; }

.rank-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333; }
.btn-down { font-size: 12px; color: #28b87c; border: 1px solid #28b87c; padding: 1px 8px; border-radius: 3px; text-decoration: none; }
.btn-down:hover { background: #28b87c; color: #fff; }

/* 分页样式 */
/* --- 分页器样式完全还原 Start --- */
.pagination {
    margin: 40px 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none; /* 针对 ul li 结构 */
    padding: 0;
}
/* 所有的分页按钮（数字、下一页、末页） */
.pagination a, 
.pagination span, 
.pagination li a, 
.pagination li span {
    display: inline-block;
    min-width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    margin: 0 4px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #e2e2e2;
    color: #666;
    text-decoration: none;
    font-size: 14px;
    border-radius: 2px;
    box-sizing: border-box;
    transition: all 0.2s;
}
/* 鼠标经过时的效果 */
.pagination a:hover, 
.pagination li a:hover {
    border-color: #28b87c;
    color: #28b87c;
}
/* 当前激活页面的样式（绿色背景，白色文字） */
.pagination .active span, 
.pagination .current, 
.pagination li.active span {
    background-color: #28b87c !important;
    border-color: #28b87c !important;
    color: #fff !important;
    cursor: default;
}
/* 针对某些禁用按钮的样式 */
.pagination .disabled span, 
.pagination li.disabled span {
    color: #ccc;
    background: #fbfbfb;
    border-color: #eee;
    cursor: not-allowed;
}
/* --- 分页器样式完全还原 End --- */