/*主体容器 最大宽度1240，中间+右侧280，无左侧栏*/
.container{
    max-width:1240px;
    margin:20px auto;
    display:grid;
    grid-template-columns:1fr 280px;
    gap:20px;
}

/*主卡片*/
.main-card{
    background:#ffffff;
    border:1px solid #dbe6f2;
    border-radius:6px;
    overflow:hidden;
}
/*头部板块标题卡片【新增左侧图片】*/
.forum-header-card{
    padding:20px;
    display:flex;
    align-items:center;
    gap:16px;
    position: relative;
}
/*置顶标题下方淡黄色渐变底*/
.forum-header-card::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:6px;
}
.forum-logo-img{
    width:56px;
    height:56px;
    flex-shrink:0;
    border-radius:8px;
    background:#e8f1fc;
    overflow:hidden;
}
.forum-logo-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.forum-info{
    flex-shrink:0;
}
.forum-info h1{
    font-size:24px;
    font-weight:bold;
    margin-bottom:6px;
}
.forum-info p{
    font-size:13px;
    color:#777;
}
/*统计区域居中*/
.forum-stat-row{
    flex:1;
    display:flex;
    justify-content:center;
    gap:40px;
}
.stat-item{
    text-align:center;
}
.stat-num{
    font-size:22px;
    font-weight:bold;
    color:#333;
}
.stat-text{
    font-size:12px;
    color:#888;
}
.btn-post{
    background:#0066cd;
    color:#fff;
    border:none;
    border-radius:4px;
    padding:9px 18px;
    font-size:14px;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
}
.btn-post i{
    margin-right:4px;
}
.btn-post:hover{
    background:#0056AC
}
/* ===== 表头 & 帖子行：grid列定义完全保持一致 ===== */
.thread-table-head{
    display:grid;
    /* 主题(自适应) | 作者143px | 回复84px | 浏览60px */
    grid-template-columns: 1fr 143px 84px 60px;
    padding:12px 16px;
    background:#f7f9fc;
    border-bottom:1px solid #e8edf3;
    font-size:14px;
    color:#555;
    align-items:center;
    gap:10px;
    font-weight: 600;
}
/*帖子行：和表头grid列完全一模一样！！*/
.thread-item{
    position: relative;
    display:grid;
    grid-template-columns: 1fr 143px 84px 60px;
    padding:14px 16px;
    border-bottom:1px solid #f0f3f8;
    align-items:center;
    gap:10px;
}
.thread-item.active{
    background: linear-gradient(90deg, #fff9f0 0%, #ffffff 100%);
}
/* 渐变遮罩层 */
.thread-item::before {
    content: "";
    position: absolute;
    left:0;top:0;right:0;bottom:0;
    background: linear-gradient(90deg, #E8F1FC 0%, #ffffff 100%);
    opacity: 0;
    /* transition: 变化属性 持续时间 缓动 延时 */
    transition: opacity 0.3s ease 0.08s;
    z-index: 1;
    pointer-events: none;
}
.thread-item:hover::before {
    opacity:1;
    /* 延时：0.08s，鼠标放上去等0.08秒才开始渐变动画；去掉就无延迟 */
    transition: opacity 0.3s ease 0.08s;
}
/* 内容层级，文字放在渐变上层 */
.thread-item > * {
    position: relative;
    z-index:2;
}

.thread-title-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0; /*grid内部元素溢出省略必备*/
}
.stick-tag{
    background:#ffb848;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:3px;
    flex-shrink:0;
}
.essence-tag{
    background:#ff7a1a;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:3px;
    flex-shrink:0;
}
.thread-title-wrap a{
    font-size:15px;
    /*标题超长省略*/
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.thread-title-wrap a:hover{
    color:#0066cd;
}
.author-row{
    display:flex;
    align-items:center;
    gap:6px;
}
.author-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#ccc;
    flex-shrink:0;
}
.author-name{
    font-size:13px;
}
.count-num{
    text-align:center;
    font-size:14px;
    color:#444;
}

/*表格表头*/
.thread-table-head{
    display:grid;
    grid-template-columns: 1fr 143px 84px 60px;
    padding:12px 16px;
    background:#f7f9fc;
    border-bottom:1px solid #e8edf3;
    font-size:14px;
    color:#555;
}
/*帖子行*/
.thread-item{
    display:grid;
    grid-template-columns: 1fr 140px 80px 80px;
    padding:14px 16px;
    border-bottom:1px solid #f0f3f8;
    align-items:center;
    gap:10px;

}
.thread-item.active{
    background: linear-gradient(90deg, #fff9f0 0%, #ffffff 100%);
}
.thread-title-wrap{
    display:flex;
    align-items:center;
    gap:8px;
}
.stick-tag{
    background:#ffb848;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:3px;
    flex-shrink:0;
}
.essence-tag{
    background:#ff7a1a;
    color:#fff;
    font-size:11px;
    padding:2px 6px;
    border-radius:3px;
    flex-shrink:0;
}
.thread-title-wrap a{
    font-size:15px;
}
.thread-title-wrap a:hover{
    color:#0066cd;
}
.author-row a{
    display:flex;
    align-items:center;
    gap:6px;
}
.author-avatars{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#ccc;
    flex-shrink:0;
}
.author-avatars img{
    width:100%;
    height:100%;
    border-radius:50%;
}
.author-name{
    font-size:13px;
}
.count-num{
    text-align:center;
    font-size:14px;
    color:#444;
}


/*分页容器*/
.page-wraps {
    padding:25px;
    text-align:center;
}

.page-wraps .page-btns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:36px;
    height:36px;
    margin:0 2px;
    border-radius:8px;
    border:1px solid #dde2eb;
    background:#ffffff;
    color:#333;
    font-size:14px;
    text-decoration:none;
    cursor:pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}
/*hover悬浮效果*/
.page-wraps .page-btns:hover:not(.disabled):not(.active) {
    border-color: #0066cd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
    color:#0066cd;
}
/*当前激活页码*/
.page-wraps .page-btns.active {
    background:#0066cd;
    color:#fff;
    border‑color:#0066cd;
    box-shadow: 0 2px 8px rgba(0,102,205,0.25);
    cursor:default;
}
/*禁用状态：上一页到第一页 / 下一页到最后一页*/
.page-wraps .page-btns.disabled {
    background:#f7f8fa;
    color:#b4b9c4;
    cursor:not‑allowed;
    box‑shadow:none;
}