/* ==========================================================================
   StreamSera admin
   Tokens → shell → page primitives → pages → builder
   ========================================================================== */

.streamsera-wrap.wrap {
	margin: 0 0 0 -20px;
}
body.streamsera-admin-page #wpbody-content {
	padding-bottom: 0;
}
body.streamsera-admin-page #wpcontent {
	padding-bottom: 0;
}
body.streamsera-admin-page #wpfooter {
	display: none;
}
body.streamsera-admin-page .notice,
body.streamsera-admin-page .updated,
body.streamsera-admin-page .error {
	margin: 12px 24px 0 4px;
}

@mixin ss-light-tokens {
	--ink: #16181f;
	--ink-2: #4b4f5c;
	--ink-3: #7b8090;
	--line: #dfe2ea;
	--line-2: #ecEEf3;
	--line-strong: #c9cdd8;
	--canvas: #f5f6f9;
	--surface: #ffffff;
	--surface-2: #f8f9fb;
	--brand: #5b4cf5;
	--brand-ink: #4536d6;
	--brand-soft: #eeecfe;
	--live: #e5484d;
	--live-soft: #fdecec;
	--ok: #1f9d5a;
	--ok-soft: #e6f5ec;
	--warn: #d9850b;
	--warn-soft: #fdf1df;
	--info: #2563eb;
	--info-soft: #e8efff;
	--r-sm: 8px;
	--r-md: 12px;
	--r-lg: 16px;
	--shadow-sm: 0 1px 2px rgba(22, 24, 31, 0.05);
	--shadow-md: 0 8px 24px -8px rgba(22, 24, 31, 0.16);
	--max: 1180px;
}

.ss-admin {
	@include ss-light-tokens;

	min-height: calc(100vh - 32px);
	margin-top: -10px;
	background: var(--canvas);
	color: var(--ink);
	font-size: 13.5px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	a {
		color: var(--brand-ink);
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
	h1,
	h2,
	h3 {
		margin: 0;
		font-weight: 650;
		letter-spacing: -0.012em;
		color: var(--ink);
	}
	p {
		margin: 0;
	}
	code {
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
		font-size: 12px;
		background: var(--surface-2);
		border: 1px solid var(--line);
		border-radius: 4px;
		padding: 1px 6px;
		color: var(--ink);
	}

	/* ---- WordPress controls, restyled: rounded, calm borders, brand focus ---- */
	.components-button {
		border-radius: var(--r-sm);
		font-weight: 600;
		transition: background 0.12s ease, box-shadow 0.12s ease, color 0.12s ease;
		&.is-primary {
			background: var(--brand);
			border-color: var(--brand);
			box-shadow: none;
			&:hover:not(:disabled) {
				background: var(--brand-ink);
			}
			&:focus:not(:disabled) {
				box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--brand);
			}
		}
		&.is-secondary {
			box-shadow: inset 0 0 0 1px var(--line-strong);
			color: var(--ink);
			background: var(--surface);
			&:hover:not(:disabled) {
				box-shadow: inset 0 0 0 1px var(--ink-3);
				background: var(--surface-2);
				color: var(--ink);
			}
			&.is-destructive {
				color: var(--live);
				box-shadow: inset 0 0 0 1px #f3c4c6;
			}
		}
		&.is-tertiary {
			color: var(--ink-2);
			&:hover:not(:disabled) {
				color: var(--ink);
				background: var(--line-2);
			}
			&.is-destructive:hover:not(:disabled) {
				color: var(--live);
				background: var(--live-soft);
			}
		}
		&.is-link {
			font-weight: 550;
		}
		&.has-icon:not(.has-text) {
			min-width: 32px;
		}
		svg {
			flex: 0 0 auto;
		}
	}
	.components-base-control__label,
	.components-input-control__label,
	.components-toggle-control__label,
	.components-checkbox-control__label,
	.components-base-control label,
	[class*='components-'][class*='__label'] {
		font-weight: 600;
		font-size: 12.5px;
		color: var(--ink);
		text-transform: none !important;
		letter-spacing: 0 !important;
		margin-bottom: 6px;
	}
	.components-base-control__help {
		color: var(--ink-3);
		font-size: 12px;
		margin-top: 6px;
	}
	.components-text-control__input,
	.components-select-control__input,
	.components-textarea-control__input,
	.components-input-control__container .components-input-control__input,
	.components-search-control__input,
	input[type='text'],
	input[type='number'],
	input[type='url'],
	input[type='email'],
	select,
	textarea {
		border-radius: var(--r-sm) !important;
		border: 1px solid var(--line-strong) !important;
		box-shadow: none !important;
		background: var(--surface) !important;
		color: var(--ink) !important;
		min-height: 38px;
		font-size: 13.5px !important;
		transition: border-color 0.12s ease, box-shadow 0.12s ease;
		&:hover {
			border-color: var(--ink-3) !important;
		}
		&:focus,
		&:focus-within {
			border-color: var(--brand) !important;
			box-shadow: 0 0 0 3px var(--brand-soft) !important;
			outline: none;
		}
	}
	.components-input-control__backdrop {
		border: 0 !important;
		box-shadow: none !important;
	}
	.components-input-control__container:focus-within .components-input-control__backdrop {
		box-shadow: none !important;
	}
	.components-select-control__input {
		padding-right: 36px;
	}
	.components-search-control {
		.components-input-control__container {
			border: 1px solid var(--line-strong);
			border-radius: var(--r-sm);
			background: var(--surface);
			&:focus-within {
				border-color: var(--brand);
				box-shadow: 0 0 0 3px var(--brand-soft);
			}
		}
		.components-input-control__input {
			min-height: 36px;
			border: 0 !important;
			box-shadow: none !important;
			&:focus {
				box-shadow: none !important;
			}
		}
		.components-input-control__prefix,
		.components-input-control__suffix {
			color: var(--ink-3);
		}
	}
	.components-form-toggle {
		.components-form-toggle__track {
			background: var(--line-strong);
			border: 0;
			height: 20px;
			width: 36px;
			border-radius: 999px;
		}
		.components-form-toggle__thumb {
			background: var(--surface);
			border: 0;
			width: 16px;
			height: 16px;
			top: 2px;
			left: 2px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
		}
		&.is-checked .components-form-toggle__track {
			background: var(--brand);
		}
		&.is-checked .components-form-toggle__thumb {
			transform: translateX(16px);
		}
		input:focus-visible + .components-form-toggle__track {
			box-shadow: 0 0 0 3px var(--brand-soft);
		}
	}
	.components-checkbox-control__input[type='checkbox'] {
		border-radius: 5px;
		border-color: var(--line-strong);
		&:checked {
			background: var(--brand);
			border-color: var(--brand);
		}
		&:focus {
			box-shadow: 0 0 0 3px var(--brand-soft);
		}
	}
	.components-checkbox-control__label {
		margin-bottom: 0;
		font-weight: 500;
	}
	.components-range-control {
		.components-range-control__track {
			background: var(--brand);
			height: 4px;
		}
		.components-range-control__slider + span,
		.components-range-control__wrapper > span:first-child {
			height: 4px;
			border-radius: 999px;
			background: var(--line-2);
		}
		.components-range-control__thumb-wrapper,
		.components-range-control__thumb {
			background: var(--brand);
			border: 0;
			width: 16px;
			height: 16px;
		}
		.components-range-control__thumb-wrapper {
			top: -6px;
		}
		.components-range-control__tooltip {
			border-radius: 6px;
			background: var(--ink);
		}
		.components-number-control input {
			min-height: 34px;
		}
	}
	.components-tab-panel__tabs-item {
		font-weight: 600;
		color: var(--ink-2);
		&.is-active {
			color: var(--brand-ink);
			box-shadow: inset 0 -2px 0 var(--brand);
		}
	}
	.components-notice {
		border-radius: var(--r-md);
		border-left-width: 4px;
		/* Breathing room on both sides: a tip never touches the control or panel under it. */
		margin: 12px 0 14px;
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			margin-bottom: 0;
		}
		&.is-warning {
			background: var(--warn-soft);
			border-color: var(--warn);
		}
		&.is-success {
			background: var(--ok-soft);
			border-color: var(--ok);
		}
	}
	.components-popover__content {
		border-radius: var(--r-md);
		border: 1px solid var(--line);
		box-shadow: var(--shadow-md);
	}
	.components-snackbar {
		border-radius: var(--r-md);
	}
	.components-modal__frame.ss-modal {
		border-radius: var(--r-lg);
		.components-modal__header {
			border-bottom: 1px solid var(--line);
		}
		.components-modal__content {
			padding-top: 0;
		}
	}
	.components-modal__frame.ss-modal--sm {
		max-width: 440px;
	}
	.components-modal__frame.ss-modal--embed {
		max-width: 560px;
	}
	.ss-modal__actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		margin-top: 24px;
	}
}

.ss-muted {
	color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.ss-main {
	padding: 0 24px 48px;
}
.ss-admin--builder .ss-main {
	padding: 0;
}
.ss-snackbars {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 100000;
}

/* --------------------------------------------------------------------------
   Page primitives
   -------------------------------------------------------------------------- */
.ss-page {
	/* Content uses the full width of the admin area (24px gutters come from .ss-main).
	   Forms opt back into a readable column with .ss-page--form. */
	> :not(.ss-ph) {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
	&--form > :not(.ss-ph) {
		max-width: var(--max);
	}
}

.ss-ph {
	position: sticky;
	top: 32px;
	z-index: 25;
	margin: 0 -24px 24px;
	padding: 0 24px;
	background: var(--surface);
	.ss-ph__inner {
		max-width: none;
	}
	border-bottom: 1px solid var(--line);
	box-shadow: 0 1px 0 rgba(22, 24, 31, 0.02);
	&__inner {
		max-width: none;
		margin: 0;
		min-height: 64px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		padding: 10px 0;
	}
	h1 {
		font-size: 19px;
		line-height: 1.25;
	}
	&__tabs {
		flex: 0 1 auto;
		display: flex;
		align-items: center;
		margin-left: 8px;
		margin-right: auto;
		.ss-seg {
			margin: 0;
		}
	}
	&__text {
		display: flex;
		align-items: center;
		gap: 12px;
		min-width: 0;
		p {
			color: var(--ink-3);
			font-size: 12.5px;
			margin-top: 1px;
			max-width: 70ch;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	// Two columns: icon tile | title + description.
	&__icon {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		position: relative;
		width: 42px;
		height: 42px;
		border-radius: 13px;
		background: linear-gradient(140deg, #7b6dff 0%, #5b4cf5 48%, #3f2fd0 100%);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 14px -6px rgba(69, 54, 214, 0.6);
		color: #fff;
		.ss-i {
			fill: currentColor;
			filter: drop-shadow(0 1px 1px rgba(30, 20, 120, 0.25));
		}
		> * {
			position: relative;
			z-index: 1;
		}
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			border-radius: inherit;
			background: radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.22), transparent 55%);
			pointer-events: none;
		}
	}
	&__copy {
		min-width: 0;
	}
	&__back {
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		border-radius: var(--r-sm);
		color: var(--ink-2) !important;
		flex: 0 0 auto;
		&:hover {
			background: var(--line-2);
			text-decoration: none !important;
		}
	}
	&__actions {
		display: flex;
		align-items: center;
		gap: 8px;
		flex-shrink: 0;
		.components-base-control {
			margin: 0;
		}
	}
}

.ss-section {
	margin-bottom: 28px;
	&__head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 16px;
		margin-bottom: 10px;
		h2 {
			font-size: 15px;
		}
		p {
			color: var(--ink-3);
			margin-top: 2px;
			max-width: 70ch;
		}
	}
}

.ss-panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	&--padded {
		padding: 20px 22px;
	}
	&__foot {
		padding: 10px 18px;
		border-top: 1px solid var(--line-2);
		font-size: 12.5px;
	}
	& + & {
		margin-top: 12px;
	}
}

.ss-field {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
	gap: 24px;
	padding: 18px 0;
	border-top: 1px solid var(--line-2);
	&:first-child {
		border-top: 0;
		padding-top: 0;
	}
	&:last-child {
		padding-bottom: 0;
	}
	&__text label {
		font-weight: 600;
		display: block;
	}
	&__text p {
		color: var(--ink-3);
		margin-top: 3px;
		font-size: 12.5px;
	}
	&__control {
		min-width: 0;
		.components-base-control {
			margin-bottom: 0;
		}
	}
	&--inline {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

.ss-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 28px;
}
.ss-stat {
	--stat-c: var(--ink-2);
	--stat-soft: var(--line-2);
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 16px 18px;
	min-width: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	box-shadow: var(--shadow-sm);
	&.is-link {
		cursor: pointer;
		text-decoration: none !important;
		transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
		&:hover {
			border-color: var(--line-strong);
			box-shadow: var(--shadow-md);
			transform: translateY(-1px);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: 2px;
		}
	}
	&__icon {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		border-radius: 12px;
		background: var(--stat-soft);
		color: var(--stat-c);
		.ss-i {
			fill: currentColor;
		}
	}
	&__body {
		display: flex;
		flex-direction: column;
		min-width: 0;
		flex: 1 1 auto;
	}
	&__top {
		display: flex;
		align-items: baseline;
		gap: 10px;
		flex-wrap: wrap;
	}
	&__value {
		font-size: 26px;
		font-weight: 650;
		letter-spacing: -0.02em;
		line-height: 1.1;
		color: var(--ink);
	}
	&__label {
		margin-top: 4px;
		color: var(--ink-2);
		font-weight: 500;
		font-size: 13px;
	}
	&__hint {
		margin-top: 5px;
		font-size: 12px;
		color: var(--ink-3);
	}
	&__delta {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		font-size: 11.5px;
		font-weight: 650;
		padding: 1px 7px 1px 4px;
		border-radius: 999px;
		background: var(--line-2);
		color: var(--ink-2);
		small {
			font-weight: 500;
			color: var(--ink-3);
			margin-left: 3px;
		}
		.ss-i {
			fill: currentColor;
		}
		&.is-up {
			background: var(--ok-soft);
			color: var(--ok);
		}
		&.is-down {
			background: var(--live-soft);
			color: var(--live);
		}
	}
	/* Tones colour the icon tile (and the value for the two alarm tones). */
	&--success,
	&--ok,
	&--live {
		--stat-c: var(--ok);
		--stat-soft: var(--ok-soft);
	}
	&--error {
		--stat-c: var(--live);
		--stat-soft: var(--live-soft);
	}
	&--warning,
	&--warn {
		--stat-c: var(--warn);
		--stat-soft: var(--warn-soft);
	}
	&--brand {
		--stat-c: var(--brand-ink);
		--stat-soft: var(--brand-soft);
	}
	&--info {
		--stat-c: var(--info);
		--stat-soft: var(--info-soft);
	}
	&--neutral,
	&--muted {
		--stat-c: var(--ink-3);
		--stat-soft: var(--line-2);
	}
	&--success &__value,
	&--ok &__value,
	&--live &__value {
		color: var(--ok);
	}
	&--error &__value {
		color: var(--live);
	}
	&--muted &__value,
	&--neutral &__value {
		color: var(--ink-3);
	}
}

.ss-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 600;
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--line-2);
	color: var(--ink-2);
	white-space: nowrap;
	vertical-align: middle;
	&__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: currentColor;
	}
	/* Semantic tones: success = green, error = red, warning = amber, info = blue, neutral = gray. */
	&--success,
	&--ok,
	&--live {
		background: var(--ok-soft);
		color: var(--ok);
	}
	&--error,
	&--danger {
		background: var(--live-soft);
		color: var(--live);
	}
	&--warning,
	&--warn {
		background: var(--warn-soft);
		color: var(--warn);
	}
	&--info {
		background: var(--info-soft);
		color: var(--info);
	}
	&--neutral {
		background: var(--line-2);
		color: var(--ink-2);
	}
	&--pulse .ss-pill__dot {
		animation: ss-pulse 1.4s ease-in-out infinite;
	}
	&--brand {
		background: var(--brand-soft);
		color: var(--brand-ink);
		font-size: 10.5px;
		padding: 1px 7px;
	}
}
.ss-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ink-3);
	opacity: 0.5;
	&--live,
	&--success {
		background: var(--ok);
		opacity: 1;
		box-shadow: 0 0 0 3px var(--ok-soft);
	}
	&--error {
		background: var(--live);
		opacity: 1;
		box-shadow: 0 0 0 3px var(--live-soft);
	}
}

.ss-list {
	list-style: none;
	margin: 0;
	padding: 0;
	&--links li a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 11px 18px;
		color: var(--ink) !important;
		border-top: 1px solid var(--line-2);
		&:hover {
			background: var(--surface-2);
			text-decoration: none !important;
		}
		.ss-i {
			color: var(--ink-3);
		}
	}
	&--links li:first-child a {
		border-top: 0;
	}
}
.ss-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 18px;
	border-top: 1px solid var(--line-2);
	.ss-list li:first-child > &,
	&:first-child {
		border-top: 0;
	}
	&__lead {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
	}
	&__body {
		flex: 1 1 auto;
		min-width: 0;
	}
	&__title {
		font-weight: 600;
		display: flex;
		align-items: center;
		gap: 8px;
		a {
			color: var(--ink);
		}
	}
	&__meta {
		color: var(--ink-3);
		font-size: 12.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__side {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 12.5px;
	}
	&__num {
		font-weight: 600;
		small {
			font-weight: 400;
			color: var(--ink-3);
		}
	}
	.ss-list--compact & {
		padding: 10px 18px;
	}
}
.ss-layout-mini {
	display: block;
	width: 34px;
	height: 24px;
	border-radius: 5px;
	background: var(--line-2);
	position: relative;
	&::after {
		content: '';
		position: absolute;
		background: var(--brand);
		opacity: 0.55;
		border-radius: 2px;
	}
	&--bar::after {
		left: 4px;
		right: 4px;
		bottom: 4px;
		height: 5px;
	}
	&--card::after {
		left: 11px;
		right: 11px;
		top: 4px;
		bottom: 4px;
	}
	&--hero::after {
		inset: 4px;
	}
}

.ss-cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 24px;
	align-items: start;
	&--form {
		grid-template-columns: minmax(0, 1fr) 300px;
	}
	&--dash {
		grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
	}
	&__side--sticky {
		position: sticky;
		top: 112px;
	}
	&__side .ss-panel + .ss-panel {
		margin-top: 16px;
	}
	&__side > .ss-panel + .ss-section {
		margin-top: 24px;
	}
}

.ss-empty {
	text-align: center;
	padding: 36px 24px;
	&__icon {
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin: 0 auto 12px;
		border-radius: 12px;
		background: var(--brand-soft);
		color: var(--brand-ink);
	}
	h3 {
		font-size: 15px;
	}
	p {
		color: var(--ink-3);
		margin: 6px auto 14px;
		max-width: 44ch;
	}
}
.ss-loading {
	display: grid;
	place-items: center;
	min-height: 240px;
}

.ss-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line-2);
	.components-search-control {
		width: 280px;
	}
	&--bare {
		padding: 0 0 14px;
		border: 0;
	}
}

.ss-table {
	width: 100%;
	border-collapse: collapse;
	th,
	td {
		text-align: left;
		padding: 12px 16px;
		border-top: 1px solid var(--line-2);
		vertical-align: middle;
	}
	th {
		font-size: 12px;
		font-weight: 600;
		color: var(--ink-3);
		border-top: 0;
	}
	tbody tr:hover td {
		background: var(--surface-2);
	}
	&__actions {
		text-align: right;
		white-space: nowrap;
		.components-button {
			margin-left: 2px;
			color: var(--ink-2);
		}
		.components-button.is-destructive {
			color: var(--ink-3);
			&:hover {
				color: var(--live);
			}
		}
	}
	a strong {
		color: var(--ink);
	}
}
.ss-cell-title {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ss-cell-np {
	max-width: 320px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ss-copy {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 12px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	margin: 10px 0;
	code {
		flex: 1 1 auto;
		background: none;
		border: 0;
		padding: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.ss-code-block {
	display: block;
	padding: 8px 10px;
	margin-bottom: 6px;
	white-space: nowrap;
	overflow: auto;
}

.ss-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	margin: 12px 0 0;
	font-size: 12.5px;
	dt {
		color: var(--ink-3);
	}
	dd {
		margin: 0;
	}
}

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */
.ss-welcome {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 56px 32px;
	max-width: 640px;
	margin: 24px auto 0;
	text-align: center;
	&__art {
		position: relative;
		width: 96px;
		height: 96px;
		margin: 0 auto 20px;
		display: grid;
		place-items: center;
		color: var(--brand);
	}
	&__ring {
		position: absolute;
		inset: 0;
		border-radius: 50%;
		border: 1.5px solid var(--brand);
		opacity: 0;
		animation: ss-ring 3s ease-out infinite;
		&:nth-child(2) {
			animation-delay: 1s;
		}
		&:nth-child(3) {
			animation-delay: 2s;
		}
	}
	h2 {
		font-size: 22px;
	}
	p {
		color: var(--ink-2);
		margin: 10px auto 22px;
		max-width: 52ch;
	}
	&__actions {
		display: flex;
		justify-content: center;
		gap: 8px;
	}
}

.ss-checklist {
	padding: 18px 20px;
	&__head {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		h3 {
			font-size: 15px;
		}
		p {
			color: var(--ink-3);
			font-size: 12.5px;
		}
	}
	&__steps {
		list-style: none;
		margin: 14px 0 0;
		padding: 0;
		li {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 8px 0;
			border-top: 1px solid var(--line-2);
			&.is-done .ss-checklist__label {
				color: var(--ink-3);
				text-decoration: line-through;
			}
		}
	}
	&__mark {
		display: grid;
		place-items: center;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 1.5px solid var(--line);
		color: #fff;
		flex: 0 0 auto;
		.is-done & {
			background: var(--ok);
			border-color: var(--ok);
		}
	}
	&__label {
		flex: 1 1 auto;
	}
}
.ss-progress {
	height: 4px;
	border-radius: 999px;
	background: var(--line-2);
	margin-top: 12px;
	overflow: hidden;
	span {
		display: block;
		height: 100%;
		background: var(--brand);
		border-radius: inherit;
		transition: width 0.4s ease;
	}
}
/* --------------------------------------------------------------------------
   Stations
   -------------------------------------------------------------------------- */
.ss-stream {
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface-2);
	& + & {
		margin-top: 12px;
	}
	&__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 8px;
	}
	&__index {
		font-size: 12px;
		font-weight: 600;
		color: var(--ink-3);
	}
	&__url {
		display: flex;
		gap: 8px;
		.components-base-control {
			flex: 1 1 auto;
		}
		input {
			font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
			font-size: 12.5px;
		}
	}
	&__grid {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 12px;
		margin-top: 12px;
	}
}
.ss-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 16px;
	.span-2 {
		grid-column: span 2;
	}
	.components-base-control {
		margin-bottom: 12px;
	}
}
.ss-logo-field {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding-bottom: 18px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--line-2);
	&__title {
		font-weight: 600;
	}
	p {
		margin: 2px 0 10px;
		font-size: 12.5px;
	}
}
.ss-logo-preview {
	width: 80px;
	height: 80px;
	border-radius: var(--r-md);
	border: 1.5px dashed var(--line);
	background: var(--surface-2);
	display: grid;
	place-items: center;
	overflow: hidden;
	cursor: pointer;
	color: var(--ink-3);
	padding: 0;
	flex: 0 0 auto;
	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
	&:hover {
		border-color: var(--brand);
		color: var(--brand);
	}
}
.ss-livecard {
	padding: 16px 18px;
	&__head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		h3 {
			font-size: 14px;
		}
	}
	&__track {
		margin-top: 10px;
		font-weight: 600;
		line-height: 1.35;
	}
}
.ss-tips {
	padding: 16px 18px;
	h3 {
		font-size: 14px;
		margin-bottom: 8px;
	}
	ul {
		margin: 0;
		padding-left: 18px;
		color: var(--ink-2);
		font-size: 12.5px;
		li + li {
			margin-top: 6px;
		}
	}
}

/* --------------------------------------------------------------------------
   Players
   -------------------------------------------------------------------------- */
.ss-viewswitch {
	display: inline-flex;
	padding: 3px;
	gap: 2px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	button {
		display: grid;
		place-items: center;
		width: 32px;
		height: 30px;
		border: 0;
		border-radius: 6px;
		background: transparent;
		color: var(--ink-3);
		cursor: pointer;
		&:hover {
			color: var(--ink);
			background: var(--line-2);
		}
		&.is-active {
			background: var(--brand-soft);
			border-color: color-mix(in srgb, var(--brand) 35%, transparent);
			color: var(--brand-ink);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
		}
	}
}
.ss-thumb {
	display: block;
	border: 0;
	cursor: pointer;
	position: relative;
	padding: 0;
	background: linear-gradient(135deg, color-mix(in srgb, var(--p) 16%, #fff), color-mix(in srgb, var(--a) 16%, #fff));
	border-radius: var(--r-sm);
	width: 64px;
	height: 44px;
	flex: 0 0 auto;
	overflow: hidden;
	&__shape {
		position: absolute;
		background: var(--p);
		border-radius: 3px;
	}
	&--bar &__shape {
		left: 8px;
		right: 8px;
		bottom: 7px;
		height: 8px;
	}
	&--card &__shape {
		left: 50%;
		top: 7px;
		width: 22px;
		height: 30px;
		transform: translateX(-50%);
	}
	&--hero &__shape {
		inset: 7px 8px;
	}
	.ss-player-card & {
		width: 100%;
		height: 120px;
		border-radius: 0;
		border-bottom: 1px solid var(--line-2);
		&__shape {
			border-radius: 6px;
			box-shadow: 0 6px 16px color-mix(in srgb, var(--p) 35%, transparent);
		}
	}
	.ss-player-card &--bar &__shape {
		left: 20px;
		right: 20px;
		bottom: 18px;
		height: 22px;
	}
	.ss-player-card &--card &__shape {
		top: 16px;
		width: 70px;
		height: 88px;
	}
	.ss-player-card &--hero &__shape {
		inset: 16px 20px;
	}
}
.ss-skinchip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	i {
		width: 14px;
		height: 14px;
		border-radius: 50%;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	}
}
.ss-table--players code {
	white-space: nowrap;
}

.ss-player-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}
.ss-player-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	&__body {
		padding: 14px 16px 6px;
		flex: 1 1 auto;
		h3 {
			font-size: 14.5px;
			a {
				color: var(--ink);
			}
		}
	}
	&__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 10px;
		margin-top: 4px;
		color: var(--ink-3);
		font-size: 12.5px;
		span + span::before {
			content: '·';
			margin-right: 10px;
			color: var(--line);
		}
	}
	&__actions {
		display: flex;
		align-items: center;
		gap: 2px;
		padding: 8px 10px 10px;
		.components-button:first-child {
			margin-right: 4px;
		}
		.is-destructive,
		.components-dropdown:last-child {
			margin-left: auto;
		}
	}
}

/* --------------------------------------------------------------------------
   Settings
   -------------------------------------------------------------------------- */
.ss-settings {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
	min-height: calc(100vh - 160px);
	&__nav {
		position: sticky;
		top: 112px;
		align-self: start;
		max-height: calc(100vh - 136px);
		overflow: auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 10px 8px;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		box-shadow: var(--shadow-sm);
	}
	&__group {
		display: flex;
		flex-direction: column;
		gap: 1px;
	}
	&__group-label {
		padding: 6px 10px 4px;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--ink-3);
	}
	&__nav a {
		display: flex;
		align-items: center;
		gap: 10px;
		min-height: 36px;
		padding: 4px 8px;
		border-radius: var(--r-md);
		color: var(--ink-2) !important;
		font-weight: 550;
		border: 1px solid transparent;
		&:hover {
			background: var(--surface-2);
			text-decoration: none !important;
			color: var(--ink) !important;
		}
		&.is-active {
			background: var(--brand);
			border-color: var(--brand);
			color: #fff !important;
			.ss-settings__icon {
				background: rgba(255, 255, 255, 0.18);
				color: #fff;
			}
		}
	}
	&__icon {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: 28px;
		height: 28px;
		border-radius: 8px;
		background: var(--line-2);
		color: var(--ink-2);
		.ss-i {
			fill: currentColor;
		}
	}
	&__text {
		display: flex;
		flex-direction: column;
		min-width: 0;
		line-height: 1.25;
	}
	&__label {
		font-size: 13px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__hint {
		display: none;
	}
	&__body {
		min-width: 0;
		> .ss-section,
		> .ss-panel,
		> .components-notice {
			max-width: none;
		}
		.components-text-control__input,
		.components-select-control__input,
		.components-textarea-control__input,
		input[type='text'],
		input[type='url'],
		input[type='number'],
		input[type='email'] {
			max-width: 560px;
		}
	}
}
.ss-tools {
	list-style: none;
	margin: 0;
	padding: 0;
	li {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		padding: 16px 20px;
		border-top: 1px solid var(--line-2);
		&:first-child {
			border-top: 0;
		}
		p {
			color: var(--ink-3);
			font-size: 12.5px;
			margin-top: 2px;
		}
	}
}
.ss-status {
	list-style: none;
	margin: 0;
	padding: 0;
	li {
		display: grid;
		grid-template-columns: 24px 220px 1fr;
		gap: 12px;
		align-items: center;
		padding: 11px 20px;
		border-top: 1px solid var(--line-2);
		&:first-child {
			border-top: 0;
		}
		&.is-ok .ss-status__icon {
			color: var(--ok);
		}
		&.is-warn .ss-status__icon {
			color: var(--warn);
		}
	}
	&__label {
		font-weight: 600;
	}
	&__detail {
		color: var(--ink-3);
		font-size: 12.5px;
		word-break: break-all;
	}
}
.ss-b-note {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 12px 14px;
	border-radius: var(--r-md);
	background: var(--surface-2);
	color: var(--ink-2);
	font-size: 12.5px;
	margin-top: 14px;
	.ss-i {
		flex: 0 0 auto;
		color: var(--ink-3);
		margin-top: 1px;
	}
}

/* --------------------------------------------------------------------------
   Builder
   -------------------------------------------------------------------------- */
.ss-builder {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 32px);

	&__top {
		position: sticky;
		top: 32px;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 20px;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
	}
	&__left,
	&__right {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	&__left > .components-button.is-tertiary {
		/* "← Players": a real button at rest. */
		height: 34px;
		padding: 0 12px 0 8px;
		border: 1px solid var(--line);
		border-radius: 999px;
		background: var(--surface-2);
		color: var(--ink-2);
		font-weight: 600;
		gap: 4px;
		&:hover:not(:disabled) {
			background: var(--line-2);
			border-color: var(--line-strong);
			color: var(--ink);
		}
		&:focus-visible {
			box-shadow: 0 0 0 3px var(--brand-soft);
			border-color: var(--brand);
		}
	}
	&__title {
		/* Looks like an input at rest. */
		border: 1px solid var(--line);
		background: color-mix(in srgb, var(--surface-2) 70%, transparent);
		font-size: 16px;
		font-weight: 500;
		letter-spacing: -0.01em;
		padding: 6px 12px;
		height: 36px;
		border-radius: var(--r-sm);
		min-width: 260px;
		color: var(--ink);
		transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
		&:hover {
			border-color: var(--line-strong);
			background: var(--surface-2);
		}
		&:focus {
			border-color: var(--brand);
			background: var(--surface);
			outline: none;
			box-shadow: 0 0 0 3px var(--brand-soft);
		}
	}
	&__left .ss-pill {
		flex: 0 0 auto;
		margin-left: 2px;
	}
	&__body {
		display: grid;
		grid-template-columns: 184px minmax(0, 1fr) 480px;
		flex: 1 1 auto;
		min-height: 0;
	}
	&__rail {
		background: var(--surface);
		border-right: 1px solid var(--line);
		padding: 14px 10px;
		display: flex;
		flex-direction: column;
		gap: 2px;
		button {
			display: flex;
			align-items: center;
			gap: 10px;
			width: 100%;
			padding: 9px 12px;
			border: 0;
			border-radius: var(--r-sm);
			background: transparent;
			color: var(--ink-2);
			font: inherit;
			font-weight: 550;
			text-align: left;
			cursor: pointer;
			.ss-i {
				color: var(--ink-3);
			}
			&:hover {
				background: var(--line-2);
				color: var(--ink);
			}
			&.is-active {
				background: var(--brand-soft);
				color: var(--brand-ink);
				.ss-i {
					color: var(--brand);
				}
			}
			&:focus-visible {
				outline: 2px solid var(--brand);
				outline-offset: -2px;
			}
		}
	}
	&__main {
		overflow-y: auto;
		padding: 28px 36px 60px;
		background: var(--canvas);
	}
	&__main-head {
		max-width: 760px;
		margin-bottom: 22px;
		h2 {
			font-size: 20px;
		}
		p {
			color: var(--ink-3);
			margin-top: 2px;
		}
	}
	&__main-body {
		max-width: 760px;
		display: flex;
		flex-direction: column;
		gap: 18px;
	}
	&__preview {
		background: var(--surface);
		border-left: 1px solid var(--line);
		display: flex;
		flex-direction: column;
		min-height: 0;
		/* The column never scrolls itself; the stage does, so the bar stays put for every device. */
		overflow: hidden;
	}
}

.ss-b-group {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 20px 22px;
	&__head {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 14px;
		h3 {
			font-size: 14.5px;
		}
		p {
			color: var(--ink-3);
			font-size: 12.5px;
			margin-top: 2px;
			max-width: 60ch;
		}
	}
}
.ss-b-field {
	max-width: 420px;
}
.ss-checks {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 16px;
	.components-base-control {
		margin: 0;
	}
}
.ss-crash {
	max-width: 520px;
	margin: 60px auto;
	text-align: center;
	color: var(--ink-2);
	.ss-i {
		color: var(--warn);
	}
	h2 {
		margin: 8px 0 6px;
	}
	code {
		display: block;
		margin: 14px 0 18px;
		padding: 10px 12px;
		text-align: left;
		white-space: pre-wrap;
	}
}
.ss-b-two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	.components-base-control {
		margin-bottom: 0;
	}
}

.ss-layouts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.ss-layout-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-align: left;
	&:hover {
		border-color: var(--ink-3);
	}
	&.is-active {
		border-color: var(--brand);
		box-shadow: 0 0 0 3px var(--brand-soft);
	}
	&:focus-visible {
		outline: 2px solid var(--brand);
		outline-offset: 2px;
	}
	&__thumb {
		flex: 0 0 auto;
		width: 84px;
		height: 56px;
		border-radius: 6px;
		background: var(--surface-2);
		position: relative;
		overflow: hidden;
		i {
			position: absolute;
			background: var(--brand);
			opacity: 0.25;
			border-radius: 3px;
		}
		&--bar i:nth-child(1) {
			left: 6px;
			right: 6px;
			bottom: 6px;
			height: 10px;
			opacity: 0.75;
		}
		&--bar i:nth-child(2),
		&--bar i:nth-child(3) {
			left: 6px;
			right: 6px;
			height: 6px;
			top: 8px;
		}
		&--bar i:nth-child(3) {
			top: 18px;
			right: 30px;
		}
		&--card i:nth-child(1) {
			left: 28px;
			width: 28px;
			top: 7px;
			height: 26px;
			opacity: 0.75;
		}
		&--card i:nth-child(2) {
			left: 28px;
			width: 28px;
			top: 37px;
			height: 4px;
		}
		&--card i:nth-child(3) {
			left: 34px;
			width: 16px;
			top: 44px;
			height: 6px;
			border-radius: 50%;
			opacity: 0.75;
		}
		&--hero i:nth-child(1) {
			inset: 6px;
			opacity: 0.75;
		}
		&--hero i:nth-child(2) {
			left: 12px;
			top: 12px;
			width: 20px;
			bottom: 12px;
			background: #fff;
			opacity: 0.6;
		}
		&--hero i:nth-child(3) {
			left: 38px;
			right: 12px;
			top: 18px;
			height: 6px;
			background: #fff;
			opacity: 0.7;
		}
	}
	&__text {
		min-width: 0;
		strong {
			display: block;
		}
		small {
			color: var(--ink-3);
			font-size: 12px;
			line-height: 1.35;
			display: block;
		}
	}
	&__check {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--brand);
		color: #fff;
		display: grid;
		place-items: center;
	}
}
.ss-seg {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--r-md);
	background: var(--surface-2);
	border: 1px solid var(--line);
	margin-bottom: 12px;
	button {
		border: 0;
		background: transparent;
		padding: 7px 14px;
		border-radius: 7px;
		font: inherit;
		font-weight: 550;
		color: var(--ink-2);
		cursor: pointer;
		&.is-active {
			background: var(--surface);
			color: var(--ink);
			box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
		}
	}
}
.ss-skins {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ss-skin-opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px 7px 8px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	cursor: pointer;
	font: inherit;
	font-weight: 550;
	color: var(--ink-2);
	&__chip {
		width: 18px;
		height: 18px;
		border-radius: 50%;
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	}
	&:hover {
		border-color: var(--ink-3);
	}
	&.is-active {
		border-color: var(--brand);
		color: var(--ink);
		box-shadow: 0 0 0 3px var(--brand-soft);
	}
}
.ss-presets {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}
.ss-preset {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--surface);
	box-shadow: 0 0 0 1px var(--line);
	cursor: pointer;
	padding: 0;
	&.is-active {
		box-shadow: 0 0 0 2px var(--brand);
	}
	&:focus-visible {
		outline: 2px solid var(--brand);
		outline-offset: 2px;
	}
}
.ss-colors {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.ss-color {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	&__label {
		font-weight: 600;
		display: block;
	}
	&__help {
		display: block;
		font-size: 11.5px;
		color: var(--ink-3);
	}
	&__swatch {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		border: 1px solid var(--line);
		background: var(--surface);
		border-radius: var(--r-sm);
		padding: 3px 8px 3px 3px;
		cursor: pointer;
		flex: 0 0 auto;
		span {
			width: 24px;
			height: 24px;
			border-radius: 5px;
			border: 1px solid var(--line);
			&.is-auto {
				background: repeating-linear-gradient(45deg, #fff 0 4px, #e5e7eb 4px 8px) !important;
			}
		}
		code {
			background: none;
			border: 0;
			padding: 0;
			font-size: 11.5px;
		}
		&:hover,
		&.is-open {
			border-color: var(--ink-3);
		}
	}
	&__popover {
		padding: 8px;
	}
}
.ss-comps {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	/* A row that holds a segmented control or other wide input takes both columns. */
	.ss-comp--wide {
		grid-column: 1 / -1;
	}
	/* Settings with long descriptions: one card per row, laid out as
	   [icon] [title] [control] with the description on its own full-width line. */
	&--stack {
		grid-template-columns: 1fr;
		.ss-comp {
			display: grid;
			grid-template-columns: auto 1fr auto;
			grid-template-areas:
				'icon title control'
				'desc desc desc';
			align-items: center;
			column-gap: 12px;
			row-gap: 6px;
			padding: 12px 14px;
		}
		.ss-comp__icon {
			grid-area: icon;
		}
		.ss-comp__text {
			display: contents;
			strong {
				grid-area: title;
				font-size: 13.5px;
			}
			small {
				grid-area: desc;
				font-size: 12.5px;
				line-height: 1.45;
				color: var(--ink-2);
			}
		}
		.ss-comp > :last-child:not(.ss-comp__text) {
			grid-area: control;
			justify-self: end;
		}
	}
}
.ss-comp {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	cursor: pointer;
	background: var(--surface);
	&.is-on {
		border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
		background: color-mix(in srgb, var(--brand-soft) 35%, var(--surface));
	}
	&__icon {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border-radius: 8px;
		background: var(--surface-2);
		color: var(--ink-3);
		flex: 0 0 auto;
		.is-on & {
			background: var(--brand-soft);
			color: var(--brand);
		}
	}
	&__text {
		flex: 1 1 auto;
		min-width: 0;
		strong {
			display: block;
			font-size: 13px;
		}
		small {
			display: block;
			color: var(--ink-3);
			font-size: 11.5px;
			line-height: 1.3;
		}
	}
	.components-base-control {
		margin: 0;
	}
	.components-toggle-control__label {
		display: none;
	}
}

/* Preview sidebar */
.ss-preview__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
	flex: 0 0 auto;
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--surface);
	min-height: 53px;
}
.ss-preview__title {
	font-weight: 600;
	font-size: 12.5px;
	color: var(--ink-2);
}
.ss-preview__tools {
	display: flex;
	gap: 4px;
	button {
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 1px solid transparent;
		background: transparent;
		border-radius: 9px;
		color: var(--ink-3);
		cursor: pointer;
		line-height: 0;
		.ss-i {
			width: 20px;
			height: 20px;
			fill: currentColor;
		}
		&.ss-preview__theme {
			margin-left: 4px;
			border-left: 0;
			position: relative;
			&::before {
				content: '';
				position: absolute;
				left: -4px;
				top: 7px;
				bottom: 7px;
				width: 1px;
				background: var(--line);
			}
		}
		&:hover {
			background: var(--line-2);
			color: var(--ink);
		}
		&.is-active {
			background: var(--brand-soft);
			color: var(--brand-ink);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
		}
	}
}
.ss-preview__stage {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 20px 14px;
	--stage-bg: #eceef3;
	--stage-dot: rgba(22, 24, 31, 0.09);
	background:
		radial-gradient(circle at 1px 1px, var(--stage-dot) 1px, transparent 0) 0 0 / 18px 18px,
		var(--stage-bg);
	&.is-dark {
		--stage-bg: #1b1d26;
		--stage-dot: rgba(255, 255, 255, 0.09);
	}
}
/* Scale a wider virtual viewport into the sidebar so desktop/tablet layouts stay faithful. */
.ss-preview__frame {
	--sidebar-w: 452px;
	--scale: calc(var(--sidebar-w) / var(--frame-w));
	width: var(--frame-w);
	transform: scale(var(--scale));
	transform-origin: top left;
}
.ss-preview__inner {
	width: var(--frame-w);
}
.ss-preview__frame-wrap {
	height: calc(var(--frame-h, 0px) * var(--scale));
}
.ss-preview__stage.is-mobile .ss-preview__frame {
	--scale: 1;
	width: 390px;
	margin: 0 auto;
	transform: none;
}
.ss-preview__center {
	display: flex;
	justify-content: center;
}
.ss-preview__placeholder {
	padding: 40px 20px;
	text-align: center;
	color: var(--ink-3);
	border: 1.5px dashed var(--line);
	border-radius: var(--r-lg);
}
.ss-preview__hint {
	padding: 8px 14px;
	font-size: 11.5px;
	color: var(--ink-3);
	border-top: 1px solid var(--line);
}

/* Embed modal */
.ss-embed {
	padding: 16px 0 4px;
	p {
		margin-bottom: 10px;
	}
	&__steps {
		margin: 0 0 14px;
		padding-left: 20px;
		color: var(--ink-2);
		li + li {
			margin-top: 4px;
		}
	}
}
.ss-embed-tabs .components-tab-panel__tabs {
	border-bottom: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.ss-builder__body {
		grid-template-columns: 56px minmax(0, 1fr) 400px;
	}
	.ss-builder__rail button span {
		display: none;
	}
	.ss-builder__rail button {
		justify-content: center;
		padding: 10px 0;
	}
	.ss-preview__frame {
		--sidebar-w: 372px;
	}
}
@media (max-width: 960px) {
	.ss-cols,
	.ss-cols--form {
		grid-template-columns: 1fr;
	}
	.ss-cols__side--sticky {
		position: static;
	}
	.ss-stats {
		grid-template-columns: 1fr 1fr;
	}
	.ss-settings {
		grid-template-columns: 1fr;
		min-height: 0;
		&__nav {
			position: static;
			max-height: none;
			flex-direction: row;
			flex-wrap: wrap;
			gap: 8px;
		}
		&__group {
			flex-direction: row;
			flex-wrap: wrap;
		}
		&__group-label {
			width: 100%;
		}
		&__hint {
			display: none;
		}
	}
	.ss-builder {
		height: auto;
		&__body {
			grid-template-columns: 56px minmax(0, 1fr);
		}
		&__preview {
			grid-column: 1 / -1;
			border-left: 0;
			border-top: 1px solid var(--line);
		}
	}
}
@media (max-width: 720px) {
	.ss-main {
		padding: 20px 14px 40px;
	}
	.ss-ph {
		margin: 0 -14px 20px;
		padding: 0 14px;
		&__inner {
			flex-wrap: wrap;
		}
		&__text p {
			white-space: normal;
		}
	}
	.ss-field {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.ss-layouts,
	.ss-comps,
	.ss-colors,
	.ss-b-two,
	.ss-form-grid,
	.ss-stream__grid {
		grid-template-columns: 1fr;
	}
	.ss-form-grid .span-2 {
		grid-column: auto;
	}
}

@keyframes ss-pulse {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.4;
		transform: scale(0.7);
	}
}
@keyframes ss-ring {
	0% {
		transform: scale(0.5);
		opacity: 0.6;
	}
	100% {
		transform: scale(1.4);
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.ss-admin * {
		animation: none !important;
		transition: none !important;
	}
}

/* ==========================================================================
   header utilities, notices center, command palette, system status
   ========================================================================== */
.ss-ph__end {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
}
.ss-ph__utility {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-left: 14px;
	border-left: 1px solid var(--line);
}
.ss-util {
	position: relative;
}
.ss-admin .ss-util__btn.components-button {
	height: 34px;
	min-width: 34px;
	padding: 0 8px;
	border-radius: var(--r-sm);
	color: var(--ink-2);
	gap: 6px;
	&:hover {
		background: var(--surface-2);
		color: var(--ink);
	}
	&:focus-visible {
		box-shadow: 0 0 0 2px var(--brand-soft), 0 0 0 3px var(--brand);
	}
	kbd {
		font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
		color: var(--ink-3);
		background: var(--surface-2);
		border: 1px solid var(--line);
		border-radius: 5px;
		padding: 3px 5px;
	}
}
.ss-notices__btn {
	position: relative;
	.ss-notices__count {
		position: absolute;
		top: 2px;
		right: 2px;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		background: var(--ink-3);
		color: #fff;
		font-size: 10px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}
	&.is-info .ss-notices__count {
		background: var(--brand);
	}
	&.is-warning .ss-notices__count {
		background: var(--warn);
	}
	&.is-error .ss-notices__count {
		background: var(--live);
	}
}
.ss-notices__pop .components-popover__content {
	padding: 0;
	border-radius: var(--r-md);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-md);
	background: var(--surface);
	color: var(--ink);
}
.ss-notices {
	width: 360px;
	max-width: calc(100vw - 32px);
	font-size: 13px;
	&__head {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		padding: 12px 16px;
		border-bottom: 1px solid var(--line-2);
		span {
			color: var(--ink-3);
			font-size: 12px;
		}
	}
	&__empty {
		display: grid;
		place-items: center;
		gap: 6px;
		padding: 28px 16px;
		color: var(--ink-3);
		.ss-i {
			color: var(--ok);
		}
	}
	&__list {
		list-style: none;
		margin: 0;
		padding: 0;
		max-height: 380px;
		overflow: auto;
	}
	&__foot {
		padding: 8px 16px;
		border-top: 1px solid var(--line-2);
		text-align: center;
		font-size: 12px;
	}
}
.ss-notice {
	display: flex;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line-2);
	&:last-child {
		border-bottom: 0;
	}
	&__dot {
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-top: 6px;
		border-radius: 50%;
		background: var(--brand);
	}
	&.is-warning &__dot {
		background: var(--warn);
	}
	&.is-error &__dot {
		background: var(--live);
	}
	&.is-success &__dot {
		background: var(--ok);
	}
	&__body {
		min-width: 0;
		strong {
			display: block;
			font-weight: 600;
		}
		p {
			color: var(--ink-2);
			margin-top: 2px;
			font-size: 12.5px;
		}
	}
	&__actions {
		display: flex;
		gap: 12px;
		margin-top: 6px;
		.components-button.is-link {
			font-size: 12px;
			text-decoration: none;
		}
	}
}

/* Portalled surfaces (modals, popovers) render on <body>, outside .ss-admin — restate tokens. */
body.streamsera-admin-page .components-modal__frame,
body.streamsera-admin-page .components-popover__content,
body.streamsera-admin-page .components-dropdown__content,
body.streamsera-admin-page .components-dropdown-menu__menu {
	@include ss-light-tokens;
	color: var(--ink);
	font-size: 13.5px;
	line-height: 1.5;
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
}

/* Command palette */
.ss-palette__overlay {
	background: rgba(22, 24, 31, 0.45);
	backdrop-filter: blur(2px);
}
.ss-admin ~ .components-modal__screen-overlay .ss-palette,
.ss-palette.components-modal__frame {
	width: 620px;
	max-width: calc(100vw - 32px);
	margin-top: 10vh;
	align-self: flex-start;
	border-radius: var(--r-lg, 16px);
	overflow: hidden;
	.components-modal__content {
		padding: 0;
		margin: 0;
	}
	.components-modal__header {
		display: none;
	}
}
.ss-palette {
	--ink: #16181f;
	--ink-2: #4b4f5c;
	--ink-3: #7b8090;
	--line: #dfe2ea;
	--line-2: #eceef3;
	--surface: #fff;
	--surface-2: #f8f9fb;
	--brand: #5b4cf5;
	--brand-soft: #eeecfe;
	color: var(--ink);
	font-size: 13.5px;
	&__search {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 16px;
		border-bottom: 1px solid var(--line);
		.ss-i {
			color: var(--ink-3);
		}
		input {
			flex: 1;
			border: 0;
			outline: none;
			box-shadow: none;
			background: transparent;
			font-size: 16px;
			color: var(--ink);
			padding: 4px 0;
			&::placeholder {
				color: var(--ink-3);
			}
		}
		kbd {
			font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
			color: var(--ink-3);
			background: var(--surface-2);
			border: 1px solid var(--line);
			border-radius: 5px;
			padding: 3px 6px;
		}
	}
	&__list {
		list-style: none;
		margin: 0;
		padding: 8px;
		max-height: min(52vh, 460px);
		overflow: auto;
	}
	&__group {
		padding: 10px 10px 4px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--ink-3);
	}
	&__item {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 9px 10px;
		border: 0;
		border-radius: var(--r-sm, 8px);
		background: transparent;
		color: var(--ink);
		font: inherit;
		text-align: left;
		cursor: pointer;
		.ss-i {
			color: var(--ink-3);
			flex: 0 0 auto;
		}
		&.is-active {
			background: var(--brand-soft);
			color: var(--brand-ink, #4536d6);
			.ss-i {
				color: inherit;
			}
		}
	}
	&__label {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	&__hint {
		color: var(--ink-3);
		font-size: 12px;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		max-width: 45%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	&__empty {
		padding: 28px 16px;
		text-align: center;
		color: var(--ink-3);
	}
	&__foot {
		display: flex;
		gap: 18px;
		padding: 10px 16px;
		border-top: 1px solid var(--line);
		background: var(--surface-2);
		color: var(--ink-3);
		font-size: 12px;
		kbd {
			display: inline-block;
			min-width: 18px;
			margin-right: 4px;
			padding: 1px 5px;
			border: 1px solid var(--line);
			border-radius: 4px;
			background: var(--surface);
			font: 500 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
			text-align: center;
		}
	}
}

/* System status (settings section) */
.ss-status__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-bottom: 1px solid var(--line-2);
	font-weight: 600;
	&.is-ok .ss-i {
		color: var(--ok);
	}
	&.is-warn .ss-i {
		color: var(--warn);
	}
	.ss-status__version {
		margin-left: auto;
		font-weight: 500;
		color: var(--ink-3);
		font-size: 12px;
	}
}
.ss-status li {
	.ss-status__dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--ok);
		justify-self: center;
	}
	&.is-bad .ss-status__dot {
		background: var(--warn);
	}
}
.ss-status__report {
	width: 100%;
	font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface-2);
	color: var(--ink);
	padding: 12px;
	resize: vertical;
}
.ss-theme__btn {
	position: relative;
	.ss-theme__auto {
		position: absolute;
		right: 3px;
		bottom: 3px;
		font-size: 8px;
		font-weight: 700;
		line-height: 1;
		color: var(--ink-3);
	}
}

/* ==========================================================================
   dark mode (body[data-theme="dark"], set by features/theme.tsx)
   ========================================================================== */
@mixin ss-dark-tokens {
	--ink: #e8eaf0;
	--ink-2: #b4b9c7;
	--ink-3: #8a90a2;
	--line: #2c3040;
	--line-2: #262a37;
	--line-strong: #3a3f52;
	--canvas: #14161d;
	--surface: #1c1f28;
	--surface-2: #222634;
	--brand: #8b7dff;
	--brand-ink: #a89dff;
	--brand-soft: rgba(139, 125, 255, 0.16);
	--live: #ff6b70;
	--live-soft: rgba(255, 107, 112, 0.14);
	--ok: #3dcf7f;
	--ok-soft: rgba(61, 207, 127, 0.14);
	--warn: #f0a23c;
	--warn-soft: rgba(240, 162, 60, 0.14);
	--info: #6ea8ff;
	--info-soft: rgba(110, 168, 255, 0.14);
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
	color-scheme: dark;

	.components-text-control__input,
	.components-select-control__input,
	.components-textarea-control__input,
	.components-search-control__input,
	input[type='text'],
	input[type='url'],
	input[type='number'],
	input[type='search'],
	textarea,
	select {
		background: var(--surface-2);
		color: var(--ink);
		border-color: var(--line-strong);
	}
	.components-button.is-secondary,
	.components-button.is-tertiary {
		color: var(--brand-ink);
	}
	.components-button.is-secondary {
		box-shadow: inset 0 0 0 1px var(--brand-ink);
	}
	.components-toggle-control .components-form-toggle:not(.is-checked) .components-form-toggle__track {
		background: var(--line-strong);
	}
	.components-notice {
		background: var(--surface-2);
		color: var(--ink);
	}
	img.ss-logo,
	.ss-stations-table img {
		background: var(--surface-2);
	}
	::-webkit-scrollbar-thumb {
		background: var(--line-strong);
	}
}
body[data-theme='dark'] .ss-admin {
	@include ss-dark-tokens;
}
body[data-theme='dark'] .ss-palette,
body[data-theme='dark'] .ss-notices__pop .components-popover__content,
body[data-theme='dark'] .ss-modal .components-modal__content {
	@include ss-dark-tokens;
	background: var(--surface);
}
body[data-theme='dark'] .components-modal__frame {
	background: #1c1f28;
	color: #e8eaf0;
	.components-modal__header {
		background: #1c1f28;
		border-bottom-color: #2c3040;
		.components-modal__header-heading {
			color: #e8eaf0;
		}
	}
}

/* ==========================================================================
   responsive fixes
   ========================================================================== */
@media (max-width: 1100px) {
	.ss-ph__utility .ss-palette__kbd {
		display: none;
	}
}
@media (max-width: 960px) {
	.ss-ph {
		top: 46px; /* WP admin bar grows on small screens */
	}
	.ss-ph__inner {
		min-height: 56px;
	}
	.ss-settings__nav {
		gap: 4px;
		button,
		a {
			flex: 1 1 auto;
			justify-content: center;
		}
	}
	.ss-status li {
		grid-template-columns: 24px 1fr;
		.ss-status__detail {
			grid-column: 2;
		}
	}
	.ss-toolbar {
		flex-wrap: wrap;
	}
}
@media (max-width: 782px) {
	.streamsera-wrap.wrap {
		margin-left: -10px;
	}
	.ss-admin {
		font-size: 14px;
	}
	.ss-ph {
		top: 46px;
		&__inner {
			align-items: flex-start;
			flex-direction: column;
			gap: 10px;
		}
		&__end {
			width: 100%;
			justify-content: space-between;
		}
		&__actions {
			flex-wrap: wrap;
		}
	}
	.ss-stats {
		grid-template-columns: 1fr;
	}
	.ss-table,
	table.ss-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ss-modal.components-modal__frame {
		width: calc(100vw - 16px);
		max-width: none;
	}
	.ss-palette__foot {
		display: none;
	}
	.ss-builder__body {
		grid-template-columns: 1fr;
	}
	.ss-builder__rail {
		display: flex;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--line);
		button {
			flex: 0 0 auto;
			padding: 10px 12px;
			span {
				display: inline;
			}
		}
	}
}
@media (max-width: 600px) {
	.ss-ph {
		top: 0;
	}
	.ss-cols--form,
	.ss-form-grid {
		grid-template-columns: 1fr;
	}
	.ss-notices {
		width: calc(100vw - 32px);
	}
}

/* ======================================================================
 * builder & appearance — templates, presets, visibility, setup wizard.
 * ====================================================================== */
.ss-admin {
	.components-modal__frame.ss-modal--wide {
		max-width: 920px;
		width: calc(100% - 48px);
	}
	.ss-b-group__actions {
		display: flex;
		gap: 8px;
		align-items: center;
		flex-wrap: wrap;
	}
	.ss-small {
		font-size: 12px;
	}
	.ss-dot {
		display: inline-block;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--brand);
		margin-left: 6px;
		vertical-align: middle;
	}
	.ss-loading-inline {
		display: inline-flex;
		align-items: center;
	}

	/* Layout thumbs rendered as SVG */
	.ss-layout-opt__thumb--svg {
		display: grid;
		place-items: center;
		--brand: #5b4cf5;
		svg {
			width: 100%;
			height: 100%;
			display: block;
		}
	}
	.ss-layout-opt .ss-pill {
		margin-left: 6px;
		vertical-align: 1px;
	}

	/* Skin preview chip */
	.ss-skinprev {
		position: relative;
		display: inline-grid;
		grid-template-columns: 18px 1fr;
		grid-template-rows: 6px 4px;
		gap: 3px 5px;
		align-items: center;
		width: 54px;
		height: 30px;
		padding: 6px;
		flex: 0 0 auto;
		i {
			grid-row: 1 / span 2;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			display: block;
		}
		b {
			display: block;
			height: 4px;
			border-radius: 2px;
		}
		small {
			display: block;
			height: 3px;
			width: 60%;
			border-radius: 2px;
		}
	}
	.ss-skin-opt {
		padding: 5px 12px 5px 5px;
	}

	/* Match my theme */
	.ss-thememmatch {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
		&__msg {
			flex: 1 1 100%;
			font-size: 12px;
			line-height: 1.4;
			color: var(--ink-2);
			&.is-ok {
				color: var(--ok);
			}
			&.is-warn {
				color: var(--warn);
			}
			&.is-error {
				color: var(--live);
			}
		}
		&__swatches {
			display: inline-flex;
			gap: 4px;
			button {
				width: 18px;
				height: 18px;
				border-radius: 50%;
				border: 1px solid var(--line-strong);
				cursor: pointer;
				padding: 0;
				&:hover {
					transform: scale(1.12);
				}
			}
		}
	}

	/* Presets */
	.ss-presets-save {
		display: flex;
		gap: 8px;
		align-items: flex-end;
		margin-bottom: 12px;
		.components-base-control {
			flex: 1 1 auto;
		}
	}
	.ss-preset-list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 8px;
		li {
			display: flex;
			align-items: center;
			gap: 4px;
			border: 1px solid var(--line);
			border-radius: var(--r-md);
			padding: 6px 6px 6px 8px;
			background: var(--surface);
		}
		&__apply {
			flex: 1 1 auto;
			display: flex;
			align-items: center;
			gap: 10px;
			background: none;
			border: 0;
			padding: 4px;
			text-align: left;
			cursor: pointer;
			font: inherit;
			color: inherit;
			border-radius: var(--r-sm);
			min-width: 0;
			&:hover {
				background: var(--surface-2);
			}
			strong,
			small {
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			small {
				font-size: 11.5px;
			}
		}
		&__chip {
			width: 22px;
			height: 22px;
			border-radius: 50%;
			flex: 0 0 auto;
			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
		}
	}

	/* Visibility */
	.ss-vis-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 10px 20px;
		padding: 12px 14px;
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--surface);
	}

	.ss-checklist__actions {
		display: flex;
		gap: 6px;
		align-items: center;
	}

	/* Setup wizard */
	.ss-setup {
		min-height: calc(100vh - 32px);
		background: radial-gradient(1200px 500px at 50% -10%, var(--brand-soft), transparent 60%), var(--canvas);
		display: flex;
		justify-content: center;
		padding: 40px 24px;
		&__card {
			width: 100%;
			max-width: 1040px;
			background: var(--surface);
			border: 1px solid var(--line);
			border-radius: var(--r-lg);
			box-shadow: var(--shadow-md);
			display: flex;
			flex-direction: column;
			min-height: 560px;
		}
		&__head {
			display: flex;
			align-items: center;
			gap: 20px;
			padding: 18px 24px;
			border-bottom: 1px solid var(--line);
			flex-wrap: wrap;
		}
		&__brand {
			display: flex;
			align-items: center;
			gap: 8px;
			color: var(--brand);
			strong {
				color: var(--ink);
				font-size: 15px;
			}
		}
		&__steps {
			list-style: none;
			margin: 0 auto;
			padding: 0;
			display: flex;
			gap: 18px;
			li {
				display: flex;
				align-items: center;
				gap: 8px;
				color: var(--ink-3);
				font-weight: 550;
				font-size: 13px;
				&.is-current {
					color: var(--ink);
					.ss-setup__num {
						background: var(--brand);
						color: #fff;
						border-color: var(--brand);
					}
				}
				&.is-done .ss-setup__num {
					background: var(--ok-soft);
					color: var(--ok);
					border-color: transparent;
				}
			}
		}
		&__num {
			width: 22px;
			height: 22px;
			border-radius: 50%;
			border: 1px solid var(--line-strong);
			display: grid;
			place-items: center;
			font-size: 11px;
		}
		&__body {
			padding: 28px 32px;
			flex: 1 1 auto;
			h2 {
				margin: 0 0 6px;
				font-size: 22px;
				letter-spacing: -0.01em;
			}
			> p.ss-muted {
				margin-top: 0;
				max-width: 640px;
			}
			&--split {
				display: grid;
				grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
				gap: 32px;
			}
		}
		&__url {
			display: flex;
			gap: 8px;
			align-items: flex-end;
			margin: 16px 0 14px;
			.components-base-control {
				flex: 1 1 auto;
			}
		}
		&__detect {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 6px 12px;
			border-radius: 999px;
			background: var(--ok-soft);
			color: var(--ok);
			font-size: 12.5px;
			margin-bottom: 16px;
			&.is-unknown {
				background: var(--surface-2);
				color: var(--ink-2);
				border: 1px solid var(--line);
			}
		}
		&__colors {
			display: flex;
			gap: 16px;
			margin: 18px 0;
			flex-wrap: wrap;
		}
		&__color {
			display: flex;
			align-items: center;
			gap: 10px;
			font-weight: 550;
			input[type='color'] {
				width: 36px;
				height: 36px;
				border-radius: 10px;
				border: 1px solid var(--line);
				padding: 2px;
				background: var(--surface);
			}
			code {
				font-size: 12px;
				color: var(--ink-3);
				background: none;
			}
		}
		&__skins {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 18px;
		}
		.ss-skinbtn {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 4px 12px 4px 4px;
			border: 1px solid var(--line);
			border-radius: 999px;
			background: var(--surface);
			cursor: pointer;
			font: inherit;
			font-weight: 550;
			color: var(--ink-2);
			&.is-active {
				border-color: var(--brand);
				box-shadow: 0 0 0 3px var(--brand-soft);
				color: var(--ink);
			}
		}
		&__logo {
			display: flex;
			align-items: center;
			gap: 12px;
			img {
				width: 56px;
				height: 56px;
				border-radius: 12px;
				object-fit: cover;
				border: 1px solid var(--line);
			}
			&-empty {
				width: 56px;
				height: 56px;
				border-radius: 12px;
				border: 1px dashed var(--line-strong);
				display: grid;
				place-items: center;
				color: var(--ink-3);
			}
		}
		&__preview {
			align-self: start;
			position: sticky;
			top: 24px;
			border-radius: var(--r-md);
			background: var(--canvas);
			border: 1px solid var(--line);
			padding: 20px;
		}
		&__embed {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			gap: 20px;
			margin: 20px 0 28px;
			h4 {
				margin: 0 0 8px;
			}
			p {
				margin: 0;
				color: var(--ink-2);
			}
		}
		&__actions {
			display: flex;
			gap: 10px;
		}
		&__foot {
			display: flex;
			justify-content: space-between;
			padding: 16px 24px;
			border-top: 1px solid var(--line);
			background: var(--surface-2);
			border-radius: 0 0 var(--r-lg) var(--r-lg);
		}
		@media (max-width: 900px) {
			&__body--split {
				grid-template-columns: 1fr;
			}
			&__steps li span:last-child {
				display: none;
			}
		}
	}
}

/* ==========================================================================
   UI-B — full-width pages, stat cards, header tabs, settings sidebar
   ========================================================================== */
/* Stat rows adapt to how many tiles they hold; 4 stays the default. */
.ss-stats {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	&--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	&--compact {
		gap: 10px;
		margin-bottom: 20px;
		.ss-stat {
			padding: 12px 14px;
		}
		.ss-stat__icon {
			width: 36px;
			height: 36px;
			border-radius: 10px;
		}
		.ss-stat__value {
			font-size: 20px;
		}
	}
}
/* Pages that still carry their own centred wrappers stretch too. */
.ss-page .ss-cols,
.ss-page .ss-toolbar,
.ss-page .ss-table-wrap {
	max-width: none;
}
@media (max-width: 1100px) {
	.ss-cols--dash {
		grid-template-columns: minmax(0, 1fr);
	}
	.ss-ph__tabs {
		margin-left: 0;
	}
}
@media (max-width: 782px) {
	.ss-ph__tabs {
		width: 100%;
		margin: 0;
		.ss-seg {
			width: 100%;
			a,
			button {
				flex: 1 1 auto;
				justify-content: center;
			}
		}
	}
}

/* ==========================================================================
   UI-C — builder: station explorer, grouped rail, tab polish
   ========================================================================== */
.ss-builder__rail {
	padding: 10px 8px 24px;
	gap: 6px;
	overflow-y: auto;
}
.ss-rail-group {
	.ss-builder__rail &__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 8px 10px 4px;
		border: 0;
		background: transparent;
		color: var(--ink-3);
		font: inherit;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		cursor: pointer;
		border-radius: var(--r-sm);
		.ss-i {
			transition: transform 0.15s ease;
			transform: rotate(90deg);
		}
		&:hover {
			color: var(--ink-2);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: -2px;
		}
	}
	.ss-builder__rail &.is-closed &__head .ss-i {
		transform: rotate(0deg);
	}
	&__items {
		display: flex;
		flex-direction: column;
		gap: 2px;
		button {
			position: relative;
			padding: 8px 10px;
			font-size: 13px;
		}
	}
	+ .ss-rail-group {
		border-top: 1px solid var(--line-2);
		padding-top: 4px;
	}
}
.ss-builder__body {
	grid-template-columns: 200px minmax(0, 1fr) 480px;
}

/* Station explorer */
.ss-explorer {
	display: flex;
	flex-direction: column;
	gap: 18px;
	&__count {
		display: inline-flex;
		align-items: center;
		min-width: 20px;
		height: 20px;
		padding: 0 7px;
		margin-left: 4px;
		border-radius: 999px;
		background: var(--line-2);
		color: var(--ink-2);
		font-size: 11.5px;
		font-weight: 650;
		vertical-align: 2px;
		justify-content: center;
	}
	&__tools {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 12px;
		.components-search-control {
			flex: 1 1 auto;
		}
		.ss-seg--sm button {
			padding: 6px 10px;
			font-size: 12px;
		}
	}
	&__list,
	&__chosen {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}
	&__list {
		max-height: 380px;
		overflow-y: auto;
		padding: 2px;
		margin: -2px;
	}
	&__row {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 9px 12px 9px 10px;
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--surface);
		color: var(--ink);
		font: inherit;
		text-align: left;
		cursor: pointer;
		transition: border-color 0.12s ease, background 0.12s ease;
		&:hover {
			border-color: var(--ink-3);
			background: var(--surface-2);
		}
		&.is-on {
			border-color: var(--brand);
			background: var(--brand-soft);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: 1px;
		}
	}
	&__check {
		width: 18px;
		height: 18px;
		flex: 0 0 auto;
		border-radius: 6px;
		border: 1.5px solid var(--line);
		background: var(--surface);
		display: grid;
		place-items: center;
		color: #fff;
		&.is-on {
			background: var(--brand);
			border-color: var(--brand);
		}
	}
	&__thumb {
		flex: 0 0 auto;
		border-radius: 10px;
		background: var(--surface-2);
		border: 1px solid var(--line);
		overflow: hidden;
		display: grid;
		place-items: center;
		font-weight: 700;
		font-size: 14px;
		color: var(--ink-3);
		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	&__text {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 1px;
		strong {
			font-weight: 600;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			.ss-pill {
				margin-left: 8px;
			}
		}
		small {
			font-size: 12px;
			color: var(--ink-3);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	&__meta {
		flex: 0 0 auto;
		font-size: 11.5px;
		font-weight: 600;
		color: var(--ink-3);
		font-variant-numeric: tabular-nums;
	}
	&__state {
		flex: 0 0 auto;
		min-width: 70px;
		display: flex;
		justify-content: flex-end;
	}
	&__warn {
		color: var(--warn);
	}
	&__none {
		padding: 14px;
		text-align: center;
		color: var(--ink-3);
		font-size: 13px;
		&--selected {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			border: 1px dashed var(--line);
			border-radius: var(--r-md);
		}
	}
	&__empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6px;
		padding: 32px 20px;
		text-align: center;
		border: 1px dashed var(--line);
		border-radius: var(--r-md);
		color: var(--ink-2);
		.ss-i {
			color: var(--ink-3);
		}
		p {
			max-width: 44ch;
			color: var(--ink-3);
			font-size: 12.5px;
			margin: 0 0 8px;
		}
	}

	/* selected list */
	&__item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 8px 10px 8px 6px;
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--surface);
		transition: border-color 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
		&.is-primary {
			border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
			background: color-mix(in srgb, var(--brand-soft) 35%, var(--surface));
		}
		&.is-dragging {
			opacity: 0.45;
		}
		&.is-over {
			box-shadow: 0 -2px 0 0 var(--brand);
		}
		.ss-explorer__text strong {
			display: flex;
			align-items: center;
			gap: 4px;
		}
	}
	&__handle {
		width: 24px;
		height: 32px;
		flex: 0 0 auto;
		border: 0;
		background: transparent;
		color: var(--ink-3);
		cursor: grab;
		border-radius: var(--r-sm);
		display: grid;
		place-items: center;
		&:disabled {
			opacity: 0.35;
			cursor: default;
		}
		&:hover:not(:disabled) {
			background: var(--line-2);
			color: var(--ink);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: -2px;
		}
		&:active:not(:disabled) {
			cursor: grabbing;
		}
	}
	&__index {
		width: 18px;
		font-size: 11.5px;
		font-weight: 700;
		color: var(--ink-3);
		text-align: center;
		font-variant-numeric: tabular-nums;
		flex: 0 0 auto;
	}
	&__actions {
		display: flex;
		align-items: center;
		gap: 2px;
		flex: 0 0 auto;
		opacity: 0.7;
		transition: opacity 0.12s ease;
		.ss-explorer__item:hover &,
		.ss-explorer__item:focus-within & {
			opacity: 1;
		}
	}
	&__notice {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 12px;
		padding: 10px 12px;
		border-radius: var(--r-md);
		font-size: 12.5px;
		border: 1px solid var(--line);
		background: var(--surface-2);
		.ss-i {
			flex: 0 0 auto;
		}
		span {
			flex: 1 1 auto;
		}
		&.is-warn {
			border-color: var(--warn-soft);
			background: var(--warn-soft);
			color: var(--warn);
		}
	}
	&__switcher {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid var(--line-2);
		max-width: 460px;
	}
}

/* Layout tab: description under thumb */
.ss-layout-opt__text small {
	display: block;
	margin-top: 2px;
	color: var(--ink-3);
	font-size: 11.5px;
	line-height: 1.35;
}

/* Style tab: skin cards in a grid with preview swatch */
.ss-skins {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 10px;
}
.ss-skin-opt {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 8px;
	border-radius: var(--r-md);
	> span:last-child {
		font-size: 12.5px;
		font-weight: 600;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ss-skinprev {
		width: 100%;
		height: 56px;
	}
}
.ss-colors {
	gap: 10px 14px;
}
.ss-b-two .components-range-control {
	.components-input-control__input {
		font-variant-numeric: tabular-nums;
	}
}

/* Components / Behavior tabs */
.ss-comp--static {
	cursor: default;
	.ss-pill,
	code {
		flex: 0 0 auto;
	}
	code {
		background: var(--surface-2);
		border: 1px solid var(--line);
		border-radius: 6px;
		padding: 2px 8px;
		font-size: 12px;
		font-weight: 600;
		color: var(--ink-2);
	}
}

/* Dark mode */
body[data-theme="dark"] {
	.ss-explorer__item.is-primary {
		background: rgba(109, 93, 252, 0.08);
		border-color: rgba(109, 93, 252, 0.35);
	}
}

@media (max-width: 1100px) {
	.ss-builder__body {
		grid-template-columns: 56px minmax(0, 1fr) 380px;
	}
	.ss-rail-group__head span,
	.ss-rail-group__head .ss-i {
		display: none;
	}
	.ss-rail-group__head {
		height: 6px;
		padding: 0;
		pointer-events: none;
	}
	.ss-rail-group__items button {
		justify-content: center;
		padding: 10px 0;
	}
}

/* ==========================================================================
   UI-A — DataTable (shared listing table), avatars/thumbs
   ========================================================================== */
.ss-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-sm);
	overflow: hidden;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
	&--round {
		border-radius: 50%;
	}
	&--initial {
		font-weight: 700;
		font-size: 0.42em;
		color: hsl(var(--ss-thumb-h, 250) 45% 38%);
		background: hsl(var(--ss-thumb-h, 250) 70% 93%);
		border-color: transparent;
	}
}
body[data-theme="dark"] .ss-avatar--initial {
	color: hsl(var(--ss-thumb-h, 250) 70% 78%);
	background: hsl(var(--ss-thumb-h, 250) 35% 24%);
}

.ss-dt {
	--dt-row: 48px;
	display: flex;
	flex-direction: column;
	min-width: 0;

	&__toolbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
		padding: 12px 16px;
		border-bottom: 1px solid var(--line-2);
	}
	&__toolbar-start,
	&__toolbar-end {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
	}
	&__count {
		font-size: 13px;
		font-weight: 600;
		color: var(--ink-2);
		white-space: nowrap;
	}
	&__search.components-search-control {
		width: 260px;
		max-width: 100%;
	}
	&__filter {
		min-width: 140px;
		.components-select-control__input {
			min-height: 36px !important;
			border-radius: var(--r-sm) !important;
		}
	}

	&__bulk {
		display: flex;
		align-items: center;
		gap: 12px;
		flex-wrap: wrap;
		padding: 8px 16px;
		background: var(--brand-soft);
		border-bottom: 1px solid var(--line-2);
		.components-checkbox-control__label {
			font-weight: 600;
			color: var(--brand-ink);
		}
	}
	&__bulk-actions {
		display: inline-flex;
		gap: 6px;
		flex-wrap: wrap;
		.components-button {
			border-radius: var(--r-sm);
			background: var(--surface);
		}
	}
	&__bulk-clear {
		margin-left: auto;
	}

	&__loading {
		height: 2px;
		overflow: hidden;
		background: var(--line-2);
	}
	&__bar {
		display: block;
		height: 100%;
		width: 40%;
		background: var(--brand);
		animation: ss-dt-bar 1.1s ease-in-out infinite;
	}

	&__scroll {
		overflow-x: auto;
		max-height: min(72vh, 900px);
		overflow-y: auto;
	}
	&__table {
		thead th {
			position: sticky;
			top: 0;
			z-index: 2;
			background: var(--surface);
			box-shadow: inset 0 -1px 0 var(--line-2);
			padding-top: 10px;
			padding-bottom: 10px;
			white-space: nowrap;
		}
		tbody td {
			height: var(--dt-row);
			padding-top: 8px;
			padding-bottom: 8px;
		}
		tbody tr.is-selected td {
			background: var(--brand-soft);
		}
		tbody tr.is-clickable {
			cursor: pointer;
		}
		tfoot td {
			background: var(--surface-2);
			font-size: 12px;
			color: var(--ink-3);
		}
		.ss-cell-title {
			gap: 12px;
		}
		.ss-cell-title > div {
			min-width: 0;
		}
		.ss-cell-title strong {
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 360px;
		}
		.ss-cell-title .ss-muted {
			font-size: 12px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			max-width: 360px;
		}
	}
	&__check-col {
		width: 40px;
		padding-right: 0 !important;
		.components-checkbox-control__input-container {
			margin: 0;
		}
		.components-base-control__field {
			margin: 0;
		}
	}
	&__sort {
		all: unset;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 2px;
		color: inherit;
		font: inherit;
		&:hover {
			color: var(--ink);
		}
	}
	&__sort-icon {
		display: inline-flex;
		opacity: 0;
		transition: opacity 0.12s, transform 0.12s;
		svg {
			fill: currentColor;
		}
	}
	th.is-sortable:hover .ss-dt__sort-icon,
	th.is-sorted .ss-dt__sort-icon {
		opacity: 1;
	}
	th.is-sorted.is-desc .ss-dt__sort-icon {
		transform: rotate(180deg);
	}

	&__empty {
		padding: 32px 16px;
		.ss-empty--compact {
			display: grid;
			place-items: center;
			text-align: center;
			gap: 4px;
			color: var(--ink-3);
			h3 {
				margin: 6px 0 0;
				font-size: 14px;
				color: var(--ink);
			}
			p {
				margin: 0;
				font-size: 13px;
			}
			svg {
				fill: currentColor;
				opacity: 0.6;
			}
		}
	}

	&__pager {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
		padding: 10px 16px;
		border-top: 1px solid var(--line-2);
		font-size: 12.5px;
		color: var(--ink-3);
	}
	&__pager-size label {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		select {
			min-height: 30px;
			border-radius: var(--r-sm);
			border: 1px solid var(--line);
			background: var(--surface);
			color: var(--ink);
			font-size: 12.5px;
			padding: 0 24px 0 8px;
		}
	}
	&__pager-nav {
		display: inline-flex;
		align-items: center;
		gap: 4px;
	}
	&__pager-page {
		min-width: 90px;
		text-align: center;
		color: var(--ink-2);
	}

	/* Grid view (cards) */
	&__grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 16px;
		padding: 16px;
	}
	&__card {
		position: relative;
		min-width: 0;
		&.is-selected > * {
			outline: 2px solid var(--brand);
			outline-offset: 2px;
			border-radius: var(--r-md);
		}
	}
	&__card-check {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 2;
		.components-base-control__field {
			margin: 0;
		}
		input[type='checkbox'].ss-dt__checkbox {
			width: 20px;
			height: 20px;
			min-width: 20px;
			border-radius: 6px;
			&:checked::after {
				width: 5px;
				height: 10px;
			}
			&:indeterminate::after {
				width: 10px;
			}
		}
	}
	&--grid .ss-dt__pager {
		border-top: 1px solid var(--line-2);
	}

	/* Status chip inside tables */
	.ss-pill {
		font-size: 11px;
	}
}
@keyframes ss-dt-bar {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(260%);
	}
}
@media (max-width: 782px) {
	.ss-dt__hide-mobile {
		display: none;
	}
	.ss-dt__search.components-search-control {
		width: 100%;
	}
	.ss-dt__toolbar-end {
		width: 100%;
	}
}
body[data-theme="dark"] .ss-dt {
	&__table thead th {
		background: var(--surface);
	}
	&__bulk-actions .components-button {
		background: var(--surface-2);
	}
}
.ss-admin input[type='checkbox'].ss-dt__checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	min-width: 16px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--line-strong);
	border-radius: 5px;
	background: var(--surface);
	box-shadow: none;
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	vertical-align: middle;
	transition: background 0.12s, border-color 0.12s;
	&::before {
		content: none;
	}
	&:hover {
		border-color: var(--brand);
	}
	&:focus-visible {
		outline: 2px solid var(--brand);
		outline-offset: 1px;
	}
	&:checked,
	&:indeterminate {
		background: var(--brand);
		border-color: var(--brand);
	}
	&:checked::after {
		content: '';
		width: 4px;
		height: 8px;
		border: solid #fff;
		border-width: 0 2px 2px 0;
		transform: translateY(-1px) rotate(45deg);
	}
	&:indeterminate::after {
		content: '';
		width: 8px;
		height: 2px;
		background: #fff;
		border-radius: 1px;
	}
}
.ss-dt__bulk-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--brand-ink);
	font-size: 13px;
	cursor: pointer;
}

/* ==========================================================================
   Polish — copy chip, player cell, full-width settings, dark-mode audit
   ========================================================================== */
.ss-cell-title--player {
	align-items: center;
	.ss-thumb {
		flex: 0 0 auto;
	}
}
.ss-cell-title__stack {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	justify-content: center;
	.ss-cell-title__link {
		text-decoration: none;
		strong {
			display: block;
			line-height: 1.3;
		}
	}
}
.ss-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 2px 8px 2px 8px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--ink-2);
	font: inherit;
	font-size: 11.5px;
	line-height: 18px;
	cursor: pointer;
	transition: border-color 0.12s, background 0.12s, color 0.12s;
	code {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0;
		margin: 0;
		font-size: 11.5px;
		color: inherit;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ss-i {
		flex: 0 0 auto;
		width: 14px;
		height: 14px;
		fill: currentColor;
		color: var(--ink-3);
	}
	&__done {
		font-size: 11px;
		font-weight: 600;
		color: var(--ok);
		&:empty {
			display: none;
		}
	}
	&:hover {
		border-color: var(--brand);
		background: var(--brand-soft);
		color: var(--brand-ink);
		.ss-i {
			color: var(--brand-ink);
		}
	}
	&:focus-visible {
		outline: 2px solid var(--brand);
		outline-offset: 1px;
	}
	&.is-copied {
		border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
		background: var(--ok-soft);
		color: var(--ok);
		.ss-i {
			color: var(--ok);
		}
	}
}

/* Row "more actions" menu (Players list): Edit stays inline, everything else lives here. */
.ss-rowmenu__pop.components-popover .components-popover__content,
.ss-rowmenu__pop .components-dropdown-menu__menu {
	min-width: 196px;
	padding: 6px;
	border-radius: 10px;
	.components-menu-group {
		padding: 0;
		border: 0;
		+ .components-menu-group {
			margin-top: 4px;
			padding-top: 4px;
			border-top: 1px solid var(--line);
		}
	}
	.components-menu-item__button.components-button {
		width: 100%;
		min-height: 34px;
		padding: 0 10px;
		border-radius: 7px;
		gap: 10px;
		font-size: 13px;
		font-weight: 500;
		color: var(--ink);
		.ss-i {
			flex: 0 0 auto;
			fill: currentColor;
			color: var(--ink-3);
		}
		&:hover:not(:disabled),
		&:focus-visible {
			background: var(--surface-2);
			color: var(--ink);
			box-shadow: none;
			.ss-i {
				color: var(--ink);
			}
		}
		&.is-destructive {
			color: var(--live);
			.ss-i {
				color: var(--live);
			}
			&:hover:not(:disabled),
			&:focus-visible {
				background: var(--live-soft);
				color: var(--live);
			}
		}
	}
}
.ss-admin .ss-table__actions > .components-button,
.ss-admin .ss-table__actions > .components-dropdown {
	display: inline-flex;
	vertical-align: middle;
}
.ss-admin .ss-dt__table th.ss-table__actions-head,
.ss-admin .ss-dt__table td.ss-table__actions {
	width: 1%;
	text-align: right;
	white-space: nowrap;
	padding-left: 8px;
}

/* ---------- StationPicker: searchable station chooser (logo + name) ---------- */
.ss-stpick {
	display: inline-flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	vertical-align: middle;
	&--block {
		display: flex;
		width: 100%;
	}
	&__label {
		font-size: 12px;
		font-weight: 600;
		color: var(--ink-2);
		line-height: 1.3;
	}
	&__btn {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-width: 0;
		height: 40px;
		padding: 0 10px 0 10px;
		border: 1px solid var(--line-strong);
		border-radius: var(--r-sm);
		background: var(--surface);
		color: var(--ink);
		font: inherit;
		font-size: 13px;
		font-weight: 500;
		text-align: left;
		cursor: pointer;
		transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
		.ss-avatar {
			flex: 0 0 auto;
			border-radius: 6px;
		}
		> .ss-i:last-child {
			flex: 0 0 auto;
			margin-left: auto;
			color: var(--ink-3);
			fill: currentColor;
			transition: transform 0.15s;
		}
		&:hover:not(:disabled) {
			border-color: var(--brand);
			background: var(--surface);
		}
		&:focus-visible,
		&.is-open {
			outline: none;
			border-color: var(--brand);
			box-shadow: 0 0 0 3px var(--brand-soft);
		}
		&.is-open > .ss-i:last-child {
			transform: rotate(180deg);
		}
		&:disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}
	}
	&--sm &__btn {
		height: 32px;
		padding: 0 8px;
		font-size: 12.5px;
		gap: 8px;
		border-radius: 8px;
	}
	&__text {
		flex: 1 1 auto;
		min-width: 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		&--ph {
			color: var(--ink-3);
			font-weight: 400;
		}
	}
	&__all {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		border-radius: 6px;
		background: var(--brand-soft);
		color: var(--brand-ink);
		.ss-i {
			fill: currentColor;
		}
		&--empty {
			background: var(--surface-2);
			color: var(--ink-3);
		}
	}
	&--sm &__all {
		width: 20px;
		height: 20px;
		border-radius: 5px;
	}
}
body.streamsera-admin-page .ss-stpick__pop .components-popover__content {
	padding: 0;
	border-radius: 12px;
	border: 1px solid var(--line);
	box-shadow: 0 12px 32px -12px rgba(16, 18, 27, 0.25), 0 2px 8px rgba(16, 18, 27, 0.06);
	overflow: hidden;
}
.ss-stpick__panel {
	display: flex;
	flex-direction: column;
	max-width: min(420px, calc(100vw - 32px));
	background: var(--surface);
	color: var(--ink);
}
.ss-stpick__search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--line-2);
	.ss-i {
		flex: 0 0 auto;
		color: var(--ink-3);
		fill: currentColor;
	}
	input[type='search'] {
		flex: 1 1 auto;
		min-width: 0;
		height: 30px;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		color: var(--ink);
		font: inherit;
		font-size: 13px;
		&:focus {
			outline: none;
			box-shadow: none;
		}
		&::placeholder {
			color: var(--ink-3);
		}
		&::-webkit-search-cancel-button {
			-webkit-appearance: none;
		}
	}
}
.ss-stpick__list {
	list-style: none;
	margin: 0;
	padding: 6px;
	max-height: 288px;
	overflow-y: auto;
	overscroll-behavior: contain;
	&:focus {
		outline: none;
	}
}
.ss-stpick__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 6px 8px;
	border-radius: 8px;
	cursor: pointer;
	color: var(--ink);
	.ss-avatar {
		flex: 0 0 auto;
		border-radius: 7px;
	}
	> .ss-i {
		flex: 0 0 auto;
		margin-left: auto;
		color: var(--brand);
		fill: currentColor;
	}
	&.is-active {
		background: var(--surface-2);
	}
	&.is-selected .ss-stpick__opt-title {
		color: var(--brand-ink);
	}
}
.ss-stpick__opt-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	flex: 1 1 auto;
}
.ss-stpick__opt-title {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	small {
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		color: var(--warn, #b45309);
		background: var(--warn-soft, #fef3c7);
		padding: 1px 6px;
		border-radius: 999px;
	}
}
.ss-stpick__opt-sub {
	font-size: 11.5px;
	color: var(--ink-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ss-stpick__empty {
	padding: 14px 10px;
	text-align: center;
	color: var(--ink-3);
	font-size: 12.5px;
}
body[data-theme='dark'] {
	.ss-stpick__btn {
		background: var(--surface-2);
		border-color: var(--line-strong);
	}
	.ss-stpick__pop .components-popover__content {
		box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line);
	}
}

/* Icons: inherit text colour everywhere; action buttons brighten on hover. */
.ss-admin .ss-i {
	fill: currentColor;
}
.ss-admin .ss-table__actions,
.ss-admin .ss-dt__table td.ss-table__actions {
	.components-button {
		color: var(--ink-2);
		.ss-i {
			fill: currentColor;
			color: inherit;
		}
		&:hover,
		&:focus-visible {
			color: var(--ink);
			background: var(--line-2);
		}
		&.is-destructive:hover,
		&.is-destructive:focus-visible {
			color: var(--live);
			background: var(--live-soft);
		}
	}
}

/* Crash shell is readable in both themes even when nothing else rendered. */
.ss-crash {
	code {
		background: var(--surface-2);
		border: 1px solid var(--line);
		color: var(--ink);
	}
}

/* ---------- Dark mode ---------- */
/* WordPress paints #f0f0f1 on html, body and #wpwrap; on short pages that light grey showed
   as a strip under the content (html is 100% + the admin bar's padding). Cover every layer. */
html:has(> body.streamsera-admin-page[data-theme='dark']) {
	background: #14161d;
	color-scheme: dark;
}
body[data-theme='dark'] {
	&.streamsera-admin-page,
	&.streamsera-admin-page #wpwrap,
	&.streamsera-admin-page #wpcontent,
	&.streamsera-admin-page #wpbody,
	&.streamsera-admin-page #wpbody-content {
		background: #14161d;
	}

	.ss-admin {
		/* Native widgets, scrollbars, date pickers. */
		color-scheme: dark;

		::placeholder {
			color: var(--ink-3);
			opacity: 1;
		}

		/* --- @wordpress/components controls --- */
		.components-text-control__input,
		.components-select-control__input,
		.components-textarea-control__input,
		.components-search-control__input,
		.components-input-control__input,
		.components-number-control input,
		.components-combobox-control__input,
		input[type='text'],
		input[type='url'],
		input[type='number'],
		input[type='email'],
		input[type='search'],
		input[type='date'],
		input[type='time'],
		input[type='password'],
		textarea,
		select {
			background: var(--surface-2);
			color: var(--ink);
			border-color: var(--line-strong);
			box-shadow: none;
			&:focus {
				border-color: var(--brand);
				box-shadow: 0 0 0 1px var(--brand);
			}
			&:disabled {
				background: var(--line-2);
				color: var(--ink-3);
			}
		}
		.components-input-control__backdrop {
			border-color: var(--line-strong) !important;
		}
		.components-input-control__container:focus-within .components-input-control__backdrop {
			border-color: var(--brand) !important;
			box-shadow: 0 0 0 1px var(--brand) !important;
		}
		.components-select-control__input {
			background-image: none;
		}
		.components-input-control__suffix,
		.components-input-control__prefix,
		.components-select-control__arrow-wrapper {
			color: var(--ink-3);
		}
		.components-base-control__label,
		.components-input-control__label,
		.components-toggle-control__label,
		.components-checkbox-control__label,
		.components-radio-control__option label,
		.components-base-control__help {
			color: var(--ink-2);
		}
		.components-base-control__help {
			color: var(--ink-3);
		}
		.components-checkbox-control__input {
			background: var(--surface-2);
			border-color: var(--line-strong);
			&:checked {
				background: var(--brand);
				border-color: var(--brand);
			}
		}
		.components-checkbox-control__checked,
		.components-checkbox-control__indeterminate {
			fill: #fff;
		}
		.components-radio-control__input {
			background: var(--surface-2);
			border-color: var(--line-strong);
			&:checked {
				border-color: var(--brand);
				background: var(--brand);
			}
		}
		.components-form-toggle {
			.components-form-toggle__track {
				background: var(--line-strong);
				border-color: var(--line-strong);
			}
			&.is-checked .components-form-toggle__track {
				background: var(--brand);
				border-color: var(--brand);
			}
			.components-form-toggle__thumb {
				background: var(--ink);
				border-color: transparent;
			}
			&.is-checked .components-form-toggle__thumb {
				background: #fff;
			}
		}
		.components-range-control__track {
			background: var(--brand);
		}
		.components-range-control__wrapper {
			color: var(--line-strong);
		}
		.components-range-control__thumb-wrapper .components-range-control__thumb {
			background: var(--brand);
			box-shadow: 0 0 0 3px var(--surface);
		}
		.components-range-control__mark {
			background: var(--line-strong);
		}
		.components-button {
			&.is-secondary {
				color: var(--brand-ink);
				box-shadow: inset 0 0 0 1px var(--brand-ink);
				background: transparent;
				&:hover:not(:disabled) {
					background: var(--brand-soft);
				}
			}
			&.is-tertiary,
			&.is-link {
				color: var(--brand-ink);
				&:hover:not(:disabled) {
					background: var(--brand-soft);
					color: var(--brand-ink);
				}
			}
			&.has-icon:not(.is-primary):not(.is-secondary) {
				color: var(--ink-2);
				&:hover:not(:disabled) {
					color: var(--ink);
					background: var(--line-2);
				}
			}
			&:disabled,
			&[aria-disabled='true'] {
				color: var(--ink-3) !important;
				opacity: 0.7;
			}
			&.is-destructive:not(.is-primary) {
				color: var(--live);
				&:hover:not(:disabled) {
					background: var(--live-soft);
				}
			}
		}
		.components-notice {
			background: var(--surface-2);
			color: var(--ink);
			border-left-color: var(--info);
			&.is-warning {
				border-left-color: var(--warn);
				background: var(--warn-soft);
			}
			&.is-error {
				border-left-color: var(--live);
				background: var(--live-soft);
			}
			&.is-success {
				border-left-color: var(--ok);
				background: var(--ok-soft);
			}
			.components-notice__dismiss {
				color: var(--ink-3);
			}
		}
		.components-tab-panel__tabs {
			border-bottom-color: var(--line);
			.components-tab-panel__tabs-item {
				color: var(--ink-2);
				&.is-active {
					color: var(--ink);
					box-shadow: inset 0 -2px 0 var(--brand);
				}
			}
		}
		.components-placeholder {
			background: var(--surface-2);
			color: var(--ink-2);
		}
		.components-color-palette__custom-color-button,
		.components-circular-option-picker__option {
			box-shadow: inset 0 0 0 1px var(--line-strong);
		}
		.components-spinner {
			color: var(--brand-ink);
		}
		code,
		pre {
			background: var(--surface-2);
			color: var(--ink);
		}
		hr {
			border-color: var(--line);
		}

		/* --- Our primitives --- */
		.ss-ph {
			background: var(--surface);
			border-bottom-color: var(--line);
			box-shadow: none;
		}
		.ss-seg {
			background: var(--surface-2);
			border-color: var(--line);
			button,
			a {
				color: var(--ink-2);
				&.is-active,
				&[aria-pressed='true'],
				&[aria-current='page'] {
					background: var(--surface);
					color: var(--ink);
					box-shadow: var(--shadow-sm);
				}
			}
		}
		.ss-pill--neutral,
		.ss-pill--muted {
			background: var(--line-2);
			color: var(--ink-2);
		}
		.ss-stat,
		.ss-panel,
		.ss-card,
		.ss-section > .ss-panel {
			background: var(--surface);
			border-color: var(--line);
		}
		.ss-stat__icon {
			background: var(--stat-soft, var(--line-2));
		}
		.ss-dt {
			&__toolbar,
			&__pager {
				background: var(--surface);
				border-color: var(--line);
			}
			&__table thead th {
				background: var(--surface-2);
				color: var(--ink-3);
				border-bottom-color: var(--line);
			}
			&__table tbody tr {
				border-color: var(--line-2);
				&:hover > td {
					background: var(--surface-2);
				}
				&.is-selected > td {
					background: var(--brand-soft);
				}
			}
			&__bulk {
				background: var(--brand-soft);
				border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
				color: var(--ink);
			}
			&__bulk-actions .components-button {
				background: var(--surface);
				color: var(--ink);
			}
			&__pager .components-button,
			&__pager select {
				color: var(--ink-2);
			}
		}
		input[type='checkbox'].ss-dt__checkbox {
			background: var(--surface-2);
			border-color: var(--line-strong);
			&:checked,
			&:indeterminate {
				background: var(--brand);
				border-color: var(--brand);
			}
		}
		.ss-table {
			thead th {
				background: var(--surface-2);
				color: var(--ink-3);
			}
			tbody tr:hover > td {
				background: var(--surface-2);
			}
		}
		.ss-thumb {
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
		}
		.ss-chip {
			background: var(--surface-2);
			border-color: var(--line-strong);
		}
		.ss-copy {
			background: var(--surface-2);
			border-color: var(--line);
			code {
				background: transparent;
			}
		}
		.ss-settings__nav {
			background: var(--surface);
			border-color: var(--line);
			a.is-active .ss-settings__icon {
				background: rgba(255, 255, 255, 0.14);
			}
		}
		.ss-settings__icon {
			background: var(--surface-2);
		}

		/* Builder */
		.ss-builder__rail,
		.ss-preview,
		.ss-preview__bar {
			background: var(--surface);
			border-color: var(--line);
		}
		.ss-preview__stage:not(.is-dark) {
			--stage-bg: #202430;
			--stage-dot: rgba(255, 255, 255, 0.07);
		}
		.ss-preview__stage.is-dark {
			--stage-bg: #0f1117;
			--stage-dot: rgba(255, 255, 255, 0.08);
		}
		.ss-rail-group__head {
			color: var(--ink-3);
		}
		.ss-rail-group__items button {
			color: var(--ink-2);
			&:hover {
				background: var(--surface-2);
				color: var(--ink);
			}
			&.is-active {
				background: var(--brand-soft);
				color: var(--brand-ink);
			}
		}
		.ss-b-group,
.ss-explorer,
.ss-explorer__item,
.ss-explorer__selected li,
.ss-layout-opt,
.ss-skinchip,
.ss-comp,
.ss-color {
			background: var(--surface);
			border-color: var(--line);
		}
		.ss-explorer__item:hover,
		.ss-layout-opt:hover,
		.ss-skinchip:hover {
			border-color: var(--line-strong);
			background: var(--surface-2);
		}
		.ss-explorer__item.is-selected,
		.ss-layout-opt.is-active,
		.ss-skinchip.is-active,
		.ss-comp.is-on {
			border-color: var(--brand);
			background: var(--brand-soft);
		}
		.ss-color__swatch {
			border-color: var(--line-strong);
		}

		/* Schedule */

		/* Command palette, notices popover, modals, dropdowns */
		.ss-palette,
		.ss-notices__pop .components-popover__content {
			background: var(--surface);
			color: var(--ink);
			border-color: var(--line);
			input {
				background: var(--surface-2);
				color: var(--ink);
			}
			.is-selected,
			[aria-selected='true'] {
				background: var(--brand-soft);
			}
		}
		.ss-snackbars .components-snackbar {
			background: #e8eaf0;
			color: #16181f;
		}
		.ss-setup__card,
		.ss-setup__preview {
			background: var(--surface);
			border-color: var(--line);
		}
		.ss-empty,
		.ss-empty__icon {
			color: var(--ink-3);
		}
		.ss-empty__icon {
			background: var(--surface-2);
		}
		.ss-crash code {
			background: var(--surface-2);
			border-color: var(--line);
		}
	}

	/* Portalled surfaces live outside .ss-admin — restate the tokens. */
	.components-popover__content,
	.components-dropdown__content,
	.components-dropdown-menu__menu,
	.components-modal__frame,
	.components-modal__content {
		@include ss-dark-tokens;
		background: var(--surface);
		color: var(--ink);
		border-color: var(--line);
	}
	.components-modal__screen-overlay {
		background: rgba(0, 0, 0, 0.6);
	}
	.components-modal__header {
		background: var(--surface);
		border-bottom-color: var(--line);
		.components-modal__header-heading,
		.components-button {
			color: var(--ink);
		}
	}
	.components-popover__content {
		box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--line);
	}
	.components-dropdown-menu__menu .components-button,
	.components-menu-item__button {
		color: var(--ink);
		&:hover:not(:disabled),
		&:focus:not(:disabled) {
			background: var(--surface-2);
			color: var(--ink);
		}
	}
	.components-menu-group__label {
		color: var(--ink-3);
	}
	.components-tooltip,
	.components-tooltip .components-popover__content {
		background: #e8eaf0;
		color: #16181f;
	}
	.components-color-picker,
	.react-colorful {
		background: var(--surface);
	}
}

/* ==========================================================================
   Templates gallery (lives inside a portalled modal, so top-level selectors)
   ========================================================================== */
.ss-modal--wide.components-modal__frame {
	max-width: 920px;
	width: calc(100% - 48px);
}
.ss-tpls {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-top: 16px;
}
.ss-tpl {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface);
	cursor: pointer;
	font: inherit;
	color: var(--ink);
	text-align: left;
	overflow: hidden;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
	&:hover {
		border-color: var(--line-strong);
		box-shadow: var(--shadow-md);
		transform: translateY(-1px);
	}
	&.is-active {
		border-color: var(--brand);
		box-shadow: 0 0 0 3px var(--brand-soft);
	}
	&:focus-visible {
		outline: 2px solid var(--brand);
		outline-offset: 2px;
	}
	&__thumb {
		display: grid;
		place-items: center;
		aspect-ratio: 16 / 10;
		width: 100%;
		padding: 14px;
		background: var(--surface-2);
		border-bottom: 1px solid var(--line-2);
		svg {
			width: 100%;
			height: 100%;
			max-height: 120px;
		}
	}
	&__text {
		display: flex;
		flex-direction: column;
		gap: 3px;
		padding: 10px 12px 12px;
		min-width: 0;
		strong {
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 13.5px;
			font-weight: 650;
			line-height: 1.3;
		}
		small {
			display: block;
			color: var(--ink-3);
			font-size: 12px;
			line-height: 1.4;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.ss-pill {
			font-size: 10.5px;
			padding: 1px 7px;
		}
	}
	&__check {
		position: absolute;
		top: 8px;
		right: 8px;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: var(--brand);
		color: #fff;
		display: grid;
		place-items: center;
		box-shadow: var(--shadow-sm);
	}
}
.ss-modal .ss-muted {
	color: var(--ink-3);
	margin: 0;
}

/* ==========================================================================
   Station combobox (builder → Station tab)
   ========================================================================== */
.ss-admin .ss-explorer__tools {
	margin-bottom: 0;
	align-items: stretch;
	.components-button.is-secondary {
		height: 40px;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		white-space: nowrap;
	}
}
.ss-combo {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	&__field {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		padding: 0 10px 0 12px;
		border: 1px solid var(--line);
		border-radius: var(--r-sm);
		background: var(--surface);
		color: var(--ink-3);
		transition: border-color 0.15s, box-shadow 0.15s;
		&:focus-within {
			border-color: var(--brand);
			box-shadow: 0 0 0 3px var(--brand-soft);
		}
		input {
			flex: 1 1 auto;
			min-width: 0;
			height: 100%;
			border: 0;
			background: transparent;
			box-shadow: none;
			padding: 0;
			margin: 0;
			font: inherit;
			color: var(--ink);
			&:focus {
				outline: none;
				box-shadow: none;
			}
			&::placeholder {
				color: var(--ink-3);
			}
		}
	}
	&__clear {
		display: grid;
		place-items: center;
		width: 24px;
		height: 24px;
		border: 0;
		border-radius: 50%;
		background: var(--line-2);
		color: var(--ink-2);
		cursor: pointer;
		&:hover {
			background: var(--line);
			color: var(--ink);
		}
	}
	&__list {
		position: absolute;
		z-index: 30;
		top: calc(100% + 6px);
		left: 0;
		right: 0;
		max-height: 320px;
		overflow: auto;
		margin: 0;
		padding: 6px;
		list-style: none;
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--surface);
		box-shadow: var(--shadow-md);
	}
	&__opt {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 7px 8px;
		border-radius: var(--r-sm);
		cursor: pointer;
		.ss-explorer__text {
			flex: 1 1 auto;
			min-width: 0;
			strong {
				display: block;
				font-weight: 600;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			small {
				display: block;
				color: var(--ink-3);
				font-size: 12px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		&.is-hi {
			background: var(--surface-2);
		}
		&.is-on {
			cursor: default;
			opacity: 0.75;
		}
		.ss-explorer__thumb {
			border-radius: 8px;
		}
	}
	&__none {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 12px 10px;
		color: var(--ink-3);
		font-size: 13px;
		a {
			font-weight: 600;
			white-space: nowrap;
		}
	}
}
body[data-theme='dark'] .ss-combo {
	&__field,
	&__list {
		background: var(--surface);
		border-color: var(--line);
	}
	&__opt.is-hi {
		background: var(--surface-2);
	}
}

/* ==========================================================================
   SIMP-2 — builder sections consolidated: cards attached by add-ons and
   collapsible "advanced" cards inside a section.
   ========================================================================== */
.ss-admin {
	.ss-b-attach {
		> .ss-b-group + .ss-b-group {
			margin-top: 16px;
		}
	}
	.ss-b-collapse {
		&__toggle {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			border: 1px solid var(--line);
			background: var(--surface-2);
			color: var(--ink);
			border-radius: 999px;
			padding: 6px 12px;
			font-weight: 600;
			cursor: pointer;
			.ss-i {
				transition: transform 0.15s ease;
			}
			&[aria-expanded='true'] .ss-i--chev {
				transform: rotate(180deg);
			}
			&:hover {
				border-color: var(--ink-3);
			}
		}
		&__body {
			margin-top: 14px;
		}
	}
}

/* ==========================================================================
   SIMP-3 — Settings: seven sections, cards
   ========================================================================== */
.ss-admin {
	.ss-settings__heading {
		margin: 0 0 18px;
		h2 {
			margin: 0 0 4px;
			font-size: 18px;
			font-weight: 650;
			letter-spacing: -0.01em;
		}
		p {
			margin: 0;
			color: var(--ink-3);
			font-size: 13px;
		}
	}
	.ss-settings__card + .ss-settings__card {
		margin-top: 28px;
	}
	.ss-settings__card .ss-section__head h2 {
		font-size: 15px;
	}
	.ss-inline-input {
		display: flex;
		align-items: center;
		gap: 10px;
		input {
			max-width: 320px;
		}
	}
	.ss-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
}

/* ==========================================================================
   Playlist editor polish + shared SsModal shell
   ========================================================================== */
.ss-admin,
body.streamsera-admin-page {
	.components-modal__frame.ss-modal {
		border-radius: 16px;
		box-shadow: 0 24px 64px rgba(16, 18, 27, 0.22);
		.components-modal__header {
			padding: 20px 24px 14px;
			min-height: 0;
			height: auto;
			border-bottom: 0;
			.components-modal__header-heading-container {
				align-items: center;
				gap: 12px;
			}
			.components-modal__icon-container {
				margin: 0;
			}
			h1 {
				font-size: 17px;
				font-weight: 650;
				letter-spacing: -0.01em;
			}
			.components-button.has-icon {
				border-radius: 999px;
			}
		}
		.components-modal__content {
			padding: 0 24px 24px;
		}
	}
	.components-modal__frame.ss-modal--sm {
		max-width: 480px;
	}
	.components-modal__frame.ss-modal--md {
		max-width: 640px;
	}
	.components-modal__frame.ss-modal--lg {
		max-width: 920px;
	}
	.ss-modal__icon {
		width: 28px;
		height: 28px;
		border-radius: 9px;
		background: var(--brand-soft);
		color: var(--brand-ink);
		display: inline-grid;
		place-items: center;
		flex: 0 0 auto;
		.ss-i {
			fill: currentColor;
		}
	}
	.ss-modal__desc {
		margin: -4px 0 12px;
		color: var(--ink-2);
		font-size: 13.5px;
		line-height: 1.5;
	}
	.ss-modal__text {
		margin: 0;
		color: var(--ink-2);
		line-height: 1.55;
	}
	.ss-modal__body {
		display: flex;
		flex-direction: column;
		gap: 12px;
		> .components-base-control {
			margin: 0;
		}
		.components-base-control__label,
		.components-input-control__label {
			font-weight: 600;
			font-size: 12.5px;
			color: var(--ink-2);
			margin-bottom: 6px;
			text-transform: none;
		}
		.components-text-control__input,
		.components-input-control__input,
		.components-select-control__input,
		.components-textarea-control__input,
		input[type='text'],
		input[type='url'],
		input[type='number'],
		textarea {
			border-radius: 10px !important;
			border: 1px solid var(--line) !important;
			background: var(--surface);
			box-shadow: none !important;
			min-height: 40px;
			padding: 8px 12px;
			font-size: 14px;
			&:focus {
				border-color: var(--brand) !important;
				box-shadow: 0 0 0 3px var(--brand-soft) !important;
				outline: none;
			}
		}
		.components-input-control__backdrop {
			display: none;
		}
		.components-notice {
			margin: 0;
			border-radius: 10px;
			border-left-width: 1px;
			border: 1px solid var(--line);
			background: var(--surface-2);
			.components-notice__content {
				margin: 0;
			}
			&.is-warning {
				background: var(--warn-soft);
				border-color: color-mix(in srgb, var(--warn) 40%, transparent);
			}
			&.is-success {
				background: var(--ok-soft);
				border-color: color-mix(in srgb, var(--ok) 40%, transparent);
			}
		}
	}
	.ss-modal__actions {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 8px;
		margin-top: 20px;
		padding-top: 16px;
		border-top: 1px solid var(--line);
		.ss-modal__actions-start {
			margin-right: auto;
		}
		.components-button {
			border-radius: 10px;
			min-height: 36px;
			padding: 0 14px;
		}
	}
}

/* ---------------- Playlist editor: sidebar tip CTA ---------------- */
.ss-admin .ss-tips__cta.components-button {
	margin-top: 14px;
	height: 34px;
	padding: 0 12px;
	border-radius: 10px;
}

/* ==========================================================================
   Playlist editor polish 2 — single-border buttons, inner editor spacing
   ========================================================================== */
.ss-admin {
	/* Secondary buttons: one grey border, no WP inset ring. */
	.components-button.is-secondary,
	.components-button.is-secondary:hover,
	.components-button.is-secondary:active,
	.components-button.is-secondary:focus {
		box-shadow: none;
		border: 1px solid var(--line);
		background: var(--surface);
		color: var(--ink);
		border-radius: 10px;
		min-height: 34px;
		padding: 0 12px;
	}
	.components-button.is-secondary:hover:not(:disabled) {
		background: var(--surface-2);
		border-color: var(--line-2);
	}
	.components-button.is-secondary:focus-visible {
		border-color: var(--brand);
		box-shadow: 0 0 0 3px var(--brand-soft);
	}
	.components-button.is-secondary.is-small {
		min-height: 30px;
		padding: 0 10px;
		border-radius: 8px;
	}
	.components-button.is-tertiary {
		border-radius: 8px;
		min-height: 34px;
	}
	.components-button.is-tertiary.is-small {
		min-height: 30px;
	}
}

/* ==========================================================================
   UI2-A — brief applied to Dashboard, Stations, Station editor, Players,
   Setup wizard, notices popover, command palette
   ========================================================================== */
.ss-admin {
	/* Generic 32px row-action icon buttons (lists, cards, stream rows, sidebar cards). */
	.components-button.ss-rowbtn {
		height: 32px;
		min-height: 32px;
		min-width: 32px;
		padding: 0;
		border-radius: 8px;
		justify-content: center;
		color: var(--ink-2);
		gap: 6px;
		.ss-i {
			fill: currentColor;
		}
		&--label {
			padding: 0 10px 0 8px;
			font-weight: 600;
			font-size: 12.5px;
		}
		&:hover:not(:disabled),
		&:focus-visible {
			background: var(--surface-2);
			color: var(--ink);
			box-shadow: none;
		}
		&.is-destructive:hover:not(:disabled) {
			background: var(--live-soft);
			color: var(--live);
		}
	}
	/* Tertiary buttons that carry an icon: tidy gap, 8px radius. */
	.components-button.is-tertiary.has-icon,
	.components-button.is-link.has-icon {
		gap: 6px;
		border-radius: 8px;
	}

	/* ---- Dashboard ---- */
	.ss-row__lead--thumb {
		position: relative;
		.ss-avatar {
			border: 1px solid var(--line);
			border-radius: 10px;
		}
		.ss-dot--badge {
			position: absolute;
			right: -3px;
			bottom: -3px;
			width: 11px;
			height: 11px;
			border: 2px solid var(--surface);
			border-radius: 50%;
		}
	}
	.ss-welcome__actions {
		gap: 10px;
		.components-button {
			min-height: 36px;
		}
	}
	.ss-checklist__actions {
		gap: 6px;
	}
	.ss-checklist__steps li .components-button.is-link {
		font-weight: 600;
		text-decoration: none;
		color: var(--brand-ink);
	}
	.ss-list--links a {
		display: flex;
		align-items: center;
		gap: 10px;
		.ss-i {
			color: var(--ink-3);
		}
		&:hover .ss-i {
			color: var(--brand-ink);
		}
	}
	.ss-panel__foot {
		padding: 10px 18px;
		border-top: 1px solid var(--line-2);
		font-size: 12.5px;
		font-weight: 600;
	}

	/* ---- Stations list / Players list ---- */
	.ss-cell-title {
		display: flex;
		align-items: center;
		gap: 12px;
		.ss-avatar {
			border: 1px solid var(--line);
			border-radius: 10px;
			flex: 0 0 auto;
		}
		strong {
			font-size: 13.5px;
		}
		.ss-muted {
			font-size: 12.5px;
		}
	}
	.ss-player-card {
		&__body {
			padding: 14px 16px 8px;
		}
		&__actions {
			gap: 4px;
			padding: 8px 10px 10px;
			border-top: 1px solid var(--line-2);
			.components-button:first-child {
				margin-right: 0;
			}
		}
	}

	/* ---- Station editor ---- */
	.ss-stream {
		border-radius: 12px;
		padding: 16px 16px 14px;
		&__head {
			margin-bottom: 10px;
			min-height: 32px;
		}
		&__index {
			display: inline-flex;
			align-items: center;
			height: 24px;
			padding: 0 10px;
			border-radius: 999px;
			background: var(--brand-soft);
			color: var(--brand-ink);
			font-size: 11.5px;
			font-weight: 700;
			letter-spacing: 0.02em;
		}
		&__url {
			align-items: flex-end;
			.components-button {
				min-height: 36px;
			}
		}
		&__grid {
			gap: 12px 16px;
		}
	}
	.ss-station__addstream.components-button {
		margin-top: 14px;
	}
	.ss-logo-field {
		gap: 18px;
		.components-button + .components-button {
			margin-left: 6px;
		}
	}
	.ss-logo-preview {
		border-style: solid;
		border-radius: 12px;
	}
	.ss-livecard {
		&__head {
			align-items: flex-start;
			gap: 10px;
			margin-bottom: 12px;
			h3 {
				margin-bottom: 2px;
			}
			p {
				margin: 0;
				font-size: 12.5px;
				line-height: 1.4;
			}
		}
		.ss-pill {
			margin-top: 2px;
		}
		.ss-dl {
			margin-top: 12px;
		}
	}
	.ss-tips {
		h3 {
			margin-bottom: 2px;
		}
		> p {
			margin: 0 0 10px;
			font-size: 12.5px;
		}
	}
	.ss-form-grid {
		gap: 0 16px;
	}
	.ss-page--form .ss-section + .ss-section {
		margin-top: 24px;
	}

	/* ---- Setup wizard ---- */
	.ss-setup {
		&__foot,
		&__actions {
			display: flex;
			gap: 10px;
			align-items: center;
			.components-button {
				min-height: 36px;
			}
		}
		&__foot {
			justify-content: space-between;
			padding-top: 16px;
			border-top: 1px solid var(--line-2);
		}
		&__url {
			align-items: flex-end;
			gap: 8px;
		}
		&__logo .components-button + .components-button {
			margin-left: 6px;
		}
	}
}

/* ---- Notices popover (portalled: no .ss-admin ancestor) ---- */
.ss-notices__pop .components-popover__content {
	border-radius: 12px;
	border: 1px solid var(--line, #dfe2ea);
	box-shadow: var(--shadow-md, 0 12px 32px rgba(16, 18, 27, 0.14));
}
.ss-notices {
	&__head {
		padding: 14px 16px;
		border-bottom: 1px solid var(--line-2, #eceef3);
		display: flex;
		align-items: center;
		justify-content: space-between;
		strong {
			font-size: 13.5px;
		}
		span {
			font-size: 12px;
			color: var(--ink-3, #7b8090);
		}
	}
	&__empty {
		display: grid;
		place-items: center;
		gap: 6px;
		padding: 26px 16px;
		color: var(--ink-3, #7b8090);
		.ss-i {
			width: 36px;
			height: 36px;
			padding: 7px;
			border-radius: 10px;
			background: var(--ok-soft, #e7f6ec);
			color: var(--ok, #15803d);
			fill: currentColor;
		}
		p {
			margin: 0;
			font-size: 13px;
		}
	}
	&__foot {
		padding: 8px 10px;
		border-top: 1px solid var(--line-2, #eceef3);
	}
	.ss-notice {
		display: flex;
		gap: 10px;
		padding: 12px 16px;
		& + .ss-notice {
			border-top: 1px solid var(--line-2, #eceef3);
		}
		&__dot {
			width: 8px;
			height: 8px;
			margin-top: 6px;
			border-radius: 50%;
			background: var(--brand, #5b4cf5);
			flex: 0 0 auto;
		}
		&.is-warning .ss-notice__dot {
			background: var(--warn, #b45309);
		}
		&.is-error .ss-notice__dot {
			background: var(--live, #b91c1c);
		}
		&__body {
			min-width: 0;
			strong {
				font-size: 13px;
			}
			p {
				margin: 2px 0 0;
				font-size: 12.5px;
				color: var(--ink-2, #4b4f5c);
			}
		}
		&__actions {
			display: flex;
			gap: 4px;
			margin-top: 8px;
			.components-button {
				min-height: 28px;
				border-radius: 8px;
				font-size: 12px;
			}
			.components-button.is-secondary {
				border: 1px solid var(--line, #dfe2ea);
				box-shadow: none;
				background: var(--surface, #fff);
				color: var(--ink, #16181f);
				padding: 0 8px 0 10px;
			}
		}
	}
}

/* ---- Command palette (portalled modal) ---- */
.ss-palette.components-modal__frame,
.ss-admin ~ .components-modal__screen-overlay .ss-palette {
	border-radius: 14px;
	border: 1px solid var(--line, #dfe2ea);
	box-shadow: 0 24px 60px rgba(16, 18, 27, 0.24);
}
.ss-palette {
	&__search {
		padding: 12px 16px;
		.ss-i {
			width: 28px;
			height: 28px;
			padding: 5px;
			border-radius: 8px;
			background: var(--brand-soft);
			color: var(--brand-ink, #4536d6);
			fill: currentColor;
		}
	}
	&__item {
		border-radius: 8px;
		gap: 10px;
		.ss-i {
			width: 28px;
			height: 28px;
			padding: 5px;
			border-radius: 8px;
			background: var(--surface-2);
		}
		&.is-active .ss-i {
			background: var(--surface);
		}
	}
	&__foot {
		padding: 8px 16px;
		border-top: 1px solid var(--line);
		font-size: 12px;
		color: var(--ink-3);
	}
}

/* Dark-mode mirrors for the portalled bits above */
body[data-theme='dark'] {
	.ss-notices__pop .components-popover__content {
		border-color: var(--line);
		box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
	}
	.ss-notices {
		&__head,
		&__foot,
		.ss-notice + .ss-notice {
			border-color: var(--line-2);
		}
		.ss-notice__actions .components-button.is-secondary {
			background: var(--surface-2);
			border-color: var(--line);
			color: var(--ink);
		}
	}
	.ss-palette.components-modal__frame {
		border-color: var(--line);
		box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
	}
}

/* ==========================================================================
   UI2-B — settings and builder consistency (brief: ui-style-brief)
   ========================================================================== */
.ss-admin {
	/* Spacing utilities (replace inline style margins). */
	.ss-mt-12 {
		margin-top: 12px;
	}
	.ss-mt-16 {
		margin-top: 16px;
	}

	/* A small action shown under a field's control (e.g. "Open in builder"). */
	.ss-field__control > .ss-field__after.components-button {
		margin-top: 10px;
	}
	.ss-field__control > .components-button.is-link {
		margin-top: 8px;
		text-decoration: none;
	}

	/* Section head: 6px title → description, 24px between sections. */
	.ss-section + .ss-section {
		margin-top: 24px;
	}
	.ss-section__head {
		margin-bottom: 14px;
		h2 {
			margin: 0;
		}
		p {
			margin: 6px 0 0;
			color: var(--ink-3);
			font-size: 13px;
		}
		.ss-section__aside {
			display: flex;
			gap: 8px;
			align-items: center;
		}
	}

	/* Settings page */
	.ss-settings__heading {
		padding-bottom: 14px;
		border-bottom: 1px solid var(--line-2);
		margin-bottom: 22px;
	}
	.ss-settings__card .ss-panel--padded {
		padding: 18px 20px;
	}
	.ss-settings__card .ss-field {
		padding: 16px 0;
	}
	.ss-settings__card .ss-field:first-child {
		padding-top: 0;
	}
	.ss-settings__card .ss-field:last-child {
		padding-bottom: 0;
	}
	.ss-settings__card .ss-panel + .ss-panel {
		margin-top: 14px;
	}
	/* Settings rows: text left, control hugs the right edge. Inputs still fill the column;
	   buttons, toggles, segmented controls and chips sit flush right. */
	.ss-settings__card .ss-field:not(.ss-field--row) .ss-field__control {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		align-content: flex-start;
		gap: 8px;
		> * {
			flex: 1 1 auto;
			min-width: 0;
		}
		> .components-button,
		> .components-toggle-control,
		> .components-form-toggle,
		> .ss-seg,
		> .ss-pill,
		> .ss-chip,
		> .ss-stpick:not(.ss-stpick--block),
		> .components-dropdown,
		> .components-dropdown-menu,
		> a {
			flex: 0 0 auto;
		}
		/* Small follow-up actions ("Open in builder") wrap to their own line, hugging the right. */
		> .ss-field__after.components-button,
		> .components-button.is-link {
			flex: 0 0 auto;
			margin-top: 0;
			margin-left: auto;
		}
		> .components-base-control,
		> .components-input-control,
		> .components-select-control,
		> .components-text-control__input,
		> .components-textarea-control,
		> .ss-copy,
		> .ss-code-block,
		> .ss-b-two {
			flex-basis: 100%;
		}
		> p,
		> .ss-muted,
		> .description {
			flex-basis: 100%;
			text-align: right;
		}
	}
	.ss-settings__card .ss-field__control {
		.components-text-control__input,
		.components-select-control__input,
		textarea,
		input[type='email'],
		input[type='text'],
		input[type='number'] {
			border-radius: 10px;
			border-color: var(--line);
			background: var(--surface);
			max-width: 560px;
			&:focus {
				border-color: var(--brand);
				box-shadow: 0 0 0 3px var(--brand-soft);
			}
		}
		.components-select-control__input {
			min-height: 36px;
		}
	}
	.ss-tools li {
		padding: 16px 20px;
		p {
			margin-top: 4px;
		}
		> div {
			min-width: 0;
		}
		.components-button {
			flex: 0 0 auto;
		}
	}
	.ss-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
	.ss-b-note {
		display: flex;
		gap: 10px;
		align-items: flex-start;
		margin-top: 14px;
		padding: 12px 14px;
		border-radius: var(--r-md);
		background: var(--surface-2);
		color: var(--ink-2);
		font-size: 12.5px;
		.ss-i {
			color: var(--ink-3);
			flex: 0 0 auto;
			margin-top: 1px;
		}
	}

	/* Builder cards: sub-section rows and helpers (card itself is styled in the builder block). */
	.ss-b-group + .ss-b-group {
		margin-top: 16px;
	}
	.ss-b-field--row {
		display: flex;
		gap: 8px;
		align-items: center;
		flex-wrap: wrap;
	}
	.ss-b-filename {
		max-width: 360px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		border-radius: 8px;
	}
	.ss-b-two {
		column-gap: 16px;
		row-gap: 12px;
	}

	/* Sidebar card CTA (tips) */
	.ss-tips .ss-tips__cta.components-button {
		margin-top: 14px;
	}
	.ss-tips h3 {
		margin: 0 0 6px;
		font-size: 14px;
	}
	.ss-tips > .ss-muted {
		margin: 0 0 12px;
		font-size: 12.5px;
	}

	/* Schedule editors: artwork field */
	.ss-logo-field {
		gap: 18px;
		.ss-logo-field__title {
			font-weight: 650;
		}
		.ss-muted {
			margin: 4px 0 10px;
			font-size: 12.5px;
		}
		.components-button + .components-button {
			margin-left: 6px;
		}
	}
	.ss-checks {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 8px 16px;
	}
}

body[data-theme='dark'] .ss-admin {
	.ss-b-note {
		background: var(--surface-2);
	}
	.ss-settings__card .ss-field__control {
		.components-text-control__input,
		.components-select-control__input,
		textarea {
			background: var(--surface);
			border-color: var(--line);
			color: var(--ink);
		}
	}
}

/* ==========================================================================
   UI3 — builder field rows, embed modal, station search, preview header,
   range sliders
   ========================================================================== */

/* ---- Field convention: "Title — Control", description under the title ---- */
.ss-admin .ss-b-fields {
	display: flex;
	flex-direction: column;
	.ss-field {
		padding: 14px 0;
		border-top: 1px solid var(--line-2);
		&:first-child {
			border-top: 0;
			padding-top: 0;
		}
		&:last-child {
			padding-bottom: 0;
		}
	}
	+ .ss-b-fields,
	+ .ss-b-group__foot {
		margin-top: 16px;
	}
}
.ss-admin .ss-field--row {
	grid-template-columns: minmax(180px, 2fr) 3fr;
	gap: 12px 24px;
	align-items: center;
	.ss-field__text label {
		font-size: 13.5px;
		line-height: 1.3;
	}
	.ss-field__text p {
		margin-top: 4px;
		line-height: 1.45;
	}
	.ss-field__control {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		min-width: 0;
		> * {
			flex: 1 1 auto;
			min-width: 0;
		}
		> .components-toggle-control,
		> .ss-seg,
		> .components-button,
		> .ss-resp-field__in {
			flex: 0 0 auto;
		}
		.components-base-control__label {
			display: none;
		}
		.components-base-control__help {
			display: none;
		}
		.components-base-control,
		.components-input-control,
		.components-select-control {
			width: 100%;
		}
		.components-toggle-control .components-base-control__field {
			margin: 0;
		}
		.ss-seg {
			margin: 0;
		}
	}
	@media (max-width: 720px) {
		grid-template-columns: 1fr;
		gap: 8px;
		.ss-field__control {
			justify-content: flex-start;
		}
	}
}
.ss-admin .ss-b-group__foot {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line-2);
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ss-admin .ss-mediarow {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	img {
		width: 36px;
		height: 36px;
		border-radius: 8px;
		object-fit: cover;
		border: 1px solid var(--line);
		flex: 0 0 auto;
	}
	.components-button {
		flex: 0 0 auto;
	}
	.components-base-control {
		flex: 1 1 auto;
	}
}

/* ---- Builder rhythm ---- */
.ss-admin .ss-builder__main-body {
	gap: 16px;
}
.ss-admin .ss-b-group {
	padding: 18px 20px;
	> .ss-b-group__head {
		margin-bottom: 14px;
		> div > h3 {
			margin: 0;
		}
	}
	.ss-b-group + & {
		margin-top: 0;
	}
}
.ss-admin .ss-builder__rail .ss-rail-group__items {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* ---- Embed modal ---- */
body.streamsera-admin-page .components-modal__frame.ss-modal--embed {
	.ss-modal__desc {
		margin-bottom: 12px;
	}
	.ss-embed__tabs {
		margin: 0 0 16px;
		display: flex;
		flex-wrap: wrap;
		gap: 2px;
		button {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			padding: 7px 12px;
			font-size: 13px;
			.ss-i {
				fill: currentColor;
				width: 14px;
				height: 14px;
				color: var(--ink-3);
			}
			&.is-active .ss-i {
				color: var(--brand-ink);
			}
		}
	}
	.ss-embed {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.ss-embed__card {
		display: flex;
		flex-direction: column;
		gap: 14px;
		padding: 18px 20px;
		border: 1px solid var(--line);
		border-radius: 12px;
		background: var(--surface);
		> p,
		> .ss-copy,
		> ol {
			margin: 0;
		}
	}
	.ss-embed__intro {
		color: var(--ink-2);
		font-size: 13.5px;
		line-height: 1.5;
	}
	.ss-embed__hint {
		color: var(--ink-3);
		font-size: 12.5px;
		line-height: 1.6;
		code {
			font-size: 12px;
			padding: 1px 6px;
			border-radius: 6px;
			background: var(--surface-2);
			border: 1px solid var(--line-2);
		}
	}
	.ss-embed__steps {
		margin: 0;
		padding-left: 20px;
		color: var(--ink-2);
		font-size: 13.5px;
		li + li {
			margin-top: 6px;
		}
	}
	.ss-embed__label {
		display: block;
		font-size: 12px;
		font-weight: 600;
		color: var(--ink-2);
		margin-bottom: 6px;
	}
	.ss-embed__snippet .ss-copy {
		margin: 0;
	}
	.ss-embed__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 16px;
		.components-base-control {
			margin: 0;
		}
	}
	.ss-embed__actions {
		display: flex;
		justify-content: flex-end;
		gap: 8px;
		&--start {
			justify-content: flex-start;
		}
	}
	.ss-embed__warn {
		display: flex;
		gap: 10px;
		padding: 12px 14px;
		border-radius: 10px;
		background: var(--warn-soft);
		color: var(--ink);
		> .ss-i {
			flex: 0 0 auto;
			color: var(--warn);
			fill: currentColor;
			margin-top: 2px;
		}
		> div {
			display: flex;
			flex-direction: column;
			gap: 4px;
			strong {
				font-size: 13.5px;
			}
			span {
				font-size: 12.5px;
				color: var(--ink-2);
			}
			.components-button {
				align-self: flex-start;
				margin-top: 6px;
			}
		}
	}
	.ss-embed__error {
		padding: 10px 12px;
		border-radius: 10px;
		background: var(--live-soft);
		color: var(--live);
		font-size: 13px;
	}
	/* Add to page */
	.ss-embed__choices {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.ss-embed__choice {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		padding: 12px 14px;
		border: 1px solid var(--line);
		border-radius: 10px;
		background: var(--surface);
		text-align: left;
		cursor: pointer;
		font: inherit;
		color: var(--ink);
		transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
		&:hover {
			background: var(--surface-2);
		}
		&.is-active {
			border-color: var(--brand);
			background: var(--brand-soft);
			box-shadow: inset 0 0 0 1px var(--brand);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: 2px;
		}
		&-icon {
			width: 28px;
			height: 28px;
			border-radius: 8px;
			display: grid;
			place-items: center;
			background: var(--surface-2);
			color: var(--brand-ink);
			flex: 0 0 auto;
			.ss-i {
				fill: currentColor;
			}
		}
		&.is-active &-icon {
			background: var(--surface);
		}
		&-text {
			display: flex;
			flex-direction: column;
			gap: 2px;
			strong {
				font-size: 13.5px;
			}
			small {
				font-size: 12px;
				color: var(--ink-3);
			}
		}
	}
	.ss-embed__search {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 40px;
		padding: 0 12px;
		border: 1px solid var(--line);
		border-radius: 10px;
		background: var(--surface);
		color: var(--ink-3);
		&:focus-within {
			border-color: var(--brand);
			box-shadow: 0 0 0 3px var(--brand-soft);
		}
		.ss-i {
			fill: currentColor;
			flex: 0 0 auto;
		}
		input[type='text'] {
			flex: 1 1 auto;
			min-width: 0;
			height: 100%;
			min-height: 0;
			border: 0 !important;
			box-shadow: none !important;
			background: transparent !important;
			padding: 0;
			margin: 0;
			font: inherit;
			color: var(--ink);
			&:focus {
				outline: none;
			}
		}
		.components-spinner {
			margin: 0;
		}
	}
	.ss-embed__pages {
		list-style: none;
		margin: 0;
		padding: 4px;
		max-height: 220px;
		overflow: auto;
		border: 1px solid var(--line);
		border-radius: 10px;
		background: var(--surface);
		li button {
			display: flex;
			align-items: center;
			gap: 10px;
			width: 100%;
			padding: 8px 10px;
			border: 0;
			border-radius: 8px;
			background: transparent;
			font: inherit;
			color: var(--ink);
			text-align: left;
			cursor: pointer;
			.ss-i {
				fill: currentColor;
				color: var(--ink-3);
				flex: 0 0 auto;
			}
			span {
				flex: 1 1 auto;
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			small {
				color: var(--ink-3);
				font-size: 11.5px;
			}
			&:hover {
				background: var(--surface-2);
			}
			&.is-active {
				background: var(--brand-soft);
				color: var(--brand-ink);
				.ss-i {
					color: var(--brand-ink);
				}
			}
		}
		&-empty {
			padding: 14px;
			text-align: center;
			color: var(--ink-3);
			font-size: 13px;
		}
	}
	.ss-embed__done {
		align-items: center;
		text-align: center;
		gap: 10px;
		padding: 28px 20px;
		&-icon {
			width: 44px;
			height: 44px;
			border-radius: 12px;
			display: grid;
			place-items: center;
			background: var(--ok-soft);
			color: var(--ok);
			.ss-i {
				fill: currentColor;
			}
		}
		&-text {
			display: flex;
			flex-direction: column;
			gap: 4px;
			strong {
				font-size: 14.5px;
			}
		}
		&-actions {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			justify-content: center;
			margin-top: 6px;
		}
	}
	@media (max-width: 640px) {
		.ss-embed__choices,
		.ss-embed__grid {
			grid-template-columns: 1fr;
		}
	}
}

/* ---- Station search (combobox): one bordered field, borderless input ---- */
.ss-admin .ss-combo__field {
	height: 40px;
	border-radius: 10px;
	padding: 0 8px 0 12px;
	> .ss-i {
		flex: 0 0 auto;
		fill: currentColor;
	}
	input,
	input[type='text'],
	input[type='search'] {
		flex: 1 1 auto;
		height: 100%;
		min-height: 0 !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		padding: 0 !important;
		margin: 0;
		outline: none !important;
	}
	.ss-combo__clear {
		width: 28px;
		height: 28px;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--ink-3);
		display: grid;
		place-items: center;
		cursor: pointer;
		flex: 0 0 auto;
		&:hover {
			background: var(--surface-2);
			color: var(--ink);
		}
		.ss-i {
			fill: currentColor;
		}
	}
}
.ss-admin .ss-explorer__tools,
.ss-admin .ss-combo-row {
	display: flex;
	align-items: center;
	gap: 10px;
	> .components-button {
		height: 40px;
		min-height: 40px;
		flex: 0 0 auto;
	}
}

/* ---- Builder stacking: the top bar always wins; columns scroll on their own ---- */
.ss-admin .ss-builder {
	overflow: hidden;
	&__top {
		position: relative;
		top: auto;
		z-index: 30;
		flex: 0 0 auto;
	}
	&__preview {
		position: relative;
		z-index: 1;
	}
}
.ss-admin .ss-preview__bar {
	position: relative;
	top: auto;
	z-index: 1;
	min-height: 52px;
	height: 52px;
	padding: 0 14px 0 18px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
}
.ss-admin .ss-preview__title {
	font-size: 13px;
	font-weight: 650;
	color: var(--ink);
}
.ss-admin .ss-preview__tools {
	gap: 4px;
	button {
		width: 32px;
		height: 32px;
		border-radius: 9px;
		border: 1px solid transparent;
		&:hover {
			background: var(--surface-2);
			color: var(--ink);
		}
		&.is-active {
			background: var(--brand-soft);
			border-color: transparent;
			color: var(--brand-ink);
		}
	}
}

/* ---- Range sliders ---- */
.ss-admin .components-range-control {
	.components-base-control__field {
		margin-bottom: 0;
	}
	.components-range-control__wrapper {
		margin-right: 12px;
		height: 20px;
		display: flex;
		align-items: center;
	}
	.components-range-control__wrapper > span:first-child,
	.components-range-control__slider + span {
		background: var(--line-2);
		height: 4px;
		border-radius: 999px;
	}
	.components-range-control__track {
		background: var(--brand);
		height: 4px;
		border-radius: 999px;
	}
	.components-range-control__thumb-wrapper {
		width: 16px;
		height: 16px;
		top: 2px;
		margin-left: -8px;
		background: transparent;
	}
	.components-range-control__thumb {
		width: 16px;
		height: 16px;
		top: 0;
		left: 0;
		background: #fff;
		border: 2px solid var(--brand);
		box-shadow: 0 1px 3px rgba(16, 18, 27, 0.18);
		&::before {
			display: none;
		}
	}
	.components-range-control__thumb-wrapper:focus-within .components-range-control__thumb {
		box-shadow: 0 0 0 3px var(--brand-soft);
	}
	.components-range-control__tooltip {
		display: none !important;
	}
	.components-range-control__mark,
	.components-range-control__mark-label {
		display: none;
	}
	.components-range-control__root,
	.components-range-control__root > .components-flex {
		align-items: center;
		gap: 12px;
	}
	.components-number-control,
	.components-input-control {
		width: 64px;
		flex: 0 0 64px;
		.components-input-control__container {
			width: 64px;
		}
		.components-input-control__backdrop {
			border-color: var(--line);
			border-radius: 10px;
		}
		input {
			min-height: 34px !important;
			height: 34px;
			padding: 0 8px !important;
			font-variant-numeric: tabular-nums;
			text-align: center;
		}
		&:focus-within .components-input-control__backdrop {
			border-color: var(--brand);
			box-shadow: 0 0 0 3px var(--brand-soft);
		}
	}
}
body[data-theme='dark'] .ss-admin .components-range-control {
	.components-range-control__thumb {
		background: var(--surface);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	}
}

/* ---- Dark-mode mirrors for the embed modal (portalled) ---- */
body[data-theme='dark'] .components-modal__frame.ss-modal--embed {
	.ss-embed__card,
	.ss-embed__search,
	.ss-embed__pages,
	.ss-embed__choice {
		background: var(--surface);
		border-color: var(--line);
	}
	.ss-embed__choice.is-active {
		background: var(--brand-soft);
	}
	.ss-embed__hint code {
		background: var(--surface-2);
	}
}

/* ==========================================================================
   Builder fields v2 — "Title — Control" row, full-width description below
   ========================================================================== */
.ss-admin .ss-field--row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		'label control'
		'desc desc';
	column-gap: 24px;
	row-gap: 6px;
	align-items: center;
	.ss-field__text {
		display: contents;
	}
	.ss-field__text label,
	.ss-field__text > strong,
	.ss-field__label {
		grid-area: label;
		font-size: 13.5px;
		font-weight: 600;
		line-height: 1.3;
		margin: 0;
	}
	.ss-field__text p,
	.ss-field__hint {
		grid-area: desc;
		margin: 0;
		max-width: none;
		line-height: 1.45;
	}
	.ss-field__control {
		grid-area: control;
		justify-self: end;
		width: clamp(220px, 48%, 520px);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		min-width: 0;
		> * {
			flex: 1 1 auto;
			min-width: 0;
		}
		> .components-toggle-control,
		> .ss-seg,
		> .components-button,
		> .ss-resp-field__in,
		> .ss-color__swatch {
			flex: 0 0 auto;
		}
		.components-base-control__label {
			display: none;
		}
	}
	/* Toggles and segmented controls don't need the wide control column. */
	&.ss-field--compact .ss-field__control {
		width: auto;
	}
	@media (max-width: 720px) {
		grid-template-columns: 1fr;
		grid-template-areas:
			'label'
			'control'
			'desc';
		.ss-field__control {
			width: 100%;
			justify-self: stretch;
		}
	}
}
.ss-admin .ss-b-fields > .ss-field--row + .ss-field--row {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--line-2);
}

/* Collapsible card toggle (Arrange parts…) stays on one line. */
.ss-admin .ss-b-collapse__toggle {
	white-space: nowrap;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink);
	font-weight: 600;
	cursor: pointer;
	.ss-i {
		fill: currentColor;
	}
	&:hover {
		background: var(--surface-2);
	}
}
.ss-admin .ss-b-collapse .ss-b-group__head {
	gap: 16px;
	align-items: flex-start;
	> div {
		min-width: 0;
		flex: 1 1 auto;
	}
}

/* Media rows (Choose file + filename) get breathing room. */
.ss-admin .ss-mediarow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0 16px;
	.ss-b-filename {
		color: var(--ink-3);
	}
}

/* Range sliders — vertically centred thumb, aligned number box. */
.ss-admin .components-range-control {
	.components-base-control__field {
		display: flex;
		align-items: center;
		gap: 12px;
		margin: 0;
	}
	.components-range-control__root {
		flex: 1 1 auto;
		min-width: 0;
	}
	.components-range-control__root {
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.components-range-control__wrapper {
		position: relative;
		flex: 1 1 auto;
		min-width: 120px;
		height: 24px;
		margin: 0;
		display: block;
	}
	.components-range-control__wrapper > span:first-child,
	.components-range-control__slider + span,
	.components-range-control__track {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		height: 4px;
		border-radius: 999px;
		margin: 0;
	}
	.components-range-control__wrapper > span:first-child,
	.components-range-control__slider + span {
		left: 0;
		right: 0;
		background: var(--line-2);
	}
	.components-range-control__track {
		background: var(--brand);
	}
	.components-range-control__slider {
		position: absolute;
		inset: 0;
		height: 24px;
		margin: 0;
	}
	.components-range-control__thumb-wrapper {
		position: absolute;
		top: 50%;
		width: 16px;
		height: 16px;
		margin: -8px 0 0 -8px;
		transform: none;
		background: transparent;
	}
	.components-range-control__thumb {
		position: absolute;
		inset: 0;
		width: 16px;
		height: 16px;
		margin: 0;
		background: #fff;
		border: 2px solid var(--brand);
		border-radius: 50%;
		box-shadow: 0 1px 3px rgba(16, 18, 27, 0.18);
		&::before {
			display: none;
		}
	}
	.components-range-control__tooltip {
		display: none;
	}
	.components-input-control,
	.components-number-control {
		flex: 0 0 auto;
		width: 64px;
		.components-input-control__container,
		.components-input-control__backdrop {
			border-radius: 8px;
		}
		input {
			text-align: center;
			min-height: 34px;
		}
	}
}
body[data-theme='dark'] .ss-admin .components-range-control__thumb {
	background: var(--surface);
}

/* ---- Settings card headers: icon tile + full-width description ---- */
.ss-admin .ss-settings__card .ss-section__head {
	display: block;
	margin-bottom: 14px;
	.ss-section__text {
		max-width: none;
	}
	h2 {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 6px;
		font-size: 15px;
	}
	p {
		max-width: none;
		margin: 0;
		line-height: 1.5;
	}
	.ss-section__aside {
		margin-top: 10px;
	}
}
.ss-admin .ss-section__icon {
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--brand-soft);
	color: var(--brand-ink);
	flex: 0 0 auto;
	.ss-i {
		fill: currentColor;
	}
}
.ss-admin .ss-settings__card .ss-section + .ss-section {
	margin-top: 24px;
}

/* Two inputs inside a row-field control (date ranges) must share the control width. */
.ss-admin .ss-field--row .ss-field__control > .ss-b-two {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px;
	width: 100%;
	> * {
		min-width: 0;
	}
	input {
		width: 100%;
		min-width: 0;
	}
}

/* ---- Builder shell: never under the admin bar; optional preview pane ---- */
body.ss-builder-open {
	overflow: hidden;
	#wpbody-content {
		padding-bottom: 0;
	}
	#wpcontent {
		padding-left: 0;
	}
	/* Cancel the -10px pull that offsets WP's page padding on normal pages:
	   in the builder the shell must start exactly under the admin bar. */
	.ss-admin {
		margin-top: 0;
		min-height: 0;
	}
	.streamsera-wrap.wrap {
		margin-left: 0;
	}
}
.ss-admin .ss-builder {
	height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
	&__top {
		position: sticky;
		top: 0;
	}
	&__body.is-preview-hidden {
		grid-template-columns: 200px minmax(0, 1fr);
		.ss-builder__main-body {
			max-width: none;
		}
	}
	&__preview-toggle.components-button {
		width: 34px;
		height: 34px;
		padding: 0;
		border-radius: 9px;
		color: var(--ink-2);
		&[aria-pressed='true'] {
			color: var(--brand-ink);
			background: var(--brand-soft);
		}
	}
}
.ss-admin .ss-preview__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ss-admin .ss-preview__icon {
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: var(--brand-soft);
	color: var(--brand-ink);
	.ss-i {
		fill: currentColor;
	}
}
@media (max-width: 1100px) {
	.ss-admin .ss-builder__body.is-preview-hidden {
		grid-template-columns: 56px minmax(0, 1fr);
	}
}
@media (max-width: 782px) {
	.ss-admin .ss-builder {
		height: calc(100vh - 46px);
	}
}

/* Range sliders inside row fields: the row rule sets every base/input control
   to width:100%, which also caught the slider's number box and pushed the row
   past the card (horizontal scroll in Style). Keep the number box compact. */
.ss-admin .ss-field--row .ss-field__control .components-range-control {
	width: 100%;
	.components-range-control__root {
		min-width: 0;
	}
	.components-input-control,
	.components-number-control {
		flex: 0 0 64px;
		width: 64px;
		min-width: 0;
		margin-left: 0;
	}
}
.ss-admin .ss-builder__main {
	overflow-x: hidden;
}

/* ==========================================================================
   STYLE-2 — Style tab: saved-styles gallery + one-open accordion cards
   ========================================================================== */
.ss-admin .ss-mt-8 {
	margin-top: 8px;
}
.ss-admin .ss-stylecards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}
.ss-admin .ss-stylecard {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	&.is-open {
		border-color: var(--line-strong);
		box-shadow: var(--shadow-sm);
	}
	&__head {
		all: unset;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 18px;
		cursor: pointer;
		&:hover {
			background: var(--surface-2);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: -2px;
			border-radius: var(--r-lg);
		}
	}
	&__icon {
		flex: 0 0 32px;
		width: 32px;
		height: 32px;
		border-radius: 9px;
		display: grid;
		place-items: center;
		background: var(--brand-soft);
		color: var(--brand-ink);
		.ss-i {
			fill: currentColor;
		}
	}
	&__text {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 2px;
		strong {
			font-size: 14px;
			font-weight: 600;
			color: var(--ink);
		}
		small {
			font-size: 12.5px;
			color: var(--ink-3);
		}
	}
	&__summary {
		flex: 0 1 auto;
		min-width: 0;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		max-width: 45%;
		color: var(--ink-2);
		font-size: 12.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		> span:first-child {
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	&__dots {
		display: inline-flex;
		i {
			width: 16px;
			height: 16px;
			border-radius: 50%;
			border: 2px solid var(--surface);
			box-shadow: 0 0 0 1px var(--line);
			& + i {
				margin-left: -5px;
			}
		}
	}
	&__chev {
		flex: 0 0 auto;
		display: grid;
		color: var(--ink-3);
		transition: transform 0.15s ease;
		.ss-i {
			fill: currentColor;
		}
	}
	&.is-open &__chev {
		transform: rotate(180deg);
	}
	&__body {
		padding: 4px 18px 20px;
		border-top: 1px solid var(--line-2);
		> :first-child {
			margin-top: 16px;
		}
		.ss-b-attach {
			margin-top: 18px;
			padding-top: 4px;
			border-top: 1px solid var(--line-2);
		}
		.ss-skins {
			margin-bottom: 4px;
		}
		.ss-colors {
			margin-top: 12px;
		}
	}
	&__sub {
		margin: 18px 0 12px;
		h4 {
			margin: 0;
			font-size: 13px;
			font-weight: 600;
			color: var(--ink);
		}
		p {
			margin: 2px 0 0;
			font-size: 12.5px;
			color: var(--ink-3);
		}
		&--split {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 16px;
			flex-wrap: wrap;
			padding-top: 18px;
			border-top: 1px solid var(--line-2);
			> div:first-child {
				flex: 1 1 260px;
			}
		}
	}
}

/* Saved styles gallery */
.ss-admin .ss-stylelib {
	.ss-b-group__head {
		align-items: center;
		.components-button {
			flex: 0 0 auto;
			white-space: nowrap;
		}
	}
	&__grid {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
		gap: 12px;
	}
	&__tile {
		position: relative;
		margin: 0;
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--surface);
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
		&:hover {
			border-color: var(--line-strong);
			box-shadow: var(--shadow-sm);
		}
		&.is-active {
			border-color: var(--brand);
			box-shadow: 0 0 0 1px var(--brand);
		}
		&.is-flash {
			box-shadow: 0 0 0 3px var(--ok-soft), 0 0 0 1px var(--ok);
		}
	}
	&__apply {
		all: unset;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 100%;
		padding: 12px 12px 8px;
		cursor: pointer;
		border-radius: var(--r-md) var(--r-md) 0 0;
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: -2px;
		}
	}
	&__meta {
		display: flex;
		flex-direction: column;
		min-width: 0;
		strong {
			font-size: 13.5px;
			font-weight: 600;
			color: var(--ink);
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		small {
			font-size: 12px;
			color: var(--ink-3);
		}
	}
	&__badge {
		position: absolute;
		top: 18px;
		right: 18px;
		display: inline-flex;
		align-items: center;
		gap: 3px;
		padding: 2px 8px 2px 6px;
		border-radius: 999px;
		background: var(--brand);
		color: #fff;
		font-size: 11px;
		font-weight: 600;
		.ss-i {
			fill: currentColor;
		}
	}
	&__actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 2px;
		min-height: 40px;
		padding: 0 6px 6px 12px;
	}
	&__confirm {
		margin-right: auto;
		font-size: 12.5px;
		font-weight: 600;
		color: var(--live);
	}
	&__empty {
		all: unset;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		gap: 14px;
		width: 100%;
		padding: 18px;
		border: 1.5px dashed var(--line-strong);
		border-radius: var(--r-md);
		cursor: pointer;
		color: var(--ink-2);
		&:hover,
		&:focus-visible {
			border-color: var(--brand);
			background: var(--brand-soft);
		}
		> span:last-child {
			display: flex;
			flex-direction: column;
			gap: 2px;
		}
		strong {
			color: var(--ink);
			font-weight: 600;
		}
		small {
			font-size: 12.5px;
			color: var(--ink-3);
		}
	}
	&__emptyicon {
		flex: 0 0 36px;
		width: 36px;
		height: 36px;
		border-radius: 10px;
		display: grid;
		place-items: center;
		background: var(--brand-soft);
		color: var(--brand-ink);
		.ss-i {
			fill: currentColor;
		}
	}
}

/* Mini player swatch (tiles + save modal; modal is portalled, so top level). */
.ss-swatchplayer {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 64px;
	padding: 0 14px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	> i {
		flex: 0 0 30px;
		height: 30px;
		border-radius: 50%;
	}
	> span {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: 5px;
		min-width: 0;
	}
	b,
	small,
	em {
		display: block;
		height: 6px;
		border-radius: 3px;
	}
	b {
		width: 70%;
		opacity: 0.75;
	}
	small {
		width: 45%;
		opacity: 0.35;
	}
	em {
		width: 90%;
		height: 4px;
	}
	&.is-large {
		height: 84px;
		padding: 0 18px;
		> i {
			flex-basis: 40px;
			height: 40px;
		}
	}
}
.ss-stylelib__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	margin-bottom: 16px;
	padding: 12px;
	border: 1px solid var(--line, #dfe2ea);
	border-radius: 12px;
	background: var(--surface-2, #f8f9fb);
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 4px;
		font-size: 12.5px;
		color: var(--ink-2, #4b4f5c);
	}
	li {
		display: flex;
		align-items: center;
		gap: 6px;
		margin: 0;
		.ss-i {
			fill: var(--ok, #1f9d5a);
			flex: 0 0 auto;
		}
	}
	@media (max-width: 520px) {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   STYLE-3 — Custom skins in the skin grid, "Customize colors" switch, skin modal
   ========================================================================== */
.ss-admin .ss-skin-opt--custom {
	position: relative;
	padding: 0;
	cursor: default;
	.ss-skin-opt__main {
		all: unset;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		width: 100%;
		padding: 8px;
		border-radius: inherit;
		cursor: pointer;
		color: var(--ink-2);
		> span:last-child {
			font-size: 12.5px;
			font-weight: 600;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: 2px;
		}
	}
	&.is-active .ss-skin-opt__main {
		color: var(--ink);
	}
	.ss-skinprev {
		width: 100%;
		height: 56px;
	}
}
.ss-admin .ss-skin-opt__badge {
	position: absolute;
	top: 46px;
	right: 13px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.72);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.02em;
	pointer-events: none;
}
.ss-admin .ss-skin-opt__menu {
	position: absolute;
	top: 10px;
	right: 10px;
	.components-button {
		width: 26px;
		min-width: 26px;
		height: 26px;
		padding: 0;
		justify-content: center;
		border-radius: 7px;
		background: rgba(255, 255, 255, 0.92);
		color: #16181f;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
		opacity: 0;
		transition: opacity 0.12s ease;
		.ss-i {
			fill: currentColor;
		}
		&[aria-expanded='true'],
		&:focus-visible {
			opacity: 1;
		}
	}
}
.ss-admin .ss-skin-opt--custom:hover .ss-skin-opt__menu .components-button,
.ss-admin .ss-skin-opt--custom:focus-within .ss-skin-opt__menu .components-button {
	opacity: 1;
}
@media (hover: none) {
	.ss-admin .ss-skin-opt__menu .components-button {
		opacity: 1;
	}
}
.ss-admin .ss-skin-opt--add {
	border-style: dashed;
	border-width: 1.5px;
	border-color: var(--line-strong);
	background: transparent;
	color: var(--ink-2);
	.ss-skin-opt__plus {
		display: grid;
		place-items: center;
		height: 56px;
		border-radius: 10px;
		background: var(--surface-2);
		color: var(--brand-ink);
		.ss-i {
			fill: currentColor;
		}
	}
	&:hover,
	&:focus-visible {
		border-color: var(--brand);
		color: var(--brand-ink);
		.ss-skin-opt__plus {
			background: var(--brand-soft);
		}
	}
}
.ss-admin .ss-stylecard__switch {
	margin-top: 18px;
	padding-top: 4px;
	border-top: 1px solid var(--line-2);
}
.ss-admin .ss-stylecard__colors {
	padding: 4px 0 4px;
	.ss-stylecard__sub--split {
		margin-top: 6px;
		padding-top: 0;
		border-top: 0;
	}
}

/* Skin modal (portalled → top-level selectors; tokens come from the modal frame). */
.ss-skinmodal.components-modal__frame {
	max-width: 760px;
	width: calc(100% - 48px);
}
.ss-skinmodal__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	@media (max-width: 680px) {
		grid-template-columns: 1fr;
	}
}
.ss-skinmodal__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	.ss-seg {
		margin-bottom: 0;
	}
}
.ss-skinmodal__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink, #16181f);
}
.ss-skinmodal__colors {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.ss-skinmodal__color .ss-resp-field__in {
	display: flex;
	align-items: center;
	gap: 6px;
	input[type='color'] {
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		padding: 2px;
		border: 1px solid var(--line, #dfe2ea);
		border-radius: 8px;
		background: var(--surface, #fff);
		cursor: pointer;
	}
	input[type='text'] {
		flex: 1 1 auto;
		min-width: 0;
		height: 34px;
		padding: 0 10px;
		border: 1px solid var(--line, #dfe2ea);
		border-radius: 8px;
		background: var(--surface, #fff);
		color: var(--ink, #16181f);
		font: inherit;
		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
		font-size: 12.5px;
	}
}
.ss-skinmodal__preview {
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border: 1px solid var(--line, #dfe2ea);
	border-radius: 14px;
	background: var(--surface-2, #f8f9fb);
	> small {
		color: var(--ink-3, #7b8090);
		font-size: 12px;
	}
}

/* Row fields: switches sit at the right edge (the generic width:100% rule stretched them). */
.ss-admin .ss-field--row .ss-field__control:has(> .components-toggle-control) {
	width: auto;
}
.ss-admin .ss-field--row .ss-field__control > .components-toggle-control.components-base-control {
	width: auto;
	margin-left: auto;
}

/* ==========================================================================
   SPACING — one rhythm across the player builder
   Section head → content 20 · between cards 16 · card padding 20 ·
   blocks inside a card 20 (divider between) · field rows 16 (existing)
   ========================================================================== */
.ss-admin .ss-builder {
	.ss-builder__main-head {
		margin-bottom: 20px;
	}
	.ss-builder__main-body {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.ss-builder__main-body > .ss-b-attach,
	.ss-builder__main-body > .ss-stylecards {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.ss-builder__main-body > .ss-b-attach:empty {
		display: none;
	}
	.ss-builder__main-body > *,
	.ss-builder__main-body > .ss-b-attach > *,
	.ss-builder__main-body > .ss-stylecards > * {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Cards */
	.ss-b-group {
		padding: 20px;
	}
	.ss-b-group__head {
		margin-bottom: 16px;
	}
	.ss-stylecard__head {
		padding: 16px 20px;
	}
	.ss-stylecard__body {
		padding: 20px;
		> :first-child {
			margin-top: 0;
		}
		> .ss-stylecard__sub:first-child {
			margin-top: 0;
		}
	}

	/* Blocks inside a style card: 20px, separated by a hairline. */
	.ss-stylecard__sub {
		margin: 0 0 14px;
	}
	.ss-stylecard__switch,
	.ss-stylecard__body > .ss-b-attach,
	.ss-stylecard__sub--split {
		margin-top: 20px;
		padding-top: 20px;
		border-top: 1px solid var(--line-2);
	}
	.ss-stylecard__colors {
		margin-top: 20px;
		padding: 20px 0 0;
		border-top: 1px solid var(--line-2);
		.ss-stylecard__sub--split {
			margin-top: 0;
			padding-top: 0;
			border-top: 0;
		}
		.ss-presets {
			margin: 0 0 14px;
		}
		.ss-colors {
			margin-top: 0;
		}
	}
	/* Attached field lists start flush; their own row dividers keep the 16px rhythm. */
	.ss-stylecard__body > .ss-b-attach > .ss-b-fields > .ss-field--row:first-child,
	.ss-stylecard__switch > .ss-field--row:first-child {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
	.ss-stylecard__body > .ss-b-fields + .ss-b-attach {
		margin-top: 16px;
		padding-top: 16px;
	}
}

/* Color fields: long values (gradients) stay on one line with an ellipsis. */
.ss-admin .ss-color {
	min-width: 0;
	> .components-dropdown {
		flex: 0 1 auto;
		min-width: 0;
		max-width: 62%;
	}
	.ss-color__text {
		min-width: 0;
	}
	.ss-color__swatch {
		max-width: 100%;
		min-width: 0;
		code {
			min-width: 0;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		> span {
			flex: 0 0 24px;
		}
	}
}
/* A card that is only a header (toggle cards) doesn't keep the head's bottom gap. */
.ss-admin .ss-builder .ss-b-group__head:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   FULL-WIDTH DESCRIPTIONS — builder card headers: title + actions on one row,
   the description on its own full-width row (no 60ch / 760px caps).
   ========================================================================== */
.ss-admin .ss-builder {
	.ss-builder__main-head {
		max-width: none;
		p {
			max-width: none;
		}
	}
	.ss-b-group__head,
	.ss-stylecard__sub--split {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 16px;
		row-gap: 0;
		align-items: center;
		> div:first-child {
			display: contents;
		}
		h3,
		h4 {
			grid-column: 1;
			grid-row: 1;
			margin: 0;
		}
		p {
			grid-column: 1 / -1;
			grid-row: 2;
			max-width: none;
			margin-top: 4px;
		}
		> :not(:first-child):not(h3):not(h4):not(p) {
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
		}
	}
	.ss-stylecard__sub p,
	.ss-field__text p,
	.ss-b-group p {
		max-width: none;
	}

	/* Per device card */
	.ss-perdevice {
		.ss-seg {
			margin-bottom: 16px;
		}
		.ss-b-fields {
			margin-bottom: 16px;
			padding-bottom: 16px;
			border-bottom: 1px solid var(--line-2);
		}
		.ss-b-fields:empty {
			display: none;
		}
	}
	.ss-perdevice__label {
		margin-bottom: 10px;
		font-size: 12px;
		font-weight: 600;
		color: var(--ink-2);
	}
	.ss-b-group__foot {
		margin-top: 16px;
		padding-top: 16px;
		border-top: 1px solid var(--line-2);
	}
}

/* ==========================================================================
   Feeds & overlays (Settings → Integrations) and station Live status card
   ========================================================================== */
.ss-feeds {
	display: flex;
	flex-direction: column;
	&__row {
		display: flex;
		gap: 14px;
		padding: 16px 0;
		border-top: 1px solid var(--line-2);
		&:first-child {
			border-top: 0;
			padding-top: 4px;
		}
		&:last-child {
			padding-bottom: 4px;
		}
	}
	&__icon {
		display: grid;
		place-items: center;
		width: 34px;
		height: 34px;
		border-radius: 8px;
		background: var(--brand-soft);
		color: var(--brand);
		flex: 0 0 auto;
	}
	&__body {
		flex: 1 1 auto;
		min-width: 0;
		strong {
			display: block;
			font-size: 13.5px;
			color: var(--ink);
		}
		p {
			margin: 4px 0 0;
			font-size: 12.5px;
		}
		.ss-copy {
			margin: 10px 0 0;
		}
	}
}

.ss-statuscard {
	padding: 16px 18px;
	h3 {
		font-size: 14px;
		margin: 0 0 4px;
	}
	> p {
		margin: 0 0 14px;
		font-size: 12.5px;
	}
	&__opts {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	&__opt {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 9px 12px;
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--surface);
		cursor: pointer;
		input {
			margin: 0;
			accent-color: var(--brand);
		}
		strong {
			display: block;
			font-size: 13px;
			color: var(--ink);
		}
		small {
			display: block;
			color: var(--ink-3);
			font-size: 11.5px;
		}
		&.is-on {
			border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
			background: color-mix(in srgb, var(--brand-soft) 35%, var(--surface));
		}
	}
	&__msg {
		margin-top: 12px;
	}
	&__hint {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 12px;
		font-size: 12px;
		color: var(--ink-2);
	}
}

/* ==========================================================================
   Responsive (consolidated, last so it wins): desktop ≥ 1100 · laptop ≤ 1100
   · tablet ≤ 960 · WP mobile admin ≤ 782 · phone ≤ 600 · small phone ≤ 480.
   ========================================================================== */
@media (max-width: 960px) {
	.ss-admin .ss-builder {
		height: auto;
		min-height: 0;
		&__body,
		&__body.is-preview-hidden {
			grid-template-columns: 56px minmax(0, 1fr);
		}
		&__preview {
			grid-column: 1 / -1;
			border-left: 0;
			border-top: 1px solid var(--line);
			max-height: none;
		}
		&__main-body {
			max-width: none;
		}
	}
	.ss-admin .ss-preview__frame {
		--sidebar-w: 100%;
	}
	.ss-admin .ss-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ss-admin .ss-cols--form,
	.ss-admin .ss-cols {
		grid-template-columns: 1fr;
	}
	.ss-admin .ss-cell-np {
		max-width: 220px;
	}
	.ss-admin .ss-dt__hide-tablet {
		display: none;
	}
}
@media (max-width: 782px) {
	/* Builder: section rail becomes a horizontal tab strip, everything stacks. */
	.ss-admin .ss-builder {
		&__top {
			top: 0; /* sticky inside .ss-builder (overflow: hidden makes it the scrollport) */
			flex-wrap: wrap;
			gap: 8px 10px;
			padding: 8px 12px;
		}
		&__left {
			flex: 1 1 100%;
			min-width: 0;
		}
		&__title {
			flex: 1 1 auto;
			min-width: 0;
		}
		&__right {
			flex: 1 1 100%;
			flex-wrap: wrap;
			justify-content: flex-end;
			gap: 6px;
		}
		&__body,
		&__body.is-preview-hidden {
			display: flex;
			flex-direction: column;
		}
		&__rail {
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			gap: 4px;
			padding: 8px 10px;
			border-right: 0;
			border-bottom: 1px solid var(--line);
			-webkit-overflow-scrolling: touch;
			scrollbar-width: none;
			&::-webkit-scrollbar {
				display: none;
			}
			.ss-rail-group {
				display: contents;
			}
			.ss-rail-group__head {
				display: none;
			}
			.ss-rail-group__items {
				display: contents;
			}
			button {
				flex: 0 0 auto;
				width: auto;
				justify-content: center;
				padding: 8px 12px;
				white-space: nowrap;
				span {
					display: inline;
				}
			}
		}
		&__main {
			min-width: 0;
			width: 100%;
		}
		&__main-head,
		&__main-body {
			padding-left: 14px;
			padding-right: 14px;
		}
		&__preview {
			width: 100%;
		}
	}
	.ss-admin .ss-preview__frame {
		padding: 14px;
	}
	/* Page header: actions drop under the title. */
	.ss-admin .ss-ph__inner {
		flex-wrap: wrap;
		gap: 8px 12px;
		padding-top: 8px;
		padding-bottom: 8px;
	}
	.ss-admin .ss-ph__end {
		flex: 1 1 100%;
		justify-content: space-between;
		gap: 8px;
	}
	.ss-admin .ss-ph__actions {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 6px;
	}
	.ss-admin .ss-ph__text p {
		display: none;
	}
	/* Tables: keep the row actions reachable. */
	.ss-admin .ss-dt__scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.ss-admin .ss-dt__toolbar {
		flex-wrap: wrap;
		gap: 8px;
	}
	.ss-admin .ss-dt__toolbar-end {
		flex-wrap: wrap;
	}
	.ss-admin .ss-dt__pager {
		flex-wrap: wrap;
		gap: 8px;
	}
	/* Settings / module navigation wraps. */
	.ss-admin .ss-settings__nav,
	.ss-admin .ss-tabs {
		flex-wrap: wrap;
	}
	/* Component / style pickers: 2 columns. */
	.ss-admin .ss-stylecards,
	.ss-admin .ss-comps:not(.ss-comps--stack),
	.ss-admin .ss-templates__grid,
	.ss-admin .ss-palette__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.ss-admin .components-modal__frame {
		width: calc(100% - 24px) !important;
		max-width: none !important;
	}
}
@media (max-width: 600px) {
	.ss-admin {
		.ss-stats {
			grid-template-columns: 1fr;
		}
		.ss-stylecards,
		.ss-comps:not(.ss-comps--stack),
		.ss-templates__grid,
		.ss-palette__grid,
		.ss-cards-grid,
		.ss-grid-2,
		.ss-grid-3 {
			grid-template-columns: 1fr;
		}
		.ss-main {
			padding: 14px 12px 32px;
		}
		.ss-card,
		.ss-panel,
		.ss-b-group {
			padding-left: 14px;
			padding-right: 14px;
		}
		.ss-field--row {
			flex-direction: column;
			align-items: stretch;
			.ss-field__control {
				width: 100%;
			}
		}
		.ss-comps--stack .ss-comp {
			grid-template-columns: auto 1fr;
			grid-template-areas: 'icon title' 'control control' 'desc desc';
			.ss-comp__control {
				justify-self: start;
			}
		}
		.ss-builder__right .components-button:not(.is-primary) span {
			display: none;
		}
		.ss-dt__search.components-search-control {
			width: 100%;
		}
		.ss-dt__row-actions {
			gap: 2px;
		}
		.ss-ph__title,
		.ss-ph h1 {
			font-size: 18px;
		}
	}
}
@media (max-width: 480px) {
	.ss-admin {
		.ss-builder__preview-devices button:not([aria-pressed='true']) {
			display: none;
		}
		.ss-dt__hide-phone {
			display: none;
		}
		.ss-segmented {
			flex-wrap: wrap;
			button {
				flex: 1 1 auto;
			}
		}
	}
}

/* ==========================================================================
   Setup wizard v2 — stepper with progress line, illustrations, embed cards
   ========================================================================== */
.ss-admin .ss-setup {
	padding: 32px 24px 48px;
	background:
		radial-gradient(900px 420px at 15% -10%, var(--brand-soft), transparent 60%),
		radial-gradient(700px 360px at 100% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%),
		var(--canvas);
	&__card {
		max-width: 1080px;
		overflow: hidden;
	}
	/* ---- header ---- */
	&__head {
		position: relative;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 24px;
		padding: 16px 22px 20px;
		@media (max-width: 760px) {
			grid-template-columns: 1fr auto;
			.ss-setup__steps {
				grid-column: 1 / -1;
				order: 3;
			}
		}
	}
	&__brand {
		gap: 10px;
		strong {
			font-size: 15px;
			letter-spacing: -0.01em;
		}
	}
	&__brand-badge {
		width: 34px;
		height: 34px;
		border-radius: 10px;
		display: grid;
		place-items: center;
		color: #fff;
		background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #22d3ee));
		box-shadow: 0 6px 16px -6px var(--brand);
	}
	&__steps {
		position: relative;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		gap: 0;
		margin: 0;
		max-width: 620px;
		justify-self: center;
		width: 100%;
		/* progress line behind the circles: from the first circle centre to the last */
		&::before,
		&::after {
			content: '';
			position: absolute;
			top: 17px;
			left: calc(100% / 8);
			right: calc(100% / 8);
			height: 3px;
			border-radius: 3px;
			background: var(--line);
		}
		&::after {
			right: auto;
			width: calc(75% * var(--ss-progress, 0));
			background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #22d3ee));
			transition: width 0.35s ease;
		}
		li {
			position: relative;
			z-index: 1;
			display: block;
			&.is-current .ss-setup__num {
				background: var(--brand);
				color: #fff;
				border-color: var(--brand);
				box-shadow: 0 0 0 5px var(--brand-soft);
				transform: scale(1.06);
			}
			&.is-current .ss-setup__step-label {
				color: var(--ink);
			}
			&.is-done .ss-setup__num {
				background: var(--brand);
				color: #fff;
				border-color: var(--brand);
			}
			&.is-done .ss-setup__step-label {
				color: var(--ink-2);
			}
		}
	}
	&__step {
		appearance: none;
		border: 0;
		background: transparent;
		padding: 0;
		margin: 0;
		font: inherit;
		color: inherit;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		width: 100%;
		cursor: default;
		&:not(:disabled) {
			cursor: pointer;
			&:hover .ss-setup__num {
				box-shadow: 0 0 0 5px var(--brand-soft);
			}
		}
	}
	&__num {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		border: 2px solid var(--line-strong);
		background: var(--surface);
		color: var(--ink-3);
		display: grid;
		place-items: center;
		font-size: 12px;
		transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	}
	&__step-text {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 1px;
		line-height: 1.2;
		text-align: center;
	}
	&__step-label {
		font-size: 12.5px;
		font-weight: 650;
		color: var(--ink-3);
	}
	&__step-hint {
		font-size: 11px;
		color: var(--ink-3);
		opacity: 0.8;
		@media (max-width: 900px) {
			display: none;
		}
	}
	&__skip {
		appearance: none;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 34px;
		padding: 0 6px 0 14px;
		border-radius: 999px;
		border: 1px solid var(--line);
		background: var(--surface);
		color: var(--ink-2);
		font: inherit;
		font-size: 13px;
		font-weight: 550;
		cursor: pointer;
		transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
		svg {
			width: 22px;
			height: 22px;
			padding: 4px;
			border-radius: 50%;
			background: var(--surface-2);
			color: var(--ink-3);
			transition: background 0.15s ease, color 0.15s ease;
		}
		&:hover {
			border-color: var(--line-strong);
			color: var(--ink);
			svg {
				background: var(--ink);
				color: #fff;
			}
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: 2px;
		}
	}
	&__done-pill {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 32px;
		padding: 0 12px;
		border-radius: 999px;
		background: var(--ok-soft);
		color: var(--ok);
		font-size: 13px;
		font-weight: 600;
	}
	&__bar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: -1px;
		height: 3px;
		background: var(--line);
		i {
			display: block;
			height: 100%;
			background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #22d3ee));
			transition: width 0.4s ease;
		}
	}
	/* ---- step intro with illustration ---- */
	&__intro {
		display: flex;
		align-items: center;
		gap: 24px;
		margin-bottom: 20px;
		h2 {
			margin: 4px 0 6px;
			font-size: 24px;
		}
		> p.ss-muted,
		p.ss-muted {
			margin: 0;
			max-width: 620px;
		}
		&--compact {
			margin-bottom: 14px;
			.ss-setup__art {
				width: 120px;
			}
		}
		@media (max-width: 640px) {
			flex-direction: column;
			align-items: flex-start;
			gap: 12px;
		}
	}
	&__art {
		flex: none;
		width: 150px;
		height: auto;
		color: var(--brand);
		filter: drop-shadow(0 10px 20px color-mix(in srgb, var(--brand) 18%, transparent));
	}
	&__kicker {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 11.5px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--brand);
		&--ok {
			color: var(--ok);
			padding: 4px 10px;
			border-radius: 999px;
			background: var(--ok-soft);
			letter-spacing: 0.04em;
			text-transform: none;
			font-size: 12px;
		}
	}
	&__hosts {
		list-style: none;
		margin: 12px 0 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		li {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			padding: 3px 9px;
			border-radius: 999px;
			border: 1px solid var(--line);
			background: var(--surface-2);
			font-size: 11.5px;
			font-weight: 550;
			color: var(--ink-2);
			svg {
				color: var(--brand);
			}
		}
	}
	&__foot-hint {
		font-size: 12.5px;
		color: var(--ink-3);
		text-align: center;
		flex: 1 1 auto;
		@media (max-width: 640px) {
			display: none;
		}
	}
	/* ---- done / embed ---- */
	&__celebrate {
		display: flex;
		align-items: center;
		gap: 24px;
		margin-bottom: 22px;
		h2 {
			margin: 8px 0 6px;
			font-size: 28px;
		}
		p.ss-muted {
			margin: 0;
		}
		.ss-setup__art {
			width: 150px;
		}
		@media (max-width: 640px) {
			flex-direction: column;
			align-items: flex-start;
		}
	}
	&__embed {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 14px;
		margin: 0 0 22px;
		@media (max-width: 900px) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		@media (max-width: 560px) {
			grid-template-columns: 1fr;
		}
	}
	.ss-embedcard {
		display: flex;
		gap: 14px;
		padding: 16px;
		border: 1px solid var(--line);
		border-radius: var(--r-md);
		background: var(--surface);
		transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
		&:hover {
			border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
			box-shadow: var(--shadow-md);
			transform: translateY(-1px);
		}
		&--wide {
			grid-column: 1 / -1;
			background: linear-gradient(135deg, var(--brand-soft), var(--surface) 55%);
			@media (max-width: 900px) {
				grid-column: 1 / -1;
			}
		}
		&__icon {
			flex: none;
			width: 40px;
			height: 40px;
			border-radius: 12px;
			display: grid;
			place-items: center;
			color: var(--brand);
			background: var(--brand-soft);
		}
		&__body {
			min-width: 0;
			flex: 1 1 auto;
			display: flex;
			flex-direction: column;
			gap: 6px;
			h4 {
				margin: 0;
				font-size: 14.5px;
			}
			p {
				margin: 0;
				font-size: 13px;
				color: var(--ink-2);
			}
			.ss-copy {
				margin-top: 6px;
				max-width: 420px;
			}
		}
		&__link {
			appearance: none;
			border: 0;
			background: transparent;
			padding: 0;
			margin-top: auto;
			align-self: flex-start;
			display: inline-flex;
			align-items: center;
			gap: 4px;
			font: inherit;
			font-size: 13px;
			font-weight: 600;
			color: var(--brand);
			cursor: pointer;
			text-decoration: none;
			svg {
				transition: transform 0.15s ease;
			}
			&:hover {
				color: var(--brand-ink, var(--brand));
				text-decoration: underline;
				svg {
					transform: translateX(2px);
				}
			}
		}
	}
	&__preview--done {
		position: static;
		margin-bottom: 22px;
		padding: 0;
		overflow: hidden;
		.ss-preview__canvas {
			padding: 24px;
			display: flex;
			justify-content: center;
			background:
				radial-gradient(600px 200px at 50% 0%, var(--brand-soft), transparent 70%),
				var(--canvas);
			> * {
				width: 100%;
				max-width: 560px;
			}
		}
	}
	&__preview-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 14px;
		border-bottom: 1px solid var(--line);
		background: var(--surface);
		font-size: 12.5px;
		font-weight: 600;
		color: var(--ink-2);
		span {
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}
		code {
			font-size: 12px;
			color: var(--ink-3);
			background: var(--surface-2);
			padding: 2px 8px;
			border-radius: 999px;
		}
	}
	&__actions {
		flex-wrap: wrap;
		.components-button {
			min-height: 40px;
		}
	}
	&__body--done {
		padding-bottom: 32px;
	}
}

/* ==========================================================================
   Builder preview zoom (fit to window / fixed factors) + rail minimize
   ========================================================================== */
.ss-admin .ss-preview__zoombar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--surface);
	&::before {
		content: attr(data-label);
		font-size: 12px;
		font-weight: 550;
		color: var(--ink-3);
		white-space: nowrap;
	}
}
.ss-admin .ss-preview__zoom {
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 2px;
	border-radius: 10px;
	background: var(--surface-2);
	border: 1px solid var(--line-2);
	button,
	select {
		appearance: none;
		-webkit-appearance: none;
		height: 26px;
		min-height: 0;
		margin: 0;
		border: 0;
		border-radius: 8px;
		background: transparent;
		box-shadow: none;
		color: var(--ink-2);
		font: inherit;
		line-height: 1;
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease;
		&:hover {
			background: var(--surface);
			color: var(--ink);
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: -1px;
		}
	}
	button {
		display: grid;
		place-items: center;
		width: 28px;
		padding: 0;
		.ss-i {
			width: 16px;
			height: 16px;
			fill: currentColor;
		}
		&:disabled {
			opacity: 0.35;
			cursor: default;
			background: transparent;
		}
		&.is-active {
			background: var(--brand);
			color: #fff;
		}
		&:last-child {
			margin-left: 2px;
		}
	}
	select {
		min-width: 92px;
		padding: 0 20px 0 10px;
		font-size: 12px;
		font-weight: 650;
		font-variant-numeric: tabular-nums;
		text-align: center;
		text-align-last: center;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237b8090' stroke-width='1.6' stroke-linecap='round'/></svg>");
		background-repeat: no-repeat;
		background-position: right 7px center;
		&:hover {
			background-color: var(--surface);
		}
	}
}
/* The JS sets --scale (fit or fixed); the wrap reserves the scaled box so the stage scrolls correctly. */
.ss-admin .ss-preview__frame-wrap {
	position: relative;
	max-width: 100%;
	margin: 0 auto;
	overflow: visible;
	.ss-preview__frame {
		position: absolute;
		top: 0;
		left: 0;
		transform: scale(var(--scale, 1));
		transform-origin: top left;
		margin: 0;
	}
}
.ss-admin .ss-preview__stage {
	display: flex;
	flex-direction: column;
	align-items: center;
	&.is-zoomed {
		align-items: flex-start;
		.ss-preview__frame-wrap {
			margin: 0 auto;
		}
	}
	&.is-mobile .ss-preview__frame {
		width: var(--frame-w);
		transform: scale(var(--scale, 1));
		margin: 0;
	}
}

/* ---- Rail: group headers, minimize toggle, tooltips ---- */
.ss-admin .ss-builder__rail {
	position: relative;
	padding-top: 46px;
}
.ss-admin .ss-rail__toggle {
	appearance: none;
	position: absolute;
	top: 12px;
	right: 10px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--surface);
	color: var(--ink-3);
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	.ss-i {
		width: 14px;
		height: 14px;
		fill: currentColor;
	}
	&:hover {
		background: var(--brand);
		border-color: var(--brand);
		color: #fff;
		transform: scale(1.08);
	}
	&:focus-visible {
		outline: 2px solid var(--brand);
		outline-offset: 2px;
	}
}
.ss-admin .ss-rail-group {
	position: relative;
	+ .ss-rail-group {
		border-top: 0;
		padding-top: 8px;
	}
	.ss-rail-group__head {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		margin: 0 0 4px;
		padding: 7px 8px 7px 10px;
		border: 0;
		border-radius: var(--r-sm);
		background: var(--surface-2);
		color: var(--ink-2);
		font: inherit;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		line-height: 1;
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease;
		&::before {
			content: '';
			width: 3px;
			height: 12px;
			border-radius: 3px;
			background: var(--line-strong);
			flex: none;
			transition: background 0.15s ease;
		}
		&:hover {
			background: var(--brand-soft);
			color: var(--brand-ink);
			&::before {
				background: var(--brand);
			}
		}
		&:focus-visible {
			outline: 2px solid var(--brand);
			outline-offset: -2px;
		}
	}
	&.has-active .ss-rail-group__head {
		color: var(--ink);
		&::before {
			background: var(--brand);
		}
	}
	.ss-rail-group__label {
		flex: 1 1 auto;
		text-align: left;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ss-rail-group__count {
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		border-radius: 999px;
		background: var(--surface);
		color: var(--ink-3);
		font-size: 10.5px;
		font-weight: 650;
		letter-spacing: 0;
		display: inline-grid;
		place-items: center;
	}
	.ss-rail-group__chev {
		display: inline-grid;
		place-items: center;
		width: 18px;
		height: 18px;
		color: var(--ink-3);
		.ss-i {
			width: 14px;
			height: 14px;
			fill: currentColor;
			transition: transform 0.18s ease;
			transform: rotate(0deg);
		}
	}
	&.is-closed .ss-rail-group__chev .ss-i {
		transform: rotate(-90deg);
	}
	.ss-rail-group__items {
		padding: 2px 0 4px;
		button {
			border-radius: var(--r-sm);
		}
	}
}
@media (min-width: 961px) {
	.ss-admin .ss-builder__body.is-rail-mini {
		grid-template-columns: 64px minmax(0, 1fr) 480px;
		&.is-preview-hidden {
			grid-template-columns: 64px minmax(0, 1fr);
		}
		.ss-builder__rail {
			padding-left: 8px;
			padding-right: 8px;
			padding-top: 46px;
			overflow: visible;
		}
		.ss-rail__toggle {
			right: auto;
			left: 50%;
			margin-left: -13px;
			top: 12px;
		}
		.ss-rail-group__head {
			height: 1px;
			margin: 6px 6px;
			padding: 0;
			overflow: hidden;
			background: var(--line-2);
			border-radius: 0;
			pointer-events: none;
			&::before,
			span {
				display: none;
			}
		}
		.ss-rail-group:first-of-type .ss-rail-group__head {
			display: none;
		}
		.ss-rail-group + .ss-rail-group {
			padding-top: 0;
		}
		.ss-rail-group__items button {
			justify-content: center;
			padding: 10px 0;
			span {
				display: none;
			}
		}
	}
}
@media (max-width: 1100px) {
	.ss-admin .ss-builder__body.is-rail-mini {
		grid-template-columns: 56px minmax(0, 1fr) 380px;
		&.is-preview-hidden {
			grid-template-columns: 56px minmax(0, 1fr);
		}
	}
	.ss-admin .ss-builder__rail .ss-rail-group__head {
		height: 1px;
		margin: 6px 6px;
		padding: 0;
		overflow: hidden;
		background: var(--line-2);
		border-radius: 0;
		pointer-events: none;
		&::before,
		span {
			display: none;
		}
	}
}
@media (max-width: 960px) {
	.ss-admin .ss-rail__toggle {
		display: none;
	}
}

/* Styled tooltips (shared bubble from player/tooltip.ts; admin copy of the frontend styles). */
.ss-tip {
	position: fixed;
	z-index: 100000;
	max-width: 260px;
	padding: 6px 10px;
	border-radius: 8px;
	background: #111827;
	color: #fff;
	font: 500 12px/1.35 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	letter-spacing: 0.01em;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
	pointer-events: none;
	opacity: 0;
	transform: translateY(3px) scale(0.98);
	transition: opacity 0.14s ease, transform 0.14s ease;
	white-space: nowrap;
	&.is-on {
		opacity: 1;
		transform: none;
	}
	&.is-below {
		transform: translateY(-3px) scale(0.98);
		&.is-on {
			transform: none;
		}
	}
	&.is-right {
		transform: translateX(-3px) scale(0.98);
		&.is-on {
			transform: none;
		}
	}
	.ss-tip__text {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.ss-tip__arrow {
		position: absolute;
		top: 100%;
		width: 10px;
		height: 10px;
		margin-left: -5px;
		background: inherit;
		clip-path: polygon(0 0, 100% 0, 50% 60%);
	}
	&.is-below .ss-tip__arrow {
		top: auto;
		bottom: 100%;
		clip-path: polygon(50% 40%, 100% 100%, 0 100%);
	}
	&.is-right .ss-tip__arrow {
		top: 0;
		left: auto;
		right: 100%;
		margin-left: 0;
		margin-top: -5px;
		clip-path: polygon(100% 0, 100% 100%, 40% 50%);
	}
}
body[data-theme='dark'] .ss-tip {
	background: #f3f4f8;
	color: #111827;
}

/* ==========================================================================
   Builder v3 — design-canvas spec (type, spacing, colours)
   Tokens from the approved mockup; scoped to the builder page only.
   ========================================================================== */
.ss-admin.ss-admin--builder,
.ss-admin .ss-builder {
	--b-canvas: #f4f5f9;
	--b-surface: #ffffff;
	--b-surface-2: #f1f2f7;
	--b-rail: #fbfbfd;
	--b-line: #e6e8f0;
	--b-line-2: #eef0f5;
	--b-ink: #15172b;
	--b-ink-2: #4b4f63;
	--b-ink-3: #7b8090;
	--b-ink-4: #9a9fb0;
	--b-brand: #5b4df0;
	--b-brand-ink: #3e30c9;
	--b-brand-soft: #ece9ff;
	--b-ok: #1f8a4c;
	--b-ok-soft: #e9f7ee;
	--b-warn: #a35a00;
	--b-warn-soft: #fff4e0;
}
body[data-theme='dark'] .ss-admin .ss-builder {
	--b-canvas: #0f1117;
	--b-surface: #161925;
	--b-surface-2: #1c2030;
	--b-rail: #161925;
	--b-line: #262a3a;
	--b-line-2: #202432;
	--b-ink: #ffffff;
	--b-ink-2: #e7e9f2;
	--b-ink-3: #8a90a2;
	--b-ink-4: #5f647a;
	--b-brand: #6d5dfc;
	--b-brand-ink: #c4bcff;
	--b-brand-soft: rgba(109, 93, 252, 0.22);
	--b-ok: #4ade80;
	--b-ok-soft: rgba(34, 163, 91, 0.15);
	--b-warn: #fbbf24;
	--b-warn-soft: rgba(245, 158, 11, 0.16);
}

.ss-admin .ss-builder {
	font-size: 13px;
	color: var(--b-ink);

	/* ---- top bar ---- */
	&__top {
		height: 56px;
		min-height: 56px;
		padding: 0 16px;
		gap: 12px;
		background: var(--b-surface);
		border-bottom: 1px solid var(--b-line);
	}
	&__left {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		flex: 1 1 auto;
	}
	&__right {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	&__back.components-button {
		width: 34px;
		height: 34px;
		min-width: 34px;
		padding: 0;
		border-radius: 10px;
		border: 1px solid var(--b-line);
		background: var(--b-surface);
		color: var(--b-ink-2);
		&:hover {
			background: var(--b-surface-2);
			color: var(--b-ink);
		}
	}
	&__crumb {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 13px;
		color: var(--b-ink-3);
		white-space: nowrap;
		i {
			font-style: normal;
			color: var(--b-ink-4);
		}
	}
	&__title {
		height: 34px;
		max-width: 320px;
		padding: 0 6px 0 10px;
		border: 1px solid transparent;
		border-radius: 10px;
		background: transparent;
		box-shadow: none;
		font-size: 14px;
		font-weight: 650;
		color: var(--b-ink);
		&:hover {
			border-color: var(--b-line);
		}
		&:focus {
			border-color: var(--b-brand);
			box-shadow: 0 0 0 3px var(--b-brand-soft);
			background: var(--b-surface);
			outline: 0;
		}
	}
	&__title-pen {
		color: var(--b-ink-4);
		margin-left: -4px;
		flex: none;
		fill: currentColor;
	}
	&__status {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 24px;
		padding: 0 10px;
		border-radius: 999px;
		font-size: 11.5px;
		font-weight: 650;
		white-space: nowrap;
		i {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: currentColor;
		}
		&.is-saved {
			background: var(--b-ok-soft);
			color: var(--b-ok);
		}
		&.is-dirty {
			background: var(--b-warn-soft);
			color: var(--b-warn);
		}
		&.is-new {
			background: var(--b-brand-soft);
			color: var(--b-brand-ink);
		}
	}
	&__history {
		display: inline-flex;
		align-items: center;
		height: 34px;
		padding: 2px;
		gap: 2px;
		border-radius: 10px;
		background: var(--b-surface-2);
		.components-button {
			width: 30px;
			height: 30px;
			min-width: 30px;
			padding: 0;
			border-radius: 8px;
			color: var(--b-ink-2);
			&:hover:not(:disabled) {
				background: var(--b-surface);
				color: var(--b-ink);
			}
			&:disabled {
				color: var(--b-ink-4);
				opacity: 1;
			}
		}
	}
	&__preview-toggle.components-button {
		width: 34px;
		height: 34px;
		border-radius: 10px;
		color: var(--b-ink-2);
		&[aria-pressed='true'] {
			background: var(--b-brand-soft);
			color: var(--b-brand-ink);
		}
	}
	&__right .components-button.is-secondary {
		height: 34px;
		min-height: 34px;
		padding: 0 12px;
		border-radius: 10px;
		border: 1px solid var(--b-line);
		box-shadow: none;
		background: var(--b-surface);
		color: var(--b-ink-2);
		font-size: 13px;
		font-weight: 600;
		&:hover:not(:disabled) {
			background: var(--b-surface-2);
			color: var(--b-ink);
			border-color: var(--b-line);
		}
	}
	&__newtab.components-button.is-secondary {
		width: 34px;
		min-width: 34px;
		padding: 0;
	}
	&__right .components-button.is-primary {
		height: 34px;
		min-height: 34px;
		padding: 0 14px;
		border-radius: 10px;
		background: var(--b-brand);
		font-size: 13px;
		font-weight: 650;
		box-shadow: 0 6px 16px -8px var(--b-brand);
		&:hover:not(:disabled) {
			background: var(--b-brand-ink);
		}
	}

	/* ---- body / rail ---- */
	&__body {
		background: var(--b-canvas);
		grid-template-columns: 232px minmax(0, 1fr) 460px;
	}
	&__body.is-preview-hidden {
		grid-template-columns: 232px minmax(0, 1fr);
	}
	&__rail {
		background: var(--b-rail);
		border-right: 1px solid var(--b-line);
		padding: 14px 12px 20px;
		gap: 4px;
		.ss-rail__toggle {
			top: 12px;
			right: 10px;
			border-color: var(--b-line);
			background: var(--b-surface);
			color: var(--b-ink-3);
		}
		.ss-rail-group {
			padding-top: 0;
			+ .ss-rail-group {
				padding-top: 4px;
			}
			&:first-of-type .ss-rail-group__head {
				margin-top: 30px;
			}
		}
		.ss-rail-group__head {
			margin: 0 0 4px;
			padding: 6px 10px 10px;
			gap: 8px;
			background: transparent;
			border-radius: 0;
			color: var(--b-ink-3);
			font-size: 10.5px;
			font-weight: 700;
			letter-spacing: 0.1em;
			&::before {
				display: none;
			}
			&::after {
				content: '';
				order: 2;
				flex: 1 1 auto;
				height: 1px;
				background: var(--b-line);
			}
			&:hover {
				background: transparent;
				color: var(--b-ink-2);
			}
		}
		.ss-rail-group__label {
			order: 1;
			flex: 0 0 auto;
		}
		.ss-rail-group__count {
			display: none;
		}
		.ss-rail-group__chev {
			order: 3;
			width: 16px;
			height: 16px;
			color: var(--b-ink-4);
			.ss-i {
				width: 13px;
				height: 13px;
			}
		}
		.ss-rail-group.has-active .ss-rail-group__head {
			color: var(--b-brand);
		}
		.ss-rail-group__items {
			padding: 0;
			gap: 4px;
			button {
				position: relative;
				height: 38px;
				padding: 0 10px 0 12px;
				border-radius: 10px;
				gap: 10px;
				font-size: 13.5px;
				font-weight: 550;
				color: #3a3d4e;
				.ss-i {
					width: 17px;
					height: 17px;
				}
				&:hover {
					background: var(--b-surface-2);
					color: var(--b-ink);
				}
				&.is-active {
					background: var(--b-brand-soft);
					color: var(--b-brand-ink);
					font-weight: 650;
					&::before {
						content: '';
						position: absolute;
						left: 0;
						top: 10px;
						bottom: 10px;
						width: 3px;
						border-radius: 3px;
						background: var(--b-brand);
					}
				}
			}
		}
	}
	.ss-rail__help {
		margin-top: auto;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 12px;
		border-radius: 12px;
		background: var(--b-surface);
		border: 1px solid var(--b-line);
		text-decoration: none;
		color: var(--b-ink);
		transition: border-color 0.15s ease;
		&:hover {
			border-color: var(--b-brand);
		}
		&-icon {
			flex: none;
			width: 30px;
			height: 30px;
			border-radius: 9px;
			background: var(--b-brand-soft);
			color: var(--b-brand);
			display: inline-grid;
			place-items: center;
			.ss-i {
				fill: currentColor;
			}
		}
		&-text {
			display: flex;
			flex-direction: column;
			gap: 1px;
			font-size: 12px;
			line-height: 1.3;
			strong {
				font-weight: 650;
			}
			span {
				color: var(--b-brand);
			}
		}
	}

	/* ---- main ---- */
	&__main {
		padding: 28px 36px 40px;
		background: var(--b-canvas);
	}
	&__main-head {
		margin-bottom: 20px;
		max-width: 760px;
		h2 {
			margin: 0 0 4px;
			font-size: 22px;
			font-weight: 750;
			letter-spacing: -0.02em;
			color: var(--b-ink);
		}
		p {
			margin: 0;
			font-size: 13.5px;
			color: #6b7083;
		}
	}
	&__main-body {
		max-width: 760px;
		gap: 20px;
		> .ss-b-attach,
		> .ss-stylecards {
			gap: 20px;
		}
	}
	.ss-b-group {
		background: var(--b-surface);
		border: 1px solid var(--b-line);
		border-radius: 16px;
		padding: 22px 24px;
		box-shadow: 0 1px 2px rgba(21, 23, 43, 0.03);
		&__head {
			margin-bottom: 14px;
			h3 {
				font-size: 15px;
				font-weight: 650;
				color: var(--b-ink);
			}
			p {
				font-size: 12.5px;
				color: var(--b-ink-3);
			}
		}
	}

	/* ---- preview ---- */
	&__preview {
		background: var(--b-surface);
		border-left: 1px solid var(--b-line);
	}
	.ss-preview__bar {
		height: auto;
		min-height: 0;
		padding: 12px 16px;
		gap: 10px;
		border-bottom: 1px solid var(--b-line-2);
	}
	.ss-preview__title {
		font-size: 14px;
		font-weight: 650;
		color: var(--b-ink);
	}
	.ss-preview__icon {
		width: 26px;
		height: 26px;
		border-radius: 7px;
		background: var(--b-brand-soft);
		color: var(--b-brand);
	}
	.ss-preview__tools {
		gap: 8px;
		/* device buttons share one segmented pill; the theme toggle sits apart */
		button:not(.ss-preview__theme) {
			width: 32px;
			height: 28px;
			border-radius: 7px;
			color: var(--b-ink-3);
			.ss-i {
				width: 15px;
				height: 15px;
			}
			&:hover {
				background: var(--b-surface);
				color: var(--b-ink);
			}
			&.is-active {
				background: var(--b-surface);
				color: var(--b-brand);
				box-shadow: 0 1px 2px rgba(21, 23, 43, 0.08);
			}
			&:first-child {
				margin-left: 2px;
			}
			&:nth-last-child(2),
			&:last-child:not(.ss-preview__theme) {
				margin-right: 2px;
			}
		}
		/* segmented background drawn behind the device buttons */
		position: relative;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			height: 32px;
			width: calc(3 * 32px + 2 * 2px + 4px);
			border-radius: 9px;
			background: var(--b-surface-2);
			z-index: 0;
		}
		button {
			position: relative;
			z-index: 1;
			margin-top: 2px;
		}
		.ss-preview__theme {
			width: 32px;
			height: 32px;
			margin: 0 0 0 4px;
			border: 1px solid var(--b-line);
			border-radius: 9px;
			background: var(--b-surface);
			color: var(--b-ink-2);
			&::before {
				display: none;
			}
			&:hover {
				background: var(--b-surface-2);
			}
		}
	}
	.ss-preview__zoombar {
		padding: 8px 16px;
		border-bottom: 1px solid var(--b-line-2);
		&::before {
			font-size: 12px;
			color: var(--b-ink-3);
		}
	}
	.ss-preview__zoom {
		height: 30px;
		background: var(--b-surface-2);
		border-color: var(--b-line);
		select {
			color: var(--b-ink);
			font-weight: 500;
		}
		button.is-active {
			background: var(--b-brand);
		}
	}
	.ss-preview__stage {
		padding: 22px 18px;
		--stage-bg: var(--b-line-2);
	}
	.ss-preview__hint {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		padding: 10px 16px;
		border-top: 1px solid var(--b-line-2);
		background: var(--b-surface);
		font-size: 12px;
		color: #6b7083;
		> span {
			flex: 1 1 auto;
		}
	}
	.ss-preview__dot {
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #22a35b;
		box-shadow: 0 0 0 3px var(--b-ok-soft);
		flex: none;
	}
	.ss-preview__open {
		appearance: none;
		border: 0;
		background: transparent;
		padding: 0;
		display: inline-flex;
		align-items: center;
		gap: 5px;
		font: inherit;
		font-size: 12px;
		font-weight: 600;
		color: var(--b-brand);
		cursor: pointer;
		.ss-i {
			fill: currentColor;
		}
		&:hover {
			text-decoration: underline;
		}
	}
}
body[data-theme='dark'] .ss-admin .ss-builder {
	.ss-rail-group__items button {
		color: var(--b-ink-2);
	}
	.ss-builder__main-head p,
	.ss-preview__hint {
		color: var(--b-ink-3);
	}
	.ss-preview__stage {
		--stage-bg: #0f1117;
	}
}
@media (max-width: 1100px) {
	.ss-admin .ss-builder__body {
		grid-template-columns: 56px minmax(0, 1fr) 380px;
	}
	.ss-admin .ss-builder__crumb,
	.ss-admin .ss-builder__title-pen,
	.ss-admin .ss-rail__help {
		display: none;
	}
}
/* v3 re-asserts the minimized-rail rules it would otherwise outrank. */
@media (min-width: 961px) {
	.ss-admin .ss-builder .ss-builder__body.is-rail-mini {
		grid-template-columns: 64px minmax(0, 1fr) 460px;
		&.is-preview-hidden {
			grid-template-columns: 64px minmax(0, 1fr);
		}
		.ss-builder__rail {
			padding: 46px 10px 20px;
			.ss-rail__toggle {
				right: auto;
				left: 50%;
				margin-left: -13px;
			}
			.ss-rail-group:first-of-type .ss-rail-group__head {
				display: none;
			}
			.ss-rail-group__head {
				height: 1px;
				margin: 6px 6px;
				padding: 0;
				overflow: hidden;
				background: var(--b-line);
				pointer-events: none;
				&::after,
				span {
					display: none;
				}
			}
			.ss-rail-group__items button {
				justify-content: center;
				padding: 0;
				span {
					display: none;
				}
				&.is-active::before {
					display: none;
				}
			}
		}
		.ss-rail__help {
			padding: 8px;
			justify-content: center;
			.ss-rail__help-text {
				display: none;
			}
		}
	}
}

/* ==========================================================================
   Embed dialog v2 — matches the "Embed dialog" boards of the builder canvas.
   The modal is portalled outside .ss-admin, so it carries its own tokens.
   ========================================================================== */
.components-modal__frame.ss-em-modal {
	--e-surface: #ffffff;
	--e-surface-2: #f1f2f7;
	--e-soft: #f6f7fb;
	--e-field: #fafbfe;
	--e-rail: #fbfbfd;
	--e-line: #e6e8f0;
	--e-line-2: #eef0f5;
	--e-input: #dfe2ec;
	--e-ink: #15172b;
	--e-ink-2: #3a3d4e;
	--e-ink-3: #6b7083;
	--e-ink-4: #7b8090;
	--e-ink-5: #9a9fb0;
	--e-brand: #5b4df0;
	--e-brand-ink: #3e30c9;
	--e-brand-soft: #ece9ff;
	--e-brand-mid: #6b5fd6;
	--e-ok: #1f8a4c;
	--e-ok-soft: #e9f7ee;
	--e-warn: #a35a00;
	--e-warn-soft: #fff4e0;
	--e-danger: #c0362c;
	width: 960px;
	max-width: calc(100vw - 32px);
	height: 640px;
	max-height: calc(100vh - 48px);
	border-radius: 20px;
	overflow: hidden;
	background: var(--e-surface);
	box-shadow: 0 30px 80px -30px rgba(21, 23, 43, 0.45);
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 13px;
	color: var(--e-ink);
	.components-modal__content.components-modal__content,
	.components-modal__content.hide-header {
		padding: 0;
		margin: 0;
		height: 100%;
		overflow: hidden;
		&::before {
			display: none;
		}
	}
	.components-modal__children-container {
		height: 100%;
	}
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}
	h3,
	p {
		margin: 0;
	}
	code {
		background: none;
		padding: 0;
		font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	}
	.ss-i {
		fill: currentColor;
		flex: none;
	}
}
body[data-theme='dark'] .components-modal__frame.ss-em-modal {
	--e-surface: #161925;
	--e-surface-2: #1c2030;
	--e-soft: #1a1e2c;
	--e-field: #1c2030;
	--e-rail: #131622;
	--e-line: #262a3a;
	--e-line-2: #222636;
	--e-input: #2c3042;
	--e-ink: #ffffff;
	--e-ink-2: #e7e9f2;
	--e-ink-3: #a3a8b8;
	--e-ink-4: #8a90a2;
	--e-ink-5: #5f647a;
	--e-brand: #6d5dfc;
	--e-brand-ink: #c4bcff;
	--e-brand-soft: rgba(109, 93, 252, 0.22);
	--e-brand-mid: #b3a9ff;
	--e-ok: #4ade80;
	--e-ok-soft: rgba(34, 163, 91, 0.16);
	--e-warn: #fbbf24;
	--e-warn-soft: rgba(245, 158, 11, 0.16);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.ss-em-overlay {
	background: rgba(15, 17, 23, 0.45);
	backdrop-filter: blur(2px);
}

.ss-em {
	height: 100%;
	display: flex;
	flex-direction: column;
	&__head {
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 18px 22px 16px;
		border-bottom: 1px solid var(--e-line-2);
		flex: none;
	}
	&__badge {
		width: 36px;
		height: 36px;
		border-radius: 10px;
		background: var(--e-brand-soft);
		color: var(--e-brand);
		display: inline-grid;
		place-items: center;
		flex: none;
	}
	&__title {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		flex: 1 1 auto;
		strong {
			font-size: 16px;
			font-weight: 700;
			letter-spacing: -0.01em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		span {
			font-size: 12.5px;
			color: var(--e-ink-4);
		}
	}
	&__close {
		appearance: none;
		width: 32px;
		height: 32px;
		padding: 0;
		border-radius: 9px;
		border: 1px solid var(--e-line);
		background: var(--e-surface);
		color: var(--e-ink-3);
		display: inline-grid;
		place-items: center;
		cursor: pointer;
		flex: none;
		&:hover {
			background: var(--e-surface-2);
			color: var(--e-ink);
		}
		&:focus-visible {
			outline: 2px solid var(--e-brand);
			outline-offset: 2px;
		}
	}
	&__body {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
	}
	&__nav {
		width: 232px;
		flex: none;
		padding: 12px;
		background: var(--e-rail);
		border-right: 1px solid var(--e-line-2);
		display: flex;
		flex-direction: column;
		gap: 2px;
		overflow: auto;
		button {
			appearance: none;
			display: flex;
			align-items: center;
			gap: 10px;
			width: 100%;
			padding: 9px 10px;
			border: 0;
			border-radius: 10px;
			background: transparent;
			color: var(--e-ink-2);
			font: inherit;
			text-align: left;
			cursor: pointer;
			transition: background 0.15s ease;
			> i {
				width: 30px;
				height: 30px;
				border-radius: 8px;
				background: var(--e-surface-2);
				color: var(--e-brand);
				display: inline-grid;
				place-items: center;
				flex: none;
				transition: background 0.15s ease, color 0.15s ease;
			}
			> span {
				min-width: 0;
			}
			b {
				display: block;
				font-size: 13px;
				font-weight: 600;
				line-height: 1.2;
			}
			small {
				display: block;
				font-size: 11px;
				color: var(--e-ink-4);
				line-height: 1.25;
				margin-top: 1px;
			}
			&:hover {
				background: var(--e-surface-2);
			}
			&:focus-visible {
				outline: 2px solid var(--e-brand);
				outline-offset: -2px;
			}
			&.is-active {
				background: var(--e-brand-soft);
				color: var(--e-brand-ink);
				> i {
					background: var(--e-brand);
					color: #fff;
				}
				small {
					color: var(--e-brand-mid);
				}
			}
		}
	}
	&__panel {
		flex: 1 1 auto;
		min-width: 0;
		padding: 22px 24px 24px;
		overflow: auto;
		display: flex;
		flex-direction: column;
		gap: 16px;
		background: var(--e-surface);
	}
	&__ph {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 16px;
		h3 {
			margin: 0 0 3px;
			font-size: 17px;
			font-weight: 700;
			letter-spacing: -0.01em;
			color: var(--e-ink);
		}
		p {
			font-size: 13px;
			color: var(--e-ink-3);
			max-width: 60ch;
			line-height: 1.5;
		}
	}
}

/* ---- primitives ---- */
.ss-em-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid var(--e-line);
	background: var(--e-surface);
	color: var(--e-ink-2);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	&:hover:not(:disabled) {
		background: var(--e-surface-2);
		color: var(--e-ink);
	}
	&:focus-visible {
		outline: 2px solid var(--e-brand);
		outline-offset: 2px;
	}
	&:disabled {
		opacity: 0.55;
		cursor: default;
	}
	&.is-primary {
		background: var(--e-brand);
		border-color: var(--e-brand);
		color: #fff;
		box-shadow: 0 6px 16px -8px var(--e-brand);
		&:hover:not(:disabled) {
			background: var(--e-brand-ink);
			border-color: var(--e-brand-ink);
			color: #fff;
		}
	}
	&.is-ghost {
		border-color: transparent;
		background: transparent;
		color: var(--e-brand);
		padding: 0 8px;
		&:hover:not(:disabled) {
			background: var(--e-brand-soft);
			color: var(--e-brand-ink);
		}
	}
	&.is-lg {
		height: 40px;
		padding: 0 16px;
	}
	&.is-sm {
		height: 30px;
		padding: 0 10px;
		font-size: 12.5px;
	}
	.components-spinner {
		margin: 0;
		width: 14px;
		height: 14px;
	}
}
body[data-theme='dark'] .ss-em-modal .ss-em-btn.is-primary:hover:not(:disabled) {
	background: #5b4df0;
	border-color: #5b4df0;
}
.ss-em-link {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--e-brand);
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}
.ss-em-code {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 8px 8px 14px;
	border-radius: 12px;
	border: 1px solid var(--e-line);
	background: var(--e-field);
	min-width: 0;
	code {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 12.5px;
		line-height: 1.5;
		color: var(--e-ink);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		user-select: all;
	}
	button {
		appearance: none;
		flex: none;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		height: 30px;
		padding: 0 12px;
		border-radius: 8px;
		border: 1px solid var(--e-line);
		background: var(--e-surface);
		color: var(--e-brand);
		font: inherit;
		font-size: 12.5px;
		font-weight: 600;
		cursor: pointer;
		&:hover {
			background: var(--e-brand-soft);
		}
		&.is-copied {
			color: var(--e-ok);
			border-color: var(--e-ok);
			background: var(--e-ok-soft);
		}
	}
	&.is-large {
		padding: 10px 10px 10px 16px;
		code {
			font-size: 14px;
		}
	}
	&.is-wrap {
		align-items: flex-start;
		code {
			white-space: normal;
			word-break: normal;
			overflow-wrap: anywhere;
			font-size: 12px;
			line-height: 1.55;
			padding-top: 4px;
		}
	}
	&.is-compact {
		padding: 6px 6px 6px 10px;
		border-radius: 10px;
		code {
			font-size: 12px;
		}
		button {
			height: 26px;
			padding: 0 8px;
		}
	}
}
.ss-em-lbl {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-ink-4);
	small {
		font-size: 11.5px;
		font-weight: 500;
		letter-spacing: 0;
		text-transform: none;
	}
}
.ss-em-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.ss-em-hint,
.ss-em-docs {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 10px 12px;
	border-radius: 10px;
	background: var(--e-soft);
	font-size: 12.5px;
	color: var(--e-ink-3);
	line-height: 1.45;
	.ss-i {
		margin-top: 1px;
		color: var(--e-ink-4);
	}
}
.ss-em-docs {
	align-items: center;
	padding: 12px 14px;
	border-radius: 12px;
	> span {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		code {
			font-size: 12px;
			color: var(--e-ink-2);
		}
	}
	> a {
		font-weight: 600;
		color: var(--e-brand);
		white-space: nowrap;
		text-decoration: none;
	}
}
.ss-em-muted {
	font-size: 12.5px;
	color: var(--e-ink-3);
	line-height: 1.45;
}
.ss-em-seg {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 3px;
	border-radius: 10px;
	background: var(--e-surface-2);
	gap: 2px;
	flex: none;
	button {
		appearance: none;
		height: 30px;
		padding: 0 12px;
		border: 0;
		border-radius: 8px;
		background: transparent;
		color: var(--e-ink-3);
		font: inherit;
		font-size: 12.5px;
		font-weight: 600;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		white-space: nowrap;
		&:hover {
			color: var(--e-ink);
		}
		&.is-active {
			background: var(--e-surface);
			color: var(--e-ink);
			box-shadow: 0 1px 2px rgba(21, 23, 43, 0.08);
		}
		&:focus-visible {
			outline: 2px solid var(--e-brand);
			outline-offset: -2px;
		}
	}
}
body[data-theme='dark'] .ss-em-modal .ss-em-seg button.is-active {
	background: #2a2f44;
}
.ss-em-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid var(--e-line);
	background: var(--e-surface);
	font-size: 12px;
	font-weight: 600;
	color: var(--e-ink-2);
	&.is-mono {
		font: 600 11.5px ui-monospace, Menlo, monospace;
	}
	&.is-off {
		opacity: 0.5;
	}
}
.ss-em-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ss-em-tag {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--e-brand-ink);
	background: var(--e-brand-soft);
	padding: 2px 7px;
	border-radius: 999px;
}
.ss-em-status {
	font-size: 11px;
	font-weight: 650;
	padding: 3px 9px;
	border-radius: 999px;
	white-space: nowrap;
	flex: none;
	&.is-ok {
		color: var(--e-ok);
		background: var(--e-ok-soft);
	}
	&.is-warn {
		color: var(--e-warn);
		background: var(--e-warn-soft);
	}
	&.is-off {
		color: var(--e-ink-4);
		background: var(--e-surface-2);
	}
}
.ss-em-input,
.ss-em-select {
	height: 38px;
	min-height: 38px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--e-input);
	background: var(--e-surface);
	color: var(--e-ink);
	font: inherit;
	font-size: 13px;
	box-shadow: none;
	&:focus {
		outline: 0;
		border-color: var(--e-brand);
		box-shadow: 0 0 0 3px var(--e-brand-soft);
	}
}
.ss-em-modal select.ss-em-select {
	appearance: none;
	-webkit-appearance: none;
	height: 38px;
	min-height: 38px;
	line-height: 1.2;
	border-radius: 10px;
	border: 1px solid var(--e-input);
	background: var(--e-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237b8090' stroke-width='1.6' stroke-linecap='round'/></svg>") no-repeat right 12px center;
	color: var(--e-ink);
	font-size: 13px;
	padding: 0 32px 0 12px;
	box-shadow: none;
	&:hover {
		color: var(--e-ink);
	}
	&:focus {
		border-color: var(--e-brand);
		box-shadow: 0 0 0 3px var(--e-brand-soft);
		outline: 0;
	}
}
.ss-em-select {
	max-width: 180px;
	padding-right: 28px;
	&.is-block {
		max-width: none;
		width: 100%;
	}
}
.ss-em-input.is-suffix {
	display: flex;
	align-items: center;
	gap: 6px;
	input {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		background: transparent;
		padding: 0;
		box-shadow: none;
		color: inherit;
		font: inherit;
		min-height: 0;
		&:focus {
			outline: 0;
			box-shadow: none;
		}
	}
	em {
		font-style: normal;
		color: var(--e-ink-4);
	}
	&:focus-within {
		border-color: var(--e-brand);
		box-shadow: 0 0 0 3px var(--e-brand-soft);
	}
}
.ss-em-switch {
	appearance: none;
	position: relative;
	width: 36px;
	height: 20px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--e-input);
	cursor: pointer;
	flex: none;
	transition: background 0.15s ease;
	i {
		position: absolute;
		top: 2px;
		left: 2px;
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
		transition: left 0.15s ease;
	}
	&.is-on {
		background: var(--e-brand);
		i {
			left: 18px;
		}
	}
	&:focus-visible {
		outline: 2px solid var(--e-brand);
		outline-offset: 2px;
	}
}
.ss-em-error {
	padding: 10px 12px;
	border-radius: 10px;
	background: #fdeaea;
	color: var(--e-danger);
	font-size: 12.5px;
}
.ss-em-loading {
	display: grid;
	place-items: center;
	padding: 40px;
}
.ss-em-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--e-line-2);
}
.ss-em-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.ss-em-grid2,
.ss-em-grid3,
.ss-em-tiles,
.ss-em-cards2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.ss-em-grid3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ss-em-cards2 {
	gap: 12px;
}

/* ---- tiles / radios ---- */
.ss-em-tile {
	appearance: none;
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--e-line);
	background: var(--e-surface);
	color: var(--e-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	> i {
		width: 34px;
		height: 34px;
		border-radius: 9px;
		background: var(--e-surface-2);
		color: var(--e-brand);
		display: inline-grid;
		place-items: center;
		flex: none;
	}
	b {
		display: block;
		font-size: 13.5px;
		font-weight: 650;
	}
	small {
		display: block;
		font-size: 12px;
		color: var(--e-ink-4);
		margin-top: 1px;
	}
	&:hover {
		border-color: color-mix(in srgb, var(--e-brand) 45%, var(--e-line));
	}
	&.is-active {
		border-color: var(--e-brand);
		box-shadow: 0 0 0 3px var(--e-brand-soft);
		> i {
			background: var(--e-brand-soft);
		}
	}
	&:focus-visible {
		outline: 2px solid var(--e-brand);
		outline-offset: 2px;
	}
	&.is-stack {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding: 12px;
	}
	&__row {
		display: flex;
		align-items: center;
		gap: 8px;
		> span:first-child {
			flex: 1 1 auto;
		}
	}
}
.ss-em-radio {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var(--e-input);
	flex: none;
	margin-left: auto;
	.is-active & {
		border-color: var(--e-brand);
		background: var(--e-brand);
		box-shadow: inset 0 0 0 3px var(--e-surface);
	}
}

/* ---- preview ---- */
.ss-em-preview {
	display: flex;
	gap: 16px;
	align-items: stretch;
	&__side {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
		justify-content: center;
		align-items: flex-start;
		min-width: 0;
	}
}
.ss-em-thumb {
	position: relative;
	flex: 0 0 300px;
	height: 212px;
	border-radius: 14px;
	border: 1px solid var(--e-line);
	background: var(--e-line-2);
	overflow: hidden;
	iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 760px;
		height: 536px;
		border: 0;
		transform: scale(0.3934);
		transform-origin: top left;
		pointer-events: none;
	}
}

/* ---- add to page ---- */
.ss-em-pagepick {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.ss-em-search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 38px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid var(--e-input);
	background: var(--e-field);
	color: var(--e-ink-5);
	input {
		flex: 1 1 auto;
		min-width: 0;
		height: 36px;
		min-height: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		padding: 0;
		font: inherit;
		font-size: 13px;
		color: var(--e-ink);
		&:focus {
			outline: 0;
			box-shadow: none;
		}
		&::placeholder {
			color: var(--e-ink-5);
		}
	}
	&:focus-within {
		border-color: var(--e-brand);
		box-shadow: 0 0 0 3px var(--e-brand-soft);
	}
	.components-spinner {
		margin: 0;
	}
}
.ss-em-pages {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--e-line);
	border-radius: 12px;
	overflow: auto;
	max-height: 196px;
	li {
		margin: 0;
		+ li {
			border-top: 1px solid var(--e-line-2);
		}
	}
	button {
		appearance: none;
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 10px 12px;
		border: 0;
		border-left: 3px solid transparent;
		background: transparent;
		color: var(--e-ink);
		font: inherit;
		text-align: left;
		cursor: pointer;
		&:hover {
			background: var(--e-soft);
		}
		&.is-active {
			background: var(--e-brand-soft);
			border-left-color: var(--e-brand);
			.ss-em-pages__title {
				font-weight: 650;
			}
		}
	}
	&__title {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13px;
		font-weight: 550;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__path {
		font-size: 11.5px;
		color: var(--e-ink-4);
		max-width: 160px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	&__empty {
		padding: 16px 12px;
		text-align: center;
		color: var(--e-ink-4);
		font-size: 12.5px;
	}
}
.ss-em-done {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-align: center;
	padding: 24px;
	&__icon {
		width: 52px;
		height: 52px;
		border-radius: 50%;
		background: var(--e-ok-soft);
		color: var(--e-ok);
		display: grid;
		place-items: center;
		margin-bottom: 8px;
	}
	strong {
		font-size: 16px;
		font-weight: 700;
	}
	> span {
		font-size: 13px;
		color: var(--e-ink-3);
	}
	&__actions {
		display: flex;
		gap: 10px;
		margin-top: 14px;
	}
}

/* ---- block ---- */
.ss-em-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}
.ss-em-step {
	padding: 14px;
	border-radius: 14px;
	border: 1px solid var(--e-line);
	display: flex;
	flex-direction: column;
	gap: 10px;
	&__n {
		width: 26px;
		height: 26px;
		border-radius: 50%;
		background: var(--e-brand);
		color: #fff;
		font-size: 12px;
		font-weight: 700;
		display: inline-grid;
		place-items: center;
	}
	b {
		font-size: 13.5px;
		font-weight: 650;
	}
	> span:last-child {
		font-size: 12.5px;
		color: var(--e-ink-3);
		line-height: 1.45;
	}
}
.ss-em-blockdemo {
	border-radius: 14px;
	border: 1px solid var(--e-line);
	background: var(--e-soft);
	padding: 16px;
	display: flex;
	gap: 16px;
	align-items: center;
	&__text {
		display: flex;
		flex-direction: column;
		gap: 8px;
		min-width: 0;
		b {
			font-size: 13.5px;
			font-weight: 650;
		}
	}
}
.ss-em-inserter {
	flex: 0 0 240px;
	border-radius: 10px;
	background: var(--e-surface);
	border: 1px solid var(--e-line);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	&__search {
		display: flex;
		align-items: center;
		gap: 8px;
		height: 30px;
		padding: 0 10px;
		margin-bottom: 4px;
		border-radius: 8px;
		border: 1px solid var(--e-input);
		font-size: 12px;
		color: var(--e-ink-4);
	}
	&__item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 7px 8px;
		border-radius: 8px;
		font-size: 12px;
		color: var(--e-ink-3);
		i {
			width: 22px;
			height: 22px;
			border-radius: 6px;
			background: var(--e-line);
		}
		&.is-active {
			background: var(--e-brand-soft);
			color: var(--e-brand-ink);
			font-weight: 650;
			i {
				background: var(--e-brand);
			}
		}
	}
}

/* ---- shortcode ---- */
.ss-em-box {
	border-radius: 14px;
	border: 1px solid var(--e-line);
	overflow: hidden;
	&__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 14px;
		background: var(--e-soft);
		border-bottom: 1px solid var(--e-line);
		b {
			font-size: 13px;
		}
		span {
			font-size: 12px;
			color: var(--e-ink-4);
		}
	}
}
.ss-em-overrides {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ss-em-override {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	min-height: 62px;
	border-bottom: 1px solid var(--e-line-2);
	&:nth-child(odd) {
		border-right: 1px solid var(--e-line-2);
	}
	&:nth-last-child(-n + 2) {
		border-bottom: 0;
	}
	&__text {
		display: flex;
		flex-direction: column;
		gap: 1px;
		flex: 1 1 auto;
		min-width: 0;
		b {
			font-size: 13px;
		}
		small {
			font-size: 12px;
			color: var(--e-ink-4);
		}
	}
	&.is-on {
		background: color-mix(in srgb, var(--e-brand) 4%, transparent);
	}
	.ss-em-select {
		height: 32px;
		min-height: 32px;
		font-size: 12.5px;
		max-width: 150px;
	}
}

/* ---- sticky / external banners ---- */
.ss-em-banner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid var(--e-line);
	background: var(--e-soft);
	&__icon {
		width: 32px;
		height: 32px;
		border-radius: 9px;
		background: var(--e-warn-soft);
		color: var(--e-warn);
		display: inline-grid;
		place-items: center;
		flex: none;
	}
	&__text {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 13px;
		color: var(--e-ink-3);
		b {
			color: var(--e-ink);
			font-weight: 650;
		}
	}
	&.is-ok .ss-em-banner__icon {
		background: var(--e-ok-soft);
		color: var(--e-ok);
	}
}

/* ---- cards (theme code) ---- */
.ss-em-card {
	padding: 14px;
	border-radius: 14px;
	border: 1px solid var(--e-line);
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	&__head {
		display: flex;
		align-items: center;
		gap: 8px;
		i {
			width: 26px;
			height: 26px;
			border-radius: 7px;
			background: var(--e-brand-soft);
			color: var(--e-brand);
			display: inline-grid;
			place-items: center;
		}
		b {
			font-size: 13px;
		}
	}
	.ss-em-code {
		margin-top: auto;
	}
}

@media (max-width: 760px) {
	.components-modal__frame.ss-em-modal {
		height: calc(100vh - 32px);
	}
	.ss-em__body {
		flex-direction: column;
	}
	.ss-em__nav {
		width: auto;
		flex-direction: row;
		overflow-x: auto;
		border-right: 0;
		border-bottom: 1px solid var(--e-line-2);
		padding: 8px;
		button {
			width: auto;
			flex: none;
			small {
				display: none;
			}
		}
	}
	.ss-em-preview,
	.ss-em-blockdemo {
		flex-direction: column;
	}
	.ss-em-steps,
	.ss-em-grid3,
	.ss-em-overrides,
	.ss-em-tiles,
	.ss-em-cards2,
	.ss-em-grid2 {
		grid-template-columns: 1fr;
	}
	.ss-em-override:nth-child(odd) {
		border-right: 0;
	}
	.ss-em-override:nth-last-child(2) {
		border-bottom: 1px solid var(--e-line-2);
	}
}
/* Admin dark-theme form rules are global; keep the dialog's own field look in both schemes. */
body .components-modal__frame.ss-em-modal {
	select.ss-em-select {
		border-radius: 10px;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237b8090' stroke-width='1.6' stroke-linecap='round'/></svg>");
		background-repeat: no-repeat;
		background-position: right 12px center;
		background-color: var(--e-surface);
		border-color: var(--e-input);
		color: var(--e-ink);
	}
	.ss-em-input.is-suffix input[type='number'] {
		background: transparent;
		border: 0;
		box-shadow: none;
		color: var(--e-ink);
		height: 36px;
		-moz-appearance: textfield;
		&::-webkit-inner-spin-button,
		&::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}
}

/* Required-field error state for TextControl (skin name, etc.). */
.components-base-control.has-error {
	.components-text-control__input {
		border-color: var(--live);
		box-shadow: 0 0 0 1px var(--live);
	}
	.components-base-control__help {
		color: var(--live);
	}
}

/* Phones (≤ 600px): the builder's top bar wraps instead of covering the section strip, the section
   strip shows only its buttons (the group headers are empty there), and section headers with an
   action button wrap instead of pushing the page wider than the screen. */
@media (max-width: 600px) {
	.ss-admin .ss-builder__top {
		height: auto;
		min-height: 56px;
		flex-wrap: wrap;
		padding: 8px 12px;
	}
	.ss-admin .ss-builder__right {
		flex-wrap: wrap;
		justify-content: flex-end;
		row-gap: 8px;
	}
	.ss-admin .ss-builder__rail .ss-rail-group__head {
		display: none;
	}
	.ss-admin .ss-section__head {
		flex-wrap: wrap;
		row-gap: 8px;
	}
	.ss-admin .ss-section__aside {
		flex-wrap: wrap;
		max-width: 100%;
	}
	.ss-admin .ss-ph {
		flex-wrap: wrap;
		max-width: 100%;
		box-sizing: border-box;
	}
	.ss-admin .ss-ph > *,
	.ss-admin .ss-ph__end,
	.ss-admin .ss-ph__actions {
		flex-wrap: wrap;
		min-width: 0;
		max-width: 100%;
		row-gap: 8px;
	}
	.ss-admin .ss-cols > *,
	.ss-admin .ss-cols__main,
	.ss-admin .ss-list,
	.ss-admin .ss-row {
		min-width: 0;
		max-width: 100%;
	}
}

/* Builder preview: narrow layouts (widget, button, mini) sit centred in the device frame, so "fit"
   can zoom to the player and keep it in view; full-width layouts still fill the frame. */
.ss-admin .ss-preview__center-block > .streamsera,
.ss-admin .ss-preview__center-block > * > .streamsera {
	margin-left: auto;
	margin-right: auto;
}

/* Settings → page address: domain prefix · path · open-in-new-tab icon, one bordered field. */
.ss-admin .ss-urlfield {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 40px;
	border: 1px solid var(--line-strong);
	border-radius: 8px;
	background: var(--surface);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	&:focus-within {
		border-color: var(--brand);
		box-shadow: 0 0 0 3px var(--brand-soft);
	}
	&__prefix {
		display: flex;
		align-items: center;
		padding: 0 4px 0 12px;
		color: var(--ink-3);
		font-size: 13px;
		white-space: nowrap;
		max-width: 45%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	input.ss-urlfield__input {
		flex: 1 1 auto;
		min-width: 0;
		border: 0;
		box-shadow: none;
		background: transparent;
		padding: 0 8px 0 2px;
		min-height: 38px;
		font-size: 14px;
		color: var(--ink);
		outline: none;
		&:focus {
			box-shadow: none;
			outline: none;
		}
	}
	.ss-urlfield__prefix + input.ss-urlfield__input {
		padding-left: 0;
	}
	&:not(:has(.ss-urlfield__prefix)) input.ss-urlfield__input {
		padding-left: 12px;
	}
	&__open {
		flex: none;
		display: grid;
		place-items: center;
		width: 40px;
		border-left: 1px solid var(--line);
		color: var(--brand);
		text-decoration: none;
		transition: background 0.15s ease;
		&:hover,
		&:focus-visible {
			background: var(--brand-soft);
			outline: none;
		}
		&.is-disabled {
			color: var(--ink-3);
			opacity: 0.55;
			cursor: not-allowed;
			&:hover {
				background: transparent;
			}
		}
	}
}

/* The inner input must not draw its own box (WP / plugin input styles add border + radius + shadow). */
body .ss-admin .ss-urlfield input.ss-urlfield__input.ss-urlfield__input {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	background: transparent !important;
	margin: 0;
	height: auto;
}

/* Section titles with an icon tile (station editor, any page using <Section icon>) and the
   station editor's sidebar card titles. */
.ss-admin .ss-section__head--icon h2,
.ss-admin .ss-sidecard__title {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ss-admin .ss-sidecard__title .ss-section__icon {
	width: 26px;
	height: 26px;
}

/* Builder preview: every zoom level is centred and clipped to the pane (drag to pan when the
   zoomed player is wider) — never a horizontal scrollbar. */
.ss-admin .ss-preview__stage,
.ss-admin .ss-preview__stage.is-zoomed {
	align-items: center;
	overflow-x: hidden;
	.ss-preview__frame-wrap {
		margin: 0 auto;
		user-select: none;
		&:active {
			cursor: grabbing;
		}
	}
}

/* Settings → System status: the summary line is the expand/collapse toggle. */
.ss-admin button.ss-status__toggle {
	appearance: none;
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	border-radius: inherit;
	&:hover {
		background: var(--surface-2);
	}
	&:focus-visible {
		outline: 2px solid var(--brand);
		outline-offset: -2px;
	}
	&:not(.is-open) {
		border-bottom: 0;
	}
	.ss-status__chev {
		display: inline-flex;
		color: var(--ink-3);
		transition: transform 0.2s ease;
	}
	&.is-open .ss-status__chev {
		transform: rotate(180deg);
	}
}
/* Settings header: auto-save status in place of the Save button. */
.ss-admin .ss-autosave {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 36px;
	padding: 0 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	background: var(--surface-2);
	white-space: nowrap;
	&.is-saved {
		color: #1f8a4c;
		background: color-mix(in srgb, #22a35b 12%, transparent);
	}
	&.is-saving svg {
		animation: ss-spin 0.9s linear infinite;
	}
	svg {
		fill: currentColor;
	}
}