.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-counts>div[data-subscription-stat=free]{order:1}
.app-shell[data-page=members] .membership-counts>div[data-subscription-stat=active]{order:3}
.app-shell[data-page=members] .membership-counts>div:nth-child(1){order:4}
.app-shell[data-page=members] .membership-counts>div:nth-child(3){order:5}
.app-shell[data-page=members] .membership-counts>div[data-subscription-stat=expiring]{order:6}
.app-shell[data-page=members] .membership-counts>div[data-subscription-stat=expired]{order:7}
.app-shell[data-page=members] .membership-counts>div:nth-child(2){order:8}
.app-shell[data-page=members] .membership-counts>div:nth-child(4){order:2}
.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-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-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}
}
/* Shared membership label palette: change a tone here to update cards and row badges together. */
.app-shell[data-page=members]{
  --membership-label-positive:var(--green);
  --membership-label-danger:var(--red);
  --membership-label-warning:var(--amber);
  --membership-label-info:#69b1ff;
  --membership-label-free:#c4a7ff;
  --membership-label-neutral:var(--muted);
}
.app-shell[data-page=members] :is(.membership-counts>div>span,.membership-person-title>:is([data-status],[data-subscription-state],[data-member-label])){
  /* Keep the shared palette authoritative over legacy forced TESTER colors. */
  color:var(--membership-label-color,var(--membership-label-neutral))!important;
  background:color-mix(in srgb,var(--membership-label-color,var(--membership-label-neutral)) 12%,transparent)!important;
}
.app-shell[data-page=members] :is(
  .membership-counts>[data-subscription-stat=free]>span,
  .membership-person-title>[data-subscription-state=free]
){--membership-label-color:var(--membership-label-free)}
.app-shell[data-page=members] :is(
  .membership-counts>div:is(:nth-child(1),:nth-child(4),[data-subscription-stat=active])>span,
  .membership-person-title>:is([data-subscription-state=active],[data-subscription-state=trial],[data-status=used]),
  .membership-person-title:has(>[data-subscription-state])>[data-status=active]
){--membership-label-color:var(--membership-label-positive)}
.app-shell[data-page=members] :is(
  .membership-counts>div:is(:nth-child(2),[data-subscription-stat=expired])>span,
  .membership-person-title>:is([data-status=blocked],[data-status=revoked],[data-status=expired],[data-subscription-state=expired],[data-subscription-state=unpaid],[data-subscription-state=cancelled])
){--membership-label-color:var(--membership-label-danger)}
.app-shell[data-page=members] :is(
  .membership-counts>[data-subscription-stat=expiring]>span,
  .membership-person-title>:is([data-subscription-state=expiring],[data-member-label=TESTER])
){--membership-label-color:var(--membership-label-warning)}
.app-shell[data-page=members] :is(
  .membership-counts>div:nth-child(3)>span,
  .membership-person-title>[data-subscription-state=scheduled],
  .membership-person-title:not(:has(>[data-subscription-state]))>[data-status=active]
){--membership-label-color:var(--membership-label-info)}
/* End shared membership label palette. */