.app-shell[data-page=members] .membership-admin .membership-counts{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(max-content,1fr);gap:8px;overflow-x:auto;min-width:0;scrollbar-width:thin}
.app-shell[data-page=members] .membership-admin .membership-counts>div{aspect-ratio:1;min-width:96px;min-height:0;align-self:start;justify-content:center;align-items:center;text-align:center;padding:8px 4px;gap:16px}
.app-shell[data-page=members] .membership-counts>div>span{white-space:nowrap}
.app-shell[data-page=members] .membership-admin .membership-counts>div>strong{font-size:calc(24px * var(--font-scale));line-height:1.2}
.app-shell[data-page=members] .membership-admin .membership-counts>div[data-subscription-stat=none]{display:none}
.app-shell[data-page=members] .membership-overview{grid-template-columns:minmax(0,1fr)}
.app-shell[data-page=members] .membership-management{grid-column:1}
.app-shell[data-page=members] .membership-counts>div[data-subscription-stat=expired]>span{color:var(--red);background:rgb(255 91 97 / 12%)}
.app-shell[data-page=members] .membership-counts>div[data-subscription-stat=expiring]>span{color:var(--amber);background:rgb(228 188 104 / 12%)}
.app-shell[data-page=members] .membership-counts>div[data-subscription-stat=none]>span{color:var(--muted);background:var(--surface-raised)}
.app-shell[data-page=members] .membership-directory>.membership-toolbar,
.app-shell[data-page=members] .membership-management>.panel>.panel-heading,
.app-shell[data-page=members] .membership-admin>.panel[aria-labelledby=signup-requests-title]>.panel-heading{background:#19181c}
.app-shell[data-page=members] .membership-directory>.membership-toolbar{align-items:flex-start}
.app-shell[data-page=members] .membership-management>.panel>.panel-heading,
.app-shell[data-page=members] .membership-admin>.panel[aria-labelledby=signup-requests-title]>.panel-heading{border-bottom:1px solid var(--line)}
.app-shell[data-page=members] .membership-directory .membership-refresh{display:none}
.app-shell[data-page=members] .membership-tabs button{height:var(--internal-filter-control-height,42px);min-height:40px;display:inline-flex;align-items:center;justify-content:center}
.app-shell[data-page=members] .membership-directory .membership-search{flex:1 1 520px;justify-content:flex-end;align-items:center}
.app-shell[data-page=members] .membership-directory #membership-search{flex:1 1 220px;width:auto;max-width:340px}
.app-shell[data-page=members] .membership-subscription-filter{width:190px;max-width:100%}
.app-shell[data-page=members] .membership-data-feedback{padding:12px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.app-shell[data-page=members] .membership-person-title>.tag[data-subscription-state=active],.app-shell[data-page=members] .membership-person-title>.tag[data-subscription-state=free]{color:var(--green)}
.app-shell[data-page=members] .membership-person-title>.tag:is([data-subscription-state=expired],[data-subscription-state=unpaid]){color:var(--red)}
.app-shell[data-page=members] .membership-person-title>.tag[data-subscription-state=expiring]{color:var(--amber)}
.app-shell[data-page=members] .membership-person-title>.tag[data-subscription-state=unavailable]{color:var(--muted)}
.app-shell[data-page=members] .membership-subscription-details{display:block;margin-top:4px}
@media(max-width:767px){
  .app-shell[data-page=members] .membership-directory .membership-search{flex-basis:100%;justify-content:flex-start}
  .app-shell[data-page=members] .membership-directory #membership-search{flex-basis:100%;width:100%;max-width:none}
  .app-shell[data-page=members] .membership-directory .membership-search>.ui-select{flex:1 1 160px;width:auto}
}
.app-shell[data-page=members] .member-invite-form,.app-shell[data-page=members] .member-invite-form+small{width:100%;max-width:none}
.app-shell[data-page=members] .membership-subscription-filter .ui-select-trigger{height:42px}

.app-shell[data-page=members] .membership-management>.panel>.member-body{row-gap:12px}
.app-shell[data-page=members] .member-invite-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto;grid-template-rows:auto;align-items:end}
.app-shell[data-page=members] .member-invite-form>.member-field:first-child{grid-column:1;grid-row:1}
.app-shell[data-page=members] .member-invite-form>.member-field:nth-child(2){grid-column:2;grid-row:1}
.app-shell[data-page=members] .member-invite-form>.action-result{align-self:end}
.app-shell[data-page=members] .member-invite-form>.action-result:nth-child(3){grid-column:3;grid-row:1}
.app-shell[data-page=members] .member-invite-form>.action-result:nth-child(4){grid-column:4;grid-row:1}
.app-shell[data-page=members] .member-invite-form+small{text-align:left}
@media(max-width:767px){
  .app-shell[data-page=members] .member-invite-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell[data-page=members] .member-invite-form>.action-result:nth-child(3){grid-column:1;grid-row:2}
  .app-shell[data-page=members] .member-invite-form>.action-result:nth-child(4){grid-column:2;grid-row:2}
}
@media(max-width:479px){
  .app-shell[data-page=members] .member-invite-form>.member-field:first-child{grid-column:1 / -1;grid-row:1}
  .app-shell[data-page=members] .member-invite-form>.member-field:nth-child(2){grid-column:1 / -1;grid-row:2}
  .app-shell[data-page=members] .member-invite-form>.action-result:nth-child(3){grid-column:1;grid-row:3}
  .app-shell[data-page=members] .member-invite-form>.action-result:nth-child(4){grid-column:2;grid-row:3}
}