.ts-donor-board {
	--ts-bg: #f7f3ea;
	--ts-surface: rgba(255, 255, 255, 0.78);
	--ts-surface-strong: rgba(255, 255, 255, 0.92);
	--ts-text: #1b2b34;
	--ts-muted: #667781;
	--ts-line: rgba(27, 43, 52, 0.08);
	--ts-accent: #0f766e;
	--ts-gold: #d4a739;
	--ts-silver: #a7b4c2;
	--ts-bronze: #b97a4c;
	max-width: 980px;
	margin: 40px auto;
	padding: 34px;
	border-radius: 32px;
	background:
		radial-gradient(circle at 10% 10%, rgba(15, 118, 110, 0.12), transparent 28%),
		radial-gradient(circle at 85% 20%, rgba(212, 167, 57, 0.14), transparent 22%),
		radial-gradient(circle at 70% 85%, rgba(29, 155, 143, 0.10), transparent 25%),
		linear-gradient(135deg, #fffdf8, var(--ts-bg));
	box-sizing: border-box;
	box-shadow: 0 24px 60px rgba(16, 33, 40, 0.12);
	color: var(--ts-text);
	font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
	overflow: hidden;
	position: relative;
}

.ts-donor-board *,
.ts-donor-board *::before,
.ts-donor-board *::after {
	box-sizing: border-box;
}

.ts-donor-board::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
	background-size: 26px 26px;
	pointer-events: none;
	opacity: 0.28;
}

.ts-donor-inner {
	position: relative;
	z-index: 1;
}

.ts-donor-badge {
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(15, 118, 110, 0.1);
	color: var(--ts-accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
	margin-bottom: 14px;
}

.ts-donor-title {
	margin: 0 0 10px;
	font-size: 34px;
	line-height: 1.15;
	font-weight: 900;
	letter-spacing: 0.5px;
}

.ts-donor-desc {
	margin: 0 0 28px;
	max-width: 760px;
	color: var(--ts-muted);
	font-size: 15px;
	line-height: 1.9;
}

.ts-donor-panel {
	padding: 20px;
	border-radius: 24px;
	background: var(--ts-surface);
	border: 1px solid rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.ts-donor-head {
	display: grid;
	grid-template-columns: 110px 1fr 170px;
	gap: 14px;
	padding: 0 14px 12px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 1px;
	color: var(--ts-muted);
	text-transform: uppercase;
}

.ts-donor-head-amount,
.ts-donor-amount {
	text-align: right;
}

.ts-donor-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: donor-rank;
}

.ts-donor-item {
	counter-increment: donor-rank;
	display: grid;
	grid-template-columns: 110px 1fr 170px;
	gap: 14px;
	align-items: center;
	margin-bottom: 12px;
	padding: 16px 14px;
	border-radius: 20px;
	background: var(--ts-surface-strong);
	border: 1px solid var(--ts-line);
	box-shadow: 0 10px 24px rgba(20, 39, 46, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ts-donor-item:last-child {
	margin-bottom: 0;
}

.ts-donor-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 28px rgba(20, 39, 46, 0.1);
}

.ts-donor-rank::before {
	content: "#" counter(donor-rank);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 78px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(15, 118, 110, 0.08);
	color: var(--ts-accent);
	font-size: 18px;
	font-weight: 900;
}

.ts-donor-name {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.3px;
	overflow-wrap: anywhere;
}

.ts-donor-amount {
	font-size: 21px;
	font-weight: 900;
	color: var(--ts-accent);
	letter-spacing: 0.4px;
}

.ts-donor-item:nth-child(1) {
	border-color: rgba(212, 167, 57, 0.32);
	background: linear-gradient(135deg, rgba(255, 250, 236, 0.98), rgba(255, 255, 255, 0.95));
}

.ts-donor-item:nth-child(1) .ts-donor-rank::before {
	background: linear-gradient(135deg, #f8de8b, var(--ts-gold));
	color: #5d3f00;
}

.ts-donor-item:nth-child(2) .ts-donor-rank::before {
	background: linear-gradient(135deg, #edf2f6, var(--ts-silver));
	color: #314152;
}

.ts-donor-item:nth-child(3) .ts-donor-rank::before {
	background: linear-gradient(135deg, #ebc2a7, var(--ts-bronze));
	color: #5b2f14;
}

.ts-donor-empty {
	margin: 0;
	padding: 20px;
	text-align: center;
	color: var(--ts-muted);
}

@media (max-width: 720px) {
	.ts-donor-board {
		padding: 22px;
		border-radius: 24px;
	}

	.ts-donor-title {
		font-size: 28px;
	}

	.ts-donor-head {
		display: none;
	}

	.ts-donor-item {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.ts-donor-amount {
		text-align: left;
	}
}