/* Ranked collection snapshot — data driven from the lead ranked article. */
.collection-ranking-preview{margin:-18px 0 72px;padding:28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(16,22,42,.9),rgba(8,15,28,.82));box-shadow:0 24px 70px #0002}
.collection-ranking-preview-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,440px);gap:26px;align-items:end;margin-bottom:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.collection-ranking-preview-head>div{display:grid;gap:7px}
.collection-ranking-preview-head small{color:#55e7ff;font-size:9px;font-weight:950;letter-spacing:.16em}
.collection-ranking-preview-head h2{margin:0;color:var(--text);font-size:clamp(30px,3.7vw,46px);line-height:1;letter-spacing:-.045em}
.collection-ranking-preview-head p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
.collection-ranking-list{display:grid}
.collection-rank-row{display:grid;grid-template-columns:72px 112px minmax(0,1fr) 150px 22px;gap:15px;align-items:center;min-height:88px;padding:10px 8px;border-bottom:1px solid var(--line);transition:background .18s ease,transform .18s ease,border-color .18s ease}
.collection-rank-row:last-child{border-bottom:0}
.collection-rank-row:hover{transform:translateX(3px);background:#55e7ff08;border-color:#55e7ff44}
.collection-rank-number{color:#66718c;font-size:28px;font-weight:950;letter-spacing:-.06em}
.collection-rank-media{width:112px;height:68px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#0a0f18}
.collection-rank-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.collection-rank-row:hover .collection-rank-media img{transform:scale(1.035)}
.collection-rank-placeholder{width:100%;height:100%;display:grid;place-items:center;color:#55e7ff;font-size:9px;font-weight:950;letter-spacing:.12em;background:linear-gradient(135deg,#11172a,#07141c)}
.collection-rank-copy{display:grid;gap:5px;min-width:0}
.collection-rank-copy strong{color:var(--text);font-size:18px;line-height:1.1;letter-spacing:-.025em}
.collection-rank-copy small{color:var(--muted);font-size:10px;line-height:1.45}
.collection-rank-meta{color:var(--muted);font-size:9px;font-weight:800;line-height:1.4;text-align:right}
.collection-rank-row>em{color:#55e7ff;font-size:17px;font-style:normal;text-align:right}
.collection-rank-row.is-top-three{min-height:98px;background:linear-gradient(90deg,#55e7ff06,#705cff07)}
.collection-rank-row.is-top-three .collection-rank-number{color:#55e7ff;font-size:36px}
.collection-rank-row.is-top-three .collection-rank-media{height:76px}
.collection-rank-row.is-top-three .collection-rank-copy strong{font-size:21px}
.collection-ranking-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.collection-ranking-footer span{color:var(--muted);font-size:8px;font-weight:900;letter-spacing:.11em}
.collection-ranking-footer a{color:#55e7ff;font-size:9px;font-weight:950;letter-spacing:.06em}

html[data-theme="light"] .collection-ranking-preview{background:linear-gradient(145deg,#fff,#f3f7f9);box-shadow:0 20px 55px #52627116}
html[data-theme="light"] .collection-rank-row.is-top-three{background:linear-gradient(90deg,#eafafd,#f5f2ff)}
html[data-theme="light"] .collection-rank-placeholder{background:linear-gradient(135deg,#edf4f6,#e4edf1);color:#087f99}
html[data-theme="light"] .collection-rank-number{color:#8793a0}
html[data-theme="light"] .collection-rank-row.is-top-three .collection-rank-number{color:#087f99}

@media(max-width:820px){
  .collection-ranking-preview-head{grid-template-columns:1fr}
  .collection-rank-row{grid-template-columns:60px 94px minmax(0,1fr) 18px;gap:12px}
  .collection-rank-media{width:94px;height:62px}
  .collection-rank-meta{display:none}
  .collection-rank-row.is-top-three .collection-rank-media{height:68px}
}
@media(max-width:560px){
  .collection-ranking-preview{margin-top:-6px;margin-bottom:54px;padding:18px 15px;border-radius:17px}
  .collection-ranking-preview-head{gap:10px;padding-bottom:15px}
  .collection-ranking-preview-head h2{font-size:31px}
  .collection-rank-row{grid-template-columns:48px 72px minmax(0,1fr);gap:10px;min-height:78px;padding:8px 2px}
  .collection-rank-number{font-size:22px}
  .collection-rank-media{width:72px;height:54px;border-radius:8px}
  .collection-rank-row.is-top-three{min-height:84px}
  .collection-rank-row.is-top-three .collection-rank-number{font-size:29px}
  .collection-rank-row.is-top-three .collection-rank-media{height:58px}
  .collection-rank-copy strong,.collection-rank-row.is-top-three .collection-rank-copy strong{font-size:15px}
  .collection-rank-copy small{font-size:9px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .collection-rank-row>em{display:none}
  .collection-ranking-footer{align-items:flex-start;flex-direction:column}
}