@layer pages {
.app-profile-card-container {
  margin-top: calc(var(--app-spacing) * 2);
}

.app-profile-card {
  border: 1px solid var(--app-border);
  background: var(--app-card-background-color);
  overflow: hidden;
  border-radius: var(--app-border-radius);
  margin-bottom: var(--app-spacing);
}

.app-profile-header {
  display: flex;
  align-items: flex-start;
  padding: 0 calc(var(--app-spacing) * 1) 0 calc(var(--app-spacing) * 1);
  flex-direction: column;
  justify-content: center;
  margin-top: -42px;
  z-index: 1;
  position: relative;
}

.app-profile-meta h2 {
  margin: 0;
}

.app-profile-meta p {
  margin: 0.25rem 0 0;
  color: var(--app-muted-color);
}

.app-profile-body {
  border: 1px solid var(--app-border);
  background: var(--app-card-background-color);
  overflow: hidden;
  border-radius: var(--app-border-radius);
  margin-bottom: var(--app-spacing);
}

.app-profile-body [data-tab-panel] {
  padding-inline: var(--app-spacing);
}

.app-profile-body [data-tab-panel]:not(:has(p)) {
  padding-block-end: var(--app-spacing);
}

.app-profile-table {
  width: 100%;
  border: 1px solid var(--app-border);
  border-radius: var(--app-border-radius);
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  overflow: hidden;
}

.app-profile-table th,
.app-profile-table td {
  padding: 0.55rem 0.75rem;
  background: transparent;
  border-bottom: 1px solid var(--app-border);
  text-align: left;
  vertical-align: top;
}

.app-profile-table thead th {
  font-weight: 600;
}

.app-profile-table tr:last-child td {
  border-bottom: 0;
}
}