.nocturne-members {
  --_members-accent: var(--nocturne-light);
  display: grid;
  gap: 18px;
  width: 100%;
  color: var(--nocturne-muted);
}

.nocturne-members *, .nocturne-members *::before, .nocturne-members *::after { box-sizing: border-box; }
.nocturne-members__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border: 1px solid var(--nocturne-panel); border-radius: 8px; background: linear-gradient(var(--nocturne-panel), var(--nocturne-deep)); color: var(--nocturne-muted); }
.nocturne-members__breadcrumb a { display: inline-flex; align-items: center; gap: 8px; color: var(--_members-accent); }
.nocturne-members__heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--nocturne-panel); border-radius: 8px; background: linear-gradient(var(--nocturne-panel), var(--nocturne-deep)); }
.nocturne-members__heading h1 { display: flex; align-items: center; gap: 12px; margin: 0; font: inherit; font-size: 1.25rem; font-weight: 700; color: var(--nocturne-light); }
.nocturne-members__heading h1 > :is(i, svg) { color: var(--_members-accent); }
.nocturne-members__count { padding: 3px 12px; border: 1px solid var(--nocturne-edge); border-radius: 20px; background: var(--nocturne-deep); color: var(--_members-accent); font-weight: 700; }
.nocturne-members__description { margin: 0; color: var(--nocturne-muted); }
.nocturne-members__toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--nocturne-panel); border-radius: 8px; background: var(--nocturne-deep); }
.nocturne-members__search, .nocturne-members__sort { display: flex; align-items: stretch; gap: 8px; margin: 0; min-width: 0; }
.nocturne-members__search { flex: 1 1 230px; max-width: 380px; }
.nocturne-members__sort { flex: 0 1 auto; }
.nocturne-members input[type="search"], .nocturne-members select { min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid var(--nocturne-edge); border-radius: 5px; background-color: var(--nocturne-deep); color: var(--nocturne-light); font: inherit; }
.nocturne-members input[type="search"] { width: 100%; }
.nocturne-members select { max-width: 100%; padding-right: 34px; }
.nocturne-members button { min-height: 42px; padding: 9px 14px; border: 1px solid var(--nocturne-edge); border-radius: 5px; background: linear-gradient(var(--nocturne-panel), var(--nocturne-deep)); box-shadow: 0 1px 3px rgb(var(--nocturne-void-rgb) / 0.5333); color: var(--nocturne-light); font: inherit; font-weight: 600; cursor: pointer; }
.nocturne-members button:hover { border-color: var(--_members-accent); color: var(--_members-accent); }
.nocturne-members__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.nocturne-member { min-width: 0; padding: 20px; overflow: hidden; border: 1px solid var(--nocturne-panel); border-radius: 8px; background: linear-gradient(140deg, var(--nocturne-deep), var(--nocturne-deep) 65%); box-shadow: inset 0 1px rgb(var(--nocturne-light-rgb) / 0.01961); }
.nocturne-member__identity { display: flex; align-items: center; gap: 16px; }
.nocturne-member__avatar { display: flex; flex: 0 0 72px; align-items: center; justify-content: center; width: 72px; height: 72px; overflow: hidden; border: 1px solid var(--nocturne-edge); border-radius: 8px; background: var(--nocturne-void); color: var(--_members-accent); font-size: 1.75rem; }
.nocturne-member__avatar img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.nocturne-member__name { min-width: 0; overflow-wrap: anywhere; }
.nocturne-member__name h2 { margin: 0 0 4px; font: inherit; font-size: 1.125rem; font-weight: 700; color: var(--nocturne-light); }
.nocturne-member__name h2 a { color: inherit; }
.nocturne-member__name p { margin: 0 0 8px; color: var(--nocturne-muted); font-size: .875rem; line-height: 1.4; }
.nocturne-member__status { display: inline-flex; align-items: center; gap: 6px; color: var(--nocturne-muted); font-size: .8125rem; }
.nocturne-member__status::before { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--nocturne-edge); }
.nocturne-member__status.is-online { color: var(--nocturne-muted); }
.nocturne-member__status.is-online::before { background: var(--nocturne-muted); }
.nocturne-member__details { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--nocturne-panel); }
.nocturne-member__details > div { min-width: 0; }
.nocturne-member__details dt { margin: 0 0 4px; color: var(--nocturne-muted); font-size: .8125rem; }
.nocturne-member__details dd { margin: 0; font-size: .9375rem; overflow-wrap: anywhere; }
.nocturne-member__details > :last-child { text-align: right; }
.nocturne-members__empty { padding: 44px 20px; border: 1px solid var(--nocturne-panel); border-radius: 8px; background: var(--nocturne-deep); color: var(--nocturne-muted); text-align: center; }
.nocturne-members__empty > :is(i, svg) { color: var(--_members-accent); font-size: 2rem; }
.nocturne-members__empty p { margin: 14px 0 0; }
.nocturne-members__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--nocturne-panel); border-radius: 8px; background: linear-gradient(var(--nocturne-deep), var(--nocturne-deep)); }
.nocturne-members__page-number { margin: 0; color: var(--nocturne-muted); }
.nocturne-members .members-list-pagination { margin: 0; max-width: 100%; }
.nocturne-members .members-list-pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nocturne-members .members-list-pagination li { margin: 0; padding: 0; list-style: none; }
.nocturne-members .members-list-pagination :is(a, span.page-numbers, span.page-link, .current, [aria-current="page"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid var(--nocturne-edge);
  border-radius: 5px;
  background: linear-gradient(var(--nocturne-panel), var(--nocturne-deep));
  box-shadow: 0 1px 3px rgb(var(--nocturne-void-rgb) / 0.5333);
  color: var(--nocturne-light);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.nocturne-members .members-list-pagination a:hover { border-color: var(--_members-accent); color: var(--_members-accent); }
.nocturne-members .members-list-pagination :is(.current, [aria-current="page"], .active > a, .active > span) { border-color: var(--_members-accent); background: linear-gradient(var(--nocturne-panel), var(--nocturne-deep)); color: var(--_members-accent); box-shadow: inset 0 0 0 1px var(--_members-accent), 0 1px 3px rgb(var(--nocturne-void-rgb) / 0.5333); }
.nocturne-members .members-list-pagination :is(.disabled > a, .disabled > span, [aria-disabled="true"]) { border-color: var(--nocturne-panel); background: var(--nocturne-deep); box-shadow: none; color: var(--nocturne-edge); cursor: default; }
.nocturne-members .members-list-pagination :is(.dots, .ellipsis) { min-width: 24px; padding: 9px 4px; border-color: transparent; background: transparent; box-shadow: none; color: var(--nocturne-muted); }
.nocturne-members a { text-decoration: none; }
.nocturne-members a:hover { color: var(--_members-accent); }
.nocturne-members :is(a, button, input, select):focus-visible { outline: 2px solid var(--_members-accent); outline-offset: 3px; }
.nocturne-members__sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (max-width: 600px) {
  .nocturne-members__toolbar { align-items: stretch; flex-direction: column; }
  .nocturne-members__search, .nocturne-members__sort { flex: 0 1 auto; width: 100%; max-width: none; }
  .nocturne-members__sort select { flex: 1; width: 100%; }
  .nocturne-member { padding: 16px; }
}