.jx-tf-badge {
	--jx-tf-badge-accent: #1819ed;
	--jx-tf-badge-star: #f5b301;
	--jx-tf-badge-bg: #ffffff;
	--jx-tf-badge-border: rgba(24, 25, 237, 0.12);
	--jx-tf-badge-fg: #111827;
	--jx-tf-badge-muted: #64748b;
	font-family: inherit;
	color: var(--jx-tf-badge-fg);
}

.jx-tf-badge__inner,
.jx-tf-badge__link {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.55rem 0.85rem;
	text-decoration: none;
	color: inherit;
	padding: 0.7rem 1rem;
	border-radius: 999px;
	background: var(--jx-tf-badge-bg);
	border: 1px solid var(--jx-tf-badge-border);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.jx-tf-badge__link:hover {
	border-color: rgba(24, 25, 237, 0.28);
	box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
	transform: translateY(-1px);
}

.jx-tf-badge--card .jx-tf-badge__inner,
.jx-tf-badge--card .jx-tf-badge__link {
	border-radius: 16px;
	padding: 1rem 1.15rem;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	min-width: min(100%, 220px);
}

.jx-tf-badge__score {
	font-size: 1.55rem;
	font-weight: 750;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--jx-tf-badge-accent);
}

.jx-tf-badge__of {
	font-size: 0.85rem;
	font-weight: 550;
	color: var(--jx-tf-badge-muted);
}

.jx-tf-badge__stars {
	display: inline-flex;
	align-items: center;
	gap: 0.08rem;
	letter-spacing: 0;
	color: #e5e7eb;
	line-height: 1;
}

.jx-tf-badge__star {
	font-size: 1.05rem;
}

.jx-tf-badge__star.is-on {
	color: var(--jx-tf-badge-star);
}

.jx-tf-badge__count {
	font-size: 0.9rem;
	color: var(--jx-tf-badge-muted);
}

.jx-tf-badge--card .jx-tf-badge__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.75rem;
}