/* Stat bubbles */
.stat-bubble {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-height: 120px;
	border-radius: 18px;
	padding: 16px 12px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	backdrop-filter: saturate(130%) blur(var(--glass-blur));
	transform-style: flat;
	backface-visibility: hidden;
	transition: transform .22s, box-shadow .24s, filter .24s;

	--stat-bubble-inner-shade-color-scheme: rgba(var(--accent-primary-bright-rgb), .12);
	background: radial-gradient(120% 120% at 20% 8%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .20) 40%, transparent 60%), radial-gradient(140% 120% at 110% 0%, var(--stat-bubble-inner-shade-color-scheme), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .32));

	border: 1px solid rgba(148, 163, 184, .35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), inset 0 -16px 32px rgba(255, 255, 255, .08), 0 10px 24px rgba(0, 0, 0, .10);
}

.stat-bubble::before {
	content: "";
	position: absolute;
	top: -25%;
	left: -30%;
	width: 170%;
	height: 70%;
	transform: rotate(-14deg);
	border-radius: 55% 45% 50% 50% / 50% 50% 45% 55%;
	background: radial-gradient(60% 85% at 20% 10%, rgba(255, 255, 255, .308), rgba(255, 255, 255, .08) 60%, transparent 75%), radial-gradient(80% 100% at 0% 0%, rgba(255, 255, 255, .28), transparent 60%);
	mix-blend-mode: screen;
	filter: blur(6px) saturate(112%);
	opacity: .45;
	pointer-events: none;
	z-index: 0;
	backdrop-filter: blur(1px) saturate(120%);
}

.stat-bubble::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(130% 120% at 95% 0%, rgba(var(--accent-primary-bright-rgb), .10), rgba(var(--accent-primary-bright-rgb), 0) 55%), conic-gradient(from 210deg at 85% 10%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .08) 32%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .06) 78%, rgba(255, 255, 255, 0) 100%);
	z-index: 0;
	mix-blend-mode: screen;
	opacity: .32;
	filter: blur(3px) saturate(120%);
}

.stat-bubble h6 {
	color: var(--text-secondary);
	font-weight: 600;
	letter-spacing: .02em;
}

.stat-bubble h4,
.stat-bubble h3 {
	color: var(--text-primary);
	font-weight: 700;
}

.stat-bubble>* {
	position: relative;
	z-index: 1;
}

.stat-bubble:hover {
	transform: translateY(-3px) scale(var(--bubble-scale));
	box-shadow: 0 16px 32px rgba(0, 0, 0, .14);
}

@media (prefers-reduced-motion:reduce) {
	.stat-bubble {
		transition: none;
	}

	.stat-bubble:hover {
		transform: none;
		box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
	}
}

@media (max-width:576px) {
	.stat-bubble {
		backdrop-filter: saturate(130%) blur(var(--glass-blur-mobile));
		-webkit-backdrop-filter: saturate(130%) blur(var(--glass-blur-mobile));
		min-height: 60px;
		padding: 12px 10px;
		border-radius: 14px;
	}

	.stat-bubble::before {
		filter: blur(4px) saturate(112%);
		top: -30%;
		left: -40%;
		width: 130%;
		height: 80%;
		border-radius: 60% 40% 50% 50% / 50% 50% 40% 60%;
	}

	.stat-bubble::after {
		background: radial-gradient(70% 90% at 20% 10%, rgba(255, 255, 255, .208), rgba(255, 255, 255, .06) 60%, transparent 75%), radial-gradient(90% 110% at 0% 0%, rgba(255, 255, 255, .18), transparent 60%);
		filter: blur(12px) saturate(110%);
	}

	.glassy-nav {
		backdrop-filter: saturate(130%) blur(var(--glass-blur-mobile));
		-webkit-backdrop-filter: saturate(130%) blur(var(--glass-blur-mobile));
	}

	.glassy-footer {
		backdrop-filter: blur(calc(var(--glass-blur-mobile) - 2px));
		-webkit-backdrop-filter: blur(calc(var(--glass-blur-mobile) - 2px));
	}
}


@media (min-width: 768px) and (max-width: 991.98px) {
	.col-md-4 .stat-bubble h4{
		font-size: 1rem;
	}
}


.stat-bubble--income {
	border-color: rgba(var(--success-rgb), .35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 24px rgba(0, 0, 0, .10), 0 16px 30px rgba(var(--success-rgb), .12);
	--stat-bubble-inner-shade-color-scheme: rgba(var(--success-rgb), .12);
}

.stat-bubble--income::after {
	background: radial-gradient(125% 115% at 90% 0%, rgba(var(--success-rgb), .12), rgba(var(--success-rgb), 0) 58%), conic-gradient(from 200deg at 90% 10%, rgba(var(--success-rgb), .10), rgba(255, 255, 255, 0) 25%, rgba(var(--success-rgb), .08) 35%, rgba(255, 255, 255, 0) 60%, rgba(var(--success-rgb), .06) 78%, rgba(255, 255, 255, 0) 100%);
}

.stat-bubble--expenses {
	border-color: rgba(var(--danger-rgb), .35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 24px rgba(0, 0, 0, .10), 0 16px 30px rgba(var(--danger-rgb), .12);
	--stat-bubble-inner-shade-color-scheme: rgba(var(--danger-rgb), .12);
}

.stat-bubble--expenses::after {
	background: radial-gradient(125% 115% at 90% 0%, rgba(var(--danger-rgb), .12), rgba(var(--danger-rgb), 0) 58%), conic-gradient(from 200deg at 90% 10%, rgba(var(--danger-rgb), .10), rgba(255, 255, 255, 0) 25%, rgba(var(--danger-rgb), .08) 35%, rgba(255, 255, 255, 0) 60%, rgba(var(--danger-rgb), .06) 78%, rgba(255, 255, 255, 0) 100%);
}

.stat-bubble--savings {
	border-color: rgba(var(--info-rgb), .35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 24px rgba(0, 0, 0, .10), 0 16px 30px rgba(var(--info-rgb), .12);
	--stat-bubble-inner-shade-color-scheme: rgba(var(--info-rgb), .12);
}

.stat-bubble--savings::after {
	background: radial-gradient(125% 115% at 90% 0%, rgba(var(--info-rgb), .12), rgba(var(--info-rgb), 0) 58%), conic-gradient(from 200deg at 90% 10%, rgba(var(--info-rgb), .10), rgba(255, 255, 255, 0) 25%, rgba(var(--info-rgb), .08) 35%, rgba(255, 255, 255, 0) 60%, rgba(var(--info-rgb), .06) 78%, rgba(255, 255, 255, 0) 100%);
}

[data-theme="dark"] .stat-bubble,
body.dark-mode .stat-bubble {
	background: radial-gradient(120% 120% at 20% 8%, rgba(255, 255, 255, .06), transparent 45%), radial-gradient(140% 120% at 110% 0%, rgba(var(--accent-primary-brighter-rgb), .14), transparent 55%), linear-gradient(180deg, rgba(17, 24, 39, .70), rgba(17, 24, 39, .50));
	border: 1px solid rgba(148, 163, 184, .20);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .06);
}

[data-theme="dark"] .stat-bubble--income,
body.dark-mode .stat-bubble--income {
	border-color: rgba(var(--success-rgb), .28);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .35), 0 16px 34px rgba(var(--success-rgb), .10);
}

[data-theme="dark"] .stat-bubble--expenses,
body.dark-mode .stat-bubble--expenses {
	border-color: rgba(var(--danger-rgb), .28);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .35), 0 16px 34px rgba(var(--danger-rgb), .10);
}

[data-theme="dark"] .stat-bubble--savings,
body.dark-mode .stat-bubble--savings {
	border-color: rgba(var(--info-rgb), .28);
	box-shadow: 0 14px 32px rgba(0, 0, 0, .35), 0 16px 34px rgba(var(--info-rgb), .10);
}