html, body { min-height: 100%; font-size: 15px; }

    .topbar {
      align-items: center; background: var(--surface);
      border-bottom: 1px solid var(--border);
      /* right padding clears the two fixed top-right controls (auth topbar + theme menu) */
      display: flex; gap: 12px; padding: 12px 240px 12px 24px;
    }
    .topbar-logo {
      color: var(--primary); font-family: var(--font-display);
      font-size: 1.5rem; letter-spacing: .05em; text-decoration: none;
    }
    .topbar-logo:hover { text-decoration: none; }
    .topbar-spacer { flex: 1; }
    .topbar-link { color: var(--muted); font-size: .85rem; }

    .page { max-width: 780px; margin: 0 auto; padding: 40px 24px; }
    .page-title {
      font-family: var(--font-display); font-size: 2.2rem;
      letter-spacing: .05em; margin-bottom: 4px; color: var(--rank-gold);
    }
    .page-sub { color: var(--muted); font-size: .88rem; margin-bottom: 20px; }

    /* ── Filters ────────────────────────────────────────── */
    .filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
    .seg { display: inline-flex; border: 1.5px solid var(--border); border-radius: var(--r); overflow: hidden; }
    .seg button {
      background: transparent; color: var(--muted); border: none;
      font-family: var(--font-body); font-size: .9rem; font-weight: 600;
      padding: 8px 18px; cursor: pointer;
    }
    .seg button[aria-pressed="true"] { background: var(--primary); color: var(--btn-primary-text); }
    select {
      padding: 8px 12px; border-radius: var(--r); border: 1.5px solid var(--border);
      background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: .9rem;
    }
    select:focus { outline: none; border-color: var(--primary); }
    .hidden { display: none; }

    .explainer {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
      color: var(--muted); font-size: .82rem; line-height: 1.5; padding: 10px 14px; margin-bottom: 24px;
    }

    /* ── Table ──────────────────────────────────────────── */
    .standings-table { width: 100%; border-collapse: collapse; }
    .standings-table th {
      color: var(--muted); font-size: .75rem; letter-spacing: .08em;
      text-transform: uppercase; text-align: left;
      padding: 0 12px 10px; font-weight: 600;
    }
    .standings-table th.num { text-align: right; }
    .standings-table td {
      padding: 14px 12px; border-top: 1px solid var(--border);
      vertical-align: middle;
    }
    .standings-table td.num { text-align: right; }

    .rank-cell { color: var(--muted); font-size: .9rem; min-width: 2.5ch; font-weight: 700; }
    .rank-1 { color: var(--rank-gold); }

    .name-cell { font-weight: 600; font-size: 1rem; }
    .wins-cell  { color: var(--primary); font-weight: 700; }
    .rate-cell  { color: var(--success); font-weight: 600; }
    .avg-cell   { color: var(--muted); }
    .played-cell { color: var(--muted); }

    .empty-state { text-align: center; padding: 72px 24px; color: var(--muted); }
    .empty-state .big { font-size: 3rem; margin-bottom: 12px; }
    .empty-state .msg { font-size: 1rem; }

    .loading { text-align: center; padding: 60px; color: var(--muted); }