/* ============================================================
   Kennzy — Sidebar de Ranking de Pontos (widget reutilizável).
   Renderiza dentro de qualquer <aside class="members" data-kz-rank>.
   Namespaced em .kzr- para não depender do CSS de nenhuma página.
   Pareado com /assets/js/rank-widget.js.
   ============================================================ */
.kzr{ font-family:var(--f-body); }

.kzr__sub{ padding:6px 8px 12px; font-size:10px; letter-spacing:.04em; color:var(--text-faint-2); opacity:.5; font-variant-numeric:tabular-nums; }

/* pódio (top 3) */
.kzr__podium{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.kzr-item{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-md); background:var(--cream-0); border:1px solid var(--hairline); text-decoration:none; transition:box-shadow .15s, transform .05s; }
.kzr-item:hover{ box-shadow:var(--shadow-card); }
.kzr-item:active{ transform:translateY(1px); }
.kzr-item__rank{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800; flex-shrink:0; color:#3A2A10; background:var(--cream-3); }
.kzr-item__rank.gold{ background:#F4A62C; } .kzr-item__rank.silver{ background:#D9C7A8; } .kzr-item__rank.bronze{ background:#C77B3C; color:#fff; }
.kzr-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; display:grid; place-items:center; font-size:12px; font-weight:800; color:#fff; flex-shrink:0; background:var(--text-faint-2); overflow:hidden; }
.kzr-avatar img{ width:100%; height:100%; object-fit:cover; }
.kzr-item__meta{ min-width:0; line-height:1.25; flex:1; }
.kzr-item__name{ font-size:13px; font-weight:700; white-space:nowrap; min-width: 0; overflow: hidden; text-overflow:ellipsis; color:var(--ink); }
.kzr-item__pts{ font-size:11px; color:var(--text-faint-2); }
.kzr-item__pts b{ color:var(--accent); font-weight:800; }

/* lista (4+) */
.kzr__list{ display:flex; flex-direction:column; }
.kzr-row{ display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:var(--r-xs); text-decoration:none; }
.kzr-row:hover{ background:var(--cream-0); }
.kzr-row__pos{ width:20px; text-align:center; font-size:11.5px; color:var(--text-faint-2); font-variant-numeric:tabular-nums; flex-shrink:0; font-weight:700; }
.kzr-row .kzr-avatar{ width:28px; height:28px; font-size:10.5px; }
.kzr-row__meta{ min-width:0; line-height:1.2; flex:1; }
.kzr-row__name{ font-size:13px; font-weight:600; white-space:nowrap; min-width: 0; overflow: hidden; text-overflow:ellipsis; color:var(--ink); }
.kzr-row__pts{ font-size:11px; color:var(--text-faint-2); font-variant-numeric:tabular-nums; flex-shrink:0; }
.kzr-row__pts b{ color:var(--ink); font-weight:700; }

/* estados / rodapé */
.kzr__msg{ padding:16px 8px; text-align:center; font-size:12.5px; color:var(--text-faint-2); }
.kzr__foot{ margin-top:14px; padding:10px 8px 4px; border-top:1px solid var(--hairline); font-size:10.5px; line-height:1.5; color:var(--text-faint-2); }
.kzr__foot b{ color:var(--text-soft); font-weight:700; }

.kzr__spin{ width:18px; height:18px; border-radius:50%; border:2px solid var(--hairline); border-top-color:var(--accent); animation:kzr-spin .7s linear infinite; margin:18px auto; }
@keyframes kzr-spin{ to{ transform:rotate(360deg); } }