.rank-page{background:#f5f7fb;padding:26px 0 46px;}
.rank-wrap{padding:0 12px;}
.rank-tabs{display:inline-flex;padding:3px;background:#f4f6fa;border-radius:999px;}
.rank-tab{padding:0 20px;line-height:34px;border-radius:999px;font-size:14px;color:#5a6472;text-decoration:none;transition:all .2s;}
.rank-tab:hover{color:#1f2733;}
.rank-tab.active{background:#fff;color:#f72128;font-weight:600;box-shadow:0 2px 6px rgba(20,30,50,.08);}
.rank-tabs-sm .rank-tab{padding:0 13px;line-height:27px;font-size:12px;}

.rank-section{margin-top:22px;}
.rank-section:first-of-type{margin-top:0;}
.rank-sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 2px;}
.rank-sec-hd h2{position:relative;margin:0;padding-left:11px;font-size:18px;line-height:1.4;font-weight:600;color:#1f2733;}
.rank-sec-hd h2::before{content:"";position:absolute;left:0;top:50%;width:4px;height:18px;margin-top:-9px;border-radius:2px;background:#f72128;}

.rank-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.rank-board{background:#fff;border:1px solid #eef1f6;border-radius:12px;padding:14px 14px 7px;box-shadow:0 4px 14px rgba(20,30,50,.04);transition:border-color .2s,box-shadow .2s;}
.rank-board:hover{border-color:#fbd0d1;box-shadow:0 8px 24px rgba(247,33,40,.08);}
.rank-board-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;padding-bottom:10px;border-bottom:1px dashed #eef1f5;}
.rank-board-hd h3{margin:0;font-size:15px;line-height:1.4;font-weight:600;color:#1f2733;}
.rank-board-hd a{flex:none;font-size:12px;color:#9aa3b2;text-decoration:none;}
.rank-board-hd a:hover{color:#f72128;}

.rank-list{display:block;height:395px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#dfe3ea transparent;}
.rank-list::-webkit-scrollbar{width:6px;}
.rank-list::-webkit-scrollbar-track{background:transparent;}
.rank-list::-webkit-scrollbar-thumb{background:#dfe3ea;border-radius:3px;}
.rank-list::-webkit-scrollbar-thumb:hover{background:#c9d0da;}
.rank-item{position:relative;display:flex;align-items:center;height:32px;color:#4a5464;text-decoration:none;transition:height .18s ease;}
.rank-item:hover{color:#f72128;height:57px;}
.rank-top{height:57px;}
.rank-cover{flex:none;width:80px;height:45px;margin-right:10px;border-radius:6px;overflow:hidden;background:#f2f4f8;}
.rank-cover-hide{display:none;}
.rank-item:hover .rank-cover-hide{display:block;}
.rank-cover img{display:block;width:100%;height:100%;object-fit:cover;}
.rank-no{flex:none;width:20px;height:20px;margin-right:8px;border-radius:5px;background:#f2f4f8;color:#8a94a6;font-size:11px;line-height:20px;text-align:center;font-weight:600;}
.rank-item:hover .rank-no{background:#fde8e9;color:#f72128;}
.rank-no.top1{background:#f72128;color:#fff;}
.rank-no.top2{background:#ff7900;color:#fff;}
.rank-no.top3{background:#ffb400;color:#fff;}
.rank-item:hover .rank-no.top1{background:#f72128;color:#fff;}
.rank-item:hover .rank-no.top2{background:#ff7900;color:#fff;}
.rank-item:hover .rank-no.top3{background:#ffb400;color:#fff;}
.rank-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;}
.rank-top .rank-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;line-height:1.5;max-height:36px;}
.rank-item:hover .rank-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;line-height:1.5;max-height:36px;}
.rank-empty{padding:20px 0;text-align:center;font-size:12px;color:#b0b8c6;}

.rank-note{margin-top:24px;font-size:12px;line-height:1.8;color:#9aa3b2;text-align:center;}

@media (max-width:1200px){
    .rank-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:960px){
    .rank-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:750px){
    .rank-page{padding:0 0 22px;background:#fff;}
    .rank-mobile{padding-top:.88rem;}
    .rank-wrap{padding:0 .24rem;}
    .rank-section{margin-top:16px;}
    .rank-section:first-of-type{margin-top:0;}
    .rank-sec-hd{margin-bottom:9px;}
    .rank-sec-hd h2{font-size:16px;}
    .rank-tabs-sm .rank-tab{padding:0 10px;line-height:25px;font-size:12px;}
    .rank-grid{grid-template-columns:minmax(0,1fr);gap:10px;}
    .rank-board{padding:12px 12px 6px;box-shadow:0 2px 8px rgba(20,30,50,.04);}
    .rank-item{height:34px;}
    .rank-item:hover{height:34px;}
    .rank-top{height:60px;}
    .rank-cover{width:88px;height:50px;}
    .rank-cover-hide{display:none !important;}
    .rank-list{height:auto;max-height:none;overflow:visible;}
    .rank-title{font-size:12.5px;}
    .rank-note{text-align:left;padding:0 .24rem;margin-top:18px;}
}