/* ContentStock editor interface styles. Runtime styles are loaded separately. */
:root {
	--cs-font-size-xs: .75rem;
	--cs-font-size-sm: .8125rem;
	--cs-font-size-base: .875rem;
	--cs-font-size-lg: 1rem;
	--cs-font-size-xl: 1.125rem;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--cs-color-bg);
	color: var(--cs-color-text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: var(--cs-font-size-base);
	line-height: 1.4;
}

code {
	padding: 1px 4px;
	border-radius: 4px;
	background: var(--cs-color-border-soft);
}

.app {
	min-height: 100vh;
	position: relative;
}

body.is-builder-busy .toolbar, body.is-builder-busy .sidebar, body.is-builder-busy .preview-wrap {
	user-select: none;
}

body.is-builder-busy .module-item, body.is-builder-busy .cms-block, body.is-builder-busy .js-drop-zone, body.is-builder-busy .toolbar-button {
	pointer-events: none;
}

body.is-builder-busy #builderBusyStatus, body.is-builder-busy #builderBusyStatus * {
	pointer-events: auto;
}

.app:has(.builder-save-status.is-saving) {
	pointer-events: none;
	opacity: .7;
}

.builder-save-status {
	&.is-clean {
		background: var(--cs-color-primary);
		color: #166534;
	}

	&.is-dirty {
		background: var(--cs-color-warning-urgent);
		border-color: var(--cs-color-warning-urgent);
	}

	&.is-saving {
		border-color: #BFDBFE;
		background: var(--cs-color-primary-soft);
		color: var(--cs-color-primary-hover);
		pointer-events: none;
	}

	&.is-error {
		border-color: #FECACA;
		background: #FEE2E2;
		color: #991B1B;
	}
}

[data-contentstock-toolbar-key="deployment_version"] {
	padding: 0 10px!important;
	background-color: var(--cs-color-primary)!important;
	color: var(--cs-color-on-primary)!important;
	text-align: center;
}

.sidebar {
	background: var(--cs-color-surface);
	border-right: 1px solid var(--cs-color-border);
	& .sidebar__header {
		padding: 20px;
		border-bottom: 1px solid var(--cs-color-border);
		& h1, & h2 {
			margin: 0 0 6px;
			font-size: var(--cs-font-size-xl);
		}

		& p {
			margin: 0;
			color: var(--cs-color-text-soft);
			font-size: var(--cs-font-size-base);
			line-height: 1.4;
		}
	}

	&.sidebar--left, &.sidebar--right {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 300px;
		z-index: 10000;
		/* Schatten nur bei sichtbarer Leiste, eingeklappt bleibt der linke Seitenrand frei. */
		&:is(:hover, .is-open, :has(:focus-visible)) {
			box-shadow: 0 0 100px rgba(0, 0, 0, .2);
		}
		& .sidebar__handle {
			display: block;
			width: 5rem;
			height: 5rem;
			position: absolute;
			top: 0;
			cursor: pointer;
			&::before {
				content: "";
				background-repeat: no-repeat;
				background-size: 60%;
				background-position: center center;
				display: block;
				width: 5rem;
				height: 5rem;
			}
		}

		&:hover {
			overflow: hidden;
			overflow-y: scroll;
		}

		&.sidebar--left {
			left: -300px;
			/* Öffnen per Hover, Klick auf den Griff (Touch) oder Tastaturfokus. */
			&:is(:hover, .is-open, :has(:focus-visible)) {
				left: 0px;
				overflow: hidden;
				overflow-y: auto;
			}

			& .sidebar__header {
				position: sticky;
				top: 0;
				z-index: 1;
				display: flex;
				gap: var(--cs-space-2);
				align-items: center;
				justify-content: space-between;
				padding: 14px 16px 14px 20px;
				background: var(--cs-color-surface);
				& .cs-brand--sidebar .cs-brand__logo {
					width: 190px;
				}
			}

			/* Griff: runder Button unten links an der rechten Kante der Leiste, wandert beim Öffnen mit. */
			& .sidebar__handle {
				top: auto;
				right: calc(-3rem - 1rem);
				bottom: 1rem;
				width: 3rem;
				height: 3rem;
				min-height: 0;
				padding: 0;
				border: 1px solid var(--cs-color-border);
				border-radius: 999px;
				background: var(--cs-color-surface);
				box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
				&::before {
					width: 100%;
					height: 100%;
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 10v10M20.5 9.5h-17M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6z'/%3E%3C/svg%3E");
				}
			}
		}

		&.sidebar--right {
			right: -300px;
			&:hover {
				right: 0px;
			}

			& .sidebar__handle {
				left: -5rem;
				&::before {
					background-size: 70%;
					background-image: url("../logo/svg/contentstock-mark.svg");
				}
			}
		}
	}
}

/* Modul-Leiste angeheftet (.is-locked, ab 1100px): eigene Spalte, nicht fixed; die Leiste scrollt für sich, der Editor wie bisher mit dem Fenster. */
@media (min-width: 1100px) {
	.app:has(> .sidebar--left.is-locked) {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		align-items: start;
		/* Feste Leisten am unteren Rand auf die Editorfläche zentrieren. */
		& :is(.move-mode-hint, :is(.drop-zone, .cms-block).is-selected > :is(.drop-zone__head, .cms-block__header) > .cms-block__actions) {
			left: calc(50% + 150px);
		}
	}

	.sidebar.sidebar--left.is-locked {
		position: sticky;
		top: 0;
		left: auto;
		height: 100vh;
		height: 100dvh;
		overflow: hidden;
		overflow-y: auto;
		box-shadow: none;
		z-index: 20;
		& .sidebar__handle {
			display: none;
		}
	}
}

/* Unter 1100px bleibt die Leiste ein Overlay; Anheften ist dort nicht möglich. */
@media (max-width: 1099px) {
	.sidebar__pin {
		display: none;
	}
}

.module-nav {
	padding: 16px;
}

.module-group {
	margin-bottom: var(--cs-space-2);
	& h2 {
		margin: 0 0 10px;
		font-size: var(--cs-font-size-sm);
		text-transform: uppercase;
		letter-spacing: .08em;
		color: var(--cs-color-text-soft);
	}
}

.module-item {
	display: block;
	width: 100%;
	margin: 0 0 10px;
	padding: 12px;
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-radius-lg);
	background: var(--cs-color-white);
	text-align: left;
	cursor: grab;
	box-shadow: var(--cs-shadow-sm);
	transition: border-color .15s, transform .15s, box-shadow .15s;
	&.palette-item--invalid {
		border: 1px solid red;
	}

	&:hover {
		border-color: var(--cs-color-primary);
		box-shadow: var(--cs-shadow-lg);
		transform: translateY(-1px);
	}

	&:active {
		cursor: grabbing;
	}

	& .module-item__title {
		display: block;
		font-weight: bold;
	}

	& .module-item__meta {
		display: block;
		margin-top: 3px;
		color: var(--cs-color-text-soft);
		font-size: var(--cs-font-size-sm);
	}
}

.preview-wrap {
	display: grid;
	grid-template-rows: auto 1fr;
	min-width: 0;
}

body.contentstock-is-readonly {
	.module-list, .module-palette {
		opacity: .55;
		pointer-events: none;
	}

	.cms-block {
		cursor: default;
	}

	.js-move-prev, .js-move-next, .js-delete-block, .js-relocate-block, .js-convert-block {
		display: none !important;
	}
}

.is-permission-denied {
	cursor: not-allowed;
}

/* BUILDER BUSY STATUS */
.builder-busy-status {
	position: fixed;
	inset: 0;
	z-index: 950000;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(2px);
	pointer-events: all;
	&[hidden] {
		display: none;
	}

	.builder-busy-status__progress {
		display: grid;
		gap: .35rem;
		margin-top: .55rem;
		&[hidden] {
			display: none;
		}
	}

	.builder-busy-status__progress-track {
		overflow: hidden;
		width: 100%;
		height: .55rem;
		border-radius: 999px;
		background: var(--cs-color-border-soft);
	}

	.builder-busy-status__progress-bar {
		width: 0;
		height: 100%;
		border-radius: inherit;
		background: var(--cs-color-primary);
		transition: width .2s ease;
	}

	.builder-busy-status__progress-text {
		color: var(--cs-color-text-muted);
		font-size: .68rem;
		font-weight: bold;
	}

	.builder-busy-status__box {
		display: flex;
		align-items: center;
		gap: 1rem;
		min-width: min(420px, calc(100vw - 48px));
		padding: 1rem;
		border: 1px solid var(--cs-color-border-soft);
		border-radius: var(--cs-radius-xl);
		background: var(--cs-color-white);
		box-shadow: 0 20px 60px rgba(15, 23, 42, .18);
		& .builder-busy-status__spinner {
			width: 2rem;
			height: 2rem;
			border: 3px solid rgba(15, 23, 42, .12);
			border-top-color: var(--cs-color-primary);
			border-radius: 999px;
			animation: builderBusySpin .75s linear infinite;
			flex: 0 0 auto;
		}
	}

	& .builder-busy-status__content {
		display: grid;
		gap: .2rem;
		width: min(34rem, calc(100vw - 8rem));
		& .builder-busy-status__title {
			font-size: .8rem;
			font-weight: bold;
			color: var(--cs-color-text);
		}

		& .builder-busy-status__text {
			font-size: .75rem;
			color: var(--cs-color-text-muted);
		}
	}
}

.preview.is-rebuilding {
	opacity: .55;
	pointer-events: none;
}

body.is-builder-busy {
	cursor: progress;
	& * {
		cursor: progress !important;
	}
}

@keyframes builderBusySpin {
	to {
		transform: rotate(360deg);
	}
}

/* /BUILDER BUSY STATUS */
/* PROJECT SETTINGS */
.project-settings-form {
	& .project-settings-section {
		min-width: 0;
		& + .project-settings-section {
			margin-top: var(--cs-space-6);
			padding-top: var(--cs-space-6);
			border-top: 1px solid var(--cs-color-border);
		}
	}

	& .project-settings-section__header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--cs-space-4);
		margin-bottom: var(--cs-space-4);
	}

	& .project-settings-section__actions {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: var(--cs-space-2);
	}

	& .project-settings-section__heading {
		display: grid;
		gap: var(--cs-space-1);
		min-width: 0;
		& h3, & p {
			margin: 0;
		}

		& h3 {
			color: var(--cs-color-text-strong);
			font-size: var(--cs-font-size-lg);
			line-height: 1.25;
		}

		& p {
			max-width: 58rem;
			color: var(--cs-color-text-soft);
			font-size: var(--cs-font-size-sm);
			line-height: 1.5;
		}
	}

	& .project-settings-form__grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--cs-space-4);
		margin-bottom: var(--cs-space-4);
	}

	& input[readonly] {
		background: var(--cs-color-surface-muted);
		color: var(--cs-color-text-muted);
	}

	& .project-settings-section > .cs-admin-field {
		margin-top: var(--cs-space-4);
	}
}

.project-settings-contract-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--cs-space-2) var(--cs-space-4);
	margin-bottom: var(--cs-space-3);
	padding: var(--cs-space-3);
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-radius-md);
	background: var(--cs-color-surface-muted);
	& .project-settings-contract-meta__item {
		display: inline-flex;
		align-items: center;
		gap: var(--cs-space-2);
		min-width: 0;
		font-size: var(--cs-font-size-sm);
	}
}

.project-settings-contract-badge {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 2px 8px;
	border: 1px solid var(--cs-color-border);
	border-radius: 999px;
	background: var(--cs-color-surface);
	color: var(--cs-color-text-muted);
	font-size: var(--cs-font-size-xs);
	font-weight: 600;
	line-height: 1.2;
}

.project-settings-contract-notice {
	margin: var(--cs-space-2) 0;
	padding: var(--cs-space-2) var(--cs-space-3);
	border-left: 3px solid var(--cs-color-border-strong, var(--cs-color-border));
	background: var(--cs-color-surface-muted);
	color: var(--cs-color-text-soft);
	font-size: var(--cs-font-size-sm);
	line-height: 1.45;
}

.project-settings-contract-grid {
	display: grid;
	gap: var(--cs-space-3);
	margin-top: var(--cs-space-4);
}

.project-settings-reconciliation {
	display: grid;
	gap: var(--cs-space-4);
	& .project-settings-reconciliation__empty {
		margin: 0;
		padding: var(--cs-space-3);
		border: 1px dashed var(--cs-color-border);
		border-radius: var(--cs-radius-md);
		color: var(--cs-color-text-soft);
		font-size: var(--cs-font-size-sm);
	}

	& .project-settings-reconciliation__state {
		display: flex;
		align-items: flex-start;
		gap: var(--cs-space-3);
		padding: var(--cs-space-3);
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-surface-muted);
		& > div {
			display: grid;
			gap: 3px;
		}

		& small {
			color: var(--cs-color-text-soft);
		}
	}

	& .project-settings-reconciliation__indicator {
		flex: 0 0 auto;
		width: 10px;
		height: 10px;
		margin-top: 5px;
		border-radius: 50%;
		background: var(--cs-color-text-muted);
	}

	&[data-state="aligned"] .project-settings-reconciliation__state {
		background: var(--cs-color-success-soft);
		& .project-settings-reconciliation__indicator {
			background: var(--cs-color-success);
		}
	}

	&[data-state="ready"] .project-settings-reconciliation__state, &[data-state="loading"] .project-settings-reconciliation__state {
		background: var(--cs-color-warning-soft);
		& .project-settings-reconciliation__indicator {
			background: var(--cs-color-warning);
		}
	}

	&[data-state="blocked"] .project-settings-reconciliation__state, &[data-state="unavailable"] .project-settings-reconciliation__state {
		background: var(--cs-color-danger-soft);
		& .project-settings-reconciliation__indicator {
			background: var(--cs-color-danger);
		}
	}

	& .project-settings-reconciliation__notice {
		margin: 0;
		padding: var(--cs-space-2) var(--cs-space-3);
		border-left: 3px solid var(--cs-color-warning);
		background: var(--cs-color-warning-soft);
		font-size: var(--cs-font-size-sm);
	}

	& .project-settings-reconciliation__group {
		display: grid;
		gap: var(--cs-space-2);
		& h4 {
			margin: 0;
			font-size: var(--cs-font-size-sm);
		}
	}

	& .project-settings-reconciliation__list {
		display: grid;
		gap: var(--cs-space-2);
	}

	& .project-settings-reconciliation__item {
		display: flex;
		align-items: flex-start;
		gap: var(--cs-space-2);
		padding: var(--cs-space-2) var(--cs-space-3);
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-sm);
		background: var(--cs-color-surface);
		& > span {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 24px;
			width: 24px;
			height: 24px;
			border-radius: 50%;
			background: var(--cs-color-surface-muted);
			font-weight: 700;
		}

		& > div {
			display: grid;
			gap: 2px;
			min-width: 0;
		}

		& small {
			color: var(--cs-color-text-soft);
		}
	}

	& .project-settings-reconciliation__item.is-operation > span {
		background: var(--cs-color-warning-soft);
		color: var(--cs-color-warning);
	}

	& .project-settings-reconciliation__item.is-blocker > span {
		background: var(--cs-color-danger-soft);
		color: var(--cs-color-danger);
	}

	& .project-settings-reconciliation__usage {
		display: grid;
		gap: 4px;
		margin: var(--cs-space-2) 0 0;
		padding-left: 18px;
		& li {
			display: grid;
			gap: 1px;
		}

		& span, & small {
			color: var(--cs-color-text-soft);
		}
	}

	& .project-settings-reconciliation__actions {
		display: flex;
		justify-content: flex-end;
	}
}

.project-settings-entitlement {
	display: grid;
	gap: var(--cs-space-3);
	padding: var(--cs-space-3);
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-radius-md);
	background: var(--cs-color-surface);
	& .project-settings-entitlement__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--cs-space-3);
	}

	& .project-settings-entitlement__values {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--cs-space-3);
	}

	& .project-settings-entitlement__values > div {
		display: grid;
		align-content: start;
		gap: var(--cs-space-1);
		min-width: 0;
	}

	& .project-settings-entitlement__values small {
		color: var(--cs-color-text-soft);
		font-size: var(--cs-font-size-xs);
		font-weight: 600;
	}

	& .project-settings-entitlement__value {
		min-height: 38px;
		padding: 8px 10px;
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-sm);
		background: var(--cs-color-surface-muted);
		overflow-wrap: anywhere;
		font-size: var(--cs-font-size-sm);
		line-height: 1.4;
	}

	& .project-settings-entitlement__value--effective {
		font-weight: 600;
	}

	& .project-settings-entitlement__override {
		display: flex;
		align-items: flex-start;
		gap: var(--cs-space-2);
		min-width: 0;
	}

	& .project-settings-entitlement__override > input, & .project-settings-entitlement__override > select, & .project-settings-entitlement__override > .project-settings-entitlement__choices {
		flex: 1 1 auto;
		min-width: 0;
	}

	& .project-settings-entitlement__clear {
		flex: 0 0 auto;
		min-width: 34px;
		padding-inline: 8px;
	}

	/* Auswahl-Optik aus admin-ui.css (.cs-admin-chips--compact); hier nur die Zeilenhöhe der Override-Zeile. */
	& .project-settings-entitlement__choices {
		align-items: center;
		min-height: 38px;
	}

	& .project-settings-entitlement__empty {
		color: var(--cs-color-text-soft);
		font-size: var(--cs-font-size-sm);
	}
}

.project-settings-languages__hint, .project-settings-extensions__hint, .project-settings-extension-empty {
	margin: var(--cs-space-3) 0 0;
	color: var(--cs-color-text-soft);
	font-size: var(--cs-font-size-sm);
}

.project-settings-language-list, .project-settings-extension-list {
	display: grid;
	gap: var(--cs-space-3);
}

.project-settings-language-row {
	display: grid;
	grid-template-columns: minmax(220px, 1.5fr) minmax(160px, 1fr) repeat(4, auto) minmax(190px, auto);
	align-items: end;
	gap: var(--cs-space-3);
	padding: var(--cs-space-3);
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-radius-md);
	background: var(--cs-color-white);
	& .settings-field {
		margin: 0;
	}

	& .project-settings-language-toggle {
		display: grid;
		justify-items: center;
		gap: 7px;
		padding: 0 6px 10px;
		font-size: var(--cs-font-size-sm);
		font-weight: bold;
		cursor: pointer;
		& input {
			width: 18px;
			height: 18px;
			margin: 0;
		}
	}

	& .project-settings-language-row__actions {
		display: flex;
		align-items: center;
		gap: 6px;
		padding-bottom: 2px;
		& .toolbar-button {
			white-space: nowrap;
		}
	}

	& .project-settings-language-row__remove {
		white-space: nowrap;
	}
}

.project-settings-extension-row {
	display: flex;
	align-items: center;
	gap: var(--cs-space-3);
	padding: var(--cs-space-3);
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-radius-md);
	background: var(--cs-color-white);
	cursor: pointer;
	& > input {
		flex: 0 0 auto;
		width: 18px;
		height: 18px;
		margin: 0;
	}

	& .project-settings-extension-row__content {
		display: grid;
		flex: 1;
		gap: 4px;
	}

	& .project-settings-extension-row__title {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	& .project-settings-extension-row__meta {
		color: var(--cs-color-text-soft);
		font-size: var(--cs-font-size-sm);
	}
}

.project-settings-extension-badge {
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--cs-color-surface-subtle, #eef2f7);
	color: var(--cs-color-text-soft);
	font-size: var(--cs-font-size-xs);
	font-weight: bold;
}

.project-settings-version {
	& .project-settings-version__content {
		margin-top: 0;
	}

	& .project-settings-version__package-hint {
		margin-bottom: var(--cs-space-3);
		color: var(--cs-color-text-muted);
		font-size: var(--cs-font-size-sm);
	}

	& .project-settings-version__package-status {
		display: none;
		margin-bottom: var(--cs-space-3);
		padding: .65rem .85rem;
		border-radius: .65rem;
		background: var(--cs-color-surface-muted);
		font-size: var(--cs-font-size-sm);
		&[data-state="loading"], &[data-state="success"], &[data-state="error"] {
			display: block;
		}

		&[data-state="success"] {
			background: var(--cs-color-success-soft);
			color: var(--cs-color-success);
		}

		&[data-state="error"] {
			background: var(--cs-color-danger-soft);
			color: var(--cs-color-danger);
		}
	}

	& .project-settings-version__summary {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}

	& .project-settings-version__version {
		padding: 1rem;
		border: 1px solid var(--cs-color-border);
		border-radius: .75rem;
		background: var(--cs-color-surface-muted);
		& strong {
			display: block;
			margin-top: .25rem;
			font-size: var(--cs-font-size-xl);
		}
	}

	& .project-settings-version__label {
		display: block;
		font-size: var(--cs-font-size-sm);
		opacity: .7;
	}

	& .project-settings-version__status {
		display: inline-block;
		margin-top: .35rem;
		border-radius: 999px;
		font-weight: bold;
		&.status-current {
			background: var(--cs-color-success-soft);
			color: var(--cs-color-success);
		}

		&.status-update {
			background: var(--cs-color-warning-soft);
			color: var(--cs-color-warning);
		}

		&.status-error {
			background: var(--cs-color-danger-soft);
			color: var(--cs-color-danger);
		}

		&.status-ahead, &.status-neutral {
			background: var(--cs-color-surface-muted);
			color: var(--cs-color-text-muted);
		}
	}

	& .project-settings-version__meta {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem 1rem;
		margin-top: 1rem;
		font-size: var(--cs-font-size-sm);
		opacity: .8;
	}

	& .project-settings-version__endpoint {
		flex-basis: 100%;
		font-family: monospace;
		overflow-wrap: anywhere;
	}

	& .project-settings-version__manual-update {
		margin-top: 1rem;
		padding: .75rem 1rem;
		border-radius: .75rem;
		background: var(--cs-color-surface-muted);
	}

	& .project-settings-version__changelog {
		margin-top: 1.5rem;
		& h4 {
			margin: 0 0 .75rem;
		}
	}

	& .project-settings-version__release {
		padding: 1rem 0;
		border-top: 1px solid var(--cs-color-border);
		& ul {
			margin: .75rem 0 0;
			padding-left: 1.25rem;
		}
	}

	& .project-settings-version__release-head {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: .5rem;
		& time {
			margin-left: auto;
			opacity: .7;
		}
	}

	& .project-settings-version__badge {
		padding: .15rem .45rem;
		border-radius: 999px;
		background: var(--cs-color-success-soft);
		color: var(--cs-color-success);
		font-size: var(--cs-font-size-xs);
		font-weight: bold;
	}

	& .project-settings-version__badge--installed {
		background: var(--cs-color-surface-muted);
		color: var(--cs-color-text-muted);
	}

	& .project-settings-version__loading, & .project-settings-version__error, & .project-settings-version__empty {
		padding: 1rem;
		border-radius: .75rem;
		background: var(--cs-color-surface-muted);
	}

	& .project-settings-version__error {
		display: flex;
		flex-direction: column;
		gap: .25rem;
		color: var(--cs-color-danger);
	}
}

@media (max-width: 950px) {
	.project-settings-language-row {
		grid-template-columns: 1fr 1fr;
		& .project-settings-language-toggle {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 0;
		}

		& .project-settings-language-row__actions {
			grid-column: 1 / -1;
		}
	}

	.project-settings-version {
		& .project-settings-version__summary {
			grid-template-columns: 1fr;
		}

		& .project-settings-version__release-head time {
			width: 100%;
			margin-left: 0;
		}
	}
}

@media (max-width: 700px) {
	.project-settings-form {
		& .project-settings-section__header {
			flex-direction: column;
		}

		& .project-settings-form__grid {
			grid-template-columns: 1fr;
		}
	}

	.project-settings-language-row {
		grid-template-columns: 1fr;
	}
}

/* /PROJECT SETTINGS */
.toolbar-button.js-focus-block {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 4h10v14a2 2 0 0 1-2 2H9m3-5l3-3m0 0l-3-3m3 3H5'/%3E%3C/svg%3E");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 40px;
	border: none;
	background-color: transparent;
	font-size: 0;
	position: relative;
	width: 50px;
	height: 50px;
	overflow: hidden;
	cursor: pointer;
	margin-bottom: -10px;
}

.preview-toolbar {
	position: sticky;
	top: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cs-space-4);
	padding: var(--cs-space-4) 1rem;
	min-height: 5rem;
	background: rgba(255, 255, 255, .9);
	border-bottom: 1px solid var(--cs-color-border);
	backdrop-filter: blur(10px);
	& strong {
		display: block;
	}

	& span {
		color: var(--cs-color-text-soft);
		font-size: 13px;
	}

	& .preview-toolbar__actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--cs-space-2);
		& select:has(option:first-child:last-child) {
			display: none;
		}

		& .toolbar-button--page-manager {
			display: grid;
			grid-template-columns: auto;
			gap: .05rem;
			align-content: center;
			min-width: 8rem;
			max-width: 13rem;
			padding: .3rem .75rem;
			padding-left: 60px;
			text-align: left;

			position: relative;
			overflow: hidden;
			border-color: var(--cs-color-primary);
			&::before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 50px;
				height: 100%;
				background-color: var(--cs-color-primary);

				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath fill='%23fff' d='M18.84 14.92V5.84c0-.9 0-1.36.22-1.63a1 1 0 0 1 .45-.32c.33-.12.76.04 1.61.34c.46.16.68.24.84.4a1 1 0 0 1 .2.29c.1.2.1.44.1.92v11.93c0 1.26 0 1.9-.35 2.2s-1.03.2-2.4-.01a16 16 0 0 0-6.33.3c-.58.14-1.18-.3-1.18-.9c0-.36.23-.69.58-.81l4.92-1.74c.65-.23.97-.34 1.16-.6s.18-.6.18-1.29' opacity='.2'/%3E%3Cpath fill='%23fff' d='m9.03 3.58l1.64.58c.64.23.96.35 1.15.6c.18.26.18.6.18 1.29v11.72c0 1.26 0 1.9-.35 2.2s-1.03.2-2.4-.01a16 16 0 0 0-4.76 0c-1.37.2-2.05.3-2.4 0s-.35-.93-.35-2.19V6.02c0-.85 0-1.27.25-1.55c.26-.29.67-.34 1.51-.44l4.61-.56c.24-.02.35-.04.47-.03s.22.06.45.14' opacity='.2'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6.87 3.12c2.2 0 3.65.59 4.43 1.03c.28.16.43.24.56.48s.14.44.14.86v12.25c0 1.27 0 1.9-.37 2.2s-1.04.17-2.38-.1c-.77-.16-1.6-.28-2.38-.28s-1.6.12-2.38.27c-1.34.28-2.01.41-2.38.11s-.37-.93-.37-2.2V6.35c0-.82 0-1.24.34-1.74s.6-.62 1.14-.83a10 10 0 0 1 3.65-.66m12.25.23c1.14.2 1.94.53 2.44.81c.28.15.42.23.56.47s.14.44.14.85v12.26c0 1.27 0 1.9-.37 2.2s-1.04.17-2.38-.1c-.77-.16-1.61-.28-2.38-.28c-.97 0-2.04.18-2.95.4c-.81.19-1.21.29-1.47.2a1 1 0 0 1-.57-.44c-.14-.24-.14-.62-.14-1.4'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M11.99 5.07s.5-2.14 3.24-3.2a8 8 0 0 1 2.75-.61c.37 0 .55 0 .84.29c.3.29.3.55.3 1.07v11.67c0 1.1 0 1.64-.22 1.9c-.22.28-.91.44-2.3.75q-.54.12-1.17.35a5.2 5.2 0 0 0-2.93 2.77'/%3E%3C/g%3E%3C/svg%3E");
				background-size: 30px;
				background-position: center center;
				background-repeat: no-repeat;
			}
			
			& .toolbar-button__label {
				color: var(--cs-color-text-soft, #64748b);
				font-size: .62rem;
				font-weight: bold;
				line-height: 1;
				text-transform: uppercase;
			}

			& .toolbar-button__value {
				overflow: hidden;
				color: inherit;
				font-size: .78rem;
				line-height: 1.3;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		& .toolbar-button--template-manager {
			display: grid;
			gap: .05rem;
			align-content: center;
			min-width: 7rem;
			max-width: 11rem;
			padding: .3rem .75rem;
			text-align: left;
			& .toolbar-button__label {
				color: var(--cs-color-text-soft, #64748b);
				font-size: .62rem;
				font-weight: bold;
				line-height: 1;
				text-transform: uppercase;
			}

			& .toolbar-button__value {
				overflow: hidden;
				font-size: .78rem;
				line-height: 1.3;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		& .toolbar-button--icon {
			font-size: 0;
			position: relative;
			width: 50px;
			height: 50px;
			overflow: hidden;
			&::before, &::after {
				content: "";
				display: block;
				width: 48px;
				height: 48px;
				background-position: center center;
				background-repeat: no-repeat;
				position: absolute;
				background-size: 40px;
			}

			&::before {
				inset: 0;
			}

			&::after {
				width: 25px;
				height: 25px;
				background-color: var(--cs-color-zone-soft);
				box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
				bottom: 0;
				right: 0;
				border-radius: var(--cs-radius-md) 0px 0 0;
				border: 1px dashed rgba(0, 0, 0, .7);
				border-right: none;
				border-bottom: none;
				background-size: 20px;
			}

			&[disabled] {
				display: none;
				pointer-events: none;
			}

			&#openProjectSettings {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20a10 10 0 0 0 0-20m6.92 6h-3.07a15.7 15.7 0 0 0-1.38-3.56A8.05 8.05 0 0 1 18.92 8M12 4c.83 1.2 1.47 2.54 1.85 4h-3.7A13.8 13.8 0 0 1 12 4M4.26 14A8 8 0 0 1 4 12c0-.69.09-1.36.26-2h3.39a16.4 16.4 0 0 0 0 4zm.82 2h3.07c.31 1.28.77 2.48 1.38 3.56A8.05 8.05 0 0 1 5.08 16m3.07-8H5.08a8.05 8.05 0 0 1 4.45-3.56A15.7 15.7 0 0 0 8.15 8M12 20a13.8 13.8 0 0 1-1.85-4h3.7A13.8 13.8 0 0 1 12 20m2.26-6H9.74a14.4 14.4 0 0 1 0-4h4.52a14.4 14.4 0 0 1 0 4m.21 5.56A15.7 15.7 0 0 0 15.85 16h3.07a8.05 8.05 0 0 1-4.45 3.56M16.35 14a16.4 16.4 0 0 0 0-4h3.39c.17.64.26 1.31.26 2s-.09 1.36-.26 2z'/%3E%3C/svg%3E");
				}

				&::after {
					display: none;
				}
			}

			&#openUserAdmin {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4s-4 1.79-4 4s1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4'/%3E%3C/svg%3E");
				}

				&::after {
					display: none;
				}
			}

			&#openMenuAdmin {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23030000' d='M15 32h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1m-3-2h2v-2h-2Z' class='clr-i-outline clr-i-outline-path-1'/%3E%3Cpath fill='%23030000' d='M15 16h-4a1 1 0 0 0-1 1v1.2H5.8V12H7a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h1.2v17.8h6.36a.8.8 0 0 0 0-1.6H5.8v-8.4H10V21a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1M4 8h2v2H4Zm10 12h-2v-2h2Z' class='clr-i-outline clr-i-outline-path-2'/%3E%3Cpath fill='%23030000' d='M34 9a1 1 0 0 0-1-1H10v2h23a1 1 0 0 0 1-1' class='clr-i-outline clr-i-outline-path-3'/%3E%3Cpath fill='%23030000' d='M33 18H18v2h15a1 1 0 0 0 0-2' class='clr-i-outline clr-i-outline-path-4'/%3E%3Cpath fill='%23030000' d='M33 28H18v2h15a1 1 0 0 0 0-2' class='clr-i-outline clr-i-outline-path-5'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
				}

				&::after {
					display: none;
				}
			}

			&#logoutEditor {
				background-color: rgba(0,0,0,.1);
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21V3h9v2H5v14h7v2zm13-4l-1.375-1.45l2.55-2.55H9v-2h8.175l-2.55-2.55L16 7l5 5z'/%3E%3C/svg%3E");
				}

				&::after {
					display: none;
				}
			}

			&#saveBuilderState {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M17.59 3.59c-.38-.38-.89-.59-1.42-.59H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7.83c0-.53-.21-1.04-.59-1.41zM12 19c-1.66 0-3-1.34-3-3s1.34-3 3-3s3 1.34 3 3s-1.34 3-3 3m1-10H7c-1.1 0-2-.9-2-2s.9-2 2-2h6c1.1 0 2 .9 2 2s-.9 2-2 2'/%3E%3C/svg%3E");
				}

				&::after {
					display: none;
				}
			}

			&#createPage {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cpath d='M36.91 3.486c2.546.223 4.45 2.212 4.627 4.762c.225 3.227.463 8.38.463 15.752s-.238 12.525-.463 15.752c-.177 2.55-2.081 4.539-4.627 4.762C34.12 44.76 29.885 45 24 45s-10.121-.24-12.91-.486c-2.546-.223-4.45-2.212-4.627-4.762C6.238 36.525 6 31.372 6 24s.238-12.525.463-15.752c.177-2.55 2.081-4.539 4.627-4.762C13.88 3.24 18.115 3 24 3s10.121.24 12.91.486M42 24H6'/%3E%3Cpath d='M41.45 40.418c-4.077-4.07-6.887-6.31-8.644-7.521c-1.42-.98-3.172-.82-4.495.29c-1.543 1.293-4.03 3.531-7.811 7.313a183 183 0 0 0-4.217 4.345M18 33a3 3 0 1 1-6 0a3 3 0 0 1 6 0m-5-16h22m-22-6.5h12'/%3E%3C/g%3E%3C/svg%3E");
				}

				&::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20 14h-6v6h-4v-6H4v-4h6V4h4v6h6z'/%3E%3C/svg%3E");
				}
			}

			&#openFormSubmissions {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='m14.878.282l.348 1.071a2.2 2.2 0 0 0 1.399 1.397l1.071.348l.021.006a.423.423 0 0 1 0 .798l-1.071.348a2.2 2.2 0 0 0-1.399 1.397l-.348 1.07a.423.423 0 0 1-.798 0l-.349-1.07a2.2 2.2 0 0 0-.532-.867a2.2 2.2 0 0 0-.866-.536l-1.071-.348a.423.423 0 0 1 0-.798l1.071-.348a2.2 2.2 0 0 0 1.377-1.397l.348-1.07a.423.423 0 0 1 .799 0m4.905 7.931l-.766-.248a1.58 1.58 0 0 1-.998-.999l-.25-.764a.302.302 0 0 0-.57 0l-.248.764a1.58 1.58 0 0 1-.984.999l-.765.248a.303.303 0 0 0 0 .57l.765.249a1.58 1.58 0 0 1 1 1.002l.248.764a.302.302 0 0 0 .57 0l.249-.764a1.58 1.58 0 0 1 .999-.999l.765-.248a.303.303 0 0 0 0-.57zM6.5 10a.5.5 0 1 1 0-1a.5.5 0 0 1 0 1m.5 3.5a.5.5 0 1 1-1 0a.5.5 0 0 1 1 0M6 3h4.105a1.5 1.5 0 0 0-.105.5a1.42 1.42 0 0 0 1 1.34l.489.16H5.5a.5.5 0 0 0 0 1h7.333l.317 1c.09.258.25.486.46.66q.2.148.44.21a1.3 1.3 0 0 0-.05.63a1.3 1.3 0 0 0 .099.5H9.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .433-.25l.727.23q.122.05.22.14a.6.6 0 0 1 .14.23l.24.76a1.35 1.35 0 0 0 .74.79V14a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3m.5 8a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3M8 13.5a1.5 1.5 0 1 0-3 0a1.5 1.5 0 0 0 3 0m1.5-.5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1z'/%3E%3C/svg%3E");
				}

				&::after {
					display: none;
				}
			}

			&#undoStep, &#redoStep {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='M3 9h18M9 21V9'/%3E%3C/g%3E%3C/svg%3E");
				}

				&#undoStep::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 19v-2h7.1q1.575 0 2.738-1T18 13.5T16.838 11T14.1 10H7.8l2.6 2.6L9 14L4 9l5-5l1.4 1.4L7.8 8h6.3q2.425 0 4.163 1.575T20 13.5t-1.737 3.925T14.1 19z'/%3E%3C/svg%3E");
				}

				&#redoStep::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.9 19q-2.425 0-4.163-1.575T4 13.5t1.738-3.925T9.9 8h6.3l-2.6-2.6L15 4l5 5l-5 5l-1.4-1.4l2.6-2.6H9.9q-1.575 0-2.738 1T6 13.5T7.163 16T9.9 17H17v2z'/%3E%3C/svg%3E");
				}
			}

			&#undoContentStep, &#redoContentStep {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 6v2H3V6zM3 18h9v-2H3zm0-5h18v-2H3z'/%3E%3C/svg%3E");
				}

				&#undoContentStep::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 19v-2h7.1q1.575 0 2.738-1T18 13.5T16.838 11T14.1 10H7.8l2.6 2.6L9 14L4 9l5-5l1.4 1.4L7.8 8h6.3q2.425 0 4.163 1.575T20 13.5t-1.737 3.925T14.1 19z'/%3E%3C/svg%3E");
				}

				&#redoContentStep::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.9 19q-2.425 0-4.163-1.575T4 13.5t1.738-3.925T9.9 8h6.3l-2.6-2.6L15 4l5 5l-5 5l-1.4-1.4l2.6-2.6H9.9q-1.575 0-2.738 1T6 13.5T7.163 16T9.9 17H17v2z'/%3E%3C/svg%3E");
				}
			}

			&#saveUserPreset, &#insertUserPreset, &#deleteUserPreset {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3.75 3.5a.25.25 0 0 0-.25.25v2.062a.75.75 0 1 1-1.5 0V3.75C2 2.783 2.783 2 3.75 2h2.062a.75.75 0 1 1 0 1.5Zm13.688-.75a.75.75 0 0 1 .75-.75h2.062c.966 0 1.75.783 1.75 1.75v2.062a.75.75 0 1 1-1.5 0V3.75a.25.25 0 0 0-.25-.25h-2.062a.75.75 0 0 1-.75-.75M2.75 17.438a.75.75 0 0 1 .75.75v2.062c0 .138.112.25.25.25h2.062a.75.75 0 1 1 0 1.5H3.75A1.75 1.75 0 0 1 2 20.25v-2.062a.75.75 0 0 1 .75-.75m18.5 0a.75.75 0 0 1 .75.75v2.062A1.75 1.75 0 0 1 20.25 22h-2.062a.75.75 0 1 1 0-1.5h2.062a.25.25 0 0 0 .25-.25v-2.062a.75.75 0 0 1 .75-.75m-18.5-8.25a.75.75 0 0 1 .75.75v4.124a.75.75 0 1 1-1.5 0V9.938a.75.75 0 0 1 .75-.75M9.188 2.75a.75.75 0 0 1 .75-.75h4.124a.75.75 0 1 1 0 1.5H9.938a.75.75 0 0 1-.75-.75m0 18.5a.75.75 0 0 1 .75-.75h4.124a.75.75 0 1 1 0 1.5H9.938a.75.75 0 0 1-.75-.75M21.25 9.188a.75.75 0 0 1 .75.75v4.124a.75.75 0 1 1-1.5 0V9.938a.75.75 0 0 1 .75-.75M3.75 8.25a.75.75 0 0 1 .75-.75h2a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1-.75-.75m5.5 0A.75.75 0 0 1 10 7.5h2A.75.75 0 0 1 12 9h-2a.75.75 0 0 1-.75-.75m-1-4.5A.75.75 0 0 1 9 4.5v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75m0 5.5A.75.75 0 0 1 9 10v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 1 .75-.75m0 4.75a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75M14 8.25a.75.75 0 0 1 .75-.75h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");
				}

				&#saveUserPreset::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21 7v12q0 .825-.587 1.413T19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12zm-6.875 10.125Q15 16.25 15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18t2.125-.875M6 10h9V6H6z'/%3E%3C/svg%3E");
				}

				&#insertUserPreset::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M26 30h-2V20H12v10h-2V20a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2ZM5.17 16L2 19.17l1.411 1.419L8 16l-4.58-4.58L2 12.83zM24 14H12a2 2 0 0 1-2-2V2h2v10h12V2h2v10a2 2 0 0 1-2 2'/%3E%3C/svg%3E");
				}

				&#deleteUserPreset::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M9 10v34h30V10z'/%3E%3Cpath stroke-linecap='round' d='M20 20v13m8-13v13M4 10h40'/%3E%3Cpath d='m16 10l3.289-6h9.488L32 10z'/%3E%3C/g%3E%3C/svg%3E");
				}
			}

			&#exportHtml {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cg fill='%23fff' clip-path='url(%23SVGXv8lpc2Y)'%3E%3Cpath d='M5.08 0h1.082v1.069h.99V0h1.082v3.236H7.152V2.153h-.99v1.083H5.081zm4.576 1.073h-.952V0h2.987v1.073h-.953v2.163H9.656zM12.165 0h1.128l.694 1.137L14.68 0h1.128v3.236h-1.077V1.632l-.744 1.151h-.019l-.745-1.15v1.603h-1.058zm4.181 0h1.083v2.167h1.52v1.07h-2.603z'/%3E%3Cpath fill-rule='evenodd' d='M5.046 22.072L3 4.717h18L18.953 22.07L11.99 24zm4.137-9.5l-.194-2.18h8.145l.19-2.128H6.664l.574 6.437h7.377l-.247 2.76l-2.374.642h-.002l-2.37-.64l-.152-1.697H7.332l.298 3.342l4.36 1.21l4.367-1.21l.532-5.964l.052-.571z' clip-rule='evenodd'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='SVGXv8lpc2Y'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
				}

				&::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M8.845 7.905a.75.75 0 0 0 1.06 0l1.72-1.72v8.19a.75.75 0 0 0 1.5 0v-8.19l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 0 0 0 1.06' clip-rule='evenodd'/%3E%3Cpath fill='%23000' d='M12.375 20.375a8 8 0 0 0 8-8h-3.75c-.943 0-1.414 0-1.707.293s-.293.764-.293 1.707a2.25 2.25 0 0 1-4.5 0c0-.943 0-1.414-.293-1.707s-.764-.293-1.707-.293h-3.75a8 8 0 0 0 8 8'/%3E%3C/svg%3E");
				}
			}

			&#renderFinalPreview {
				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M4 5v1h8V5zm6 4v2.005h2V9zM1 4.75A2.75 2.75 0 0 1 3.75 2h8.5A2.75 2.75 0 0 1 15 4.75v6.5A2.75 2.75 0 0 1 12.25 14h-8.5A2.75 2.75 0 0 1 1 11.25zm2-.25v2a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5m6 4v3.005a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5V8.5a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5m-5.5 0a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1zM3 11a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5'/%3E%3C/svg%3E");
				}

				&::after {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Cpath d='M3 13c3.6-8 14.4-8 18 0'/%3E%3Cpath d='M12 17a3 3 0 1 1 0-6a3 3 0 0 1 0 6'/%3E%3C/g%3E%3C/svg%3E");
				}
			}

			&#publishCurrentDraft {
				background-color: #2fa03b;
				border-color: #2fa03b;
				& * {
					font-size: 0;
				}

				&::before {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='m18.003 13.068l2.26-2.261A9 9 0 0 0 22.9 4.443V1.1h-3.343a9 9 0 0 0-6.364 2.636l-2.261 2.26l-5.657-.707L1.04 9.524L14.475 22.96l4.235-4.235zm-1.792 1.791l.393 3.143l-2.129 2.129l-1.768-1.768zm-7.07-7.071l-3.505 3.504L3.87 9.524l2.129-2.129zm-3.505 9.16l-3.535 3.536L.687 19.07l3.535-3.535zm2.829 2.83l-3.536 3.535l-1.414-1.414l3.535-3.536z'/%3E%3C/svg%3E");
				}

				&::after {
					display: none;
				}
			}
		}
	}

	& .publication-status {
		display: grid;
		grid-template-columns: auto;
		gap: .05rem;
		align-content: center;
		min-width: 10rem;
		max-width: 15rem;
		position: relative;
		overflow: hidden;
		& .publication-status__label, & .publication-status__value {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 50%;
			line-height: 23px;
			padding: 0 10px;
		}

		& .publication-status__label {
			color: var(--cs-color-text-soft, #64748b);
			font-size: .62rem;
			font-weight: bold;
			text-transform: uppercase;
			position: absolute;
			top: 0;
			background-color: rgb(0,0,0,.1);
		}

		& .publication-status__value {
			overflow: hidden;
			color: inherit;
			font-size: .78rem;
			font-weight: bold;
			text-overflow: ellipsis;
			white-space: nowrap;
			bottom: 0;
		}

		&.is-published {
			border-color: #16a34a;
			background: var(--cs-color-success-soft);
			color: #166534;
		}

		&.is-pending, &.is-local-changes {
			border-color: var(--cs-color-warning);
			background: var(--cs-color-warning-soft);
			color: var(--cs-color-warning-text);
		}

		&.is-unpublished {
			border-color: var(--cs-color-text-soft);
			background: var(--cs-color-surface-muted);
			color: #334155;
		}

		&.is-loading {
			opacity: .7;
			cursor: wait;
		}

		&.is-error {
			border-color: var(--cs-color-danger);
			background: var(--cs-color-danger-soft);
			color: #991b1b;
		}
	}

	& .publication-publish {
		&:disabled {
			opacity: .45;
			cursor: not-allowed;
		}

		&.is-publishing {
			opacity: .75;
			cursor: wait;
		}
	}
}

.toolbar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--cs-control-height-md);
	padding: .5rem;
	border: 2px solid var(--cs-control-border);
	border-radius: var(--cs-radius-md);
	background: var(--cs-control-bg);
	color: var(--cs-control-text);
	font-size: var(--cs-font-size-sm);
	font-weight: bold;
	cursor: pointer;
	min-width: 50px;
	min-height: 50px;
	&:hover {
		border-color: var(--cs-control-border-hover);
	}

	&.toolbar-button--icon {
		width: var(--cs-icon-button-size-lg);
		height: var(--cs-icon-button-size-lg);
		padding: 0;
		font-size: 0;
		position: relative;
		overflow: hidden;
	}

	&.toolbar-button--primary {
		border-color: var(--cs-color-primary);
		background: var(--cs-color-primary);
		color: var(--cs-color-on-primary);
	}

	&.toolbar-button--danger {
		color: var(--cs-color-danger);
	}
}

.toolbar-button[hidden]:not([hidden="until-found"]) {
	display: none !important;
}

.preview {
	--cs-font-size-xs: .75rem;
	--cs-font-size-sm: .875rem;
	--cs-font-size-base: 1rem;
	--cs-font-size-lg: 1.125rem;
	--cs-font-size-xl: 1.25rem;
	padding: var(--cs-space-4);
	overflow: auto;
	font-size: var(--cs-font-size-base);
	line-height: 1.5;
}

.cms-block__content > .cs-dynamic-ajax-rendered, .cms-block__content > [data-dynamic-ajax-rendered="1"] {
	position: relative;
	outline-offset: 4px;
}

.cms-block__content > .cs-dynamic-ajax-rendered::before, .cms-block__content > [data-dynamic-ajax-rendered="1"]::before {
	content: "AJAX";
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	border-radius: 999px;
	color: #FF9900;
	font-size: 3rem;
	opacity: .3;
	font-weight: bold;
	pointer-events: none;
}

.drop-zone {
	position: relative;
	min-height: 100px;
	padding: var(--cs-space-2);
	border: 2px dashed var(--cs-color-zone);
	border-radius: var(--cs-radius-xl);
	background: var(--cs-color-zone-soft);
	transition: background .15s, border-color .15s, box-shadow .15s;
	&.drop-zone--root {
		min-height: calc(100vh - 120px);
		& > .drop-zone__head .move-actions {
			display: none;
		}
	}

	&.is-drag-over {
		background: var(--cs-color-zone-active);
		border-color: var(--cs-color-primary);
		box-shadow: inset 0 0 0 2px rgba(37, 99, 235, .25);
	}

	&.is-selected {
		outline: 3px solid var(--cs-color-selected);
		outline-offset: -3px;
	}

	&.is-sorting {
		opacity: .42;
	}

	& .drop-zone__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		margin-bottom: var(--cs-space-2);
		pointer-events: auto;
		& .drop-zone__label {
			margin-bottom: 0;
		}
	}

	& .drop-zone__label {
		display: inline-flex;
		max-width: 100%;
		margin-bottom: var(--cs-space-2);
		padding: 4px 8px;
		border-radius: var(--cs-radius-pill);
		background: rgba(255, 255, 255, .85);
		color: #075985;
		font-size: 12px;
		font-weight: bold;
		user-select: none;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.cms-block {
	position: relative;
	container-type: inline-size;
	min-width: 240px;
	padding: var(--cs-space-2);
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-radius-sm);
	background: var(--cs-color-white);
	box-shadow: var(--cs-shadow-md);
	cursor: default;
	& + .cms-block {
		margin-top: .5rem;
	}

	& button, & input, & textarea, & select, & a {
		cursor: auto;
	}

	&.is-selected {
		outline: 3px solid var(--cs-color-selected);
		outline-offset: -2px;
	}

	&.is-sorting {
		opacity: .42;
	}

	& .cms-block__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--cs-space-3);
		min-width: 0;
		margin-bottom: var(--cs-space-2);
		user-select: none;
	}

	& .cms-block__title {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: .8rem;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: var(--cs-color-text-soft);
		& * {
			font-size: inherit;
			letter-spacing: inherit;
		}
	}

	& .cms-block__actions {
		display: flex;
		gap: 6px;
	}

	&.is-moving {
		opacity: .55;
		outline: 3px solid var(--cs-color-selected);
		outline-offset: -2px;
	}
}

.drop-zone {
	&.is-move-target {
		outline: 3px dashed var(--cs-color-selected);
		outline-offset: -4px;
		background: var(--cs-color-warning-soft);
		cursor: pointer;
	}

	&.is-invalid-move-target {
		outline-color: var(--cs-color-danger);
		background: var(--cs-color-danger-soft);
	}
}

.move-mode-hint {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 1200;
	transform: translateX(-50%);
	padding: 12px 16px;
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-radius-pill);
	background: var(--cs-color-text-strong);
	color: var(--cs-color-white);
	font-size: 14px;
	font-weight: bold;
	box-shadow: 0 16px 40px rgba(15, 23, 42, .22);
	&[hidden] {
		display: none;
	}
}

.cms-block__actions {
	display: none!important;
}

.drop-zone.is-selected, .cms-block.is-selected {
	& > .drop-zone__head > .cms-block__actions, & > .cms-block__header > .cms-block__actions {
		display: flex!important;
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 1000;
	}
}

.block-action, .move-action {
	cursor: pointer;
	opacity: 1;
	font-size: 0;
	border: none;
	background: transparent;
	width: 40px;
	height: 40px;
	margin: 0 .2rem;
	background-repeat: no-repeat;
	background-size: 60%!important;
	background-position: center center;
	background-color: var(--cs-color-white);
	border: 1px solid var(--cs-color-border)!important;
	border-bottom: none!important;
	border-radius: var(--cs-radius-sm) .5rem 0 0;
	box-shadow: 0 0 5px rgba(15, 23, 42, .2);
	&.js-delete-block {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M9 10v34h30V10z'/%3E%3Cpath stroke-linecap='round' d='M20 20v13m8-13v13M4 10h40'/%3E%3Cpath d='m16 10l3.289-6h9.488L32 10z'/%3E%3C/g%3E%3C/svg%3E");
	}

	&.js-detach-template-reference {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Cpath fill='%239B9B9B' d='M23 2c-2.76 0-5 2.24-5 5v4c0 2.76 2.24 5 5 5c-2.76 0-5 2.24-5 5v4c0 2.76 2.24 5 5 5s5-2.24 5-5v-4c0-2.76-2.24-5-5-5c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5m0 3c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2s-2-.9-2-2V7c0-1.1.9-2 2-2m2 16v4c0 1.1-.9 2-2 2s-2-.9-2-2v-4c0-1.1.9-2 2-2s2 .9 2 2M11 2.55v.66c0 .5-.33 1.13-.75 1.4C8.67 5.62 7 4.5 7 3v-.45c0-.3-.24-.54-.54-.54H4.54c-.3 0-.54.24-.54.54v.68c0 1.87 1.1 3.56 2.81 4.3C10.47 9.1 14 6.46 14 3v-.45c0-.3-.24-.54-.54-.54h-1.92c-.3 0-.54.24-.54.54m-4 26.9v-.66c0-.5.33-1.13.75-1.4C9.33 26.38 11 27.5 11 29v.44c0 .3.24.54.54.54h1.92c.3 0 .54-.24.54-.54v-.68c0-1.87-1.1-3.56-2.81-4.3C7.53 22.9 4 25.54 4 29v.44c0 .3.24.54.54.54h1.92c.3.01.54-.23.54-.53M4 14c0-2.76 2.24-5 5-5s5 2.23 5 5v4c0 2.76-2.24 5-5 5s-5-2.24-5-5zm7 0a2 2 0 1 0-4 0v4c0 1.1.9 2 2 2s2-.9 2-2z'/%3E%3Cpath fill='%23BEBEBE' d='M21.5 2.45v3.04c0 .84.69 1.55 1.53 1.53c.81-.02 1.47-.69 1.47-1.51V2.45c0-.25-.2-.45-.45-.45h-2.11c-.24 0-.44.2-.44.45M9 14c-.83 0-1.5-.67-1.5-1.5v-7C7.5 4.67 8.17 4 9 4s1.5.67 1.5 1.5v7c0 .82-.67 1.5-1.5 1.5m0 14c-.83 0-1.5-.67-1.5-1.5v-7c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5v7c0 .82-.67 1.5-1.5 1.5m12.5-8.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5zm3 7.03v3.04c0 .25-.2.44-.44.45h-2.11c-.25 0-.45-.2-.45-.45V26.5c0-.82.65-1.48 1.47-1.5c.84-.02 1.53.69 1.53 1.53'/%3E%3C/g%3E%3C/svg%3E");
	}

	&:hover {
		box-shadow: 0 0 10px rgba(15, 23, 42, .5);
		border-color: var(--cs-color-primary)!important;
	}
}

.move-actions {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 4px;
	& .move-action, & .block-action {
		display: inline-grid;
		place-items: center;
		border: none;
		color: var(--cs-color-text-soft);
		font-weight: bold;
		line-height: 1;
		cursor: pointer;
		&.js-move-prev, &.js-move-next, &.js-relocate-block, &.js-convert-block {
			&.js-move-prev {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='3' cy='3' r='3' transform='matrix(-1 0 0 1 22 9)'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2 12h10M2 12c0 .562.438.99 1.314 1.844L4.971 15.5M2 12c0-.562.438-.99 1.314-1.844L4.97 8.5'/%3E%3C/g%3E%3C/svg%3E");
			}

			&.js-move-next {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='5' cy='12' r='3'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M22 12H12m10 0c0 .562-.438.99-1.314 1.844L19.029 15.5M22 12c0-.562-.438-.99-1.314-1.844L19.03 8.5'/%3E%3C/g%3E%3C/svg%3E");
			}

			&.js-relocate-block {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='m377.751 356.419l-30.17-30.17l48.915-48.915H277.333v-42.666h119.164l-48.916-48.916l30.17-30.169l100.418 100.418zM134.252 155.583l30.17 30.17l-48.915 48.915h119.162v42.666H115.506l48.916 48.916l-30.17 30.17L33.833 256.001z' clip-rule='evenodd'/%3E%3C/svg%3E");
			}

			&.js-convert-block {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M38.83 2.905c-.103-.885-.615-1.692-1.45-2.116c-.821-.417-1.745-.36-2.498.023c-.663.338-1.643.88-2.985 1.727c-1.012.639-1.743 1.183-2.274 1.636c-.722.616-1.195 1.506-1.195 2.51c0 1.005.473 1.895 1.195 2.51c.53.454 1.262.998 2.274 1.637c1.342.847 2.322 1.39 2.985 1.727c.753.383 1.677.44 2.498.023c.835-.424 1.347-1.23 1.45-2.115c.06-.512.115-1.205.145-2.143q.795.07 1.445.145c1.168.135 2.025.98 2.175 2.172a66 66 0 0 1 .408 4.655a2 2 0 0 0 3.994-.22a70 70 0 0 0-.433-4.937c-.38-2.993-2.662-5.295-5.685-5.644a54 54 0 0 0-1.935-.187a22 22 0 0 0-.113-1.403M4.998 33.019a2 2 0 1 0-3.994.22c.111 2.016.27 3.651.432 4.933c.378 2.995 2.663 5.299 5.688 5.648a62 62 0 0 0 1.935.172q.045.555.11 1.103c.103.886.615 1.692 1.45 2.116c.821.417 1.746.36 2.498-.023c1.748-.89 3.631-1.973 5.26-3.363c.721-.616 1.194-1.506 1.194-2.51c0-1.005-.473-1.895-1.194-2.51c-1.629-1.39-3.512-2.473-5.26-3.364c-.753-.383-1.677-.44-2.498-.023c-.835.424-1.347 1.23-1.45 2.116a32 32 0 0 0-.19 2.44a48 48 0 0 1-1.396-.127c-1.17-.135-2.028-.983-2.178-2.176c-.15-1.185-.3-2.728-.407-4.652M15.57 1.009c-2.837-.037-5.696.014-8.555.217c-3.134.223-5.532 2.666-5.732 5.787a141 141 0 0 0 0 17.966c.2 3.12 2.598 5.564 5.732 5.786c3.607.256 7.223.287 10.81.165a2 2 0 1 0-.136-3.998c-3.475.119-6.948.088-10.391-.157c-1.12-.079-1.95-.91-2.023-2.052a137 137 0 0 1 0-17.454c.073-1.142.903-1.973 2.023-2.053a97 97 0 0 1 7.76-.212c.024.713.056 1.434.09 2.177a5.823 5.823 0 0 0 5.555 5.561c.626.03 1.5.059 2.263.082l.014 1.48a2 2 0 1 0 4-.037l-.018-1.934a2.3 2.3 0 0 0-.059-.49c-.593-2.547-2.084-4.97-3.979-6.864c-1.893-1.894-4.325-3.394-6.935-3.925a2.3 2.3 0 0 0-.419-.045M34 21c-2.846 0-5.09.1-6.73.217c-1.127.08-1.957.914-2.03 2.054C25.115 25.219 25 28.076 25 32s.115 6.78.24 8.73c.073 1.14.903 1.973 2.03 2.053c1.64.116 3.884.217 6.73.217s5.09-.1 6.73-.217c1.127-.08 1.957-.914 2.03-2.054c.125-1.948.24-4.805.24-8.729q0-1.717-.027-3.167a162 162 0 0 1-2.275-.09a5.827 5.827 0 0 1-5.563-5.562c-.032-.706-.062-1.447-.086-2.176Q34.54 21 34 21m-7.013-3.773A100 100 0 0 1 34 17q.822 0 1.58.01a2 2 0 0 1 .367.04c.657.131 3.834.903 6.967 4.036c2.917 2.917 3.787 5.872 4 6.792q.045.202.05.408q.035 1.678.036 3.714c0 4.001-.117 6.944-.248 8.985c-.2 3.124-2.603 5.566-5.738 5.788A100 100 0 0 1 34 47c-2.94 0-5.278-.104-7.013-.227c-3.136-.222-5.539-2.664-5.74-5.788C21.118 38.944 21 36.001 21 32s.117-6.944.248-8.985c.2-3.124 2.603-5.566 5.739-5.788' clip-rule='evenodd'/%3E%3C/svg%3E");
			}
		}

		&:hover:not(:disabled) {
			border-color: var(--cs-color-primary);
			color: var(--cs-color-primary);
		}

		&:disabled {
			opacity: .2;
			cursor: not-allowed;
			pointer-events: none;
		}
	}
}

.sort-placeholder {
	min-height: 70px;
	margin: 0 0 14px;
	border: 2px dashed var(--cs-color-selected);
	border-radius: 14px;
	background: var(--cs-color-warning-soft);
}

.layout-section {
	background: var(--cs-color-white);
}

.layout-grid {
	display: grid;
	gap: 14px;
	&.layout-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	&.layout-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	&.layout-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.layout-flex {
	display: block;
	& > .drop-zone {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: var(--cs-space-3);
		min-width: 240px;
		& > .cms-block {
			flex: 1;
			margin: 0;
		}

		& > .drop-zone__head {
			display: none;
		}
	}
}

.cms-block.cs-card {
	max-width: 100%;
	&.cs-card--horizontal {
		width: 100%;
		min-width: 0;
		& > .layout-flex > .drop-zone {
			align-items: stretch;
			flex-wrap: nowrap;
			gap: var(--cs-space-4);
			width: 100%;
			min-width: 0;
			& > .cms-block {
				margin-top: 0;
				&.cs-card__media {
					flex: 0 0 clamp(180px, 32%, 320px);
					min-width: 160px;
					align-self: stretch;
				}
			}
		}

		& > .layout-flex > .drop-zone > .cms-block.cs-card__media > .content-image, & > .layout-flex > .drop-zone > .cms-block.cs-card__media .single-image-module, & > .layout-flex > .drop-zone > .cms-block.cs-card__media .single-image-module__link {
			height: 100%;
			& .single-image-module__image, & .single-image-module__placeholder {
				width: 100%;
				height: 100%;
				min-height: 220px;
				object-fit: cover;
			}
		}

		& > .layout-flex > .drop-zone > .cms-block.cs-card__body {
			flex: 1 1 auto;
			min-width: 0;
			max-width: none;
			& > .layout-container > .drop-zone {
				display: grid;
				align-content: start;
				gap: var(--cs-space-3);
				min-width: 0;
			}
		}
	}
}

.layout-sidebar {
	display: grid;
	grid-template-columns: minmax(220px, 280px) minmax(280px, 1fr);
	gap: 14px;
}

@container (max-width: 620px) {
	.layout-sidebar {
		grid-template-columns: 1fr;
	}
}

.layout-stack {
	display: grid;
	gap: 14px;
}

.slot {
	min-height: 120px;
}

.content-headline {
	& h3 {
		margin: 0;
		font-size: 32px;
		line-height: 1.15;
	}
}

.content-text {
	& p {
		margin: 0;
		color: var(--cs-color-text-soft);
		line-height: 1.55;
	}
}

.content-anchor {
	display: inline-flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
	font-weight: bold;
	&:hover {
		text-decoration: underline;
	}
}

aside nav .layout-flex > .drop-zone, [data-role="aside"] nav .layout-flex > .drop-zone {
	flex-direction: column;
	align-items: flex-start;
}

/* LIVE */
[data-role="flex"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-space-3);
}

aside nav [data-role="flex"], [data-role="aside"] nav [data-role="flex"] {
	flex-direction: column;
	align-items: flex-start;
}

/* /LIVE */
.content-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border-radius: var(--cs-radius-pill);
	background: var(--cs-color-primary);
	color: var(--cs-color-white);
	font-weight: bold;
	text-decoration: none;
}

.empty-state {
	margin: 0;
	color: var(--cs-color-text-soft);
	font-size: 14px;
	line-height: 1.45;
}

.dom-tree {
	display: grid;
	gap: 14px;
}

.dom-node {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	margin-bottom: .2rem;
	padding: 9px 10px;
	border: 1px solid var(--cs-color-border);
	border-radius: var(--cs-radius-md);
	background: var(--cs-color-white);
	text-align: left;
	cursor: pointer;
	&:hover {
		border-color: var(--cs-color-primary);
	}

	&.is-current {
		border-color: var(--cs-color-selected);
		background: var(--cs-color-warning-soft);
	}
}

.sidebar-note {
	margin: 16px;
	padding: 14px;
	border: 1px solid var(--cs-color-border);
	border-radius: 14px;
	background: var(--cs-color-surface-muted);
	& h3 {
		margin: 0 0 6px;
		font-size: 14px;
	}

	& p {
		margin: 0;
		color: var(--cs-color-text-soft);
		font-size: 13px;
		line-height: 1.45;
	}
}

/* SETTINGS OVERLAY */
.settings-overlay {
	& .cs-overlay__dialog {
		width: min(980px, calc(100vw - 48px));
		max-height: calc(100vh - 48px);
		overflow: hidden;
		display: grid;
		grid-template-rows: auto 1fr auto;
	}

	& header.cs-overlay__header {
		background: rgb(0,0,0,.05);
		margin-bottom: 0;
		padding: 1.5rem;
	}

	& .cs-overlay__body {
		min-height: 0;
		overflow: auto;
	}

	& .cs-overlay__footer {
		margin-top: 0;
		background: rgb(0,0,0,.05);
		display: flex;
		justify-content: flex-end;
		gap: var(--cs-space-2);
		padding: var(--cs-space-4) var(--cs-space-5);
		border-top: 1px solid var(--cs-color-border-soft);
	}

	& .settings-panel-section {
		min-width: 0;
		margin-top: var(--cs-space-4);
	}

	& .settings-panel-section[hidden] {
		display: none !important;
	}

	& .settings-panel-section .settings-visibility {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	& .settings-panel-meta {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--cs-space-4);
		margin-bottom: var(--cs-space-4);
	}

	& .settings-panel-meta__item {
		padding: var(--cs-space-3);
		border: 1px solid var(--cs-color-border-soft);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-surface-muted);
		& strong {
			display: block;
			margin-bottom: 4px;
			font-size: 12px;
			text-transform: uppercase;
			letter-spacing: .04em;
			color: var(--cs-color-text-muted);
		}

		& span {
			display: block;
			font-weight: bold;
		}
	}

	& .settings-visibility {
		display: grid;
		gap: var(--cs-space-3);
		margin-top: var(--cs-space-5);
		padding-top: var(--cs-space-5);
		border-top: 1px solid var(--cs-color-border-soft);
		& h3, & p {
			margin: 0;
		}

		& p {
			color: var(--cs-color-text-muted);
			font-size: var(--cs-font-size-sm);
		}
	}

	/* Umschalter, Chips und Zusammenfassung kommen aus admin-ui.css (.cs-admin-segmented, .cs-admin-chips). */
	& .settings-visibility__choice {
		display: grid;
		gap: var(--cs-space-3);
	}

	& .settings-visibility__choice[hidden], & .settings-visibility__hint[hidden] {
		display: none;
	}

	& .settings-field {
		display: grid;
		gap: 6px;
		margin-bottom: var(--cs-space-4);
		& label {
			font-weight: bold;
		}

		& small {
			color: var(--cs-color-text-muted);
		}

		& input, & select, & textarea {
			width: 100%;
		}

		& textarea {
			min-height: 160px;
		}
	}

	& .settings-field__html {
		padding: var(--cs-space-3);
		border: 1px dashed var(--cs-color-border-soft);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-surface-muted);
	}

	& .settings-dynamic-fields {
		margin-top: var(--cs-space-5);
		padding-top: var(--cs-space-5);
		border-top: 1px solid var(--cs-color-border-soft);
		& h3 {
			margin-top: 0;
		}
	}

	& .cs-dynamic-settings-field__hint {
		margin: -.35rem 0 .85rem;
		color: var(--cs-color-text-muted);
		font-size: .72rem;
		line-height: 1.45;
	}

	& [data-dynamic-settings-container] {
		display: block;
	}

	& .cs-dynamic-settings-form, & .cs-dynamic-settings {
		display: grid;
		gap: var(--cs-space-5);
	}

	& .cs-dynamic-settings-header {
		display: grid;
		gap: 4px;
		padding-bottom: var(--cs-space-4);
		border-bottom: 1px solid var(--cs-color-border-soft);
		& h3, & h4 {
			margin: 0;
			font-size: 16px;
			font-weight: bold;
		}

		& p {
			margin: 0;
			color: var(--cs-color-text-muted);
			font-size: 13px;
			line-height: 1.45;
		}
	}

	& .cs-dynamic-settings-field {
		display: grid;
		gap: 6px;
		& label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--cs-space-2);
			font-weight: bold;
			line-height: 1.35;
		}

		& small, & .cs-dynamic-settings-hint {
			display: block;
			color: var(--cs-color-text-muted);
			font-size: 12px;
			line-height: 1.4;
		}

		& input[type="text"], & input[type="url"], & input[type="number"], & input[type="email"], & select, & textarea {
			width: 100%;
			min-height: 40px;
			border: 1px solid var(--cs-color-border-soft);
			border-radius: var(--cs-radius-md);
			background: var(--cs-color-surface);
			padding: 9px 11px;
			font: inherit;
			color: var(--cs-color-text);
			outline: none;
			transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
		}

		& textarea {
			min-height: 110px;
			resize: vertical;
			line-height: 1.45;
		}
	}

	& .cs-dynamic-settings-field[data-dynamic-translatable="1"] label::after, & .cs-dynamic-settings-field.is-translatable label::after {
		content: "i18n";
		flex: 0 0 auto;
		padding: 2px 7px;
		border-radius: 999px;
		background: #eef3ff;
		color: #2451a6;
		border: 1px solid #b8c9f5;
		font-size: 10px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: .04em;
	}

	& .cs-dynamic-settings-field[data-dynamic-translatable="0"] label::after, & .cs-dynamic-settings-field.is-config label::after {
		content: "config";
		flex: 0 0 auto;
		padding: 2px 7px;
		border-radius: 999px;
		background: #f3f4f6;
		color: #4b5563;
		border: 1px solid #d1d5db;
		font-size: 10px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: .04em;
	}

	& .cs-dynamic-settings-field--checkbox {
		display: flex;
		align-items: flex-start;
		gap: var(--cs-space-3);
		padding: 0 var(--cs-space-3);
		border: 1px solid var(--cs-color-border-soft);
		border-radius: var(--cs-radius-md);
		& * {
			line-height: 40px;
			font-weight: normal;
		}

		& input[type="checkbox"] {
			width: 18px;
			height: 18px;
			min-height: initial;
			margin: 0;
			margin-right: 10px;
			flex: 0 0 auto;
		}

		& label {
			display: block;
			margin: 0;
			padding-left: 30px;
			position: relative;
			& input {
				position: absolute;
				top: 50%;
				margin-top: -9px!important;
				left: 0;
			}

			& span {
				display: block;
			}
		}

		& small {
			display: block;
			margin-top: 3px;
		}
	}

	& .cs-dynamic-settings button, & .cs-dynamic-settings-form button {
		min-height: 36px;
		padding: 7px 12px;
		border: 1px solid var(--cs-color-border-soft);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-surface);
		color: var(--cs-color-text);
		font-weight: bold;
		cursor: pointer;
		transition: background-color .15s ease, border-color .15s ease, transform .08s ease;
		&:hover {
			background: var(--cs-color-surface-muted);
			border-color: var(--cs-color-border);
		}

		&:active {
			transform: translateY(1px);
		}
	}

	& .cs-dynamic-settings button[data-dynamic-add], & .cs-dynamic-settings-form button[data-dynamic-add] {
		background: var(--cs-color-primary);
		border-color: var(--cs-color-primary);
		color: var(--cs-color-text-inverse);
	}

	& .cs-dynamic-settings button[data-dynamic-remove], & .cs-dynamic-settings-form button[data-dynamic-remove] {
		background: #fff5f5;
		border-color: #fecaca;
		color: #b91c1c;
	}
}

.cms-block {
	&.is-locale-hidden {
		border-style: dashed;
		& > :not(.cms-block__header) {
			opacity: .42;
		}
	}

	& .cms-block__locale-visibility {
		flex: 0 0 auto;
		padding: 3px 8px;
		border-radius: var(--cs-radius-pill);
		background: var(--cs-color-surface-muted);
		color: var(--cs-color-text-muted);
		font-size: .68rem;
		font-weight: bold;
		white-space: nowrap;
		&.is-restricted {
			background: var(--cs-color-primary-tint);
			color: var(--cs-color-primary);
		}
	}
}

@media (max-width: 800px) {
	.settings-overlay {
		& .settings-panel-meta {
			grid-template-columns: 1fr;
		}
	}

	.project-settings-form {
		& .project-settings-form__grid {
			grid-template-columns: 1fr;
		}
	}

	.project-settings-entitlement {
		& .project-settings-entitlement__values {
			grid-template-columns: 1fr;
		}
	}
}

/* /SETTINGS OVERLAY */
@media (max-width: 1100px) {
	.app {
		grid-template-columns: 240px minmax(420px, 1fr);
	}

	.sidebar {
		&.sidebar--right {
			display: none;
		}
	}
}

@media (max-width: 900px) {
	.layout-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 800px) {
	.app {
		grid-template-columns: 1fr;
	}

	.sidebar {
		border-right: 0;
		border-bottom: 1px solid var(--cs-color-border);
	}

	.preview {
		padding: 18px;
	}

	.layout-grid {
		&.layout-grid--2, &.layout-grid--3, &.layout-grid--4 {
			grid-template-columns: 1fr;
		}
	}

	.layout-sidebar {
		grid-template-columns: 1fr;
	}
}

.settings-field {
	display: grid;
	gap: 6px;
	& + .settings-field {
		margin-top: 14px;
	}

	& label {
		font-size: var(--cs-font-size-sm);
		font-weight: bold;
	}

	& input, & textarea, & select {
		width: 100%;
		padding: 10px 12px;
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-white);
		color: var(--cs-color-text);
		font: inherit;
	}

	& textarea {
		min-height: 90px;
		resize: vertical;
	}

	& small {
		color: var(--cs-color-text-soft);
		font-size: var(--cs-font-size-xs);
	}
}

/* Herkunftsbadge an der rechten unteren Ecke des konkreten übersetzbaren Settings-Feldes.
   Gilt für einzeilige Inputs, Textareas und Redactor; keine globalen div:has-Selektoren. */
[data-settings-locale-fields] > .settings-field {
	&.settings-field--translation-corner {
		position: relative;
		& > label > .cs-translation-origin {
			position: absolute;
			right: 0;
			bottom: 0;
			z-index: 1;
			margin: 0;
			border-radius: 10px 0 10px 0;
		}

		& > input[type="text"] {
			padding-right: 3rem;
		}

		& > textarea, & > .generic-redactor .generic-redactor__editor {
			padding-bottom: 2.25rem;
		}
	}

	&.settings-field--single-content-label {
		& > label {
			height: 0;
			line-height: 0;
		}
	}
}

.cs-settings-asset-family {
	display: grid;
	gap: var(--cs-space-2);
	padding: var(--cs-space-3);
	border: 1px solid var(--cs-color-border-soft);
	border-radius: var(--cs-radius-md);
	background: var(--cs-color-surface-muted);
	& .cs-settings-asset-family__summary {
		min-width: 0;
		padding: var(--cs-space-2);
		border-radius: var(--cs-radius-sm);
		background: var(--cs-color-surface);
		color: var(--cs-color-text-strong);
		font-size: .8rem;
		font-weight: bold;
		line-height: 1.4;
		overflow-wrap: anywhere;
	}

	& .cs-settings-asset-family__actions {
		display: flex;
		gap: var(--cs-space-2);
		flex-wrap: wrap;
		& .cs-button {
			width: auto;
		}
	}

	& .cs-settings-asset-family__status {
		color: var(--cs-color-text-muted);
		font-size: .75rem;
		line-height: 1.4;
	}

	& .cs-settings-asset-family__hint {
		display: block;
		line-height: 1.45;
	}
}

.content-navigation {
	display: grid;
	gap: 14px;
}

.project-extension-notice {
	margin: 8px 12px;
	&[hidden] {
		display: none;
	}
}

.preview-focusbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cs-space-2);
	margin: 0;
	padding: 0 .5rem;
	background: var(--cs-color-white);
	box-shadow: var(--cs-shadow-md);
	&[hidden] {
		display: none;
	}

	/*BC NAV*/
	& .builder-breadcrumb {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--cs-space-2);
		position: relative;
		& .builder-breadcrumb__node {
			position: relative;
			display: inline-flex;
			align-items: center;
			&:hover {
				& .builder-breadcrumb__menu {
					display: block!important;
				}
			}
		}

		& .builder-breadcrumb__button {
			border: none;
			background: var(--cs-color-white);
			font-size: 12px;
			cursor: pointer;
			height: 30px;
			padding: 0 .5rem;
			&:hover {
				background: var(--cs-color-primary-tint);
			}
		}

		& .builder-breadcrumb__separator {
			color: var(--cs-color-text-subtle);
			font-size: 12px;
			height: 30px;
			width: 10px;
			background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 6L8.59 7.41L13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E");
			background-position: center center;
			background-repeat: no-repeat;
		}

		& .builder-breadcrumb__menu {
			display: none;
			position: absolute;
			top: calc(100%);
			left: 0;
			z-index: 200;
			min-width: 220px;
			padding: .2rem .5rem;
			padding-bottom: .4rem;
			border: 1px solid var(--cs-color-border-control);
			border-radius: 0 0 10px 10px;
			background: var(--cs-color-white);
			box-shadow: 10px 10px 10px rgba(15, 23, 42, 0.18);
			& strong {
				margin-top: 4px;
				font-size: 11px;
				text-transform: uppercase;
				color: var(--cs-color-text-soft);
				pointer-events: none;
				&:first-child {
					margin-top: 0;
				}
			}

			& .builder-breadcrumb__menu-item {
				width: 100%;
				border: 0;
				background: transparent;
				padding: .2rem 0;
				text-align: left;
				font-size: 12px;
				cursor: pointer;
			}

			& .builder-breadcrumb__menu-item:hover {
				color: var(--cs-color-primary);
				font-weight: bold;
			}
		}
	}
}

.preview.is-focus-mode {
	& .is-focus-hidden {
		display: none !important;
	}

	& .cms-block.is-focus-ancestor {
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		min-width: 0;
	}

	& .cms-block.is-focus-ancestor > .cms-block__header, & .drop-zone.is-focus-path > .drop-zone__head {
		display: none;
	}

	& .cms-block.is-depth-collapsed {
		display: block;
	}
}

.cms-block.is-depth-collapsed {
	min-height: 0;
	padding: 0;
	border-style: dashed;
	background: var(--cs-color-surface-muted);
	& > :not(.depth-placeholder) {
		display: none !important;
	}

	& > .depth-placeholder {
		display: grid;
		gap: 6px;
		padding: 18px;
		border-radius: var(--cs-radius-lg);
		text-align: center;
		color: var(--cs-color-text-soft);
	}

	& > .depth-placeholder strong {
		color: var(--cs-color-text);
		font-size: 14px;
	}

	& > .depth-placeholder span {
		font-size: 12px;
	}

	& > .depth-placeholder button {
		justify-self: center;
		margin-top: 6px;
	}
}

.cms-block:not(.is-depth-collapsed) {
	& > .depth-placeholder {
		display: none;
	}
}

.cms-block[data-builder-kind="layout"] {
	min-width: 0;
	padding: var(--cs-space-2);
	background: rgba(255, 255, 255, .6);
	box-shadow: none;
	& > .cms-block__header {
		margin-bottom: var(--cs-space-1);
	}

	& > .cms-block__header > .cms-block__title {
		font-size: .7rem;
	}
}

/* Builder-Platzhalter fuer dynamische Module vor dem serverseitigen Preview-Render. */
.dynamic-module-placeholder {
	display: grid;
	gap: 8px;
	padding: 18px;
	border: 1px dashed var(--cs-color-border-strong);
	border-radius: var(--cs-radius-lg);
	background: var(--cs-color-surface-muted);
	color: var(--cs-color-text-muted);
}

.layout-aside-main__aside {
	flex: 2 1 0!important;
	min-width: 220px;
}

.layout-aside-main__main {
	flex: 5 1 0!important;
	min-width: 0;
}

@media (max-width: 768px) {
	.layout-aside-main {
		flex-direction: column;
	}

	.layout-aside-main__aside, .layout-aside-main__main {
		min-width: 100%!important;
	}
}

.cms-template-reference {
	position: relative;
	border: 2px dashed var(--cs-color-template);
	background: rgba(124, 58, 237, .04);
	& .cms-template-reference__notice {
		padding: .5rem;
		border-radius: 6px;
		background: var(--cs-color-surface);
		font-size: .8rem;
	}

	& .cms-template-reference__notice strong {
		display: block;
		margin-bottom: 4px;
	}

	& .cms-template-reference__name {
		font-weight: normal;
	}

	& .cms-template-reference__content {
		margin-top: .5rem;
		position: relative;
		border: none!important;
		& .cms-template-reference__missing {
			padding: .5rem;
			border-radius: 6px;
			background: var(--cs-color-surface);
			color: #991B1B;
			font-size: .8rem;
		}
	}

	& .is-template-reference-child {
		&.is-selected {
			outline: 2px solid var(--cs-color-template);
		}

		&::before {
			content: "Template";
			position: absolute;
			top: 0;
			right: 0;
			font-size: .6rem;
			line-height: 1;
			padding: 5px 5px;
			border-radius: 0 var(--cs-radius-sm) 0 8px;
			background: var(--cs-color-template);
			color: var(--cs-color-text-inverse);
			z-index: 20;
			pointer-events: none;
		}
	}
}

.is-template-root-child > .cms-block__header .js-move-prev, .is-template-root-child > .cms-block__header .js-move-next {
	display: none !important;
}

.cs-page-manager {
	display: grid;
	gap: 1.5rem;
	.cs-page-manager__cache-status {
		display: flex;
		flex-wrap: wrap;
		gap: .35rem;
		margin-top: .45rem;
	}

	.cs-page-manager__cache-hint {
		margin: 0 0 1rem;
		opacity: .75;
		font-size: .9rem;
	}

	.cs-page-manager__entry-actions {
		.cs-page-manager__cache-rebuild, .cs-page-manager__cache-rebuild-all {
			white-space: nowrap;
		}
	}

	.cs-page-manager__search {
		display: grid;
		gap: .4rem;
	}

	.cs-page-manager__search label {
		color: #334155;
		font-size: .75rem;
		font-weight: bold;
	}

	.cs-page-manager__search input, .cs-page-manager__create input {
		width: 100%;
		min-height: 2.75rem;
		padding: .55rem .75rem;
		border: 1px solid var(--cs-color-border-control);
		border-radius: .5rem;
		background: var(--cs-color-surface);
		color: var(--cs-color-text-strong);
		font: inherit;
		&:focus {
			border-color: var(--cs-color-primary);
			outline: 0;
			box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
		}
	}

	.cs-page-manager__list {
		display: grid;
		gap: .65rem;
		padding: .15rem;
	}

	.cs-page-manager__entry {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: .65rem;
		align-items: stretch;
		padding: .5rem;
		border: 1px solid var(--cs-color-border-soft);
		border-radius: .65rem;
		background: var(--cs-color-surface);
	}

	.cs-page-manager__entry.is-current {
		border-color: var(--cs-color-primary);
		background: #eff6ff;
		box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
	}

	.cs-page-manager__open {
		display: grid;
		gap: .2rem;
		justify-items: start;
		min-width: 0;
		padding: .45rem .55rem;
		border: 0;
		background: transparent;
		text-align: left;
	}

	.cs-page-manager__open:hover {
		background: var(--cs-color-surface-muted);
	}

	.cs-page-manager__open:disabled {
		cursor: default;
		opacity: 1;
	}

	.cs-page-manager__open strong {
		overflow: hidden;
		max-width: 100%;
		color: var(--cs-color-text-strong);
		font-size: .86rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cs-page-manager__open span {
		color: var(--cs-color-text-soft);
		font-family: Consolas, "Courier New", monospace;
		font-size: .68rem;
	}

	.cs-page-manager__open em {
		display: inline-flex;
		margin-top: .2rem;
		padding: .15rem .45rem;
		border-radius: 999px;
		background: var(--cs-color-primary);
		color: var(--cs-color-text-inverse);
		font-size: .62rem;
		font-style: normal;
		font-weight: bold;
	}

	.cs-page-manager__delete {
		align-self: center;
		width: 2.5rem;
		min-width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border-color: #fecaca;
		background-color: var(--cs-color-surface);
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 21q-.825 0-1.412-.587T5 19V6H4V4h5V3h6v1h5v2h-1v13q0 .825-.587 1.413T17 21zM17 6H7v13h10zM9 17h2V8H9zm4 0h2V8h-2zM7 6v13z'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 1.25rem;
		font-size: 0!important;
	}

	.cs-page-manager__delete:hover {
		background-color: var(--cs-color-danger-soft);
	}

	.cs-page-manager__empty-search {
		padding: 2rem 1rem;
		color: var(--cs-color-text-soft);
		text-align: center;
	}

	.cs-page-manager__empty-search[hidden] {
		display: none;
	}

	.cs-page-manager__create {
		display: grid;
		gap: 1rem;
		padding: 1rem;
		border: 1px solid var(--cs-color-primary-soft);
		border-radius: .75rem;
		background: #f8fbff;
	}

	.cs-page-manager__create h3 {
		margin: 0;
		color: var(--cs-color-text-strong);
		font-size: .95rem;
	}

	.cs-page-manager__create p {
		margin: .25rem 0 0;
		color: var(--cs-color-text-soft);
		font-size: .75rem;
		line-height: 1.45;
	}

	.cs-page-manager__create-controls {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: .65rem;
	}

	.cs-page-manager__create-controls button {
		border-color: var(--cs-color-primary);
		background: var(--cs-color-primary);
		color: var(--cs-color-text-inverse);
	}

	.cs-page-manager__create-controls button:hover {
		background: var(--cs-color-primary-hover);
	}

	.cs-page-manager__entry-actions {
		display: flex;
		gap: .45rem;
		align-items: center;
	}

	.cs-page-manager__metadata {
		align-self: center;
		min-height: 2.5rem;
		padding: .45rem .7rem;
		border: 1px solid var(--cs-color-border-control);
		border-radius: .45rem;
		background: var(--cs-color-surface);
		color: #334155;
		font-size: .72rem;
		font-weight: bold;
		&:hover {
			border-color: var(--cs-color-primary);
			background: #eff6ff;
			color: var(--cs-color-primary-hover);
		}
	}

	.cs-page-manager__public-title {
		overflow: hidden;
		max-width: 100%;
		color: #334155;
		font-size: .75rem;
		font-weight: bold;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cs-page-manager__route {
		color: var(--cs-color-text-soft);
		font-family: Consolas, "Courier New", monospace;
		font-size: .68rem;
	}

	.cs-page-manager__badges {
		display: flex;
		flex-wrap: wrap;
		gap: .35rem;
		margin-top: .2rem;
		span {
			display: inline-flex;
			padding: .15rem .45rem;
			border-radius: 999px;
			font-family: inherit;
			font-size: .62rem;
			font-weight: bold;
		}

		.is-homepage {
			background: #dcfce7;
			color: #166534;
		}

		.is-page-type {
			background: #f3e8ff;
			color: #7e22ce;
		}
	}
}

.cs-page-metadata {
	display: grid;
	gap: 1.5rem;
	input, select, textarea {
		width: 100%;
		min-height: 2.65rem;
		padding: .55rem .7rem;
		border: 1px solid var(--cs-color-border-control);
		border-radius: .5rem;
		background: var(--cs-color-surface);
		color: var(--cs-color-text-strong);
		font: inherit;
		&:focus {
			border-color: var(--cs-color-primary);
			outline: 0;
			box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
		}
	}

	textarea {
		resize: vertical;
		line-height: 1.5;
	}

	small {
		color: var(--cs-color-text-soft);
		font-size: .7rem;
		line-height: 1.45;
	}

	.cs-page-metadata__general {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 1rem;
		padding: 1rem;
		border: 1px solid var(--cs-color-border-soft);
		border-radius: .75rem;
		background: var(--cs-color-surface-muted);
	}

	.cs-page-metadata__field {
		display: grid;
		gap: .4rem;
		label {
			display: grid;
			gap: .4rem;
		}

		label > span {
			color: #334155;
			font-size: .75rem;
			font-weight: bold;
		}

		& > small {
			color: var(--cs-color-text-soft);
			font-size: .72rem;
		}
	}

	.cs-page-metadata__social > .cs-page-metadata__hint {
		display: block;
		margin-bottom: .5rem;
		color: var(--cs-color-text-soft);
		font-size: .72rem;
	}

	.cs-page-metadata__field--full {
		grid-column: 1 / -1;
	}

	.cs-page-metadata__homepage {
		grid-column: 1 / -1;
		display: grid;
		gap: .35rem;
		padding: .8rem;
		border: 1px solid #bbf7d0;
		border-radius: .6rem;
		background: var(--cs-color-success-soft);
		label {
			display: flex;
			gap: .6rem;
			align-items: center;
			color: #166534;
			font-size: .8rem;
			font-weight: bold;
		}

		input {
			width: auto;
			min-height: 0;
		}
	}

	.cs-page-metadata__localizations {
		display: grid;
		gap: 1rem;
		header h3 {
			margin: 0;
			color: var(--cs-color-text-strong);
			font-size: 1rem;
		}

		header p {
			margin: .25rem 0 0;
			color: var(--cs-color-text-soft);
			font-size: .75rem;
		}
	}

	.cs-page-metadata__language-panel {
		display: grid;
		gap: 1.1rem;
		padding: 1rem;
		border: 1px solid var(--cs-color-border-soft);
		border-radius: .75rem;
		background: var(--cs-color-surface);
		&[hidden] {
			display: none;
		}
	}

	.cs-page-metadata__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}

	.cs-page-metadata__slug-input {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: .45rem;
		button {
			padding: .45rem .7rem;
			border: 1px solid var(--cs-color-border-control);
			border-radius: .5rem;
			background: var(--cs-color-surface-muted);
			color: #334155;
			font-weight: bold;
		}
	}

	.cs-page-metadata__robots {
		padding: .8rem;
		border: 1px solid var(--cs-color-border-soft);
		border-radius: .6rem;
		background: var(--cs-color-surface-muted);
	}

	.cs-page-metadata__social {
		display: grid;
		gap: .9rem;
		padding: .8rem;
		border: 1px solid var(--cs-color-border-soft);
		border-radius: .6rem;
		summary {
			cursor: pointer;
			color: #334155;
			font-size: .78rem;
			font-weight: bold;
		}
	}

	.cs-page-metadata__homepage-hint {
		margin: 0;
		padding: .7rem;
		border-radius: .5rem;
		background: #ecfdf5;
		color: #166534;
		font-size: .72rem;
		font-weight: bold;
	}

	.cs-page-metadata__save {
		border-color: var(--cs-color-primary);
		background: var(--cs-color-primary);
		color: var(--cs-color-text-inverse);
		&:hover {
			background: var(--cs-color-primary-hover);
		}
	}
}

@media (max-width: 48rem) {
	.cs-page-manager {
		.cs-page-manager__create-controls {
			grid-template-columns: 1fr;
		}

		.cs-page-manager__create-controls button {
			width: 100%;
		}

		.cs-page-manager__entry {
			grid-template-columns: 1fr;
		}

		.cs-page-manager__entry-actions {
			justify-content: flex-end;
		}

		.cs-page-metadata__general, .cs-page-metadata__grid {
			grid-template-columns: 1fr;
		}

		.cs-page-metadata__field--full {
			grid-column: auto;
		}

		.cs-page-metadata__slug-input {
			grid-template-columns: 1fr;
		}
	}
}

.cs-template-manager {
	display: grid;
	grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
	gap: 1.25rem;
	min-height: 30rem;
	.cs-template-manager__sidebar {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		gap: .75rem;
		min-width: 0;
	}

	.cs-template-manager__search, .cs-template-manager__create label:not(.cs-admin-field--checkbox) {
		display: grid;
		gap: .4rem;
		color: #334155;
		font-size: .75rem;
		font-weight: bold;
	}

	.cs-template-manager__search input, .cs-template-manager__create input[type="text"] {
		width: 100%;
		min-height: 2.7rem;
		padding: .55rem .7rem;
		border: 1px solid var(--cs-color-border-control);
		border-radius: .5rem;
		background: var(--cs-color-surface);
		color: var(--cs-color-text-strong);
		font: inherit;
	}

	.cs-template-manager__search input:focus, .cs-template-manager__create input[type="text"]:focus {
		border-color: var(--cs-color-primary);
		outline: 0;
		box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
	}

	.cs-template-manager__list {
		display: grid;
		align-content: start;
		gap: .5rem;
		overflow: auto;
		max-height: 34rem;
		padding: .15rem;
		overscroll-behavior: contain;
	}

	.cs-template-manager__entry {
		display: grid;
		gap: .2rem;
		width: 100%;
		padding: .7rem;
		border: 1px solid var(--cs-color-border-soft);
		border-radius: .6rem;
		background: var(--cs-color-surface);
		text-align: left;
	}

	.cs-template-manager__entry:hover {
		border-color: #93c5fd;
		background: #f8fbff;
	}

	.cs-template-manager__entry.is-selected {
		border-color: var(--cs-color-primary);
		background: #eff6ff;
		box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
	}

	.cs-template-manager__entry strong {
		overflow: hidden;
		color: var(--cs-color-text-strong);
		font-size: .82rem;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.cs-template-manager__entry span, .cs-template-manager__entry small {
		color: var(--cs-color-text-soft);
		font-size: .68rem;
		line-height: 1.4;
	}

	.cs-template-manager__main {
		display: grid;
		align-content: start;
		gap: 1rem;
		min-width: 0;
	}

	.cs-template-manager__panel {
		display: grid;
		gap: 1rem;
		padding: 1rem;
		border: 1px solid var(--cs-color-border-soft);
		border-radius: .75rem;
		background: var(--cs-color-surface);
	}

	.cs-template-manager__panel-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
	}

	.cs-template-manager__panel-header h3 {
		margin: 0;
		color: var(--cs-color-text-strong);
		font-size: .95rem;
	}

	.cs-template-manager__panel-header p {
		margin: .2rem 0 0;
		color: var(--cs-color-text-soft);
		font-size: .7rem;
	}

	.cs-template-manager__badges {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: .35rem;
	}

	.cs-template-manager__badges span {
		padding: .2rem .5rem;
		border-radius: 999px;
		background: var(--cs-color-surface-subtle);
		color: var(--cs-color-text-muted);
		font-size: .65rem;
		font-weight: bold;
	}

	.cs-template-manager__create {
		display: grid;
		gap: .75rem;
	}

	.cs-template-manager__create button, .cs-template-manager__actions .is-primary {
		border-color: var(--cs-color-primary);
		background: var(--cs-color-primary);
		color: var(--cs-color-text-inverse);
	}

	.cs-template-manager__target, .cs-template-manager__notice, .cs-template-manager__hint, .cs-template-manager__usage {
		display: grid;
		gap: .2rem;
		padding: .75rem;
		border-radius: .6rem;
		background: var(--cs-color-surface-muted);
		color: var(--cs-color-text-muted);
		font-size: .75rem;
		line-height: 1.45;
	}

	.cs-template-manager__notice {
		background: var(--cs-color-warning-soft);
		color: var(--cs-color-warning-text);
	}

	.cs-template-manager__usage {
		background: var(--cs-color-danger-soft);
		color: #b91c1c;
	}

	.cs-template-manager__actions {
		display: flex;
		flex-wrap: wrap;
		gap: .55rem;
	}

	.cs-template-manager__actions .is-danger {
		border-color: #fecaca;
		background: var(--cs-color-surface);
		color: #b91c1c;
	}

	.cs-template-manager__empty {
		display: grid;
		gap: .3rem;
		padding: 1.5rem 1rem;
		color: var(--cs-color-text-soft);
		text-align: center;
	}

	.cs-template-manager__empty strong {
		color: #334155;
	}

	.cs-template-manager__empty--detail {
		min-height: 12rem;
		align-content: center;
	}

	.cs-template-manager__empty-search {
		padding: 1.5rem .75rem;
		color: var(--cs-color-text-soft);
		text-align: center;
	}

	.cs-template-manager__empty-search[hidden], .cs-template-manager__entry[hidden] {
		display: none;
	}
}

@container (max-width: 64rem) {
	.layout-grid.layout-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 48rem) {
	.layout-grid.layout-grid--2, .layout-grid.layout-grid--3, .layout-grid.layout-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 64rem) {
	.cs-template-manager {
		grid-template-columns: 1fr;
		.cs-template-manager__list {
			max-height: 16rem;
		}
	}
}

@media (max-width: 48rem) {
	.cs-template-manager {
		.cs-template-manager__panel-header {
			flex-direction: column;
		}

		.cs-template-manager__badges {
			justify-content: flex-start;
		}

		.cs-template-manager__actions {
			flex-direction: column;
		}

		.cs-template-manager__actions button {
			width: 100%;
		}
	}
}

.project-settings-worker {
	& .project-settings-worker__content {
		margin-top: 0;
	}

	& .project-settings-worker__summary {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1rem;
	}

	& .project-settings-worker__status-card {
		padding: 1rem;
		border: 1px solid var(--cs-color-border);
		border-radius: .75rem;
		background: var(--cs-color-surface-muted);
		& strong {
			display: block;
			margin-top: .25rem;
			font-size: var(--cs-font-size-lg);
		}
	}

	& .project-settings-worker__label {
		display: block;
		font-size: var(--cs-font-size-sm);
		opacity: .7;
	}

	& .project-settings-worker__status, & .project-settings-worker__health {
		display: inline-block;
		padding: .2rem .55rem;
		border-radius: 999px;
	}

	& .project-settings-worker__status.status-running, & .project-settings-worker__health.health-healthy {
		background: var(--cs-color-success-soft);
		color: var(--cs-color-success);
	}

	& .project-settings-worker__status.status-stopped {
		background: var(--cs-color-surface-muted);
		color: var(--cs-color-text-muted);
	}

	& .project-settings-worker__status.status-stalled, & .project-settings-worker__health.health-stalled {
		background: var(--cs-color-danger-soft);
		color: var(--cs-color-danger);
	}

	& .project-settings-worker__status.status-disabled, & .project-settings-worker__status.status-unknown, & .project-settings-worker__health.health-stale, & .project-settings-worker__health.health-unknown, & .project-settings-worker__health.health-disabled {
		background: var(--cs-color-warning-soft);
		color: var(--cs-color-warning);
	}

	& .project-settings-worker__meta {
		display: flex;
		flex-wrap: wrap;
		gap: .5rem 1rem;
		margin-top: 1rem;
		font-size: var(--cs-font-size-sm);
		opacity: .8;
	}

	& .project-settings-worker__notice, & .project-settings-worker__error {
		display: grid;
		gap: .25rem;
		margin-top: 1rem;
		padding: .75rem 1rem;
		border-radius: .75rem;
		background: var(--cs-color-surface-muted);
	}

	& .project-settings-worker__error {
		background: var(--cs-color-danger-soft);
		color: var(--cs-color-danger);
	}

	& .project-settings-worker__monitor-grid {
		display: grid;
		grid-template-columns: minmax(18rem, .8fr) minmax(24rem, 1.2fr);
		gap: 1rem;
		margin-top: 1rem;
	}

	& .project-settings-worker__activity, & .project-settings-worker__events {
		min-width: 0;
		padding: 1rem;
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-white);
		& h4 {
			margin: 0 0 .75rem;
		}
	}

	& .project-settings-worker__current {
		display: grid;
		gap: .5rem;
		& > div:first-child {
			display: flex;
			align-items: baseline;
			justify-content: space-between;
			gap: .75rem;
			& span {
				color: var(--cs-color-text-soft);
				font-size: var(--cs-font-size-sm);
			}
		}

		& p {
			margin: 0;
		}
	}

	& .project-settings-worker__event-meta, & .project-settings-worker__empty {
		color: var(--cs-color-text-soft);
		font-size: var(--cs-font-size-sm);
	}

	& .project-settings-worker__event-list {
		display: grid;
		gap: .35rem;
		max-height: 26rem;
		overflow: auto;
	}

	& .project-settings-worker__event {
		display: grid;
		grid-template-columns: 9rem minmax(0, 1fr);
		gap: .75rem;
		padding: .55rem .65rem;
		border-radius: var(--cs-radius-sm);
		background: var(--cs-color-surface-muted);
		&.is-error {
			outline: 1px solid var(--cs-color-warning);
		}

		& time, & span, & small {
			color: var(--cs-color-text-soft);
			font-size: var(--cs-font-size-sm);
		}

		& div {
			min-width: 0;
		}

		& strong {
			margin-right: .5rem;
		}

		& p {
			margin: .2rem 0;
			overflow-wrap: anywhere;
		}
	}

	& .project-settings-worker__workers-title {
		margin: 1.25rem 0 .5rem;
	}

	& .project-settings-worker__list {
		display: grid;
		gap: .5rem;
	}

	& .project-settings-worker__row {
		display: grid;
		gap: .35rem;
		padding: .75rem 1rem;
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-white);
		& p {
			margin: 0;
			color: var(--cs-color-text-soft);
			font-size: var(--cs-font-size-base);
		}

		&.is-disabled {
			opacity: .6;
		}
	}

	& .project-settings-worker__row-main, & .project-settings-worker__row-main > div, & .project-settings-worker__row-stats {
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		gap: .35rem .75rem;
	}

	& .project-settings-worker__row-main {
		justify-content: space-between;
		& > div > span, & .project-settings-worker__worker-state {
			color: var(--cs-color-text-soft);
			font-size: var(--cs-font-size-sm);
		}
	}

	& .project-settings-worker__row-stats {
		font-size: var(--cs-font-size-sm);
		color: var(--cs-color-text-soft);
	}

	& .project-settings-worker__worker-state {
		font-weight: bold;
	}

	@media (max-width: 900px) {
		& .project-settings-worker__summary, & .project-settings-worker__monitor-grid {
			grid-template-columns: 1fr 1fr;
		}
	}

	@media (max-width: 640px) {
		& .project-settings-worker__summary, & .project-settings-worker__monitor-grid {
			grid-template-columns: 1fr;
		}

		& .project-settings-worker__event {
			grid-template-columns: 1fr;
		}
	}
}

.project-settings-project-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.project-settings-project-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

.project-settings-project-card.is-archived {
	opacity: .78;
}

.project-settings-project-list, .project-settings-project-history-list {
	display: grid;
	gap: 12px;
}

.project-settings-project-card {
	border: 1px solid var(--cs-color-border, #d9dee7);
	border-radius: 8px;
	padding: 14px;
	background: var(--cs-color-surface, #fff);
	&.is-current {
		outline: 2px solid currentColor;
		outline-offset: 1px;
	}
}

.project-settings-project-card__head, .project-settings-project-card__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.project-settings-project-card__head > div:first-child {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.project-settings-project-card__id, .project-settings-project-card__url, .project-settings-project-metric span, .project-settings-project-history-row small {
	font-size: .8rem;
	opacity: .72;
}

.project-settings-project-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-end;
}

.project-settings-project-badge {
	display: inline-flex;
	align-items: center;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: .78rem;
	line-height: 1.5;
	&.is-current {
		font-weight: 700;
	}
}

.project-settings-project-badge.is-disabled, .project-settings-project-badge.is-archived {
	opacity: .7;
}

.project-settings-project-card__metrics {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-top: 12px;
}

.project-settings-project-metric {
	display: grid;
	gap: 3px;
	min-width: 0;
	padding: 8px 10px;
	border-radius: 6px;
	background: rgba(127, 127, 127, .08);
	& strong {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.project-settings-project-availability {
	display: grid;
	gap: 4px;
	margin-top: 10px;
	padding: 9px 10px;
	border-radius: 6px;
	background: rgba(127, 127, 127, .08);
	&.is-failed {
		border: 1px solid currentColor;
	}

	& small {
		opacity: .72;
	}
}

.project-settings-project-card__url {
	margin-top: 10px;
	overflow-wrap: anywhere;
}

.project-settings-project-card__actions {
	margin-top: 12px;
	justify-content: flex-end;
}

.project-settings-project-empty {
	padding: 16px;
	border: 1px dashed var(--cs-color-border, #d9dee7);
	border-radius: 8px;
	&.is-error {
		font-weight: 600;
	}
}

.project-settings-project-history-row {
	display: grid;
	grid-template-columns: minmax(180px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr);
	gap: 12px;
	align-items: center;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--cs-color-border, #d9dee7);
	border-radius: 8px;
	background: var(--cs-color-surface, #fff);
	text-align: left;
	cursor: pointer;
	&:hover:not(:disabled) {
		background: rgba(127, 127, 127, .06);
	}

	&:disabled {
		cursor: default;
		opacity: .6;
	}

	& > span {
		display: grid;
		gap: 3px;
		min-width: 0;
	}
}

.project-settings-project-history-row__name strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 1100px) {
	.project-settings-project-card__metrics {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.project-settings-project-history-row {
		grid-template-columns: 1fr;
	}
}

/* Phase 132B: project-scoped notification mail templates. */
.project-settings-mail-templates__layout {
	display: grid;
	grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
	gap: 20px;
	align-items: stretch;
	height: min(64vh, 720px);
	min-height: 420px;
	overflow: hidden;
}

.project-settings-mail-templates__list {
	display: grid;
	align-content: start;
	gap: 14px;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding-right: 6px;
}

.project-settings-mail-template-group {
	display: grid;
	gap: 6px;
	& h4 {
		margin: 0;
		font-size: .78rem;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--cs-color-text-soft, #667085);
	}
}

.project-settings-mail-template-link {
	appearance: none;
	width: 100%;
	border: 1px solid var(--cs-color-border, #dfe3e8);
	border-radius: 8px;
	background: var(--cs-color-surface, #fff);
	color: inherit;
	padding: 10px 12px;
	text-align: left;
	cursor: pointer;
	display: grid;
	gap: 3px;
	& span {
		font-weight: 650;
		line-height: 1.3;
	}

	& small {
		color: var(--cs-color-text-soft, #667085);
		overflow-wrap: anywhere;
	}

	&:hover, &.is-active {
		border-color: var(--cs-color-primary, #2563eb);
		background: color-mix(in srgb, var(--cs-color-primary, #2563eb) 6%, var(--cs-color-surface, #fff));
	}

	&.is-active {
		box-shadow: inset 3px 0 0 var(--cs-color-primary, #2563eb);
	}
}

.project-settings-mail-template-editor {
	min-width: 0;
	min-height: 0;
	display: grid;
	align-content: start;
	gap: 16px;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	padding-right: 6px;
}

.project-settings-mail-template-editor__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	& h4 {
		margin: 3px 0 4px;
		font-size: 1.12rem;
	}

	& p {
		margin: 0;
		color: var(--cs-color-text-soft, #667085);
	}
}

.project-settings-mail-template-editor__eyebrow {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cs-color-primary, #2563eb);
}

.project-settings-mail-template-field {
	border: 1px solid var(--cs-color-border, #dfe3e8);
	border-radius: 10px;
	padding: 14px;
	display: grid;
	gap: 12px;
	background: var(--cs-color-surface, #fff);
	& label {
		display: grid;
		gap: 6px;
		font-weight: 650;
	}

	& textarea {
		width: 100%;
		resize: vertical;
		min-height: 48px;
	}
}

.project-settings-mail-template-field__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	& > div {
		min-width: 0;
		display: grid;
		gap: 3px;
	}

	& code {
		font-size: .75rem;
		color: var(--cs-color-text-soft, #667085);
		overflow-wrap: anywhere;
	}
}

.project-settings-mail-template-badge {
	flex: 0 0 auto;
	border-radius: 999px;
	padding: 4px 8px;
	font-size: .75rem;
	font-weight: 700;
	background: var(--cs-color-surface-subtle, #f4f6f8);
	color: var(--cs-color-text-soft, #667085);
	&.is-override {
		background: color-mix(in srgb, var(--cs-color-primary, #2563eb) 12%, transparent);
		color: var(--cs-color-primary, #2563eb);
	}
}

.project-settings-mail-template-standard {
	display: grid;
	gap: 5px;
	& > span {
		font-size: .78rem;
		font-weight: 650;
		color: var(--cs-color-text-soft, #667085);
	}

	& pre {
		margin: 0;
		padding: 10px 12px;
		border-radius: 7px;
		background: var(--cs-color-surface-subtle, #f4f6f8);
		white-space: pre-wrap;
		overflow-wrap: anywhere;
		font: inherit;
		color: var(--cs-color-text-soft, #667085);
	}
}

.project-settings-mail-template-placeholders {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	font-size: .8rem;
	color: var(--cs-color-text-soft, #667085);
	& code {
		padding: 2px 5px;
		border-radius: 4px;
		background: var(--cs-color-surface-subtle, #f4f6f8);
	}
}

.project-settings-mail-template-warning {
	padding: 9px 11px;
	border-radius: 7px;
	background: color-mix(in srgb, var(--cs-color-warning, #f59e0b) 12%, transparent);
	color: var(--cs-color-text-strong, #101828);
	font-size: .85rem;
}

.project-settings-mail-template-field__actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

.project-settings-mail-template-preview {
	border: 1px dashed var(--cs-color-border, #dfe3e8);
	border-radius: 10px;
	padding: 14px;
	background: var(--cs-color-surface-muted, #f8fafc);
	& h4 {
		margin: 0 0 4px;
	}

	& > p {
		margin: 0 0 12px;
		color: var(--cs-color-text-soft, #667085);
	}

	& pre {
		margin: 8px 0 0;
		white-space: pre-wrap;
		overflow-wrap: anywhere;
		font: inherit;
	}
}

.project-settings-mail-template-preview__subject {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cs-color-border, #dfe3e8);
}

.project-settings-mail-templates__empty {
	padding: 16px;
	border: 1px dashed var(--cs-color-border, #dfe3e8);
	border-radius: 8px;
	color: var(--cs-color-text-soft, #667085);
	&.is-error {
		color: var(--cs-color-danger, #b42318);
	}

	&.is-warning {
		color: var(--cs-color-warning-text, #92400e);
	}
}

@media (max-width: 900px) {
	.project-settings-mail-templates__layout {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.project-settings-mail-templates__list, .project-settings-mail-template-editor {
		max-height: min(52vh, 520px);
		overflow-y: auto;
	}
}

.project-settings-maintenance {
	& .project-settings-maintenance__content {
		margin-top: 0;
	}

	& .project-settings-maintenance__summary {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		gap: .75rem;
		margin-bottom: 1rem;
	}

	& .project-settings-maintenance__metric {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: .75rem;
		padding: .75rem 1rem;
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-surface-muted);
		& span {
			font-size: var(--cs-font-size-sm);
			color: var(--cs-color-text-soft);
		}

		& strong {
			font-size: var(--cs-font-size-lg);
		}
	}

	& .project-settings-maintenance__jobs {
		display: grid;
		gap: .75rem;
	}

	& .project-settings-maintenance__job {
		display: grid;
		gap: .75rem;
		padding: 1rem;
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-white);
		& > header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 1rem;
			& p {
				margin: .25rem 0 0;
				color: var(--cs-color-text-soft);
			}
		}

		& > footer {
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;
			gap: .5rem;
			padding-top: .25rem;
		}
	}

	& .project-settings-maintenance__status {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
		padding: .2rem .55rem;
		border-radius: 999px;
		font-size: var(--cs-font-size-sm);
		font-weight: bold;
		background: var(--cs-color-surface-muted);
		color: var(--cs-color-text-muted);
		&.status-ok {
			background: var(--cs-color-success-soft);
			color: var(--cs-color-success);
		}

		&.status-attention {
			background: var(--cs-color-warning-soft);
			color: var(--cs-color-warning);
		}

		&.status-error {
			background: var(--cs-color-danger-soft);
			color: var(--cs-color-danger);
		}
	}

	& .project-settings-maintenance__meta {
		display: flex;
		flex-wrap: wrap;
		gap: .35rem .75rem;
		font-size: var(--cs-font-size-sm);
		color: var(--cs-color-text-soft);
		& span {
			display: inline-flex;
			align-items: center;
			gap: .25rem;
		}

		& .is-due {
			font-weight: bold;
		}
	}

	& .project-settings-maintenance__findings {
		display: grid;
		gap: .4rem;
		margin: 0;
		padding: 0;
		list-style: none;
		& li {
			display: grid;
			grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
			gap: .75rem;
			padding: .55rem .75rem;
			border-radius: var(--cs-radius-sm);
			background: var(--cs-color-surface-muted);
		}
	}

	& .project-settings-maintenance__error, & .project-settings-maintenance__repairable, & .project-settings-maintenance__no-findings, & .project-settings-maintenance__empty {
		padding: .65rem .8rem;
		border-radius: var(--cs-radius-sm);
		background: var(--cs-color-surface-muted);
	}

	& .project-settings-maintenance__error, & .project-settings-maintenance__empty.is-error {
		color: var(--cs-color-danger);
	}

	& .project-settings-maintenance__repairable {
		color: var(--cs-color-warning);
		font-weight: bold;
	}

	& .project-settings-maintenance__history {
		font-size: var(--cs-font-size-sm);
		& summary {
			cursor: pointer;
			color: var(--cs-color-text-soft);
		}

		& > div {
			display: grid;
			gap: .35rem;
			margin-top: .5rem;
		}

		& span {
			display: grid;
			grid-template-columns: minmax(9rem, 1fr) auto auto auto;
			gap: .5rem;
			align-items: center;
			padding: .4rem .6rem;
			border-radius: var(--cs-radius-sm);
			background: var(--cs-color-surface-muted);
			& em {
				font-style: normal;
				color: var(--cs-color-text-soft);
			}
		}
	}

	& .project-settings-maintenance__tests {
		font-size: var(--cs-font-size-sm);
		& summary {
			cursor: pointer;
			color: var(--cs-color-text-soft);
		}

		& code {
			display: block;
			margin-top: .5rem;
			padding: .5rem .75rem;
			border-radius: var(--cs-radius-sm);
			background: var(--cs-color-surface-muted);
			white-space: normal;
			overflow-wrap: anywhere;
		}
	}
}

@media (max-width: 48rem) {
	.project-settings-maintenance {
		& .project-settings-maintenance__job > header, & .project-settings-maintenance__findings li, & .project-settings-maintenance__history span {
			display: grid;
			grid-template-columns: 1fr;
		}
	}
}

/* Phase 145: Wartungsprüfungen und delegierte Fach-Worker klar trennen. */
.project-settings-maintenance {
	& .project-settings-maintenance__section {
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-md);
		background: var(--cs-color-white);
		overflow: hidden;
		margin-bottom: .85rem;
		& > summary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			padding: .9rem 1rem;
			cursor: pointer;
			background: var(--cs-color-surface-muted);
			list-style: none;
			&::-webkit-details-marker {
				display: none;
			}

			& > span {
				display: grid;
				gap: .2rem;
			}

			& small {
				font-weight: normal;
				color: var(--cs-color-text-soft);
			}

			& > b {
				min-width: 2rem;
				padding: .2rem .55rem;
				border-radius: 999px;
				background: var(--cs-color-surface-muted);
				text-align: center;
			}
		}

		& > .project-settings-maintenance__jobs, & > .project-settings-maintenance__delegated-list {
			padding: .75rem;
		}
	}

	& .project-settings-maintenance__section > .project-settings-maintenance__jobs {
		& .project-settings-maintenance__job {
			box-shadow: none;
		}
	}

	& .project-settings-maintenance__delegated-list {
		display: grid;
		gap: .45rem;
	}

	& .project-settings-maintenance__delegated-row {
		display: grid;
		gap: .45rem;
		padding: .7rem .8rem;
		border: 1px solid var(--cs-color-border);
		border-radius: var(--cs-radius-sm);
		background: var(--cs-color-white);
	}

	& .project-settings-maintenance__delegated-main {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 1rem;
		& > div {
			display: grid;
			gap: .2rem;
			min-width: 0;
		}

		& small {
			color: var(--cs-color-text-soft);
		}
	}

	& .project-settings-maintenance__worker-status {
		display: inline-flex;
		align-items: center;
		white-space: nowrap;
		padding: .18rem .5rem;
		border-radius: 999px;
		font-size: var(--cs-font-size-sm);
		font-weight: bold;
		background: var(--cs-color-surface-muted);
		color: var(--cs-color-text-muted);
		&.worker-status-active, &.worker-status-ok {
			background: var(--cs-color-success-soft);
			color: var(--cs-color-success);
		}

		&.worker-status-attention, &.worker-status-scheduler_unhealthy, &.worker-status-no_activity {
			background: var(--cs-color-warning-soft);
			color: var(--cs-color-warning);
		}

		&.worker-status-error, &.worker-status-unregistered {
			background: var(--cs-color-danger-soft);
			color: var(--cs-color-danger);
		}
	}

	& .project-settings-maintenance__delegated-meta {
		display: flex;
		flex-wrap: wrap;
		gap: .25rem .85rem;
		font-size: var(--cs-font-size-sm);
		color: var(--cs-color-text-soft);
	}

	& .project-settings-maintenance__delegated-error {
		padding: .5rem .65rem;
		border-radius: var(--cs-radius-sm);
		background: var(--cs-color-danger-soft);
		color: var(--cs-color-danger);
		font-size: var(--cs-font-size-sm);
	}

	& .project-settings-maintenance__status.status-observed {
		background: var(--cs-color-surface-muted);
		color: var(--cs-color-text-muted);
	}
}

@media (max-width: 48rem) {
	.project-settings-maintenance {
		& .project-settings-maintenance__delegated-main {
			display: grid;
			grid-template-columns: 1fr;
		}

		& .project-settings-maintenance__worker-status {
			justify-self: start;
		}
	}
}

/* CS2 editor canvas links: navigation belongs to preview/public output. */
#preview .cms-block a {
	pointer-events: none;
}