.members-page-title{
  align-items:flex-end;
}

.member-total{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}

.member-grid-v2{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-content:start;
}

.member-grid-v2 .member-card-v2{
  min-width:0;
  min-height:132px;
  padding:17px;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) 18px;
  gap:13px;
  align-items:center;
  text-align:left;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.member-grid-v2 .member-card-v2:hover,
.member-grid-v2 .member-card-v2:focus-visible{
  border-color:color-mix(in srgb,var(--accent),var(--line) 58%);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
  transform:translateY(-1px);
}

.member-grid-v2 .member-card-v2:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.member-avatar{
  width:62px;
  height:62px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:3px solid var(--card);
  border-radius:50%;
  background:linear-gradient(135deg,#f58745,#c64810);
  color:#fff;
  font-size:23px;
  font-weight:850;
  box-shadow:0 0 0 1px var(--line),0 8px 18px rgba(15,23,42,.12);
}

.member-avatar img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.member-info,
.member-identity,
.member-identity strong,
.member-identity small{
  min-width:0;
  display:block;
}

.member-identity strong,
.member-identity small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.member-identity strong{
  color:var(--text);
  font-size:14px;
}

.member-identity small{
  margin-top:1px;
  color:var(--muted);
  font-size:10px;
}

.member-ranks{
  min-width:0;
  margin-top:7px;
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}

.member-rank{
  min-width:0;
  max-width:100%;
  min-height:24px;
  padding:3px 7px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  border:1px solid color-mix(in srgb,var(--rank-color),transparent 72%);
  border-radius:7px;
  background:color-mix(in srgb,var(--rank-color),transparent 91%);
  color:var(--rank-color);
  font-size:10px;
  font-weight:800;
  line-height:1.2;
}

.member-rank>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.member-rank>i,
.member-rank>img{
  width:15px;
  height:15px;
  flex:0 0 15px;
  display:grid;
  place-items:center;
  object-fit:contain;
}

.member-stats{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:5px 11px;
}

.member-stats small{
  color:var(--muted);
  font-size:10px;
  white-space:nowrap;
}

.member-stats i{
  width:13px;
  color:var(--accent);
  text-align:center;
}

.member-arrow{
  align-self:center;
  color:var(--muted);
  font-size:12px;
  transition:color .18s ease,transform .18s ease;
}

.member-card-v2:hover .member-arrow,
.member-card-v2:focus-visible .member-arrow{
  color:var(--accent);
  transform:translateX(2px);
}

@media(max-width:980px){
  .member-grid-v2{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px){
  .members-page-title{
    align-items:flex-start;
  }

  .member-total{
    margin-top:9px;
  }

  .member-grid-v2{
    grid-template-columns:1fr;
    gap:10px;
  }

  .member-grid-v2 .member-card-v2{
    min-height:118px;
    padding:14px;
    grid-template-columns:55px minmax(0,1fr) 15px;
    gap:11px;
  }

  .member-avatar{
    width:55px;
    height:55px;
    font-size:20px;
  }
}