.profile-card {
	line-height: 2rem;
	padding: 2px;
	margin: 0;
	display: flex;
	align-items: center;
	flex-direction: row;
	/* box-shadow: 5px 5px 10px var(--shadow-dark),
    -2px -2px 8px -5px var(--shadow-light); */
	border-radius: 8px;
	overflow: hidden;
	white-space: nowrap;
	transition: 0.2s;
}
.profile-card:hover {
	/* box-shadow: 5px 5px 10px var(--shadow-dark),
  -2px -2px 8px -5px var(--shadow-light); */
	/* transform: scale(103%); */
}

.profile-card .profile-icon {
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	object-fit: contain;
	padding: 4px;
	flex-shrink: 0;
	cursor: pointer;
	color: var(--dark-text-color);
}

.profile-card .profile-card-content {
	color: var(--secondary-text-color);
	position: relative;
	padding: 0px 7px;
	/* background: linear-gradient(
		145deg,
		rgba(0, 0, 0, 0.03) 0%,
		var(--main-background) 30%,
		var(--main-background) 70%,
		rgba(255, 255, 255, 0.1) 100%
	); */
}

.profile-card .profile-card-content:before {
	/* box-shadow:
		inset 2.5px 1.5px 4px var(--shadow-dark),
		inset -1px -1px 10px -5px var(--shadow-light); */
	width: 100%;
	height: 100%;
	content: "";
	position: absolute;
	pointer-events: none;
	top: 0;
	left: 0;
}

#profile-cards {
	margin-top: 2rem;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
	width: 80%;
}

/* Icons are tight-cropped at build time by scripts/normalize-icons.ts, so
   no per-icon sizing overrides are needed — the base .profile-icon rule
   above produces uniform optical sizing for every icon. */
.card-my-age {
	color: #666;
	font-weight: 600;
}
.card-lines {
	color: #666;
	font-weight: 600;
}