.tab-banner-wrap {
	z-index: 9999;
	display: flex;
	justify-content: center;
	padding: 10px 16px;
	background: transparent;
}
.tab-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--tab-bg, #ffffff);
	color: var(--tab-text, #2c2c6c);
	border-radius: 999px;
	padding: 10px 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	/* A clean, "nice" system font stack — no external font request, so it
	   loads instantly and renders in each visitor's native UI font. The
	   emoji-capable fonts at the end let browsers pick the right glyphs
	   for any emoji in the message automatically. */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	width: 100%;
	max-width: 480px;
	box-sizing: border-box;
}
.tab-banner-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--tab-accent, #5b5be0);
	flex-shrink: 0;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.04);
}
.tab-banner-text-mask {
	position: relative;
	overflow: hidden;
	flex: 1 1 auto;
	min-width: 0;
	height: 1.4em;
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 16px,
		#000 calc(100% - 16px),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 16px,
		#000 calc(100% - 16px),
		transparent 100%
	);
}
/* Continuous, seamless right-to-left scroll: the track holds two identical
   copies of the message back to back, and animates exactly halfway (-50%
   of the track's own width). Since both copies are the same width, the
   moment the animation resets, the second copy is pixel-perfectly aligned
   where the first one started — no gap, no restart jump, no matter how
   long or short the message is. */
.tab-banner-text-track {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	white-space: nowrap;
	animation: tabMarquee var(--tab-speed, 12s) linear infinite;
	will-change: transform;
}
.tab-banner-text {
	display: inline-block;
	white-space: nowrap;
	padding-right: 48px;
}
.tab-banner-text strong,
.tab-banner-text b {
	font-weight: 800;
}
.tab-banner-text em,
.tab-banner-text i {
	font-style: italic;
}
@keyframes tabMarquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.tab-banner-text-track {
		animation: none;
	}
	.tab-banner-text-track .tab-banner-text:nth-child(2) {
		display: none;
	}
	.tab-banner-text-mask {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
}
.tab-banner-link {
	color: var(--tab-accent, #5b5be0);
	text-decoration: underline;
	white-space: nowrap;
	margin-left: 6px;
	flex-shrink: 0;
}