body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

/* ── Card ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.card-header {
  background: var(--surface2); padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}

/* ── Filter pills ── */
.filter-group { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter-group::-webkit-scrollbar { display: none; }
.filter-label { font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* ── Search ── */
.search-wrap { flex: 1; min-width: 160px; }
.search-input {
  width: 100%; font-size: .84rem; background: var(--surface2);
  border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: .35rem .7rem;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus { outline: none; border-color: var(--accent); }

/* ── Stats bar ── */
.stats-bar { padding: .4rem 1rem; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--border); }

/* ── Table ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.riders-table { width: 100%; border-collapse: collapse; }
.riders-table thead th {
  background: var(--surface2); color: var(--muted); font-size: .72rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  padding: .55rem .75rem; text-align: left; white-space: nowrap; position: sticky; top: 0;
}
.riders-table tbody tr.rider-row { border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; }
.riders-table tbody tr.rider-row:last-child { border-bottom: none; }
.riders-table tbody tr.rider-row:hover { background: var(--surface2); }
.riders-table td { padding: .55rem .75rem; font-size: .88rem; vertical-align: middle; }

.col-rank  { color: var(--muted); font-size: .8rem; width: 2.5rem; text-align: center; }
.col-name  { font-weight: 600; min-width: 140px; }
.col-club  { color: var(--muted); font-size: .82rem; min-width: 120px; a{color:var(--accent); text-decoration: none;} a:hover{color:var(--accent); text-decoration: underline;} }
.col-cat   { white-space: nowrap; }
.col-pts   { text-align: right; font-weight: 700; color: var(--accent); width: 60px; }
.col-pos   { color: var(--muted); font-size: .82rem; width: 50px; text-align: center; }
.col-link  { width: 40px; text-align: center; }

.cat-badge {
  display: inline-block; font-size: .7rem; font-weight: 700; padding: .1rem .45rem;
  border-radius: 99px; background: var(--surface2); border: 1px solid var(--border); color: var(--muted);
}
.medal-gold   { color: #f59e0b; }
.medal-silver { color: #94a3b8; }
.medal-bronze { color: #cd7f32; }

.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; font-size: .75rem; font-weight: 800;
}
.rank-badge.gold   { background: rgba(245,158,11,.2); color: #f59e0b; border: 1px solid #f59e0b; }
.rank-badge.silver { background: rgba(148,163,184,.15); color: #94a3b8; border: 1px solid #94a3b8; }
.rank-badge.bronze { background: rgba(205,127,50,.15); color: #cd7f32; border: 1px solid #cd7f32; }
.rank-badge.plain  { color: var(--muted); }

.profile-link { color: var(--muted); text-decoration: none; font-size: .8rem; }
.profile-link:hover { color: var(--accent); }

.empty-state { padding: 2rem; text-align: center; color: var(--muted); font-size: .9rem; }

@media (max-width: 520px) {
  .col-club { display: none; }
  .col-pos  { display: none; }
}

@media (min-width: 600px) {
  body { padding-bottom: 0; }
  .page { max-width: 95%; margin: 0 auto; padding: 1.5rem; }
}

@media (min-width: 900px) {
  .page { padding: 2rem 1.5rem; }
}