/* ========== 全网热榜/排行榜模块 ========== */
.hotboard-wrapper{
    margin-bottom: 25px;background: #fff;border-radius: 12px;
    padding: 16px;box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.hotboard-tabs{
    display: flex;gap: 8px;overflow-x: auto;
    padding-bottom: 12px;margin-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;-webkit-overflow-scrolling: touch;
}
.hotboard-tabs::-webkit-scrollbar{display: none;}
.hotboard-tab{
    flex-shrink: 0;padding: 6px 14px;border: none;
    background: #f5f7fa;border-radius: 20px;
    font-size: 13px;cursor: pointer;transition: all .2s ease;
    color: #60666d;white-space: nowrap;font-family: inherit;
}
.hotboard-tab:hover{background: #e9ecef;color: #333;}
.hotboard-tab.active{background: #ff4d4f;color: #fff;}

.hotboard-item{
    display: flex;align-items: center;gap: 12px;
    padding: 10px 4px;border-bottom: 1px solid #f0f0f0;
    cursor: pointer;transition: background .2s ease;
    width: 100%;
}
.hotboard-item:last-child{border-bottom: none;}
.hotboard-item:hover{background: #f8f9fa;}

.hotboard-rank{
    width: 24px;text-align: center;font-weight: 700;
    font-size: 15px;line-height: 1;flex-shrink: 0;
}
.hotboard-rank.rank-1{color: #ff4d4f}
.hotboard-rank.rank-2{color: #ff7a45}
.hotboard-rank.rank-3{color: #ffb020}
.hotboard-rank.rank-normal{color: #909399; font-size: 14px; font-weight: 500;}

.hotboard-main{flex: 1;overflow: hidden;}
.hotboard-title{
    font-size: 14px;color: #1f2329;line-height: 1.4;
    overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
    margin-bottom: 2px;font-weight: 500;
}
.hotboard-meta{
    font-size: 12px;color: #909399;
    display: flex;align-items: center;gap: 8px;
}
.hotboard-tag{
    display: inline-block;padding: 1px 5px;
    font-size: 10px;border-radius: 3px;line-height: 1.2;
}
.hotboard-tag.hot{background: #fff1f0;color: #f5222d}
.hotboard-tag.new{background: #e6f7ff;color: #1890ff}
.hotboard-tag.boom{background: #fff7e6;color: #fa8c16}
.hotboard-empty{
    width: 100%;text-align: center;padding: 30px 0;
    color: #909399;font-size: 13px;
}

.hotboard-cover{
    width: 32px;height: 32px;border-radius: 6px;
    object-fit: cover;flex-shrink: 0;
}
.hotboard-footer{
    display: flex;justify-content: center;gap: 12px;
    padding-top: 12px;margin-top: 4px;
    border-top: 1px solid #f0f0f0;
}
.hotboard-footer-btn{
    padding: 6px 16px;border: none;
    background: #f5f7fa;border-radius: 20px;
    font-size: 13px;color: #60666d;
    cursor: pointer;transition: all .2s ease;font-family: inherit;
}
.hotboard-footer-btn:hover{background: #e9ecef;color: #333;}
.hotboard-footer-btn.primary{background: #ff4d4f;color: #fff;}
.hotboard-footer-btn.primary:hover{background: #e64345;}
.hotboard-footer-btn.hidden{display: none;}

/* 深色模式：纯黑灰调，去蓝色 */
.io-black-mode .hotboard-wrapper{background: #1a1d21;box-shadow: 0 2px 12px rgba(0,0,0,.3);}
.io-black-mode .hotboard-tabs{border-bottom-color: #2d3138;}
.io-black-mode .hotboard-tab{background: #2d3138;color: #8b93a1;}
.io-black-mode .hotboard-tab:hover{background: #3d424b;color: #e2e5ea;}
.io-black-mode .hotboard-tab.active{background: #ff4d4f;color: #fff;}
.io-black-mode .hotboard-item{border-bottom-color: #2d3138;}
.io-black-mode .hotboard-item:hover{background: #2d3138;}
.io-black-mode .hotboard-title{color: #e2e5ea;}
.io-black-mode .hotboard-rank.rank-normal{color: #6b7280;}
.io-black-mode .hotboard-meta,.io-black-mode .hotboard-empty{color: #8b93a1;}
.io-black-mode .hotboard-footer{border-top-color: #2d3138;}
.io-black-mode .hotboard-footer-btn{background: #2d3138;color: #8b93a1;}
.io-black-mode .hotboard-footer-btn:hover{background: #3d424b;color: #e2e5ea;}
.io-black-mode .hotboard-footer-btn.primary{background: #ff4d4f;color: #fff;}
.io-black-mode .hotboard-footer-btn.primary:hover{background: #e64345;}

/* 移动端适配 */
@media (max-width: 768px){
    .hotboard-wrapper{padding: 12px;border-radius: 10px;}
    .hotboard-tab{padding: 5px 12px;font-size: 12px;}
    .hotboard-item{padding: 9px 2px;gap: 10px;}
    .hotboard-rank{width: 22px;font-size: 14px;}
    .hotboard-title{font-size: 13px;}
    .hotboard-meta{font-size: 11px;}
}