.kdd-vc-card {
	--kdd-vc-text: #f6f7fb;
	--kdd-vc-muted: rgba(246, 247, 251, 0.72);
	--kdd-vc-bg: rgba(20, 23, 31, 0.58);
	--kdd-vc-border: rgba(255, 255, 255, 0.2);
	--kdd-vc-shadow: 0 16px 42px rgba(8, 12, 24, 0.35);
	--kdd-vc-glow: radial-gradient(circle at top right, rgba(80, 141, 255, 0.45), transparent 60%);
	position: relative;
	display: inline-flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 170px;
	padding: 1rem 1.2rem;
	border-radius: 16px;
	color: var(--kdd-vc-text);
	background: var(--kdd-vc-bg);
	border: 1px solid var(--kdd-vc-border);
	box-shadow: var(--kdd-vc-shadow);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	overflow: hidden;
	transform: translateY(0);
	transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.kdd-vc-card.kdd-vc-width-auto {
	width: auto;
}

.kdd-vc-card.kdd-vc-width-full {
	width: 100%;
}

.kdd-vc-card.kdd-vc-width-custom {
	width: 100%;
}

.kdd-vc-card.kdd-vc-align-left {
	text-align: left;
	align-items: flex-start;
}

.kdd-vc-card.kdd-vc-align-center {
	text-align: center;
	align-items: center;
}

.kdd-vc-card.kdd-vc-align-right {
	text-align: right;
	align-items: flex-end;
}

.kdd-vc-card:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.33);
	box-shadow: 0 24px 50px rgba(8, 12, 24, 0.42);
}

.kdd-vc-card.kdd-vc--light {
	--kdd-vc-text: #1d2433;
	--kdd-vc-muted: rgba(29, 36, 51, 0.66);
	--kdd-vc-bg: rgba(255, 255, 255, 0.62);
	--kdd-vc-border: rgba(104, 117, 141, 0.24);
	--kdd-vc-shadow: 0 14px 34px rgba(130, 146, 173, 0.27);
	--kdd-vc-glow: radial-gradient(circle at top right, rgba(122, 174, 255, 0.35), transparent 60%);
}

.kdd-vc-glow {
	content: "";
	position: absolute;
	inset: -30% -15% auto auto;
	width: 140px;
	height: 140px;
	background: var(--kdd-vc-glow);
	pointer-events: none;
}

.kdd-vc-label {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kdd-vc-muted);
}

.kdd-vc-icon {
	font-size: 1.05em;
	line-height: 1;
}

.kdd-vc-number {
	position: relative;
	font-size: clamp(1.8rem, 3.8vw, 2.5rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: 0.01em;
	transition: transform 260ms ease, opacity 260ms ease;
	will-change: transform, opacity;
}

.kdd-vc-number.is-updating {
	opacity: 0.68;
	transform: translateY(-2px) scale(1.02);
}