.user-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  max-width: 500px;
  width: 100%;
  background-color: var(--background-color-base);
  border: var(--border-width-base) solid var(--border-color-subtle);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-40);
}

.user-card .user-profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
}

.user-card .user-profile-display-name {
  font-size: var(--font-size-xx-large-24);
  font-family: var(--typography-font-sans);
  color: var(--color-base);
  margin: 0;
  text-align: center;
}

.user-card .user-profile-username {
  font-size: var(--font-size-medium-16);
  color: var(--color-subtle);
  margin: 0;
}

.user-card .user-profile-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-8);
}

.user-card .user-profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
}

.user-card .user-profile-header-ruled {
  padding-block-end: var(--spacing-16);
  border-block-end: var(--border-width-base) solid var(--border-color-subtle);
}

.user-card .user-profile-work {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.user-card .user-profile-stat-number {
  font-size: var(--font-size-medium-16);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-base);
  display: block;
}

.user-card .user-profile-stat-label {
  font-size: var(--font-size-medium-16);
  color: var(--color-subtle);
}

.user-card .user-profile-stat-item {
  text-align: center;
  flex: 1;
}

.user-card .user-profile-stat-divider {
  width: 1px;
  height: 40px;
  background-color: var(--border-color-subtle);
}

.user-card .user-profile-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.user-card .user-profile-signout-btn {
  display: inline-block;
  padding: var(--spacing-8);
  line-height: var(--line-height-small-22);
  background-color: var(--background-color-red);
  color: var(--color-on-solid);
  border: var(--border-width-base) solid var(--border-color-red);
  border-radius: var(--border-radius-base);
  font-size: var(--font-size-medium-16);
  font-weight: var(--font-weight-semi-bold);
  font-family: var(--font-family-base);
  text-decoration: var(--text-decoration-none);
  cursor: var(--cursor-base-hover);
  transition: var(--transition-property-base) var(--transition-duration-base) var(--transition-timing-function-system);
}

.user-card .user-profile-signout-btn:hover {
  background-color: var(--background-color-red-hover) !important;
}

.user-card .user-profile-actions {
  display: flex;
  gap: var(--spacing-12);
  justify-content: center;
}

.user-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-24);
  flex-direction: column;
  gap: var(--spacing-16);
}

.user-profile-main {
  margin: 0;
  padding: 0;
  padding-block-start: var(--spacing-16);
}