/**
 * Sparkle buttons — template motion (spark, particles, hover scale).
 * Size matches ticket show «Добавить набор» pills (44px / 14px), not CodePen 2rem.
 * Colour: midnight platinum. No bodydrop.
 */
.nx-sparkle-wrap,
#ticket .nx-ticket-sparkle-save {
	--transition: 0.25s;
	--spark: 1.8s;
	--sparkle-h: 216;
	--sparkle-s: 22%;
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	overflow: visible;
}

.nx-sparkle-wrap *,
.nx-sparkle-wrap *::after,
.nx-sparkle-wrap *::before,
#ticket .nx-ticket-sparkle-save *,
#ticket .nx-ticket-sparkle-save *::after,
#ticket .nx-ticket-sparkle-save *::before {
	box-sizing: border-box;
}

.nx-sparkle-wrap.is-block {
	display: flex;
	width: 100%;
}

.nx-sparkle-wrap > .nx-sparkle-btn,
#ticket .nx-ticket-sparkle-save > #ticket-page-save-button {
	--cut: 0.1em;
	--active: 0;
	--bg:
		radial-gradient(
			40% 50% at center 100%,
			hsl(var(--sparkle-h) calc(var(--active) * 22%) 81% / var(--active)),
			transparent
		),
		radial-gradient(
			80% 100% at center 120%,
			hsl(var(--sparkle-h) calc(var(--active) * 18%) 66% / var(--active)),
			transparent
		),
		hsl(var(--sparkle-h) calc(var(--active) * 14%) calc((var(--active) * 22%) + 12%));
	background: var(--bg) !important;
	font-size: 14px !important;
	font-weight: 500;
	border: 0 !important;
	outline: none;
	cursor: pointer;
	padding: 0 16px !important;
	height: 44px;
	min-height: 44px;
	max-height: 44px;
	display: flex !important;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	border-radius: 100px !important;
	position: relative;
	z-index: 1;
	line-height: 1;
	color: inherit;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow:
		0 0 calc(var(--active) * 1.4em) calc(var(--active) * 0.06em) hsl(var(--sparkle-h) 22% 81% / 0.16),
		0 0.04em 0 0 hsl(var(--sparkle-h) calc(var(--active) * 22%) calc((var(--active) * 50%) + 30%)) inset,
		0 -0.04em 0 0 hsl(var(--sparkle-h) calc(var(--active) * 22%) calc(var(--active) * 60%)) inset;
	transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
	scale: calc(1 + (var(--active) * 0.1));
}

.nx-sparkle-wrap.is-block > .nx-sparkle-btn {
	width: 100%;
	justify-content: center;
}

.nx-sparkle-wrap > .nx-sparkle-btn:active,
#ticket .nx-ticket-sparkle-save > #ticket-page-save-button:active {
	scale: 1;
}

.nx-sparkle-wrap > .nx-sparkle-btn:disabled,
.nx-sparkle-wrap > .nx-sparkle-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	scale: 1;
}

.nx-sparkle-wrap svg,
#ticket .nx-ticket-sparkle-save svg {
	overflow: visible !important;
}

.nx-sparkle-wrap > .nx-sparkle-btn > .sparkle,
#ticket .nx-ticket-sparkle-save > #ticket-page-save-button > .sparkle {
	position: relative;
	z-index: 1;
	font-size: 16px;
	width: 16px;
	height: 16px;
	line-height: 1;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
	color: hsl(0 0% calc((var(--active, 0) * 70%) + 40%));
	transform-origin: center;
	transition: color var(--transition);
	-webkit-animation-delay: calc((var(--transition) * 1.5) + 0.2s);
	animation-delay: calc((var(--transition) * 1.5) + 0.2s);
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
	--scale: 1.5;
}

.nx-sparkle-wrap > .nx-sparkle-btn > i:not(.sparkle),
.nx-sparkle-wrap > .nx-sparkle-btn > svg:not(.particle),
#ticket .nx-ticket-sparkle-save > #ticket-page-save-button > i:not(.sparkle),
#ticket .nx-ticket-sparkle-save > #ticket-page-save-button > svg:not(.particle) {
	display: none !important;
}

.nx-sparkle-wrap > .nx-sparkle-btn::before,
#ticket .nx-ticket-sparkle-save > #ticket-page-save-button::before {
	content: none !important;
	display: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.nx-sparkle-wrap > .nx-sparkle-btn:is(:hover, :focus-visible):not(:disabled) > .sparkle,
#ticket .nx-ticket-sparkle-save > #ticket-page-save-button:is(:hover, :focus-visible) > .sparkle {
	-webkit-animation-name: nxSparkleBounce;
	animation-name: nxSparkleBounce;
}

@-webkit-keyframes nxSparkleBounce {
	35%, 65% {
		scale: var(--scale);
	}
}

@keyframes nxSparkleBounce {
	35%, 65% {
		scale: var(--scale);
	}
}

.nx-sparkle-wrap .spark,
#ticket .nx-ticket-sparkle-save .spark {
	position: absolute;
	inset: 0;
	border-radius: 100px;
	rotate: 0deg;
	overflow: hidden;
	-webkit-mask: linear-gradient(white, transparent 50%);
	mask: linear-gradient(white, transparent 50%);
	-webkit-animation: nxSparkleFlip calc(var(--spark) * 2) infinite steps(2, end);
	animation: nxSparkleFlip calc(var(--spark) * 2) infinite steps(2, end);
	pointer-events: none;
}

@-webkit-keyframes nxSparkleFlip {
	to {
		rotate: 360deg;
	}
}

@keyframes nxSparkleFlip {
	to {
		rotate: 360deg;
	}
}

.nx-sparkle-wrap .spark::before,
#ticket .nx-ticket-sparkle-save .spark::before {
	content: "";
	position: absolute;
	width: 200%;
	aspect-ratio: 1;
	top: 0%;
	left: 50%;
	z-index: -1;
	translate: -50% -15%;
	rotate: 0;
	transform: rotate(-90deg);
	opacity: calc((var(--active)) + 0.4);
	background: conic-gradient(from 0deg, transparent 0 340deg, white 360deg);
	transition: opacity var(--transition);
	-webkit-animation: nxSparkleRotate var(--spark) linear infinite both;
	animation: nxSparkleRotate var(--spark) linear infinite both;
}

.nx-sparkle-wrap .spark::after,
#ticket .nx-ticket-sparkle-save .spark::after {
	content: "";
	position: absolute;
	inset: var(--cut);
	border-radius: 100px;
}

.nx-sparkle-wrap .backdrop,
#ticket .nx-ticket-sparkle-save .backdrop {
	position: absolute;
	inset: var(--cut);
	background: var(--bg);
	border-radius: 100px;
	transition: background var(--transition);
	pointer-events: none;
}

@-webkit-keyframes nxSparkleRotate {
	to {
		transform: rotate(90deg);
	}
}

@keyframes nxSparkleRotate {
	to {
		transform: rotate(90deg);
	}
}

.nx-sparkle-wrap > .nx-sparkle-btn:is(:hover, :focus-visible):not(:disabled),
.nx-sparkle-wrap.is-inverse:hover > .nx-sparkle-btn,
#ticket .nx-ticket-sparkle-save > #ticket-page-save-button:is(:hover, :focus-visible) {
	--active: 1;
	--play-state: running;
}

.nx-sparkle-wrap > .nx-sparkle-btn:is(:hover, :focus-visible):not(:disabled) ~ .particle-pen,
.nx-sparkle-wrap.is-inverse:hover > .particle-pen,
#ticket .nx-ticket-sparkle-save > #ticket-page-save-button:is(:hover, :focus-visible) ~ .particle-pen {
	--active: 1;
	--play-state: running;
}

.nx-sparkle-wrap > .particle-pen,
#ticket .nx-ticket-sparkle-save > .particle-pen {
	position: absolute;
	width: 200%;
	aspect-ratio: 1;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	-webkit-mask: radial-gradient(white, transparent 65%);
	mask: radial-gradient(white, transparent 65%);
	z-index: 0;
	opacity: var(--active, 0);
	transition: opacity var(--transition);
	pointer-events: none;
}

.nx-sparkle-wrap .particle,
#ticket .nx-ticket-sparkle-save .particle {
	fill: white;
	width: calc(var(--size, 0.25) * 1rem);
	aspect-ratio: 1;
	position: absolute;
	top: calc(var(--y) * 1%);
	left: calc(var(--x) * 1%);
	opacity: var(--alpha, 1);
	-webkit-animation: nxSparkleFloatOut calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
	animation: nxSparkleFloatOut calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
	transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
	z-index: -1;
	-webkit-animation-play-state: var(--play-state, paused);
	animation-play-state: var(--play-state, paused);
}

.nx-sparkle-wrap .particle path,
#ticket .nx-ticket-sparkle-save .particle path {
	fill: hsl(0 0% 90%);
	stroke: none;
}

.nx-sparkle-wrap .particle:nth-of-type(even),
#ticket .nx-ticket-sparkle-save .particle:nth-of-type(even) {
	animation-direction: reverse;
}

@-webkit-keyframes nxSparkleFloatOut {
	to {
		rotate: 360deg;
	}
}

@keyframes nxSparkleFloatOut {
	to {
		rotate: 360deg;
	}
}

.nx-sparkle-wrap .nx-sparkle-text,
.nx-sparkle-wrap .text,
#ticket .nx-ticket-sparkle-save .text {
	position: relative;
	z-index: 1;
	translate: 2% -6%;
	letter-spacing: 0.01ch;
	background: linear-gradient(
		90deg,
		hsl(0 0% calc((var(--active) * 100%) + 65%)),
		hsl(0 0% calc((var(--active) * 100%) + 26%))
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: background var(--transition);
	-webkit-user-select: none;
	user-select: none;
}

.nx-sparkle-wrap .nx-sparkle-text > i,
.nx-sparkle-wrap .nx-sparkle-text > .ph,
.nx-sparkle-wrap .nx-sparkle-text > svg {
	display: none;
}

.nx-sparkle-wrap .bodydrop,
#ticket .nx-ticket-sparkle-save .bodydrop {
	display: none !important;
	pointer-events: none;
}

:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper #embed-content-container,
:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper .card.min-h-300 {
	overflow: visible;
}

:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper #embed-content-container .nx-settings-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
	padding: 4px 2px 28px;
	width: 100%;
	overflow: visible;
	position: relative;
	z-index: 4;
}

:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper #embed-content-container .nx-settings-footer-row > .nx-sparkle-wrap:last-child {
	margin-left: auto;
}

:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper #embed-content-container .nx-settings-footer-row__secondary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.nx-sparkle-wrap.is-inverse {
	cursor: pointer;
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	width: auto;
	max-width: max-content;
	border-radius: 100px;
}

.nx-sparkle-wrap.is-inverse::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 6;
	cursor: pointer;
	border-radius: inherit;
}

.nx-sparkle-wrap.is-inverse > .nx-sparkle-btn {
	pointer-events: none;
	cursor: pointer;
	width: auto;
	min-width: 0;
	--bg:
		radial-gradient(
			40% 50% at center 100%,
			hsl(var(--sparkle-h) calc(var(--active) * 18%) 92% / calc(0.25 + var(--active) * 0.45)),
			transparent
		),
		radial-gradient(
			80% 100% at center 120%,
			hsl(var(--sparkle-h) calc(var(--active) * 16%) 80% / calc(0.4 + var(--active) * 0.35)),
			transparent
		),
		hsl(var(--sparkle-h) 22% calc(78% - (var(--active) * 8%)));
	color: hsl(216 14% 10%);
}

.nx-sparkle-wrap.is-inverse .nx-sparkle-text,
.nx-sparkle-wrap.is-inverse .text,
.nx-sparkle-wrap.is-inverse .nx-settings-help-btn-label {
	pointer-events: none;
	cursor: pointer;
	background: none !important;
	-webkit-background-clip: unset !important;
	background-clip: unset !important;
	color: hsl(216 14% 10%) !important;
	translate: 0;
}

.nx-sparkle-wrap.is-inverse > .nx-sparkle-btn > .sparkle {
	color: hsl(216 14% calc(12% + (var(--active, 0) * 10%)));
}

:is(html.midnight, html[data-bs-theme="midnight"]) .nx-sparkle-pair {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	overflow: visible;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .nx-sparkle-pair > .nx-sparkle-exit,
:is(html.midnight, html[data-bs-theme="midnight"]) .nx-sparkle-pair > .btn-secondary,
:is(html.midnight, html[data-bs-theme="midnight"]) .nx-sparkle-pair > .btn-default {
	border: 1px solid rgba(var(--nx-primary-rgb, 197, 205, 216), 0.45) !important;
	border-top-color: rgba(var(--nx-primary-rgb, 197, 205, 216), 0.7) !important;
	background: hsl(216 14% 12%) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
	color: var(--nx-primary, #C5CDD8) !important;
	border-radius: 100px !important;
}

/* Save = dark + platinum light. Exit = inverse: accent fill, dark glyph. */
:is(html.midnight, html[data-bs-theme="midnight"]) #ticket #ticket-page-save-and-back-button.ticket-save-secondary-btn,
:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper #embed-content-container .nx-settings-save-exit-btn {
	background: var(--nx-primary, #C5CDD8) !important;
	border: 1px solid hsl(216 16% 68%) !important;
	border-top-color: hsl(216 22% 90%) !important;
	color: hsl(216 14% 10%) !important;
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.42),
		0 4px 14px hsl(216 22% 8% / 0.28) !important;
	transform: none;
}

:is(html.midnight, html[data-bs-theme="midnight"]) #ticket #ticket-page-save-and-back-button.ticket-save-secondary-btn:hover,
:is(html.midnight, html[data-bs-theme="midnight"]) #ticket #ticket-page-save-and-back-button.ticket-save-secondary-btn:focus-visible,
:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper #embed-content-container .nx-settings-save-exit-btn:hover,
:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper #embed-content-container .nx-settings-save-exit-btn:focus-visible {
	background: #d8dee6 !important;
	border-color: hsl(216 18% 76%) !important;
	color: hsl(216 16% 8%) !important;
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.5),
		0 0 0.6em 0.04em hsl(216 22% 81% / 0.22) !important;
	transform: scale(1.06);
}

:is(html.midnight, html[data-bs-theme="midnight"]) #ticket #ticket-page-save-and-back-button.ticket-save-secondary-btn:active,
:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper #embed-content-container .nx-settings-save-exit-btn:active {
	transform: scale(1);
	background: var(--nx-primary-dark, #9AA5B4) !important;
}

:is(html.midnight, html[data-bs-theme="midnight"]) #ticket #ticket-page-save-and-back-button .ticket-save-back-icon,
:is(html.midnight, html[data-bs-theme="midnight"]) body.settings #settings-wrapper #embed-content-container .nx-settings-save-exit-btn .nx-settings-save-exit-icon {
	color: inherit !important;
	stroke: currentColor;
	opacity: 1;
}

.nx-intro-playing {
	--nx-intro-accent: var(--nx-primary, #5b7cff);
	--nx-intro-size: 320px;
	position: fixed;
	z-index: 10080;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	width: var(--nx-intro-size);
	height: var(--nx-intro-size);
	padding: 8px 8px 10px;
	border-radius: 22px;
	border: 1px solid color-mix(in srgb, var(--nx-intro-accent) 45%, transparent);
	background: color-mix(in srgb, var(--nx-intro-accent) 12%, #111);
	color: var(--nx-intro-accent);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
	pointer-events: auto;
	cursor: pointer;
	opacity: 0;
	transform: scale(0.08);
	transform-origin: 50% -18px;
	transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.2, 0.82, 0.2, 1);
}
.nx-intro-playing.is-on {
	opacity: 1;
	transform: scale(1);
}
.nx-intro-playing.is-out {
	opacity: 0;
	transform: scale(0.08);
}
html:not(.midnight):not([data-bs-theme="midnight"]) .nx-intro-playing {
	background: #fff;
	color: var(--nx-intro-accent, #3d5afe);
	box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14);
}
.nx-intro-playing__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.15;
	min-width: 0;
	text-align: center;
	margin-top: -6px;
}
.nx-intro-playing__title {
	font-size: 15px;
	font-weight: 650;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.nx-intro-orb {
	width: 292px;
	height: 292px;
	flex: 0 0 292px;
	margin-top: -8px;
	overflow: visible;
	display: block;
	shape-rendering: geometricPrecision;
}
.nx-intro-orb__tilt {
	transform-origin: 50px 50px;
	transform: rotate(25deg);
}
.nx-intro-orb ellipse {
	fill: none;
}

:is(html.midnight, html[data-bs-theme="midnight"]) .nx-intro-playing {
	--nx-intro-accent: #c5cdd8;
	background:
		radial-gradient(90% 140% at 50% 120%, hsl(216 22% 72% / 0.28), transparent 62%),
		linear-gradient(180deg, hsl(216 14% 26%) 0%, hsl(216 16% 11%) 100%);
	border: 1px solid hsl(216 18% 62%);
	border-top-color: hsl(216 24% 88%);
	color: #c5cdd8;
	box-shadow:
		inset 0 1px 0 hsl(0 0% 100% / 0.38),
		inset 0 -1px 0 hsl(216 20% 8% / 0.45),
		0 10px 26px hsl(216 22% 4% / 0.5);
	text-shadow: 0 1px 0 hsl(216 20% 8% / 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.nx-sparkle-wrap .spark,
	.nx-sparkle-wrap .spark::before,
	.nx-sparkle-wrap .particle,
	.nx-sparkle-wrap .sparkle,
	#ticket .nx-ticket-sparkle-save .spark,
	#ticket .nx-ticket-sparkle-save .spark::before,
	#ticket .nx-ticket-sparkle-save .particle,
	#ticket .nx-ticket-sparkle-save .sparkle {
		-webkit-animation: none !important;
		animation: none !important;
	}
	.nx-sparkle-wrap > .nx-sparkle-btn,
	#ticket .nx-ticket-sparkle-save > #ticket-page-save-button {
		scale: 1;
	}
	.nx-intro-playing,
	.nx-intro-playing.is-on,
	.nx-intro-playing.is-out {
		transition: none;
		transform: none;
	}
	.nx-intro-orb ellipse {
		animation: none !important;
	}
}