.creator-stats-page {
	--cs-bg: #0d0716;
	--cs-purple: #7b2ff7;
	--cs-purple-light: #a259ff;
	--cs-purple-card: linear-gradient(135deg, #8a2be2, #6a1fc7);
	--cs-text: #f5f2fa;
	--cs-muted: #cdb8ec;

	background: var(--cs-bg);
	color: var(--cs-text) !important;
	padding: 40px 24px;
	border-radius: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	max-width: 1000px;
	margin: 0 auto;
}

/* Many WordPress themes style h1/h2/p/a globally with high specificity or
   !important, which can override plugin CSS (this is what causes the name
   to look "greyed out" — it's inheriting the theme's default heading color
   instead of the plugin's white). Force every text element in this widget
   back to the intended color regardless of theme. */
.creator-stats-page h1,
.creator-stats-page h2,
.creator-stats-page p,
.creator-stats-page span,
.creator-stats-page div {
	color: inherit;
}

.creator-stats-page .cs-header {
	text-align: center;
	margin-bottom: 24px;
}

.cs-photo-wrap {
	width: 140px;
	height: 140px;
	margin: 0 auto 16px;
	border-radius: 50%;
	border: 3px solid var(--cs-purple-light);
	overflow: hidden;
}
.cs-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cs-name {
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: 1px;
	margin: 8px 0 4px;
	color: var(--cs-text) !important;
}

.cs-email {
	color: var(--cs-muted) !important;
	margin: 0;
	font-size: 0.95rem;
}
.cs-email a {
	color: var(--cs-muted) !important;
	text-decoration: none;
}
.cs-email a:hover {
	text-decoration: underline;
}

.cs-badges {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.cs-badge {
	background: var(--cs-purple-card);
	padding: 10px 22px;
	font-weight: 700;
	font-size: 0.95rem;
}

.cs-body {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 32px;
}
@media (max-width: 720px) {
	.cs-body { grid-template-columns: 1fr; }
}

.cs-section { margin-bottom: 28px; }
.cs-section h2 {
	color: var(--cs-purple-light) !important;
	font-size: 1rem;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
}
.cs-section p { color: var(--cs-muted) !important; line-height: 1.6; margin: 0; }

.cs-collabs, .cs-contact {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cs-collabs li, .cs-contact li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	color: var(--cs-muted) !important;
}
.cs-collabs li:last-child, .cs-contact li:last-child { border-bottom: none; }
.cs-contact a, .cs-collabs a {
	color: var(--cs-text) !important;
	text-decoration: none;
}
.cs-contact a:hover, .cs-collabs a:hover { text-decoration: underline; }

.cs-stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
	margin-bottom: 32px;
}
@media (min-width: 500px) {
	.cs-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
.cs-stat-card {
	background: var(--cs-purple-card);
	border-radius: 12px;
	padding: 20px;
	text-align: center;
}
.cs-stat-label {
	font-size: 0.85rem;
	color: rgba(255,255,255,0.85) !important;
	margin-bottom: 10px;
}
.cs-stat-number {
	font-size: 2rem;
	font-weight: 800;
	color: #ffffff !important;
}

.cs-demographics h2 {
	color: var(--cs-purple-light) !important;
	text-align: center;
	margin-bottom: 20px;
}
.cs-demo-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.cs-demo-item {
	display: flex;
	align-items: center;
	gap: 14px;
}
.cs-donut {
	--pct: 50;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-shrink: 0;
	background: conic-gradient(var(--cs-purple-light) calc(var(--pct) * 1%), rgba(255,255,255,0.12) 0);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
	font-weight: 700;
}
.cs-donut span {
	background: var(--cs-bg);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cs-demo-label {
	color: var(--cs-muted) !important;
	font-size: 0.9rem;
	line-height: 1.3;
}

.cs-badge {
	color: #ffffff !important;
}