.gcts-campaign {
	--gcts-bg: linear-gradient(135deg, #08131e 0%, #12324a 52%, #1f7a63 100%);
	--gcts-bg-image: none;
	--gcts-panel: rgba(255, 255, 255, 0.08);
	--gcts-line: rgba(255, 255, 255, 0.12);
	--gcts-text: #f8fffb;
	--gcts-muted: rgba(248, 255, 251, 0.72);
	--gcts-accent: #9df270;
	--gcts-accent-2: #6ef2cf;
	--gcts-accent-fill: linear-gradient(90deg, #9df270, #6ef2cf);
	--gcts-locked: rgba(255, 255, 255, 0.06);
	--gcts-font-family: inherit;
	--gcts-title-size: 42px;
	--gcts-body-size: 16px;
	--gcts-counter-size: 50px;
	position: relative;
	overflow: hidden;
	padding: 28px;
	border-radius: 28px;
	background-image: linear-gradient(180deg, rgba(4, 10, 18, 0.3), rgba(4, 10, 18, 0.3)), var(--gcts-bg-image), var(--gcts-bg);
	background-size: cover, cover, cover;
	background-position: center, center, center;
	color: var(--gcts-text);
	font-family: var(--gcts-font-family);
	font-size: var(--gcts-body-size);
	box-shadow: 0 22px 80px rgba(5, 12, 18, 0.26);
}

.gcts-campaign::before {
	content: "";
	position: absolute;
	inset: -30% auto auto -10%;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(157, 242, 112, 0.24), transparent 70%);
	pointer-events: none;
}

.gcts-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}

.gcts-kicker {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gcts-accent);
}

.gcts-title {
	margin: 8px 0 10px;
	font-size: clamp(28px, 4vw, var(--gcts-title-size));
	line-height: 1;
	color: #fff;
}

.gcts-subtitle {
	margin: 0;
	max-width: 600px;
	color: var(--gcts-muted);
	font-size: 16px;
}

.gcts-total-card {
	position: relative;
	overflow: visible;
	min-width: 170px;
	padding: 18px 20px;
	border: 1px solid var(--gcts-line);
	border-radius: 22px;
	background: var(--gcts-panel);
	text-align: right;
	backdrop-filter: blur(16px);
}

.gcts-total-card.is-celebrating {
	animation: gcts-counter-pop 1.05s ease;
	border-color: rgba(157, 242, 112, 0.72);
	box-shadow: 0 0 0 8px rgba(157, 242, 112, 0.08), 0 24px 60px rgba(0, 0, 0, 0.24);
}

.gcts-total-label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--gcts-muted);
}

.gcts-total-value {
	font-size: clamp(32px, 5vw, var(--gcts-counter-size));
	line-height: 1;
}

.gcts-fed-flash {
	position: absolute;
	top: 50%;
	left: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	max-width: min(320px, calc(100vw - 48px));
	padding: 14px 20px;
	border: 1px solid rgba(157, 242, 112, 0.68);
	border-radius: 18px;
	background:
		linear-gradient(135deg, rgba(157, 242, 112, 0.96), rgba(110, 242, 207, 0.92)),
		rgba(255, 255, 255, 0.96);
	color: #07121c;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 22px 44px rgba(0, 0, 0, 0.34), 0 0 0 8px rgba(157, 242, 112, 0.12);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) scale(0.86);
	z-index: 6;
}

.gcts-total-card.is-celebrating .gcts-fed-flash {
	animation: gcts-fed-flash 2.25s ease both;
}

.gcts-total-card.is-celebrating .gcts-total-value {
	animation: gcts-number-pulse 1.05s ease;
}

.gcts-total-meta,
.gcts-impact-meta,
.gcts-tier-kg {
	display: block;
	margin-top: 7px;
	color: var(--gcts-muted);
	font-size: 13px;
	font-weight: 700;
}

.gcts-impact-strip {
	position: relative;
	display: grid;
	grid-template-columns: minmax(260px, 520px);
	gap: 14px;
	margin-bottom: 22px;
}

.gcts-bowl-card,
.gcts-countdown-card {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	min-height: 112px;
	padding: 18px 20px;
	border: 1px solid var(--gcts-line);
	border-radius: 22px;
	background: var(--gcts-panel);
	backdrop-filter: blur(16px);
}

.gcts-bowl-visual {
	position: relative;
	width: 142px;
	height: 104px;
	flex: 0 0 142px;
	overflow: visible;
	filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.28));
}

.gcts-bowl-food {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 31px;
	min-height: 5px;
	max-height: 42px;
	border-radius: 45% 45% 24px 24px;
	background:
		radial-gradient(circle at 18% 18%, #f4c16b 0 4px, transparent 5px),
		radial-gradient(circle at 35% 48%, #9b5c28 0 4px, transparent 5px),
		radial-gradient(circle at 55% 24%, #d58735 0 4px, transparent 5px),
		radial-gradient(circle at 78% 46%, #f0ad4f 0 4px, transparent 5px),
		linear-gradient(180deg, #d99545, #7f441e);
	box-shadow: inset 0 7px 13px rgba(255, 235, 186, 0.3), inset 0 -8px 12px rgba(69, 32, 10, 0.32);
	clip-path: ellipse(50% 48% at 50% 18%);
	transition: height 0.45s ease;
	z-index: 3;
}

.gcts-bowl-rim {
	position: absolute;
	left: 7px;
	right: 7px;
	bottom: 42px;
	height: 32px;
	border: 7px solid rgba(236, 241, 242, 0.96);
	border-radius: 50%;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.82), rgba(171, 182, 190, 0.38) 50%, rgba(255, 255, 255, 0.7)),
		linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(111, 123, 132, 0.2));
	box-shadow: inset 0 -6px 8px rgba(47, 57, 65, 0.22), 0 3px 0 rgba(255, 255, 255, 0.42);
	z-index: 4;
}

.gcts-bowl-base {
	position: absolute;
	left: 17px;
	right: 17px;
	bottom: 9px;
	height: 62px;
	border-radius: 18px 18px 46px 46px;
	background:
		linear-gradient(100deg, rgba(255, 255, 255, 0.72), rgba(184, 194, 201, 0.34) 24%, rgba(82, 95, 106, 0.5) 52%, rgba(247, 250, 250, 0.62) 76%, rgba(121, 134, 144, 0.5)),
		linear-gradient(180deg, #f1f4f4 0%, #b7c0c7 42%, #687581 100%);
	box-shadow: inset 0 14px 18px rgba(255, 255, 255, 0.42), inset 0 -16px 22px rgba(30, 40, 49, 0.32);
	z-index: 1;
}

.gcts-bowl-base::after {
	content: "";
	position: absolute;
	left: 19px;
	right: 19px;
	bottom: -5px;
	height: 10px;
	border-radius: 999px;
	background: rgba(16, 24, 32, 0.48);
	filter: blur(2px);
}

.gcts-impact-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gcts-muted);
}

.gcts-impact-value {
	display: block;
	font-size: 30px;
	line-height: 1;
	color: #fff;
}

.gcts-impact-meta {
	margin-top: 8px;
}

.gcts-countdown-card {
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	min-height: 0;
	margin-bottom: 22px;
	padding: 16px 20px;
}

.gcts-countdown-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	width: min(100%, 520px);
}

.gcts-countdown-grid span {
	display: block;
	min-width: 0;
	padding: 8px 6px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
	text-align: center;
}

.gcts-countdown-grid strong {
	display: block;
	font-size: clamp(22px, 2.8vw, 32px);
	line-height: 1;
	color: #fff;
}

.gcts-countdown-grid em {
	display: block;
	margin-top: 5px;
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gcts-muted);
}

.gcts-countdown-card.is-ended .gcts-countdown-grid {
	opacity: 0.58;
}

.gcts-progress-block {
	position: relative;
	margin-bottom: 22px;
	padding: 18px 20px;
	border: 1px solid var(--gcts-line);
	border-radius: 22px;
	background: var(--gcts-panel);
}

.gcts-progress-meta {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 10px;
	color: var(--gcts-muted);
	font-size: 14px;
}

.gcts-progress-bar {
	height: 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

.gcts-progress-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--gcts-accent-fill);
	box-shadow: 0 0 24px rgba(110, 242, 207, 0.46);
	transition: width 0.45s ease;
}

.gcts-tier-grid {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.gcts-tier-card {
	position: relative;
	padding: 18px 20px;
	border-radius: 22px;
	border: 1px solid var(--gcts-line);
	background: var(--gcts-panel);
	overflow: hidden;
	transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.gcts-tier-card.is-unlocked {
	border-color: rgba(157, 242, 112, 0.58);
	background: linear-gradient(180deg, rgba(157, 242, 112, 0.16), rgba(255, 255, 255, 0.06));
}

.gcts-tier-card.is-active {
	border-color: rgba(250, 204, 21, 0.72);
	background: linear-gradient(180deg, rgba(250, 204, 21, 0.18), rgba(255, 255, 255, 0.06));
}

.gcts-tier-glow {
	position: absolute;
	inset: auto -10% -22% auto;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(110, 242, 207, 0.22), transparent 72%);
	pointer-events: none;
}

.gcts-tier-shell {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}

.gcts-tier-topline {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.gcts-tier-name,
.gcts-tier-badge {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.gcts-tier-badge {
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
}

.gcts-tier-card.is-active .gcts-tier-badge {
	background: rgba(250, 204, 21, 0.22);
	color: #ffe889;
}

.gcts-tier-card.is-unlocked .gcts-tier-badge {
	background: rgba(157, 242, 112, 0.2);
	color: #caff9b;
}

.gcts-tier-media {
	border-radius: 18px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.06);
	width: 86px;
	height: 86px;
	flex: 0 0 86px;
}

.gcts-tier-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.gcts-tier-title {
	margin: 0 0 6px;
	font-size: 24px;
	line-height: 1.1;
	color: #fff;
}

.gcts-tier-description {
	margin: 0;
	color: var(--gcts-muted);
}

.gcts-tier-copy {
	min-width: 0;
}

.gcts-tier-stats {
	text-align: right;
	white-space: nowrap;
}

.gcts-tier-mobile-button {
	display: none;
	margin-top: 10px;
	padding: 8px 12px;
	border-radius: 999px;
	background: #F94144;
	border: 1px solid #F94144;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.gcts-tier-mobile-button:hover,
.gcts-tier-mobile-button:focus {
	background: #F94144;
	color: #fff;
}

.gcts-tier-footer {
	margin-top: auto;
}

.gcts-tier-threshold {
	display: block;
}

.gcts-tier-kg {
	font-size: 12px;
}

.gcts-tier-meter {
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.11);
	overflow: hidden;
}

.gcts-tier-meter-fill {
	display: block;
	height: 100%;
	background: var(--gcts-accent-fill);
	transition: width 0.45s ease;
}

.gcts-tier-unlocked-now {
	animation: gcts-unlock-pop 1.05s ease;
}

@keyframes gcts-unlock-pop {
	0% {
		transform: scale(0.98);
		box-shadow: 0 0 0 rgba(157, 242, 112, 0);
	}
	35% {
		transform: scale(1.03);
		box-shadow: 0 0 40px rgba(157, 242, 112, 0.32);
	}
	100% {
		transform: scale(1);
		box-shadow: 0 0 0 rgba(157, 242, 112, 0);
	}
}

@keyframes gcts-counter-pop {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(1.045);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes gcts-number-pulse {
	0% {
		transform: scale(1);
	}
	28% {
		transform: scale(1.14);
		color: #9df270;
	}
	100% {
		transform: scale(1);
	}
}

@keyframes gcts-fed-flash {
	0% {
		opacity: 0;
		transform: translate(-50%, -42%) scale(0.86);
	}
	15% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.04);
	}
	72% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -62%) scale(0.96);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gcts-total-card.is-celebrating,
	.gcts-total-card.is-celebrating .gcts-total-value,
	.gcts-total-card.is-celebrating .gcts-fed-flash {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
	}
}

@media (max-width: 700px) {
	.gcts-campaign {
		padding: 22px;
		border-radius: 24px;
	}

	.gcts-hero {
		flex-direction: column;
	}

	.gcts-total-card {
		width: 100%;
		text-align: left;
	}

	.gcts-impact-strip {
		grid-template-columns: 1fr;
	}

	.gcts-bowl-card,
	.gcts-countdown-card {
		align-items: flex-start;
	}

	.gcts-countdown-card {
		flex-direction: column;
		align-items: stretch;
	}

	.gcts-countdown-grid {
		width: 100%;
	}

	.gcts-tier-shell {
		grid-template-columns: 1fr;
	}

	.gcts-tier-media {
		width: 100%;
		height: 180px;
	}

	.gcts-tier-stats {
		text-align: left;
	}

	.gcts-tier-mobile-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}