/* Цвет должности используется у ника, в бейдже и на обложке профиля. */
:root {
  --r-junior_admin: #ffa891;
  --r-senior_curator: #f3a9e7;
  --r-curator: #d7a5f2;
  --r-junior_curator: #cbbce9;
  --r-head_moderator: #72ddd9;
  --r-senior_moderator: #82caf3;
  --r-junior_moderator: #b3cfea;
}

.r-junior_admin, .role-junior_admin { --c: var(--r-junior_admin); }
.r-senior_curator, .role-senior_curator { --c: var(--r-senior_curator); }
.r-curator, .role-curator { --c: var(--r-curator); }
.r-junior_curator, .role-junior_curator { --c: var(--r-junior_curator); }
.r-head_moderator, .role-head_moderator { --c: var(--r-head_moderator); }
.r-senior_moderator, .role-senior_moderator { --c: var(--r-senior_moderator); }
.r-junior_moderator, .role-junior_moderator { --c: var(--r-junior_moderator); }
.r-user { --c: var(--text); }
.uname { color: var(--c, var(--text)); }

.role {
  white-space: normal;
  text-transform: none;
  letter-spacing: .01em;
  line-height: 1.4;
}

.member-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  margin-bottom: 20px;
}
.member-filters .field { flex: 1 1 190px; min-width: 0; margin: 0; }
.member-filters .field:first-child { flex-grow: 2; }
.member-filters .field > span { color: var(--text-2); font-size: 13px; }
.member-filters .input, .member-filters .btn { min-height: 42px; }
.admin-role-select { min-width: 200px; }

@media (max-width: 550px) {
  .member-filters .field { flex-basis: 100%; }
  .member-filters .btn { flex-grow: 1; }
}