.user-admin {
  --user-admin-border: #d9d8e2;
  --user-admin-ink: #24222d;
  --user-admin-muted: #64616e;
  --user-admin-surface: #fff;
  color: var(--user-admin-ink);
  display: grid;
  gap: 1rem;
}

.user-admin h2,
.user-admin p {
  margin: 0;
}

.user-admin__intro {
  color: var(--user-admin-muted);
}

.user-admin__status,
.user-admin__error {
  border-radius: .75rem;
  padding: .75rem 1rem;
}

.user-admin__status {
  background: #f1f0f6;
}

.user-admin__error {
  background: #fff0f0;
  color: #7c1f1f;
}

.user-admin__table-region {
  border: 1px solid var(--user-admin-border);
  border-radius: 1rem;
  max-width: 100%;
  overflow: auto;
}

.user-admin__table-region:focus-visible {
  outline: 3px solid #5b50b6;
  outline-offset: 3px;
}

.user-admin table {
  background: var(--user-admin-surface);
  border-collapse: collapse;
  min-width: 54rem;
  width: 100%;
}

.user-admin caption {
  left: -10000px;
  position: absolute;
}

.user-admin th,
.user-admin td {
  border-bottom: 1px solid var(--user-admin-border);
  padding: .8rem 1rem;
  text-align: left;
  vertical-align: middle;
}

.user-admin tbody tr:last-child td {
  border-bottom: 0;
}

.user-admin code {
  font-size: .875rem;
}

.user-admin__state {
  border-radius: 999px;
  display: inline-flex;
  font-weight: 700;
  padding: .3rem .65rem;
}

.user-admin__state--active {
  background: #e7f6ed;
  color: #185d36;
}

.user-admin__state--suspended {
  background: #fff0d9;
  color: #784b00;
}

.user-admin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: flex-end;
}

.user-admin button {
  background: #302a61;
  border: 0;
  border-radius: .75rem;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 44px;
  padding: .65rem 1rem;
}

.user-admin button:disabled {
  cursor: wait;
  opacity: .55;
}

.user-admin button:focus-visible {
  outline: 3px solid #5b50b6;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .user-admin *,
  .user-admin *::before,
  .user-admin *::after {
    scroll-behavior: auto !important;
  }
}