.clubs-page { --clubs-mark-a-bg: var(--color-clubs-tint); --clubs-mark-a-fg: var(--color-clubs);
                --clubs-mark-b-bg: var(--color-cup-tint); --clubs-mark-b-fg: var(--color-cup);
                --clubs-mark-c-bg: var(--color-calendar-tint); --clubs-mark-c-fg: var(--color-calendar);
                --clubs-mark-d-bg: var(--color-tab-rose-tint); --clubs-mark-d-fg: var(--color-tab-rose);
                --clubs-mark-e-bg: var(--color-account-tint); --clubs-mark-e-fg: var(--color-account);
                --clubs-mark-f-bg: var(--color-tab-cyan-tint); --clubs-mark-f-fg: var(--color-tab-cyan); }

  /* Nudged down 4px from the centre line so the numbers optically settle
     against the title rather than riding high */
  .clubs-stats { display: flex; gap: 32px; position: relative; top: 4px; }
  .clubs-stat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
  .clubs-stat-val { font-family: var(--font-family-mono); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--color-text-primary); }
  .clubs-stat-lbl { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }

  /* .input-group is width:100%; the side margins must come off it, otherwise the
     bar overhangs the 4px content inset the cards, toolbar and title share */
  .clubs-search { border-radius: 14px; overflow: hidden; margin: 0 4px 16px; width: calc(100% - 8px); }
  .clubs-search input:focus { box-shadow: none; }

  .clubs-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; padding: 0 4px 20px;
  }
  .clubs-tabs, .clubs-sort { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .clubs-sort { margin-left: auto; }
  .clubs-sort-label {
    font-family: var(--font-family-mono); font-size: 11px; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px;
  }
  .clubs-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: var(--radius-pill);
    border: 1px solid var(--color-border); background: transparent;
    font-size: 13px; font-weight: 600; color: var(--color-text-secondary);
    transition: all 120ms; cursor: pointer;
  }
  .clubs-pill:hover { border-color: var(--color-text-primary); color: var(--color-text-primary); }
  .clubs-pill.active { background: var(--color-text-primary); border-color: var(--color-text-primary); color: var(--color-white); }
  .clubs-pill-count { font-family: var(--font-family-mono); font-size: 11px; opacity: 0.7; }

  .clubs-grid { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 0 4px; }
  .club-row-card {
    background: var(--color-card-bg); border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card); padding: 16px 20px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
    text-decoration: none; color: inherit; transition: border-color 160ms, background 160ms;
  }
  .club-row-card:hover { border-color: var(--color-text-primary); background: var(--color-surface-muted); }
  .club-row-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .club-mark {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    display: grid; place-items: center; font-family: var(--font-family-mono);
    font-size: 13px; font-weight: 700; letter-spacing: -0.02em;
  }
  .club-mark-a { background: var(--clubs-mark-a-bg); color: var(--clubs-mark-a-fg); }
  .club-mark-b { background: var(--clubs-mark-b-bg); color: var(--clubs-mark-b-fg); }
  .club-mark-c { background: var(--clubs-mark-c-bg); color: var(--clubs-mark-c-fg); }
  .club-mark-d { background: var(--clubs-mark-d-bg); color: var(--clubs-mark-d-fg); }
  .club-mark-e { background: var(--clubs-mark-e-bg); color: var(--clubs-mark-e-fg); }
  .club-mark-f { background: var(--clubs-mark-f-bg); color: var(--clubs-mark-f-fg); }
  .club-row-info { min-width: 0; }
  .club-row-name {
    font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0;
    color: var(--color-text-primary); overflow-wrap: break-word;
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  }
  .club-row-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .club-row-pin { color: var(--color-cup); font-size: 0.8rem; flex-shrink: 0; }
  .club-row-badge {
    display: inline-flex; align-items: center; flex-shrink: 0;
    padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600;
    background: var(--color-clubs-tint); color: var(--color-clubs);
  }
  .club-row-count { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
  .club-row-count b { font-family: var(--font-family-mono); font-size: 18px; font-weight: 700; color: var(--color-text-primary); line-height: 1; }
  .club-row-count span { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

  .clubs-empty {
    grid-column: 1 / -1; text-align: center; padding: 64px 20px; color: var(--color-text-muted);
    border: 1px dashed var(--color-border); border-radius: var(--radius-card); margin: 0 4px;
  }
  .clubs-empty i { font-size: 2rem; }
  .clubs-empty p { margin-top: 12px; }
  .clubs-empty--initial { border-style: solid; }

  .clubs-cta {
    margin: 28px 4px 0; padding: 28px 32px; border-radius: var(--radius-card);
    background: var(--color-card-bg); border: 1px solid var(--color-card-border);
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
    transition: border-color 160ms;
  }
  .clubs-cta:hover { border-color: var(--color-text-primary); }
  .clubs-cta-text {
    font-family: var(--font-family-display); font-size: 24px; font-weight: 700;
    letter-spacing: -0.02em; color: var(--color-text-primary);
  }
  .clubs-cta-text i { font-family: var(--font-family-accent); font-weight: 400; font-style: italic; }
  .clubs-cta-btn { flex-shrink: 0; }