.khwc-countdown {
	--khwc-ink: #f7f9f8;
	--khwc-muted: #9ba9aa;
	--khwc-night: #071416;
	--khwc-line: rgba(255, 255, 255, 0.1);
	--khwc-accent: #d6ff5f;
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: var(--khwc-max-width, 1040px);
	margin-right: auto;
	margin-left: auto;
	padding: clamp(10px, 3vw, 34px);
	border-radius: 32px;
	background:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		radial-gradient(circle at 12% 8%, #173d3f 0, transparent 38%),
		linear-gradient(145deg, #0b2427 0%, var(--khwc-night) 64%);
	background-size: 56px 56px, 56px 56px, auto, auto;
	color: var(--khwc-ink);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.4;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.khwc-countdown * { box-sizing: border-box; }
.khwc-countdown--small {
	--khwc-title-max: 52px;
	--khwc-value-max: 64px;
	--khwc-panel-padding: 24px;
}
.khwc-countdown--medium {
	--khwc-title-max: 66px;
	--khwc-value-max: 82px;
	--khwc-panel-padding: 36px;
}
.khwc-countdown--large {
	--khwc-title-max: 78px;
	--khwc-value-max: 100px;
	--khwc-panel-padding: 48px;
}
.khwc-ambient {
	position: absolute;
	width: 34rem;
	height: 34rem;
	border-radius: 50%;
	filter: blur(100px);
	opacity: 0.17;
	pointer-events: none;
}
.khwc-ambient--one { top: -20rem; right: -8rem; background: var(--khwc-accent); }
.khwc-ambient--two { bottom: -24rem; left: -10rem; background: #25c2d8; }
.khwc-panel {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(22px, 4vw, var(--khwc-panel-padding, 48px));
	border: 1px solid var(--khwc-line);
	border-radius: 26px;
	background: linear-gradient(145deg, rgba(15, 39, 42, 0.94), rgba(7, 20, 22, 0.9));
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38), inset 0 1px rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(22px);
}
.khwc-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: clamp(30px, 5vw, 58px);
}
.khwc-brand { display: flex; align-items: center; gap: 13px; text-align: left; }
.khwc-brand__mark {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	background: var(--khwc-accent);
	color: #112022;
	font-size: 18px;
	font-weight: 850;
	box-shadow: 0 10px 28px rgba(214, 255, 95, 0.15);
}
.khwc-brand strong,
.khwc-brand small { display: block; }
.khwc-brand strong { color: var(--khwc-ink); font-size: 15px; letter-spacing: -0.01em; }
.khwc-brand small { margin-top: 3px; color: var(--khwc-muted); font-size: 12px; }
.khwc-live {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	border: 1px solid var(--khwc-line);
	border-radius: 999px;
	color: #c8d1d1;
	font-size: 12px;
	font-weight: 650;
}
.khwc-live span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--khwc-accent);
	box-shadow: 0 0 0 5px rgba(214, 255, 95, 0.12);
}
.khwc-heading {
	max-width: 720px;
	margin: 0 auto clamp(30px, 5vw, 52px);
	text-align: center;
}
.khwc-heading > p {
	margin: 0 0 16px;
	color: var(--khwc-accent);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.khwc-heading h2 {
	margin: 0;
	color: var(--khwc-ink);
	font-size: clamp(40px, 7vw, var(--khwc-title-max, 78px));
	font-weight: 720;
	line-height: 0.98;
	letter-spacing: -0.055em;
}
.khwc-target {
	margin: 22px 0 0;
	color: var(--khwc-muted);
	font-size: clamp(14px, 2vw, 17px);
}
.khwc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(8px, 2vw, 18px);
}
.khwc-grid[hidden] { display: none; }
.khwc-card {
	min-width: 0;
	padding: clamp(20px, 4vw, 36px) 10px clamp(17px, 3vw, 26px);
	overflow: hidden;
	border: 1px solid var(--khwc-line);
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
	text-align: center;
}
.khwc-value {
	display: block;
	color: var(--khwc-accent);
	font-size: clamp(42px, 9vw, var(--khwc-value-max, 100px));
	font-weight: 680;
	line-height: 0.86;
	letter-spacing: -0.075em;
	font-variant-numeric: tabular-nums;
}
.khwc-label {
	display: block;
	margin-top: clamp(16px, 3vw, 24px);
	color: var(--khwc-muted);
	font-size: clamp(11px, 1.5vw, 13px);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.khwc-finished {
	display: grid;
	gap: 12px;
	padding: clamp(34px, 7vw, 72px);
	border: 1px solid rgba(214, 255, 95, 0.28);
	border-radius: 20px;
	background: rgba(214, 255, 95, 0.12);
	text-align: center;
}
.khwc-finished[hidden] { display: none; }
.khwc-finished span {
	color: var(--khwc-accent);
	font-size: 12px;
	font-weight: 750;
	letter-spacing: 0.18em;
}
.khwc-finished strong {
	color: var(--khwc-ink);
	font-size: clamp(32px, 6vw, 64px);
	font-weight: 720;
	letter-spacing: -0.04em;
}
.khwc-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: clamp(25px, 4vw, 38px);
	color: #718385;
	font-size: 12px;
}
.khwc-footer i { width: 36px; height: 1px; background: var(--khwc-line); }

@media (max-width: 560px) {
	.khwc-countdown { padding: 8px; border-radius: 24px; }
	.khwc-panel { padding: 20px 14px 24px; border-radius: 19px; }
	.khwc-topbar { padding: 2px 4px 34px; }
	.khwc-brand__mark { width: 38px; height: 38px; border-radius: 11px; }
	.khwc-brand strong { font-size: 14px; }
	.khwc-live { padding: 8px 10px; }
	.khwc-heading { margin-bottom: 28px; }
	.khwc-heading h2 { font-size: clamp(38px, 12vw, 58px); }
	.khwc-target { max-width: 280px; margin-inline: auto; line-height: 1.45; }
	.khwc-grid { gap: 6px; }
	.khwc-card { padding-inline: 4px; border-radius: 15px; }
	.khwc-value { font-size: clamp(36px, 15vw, 58px); }
	.khwc-label { letter-spacing: 0.06em; }
	.khwc-footer { gap: 9px; font-size: 11px; }
	.khwc-footer i { width: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
	.khwc-panel { animation: khwc-enter 0.65s cubic-bezier(0.2, 0.75, 0.3, 1) both; }
	.khwc-live span { animation: khwc-pulse 2.2s ease-in-out infinite; }
	@keyframes khwc-enter {
		from { opacity: 0; transform: translateY(16px) scale(0.99); }
		to { opacity: 1; transform: none; }
	}
	@keyframes khwc-pulse {
		50% { box-shadow: 0 0 0 8px rgba(214, 255, 95, 0); }
	}
}