/* Club-specific correction: match the existing direct-add card surface. */
@media (min-width: 769px) {
  html body #app.clubScreen:has(#clubMemberBox) [data-club-workflow-card] {
    border: 1px solid #dce6ef !important;
    border-radius: 6px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html body #app.clubScreen #clubMemberBox .clubMemberEntry {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  html body #app.clubScreen #clubMemberBox .clubMemberEntry > * {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px;
    margin: 0 !important;
  }
  html body #app.clubScreen #clubMemberBox .clubMemberEntry > :is(#cmGrade, #cmClass, #cmNo, #cmGender) {
    grid-row: 1;
    grid-column: span 3;
  }
  html body #app.clubScreen #clubMemberBox .clubMemberEntry > :is(#cmName, #cmPhone, #addClubMemberBtn) {
    grid-row: 2;
    grid-column: span 4;
  }
  html body #app.clubScreen #clubMemberBox .clubMemberEntry:not(:has(#cmPhone)) > #cmName {
    grid-column: span 8;
  }
  html body #app.clubScreen #clubMemberBox .clubSchoolRosterImportRow {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 8px !important;
  }
  html body #app.clubScreen #clubMemberBox .clubSchoolRosterImportRow > :is(label, button) {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body #app.clubScreen #clubMemberBox .clubSchoolRosterHint {
    grid-column: 1 / -1;
  }
  html body #app.clubScreen #clubMemberBox .clubRosterGradePicker {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
  }
  html body #app.clubScreen #clubMemberBox .clubRosterGradePicker > span {
    white-space: nowrap;
  }
  html body #app.clubScreen #clubMemberBox .clubRosterGradePicker > select {
    width: 100% !important;
    min-width: 80px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body #app.clubScreen #clubMemberBox #clubImportBox:not(:empty),
  html body #app.clubScreen #clubMemberBox #clubImportBox .studentPickGrid {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html body #app.clubScreen #clubMemberBox #clubImportBox .studentPickGrid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    gap: 8px;
  }
  html body #app.clubScreen #clubMemberBox #clubImportBox .clubImportModalToolbar {
    flex-wrap: wrap;
  }
}

html body :is(#app, #mobileClubRoot) .clubOverallHeader p {
  text-align: center !important;
  text-align-last: center !important;
}