:root {
	--ink: #121826;
	--muted: #575f6b;
	--line: #e9eef4;
	--primary: #2857ff;
	--green: #08b98c;
	--shadow: 0 12px 34px rgba(48, 72, 104, .11)
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	color: var(--ink);
	font-family: "Microsoft YaHei", system-ui, sans-serif;
	background: #fff
}

.container {
	max-width: 1280px
}

.navbar {
	min-height: 72px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line)
}

.navbar-brand {
	font-weight: 900;
	color: var(--ink) !important;
	display: flex;
	gap: 8px;
	align-items: center
}

.navbar-brand i {
	width: 27px;
	height: 27px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #fff;
	background: #16afd2
}

.navbar-nav {
	gap: 30px;
	margin-left: 48px
}

.navbar-nav a {
	text-decoration: none;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 70px
}

.search {
	width: 290px;
	height: 40px;
	background: #f6f8fb;
	border-radius: 22px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 15px;
	color: #98a3b3
}

.search input {
	border: 0;
	outline: 0;
	background: transparent;
	width: 100%;
	font-size: 13px
}

.login {
	text-decoration: none;
	color: var(--ink);
	border: 0;
	background: none;
	font-weight: 700;
	margin: 0 14px
}

.btn-main {
	border: 0;
	border-radius: 24px;
	padding: 11px 20px;
	color: #fff;
	background: linear-gradient(135deg, #1c61ff, #5e39f0);
	font-weight: 800;
	box-shadow: 0 8px 20px rgba(45, 80, 245, .22);
	transition: .25s
}

.btn-main:hover {
	transform: translateY(-2px)
}

.btn-main,
.btn-ghost,
.section-link {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px
}

main {
	padding-top: 28px
}

.hero-layout {
	display: grid;
	grid-template-columns: 1.75fr .92fr;
	gap: 16px
}

.hero {
	height: 390px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--shadow)
}

.carousel-inner,
.carousel-item {
	height: 100%
}

.placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: rgba(255, 255, 255, .8);
	background: linear-gradient(135deg, #2c3f51, #4d6f7d)
}

.placeholder i {
	font-size: 28px
}

.hero-ph {
	width: 100%;
	height: 100%;
	font-size: 13px
}

.tone-green {
	background: linear-gradient(135deg, #173b37, #387763)
}

.tone-blue {
	background: linear-gradient(135deg, #164c68, #198da2)
}

.shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(3, 11, 20, .92), rgba(3, 11, 20, .22))
}

.hero-copy {
	position: absolute;
	inset: 0;
	width: 60%;
	padding: 38px;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center
}

.badges {
	display: flex;
	gap: 8px;
	margin-bottom: 20px
}

.badges span {
	padding: 5px 9px;
	border-radius: 12px;
	background: rgba(0, 0, 0, .55);
	color: #ffd361;
	font-size: 11px
}

.hero h1 {
	font-size: 31px;
	font-weight: 900
}

.hero-copy>p {
	font-size: 13px;
	color: #d9e0e8;
	line-height: 1.8
}

.amount {
	font-size: 15px
}

.amount strong {
	float: right
}

.amount small {
	color: #9ea8b6
}

.hero .amount {
	margin-top: 12px
}

.hero .amount small {
	color: #ccd3dd
}

.progress {
	height: 5px;
	margin: 8px 0;
	background: #e7edf2
}

.progress-bar {
	width: 0;
	background: linear-gradient(90deg, #13d6a1, #02a981);
	transition: width 1.1s
}

.hero-actions {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-top: 17px
}

.btn-ghost {
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: #fff;
	border-radius: 22px;
	padding: 9px 18px
}

.play {
	position: absolute;
	right: -125px;
	top: 42%;
	border: 0;
	border-radius: 50%;
	width: 56px;
	height: 56px;
	background: #fff;
	font-size: 24px
}

.carousel-indicators {
	bottom: -30px
}

.rankings {
	border-radius: 20px;
	padding: 10px 18px;
	background: #fff;
	box-shadow: var(--shadow)
}

.rank {
	display: grid;
	grid-template-columns: 135px 1fr;
	gap: 15px;
	align-items: center;
	padding: 10px 0
}

.rank+.rank {
	border-top: 1px solid var(--line)
}

.thumb {
	height: 84px;
	border-radius: 11px;
	background: linear-gradient(135deg, #81909e, #b8c1c8)
}

.rank em {
	font-style: normal;
	background: #8d63dc;
	color: #fff;
	border-radius: 11px;
	padding: 4px 8px;
	font-size: 10px
}

.rank h3 {
	font-size: 14px;
	font-weight: 900;
	margin: 9px 0
}

.categories {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	margin: 55px 0 40px
}

.category {
	text-align: center
}

.category i {
	width: 45px;
	height: 45px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	margin: auto;
	background: #eef4ff;
	color: #5267f3;
	font-size: 19px
}

.category b,
.category small {
	display: block
}

.category b {
	font-size: 16px;
	margin-top: 7px
}

.category small {
	font-size: 13px;
	color: var(--muted)
}

.section {
	padding: 10px 0 34px
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 16px
}

.section-head h2 {
	font-size: 22px;
	font-weight: 900;
	margin: 0
}

.section-head p {
	font-size: 13px;
	color: var(--muted);
	margin: 3px 0
}

.section-head button,
.more {
	border: 0;
	background: #f6f8fb;
	border-radius: 20px;
	padding: 9px 16px;
	color: #687487;
	font-size: 14px
}

.section-head button:hover,
.more:hover {
	background-color: var(--primary);
	color: #fff;
}

.section-link {
	border: 0;
	background: #f6f8fb;
	border-radius: 20px;
	padding: 9px 16px;
	color: #687487;
	font-size: 14px;
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px
}

.card-project {
	border: 1px solid var(--line);
	border-radius: 13px;
	overflow: hidden;
	box-shadow: 0 5px 17px rgba(47, 68, 99, .07);
	transition: .3s
}

.card-project:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow)
}

.card-img {
	height: 166px;
	position: relative;
	background: linear-gradient(135deg, #8394a2, #c2cad0)
}

.card-img span {
	position: absolute;
	top: 10px;
	left: 10px;
	background: #7562e5;
	color: #fff;
	border-radius: 11px;
	padding: 4px 8px;
	font-size: 10px
}

.card-body {
	padding: 14px
}

.card-body h3 {
	font-size: 15px;
	font-weight: 900
}

.card-body h3 a {
	color: var(--ink);
	text-decoration: none;
}

.card-body p {
	font-size: 13px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.meta {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: #697587
}

.more {
	display: block;
	margin: 23px auto;
	text-decoration: none;
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	box-shadow: var(--shadow);
	border-radius: 15px;
	overflow: hidden;
	margin: 15px 0 38px
}

.stats>div {
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 22px
}

.stats>div+div {
	border-left: 1px solid var(--line)
}

.stats>div>i {
	font-size: 20px;
	color: #276eff
}

.stats p {
	display: grid;
	margin: 0
}

.stats small,
.stats span {
	font-size: 10px;
	color: var(--muted)
}

.stats b {
	font-size: 19px
}

.hot-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px
}

.hot-grid .card-img {
	height: 105px
}

.hot-grid .card-body p {
	display: none
}

.success-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px
}

.success-grid .card-body .amount b {
	color: var(--green);
}

.success-grid .card-img {
	height: 106px
}

.community-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px
}

.panel {
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 16px;
	background: #fff
}

.panel h3 {
	font-size: 20px;
	font-weight: 600
}

.peach a {
	width: 100%;
	border: 0;
	border-radius: 9px;
	background: #fff;
	margin-top: 8px;
	padding: 12px;
	font-size: 13px;
	display: flex;
	justify-content: space-between;
	text-decoration: none;
}

.panel .avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
}

.panel .avatar img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .5s ease;
}

.updates h3 {
	font-size: 18px !important;
}

.mint {
	background: #ebf6ff
}

.mint h3 {
	color: #405cc1;
}

.lavender {
	background: #f2efff
}

.lavender h3 {
	color: #5539d0;
}

.peach {
	background: #fff5e8
}

.peach h3 {
	color: #f1a23c;
}

.updates>div,
.mint>div,
.lavender>div {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 0;
	margin-bottom: 12px;
}

.mint>div,
.lavender>div {
	background-color: #fff;
	border-radius: 6px;
	padding: 8px;
}

.updates p,
.mint p,
.lavender p {
	display: grid;
	margin: 0;
	flex: 1;
	font-size: 11px
}

.updates p span,
.updates small,
.mint p span,
.mint small,
.lavender p span,
.lavender small {
	font-size: 12px;
	color: var(--muted)
}

.news-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px
}

.news-grid .card-project {
	border: none;
	box-shadow: none;
	border-radius: 0;
}

.news-grid .card-project .card-body {
	padding: 14px 0;
}

.news-grid .card-img {
	height: 106px;
	border-radius: 13px;
}

.cta {
	grid-template-columns: 1fr 1.3fr;
	min-height: 190px;
	background: linear-gradient(110deg, #dffbf4, #e7f1ff);
	border-radius: 16px;
	padding: 28px 34px;
	margin-bottom: 28px;
	align-items: center;

	display: block;
	background-image: url('../img/cta-planet-bg.jpg');
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat
}

.cta h2 {
	font-size: 28px;
	font-weight: 900;
	line-height: 1.5;
}

.cta p {
	font-size: 11px;
	color: #66778a
}

.banner-ph {
	height: 140px;
	border-radius: 15px;
	background: rgba(255, 255, 255, .35);
	color: #54a7b5
}

/* footer {
	background: #f8fafc;
	padding: 25px 0 10px
}

footer>.container {
	display: grid;
	grid-template-columns: 2fr repeat(3, 1fr);
	gap: 20px
}

footer .container>div {
	display: flex;
	flex-direction: column;
	gap: 5px
}

footer p,
footer a {
	font-size: 10px;
	color: var(--muted)
} */

.common-footer {
	background-color: #1d1d1f;
	color: rgba(255, 255, 255, .7);
}

._footer_links a {
	display: block;
	color: #fff;
	line-height: 2;
	text-decoration: none;
}

._footer_qrcode img {
	width: 120px;
}

.copy {
	text-align: center;
	border-top: 1px solid var(--line);
	padding-top: 12px
}

.video-ph {
	height: 330px
}

.modal-content {
	border: 0;
	overflow: hidden
}

.modal .btn-close {
	position: absolute;
	right: 14px;
	top: 14px;
	z-index: 2
}

.empty {
	text-align: center;
	padding: 50px
}

.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: .6s
}

.reveal.show {
	opacity: 1;
	transform: none
}

.projects-page {
	background: #f7f7fc
}

.project-list-hero {
	padding: 58px 0 105px;
	background: linear-gradient(135deg, #eef6ff, #f2efff);
	text-align: center
}

.project-list-hero span {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .2em;
	color: #2455df
}

.project-list-hero h1 {
	font-size: 36px;
	font-weight: 900;
	margin: 8px 0
}

.project-list-hero p {
	color: #718095
}

.projects-main {

	padding-bottom: 80px
}

.project-filters {
	background: #fff;
	border-radius: 12px;
	padding: 34px 42px 0;
	box-shadow: 0 8px 30px rgba(39, 52, 103, .07)
}

.filter-row {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 28px
}

.filter-row>strong {
	width: 82px;
	flex: none;
	padding-top: 8px;
	font-size: 14px;
	font-weight: 500
}

.filter-options {
	display: flex;
	gap: 12px;
	flex-wrap: wrap
}

.filter-options button {
	border: 0;
	min-width: 88px;
	padding: 8px 20px;
	border-radius: 22px;
	background: #f1f2ff;
	color: #2c3854;
	font-size: 14px;
	transition: .2s
}

.filter-options button:hover,
.filter-options button.active {
	background: #0849dc;
	color: #fff;
	box-shadow: 0 7px 15px rgba(8, 73, 220, .2)
}

.sort-row {
	border-top: 1px solid #edf0f5;
	min-height: 76px;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.sort-options {
	display: flex;
	align-items: center;
	gap: 34px
}

.sort-options strong {
	font-size: 14px;
	font-weight: 500
}

.sort-options button {
	border: 0;
	background: none;
	padding: 0;
	color: #29354c
}

.sort-options button.active {
	color: #0751df;
	font-weight: 800
}

.sort-row p {
	margin: 0;
	font-size: 12px
}

.sort-row p b {
	color: #0751df
}

.result-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin: 38px 0 18px
}

.result-heading h2 {
	font-size: 23px;
	font-weight: 900;
	margin: 0
}

.result-heading p {
	font-size: 12px;
	color: #8290a3;
	margin: 3px 0 0
}

.result-heading button {
	border: 0;
	background: transparent;
	color: #6f7c8f;
	font-size: 12px
}

.status-project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px
}

.status-card {
	background: #fff;
	border: 1px solid #edf0f4;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(47, 61, 92, .07);
	transition: .3s
}

.status-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 34px rgba(47, 61, 92, .13)
}

.status-cover {
	height: 190px;
	display: block;
	position: relative;
	overflow: hidden
}

.status-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: .45s
}

.status-card:hover .status-cover img {
	transform: scale(1.04)
}

.status-cover small {
	position: absolute;
	right: 12px;
	top: 12px;
	background: rgba(15, 24, 39, .68);
	color: #fff;
	border-radius: 12px;
	padding: 4px 8px
}

.status-badge {
	position: absolute;
	left: 12px;
	top: 12px;
	color: #fff;
	border-radius: 14px;
	padding: 5px 9px;
	font-size: 11px;
	font-weight: 800;
	display: flex;
	gap: 5px;
	align-items: center
}

.status-ongoing .status-badge {
	background: #2463eb
}

.status-success .status-badge {
	background: #07a975
}

.status-failed .status-badge {
	background: #687386
}

.status-upcoming .status-badge {
	background: #7d4ce2
}

.status-body {
	padding: 17px
}

.status-title {
	display: flex;
	align-items: flex-start;
	gap: 10px
}

.status-title>div {
	flex: 1
}

.status-title p {
	font-size: 10px;
	font-weight: 700;
	margin: 0 0 4px;
	color: #2463eb
}

.status-success .status-title p {
	color: #07966a
}

.status-failed .status-title p {
	color: #d54848
}

.status-upcoming .status-title p {
	color: #7444d4
}

.status-title h3 {
	font-size: 16px;
	font-weight: 900;
	margin: 0
}

.status-title h3 a {
	text-decoration: none;
	color: #172033
}

.favorite {
	border: 0;
	background: #f5f7fa;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: #8290a3
}

.favorite.active {
	color: #e64965;
	background: #fff0f3
}

.status-money {
	margin-top: 18px
}

.status-money b {
	font-size: 17px
}

.status-money small {
	font-size: 10px;
	color: #9aa4b2
}

.status-progress {
	display: flex;
	align-items: center;
	gap: 10px
}

.status-progress .progress {
	flex: 1
}

.status-progress>b {
	font-size: 11px
}

.status-failed .progress-bar {
	background: #d86a6a
}

.status-success .progress-bar {
	background: #07b47e
}

.status-meta {
	height: 26px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #738094;
	font-size: 10px
}

.status-action {
	margin-top: 10px;
	border-top: 1px solid #edf0f4;
	padding-top: 12px;
	text-decoration: none;
	color: #2463eb;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.status-success .status-action {
	color: #07966a
}

.status-failed .status-action {
	color: #687386
}

.status-upcoming .status-action {
	color: #7444d4
}

.upcoming-date {
	height: 39px;
	background: #f4f0ff;
	border-radius: 8px;
	color: #7444d4;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 11px;
	margin: 8px 0
}

.upcoming-date b {
	font-size: 12px
}

.project-empty {
	text-align: center;
	background: #fff;
	border-radius: 14px;
	padding: 70px
}

.project-empty i {
	font-size: 42px;
	color: #b7bfca
}

.pagination-wrap {
	display: flex;
	justify-content: center;
	margin-top: 38px
}

.pagination {
	gap: 8px
}

.pagination .page-link {
	border: 0;
	border-radius: 9px !important;
	color: #526078;
	min-width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	box-shadow: none
}

.pagination .active .page-link {
	background: #0a4cdf;
	color: #fff
}

.pagination .disabled .page-link {
	opacity: .45
}

.projects-page footer {
	background: #fff
}

@media(max-width:991px) {
	.status-project-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.project-filters {
		padding: 28px 26px 0
	}

	.sort-options {
		gap: 16px
	}

	.sort-row p {
		display: none
	}
}

@media(max-width:640px) {
	.project-list-hero {
		padding: 42px 0 92px
	}

	.project-list-hero h1 {
		font-size: 28px
	}

	.projects-main {
		margin-top: -55px
	}

	.project-filters {
		padding: 22px 18px 0
	}

	.filter-row {
		display: block;
		margin-bottom: 22px
	}

	.filter-row>strong {
		display: block;
		width: auto;
		margin-bottom: 10px;
		padding: 0
	}

	.filter-options {
		gap: 8px
	}

	.filter-options button {
		min-width: auto;
		padding: 7px 14px;
		font-size: 12px
	}

	.sort-row {
		align-items: flex-start;
		padding: 17px 0
	}

	.sort-options {
		gap: 12px;
		flex-wrap: wrap
	}

	.sort-options strong {
		width: 100%
	}

	.status-project-grid {
		grid-template-columns: 1fr
	}

	.status-cover {
		height: 210px
	}

	.result-heading {
		margin-top: 26px
	}
}

@media(max-width:1050px) {
	.hero-layout {
		grid-template-columns: 1fr
	}

	.rankings {
		display: grid;
		grid-template-columns: repeat(3, 1fr)
	}

	.rank {
		grid-template-columns: 90px 1fr
	}

	.rank+.rank {
		border-top: 0;
		border-left: 1px solid var(--line);
		padding-left: 10px
	}

	.project-grid {
		grid-template-columns: repeat(3, 1fr)
	}

	.hot-grid,
	.news-grid {
		overflow: auto;
		grid-template-columns: repeat(5, 220px)
	}

	.success-grid {
		overflow: auto;
		grid-template-columns: repeat(4, 220px)
	}
}

@media(max-width:991px) {
	.navbar-nav {
		margin-left: 0;
		gap: 0
	}

	.navbar-nav a {
		line-height: 38px
	}

	.search {
		width: 100%;
		margin: 8px 0
	}

	.categories {
		grid-template-columns: repeat(4, 1fr);
		gap: 20px
	}

	.project-grid {
		grid-template-columns: repeat(2, 1fr)
	}

	.community-grid {
		grid-template-columns: 1fr 1fr
	}

	.thumb {
		width: 94px !important;
	}
}

@media(max-width:576px) {
	main {
		padding-top: 14px
	}

	.hero {
		height: 500px
	}

	.shade {
		background: linear-gradient(0deg, rgba(3, 11, 20, .92), rgba(3, 11, 20, .1))
	}

	.hero-copy {
		width: 100%;
		padding: 25px;
		justify-content: flex-end
	}

	.hero h1 {
		font-size: 26px
	}

	.play {
		right: 20px;
		top: 20px
	}

	.rankings {
		display: block
	}

	.rank+.rank {
		border-left: 0;
		border-top: 1px solid var(--line);
		padding-left: 0
	}

	.project-grid {
		grid-template-columns: 1fr
	}

	.card-img {
		height: 205px
	}

	.stats {
		grid-template-columns: 1fr 1fr
	}

	.stats>div {
		padding: 14px
	}

	.stats>div:nth-child(3) {
		border-left: 0;
		border-top: 1px solid var(--line)
	}

	.stats>div:nth-child(4) {
		border-top: 1px solid var(--line)
	}

	.community-grid {
		grid-template-columns: 1fr
	}

	.cta {
		grid-template-columns: 1fr
	}

	.banner-ph {
		margin-top: 20px
	}

	footer>.container {
		grid-template-columns: 1fr 1fr
	}
}

@media(prefers-reduced-motion:reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important
	}

	.reveal {
		opacity: 1;
		transform: none
	}
}

/* Existing project images */
.hero-ph {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover
}

.thumb {
	width: 135px;
	height: 84px;
	display: block;
	object-fit: cover
}

.card-img {
	overflow: hidden
}

.card-img img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .5s ease
}

.card-project:hover .card-img img {
	transform: scale(1.05)
}

/* 项目状态：进行中沿用原卡片，以下仅增强成功、失败、即将开始 */
.card-img .project-state-tag {
	left: auto;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	font-weight: 700;
}

.project-success .project-state-tag {
	background: #08a875;
}

.project-failed .project-state-tag {
	background: #697386;
}

.project-upcoming .project-state-tag {
	background: #7448d8;
}

.project-success .progress-bar {
	background: #08b783;
}

.project-failed .progress-bar {
	background: #a8afb9;
}

.project-failed .card-img img {
	filter: saturate(.62) brightness(.82);
}

.project-success .card-body h3 a {
	color: #087d5b;
}

.project-failed .card-body h3 a {
	color: #525b69;
}

.project-upcoming .card-body h3 a {
	color: #6038bf;
}

.state-meta {
	align-items: center;
}

.state-meta a {
	color: #08a875;
	text-decoration: none;
	font-weight: 700;
}

.upcoming-info {
	height: 50px;
	margin: 13px 0 8px;
	padding: 0 11px;
	border-radius: 9px;
	background: #f4f0ff;
	color: #6840c4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
}

.upcoming-info b {
	font-size: 10px;
}

.remind-btn {
	border: 0;
	border-radius: 13px;
	padding: 5px 9px;
	background: #7448d8;
	color: #fff;
	font-size: 10px;
}

.remind-btn.active {
	background: #08a875;
}

/* 项目详情页 */
.detail-page {
	background: #f7f8fb
}

.detail-breadcrumb {
	height: 66px;
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	color: #8994a4
}

.detail-breadcrumb a {
	color: #647084;
	text-decoration: none
}

.detail-overview {
	display: grid;
	grid-template-columns: minmax(0, 1.42fr) minmax(380px, .85fr);
	gap: 30px;
	background: #fff;
	border-radius: 18px;
	padding: 22px;
	box-shadow: 0 8px 30px rgba(34, 49, 82, .07)
}

.detail-media {
	min-width: 0
}

.detail-gallery {
	height: 485px;
	border-radius: 14px;
	overflow: hidden
}

.detail-gallery .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.detail-gallery .swiper-button-prev,
.detail-gallery .swiper-button-next {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #1855df;
	box-shadow: 0 5px 20px rgba(0, 0, 0, .15)
}

.detail-gallery .swiper-button-prev:after,
.detail-gallery .swiper-button-next:after {
	font-size: 16px;
	font-weight: 900
}

.detail-gallery .swiper-pagination-bullet {
	background: #fff;
	opacity: .55
}

.detail-gallery .swiper-pagination-bullet-active {
	width: 22px;
	border-radius: 8px;
	opacity: 1
}

.detail-thumbs {
	height: 82px;
	margin-top: 12px
}

.detail-thumbs .swiper-slide {
	border-radius: 9px;
	overflow: hidden;
	opacity: .52;
	cursor: pointer;
	border: 2px solid transparent
}

.detail-thumbs .swiper-slide-thumb-active {
	opacity: 1;
	border-color: #1658e6
}

.detail-thumbs img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

.detail-summary {
	padding: 10px 12px
}

.detail-labels {
	display: flex;
	gap: 8px
}

.detail-labels span {
	padding: 6px 10px;
	border-radius: 15px;
	background: #edf3ff;
	color: #1c5ade;
	font-size: 11px;
	font-weight: 700
}

.detail-labels span+span {
	background: #edfbf6;
	color: #08966c
}

.detail-summary h1 {
	font-size: 30px;
	font-weight: 900;
	line-height: 1.35;
	margin: 18px 0 10px
}

.detail-intro {
	color: #6d7889;
	font-size: 13px;
	line-height: 1.8
}

.detail-raised {
	margin-top: 26px;
	display: flex;
	align-items: baseline;
	gap: 10px
}

.detail-raised b {
	font-size: 34px;
	color: #000
}

.detail-raised span {
	font-size: 14px;
	color: #4a5058
}

.detail-progress {
	display: flex;
	gap: 11px;
	align-items: center
}

.detail-progress .progress {
	height: 7px;
	flex: 1
}

.detail-progress strong {
	font-size: 14px;
	color: #10a779
}

.detail-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 18px 0 22px
}

.detail-stats>div {
	display: grid
}

.detail-stats>div+div {
	border-left: 1px solid #e8edf3;
	padding-left: 17px
}

.detail-stats b {
	font-size: 20px
}

.detail-stats span {
	font-size: 14px;
	color: #4a5058
}

.detail-actions {
	display: flex;
	gap: 9px
}

.detail-actions .detail-support {
	flex: 1
}

.detail-favorite,
.detail-share {
	border: 1px solid #e1e7ef;
	background: #fff;
	border-radius: 22px;
	padding: 10px 14px;
	color: #3b434f;
	flex: 1;
}

.detail-favorite.active {
	color: #e44463;
	border-color: #ffcdd7;
	background: #fff4f6
}

.detail-share {
	/* width: 44px; */
	/* padding: 0 */
}

.detail-risk {
	font-size: 13px;
	color: #8b95a2;
	margin: 13px 0 18px
}

.detail-risk i {
	color: #08a875
}

.creator-card {
	border-top: 1px solid #edf0f4;
	padding-top: 17px;
	display: flex;
	align-items: center;
	gap: 11px
}

.creator-card img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover
}

.creator-card>div {
	flex: 1
}

.creator-card span,
.creator-card p {
	font-size: 9px;
	color: #8792a2;
	margin: 0
}

.creator-card h3 {
	font-size: 13px;
	font-weight: 800;
	margin: 2px 0
}

.creator-card h3 i {
	color: #1f62e8
}

.creator-card button {
	border: 1px solid #1d5ee3;
	color: #1d5ee3;
	background: #fff;
	border-radius: 18px;
	padding: 7px 12px;
	font-size: 11px
}

.creator-card button.active {
	background: #edf3ff
}

.detail-tabs {
	height: 68px;
	background: #fff;
	border-top: 1px solid #eef1f5;
	border-bottom: 1px solid #e6ebf1;
	margin-top: 28px;
	position: sticky;
	top: 72px;
	z-index: 20
}

.detail-tabs .container {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 42px
}

.detail-tabs a {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 5px;
	text-decoration: none;
	color: #333;
	font-size: 16px;
	border-bottom: 3px solid transparent
}

.detail-tabs a.active,
.detail-tabs a:hover {
	color: #1457e2;
	border-color: #1457e2;
	font-weight: bold;
}

.detail-tabs small {
	background: #f0f3f7;
	border-radius: 9px;
	padding: 1px 5px
}

.detail-content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 345px;
	gap: 28px;
	padding-top: 28px;
	padding-bottom: 80px
}

.detail-main-column {
	min-width: 0
}

.detail-section {
	scroll-margin-top: 160px;
	background: #fff;
	border-radius: 16px;
	padding: 34px;
	margin-bottom: 22px;
	box-shadow: 0 5px 20px rgba(43, 55, 86, .05)
}

.detail-section>header>span,
.reward-heading>span {
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .17em;
	color: #2b65df
}

.detail-section>header h2,
.reward-heading h2 {
	font-size: 23px;
	font-weight: 900;
	margin: 4px 0 22px
}

.project-story>img {
	width: 100%;
	height: 390px;
	object-fit: cover;
	border-radius: 13px;
	margin-bottom: 22px
}

.project-story p {
	font-size: 13px;
	color: #5f6d80;
	line-height: 2
}

.project-story h3 {
	font-size: 18px;
	font-weight: 900;
	margin: 28px 0 10px
}

.story-feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 13px;
	margin: 24px 0
}

.story-feature-grid div {
	display: grid;
	text-align: center;
	padding: 22px 12px;
	border-radius: 12px;
	background: #f5f8fd
}

.story-feature-grid i {
	font-size: 25px;
	color: #1c5cdf
}

.story-feature-grid b {
	margin: 7px 0 3px
}

.story-feature-grid span {
	font-size: 10px;
	color: #8490a0
}

.fund-list {
	border: 1px solid #edf0f4;
	border-radius: 12px;
	padding: 10px 20px
}

.fund-list div {
	display: flex;
	justify-content: space-between;
	padding: 12px 0
}

.fund-list div+div {
	border-top: 1px solid #edf0f4
}

.fund-list span {
	font-size: 12px;
	color: #617084
}

.fund-list b {
	font-size: 12px;
	color: #1559e1
}

.detail-faq .accordion-item {
	border: 0;
	border-bottom: 1px solid #edf0f4
}

.detail-faq .accordion-button {
	box-shadow: none;
	background: #fff;
	padding: 19px 0;
	font-size: 16px;
	font-weight: 800
}

.detail-faq .accordion-body {
	padding: 0 0 20px;
	color: #657286;
	font-size: 14px;
	line-height: 1.8
}

.update-list article {
	display: grid;
	grid-template-columns: 55px 1fr;
	gap: 18px;
	position: relative;
	padding-bottom: 28px
}

.update-list article+article {
	padding-top: 5px
}

.update-list time {
	height: 55px;
	border-radius: 10px;
	background: #edf3ff;
	color: #195add;
	display: grid;
	place-content: center;
	text-align: center
}

.update-list time b {
	font-size: 20px;
	line-height: 1
}

.update-list time span {
	font-size: 8px;
	letter-spacing: .1em
}

.update-list h3 {
	font-size: 16px;
	font-weight: 900
}

.update-list p {
	font-size: 14px;
	color: #6c7889
}

.update-list small {
	font-size: 13px;
	color: #97a0ad
}

.update-tag {
	display: inline-block;
	background: #e9faf4;
	color: #0a9e70;
	border-radius: 11px;
	padding: 4px 8px;
	font-size: 9px;
	margin-bottom: 6px
}

.update-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 9px;
	margin: 13px 0
}

.update-media img {
	width: 100%;
	height: 130px;
	object-fit: cover;
	border-radius: 9px
}

.load-updates {
	display: block;
	margin: auto;
	border: 0;
	background: #f3f6fa;
	border-radius: 19px;
	padding: 9px 18px;
	color: #687589;
	font-size: 11px
}

.comment-composer {
	display: flex;
	gap: 12px;
	padding: 15px;
	background: #f7f9fc;
	border-radius: 12px
}

.comment-composer>img,
.comment-list article>img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover
}

.comment-composer>div {
	flex: 1
}

.comment-composer textarea {
	width: 100%;
	height: 80px;
	border: 0;
	background: transparent;
	resize: none;
	outline: 0;
	font-size: 15px
}

.comment-composer>div>div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #e7ebf1;
	padding-top: 9px
}

.comment-composer span {
	font-size: 13px;
	color: #929ca9
}

.comment-composer button {
	border: 0;
	border-radius: 16px;
	background: #1759e3;
	color: #fff;
	padding: 7px 14px;
	font-size: 15px
}

.comment-composer button:disabled {
	opacity: .45
}

.comment-sort {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 0 11px;
	border-bottom: 1px solid #edf0f4
}

.comment-sort b {
	margin-right: auto
}

.comment-sort button {
	border: 0;
	background: none;
	font-size: 14px;
	color: #8590a0
}

.comment-sort button.active {
	color: #1959df;
	font-weight: 800
}

.comment-list article {
	display: flex;
	gap: 12px;
	padding: 20px 0;
	border-bottom: 1px solid #edf0f4
}

.comment-list article>div {
	flex: 1
}

.comment-list h4 {
	font-size: 15px;
	font-weight: 800
}

.comment-list h4 span {
	font-size: 12px;
	background: #edf4ff;
	color: #1d5ee0;
	border-radius: 30px;
	padding: 4px 8px
}

.comment-list p {
	font-size: 14px;
	color: #5f6c7f
}

.comment-list article>div>div {
	display: flex;
	gap: 15px;
	color: #929ba8
}

.comment-list time,
.comment-list button {
	font-size: 13px
}

.comment-list button {
	border: 0;
	background: none;
	color: #7e8999
}

.comment-like.active {
	color: #1d5edf !important
}

.comment-list blockquote {
	margin: 12px 0 0;
	background: #f5f7fa;
	border-radius: 8px;
	padding: 10px;
	font-size: 14px;
	color: #657286
}

.reward-column {
	scroll-margin-top: 160px
}

.reward-sticky {
	position: sticky;
	top: 162px
}

.reward-heading {
	border-radius: 14px;
	padding: 22px;
	margin-bottom: 13px
}

.reward-heading h2 {
	margin-bottom: 3px
}

.reward-heading p {
	margin: 0;
	color: #8993a1;
	font-size: 11px
}

.reward-card {
	background: #fff;
	border: 2px solid transparent;
	border-radius: 14px;
	padding: 20px;
	margin-bottom: 13px;
	box-shadow: 0 5px 18px rgba(43, 55, 86, .06);
	cursor: pointer;
	transition: .25s
}

.reward-card:hover,
.reward-card.active {
	border-color: #1c5ee2;
	transform: translateY(-2px)
}

.reward-top {
	display: flex;
	align-items: center;
	justify-content: space-between
}

.reward-top>i {
	color: #1aa779
}

.reward-type {
	font-size: 11px;
	color: #1d5de0;
	background: #edf3ff;
	border-radius: 12px;
	padding: 4px 8px;
	font-weight: 800
}

.reward-free .reward-type {
	color: #08a371;
	background: #eaf9f4
}

.reward-top small {
	font-size: 9px;
	color: #e15353
}

.reward-card h3 {
	font-size: 27px;
	font-weight: 900;
	margin: 14px 0 8px
}

.reward-card h3 small {
	font-size: 10px
}

.reward-card>p {
	font-size: 11px;
	color: #677487;
	line-height: 1.7
}

.reward-card>img {
	width: 100%;
	height: 135px;
	object-fit: cover;
	border-radius: 9px;
	margin: 8px 0
}

.reward-card ul {
	list-style: none;
	padding: 0;
	margin: 13px 0
}

.reward-card li {
	font-size: 13px;
	color: #687488;
	margin: 7px 0
}

.reward-card li i {
	color: #0aa476;
	margin-right: 5px
}

.reward-card>button {
	width: 100%;
	border: 0;
	border-radius: 20px;
	background: #1759e2;
	color: #fff;
	padding: 10px;
	font-size: 16px;
	font-weight: 800;
	margin-top: 20px;
}

.reward-free>button {
	background: #08a875
}

.reward-limited {
	background: #fffdf8
}

.share-dialog,
.support-dialog {
	padding: 28px;
	border: 0;
	border-radius: 16px
}

.share-dialog>h3,
.support-dialog>h3 {
	font-weight: 900
}

.share-dialog>div {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 20px
}

.share-dialog>div button {
	border: 0;
	border-radius: 10px;
	padding: 15px;
	background: #f3f6fa
}

.share-dialog>div i {
	display: block;
	font-size: 23px;
	color: #1759e2
}

.support-dialog {
	text-align: center
}

.support-dialog>i {
	font-size: 42px;
	color: #e54c69
}

.support-dialog label {
	text-align: left;
	font-size: 11px
}

.reward-bottom-bar {
	display: none;
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 40;
	width: min(570px, calc(100% - 30px));
	background: #152239;
	color: #fff;
	border-radius: 14px;
	padding: 12px 14px;
	box-shadow: 0 10px 35px rgba(0, 0, 0, .22);
	align-items: center;
	gap: 14px
}

.reward-bottom-bar.show {
	display: flex
}

.reward-bottom-bar>div {
	display: grid;
	flex: 1
}

.reward-bottom-bar span {
	font-size: 8px;
	color: #aeb8c8
}

.reward-bottom-bar b {
	font-size: 11px
}

.reward-bottom-bar>strong {
	font-size: 16px
}

.reward-bottom-bar>button {
	border: 0;
	border-radius: 18px;
	background: #2564ec;
	color: #fff;
	padding: 9px 15px;
	font-size: 11px
}

@media(max-width:1100px) {
	.detail-overview {
		grid-template-columns: 1fr
	}

	.detail-summary {
		padding: 10px
	}

	.detail-content-layout {
		grid-template-columns: minmax(0, 1fr) 310px
	}
}

@media(max-width:860px) {
	.detail-gallery {
		height: 390px
	}

	.detail-content-layout {
		grid-template-columns: 1fr
	}

	.reward-sticky {
		position: static
	}

	.detail-tabs .container {
		overflow-x: auto;
		gap: 25px
	}

	.detail-tabs a {
		white-space: nowrap
	}

	.detail-section {
		padding: 25px
	}

	.reward-column {
		order: -1
	}

	.reward-heading {
		display: none
	}

	.reward-sticky {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px
	}

	.reward-card {
		margin: 0
	}

	.reward-free {
		grid-column: 1/-1
	}
}

@media(max-width:576px) {
	.detail-breadcrumb {
		height: 48px;
		white-space: nowrap;
		overflow: hidden
	}

	.detail-overview {
		padding: 12px;
		border-radius: 0
	}

	.detail-gallery {
		height: 280px
	}

	.detail-thumbs {
		height: 62px
	}

	.detail-summary h1 {
		font-size: 24px
	}

	.detail-raised b {
		font-size: 28px
	}

	.detail-stats {
		gap: 8px
	}

	.detail-stats>div+div {
		padding-left: 8px
	}

	.detail-favorite span {
		display: none
	}

	.detail-tabs {
		top: 66px
	}

	.detail-content-layout {
		padding-top: 14px
	}

	.detail-section {
		padding: 20px;
		border-radius: 12px
	}

	.project-story>img {
		height: 240px
	}

	.story-feature-grid {
		grid-template-columns: 1fr
	}

	.reward-sticky {
		grid-template-columns: 1fr
	}

	.reward-free {
		grid-column: auto
	}

	.comment-composer span {
		display: none
	}

	.update-media img {
		height: 95px
	}
}

.banner-ph {
	width: 100%;
	height: 140px;
	display: block;
	object-fit: cover
}

.video-ph {
	height: 330px;
	position: relative;
	display: grid;
	place-content: center;
	text-align: center;
	color: #fff;
	overflow: hidden
}

.video-ph img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.42)
}

.video-ph i,
.video-ph span {
	position: relative;
	z-index: 1
}

.video-ph i {
	font-size: 58px
}

.video-ph span {
	font-weight: 800
}

/* 详情页可读性与评论交互增强 */
.detail-page {
	font-size: 15px
}

.detail-intro,
.project-story p {
	font-size: 15px
}

.detail-labels span,
.detail-progress strong,
{
	font-size: 13px
}

.detail-stats span,
.detail-risk,
.creator-card span,
.creator-card p {
	font-size: 14px
}

.creator-card h3 {
	font-size: 15px
}

.creator-card button {
	font-size: 13px
}

.detail-faq .accordion-button {
	font-size: 15px
}

.detail-faq .accordion-body {
	font-size: 14px
}

.update-list h3 {
	font-size: 17px
}

.update-list p {
	font-size: 14px
}

.update-list small,
.update-tag {
	font-size: 12px
}

.reward-heading p,
.reward-card>p {
	font-size: 14px
}

.reward-type,
.reward-card>button {
	font-size: 13px
}

.reward-card li {
	font-size: 13px
}

.reward-top small {
	font-size: 12px
}

.reward-bottom-bar span {
	font-size: 11px
}

.reward-bottom-bar b,
.reward-bottom-bar>button {
	font-size: 13px
}

.comment-composer {
	gap: 16px;
	padding: 18px
}

.comment-composer>img,
.comment-list article>img {
	width: 46px;
	height: 46px
}

.comment-composer textarea {
	height: 100px;
	line-height: 1.7;
	font-size: 15px
}

.comment-composer>div>.reply-target {
	border: 0;
	padding: 8px 10px;
	margin-bottom: 8px;
	border-radius: 8px;
	background: #edf3ff;
	color: #315ea8;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.reply-target span {
	font-size: 13px;
	color: #315ea8
}

.reply-target button {
	padding: 0;
	background: transparent;
	color: #6e7c90;
	font-size: 12px
}

.comment-composer>div>.comment-tools {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #e7ebf1;
	padding-top: 11px
}

.comment-tools>div {
	display: flex;
	align-items: center;
	gap: 10px
}

.comment-tools #insertEmoji {
	padding: 3px;
	background: transparent;
	color: #6e7c90;
	font-size: 20px
}

.comment-tools span,
.comment-tools small {
	font-size: 12px;
	color: #8c97a6
}

.comment-tools #submitComment {
	padding: 9px 18px;
	font-size: 14px
}

.comment-sort {
	padding: 25px 0 13px
}

.comment-sort b {
	font-size: 16px
}

.comment-sort button {
	font-size: 14px;
	padding: 5px 9px;
	border-radius: 14px
}

.comment-sort button.active {
	background: #edf3ff
}

.comment-list article {
	gap: 15px;
	padding: 24px 0
}

.comment-list h4 {
	font-size: 16px
}

.comment-list h4 span {
	font-size: 12px
}

.comment-list p {
	font-size: 15px;
	line-height: 1.75
}

.comment-list time,
.comment-list button {
	font-size: 13px
}

.comment-list blockquote {
	padding: 13px;
	font-size: 14px;
	line-height: 1.7
}

.replying-to {
	display: inline-block;
	margin: 0 0 5px;
	padding: 3px 8px;
	border-radius: 10px;
	background: #f0f3f8;
	color: #56708f;
	font-size: 12px
}

.load-comments {
	display: block;
	margin: 22px auto 0;
	border: 0;
	border-radius: 20px;
	padding: 10px 20px;
	background: #f0f4f9;
	color: #52647b;
	font-size: 13px
}

.new-comment {
	animation: comment-in .35s ease both
}

.comment-like.active {
	background: #edf3ff !important;
	border-radius: 14px;
	padding: 4px 8px;
	color: #1d5edf !important
}

@keyframes comment-in {
	from {
		opacity: 0;
		transform: translateY(-8px)
	}

	to {
		opacity: 1;
		transform: none
	}
}

@media(max-width:576px) {
	.comment-composer {
		padding: 14px
	}

	.comment-composer>img,
	.comment-list article>img {
		width: 40px;
		height: 40px
	}

	.comment-tools>div:first-child span {
		display: none
	}

	.reply-target span {
		display: inline
	}

	.comment-tools #submitComment {
		font-size: 13px;
		padding: 8px 13px
	}

	.comment-list p {
		font-size: 14px
	}

	.detail-intro,
	.project-story p {
		font-size: 14px
	}
}