.main-container-index {
	/* max-width: 1400px; */
	margin: 0 auto;
	/* padding: 0 2rem; */
	background: var(--background-primary);
}

.hero-section {
	background: linear-gradient(90deg, #f0f4ff 0%, #eaf0fa 100%);
	padding: 48px 0 32px 0;
	border-radius: 0 0 18px 18px;
	box-shadow: 0 2px 16px rgba(16, 57, 162, 0.04);
	min-height: calc(100vh - var(--header-height));
	display: flex;
	flex-direction: column; /* use column so vertical centering is via main axis */
	justify-content: center; /* vertically center the .row within the section */
	/* CTA theme vars (scoped to hero only to avoid global impact) */
	--adm-radius-s: 4px;
	--adm-radius-m: 8px;
	--adm-radius-l: 12px;
	--adm-font-size-1: 9px;
	--adm-font-size-2: 10px;
	--adm-font-size-3: 11px;
	--adm-font-size-4: 12px;
	--adm-font-size-5: 13px;
	--adm-font-size-6: 14px;
	--adm-font-size-7: 15px;
	--adm-font-size-8: 16px;
	--adm-font-size-9: 17px;
	--adm-font-size-10: 18px;
	--adm-color-primary: #1677ff;
	--adm-color-success: #00b578;
	--adm-color-warning: #ff8f1f;
	--adm-color-danger: #ff3141;
	--adm-color-yellow: #ff9f18;
	--adm-color-orange: #ff6430;
	--adm-color-wathet: #e7f1ff;
	--adm-color-text: #333333;
	--adm-color-text-secondary: #666666;
	--adm-color-weak: #999999;
	--adm-color-light: #cccccc;
	--adm-color-border: #eeeeee;
	--adm-color-background: #ffffff;
	--adm-color-highlight: var(--adm-color-danger);
	--adm-color-white: #ffffff;
	--adm-color-box: #f5f5f5;
	--adm-color-text-light-solid: var(--adm-color-white);
	--adm-color-text-dark-solid: #000000;
	--adm-color-fill-content: var(--adm-color-box);
	--adm-font-size-main: var(--adm-font-size-5);
	--adm-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI,
		Arial, Roboto, "PingFang SC", "miui", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
	--theme-color: #3477eb;
	--theme-color-9: rgba(52, 119, 235, 0.9);
	--theme-color-8: rgba(52, 119, 235, 0.8);
	--theme-color-7: rgba(52, 119, 235, 0.7);
	--theme-color-6: rgba(52, 119, 235, 0.6);
	--theme-color-5: rgba(52, 119, 235, 0.5);
	--theme-color-4: rgba(52, 119, 235, 0.4);
	--theme-color-3: rgba(52, 119, 235, 0.3);
	--theme-color-2: rgba(52, 119, 235, 0.2);
	--theme-color-1: rgba(52, 119, 235, 0.1);
	--theme-color-0: rgba(52, 119, 235, 0);
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem;
}

.hero-section .row.align-items-center {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: center;
}

.hero-section > .row.align-items-center {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.col-lg-7 {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero-content {
	text-align: center;
	max-width: 780px;
}

.hero-content h3 {
	/* text-wrap: balance; */
	margin-top: 0.9rem;
	margin-bottom: 1.1rem;
	font-size: 1.3rem;
	color: #1a53c1;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.hero-content p {
	margin-bottom: 1.15em;
	margin-top: 0;
	font-size: 1.05rem;
	line-height: 1.8;
}

.hero-content p:last-child {
	margin-bottom: 0;
}

.hero-title-row {
	display: flex;
	align-items: center;
	justify-content: center; /* center the h1 horizontally in the flex row */
	text-align: center; /* harmless fallback for non-flex inline content */
}

.hero-content .subscribe-btn,
.hero-content a.subscribe-btn {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-family: HarmonyOS Sans, var(--adm-font-family);
	font-size: var(--adm-font-size-8); /* 16px */
	font-weight: 600;
	color: var(--adm-color-text);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	vertical-align: middle;
	white-space: nowrap;

	padding: 10px 18px;
	height: 44px;
	min-width: 148px;
	border-radius: var(--adm-radius-m); /* 8px */
	border: 1px solid var(--Brand1-2, #b1c7e6);
	background: linear-gradient(
			140deg,
			rgba(157, 199, 254, 0.1) 0%,
			rgba(255, 255, 255, 0.1) 45%,
			rgba(157, 199, 254, 0.1) 100%
		),
		#fff;
	box-shadow: 0 2px 8px rgba(16, 57, 162, 0.06);
	transition: all 0.18s ease;
	text-decoration: none;
	margin: 0 10px 0 10px;
}

.hero-content .subscribe-btn i,
.hero-content .subscribe-btn img {
	height: 18px;
	width: 18px;
	display: block;
}

/* Hover / Active states */
/* 仅 hover 才强化外观 */
.hero-content .subscribe-btn:hover {
	border-color: var(--theme-color-6);
	box-shadow: 0 4px 14px rgba(52, 119, 235, 0.18);
	background: linear-gradient(
			140deg,
			rgba(157, 199, 254, 0.16) 0%,
			rgba(255, 255, 255, 0.08) 45%,
			rgba(157, 199, 254, 0.16) 100%
		),
		#fff;
}

/* focus 用无障碍描边，不做 hover 的视觉强化 */
.hero-content .subscribe-btn:focus-visible {
	outline: 2px solid var(--theme-color-6);
	outline-offset: 2px;
}

.hero-content .subscribe-btn:active {
	transform: translateY(1px);
	box-shadow: 0 2px 8px rgba(52, 119, 235, 0.14);
}

/* Specific icon spacing for font icons */
.hero-content .subscribe-btn i {
	margin-right: 6px;
}

/* Keep GitHub/HF/Subscribe aligned in a row and equal height */
.hero-content .subscribe-btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.hero-content .cta-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.hero-content .cta-desc {
	font-size: 0.92rem;
	line-height: 1.35;
	color: var(--text-secondary, #666666);
	max-width: 180px;
	text-align: center;
}
/* keep the group nicely centered and wrapped on small screens */
.hero-content .subscribe-btn-group {
	justify-content: center;
	gap: 16px;
}

.hero-title {
	font-size: clamp(2.2rem, 3.2vw + 1.6rem, 30rem);
	font-weight: 800;
	color: #1039a2;
	letter-spacing: 1px;
	font-family: "Segoe UI", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
		"Microsoft YaHei", sans-serif;
}

/* generic shim to avoid side effects on other pages */
.subscribe-btn {
	all: unset;
}
.subscribe-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ============ CTA unified grid & two-line button ============ */
.hero-content .cta-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(240px, 1fr));
	gap: 20px; /* 原 16px → 20px */
	justify-content: center;
	align-items: stretch;
	margin-top: 8px; /* 微调顶部间距 */
}

/* Full-width two-line buttons with left icon + right text */
.hero-content .cta-btn {
	width: 100%;
	min-height: 104px; /* 原 92px → 104px，留出更舒适的两行空间 */
	padding: 14px 18px; /* 原 12px 16px → 14px 18px */
	justify-content: center;
	gap: 12px;
	text-align: center;
	white-space: normal;
	align-self: stretch;

	/* 更贴合 hero-section 的柔和蓝调 */
	border-radius: var(--adm-radius-l); /* 12px 的圆角 */
	
	box-shadow: 0 3px 12px rgba(16, 57, 162, 0.08); /* 稍柔和的投影 */
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease,
		background 0.18s ease;
}

.hero-content .cta-btn:hover {
	transform: translateY(-1px);
	border-color: rgba(52, 119, 235, 0.36);
	box-shadow: 0 6px 18px rgba(52, 119, 235, 0.16);
	background: linear-gradient(
			140deg,
			rgba(157, 199, 254, 0.16) 0%,
			rgba(255, 255, 255, 0.1) 45%,
			rgba(157, 199, 254, 0.16) 100%
		),
		linear-gradient(90deg, #e9f1ff 0%, #eef3fb 100%);
}

.hero-content .cta-btn:focus-visible {
	outline: 2px solid var(--theme-color-6);
	outline-offset: 2px;
}

.hero-content .cta-btn:active {
	transform: translateY(0);
	box-shadow: 0 3px 12px rgba(52, 119, 235, 0.14);
}

/* 图标尺寸保持一致 */
.hero-content .cta-btn i,
.hero-content .cta-btn img {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

/* 文本容器：标题居中、说明可左对齐 */
.hero-content .cta-btn .btn-text {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px; /* 原 4px → 6px，层次更舒展 */
	line-height: 1.3;
	min-width: 0;
	width: 100%;
}

/* 标题行：图标 + 文字 同一行，垂直对齐，整体居中 */
.hero-content .cta-btn .btn-title {
	display: flex;
	align-items: center; /* 垂直居中图标与文字 */
	justify-content: center; /* 整行居中 */
	gap: 10px; /* 图标与文字间距略增 */
	font-size: 1.06rem; /* 略放大标题 */
	font-weight: 700;
	color: #1039a2; /* 与 hero 主色相呼应 */
	letter-spacing: 0.2px; /* 细微字距，提升质感 */
	text-align: center;
	width: 100%;
}

/* 标题图标微调基线对齐，光学更居中 */
.hero-content .cta-btn .btn-title i,
.hero-content .cta-btn .btn-title img {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	transform: translateY(1px); /* 轻微上/下校正，让视觉更平衡 */
}

/* 说明文字：左对齐、行距更舒展，可优雅换行 */
.hero-content .cta-btn .btn-sub {
	display: block;
	font-size: 0.95rem; /* 说明稍大一点，更易读 */
	font-weight: 400; /* 取消加粗 */
	color: var(--text-secondary, #58627a);
	line-height: 1.55;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	text-align: center; /* 左对齐说明 */
	margin-top: 2px;
}

.hero-content .cta-btn .btn-sub a {
	color: #1a53c1;
	text-decoration: underline;
}

.col-lg-5 {
	flex: 0 0 40%;
	max-width: 40%;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
/* 右侧ul卡片样式 */
.col-lg-5 ul {
	background: var(--background-accent);
	border-radius: var(--radius-md);
	box-shadow: 0 2px 8px rgba(30, 64, 175, 0.06);
	padding: 0.8rem 1rem 0.8rem 1.8rem;
	list-style: disc inside;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	border: 1px solid var(--border-light);
	font-size: 0.95rem;
	color: var(--text-primary);
	font-weight: 500;
	text-align: left;
}
.col-lg-5 ul li {
	display: list-item;
	align-items: flex-start;
	gap: 0.6em;
	line-height: 1.5;
	padding-left: 0;
	text-align: left;
}
.hero-section .col-lg-5 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
}
.hero-section .col-lg-5 ul {
	margin-top: 40px;
	align-self: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* 订阅弹窗样式 */
.subscribe-modal {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.25);
	align-items: center;
	justify-content: center;
}
.subscribe-modal.show {
	display: flex;
}
.subscribe-modal-content {
	background: var(--background-primary);
	padding: 2rem 2.5rem 1.5rem 2.5rem;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	min-width: 320px;
	max-width: 90vw;
	text-align: center;
	position: relative;
}
.subscribe-modal-content h3 {
	margin-bottom: 1rem;
	color: var(--primary-color);
	font-size: 1.2rem;
}
.subscribe-modal-content input[type="email"] {
	width: 80%;
	padding: 0.7rem 1rem;
	margin-bottom: 1rem;
	border: 1px solid var(--border-medium);
	border-radius: var(--radius-md);
	font-size: 1rem;
	outline: none;
	transition: border 0.2s;
}
.subscribe-modal-content input[type="email"]:focus {
	border: 1.5px solid var(--primary-color);
}
.subscribe-modal-content button[type="submit"] {
	padding: 0.6rem 1.5rem;
	background: var(--primary-color);
	color: var(--background-primary);
	border: none;
	border-radius: var(--radius-md);
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}
.subscribe-modal-content button[type="submit"]:hover {
	background: var(--primary-dark);
}
.close-modal {
	position: absolute;
	top: 12px;
	right: 18px;
	font-size: 1.5rem;
	color: var(--text-light);
	cursor: pointer;
	transition: color 0.2s;
}
.close-modal:hover {
	color: var(--error-color);
}

/* 简要榜单新Section布局样式 */
.summary-leaderboard-section {
	width: 1400px;
	margin: 80px auto;
	padding: 0 16px;
	margin-bottom: 35px;
	/* 保持主内容间距 */
}

.summary-leaderboard-flex {
	display: grid;
	grid-template-columns: repeat(3, minmax(340px, 1fr));
	gap: 40px;
	align-items: stretch; /* ensure items stretch to the tallest in the row */
	width: 100%;
}

.summary-leaderboard-flex-radar {
	display: grid;
	gap: 40px;
	align-items: stretch; /* ensure items stretch to the tallest in the row */
	width: 100%;
}

.summary-leaderboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 12px 18px;
	background: #edf2ff; /* solid, soft-indigo tint to match overall palette */
	border-radius: 12px 12px 0 0;
	cursor: pointer;
	user-select: none;
	font-size: 1.45rem;
	font-weight: 700;
	color: #1c2452;
	box-shadow: 0 2px 16px 0 rgba(50, 80, 200, 0.04);
	border-bottom: 1px solid #e7ecf8;
	letter-spacing: 0.015em;
	transition: background 0.17s, box-shadow 0.17s, color 0.17s;
	margin-bottom: 0;
	outline: none;
}

.summary-leaderboard-header {
	min-height: 56px;
}
.summary-leaderboard-header .summary-leaderboard-extra {
	text-align: center;
	text-wrap: wrap;
	font-size: 0.95rem;
	font-weight: 700;
	opacity: 0.9;
	max-width: 75px;
}
.summary-leaderboard-header:hover,
.summary-leaderboard-header:focus {
	background: #dbe7ff; /* slightly deeper on hover for feedback */
	color: #2058c7;
	box-shadow: 0 4px 28px 0 rgba(50, 80, 200, 0.09);
}

.summary-leaderboard-title {
	display: flex;
	align-items: center;
	font-family: "Inter", "Segoe UI", Arial, sans-serif;
	font-size: 1.16em;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: inherit;
	gap: 0.7em;
	text-shadow: 0 1px 0 #fff8, 0 2px 5px #b2c5ff18;
}
.summary-leaderboard-title i.fas.fa-trophy {
	color: #ffc300;
	font-size: 1.15em;
	margin-right: 0.19em;
	filter: drop-shadow(0 2px 3px #ffe18155);
}
.summary-leaderboard-table {
	flex: 1 1 45%;
	min-width: 350px;
	height: 100%;
	/* 保证表格宽度不会太窄 */
	display: flex;
	flex-direction: column; /* header -> table container -> footer */
	border: 1px solid #dfe6f5; /* subtle cool-gray border to match palette */
	border-radius: 12px; /* unify with header radius */
	background: var(--background-primary);
	overflow: hidden; /* ensure header and inner table respect radius */
}

/* Make inner table area stretch so all three cards share the tallest height */
/* Make inner table area stretch so all three cards share the tallest height */
.summary-leaderboard-table .summary-table-container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0; /* allow children to shrink/grow properly in flexbox (Safari fix) */
}
.summary-leaderboard-table .summary-table-container .ranking-table {
	width: 100%;
	height: 100%;
	min-height: 0; /* avoid overflow causing unequal card heights */
}
/* Keep footer pinned to bottom of the card */
.summary-leaderboard-table .summary-leaderboard-footer {
	margin-top: auto;
}

.summary-leaderboard-radar,
.index-chart-container,
.index-chart-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 585px;
	margin-left: auto;
	margin-right: auto;
}

.index-chart-wrapper {
	width: 100%;
	max-width: 420px;
	min-height: 380px;
	background: none;
	margin: 0 auto;
	position: relative;
}

.index-chart-container {
	width: 100%;
	max-width: 550px;
	margin: 0 auto;
	padding-bottom: 20px;
}

.dynamic-chart-title {
	font-size: 1.2rem;
	font-weight: 600;
	color: #1e40af;
	margin-top: 25px;
	margin-bottom: 5px;
	text-align: center;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.chart-legend-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 16px;
	gap: 20px;
	width: 100%;
}
.legend-item {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 1.08rem;
	font-weight: 500;
	color: #374151;
	line-height: 1.1;
	margin: 0 2px;
}
.legend-marker {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin-right: 8px;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px #e5e7eb40;
	vertical-align: middle;
	/* background-clip: padding-box; */
}

/* Two radar charts side-by-side */
.radar-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: stretch;
	margin-bottom: 30px;
}

/* Make each radar cell fill its grid track */
.radar-pair .summary-leaderboard-radar {
	display: flex; /* keep inner vertical layout */
	flex-direction: column;
	justify-content: center;
}

/* --- News & Roadmap Section Styles --- */
.news-roadmap-section {
	max-width: 1400px;
	margin: 0 auto 2.5rem auto;
	padding: 20px;
	background: none;
}

.news-roadmap-container {
	display: flex;
	gap: 2.5rem;
	/* max-width: 1100px; */
	/* margin: 0 auto; */
	background: none;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	flex-wrap: wrap;
}

.news-block,
.roadmap-block {
	flex: 1 1 340px;
	background: var(--background-primary);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 2rem;
	min-width: 320px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	border: 1.5px solid var(--border-light);
	transition: box-shadow 0.22s, transform 0.22s;
	position: relative;
}
.news-block:hover,
.roadmap-block:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px) scale(1.02);
	z-index: 2;
}

.news-title,
.roadmap-title {
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 1.2rem;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	border-bottom: 1.5px solid var(--border-light);
	padding-bottom: 0.7rem;
}

.news-list-card {
	background: var(--background-accent);
	border-radius: var(--radius-md);
	padding: 1rem 1.1rem;
	margin-bottom: 0.7rem;
	box-shadow: 0 1px 4px rgba(30, 64, 175, 0.04);
	border: none;
}

.roadmap-content {
	margin-top: 0.7rem;
	display: flex;
	gap: 24px;
	align-items: stretch;
}

.roadmap-short-term {
	background: var(--background-accent);
	border-radius: var(--radius-md);
	box-shadow: 0 1px 4px rgba(30, 64, 175, 0.04);
	flex: 1; /* 两列平均分 */
	display: flex;
	flex-direction: column;
	justify-content: center; /* 垂直居中 */
	padding: 20px;
	box-sizing: border-box;
}

.roadmap-short-term a {
	text-decoration: none;
}

.roadmap-short-term a:hover {
	text-decoration: underline;
}

.roadmap-short-term li {
	margin-bottom: 5px;
}

.roadmap-label {
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--primary-dark);
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.contributors-section {
	max-width: 1400px;
	margin: 3rem auto;
	padding: 2.5rem;
	background: linear-gradient(
		135deg,
		var(--background-secondary) 0%,
		var(--background-accent) 100%
	);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-light);
	box-shadow: var(--shadow-md);
}

.contributors-header {
	text-align: center;
	margin-bottom: 2rem;
}

.contributors-title {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--primary-dark);
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.contributors-title i {
	color: var(--primary-color);
	font-size: 1.8rem;
}
.contributors-subtitle {
	font-size: 1.1rem;
	color: var(--text-secondary);
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.contributors-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2rem;
	padding: 1rem;
}
.contributor-avatar {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: visible;
	border: 3px solid var(--background-primary);
	box-shadow: var(--shadow-sm);
	transition: all 0.3s ease;
	cursor: pointer;
}
.contributor-avatar:hover {
	transform: scale(1.1);
	box-shadow: var(--shadow-md);
	border-color: var(--primary-light);
}
.contributor-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.contributor-avatar:hover .contributor-tooltip {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(-50%) translateY(-2px);
}
.contributor-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--text-primary);
	color: white;
	padding: 0.5rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: 0.8rem;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 10000;
	margin-bottom: 0.5rem;
	box-shadow: var(--shadow-md);
	pointer-events: none;
}
.contributor-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--text-primary);
}
.contributor-avatar:hover .contributor-tooltip {
	opacity: 1 !important;
	visibility: visible !important;
	transform: translateX(-50%) translateY(-2px);
}
.become-contributor {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--border-light);
}
.become-contributor-btn {
	padding: 1rem 2rem;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	color: white;
	border: none;
	border-radius: var(--radius-md);
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	box-shadow: var(--shadow-md);
}
.become-contributor-btn:hover {
	background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}
.become-contributor-btn:active {
	transform: translateY(0);
}
.become-contributor-btn i {
	font-size: 1.2rem;
}
.contributor-stats {
	display: flex;
	justify-content: center;
	gap: 3rem;
}
.stat-item {
	text-align: center;
}
.stat-number {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1;
	margin-bottom: 0.5rem;
}
.stat-label {
	font-size: 0.9rem;
	color: var(--text-secondary);
	font-weight: 500;
}

.summary-leaderboard-footer {
	margin-top: 12px;
	text-align: center;
}
.summary-leaderboard-link {
	font-size: 0.95rem;
	font-weight: 500;
	color: #1a53c1;
	text-decoration: none;
	transition: color 0.2s ease;
}
.summary-leaderboard-link:hover {
	color: #1039a2;
	text-decoration: underline;
}

.summary-leaderboard-link.enhanced-link {
	display: inline-block;
	padding: 10px 16px;
	background: linear-gradient(90deg, #f0f4ff 0%, #eaf0fa 100%);
	border-radius: 0 0 8px 8px;
	font-size: 0.95rem;
	font-weight: 600;
	color: #1a53c1;
	text-decoration: none;
	transition: background 0.3s ease, color 0.3s ease;
	width: -webkit-fill-available;
}
.summary-leaderboard-link.enhanced-link i {
	margin-left: 6px;
	font-size: 0.85rem;
}
.summary-leaderboard-link.enhanced-link:hover {
	background: linear-gradient(90deg, #d1e5ff 0%, #f6f8fe 100%);
	color: #1039a2;
}