.hg-switcher {
	--hg-sw-bg: #0f1b31;
	--hg-sw-border: rgba(148, 163, 184, 0.24);
	--hg-sw-text: #e8f0fb;
	--hg-sw-subtext: #9db3d1;
	--hg-sw-primary: #7cb6ff;
	--hg-sw-primary-soft: rgba(124, 182, 255, 0.18);
	display: inline-grid;
	gap: 8px;
	padding: 10px 12px;
	background:
		radial-gradient(120% 90% at 10% -20%, rgba(123, 182, 255, 0.2), transparent 55%),
		radial-gradient(90% 70% at 100% 120%, rgba(58, 212, 189, 0.16), transparent 62%),
		linear-gradient(180deg, #0f1b31, #0c1528);
	border: 1px solid var(--hg-sw-border);
	border-radius: 14px;
	box-shadow: 0 16px 34px rgba(2, 6, 23, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.06);
	color: var(--hg-sw-text);
	animation: hg-switcher-rise 0.45s cubic-bezier(.22,.9,.3,1) both;
}

@keyframes hg-switcher-rise {
	0% {
		opacity: 0;
		transform: translateY(8px) scale(0.985);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.hg-switcher[class*="hg-switcher--preset-desk-"] {
	padding: 8px 10px;
	border-radius: 11px;
	box-shadow: 0 10px 20px rgba(2, 6, 23, 0.22);
}

.hg-switcher[class*="hg-switcher--preset-play-"] {
	padding: 9px 11px;
	border-radius: 12px;
}

.hg-switcher[class*="hg-switcher--preset-test-"] {
	padding: 7px 9px;
	border-radius: 10px;
	box-shadow: 0 8px 16px rgba(2, 6, 23, 0.2);
}

.hg-switcher[class*="hg-switcher--preset-spot-"] {
	border-left: 3px solid color-mix(in srgb, var(--hg-sw-primary) 72%, #fff);
}

.hg-switcher[class*="hg-switcher--preset-desk-"] {
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%),
		linear-gradient(190deg, #0d182d 0%, #0b1425 100%);
}

.hg-switcher[class*="hg-switcher--preset-play-"] {
	background:
		radial-gradient(120% 110% at 100% 0%, rgba(255, 186, 108, 0.24), transparent 60%),
		linear-gradient(180deg, #14203a 0%, #0e172c 100%);
}

.hg-switcher[class*="hg-switcher--preset-test-"] {
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 8px, rgba(255, 255, 255, 0) 8px 16px),
		linear-gradient(180deg, #121d35 0%, #0e1729 100%);
}

.hg-switcher[class*="hg-switcher--preset-desk-"] .hg-switcher__label,
.hg-switcher[class*="hg-switcher--preset-play-"] .hg-switcher__label,
.hg-switcher[class*="hg-switcher--preset-test-"] .hg-switcher__label {
	font-size: 9px;
	letter-spacing: 0.06em;
}

.hg-switcher[class*="hg-switcher--preset-desk-"] .hg-switcher__chip,
.hg-switcher[class*="hg-switcher--preset-play-"] .hg-switcher__chip,
.hg-switcher[class*="hg-switcher--preset-test-"] .hg-switcher__chip {
	padding: 4px 7px;
	font-size: 10px;
	border-radius: 7px;
}

/* 36 preset palettes */
.hg-switcher--preset-spot-01,.hg-switcher--preset-spot-04,.hg-switcher--preset-spot-07,.hg-switcher--preset-spot-10 {
	--hg-sw-primary: #7cb6ff;
	--hg-sw-primary-soft: rgba(124, 182, 255, 0.18);
}
.hg-switcher--preset-spot-02,.hg-switcher--preset-spot-05,.hg-switcher--preset-spot-08,.hg-switcher--preset-spot-11 {
	--hg-sw-primary: #66d9d1;
	--hg-sw-primary-soft: rgba(102, 217, 209, 0.18);
}
.hg-switcher--preset-spot-03,.hg-switcher--preset-spot-06,.hg-switcher--preset-spot-09,.hg-switcher--preset-spot-12 {
	--hg-sw-primary: #f8b36b;
	--hg-sw-primary-soft: rgba(248, 179, 107, 0.18);
}

.hg-switcher--preset-desk-01,.hg-switcher--preset-desk-04,.hg-switcher--preset-desk-07,.hg-switcher--preset-desk-10 {
	--hg-sw-primary: #72b2ff;
	--hg-sw-primary-soft: rgba(114, 178, 255, 0.18);
}
.hg-switcher--preset-desk-02,.hg-switcher--preset-desk-05,.hg-switcher--preset-desk-08,.hg-switcher--preset-desk-11 {
	--hg-sw-primary: #7cd4a8;
	--hg-sw-primary-soft: rgba(124, 212, 168, 0.18);
}
.hg-switcher--preset-desk-03,.hg-switcher--preset-desk-06,.hg-switcher--preset-desk-09,.hg-switcher--preset-desk-12 {
	--hg-sw-primary: #cfb0ff;
	--hg-sw-primary-soft: rgba(207, 176, 255, 0.18);
}

.hg-switcher--preset-play-01,.hg-switcher--preset-play-05 {
	--hg-sw-primary: #64b5ff;
	--hg-sw-primary-soft: rgba(100, 181, 255, 0.18);
}
.hg-switcher--preset-play-02,.hg-switcher--preset-play-06 {
	--hg-sw-primary: #5fd8c5;
	--hg-sw-primary-soft: rgba(95, 216, 197, 0.18);
}
.hg-switcher--preset-play-03,.hg-switcher--preset-play-07 {
	--hg-sw-primary: #ffc16c;
	--hg-sw-primary-soft: rgba(255, 193, 108, 0.18);
}
.hg-switcher--preset-play-04,.hg-switcher--preset-play-08 {
	--hg-sw-primary: #ff9898;
	--hg-sw-primary-soft: rgba(255, 152, 152, 0.18);
}

.hg-switcher--preset-test-01 {
	--hg-sw-primary: #78ff9a;
	--hg-sw-primary-soft: rgba(120, 255, 154, 0.2);
}
.hg-switcher--preset-test-02 {
	--hg-sw-primary: #d4ff65;
	--hg-sw-primary-soft: rgba(212, 255, 101, 0.2);
}
.hg-switcher--preset-test-03 {
	--hg-sw-primary: #8dc4ff;
	--hg-sw-primary-soft: rgba(141, 196, 255, 0.2);
}
.hg-switcher--preset-test-04 {
	--hg-sw-primary: #ff7f7f;
	--hg-sw-primary-soft: rgba(255, 127, 127, 0.2);
}

.hg-switcher--floating {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	backdrop-filter: blur(8px);
}

.hg-switcher__label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hg-sw-subtext);
}

.hg-switcher__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.hg-switcher__brand {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--hg-sw-primary) 78%, #fff);
	margin-bottom: 3px;
}

.hg-switcher__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.hg-switcher__status,
.hg-switcher__base {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid transparent;
}

.hg-switcher__status.is-live {
	background: color-mix(in srgb, #2fc98f 22%, transparent);
	border-color: color-mix(in srgb, #2fc98f 46%, transparent);
	color: #b5f7dd;
}

.hg-switcher__status.is-locked {
	background: color-mix(in srgb, #f8b36b 18%, transparent);
	border-color: color-mix(in srgb, #f8b36b 44%, transparent);
	color: #ffe0be;
}

.hg-switcher__base {
	background: color-mix(in srgb, var(--hg-sw-primary) 18%, transparent);
	border-color: color-mix(in srgb, var(--hg-sw-primary) 44%, transparent);
	color: #d7e8ff;
}

.hg-switcher__chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.hg-switcher__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 8px;
	border-radius: 9px;
	border: 1px solid var(--hg-sw-border);
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.6));
	color: var(--hg-sw-text);
	text-decoration: none;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease, box-shadow 0.18s ease;
}

.hg-switcher__chip em {
	font-style: normal;
	opacity: 0.85;
	font-weight: 600;
}

.hg-switcher__chip:hover {
	transform: translateY(-1px);
	border-color: var(--hg-sw-primary);
	box-shadow: 0 6px 14px color-mix(in srgb, var(--hg-sw-primary) 28%, transparent);
}

.hg-switcher__chip.is-active {
	border-color: var(--hg-sw-primary);
	background: linear-gradient(180deg, color-mix(in srgb, var(--hg-sw-primary-soft) 90%, transparent), color-mix(in srgb, var(--hg-sw-primary-soft) 64%, transparent));
	color: #dcecff;
}

.hg-switcher__chip.is-locked {
	opacity: 0.7;
	cursor: not-allowed;
}

.hg-switcher__hint {
	font-size: 10px;
	color: var(--hg-sw-subtext);
	padding-top: 2px;
}

@media (max-width: 768px) {
	.hg-switcher--floating {
		right: 10px;
		left: 10px;
		bottom: 10px;
	}

	.hg-switcher {
		display: grid;
	}

	.hg-preview-workbench__stage {
		grid-template-columns: 1fr;
	}

	.hg-preview-metrics {
		grid-template-columns: 1fr;
	}
}

.hg-preview-showcase {
	margin: 24px auto;
	max-width: 1200px;
	padding: 18px;
	border-radius: 18px;
	border: 1px solid rgba(124, 182, 255, 0.24);
	background:
		radial-gradient(120% 100% at 0% 0%, rgba(124, 182, 255, 0.16), transparent 58%),
		radial-gradient(140% 100% at 100% 0%, rgba(102, 217, 209, 0.12), transparent 62%),
		linear-gradient(180deg, rgba(9, 19, 36, 0.9), rgba(11, 19, 35, 0.78));
	box-shadow: 0 18px 44px rgba(2, 6, 23, 0.32);
	color: #dce8fb;
}

.hg-preview-showcase--full {
	max-width: 1240px;
}

.hg-preview-workbench {
	display: grid;
	gap: 14px;
}

.hg-preview-workbench__controls {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px;
	padding: 12px;
	border-radius: 12px;
	border: 1px solid rgba(148, 163, 184, 0.2);
	background: rgba(15, 23, 42, 0.42);
}

.hg-preview-workbench__controls label {
	display: grid;
	gap: 6px;
	font-size: 11px;
	color: #9db3d1;
}

.hg-preview-workbench__controls input,
.hg-preview-workbench__controls select {
	height: 36px;
	border-radius: 10px;
	border: 1px solid rgba(148, 163, 184, 0.26);
	background: rgba(15, 23, 42, 0.64);
	color: #dce8fb;
	padding: 0 10px;
	font-size: 13px;
}

.hg-preview-workbench__stage {
	display: grid;
	grid-template-columns: minmax(280px, 420px) 1fr;
	gap: 14px;
	align-items: start;
}

.hg-preview-metrics {
	display: grid;
	grid-template-columns: repeat(2, minmax(180px, 1fr));
	gap: 10px;
}

.hg-preview-metric {
	padding: 12px;
	border-radius: 12px;
	border: 1px solid rgba(148, 163, 184, 0.2);
	background: rgba(15, 23, 42, 0.42);
	display: grid;
	gap: 6px;
}

.hg-preview-metric span {
	font-size: 11px;
	color: #9db3d1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.hg-preview-metric strong {
	font-size: 18px;
	line-height: 1.2;
	color: #e8f0fb;
}

#hg-preview-live-switcher .hg-switcher__chip {
	appearance: none;
	font-family: inherit;
}

.hg-preview-showcase__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.hg-preview-showcase__header strong {
	font-size: 15px;
	letter-spacing: 0.02em;
}

.hg-preview-showcase__header span {
	font-size: 12px;
	opacity: 0.82;
}

.hg-preview-showcase__group {
	margin-bottom: 14px;
}

.hg-preview-showcase__group h4 {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	opacity: 0.85;
}

.hg-preview-showcase__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
}

.hg-preview-switcher-item {
	padding: 10px;
	border-radius: 12px;
	border: 1px solid rgba(148, 163, 184, 0.16);
	background: rgba(15, 23, 42, 0.42);
}

.hg-preview-switcher-item__title {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	margin-bottom: 8px;
	color: #9db3d1;
}