/* Ranking V1, scoped to the approved 1360px content layout. */
/* Two-line podium titles reserve space for author, summary and reading link. */
.hailang-ranking .ranking-leader { height:258px; padding-top:118px; }
.hailang-ranking .ranking-leader .ranking-name { font-size:20px; line-height:28px; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.hailang-ranking .ranking-leader .ranking-summary { top:146px; }
.hailang-ranking .ranking-leader .ranking-metric { top:180px; }
.hailang-ranking .ranking-leader .ranking-unit { top:191px; }
@media(min-width:801px){.hailang-ranking .ranking-list-heading h2,.hailang-ranking .ranking-more-title{font-size:22px}}
@media(max-width:800px){.hailang-ranking .ranking-leader .ranking-name{font-size:18px}}
.hailang-ranking { color:#14243c; background:#f2f7fb; }
.hailang-ranking [hidden] { display:none!important; }
.ranking-main { padding:20px 0 24px; }
.ranking-breadcrumb { color:#738197; font-size:14px; line-height:20px; margin-bottom:12px; }
.ranking-heading { display:flex; align-items:center; gap:24px; margin-bottom:12px; height:40px; }
.ranking-heading h1 { font-size:28px; line-height:40px; margin:0; }
.ranking-heading p { margin:0; color:#738197; font-size:14px; }
.rank-controls { display:grid; grid-template-columns:1fr auto; grid-template-rows:58px 48px; padding:0 23px; height:108px; border:1px solid #e0eaf2; border-radius:4px; background:white; margin-bottom:20px; }
.ranking-tabs { display:flex; gap:62px; height:58px; align-items:stretch; }
.ranking-tabs a { display:flex; align-items:center; position:relative; font-size:18px; color:#738197; }
.ranking-tabs a.is-active { color:#087df0; font-weight:600; }
.ranking-tabs a.is-active::after { content:''; height:3px; position:absolute; left:0; right:0; bottom:3px; background:#087df0; border-radius:1px; }
.ranking-periods { align-self:center; display:flex; width:240px; padding:2px; height:32px; border-radius:4px; background:#f3f7fc; }
.ranking-periods a { flex:1; display:grid; place-items:center; font-size:14px; color:#738197; border:1px solid transparent; border-radius:3px; }
.ranking-periods a.is-active { color:#087df0; background:white; border-color:#dae7f4; font-weight:600; }
.ranking-explanation { grid-column:1/-1; display:flex; align-items:center; gap:20px; border-top:1px solid #edf1f6; color:#738197; font-size:14px; }
.ranking-explanation strong { color:#14243c; white-space:nowrap; }
.ranking-scope { margin-left:auto; white-space:nowrap; }
.ranking-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.ranking-podium:empty { display:none; }
.ranking-table { padding:0 19px; border:1px solid #e0eaf2; border-radius:4px; background:white; }
.ranking-list-heading { display:flex; align-items:center; gap:20px; height:67px; }
.ranking-list-heading h2 { font-size:24px; line-height:32px; margin:0; padding-left:14px; border-left:4px solid #087df0; }
.ranking-list-heading > span { color:#738197; font-size:14px; }
.ranking-list-heading .ranking-sort-label { margin-left:auto; color:#087df0; font-weight:600; }
.ranking-columns,.ranking-rows .ranking-book { display:grid; grid-template-columns:85px minmax(240px,445fr) minmax(120px,220fr) minmax(160px,334fr) 100px 136px; align-items:center; }
.ranking-columns { height:38px; background:#f5f8fb; font-size:14px; color:#738197; }
.ranking-columns > :first-child { padding-left:18px; }
.ranking-columns > :last-child { text-align:right; padding-right:20px; }
.ranking-book { min-width:0; }
.ranking-rows .ranking-book { position:relative; height:60px; border-bottom:1px solid #edf1f6; }
.ranking-rows .ranking-book:last-child { border:0; }
.ranking-rows .ranking-number { grid-column:1; grid-row:1; text-align:center; padding-right:15px; color:#738197; font-size:18px; }
.ranking-no { display:none; }
.ranking-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.ranking-rows .ranking-cover { width:30px; height:42px; position:absolute; left:85px; top:9px; }
.ranking-rows .ranking-name { grid-column:2; grid-row:1; align-self:start; margin:10px 8px 0 47px; font-size:16px; line-height:24px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.ranking-rows .ranking-genre { position:absolute; left:132px; top:34px; line-height:18px; font-size:13px; color:#738197; }
.ranking-rows .ranking-author { grid-column:3; grid-row:1; }
.ranking-rows .ranking-chapter { grid-column:4; grid-row:1; }
.ranking-rows .ranking-status { grid-column:5; grid-row:1; }
.ranking-rows .ranking-author,.ranking-rows .ranking-chapter,.ranking-rows .ranking-status { font-size:14px; color:#738197; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:16px; }
.ranking-rows .ranking-metric { grid-column:6; grid-row:1; font-size:16px; text-align:right; padding-right:20px; }
.ranking-rows .ranking-summary,.ranking-rows .ranking-unit,.ranking-rows .ranking-detail { display:none; }
.ranking-leader { position:relative; height:230px; border:1px solid #e0eaf2; border-radius:4px; background:white; padding:94px 20px 20px 143px; }
.ranking-leader:first-child { border-color:#b7d9fb; }
.ranking-leader .ranking-number { position:absolute; top:15px; left:19px; padding:2px 7px; background:#fff0ef; border-radius:3px; color:#df5959; font-size:13px; font-weight:700; line-height:19px; }
.ranking-leader:nth-child(2) .ranking-number { background:#fff5e8; color:#c17c28; }
.ranking-leader:nth-child(3) .ranking-number { background:#fff8df; color:#b38e30; }
.ranking-leader .ranking-no { display:inline; }
.ranking-leader .ranking-cover { position:absolute; left:19px; top:51px; width:104px; height:145px; }
.ranking-leader .ranking-name { position:absolute; top:56px; left:143px; right:20px; margin:0; font-size:22px; line-height:28px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ranking-leader .ranking-author,.ranking-leader .ranking-genre { font-size:14px; line-height:20px; color:#738197; }
.ranking-leader .ranking-genre:not(:empty)::before { content:' · '; }
.ranking-leader .ranking-summary { position:absolute; top:125px; left:143px; right:20px; font-size:14px; line-height:22px; margin:0; color:#61718a; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ranking-leader .ranking-metric { position:absolute; top:157px; left:143px; font-size:24px; line-height:30px; color:#087df0; font-weight:700; }
.ranking-leader:first-child .ranking-metric { color:#df5959; }
.ranking-leader .ranking-unit { position:absolute; top:168px; left:262px; font-size:13px; color:#738197; }
.ranking-leader .ranking-detail { position:absolute; bottom:9px; right:23px; font-size:14px; color:#087df0; }
.ranking-leader .ranking-chapter,.ranking-leader .ranking-status { display:none; }
.ranking-list-foot { height:43px; display:flex; align-items:center; justify-content:space-between; color:#738197; font-size:13px; padding:0 4px; }
.ranking-list-foot a { font-size:14px; color:#087df0; }
.ranking-empty { padding:40px 20px; text-align:center; color:#738197; font-size:14px; }
.ranking-more-title { font-size:24px; line-height:32px; margin:18px 0 12px; }
.ranking-more { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ranking-more > a { display:flex; gap:16px; align-items:center; height:84px; padding:18px 20px; border:1px solid #e0eaf2; border-radius:4px; background:white; }
.ranking-more-mark { display:grid; place-items:center; width:44px; height:44px; background:#eef7ff; color:#087df0; font-size:20px; font-weight:600; border-radius:4px; }
.ranking-more strong { display:block; font-size:18px; margin-bottom:4px; }
.ranking-more small { display:block; font-size:14px; color:#738197; }
.ranking-more svg { width:18px; color:#087df0; margin-left:auto; }
.hailang-ranking a:focus-visible { outline:2px solid #087df0; outline-offset:3px; }
@media(max-width:1199px) {
 .ranking-columns,.ranking-rows .ranking-book { grid-template-columns:60px minmax(180px,2fr) minmax(110px,1fr) minmax(130px,1.3fr) 70px 90px; }
 .ranking-rows .ranking-cover { left:60px; }.ranking-rows .ranking-genre { left:107px; }
 .ranking-leader { padding-left:110px; }.ranking-leader .ranking-cover { width:76px; height:108px; }.ranking-leader .ranking-name { font-size:18px; }
 .ranking-leader .ranking-name,.ranking-leader .ranking-summary,.ranking-leader .ranking-metric { left:110px; }.ranking-leader .ranking-unit { left:218px; }
 .ranking-leader .ranking-unit { margin-left:8px; }.ranking-tabs { gap:32px; }
}
@media(max-width:800px) {
 .ranking-heading { height:auto; display:block; }.ranking-heading h1 { font-size:24px; }.ranking-heading p { margin-top:6px; }
 .rank-controls { height:auto; padding:0 12px; grid-template-columns:1fr; grid-template-rows:auto; }.ranking-tabs { justify-content:space-between; gap:12px; }.ranking-tabs a { font-size:16px; }
 .ranking-periods { margin:6px 0 12px; }.ranking-explanation { flex-wrap:wrap; gap:6px 12px; padding:12px 0; }.ranking-scope { display:none; }
 .ranking-podium { grid-template-columns:1fr; gap:12px; }.ranking-leader { padding-left:143px; height:230px; }.ranking-leader .ranking-cover { width:104px; height:145px; }.ranking-leader .ranking-name { font-size:20px; }
 .ranking-leader .ranking-name,.ranking-leader .ranking-summary,.ranking-leader .ranking-metric { left:143px; }.ranking-leader .ranking-unit { left:262px; }
 .ranking-table { padding:0 12px; }.ranking-list-heading { height:auto; padding:16px 0; gap:10px; flex-wrap:wrap; }.ranking-list-heading h2 { font-size:20px; }.ranking-sort-label { display:none; }
 .ranking-columns { display:none; }.ranking-rows .ranking-book { grid-template-columns:32px minmax(0,1fr) 72px; height:82px; }
 .ranking-rows .ranking-number { padding:0; font-size:16px; }.ranking-rows .ranking-cover { left:36px; top:18px; }.ranking-rows .ranking-name { margin:14px 4px 0 44px; font-size:15px; }
 .ranking-rows .ranking-genre { left:76px; top:40px; }.ranking-rows .ranking-author { position:absolute; grid-column:1/-1; left:76px; top:59px; font-size:12px; max-width:180px; }
 .ranking-rows .ranking-chapter,.ranking-rows .ranking-status { display:none; }.ranking-rows .ranking-metric { grid-column:3; padding-right:0; font-size:14px; }
 .ranking-list-foot { height:auto; gap:10px; padding:14px 0; }.ranking-list-foot a { white-space:nowrap; }
 .ranking-more { grid-template-columns:1fr; gap:12px; }.ranking-more-title { font-size:20px; }
}