/* Leaderboard, desain "A · Podium kaca" (9 Okt 2026).
   Semua selector diawali .lbx supaya tidak mengubah halaman lain.
   Tema gelap mengikuti class "dsh-dark" di <html> (pilihan dari Dashboard Saya). */

.lbx {
  --l-card: #ffffff; --l-ink: #261316; --l-muted: #715c5f; --l-line: #e9e7e1;
  --l-chip-bg: #ffffff; --l-chip-bd: #e0ddd5; --l-chip-ink: #261316;
  --l-chip-on: #0a4f4f; --l-title: #0a4f4f; --l-pts: #0a4f4f;
  --l-bar-bg: #efede8; --l-bar: #0f8a8a; --l-shadow: 0 1px 2px rgba(19,38,29,.06), 0 6px 18px rgba(19,38,29,.05);
  max-width: 560px; margin: 0 auto; color: var(--l-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
html.dsh-dark .lbx {
  --l-card: #201718; --l-ink: #f4f2ee; --l-muted: #b3ad9f; --l-line: #302426;
  --l-chip-bg: #201718; --l-chip-bd: #3b2c2e; --l-chip-ink: #f4f2ee;
  --l-chip-on: #14b8a6; --l-title: #5fd4c7; --l-pts: #5fd4c7;
  --l-bar-bg: #302426; --l-bar: #14b8a6; --l-shadow: 0 1px 2px rgba(0,0,0,.4);
}
body:has(.lbx) { background: #f2f1ee; }
html.dsh-dark body:has(.lbx) { background: #140d0e; }
html.dsh-dark footer.site { color: #947f82; }
main:has(> .lbx) { padding-top: 14px; }

.lbx *, .lbx *::before, .lbx *::after { box-sizing: border-box; }
.lbx h1, .lbx h2 { margin: 0; }
.lbx a { color: inherit; text-decoration: none; }
.lbx a:focus-visible { outline: 3px solid #5fd4c7; outline-offset: 2px; }
.lbx b { font-weight: 800; font-variant-numeric: tabular-nums; }
.lbx-flame { width: 15px; height: 15px; flex: none; }

/* ---------- judul & chip periode ---------- */
.lbx-top { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 2px 0; }
.lbx-top h1 { font-size: 28px; line-height: 1.1; font-weight: 800; color: var(--l-title); }
.lbx-count { font-size: 12px; font-weight: 600; color: var(--l-muted); font-variant-numeric: tabular-nums; }
.lbx-chips {
  position: relative; display: flex; gap: 8px; margin-top: 12px; padding: 2px 2px 4px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.lbx-chips::-webkit-scrollbar { display: none; }
.lbx-chips a {
  flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px;
  border-radius: 99px; font-size: 13px; font-weight: 700; white-space: nowrap;
  background: var(--l-chip-bg); color: var(--l-chip-ink); border: 1px solid var(--l-chip-bd);
}
.lbx-chips a.on { background: var(--l-chip-on); border-color: var(--l-chip-on); color: #fff; }

/* ---------- tab kategori (leaderboard sekunder, 10 Okt 2026) ---------- */
.lbx-tabs {
  display: flex; gap: 4px; margin-top: 12px; padding: 4px;
  background: var(--l-bar-bg); border-radius: 14px;
}
.lbx-tabs a {
  flex: 1; text-align: center; padding: 9px 2px; border-radius: 11px;
  font-size: 12.5px; font-weight: 700; color: var(--l-muted); white-space: nowrap;
}
.lbx-tabs a.on { background: var(--l-card); color: var(--l-title); box-shadow: var(--l-shadow); }

/* ---------- avatar (render_avatar: <img> atau <span> inisial) ---------- */
.lbx .lbx-av { margin: 0; flex: none; color: #fff; font-weight: 800; object-fit: cover; }
.lbx .lbx-av-row { width: 38px; height: 38px; font-size: 13px; }
.lbx .lbx-av-1 { width: 62px; height: 62px; font-size: 21px; border: 3px solid #e8b84a; }
.lbx .lbx-av-2 { width: 50px; height: 50px; font-size: 17px; border: 3px solid #d3d0c9; }
.lbx .lbx-av-3 { width: 50px; height: 50px; font-size: 17px; border: 3px solid #d99a5b; }

/* ---------- hero + podium ---------- */
.lbx-hero {
  margin-top: 10px; border-radius: 24px; padding: 20px 12px 0; color: #fff; overflow: hidden;
  background: linear-gradient(170deg, #16a3a3 0%, #0a4f4f 48%, #052e2c 100%);
}
.lbx-kicker { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #e8d19f; }
.lbx-hero h2 { text-align: center; font-size: 20px; font-weight: 800; margin-top: 4px; color: #fff; overflow-wrap: anywhere; }
.lbx-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: flex-end; margin-top: 22px; }
.lbx-pod { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.lbx-pod-name { margin-top: 8px; max-width: 100%; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbx-pod-pts { display: flex; align-items: center; gap: 3px; margin-top: 2px; line-height: 1.1; }
.lbx-pod-pts b { font-size: 24px; }
.lbx-pod-1 .lbx-pod-pts b { font-size: 30px; color: #ffe9a6; }
.lbx-pod-sub { font-size: 10.5px; opacity: .82; margin-top: 1px; text-align: center; line-height: 1.35; font-variant-numeric: tabular-nums; }
.lbx-pod-unit { font-size: 11px; font-weight: 700; opacity: .82; margin-left: 1px; }
.lbx-pod-1 .lbx-pod-unit { font-size: 13px; }
.lbx-ped {
  width: 100%; margin-top: 10px; border-radius: 14px 14px 0 0; border: 1px solid rgba(255,255,255,.22); border-bottom: 0;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 6px;
  font-weight: 800; color: rgba(255,255,255,.88);
}
.lbx-pod-1 .lbx-ped { height: 74px; font-size: 30px; background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.08)); }
.lbx-pod-2 .lbx-ped { height: 52px; font-size: 24px; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); }
.lbx-pod-3 .lbx-ped { height: 36px; font-size: 20px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); }

/* ---------- daftar 4+ ---------- */
.lbx-card { margin-top: 14px; background: var(--l-card); border: 1px solid var(--l-line); border-radius: 18px; box-shadow: var(--l-shadow); }
.lbx-list { padding: 6px 14px 4px; }
.lbx-empty { padding: 18px 16px; font-size: 14px; line-height: 1.6; color: var(--l-muted); }
.lbx-row {
  display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 11px 0;
}
.lbx-row + .lbx-row { border-top: 1px solid var(--l-line); }
.lbx-rk { text-align: center; font-size: 14px; font-weight: 800; color: var(--l-muted); font-variant-numeric: tabular-nums; }
.lbx-mid { min-width: 0; display: block; }
.lbx-name { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbx-sub { display: block; font-size: 11.5px; color: var(--l-muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.lbx-bar { display: block; height: 4px; border-radius: 99px; background: var(--l-bar-bg); margin-top: 6px; overflow: hidden; }
.lbx-bar span { display: block; height: 4px; border-radius: 99px; background: var(--l-bar); }
.lbx-pts { display: flex; align-items: center; gap: 4px; color: var(--l-pts); }
.lbx-pts b { font-size: 19px; }
.lbx-pts-unit { font-size: 11px; font-weight: 700; opacity: .75; }

.lbx-hint { margin: 14px 4px 0; font-size: 12px; line-height: 1.6; color: var(--l-muted); }
.lbx-hint .lbx-flame { width: 13px; height: 13px; vertical-align: -2px; }