: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
}

.home-content-start {
	padding-top: 28px
}

.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 {
	align-items: center;
	gap: 20px;
	margin-left: 24px
}

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

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

@media(min-width:768px) and (max-width:1199px) {
	.navbar-expand-lg>.container {
		width: 100%;
		max-width: none !important;
		flex-wrap: nowrap !important
	}

	.navbar-expand-lg .navbar-brand {
		flex: 0 0 auto
	}

	.navbar-expand-lg .navbar-toggler {
		display: none
	}

	.navbar-expand-lg .navbar-collapse {
		display: flex !important;
		flex-wrap: nowrap;
		flex-basis: auto;
		flex-grow: 1;
		width: auto;
		min-width: 0
	}

	.navbar-expand-lg .navbar-nav {
		min-width: 0;
		flex-direction: row;
		gap: 16px;
		margin-left: 16px
	}

	.navbar-expand-lg .search {
		width: 200px;
		flex: 0 0 200px
	}
}

@media(min-width:768px) and (max-width:991px) {
	.navbar-expand-lg .search {
		display: none
	}

	.navbar-expand-lg .login {
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0 10px
	}

	.navbar-expand-lg .btn-main {
		flex: 0 0 auto;
		padding: 10px 14px;
		white-space: nowrap
	}

	.navbar-expand-lg .logged-actions {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		margin-top: 0;
		padding-top: 0;
		border-top: 0
	}

	.navbar-expand-lg .user-account {
		max-width: 154px
	}

	.navbar-expand-lg .user-account>span {
		min-width: 0
	}

	.navbar-expand-lg .user-account b {
		display: block;
		max-width: 92px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}
}

.nav-overflow {
	position: relative;
	display: flex;
	align-items: center;
	height: 70px
}

.nav-overflow-toggle {
	display: inline-flex;
	height: 70px;
	align-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap
}

.nav-overflow-toggle i {
	margin-left: 3px;
	font-size: 11px
}

.nav-overflow-toggle:hover,
.nav-overflow-toggle.active,
.nav-overflow-toggle[aria-expanded="true"] {
	color: var(--primary)
}

.site-contact {
	position: relative;
	flex: 0 0 auto
}

.site-contact>summary {
	list-style: none
}

.site-contact>summary::-webkit-details-marker {
	display: none
}

.site-contact-toggle {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid #e3e8ef;
	border-radius: 50%;
	background: #fff;
	color: #556274;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease
}

.site-contact-toggle:hover,
.site-contact[open] .site-contact-toggle {
	border-color: #b8c8ff;
	background: #f4f7ff;
	color: var(--primary)
}

.site-contact-toggle:focus-visible {
	outline: 3px solid rgba(40, 87, 255, .2);
	outline-offset: 2px
}

.site-contact-panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 1100;
	width: max-content;
	max-width: min(420px, calc(100vw - 32px));
	padding: 18px;
	border: 1px solid #e0e6ef;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(22, 36, 61, .16)
}

.site-contact-panel>strong {
	display: block;
	margin-bottom: 12px;
	font-size: 15px
}

.site-contact-lines {
	display: grid;
	gap: 8px
}

.site-contact-lines a {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #4e5c70;
	font-size: 13px;
	text-decoration: none
}

.site-contact-lines a:hover {
	color: var(--primary)
}

.site-contact-qrs {
	display: flex;
	gap: 14px;
	margin-top: 15px;
	padding-top: 15px;
	border-top: 1px solid #edf0f4
}

.site-contact-qr {
	width: 116px;
	margin: 0;
	text-align: center
}

.site-contact-qr img {
	width: 116px;
	height: 116px;
	display: block;
	border: 1px solid #edf0f4;
	object-fit: contain
}

.site-contact-qr figcaption {
	margin-top: 7px;
	color: #69758a;
	font-size: 12px
}

.navbar-nav .nav-overflow-menu {
	position: absolute;
	top: calc(100% - 8px);
	left: 0;
	z-index: 1000;
	min-width: 132px;
	margin-top: 0;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 6px;
	box-shadow: 0 12px 30px rgba(26, 40, 65, .14)
}

.navbar-nav .nav-overflow-menu a {
	padding: 9px 12px;
	border-radius: 4px;
	line-height: 1.4
}

.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
}

.navbar .login {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.navbar .btn-main {
	flex: 0 0 auto;
	white-space: nowrap;
	word-break: keep-all
}

.global-message-link {
	width: 40px;
	height: 40px;
	position: relative;
	flex: 0 0 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #f3f5f9;
	color: #546176;
	text-decoration: none;
	font-size: 18px;
	transition-property: color, background-color, transform;
	transition-duration: 150ms;
	transition-timing-function: ease-out
}

.global-message-link:hover,
.global-message-link:focus-visible {
	background: #edf2ff;
	color: var(--primary)
}

.global-message-link:focus-visible {
	outline: 3px solid rgba(28, 97, 255, .2);
	outline-offset: 2px
}

.global-message-link:active {
	transform: scale(.96)
}

.global-message-link>em {
	position: absolute;
	top: -4px;
	right: -6px;
	min-width: 19px;
	height: 19px;
	display: grid;
	place-items: center;
	padding: 0 5px;
	border: 2px solid #fff;
	border-radius: 10px;
	background: #e54855;
	color: #fff;
	font-size: 11px;
	line-height: 15px;
	font-style: normal;
	font-weight: 800;
	font-variant-numeric: tabular-nums
}

.global-message-link>em[hidden] {
	display: none
}

.global-message-link.is-notifying>i {
	animation: global-message-notify 650ms ease-out
}

@keyframes global-message-notify {
	0%, 100% { transform: rotate(0deg) }
	25% { transform: rotate(-12deg) scale(1.08) }
	50% { transform: rotate(10deg) scale(1.08) }
	75% { transform: rotate(-5deg) }
}

@media(prefers-reduced-motion: reduce) {
	.global-message-link,
	.global-message-link.is-notifying>i {
		animation: none;
		transition-duration: 0s
	}
}

@media(max-width:767px) {
	.navbar .login {
		max-width: none
	}

	.site-contact {
		margin: 12px 0
	}

	.site-contact-panel {
		right: auto;
		left: 0
	}

	.global-message-link {
		margin: 0 8px 0 auto
	}
}

.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);
}

.common-footer>hr {
	margin: 0;
	border-color: rgba(255, 255, 255, .14);
	opacity: 1;
}

.site-footer-records {
	display: flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 0;
	padding: 12px 20px !important;
	color: rgba(255, 255, 255, .64);
	line-height: 1.5;
}

.site-footer-record {
	display: inline-flex;
	align-items: center;
}

.site-footer-record+.site-footer-record::before {
	margin: 0 10px;
	color: rgba(255, 255, 255, .32);
	content: "·";
}

.site-footer-records a {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.site-footer-records a:hover {
	color: #fff;
	text-decoration: underline;
}

.site-footer-license {
	cursor: pointer;
}

.site-friend-links {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 22px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.site-friend-links-group {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: start;
	gap: 20px;
}

.site-friend-links-title {
	margin: 0;
	padding-top: 9px;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.site-friend-links-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-friend-links-logo a {
	display: flex;
	width: 120px;
	height: 48px;
	align-items: center;
	justify-content: center;
	padding: 7px 12px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 6px;
	background: #fff;
}

.site-friend-links-logo img {
	display: block;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}

.site-friend-links-text a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: rgba(255, 255, 255, .82);
	font-size: 14px;
	text-decoration: none;
}

.site-friend-links-text .site-friend-links-title {
	display: flex;
	min-height: 32px;
	align-items: center;
	padding-top: 0;
}

.site-friend-links-text li+li::before {
	margin-right: 10px;
	color: rgba(255, 255, 255, .3);
	content: "·";
}

.site-friend-links a:hover {
	color: #fff;
	text-decoration: underline;
}

.site-friend-links a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 767.98px) {
	.site-friend-links {
		gap: 20px;
		padding: 20px 0;
	}

	.site-friend-links-group {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.site-friend-links-title {
		padding-top: 0;
	}
}

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

._footer_qrcode {
	display: none;
}

._footer_qrcode.is-configured {
	display: block;
}

._footer_qrcode[hidden],
._footer_qrcode img[hidden],
.site-qr-preview[hidden] {
	display: none !important;
}

._footer_qrcode img {
	width: 120px;
	aspect-ratio: 1;
	object-fit: contain;
	cursor: zoom-in;
}

._footer_qrcode img:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .85);
	outline-offset: 4px;
}

.site-qr-preview {
	position: fixed;
	z-index: 1200;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(15, 18, 23, .78);
}

.site-qr-preview-panel {
	position: relative;
	width: min(440px, calc(100vw - 32px));
	padding: 28px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
	color: #182235;
	text-align: center;
}

.site-qr-preview-panel h2 {
	margin: 0 44px 20px;
	font-size: 20px;
	line-height: 1.4;
}

.site-qr-preview-image {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
}

.site-qr-preview.is-document .site-qr-preview-panel {
	width: min(760px, calc(100vw - 32px));
	padding: 24px;
}

.site-qr-preview.is-document .site-qr-preview-image {
	height: auto;
	max-height: calc(100dvh - 136px);
	aspect-ratio: auto;
}

.site-qr-preview-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #4b5565;
	font-size: 20px;
}

.site-qr-preview-close:hover {
	background: #f1f3f6;
	color: #182235;
}

.site-qr-preview-close:focus-visible {
	outline: 3px solid rgba(47, 91, 234, .22);
	outline-offset: 2px;
}

body.site-qr-preview-open {
	overflow: hidden;
}

.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-top: 48px;
	padding-bottom: 80px
}

.project-filters {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding: 0 0 20px;
	border-bottom: 1px solid #e7eaf0
}

.project-filter-title {
	display: flex;
	align-items: baseline;
	gap: 24px;
	min-width: max-content
}

.project-filter-title h1 {
	margin: 0;
	font-size: 28px;
	font-weight: 900;
	color: #172033
}

.project-filter-title p {
	margin: 0;
	color: #7a8496;
	font-size: 14px
}

.project-filter-title b {
	color: #0751df;
	font-variant-numeric: tabular-nums
}

.project-filter-controls {
	display: flex;
	align-items: center;
	gap: 8px
}

.project-filter-select {
	position: relative;
	display: block;
	margin: 0
}

.project-filter-select select {
	appearance: none;
	border: 0;
	min-width: 132px;
	height: 42px;
	padding: 0 36px 0 14px;
	border-radius: 6px;
	background: transparent;
	color: #263249;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	outline: none
}

.project-filter-select select:hover {
	background: #f5f7fb
}

.project-filter-select select:focus-visible {
	box-shadow: 0 0 0 3px rgba(7, 81, 223, .16)
}

.project-filter-select i {
	position: absolute;
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
	color: #8b94a5;
	font-size: 12px;
	pointer-events: none
}

.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
}

.project-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 0;
	list-style: none
}

.project-page-button {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #dbe2ea;
	border-radius: 8px;
	background: #fff;
	color: #526078;
	font: inherit;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer
}

.project-page-button:hover,
.project-page-button:focus-visible {
	border-color: #0a4cdf;
	color: #0a4cdf
}

.project-page-button:focus-visible {
	outline: 3px solid rgba(10, 76, 223, .2);
	outline-offset: 2px
}

.project-page-item.active .project-page-button {
	border-color: #0a4cdf;
	background: #0a4cdf;
	color: #fff
}

.project-page-item.disabled .project-page-button {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none
}

.project-page-ellipsis {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 40px;
	color: #7a8496;
	font-weight: 600
}

.projects-page footer {
	background: #fff
}

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

	.project-filters {
		align-items: flex-start;
		flex-direction: column;
		gap: 16px
	}
}

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

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

	.projects-main {
		padding-top: 28px
	}

	.project-filters {
		gap: 14px;
		padding-bottom: 16px
	}

	.project-filter-title {
		align-items: baseline;
		gap: 12px
	}

	.project-filter-title h1 {
		font-size: 24px
	}

	.project-filter-controls {
		width: 100%;
		overflow-x: auto;
		padding: 3px 3px 8px;
		overscroll-behavior-inline: contain
	}

	.project-filter-select {
		flex: none
	}

	.project-filter-select select {
		min-width: 126px;
		background: #f5f7fb
	}

	.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:767px) {
	.navbar-nav {
		flex-direction: column;
		margin-left: 0;
		gap: 0
	}

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

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

@media(max-width:991px) {

	.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
	}
}

.project-loading,
.remote-list-empty,
.remote-empty {
	display: grid;
	place-items: center;
	min-height: 180px;
	padding: 32px;
	color: #68758a;
	text-align: center;
}

.project-card-skeleton {
	overflow: hidden;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
}

[aria-busy="true"] > [data-prerendered-project],
[aria-busy="true"] > [data-prerendered-hot],
[aria-busy="true"] > [data-prerendered-success] {
	display: none;
}

[aria-busy="false"] > [data-prerender-loading] {
	display: none;
}

.project-skeleton-cover,
.project-skeleton-line {
	display: block;
	background: linear-gradient(90deg, #edf1f5 25%, #f7f9fb 50%, #edf1f5 75%);
	background-size: 200% 100%;
	animation: project-skeleton-pulse 1.25s ease-in-out infinite;
}

.project-skeleton-cover {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.project-skeleton-body {
	display: grid;
	gap: 14px;
	padding: 20px;
}

.project-skeleton-line {
	width: 100%;
	height: 13px;
	border-radius: 4px;
}

.project-skeleton-title {
	width: 72%;
	height: 20px;
}

.project-skeleton-short {
	width: 48%;
}

@keyframes project-skeleton-pulse {
	to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.project-skeleton-cover,
	.project-skeleton-line {
		animation: none;
	}
}

.remote-empty i {
	font-size: 28px;
}

.remote-rich-text img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 760px;
	height: auto;
	margin: 24px auto 8px;
	border-radius: 8px;
	object-fit: contain;
	outline: 1px solid rgba(0, 0, 0, .1);
	outline-offset: -1px;
}

.remote-rich-text {
	color: #39455a;
	font-size: 16px;
	line-height: 1.9;
	overflow-wrap: anywhere;
}

.remote-rich-text p,
.remote-rich-text ul,
.remote-rich-text ol,
.remote-rich-text figure,
.remote-rich-text section {
	margin: 0 0 1.25em;
}

.remote-rich-text ul,
.remote-rich-text ol {
	padding-left: 1.7em;
}

.remote-rich-text figcaption {
	color: #7c8799;
	font-size: 13px;
	text-align: center;
}

.remote-rich-text h3 {
	margin: 1.8em 0 .75em;
	color: #202b3d;
	font-size: 20px;
	font-weight: 800;
}

.remote-update {
	padding: 22px 0;
	border-bottom: 1px solid #e7ebf0;
}

@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 {
	aspect-ratio: 16 / 9;
	height: auto;
	border-radius: 14px;
	overflow: hidden;
	background: #f4f6f8
}

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

.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;
	border-bottom: 1px solid #edf0f4;
	margin-top: 18px;
	padding: 14px 0;
	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,
.detail-tabs button {
	height: 100%;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 0;
	background: transparent;
	border: 0;
	text-decoration: none;
	color: #333;
	font-size: 16px;
	border-bottom: 3px solid transparent;
	cursor: pointer
}

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

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

[data-detail-panel][hidden] {
	display: none !important
}

.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
}

.review-summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0 20px;
	border-bottom: 1px solid #edf0f4
}

.review-summary>strong {
	font-size: 36px;
	line-height: 1;
	font-variant-numeric: tabular-nums
}

.review-summary p {
	margin: 4px 0 0;
	color: #7d8898;
	font-size: 13px
}

.review-stars {
	display: inline-flex;
	gap: 3px;
	color: #e79b24
}

.review-list article {
	display: flex;
	gap: 14px;
	padding: 22px 0;
	border-bottom: 1px solid #edf0f4
}

.review-list article>img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover
}

.review-list article>div {
	flex: 1;
	min-width: 0
}

.review-list header,
.review-list header>div {
	display: flex;
	align-items: center
}

.review-list header {
	justify-content: space-between;
	gap: 16px
}

.review-list header>div {
	gap: 12px
}

.review-list time {
	color: #8b95a3;
	font-size: 13px;
	white-space: nowrap
}

.review-list p {
	margin: 10px 0 0;
	color: #4f5c6d;
	font-size: 15px;
	line-height: 1.7;
	overflow-wrap: anywhere
}

.load-reviews {
	display: block;
	margin: 22px auto 0;
	border: 1px solid #dce3ec;
	background: #fff;
	border-radius: 6px;
	padding: 9px 20px;
	color: #40516a
}

.load-reviews:hover {
	border-color: #1457e2;
	color: #1457e2
}

.load-reviews:disabled {
	opacity: .6
}

.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
}

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

.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: auto
	}

	.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
	}

	.review-list header {
		align-items: flex-start;
		flex-direction: column;
		gap: 5px
	}
}

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

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

	.detail-gallery {
		height: auto
	}

	.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
	}
}
.home-community-row {
	display: grid;
	gap: 4px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(30, 45, 38, .1);
	color: inherit;
	text-decoration: none;
}
.home-community-row b { font-size: 14px; line-height: 1.45; }
.home-community-row span { color: #6d7a72; font-size: 12px; }
.home-community-row:hover b, .home-community-more:hover { color: var(--green); }
.home-community-more { display: inline-flex; gap: 6px; align-items: center; margin-top: 14px; font-weight: 600; }

.project-detail-error[hidden] { display: none !important; }
.project-detail-error {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 44px;
	margin-bottom: 44px;
	padding: 24px;
	background: #fff;
	box-shadow: 0 12px 36px rgba(15, 23, 42, .08), 0 0 0 1px rgba(15, 23, 42, .06);
	border-radius: 8px;
}
.project-detail-error>i { color: #c43c3c; font-size: 30px; }
.project-detail-error>div { min-width: 0; flex: 1; }
.project-detail-error h1 { margin: 0 0 6px; font-size: 22px; text-wrap: balance; }
.project-detail-error p { margin: 0; color: #667085; overflow-wrap: anywhere; }
.project-detail-error button {
	min-width: 120px;
	min-height: 44px;
	border: 0;
	border-radius: 6px;
	background: #1d5edf;
	color: #fff;
	font-weight: 700;
}
#projectDetailRoot.is-error>:not(#projectDetailError) { display: none !important; }
.project-detail-skeleton-media {
	position: absolute;
	inset: 0;
	background: #e9eef4;
	animation: project-detail-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes project-detail-pulse { to { opacity: .55; } }
.project-detail-section-loading {
	min-height: 100px;
	display: grid;
	place-items: center;
	color: #758196;
	background: #f5f7fa;
	border-radius: 6px;
}
.project-image-empty {
	display: grid !important;
	place-items: center;
	align-content: center;
	gap: 10px;
	min-height: 420px;
	background: #f1f4f8;
	color: #718096;
}
.project-image-empty i { font-size: 38px; }
.creator-card.is-unavailable { cursor: default; }
.creator-card.is-unavailable h3 { color: #667085; }
.detail-raised b,
.detail-progress strong,
.detail-stats b,
.detail-tabs small,
.reward-card h3 { font-variant-numeric: tabular-nums; }
.detail-gallery img,
.detail-thumbs img { outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; }
.share-modal-dialog { max-width: 620px; }
.share-dialog {
	max-height: min(86vh, 760px);
	padding: 26px 30px 28px;
	overflow-y: auto;
	color: #111827;
}
.share-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.share-dialog-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 850;
	line-height: 1.3;
}
.share-dialog-header .btn-close {
	margin: -6px -6px -6px 0;
}
.share-qr-panel {
	text-align: center;
}
.share-qr-panel canvas {
	display: block;
	width: 180px !important;
	height: 180px !important;
	margin: 0 auto 8px
}
.share-qr-panel p {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 12px
}
.share-link-row {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}
.share-link-row input {
	min-width: 0;
	flex: 1;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: #4b5563;
	font-size: 13px;
	outline: none;
}
.share-link-row input:focus {
	border-color: #1759e2;
	box-shadow: 0 0 0 3px rgba(23, 89, 226, .12);
}
.share-link-row button {
	flex: 0 0 auto;
	min-width: 72px;
	border: 0;
	border-radius: 8px;
	background: #1759e2;
	color: #fff;
	font-weight: 700;
}
.share-platform-group + .share-platform-group { margin-top: 18px; }
.share-platform-group h4 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 800;
}
.share-platforms {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.share-platforms button {
	min-height: 34px;
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: #303846;
	font-size: 13px;
	line-height: 1;
	transition: border-color .16s ease, color .16s ease, background-color .16s ease, transform .16s ease;
}
@media (hover:hover) {
	.share-platforms button:hover {
		border-color: #1759e2;
		background: #f4f7ff;
		color: #1759e2;
	}
}
.share-link-row button:active,
.share-platforms button:active { transform: scale(.97); }
.share-link-row button:focus-visible,
.share-platforms button:focus-visible,
.share-dialog-header .btn-close:focus-visible {
	outline: 3px solid rgba(23, 89, 226, .22);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.share-platforms button { transition: none; }
}
@media(max-width:575px) {
	.share-modal-dialog { margin: 12px; }
	.share-dialog { max-height: calc(100vh - 24px); padding: 22px 20px 24px; }
	.share-qr-panel canvas { width: 156px !important; height: 156px !important; }
	.share-link-row input { font-size: 12px; }
	.share-link-row button { min-width: 64px; }
	.share-platforms { gap: 8px; }
	.share-platforms button { padding: 7px 12px; }
}
.reward-card button:active:not(:disabled),
.project-detail-error button:active { transform: scale(.96); }
.reward-card button:disabled { cursor: not-allowed; opacity: .55; }
.remote-list-error { color: #a33a3a; }

@media(max-width:767px) {
	.project-detail-error { align-items: flex-start; flex-wrap: wrap; margin-top: 24px; padding: 18px; }
	.project-detail-error button { width: 100%; }
	.project-image-empty { min-height: 280px; }
}


.user-account b, .user-account small {
    max-width: 110px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-profile h2{
	max-width: 80%;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: auto !important;
	margin-right: auto !important;
}

.certification-type-options input:checked+span{
	    border-color: var(--primary);
	    background: #edf2ff;
	    box-shadow: 0 0 0 3px #f1f9ff;
}
.certification-type-options input:checked+span i {
    background: var(--primary);
}
.certification-field input:focus, .certification-field select:focus{ border-color: var(--primary);}
.certification-upload i,.certification-trust>i{color: var(--primary);}
.certification-history>header>span{
	    background:  #edf2ff;
	    color: var(--primary);
}

body.zc-dialog-open { overflow: hidden; }
.zc-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1090;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(15, 23, 42, .52);
	opacity: 0;
	transition: opacity .16s ease;
}
.zc-dialog-backdrop.is-visible { opacity: 1; }
.zc-dialog {
	width: min(520px, 100%);
	max-height: min(760px, calc(100vh - 40px));
	overflow: auto;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(15, 23, 42, .2);
	color: #182235;
	transform: translateY(8px) scale(.985);
	transition: transform .16s ease;
}
.zc-dialog-backdrop.is-visible .zc-dialog { transform: translateY(0) scale(1); }
.zc-dialog>header {
	position: relative;
	display: grid;
	grid-template-columns: 42px minmax(0, 1fr) 36px;
	gap: 14px;
	align-items: start;
	padding: 24px 24px 18px;
	border-bottom: 1px solid #edf0f4;
}
.zc-dialog-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #eef4ff;
	color: #2f5bea;
	font-size: 20px;
}
.zc-dialog-icon.is-success { background: #eaf8f1; color: #138a59; }
.zc-dialog-icon.is-warning { background: #fff6df; color: #b76d00; }
.zc-dialog-icon.is-danger { background: #fff0f0; color: #c43f45; }
.zc-dialog h2 { margin: 0; font-size: 19px; line-height: 1.45; }
.zc-dialog header p { margin: 5px 0 0; color: #667085; font-size: 14px; line-height: 1.65; white-space: pre-line; }
.zc-dialog-close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #667085;
}
.zc-dialog-close:hover { background: #f3f5f8; color: #182235; }
.zc-dialog-fields { display: grid; gap: 18px; padding: 22px 24px 6px; }
.zc-dialog-field { display: grid; gap: 7px; }
.zc-dialog-field label { color: #344054; font-size: 14px; font-weight: 700; }
.zc-dialog-field label em { color: #d14343; font-style: normal; }
.zc-dialog-field input,
.zc-dialog-field select,
.zc-dialog-field textarea {
	width: 100%;
	border: 1px solid #d7dee8;
	border-radius: 6px;
	background: #fff;
	padding: 11px 12px;
	color: #182235;
	font: inherit;
	line-height: 1.5;
	outline: 0;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.zc-dialog-field textarea { min-height: 112px; resize: vertical; }
.zc-dialog-field input:focus,
.zc-dialog-field select:focus,
.zc-dialog-field textarea:focus { border-color: #2f5bea; box-shadow: 0 0 0 3px rgba(47, 91, 234, .12); }
.zc-dialog-field [aria-invalid="true"] { border-color: #c43f45; box-shadow: 0 0 0 3px rgba(196, 63, 69, .1); }
.zc-dialog-field small { min-height: 18px; color: #7b8496; font-size: 12px; }
.zc-dialog-field-error,
.zc-dialog-form-error { color: #b4232d; font-size: 13px; }
.zc-dialog-field-error:empty,
.zc-dialog-form-error:empty { display: none; }
.zc-dialog-form-error { padding: 8px 24px 0; }
.zc-dialog footer { display: flex; justify-content: flex-end; gap: 10px; padding: 20px 24px 24px; }
.zc-dialog footer button {
	min-width: 92px;
	height: 42px;
	border: 1px solid #d7dee8;
	border-radius: 6px;
	background: #fff;
	color: #344054;
	font-weight: 700;
}
.zc-dialog footer .zc-dialog-confirm { border-color: #2f5bea; background: #2f5bea; color: #fff; }
.zc-dialog footer button:focus-visible,
.zc-dialog-close:focus-visible { outline: 3px solid rgba(47, 91, 234, .22); outline-offset: 2px; }
.zc-dialog footer button:active { transform: scale(.97); }
.zc-toast-region {
	position: fixed;
	z-index: 1100;
	top: 24px;
	left: 50%;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: min(520px, calc(100vw - 32px));
	padding: 12px 18px;
	border: 1px solid #cce9da;
	border-radius: 6px;
	background: #f0fbf5;
	box-shadow: 0 12px 30px rgba(15, 23, 42, .14);
	color: #176b49;
	font-size: 14px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -10px);
	transition: opacity .18s ease, transform .18s ease;
}
.zc-toast-region.is-error,
.zc-toast-region.is-danger { border-color: #f1caca; background: #fff4f4; color: #a8323a; }
.zc-toast-region.is-info { border-color: #cfdcf8; background: #f4f7ff; color: #2f5bea; }
.zc-toast-region.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 575px) {
	.zc-dialog-backdrop { align-items: end; padding: 12px; }
	.zc-dialog { max-height: calc(100vh - 24px); }
	.zc-dialog>header { grid-template-columns: 38px minmax(0, 1fr) 32px; padding: 20px 18px 16px; }
	.zc-dialog-icon { width: 38px; height: 38px; }
	.zc-dialog-fields { padding: 18px 18px 4px; }
	.zc-dialog footer { padding: 18px; }
	.zc-dialog footer button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.zc-dialog-backdrop,
	.zc-dialog,
	.zc-toast-region { transition: none; }
}