:root {
  --bg: #f5f5f5;
  --card: #ffffff;
  --text: #1a1a1a;
  --muted: #5c5c5c;
  --accent: #1e6b3a;
  --border: #e2e2e2;
  --gold: #c59a2d;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background: var(--bg); color: var(--text); }
.topbar { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem 1.25rem; background:#113d22; color:#fff; }
.topbar h1 { margin:0; font-size:1.5rem; }
.topbar p { margin:.25rem 0 0; color:#d9e7dc; font-size:.95rem; }
#refreshBtn { background:var(--gold); color:#1a1a1a; border:none; border-radius:8px; padding:.7rem 1rem; font-weight:700; cursor:pointer; }
.tabs { display:flex; gap:.5rem; padding:1rem 1rem 0; flex-wrap:wrap; }
.tab { border:none; background:#dfe7e1; color:#234; padding:.7rem 1rem; border-radius:10px 10px 0 0; cursor:pointer; font-weight:600; }
.tab.active { background:var(--card); color:var(--accent); }
main { padding:0 1rem 1rem; }
.panel { display:none; background:var(--card); border:1px solid var(--border); border-radius:0 12px 12px 12px; padding:1rem; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.panel.active { display:block; }
.panel-header { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; }
.panel-header h2 { margin:0; font-size:1.1rem; }
.panel-header span { color:var(--muted); font-size:.9rem; }
.table-wrap { overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:.95rem; }
th, td { padding:.7rem .55rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; }
#leaderboardTable { table-layout: fixed; }
#leaderboardTable th:nth-child(1), #leaderboardTable td:nth-child(1) { width: 44px; }
#leaderboardTable th:nth-child(3), #leaderboardTable td:nth-child(3) { width: 62px; }
#leaderboardTable th:nth-child(4), #leaderboardTable td:nth-child(4) { width: 62px; }
#leaderboardTable th:nth-child(5), #leaderboardTable td:nth-child(5) { width: 72px; }
#leaderboardTable td:nth-child(2) { padding-right: .1rem; }
#leaderboardTable td:nth-child(3) { padding-left: .1rem; }
th { color:#444; font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; cursor:pointer; user-select:none; }
th.sorted { color: var(--accent); }
th[data-dir="asc"]::after { content: " ▲"; }
th[data-dir="desc"]::after { content: " ▼"; }
tr:hover td { background:#fafafa; }
.score-negative { color:#b00020; font-weight:700; }
.score-bad { color:#1a1a1a; }
.score-even { color:#1a1a1a; }
.star-btn { background:none; border:none; cursor:pointer; font-size:1.1rem; }
.star-on { color:var(--gold); }
.star-off { color:#bbb; }
.small { color:var(--muted); font-size:.85rem; }
.pick-list { display:flex; flex-wrap:wrap; gap:.45rem; align-items:flex-start; }
.pill {
  background:#eef3ef;
  border:1px solid #dbe5dd;
  border-radius:14px;
  padding:.45rem .65rem;
  font-size:.82rem;
  white-space:normal;
  line-height:1.2;
  min-width:110px;
}
.pill strong {
  display:inline-block;
  margin-top:.18rem;
  font-size:.95rem;
}
@media (max-width: 720px) {
  .topbar { flex-direction:column; }
  th, td { padding:.6rem .4rem; font-size:.88rem; }
  .pill { min-width:96px; padding:.4rem .55rem; }
}

.empty-state { color: var(--muted); padding: 1rem 0; }