/* 貢獻榜（F8，2026-08-17）。跟 theme token，唔另定色值。 */
.lb-wrap { max-width: 640px; }
.lb-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 12px; }
.lb-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }

.lb-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px;
  /* ⚠️ 成行係 <a>（撳入去睇徽章牆），所以要明確關咗底線同繼承色，
     唔係嘅話個名、個分數全部會變藍底線（2026-08-19 實測見到）。 */
  text-decoration: none; color: inherit;
}
.lb-row:hover { border-color: var(--accent); }
/* 自己嗰行高亮——一眼揾到自己喺邊，唔使數 */
.lb-row.me { border-color: var(--accent); border-width: 2px; background: var(--panel); }

.lb-rank { font-size: 15px; font-weight: 700; color: var(--muted); text-align: center; }
.lb-medal {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; font-weight: 800; font-size: 15px; color: #fff;
}
.lb-medal.m1 { background: var(--medal-gold); }
.lb-medal.m2 { background: var(--medal-silver); }
.lb-medal.m3 { background: var(--medal-bronze); }

.lb-name { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 7px; }
.lb-you {
  font-size: 12px; font-weight: 700; background: var(--accent); color: var(--on-solid);
  border-radius: 999px; padding: 1px 8px;
}
.lb-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lb-pts { font-size: 22px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.lb-pts span { font-size: 12px; font-weight: 700; color: var(--muted); margin-left: 3px; }

.lb-how { margin: 18px 0; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel); }
.lb-how summary { cursor: pointer; font-weight: 700; min-height: 32px; }
.lb-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.lb-table td { padding: 6px 0; border-bottom: 1px solid var(--line); }
.lb-table td:last-child { text-align: right; font-weight: 800; color: var(--accent); white-space: nowrap; }
.lb-how .small { font-size: 12px; margin-top: 8px; }

@media (max-width: 480px) {
  .lb-row { grid-template-columns: 34px 1fr auto; gap: 9px; padding: 10px 11px; }
  .lb-pts { font-size: 19px; }
}

/* ---------- 個人成績單／徽章牆（F8 批次二，2026-08-17） ---------- */
.pf-head h1 { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.pf-score { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-pts { font-size: 34px; font-weight: 800; color: var(--accent); line-height: 1; }
.pf-pts span { font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 4px; }
.pf-rank { font-size: 14px; color: var(--muted); }
.pf-rank b { color: var(--text); font-size: 16px; }

.pf-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 22px; }
.pf-cell {
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 2px;
}
.pf-cell b { font-size: 20px; font-weight: 800; }
.pf-cell span { font-size: 12px; color: var(--muted); }
.pf-h2 { font-size: 16px; margin: 22px 0 10px; }

/* 徽章＝線條畫圖示（2026-08-19 由中文印章改成 line art）。
   ⚠️ SVG 一律 stroke: currentColor，顏色喺呢度用 CSS 落——咁一個母圖就跟到
   街舖（銅棕）／商場（藍綠）兩套主題，唔使畫兩套圖。 */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.badge {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 8px 12px; text-align: center;
}
.badge-icon {
  width: 46px; height: 46px; margin: 0 auto 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid currentColor; border-radius: 50%;
  color: var(--accent);
}
.badge-icon svg { width: 26px; height: 26px; display: block; }
/* 逐個系列微調色調，等成塊牆有層次但仍然係同一家族 */
.badge.s-start .badge-icon { color: var(--green); }
.badge.s-return .badge-icon { color: var(--green); }
.badge.s-photo .badge-icon { color: var(--blue, #4A6B8A); }
.badge.s-district .badge-icon { color: var(--red); }

.badge-name { font-size: 13px; font-weight: 800; margin-bottom: 2px; }
.badge-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* 未攞到：灰住，但仲睇到係咩——畀人知有咩追得 */
.badge.off { opacity: .5; }
.badge.off .badge-icon { color: var(--muted); border-style: dashed; }

@media (max-width: 480px) {
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
  .badge-icon { width: 40px; height: 40px; }
  .badge-icon svg { width: 22px; height: 22px; }
}

/* 「分數點計？」摺疊表：預設 <details> 個三角同間距都好粗糙，執一執 */
.lb-how summary { list-style: none; }
.lb-how summary::-webkit-details-marker { display: none; }
.lb-how summary::before {
  content: '＋'; display: inline-block; width: 1.2em; color: var(--accent); font-weight: 800;
}
.lb-how[open] summary::before { content: '－'; }

/* 頂欄兩粒掣要分主次：主行動（成績單）實色，次要（街坊想記錄）線框。
   兩粒都實色嘅話眼睛唔知去邊——同 2026-08-13 popup 嗰兩粒掣同一個道理。 */
.platform-top .platform-login + .platform-login,
.platform-top .platform-login.secondary {
  background: transparent; color: var(--accent); border: 1.5px solid var(--accent);
}