:root { color-scheme: dark; }
html, body {
margin: 0;
height: 100%;
background: #111;
color: #ddd;
font-family: system-ui, sans-serif;
overflow: hidden;
}

body {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
min-height: 100vh;
min-height: 100dvh;
}

.hidden {
display: none !important;
}

#bar {
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
padding: 10px;
background: #1b1b1b;
border-bottom: 1px solid #222;
}

.actionMenu {
	position: relative;
}

.actionMenuButton {
	padding: 8px 14px;
	border: 1px solid #2a2a2a;
	border-radius: 999px;
	background: #101010;
	color: #f0f0f0;
	font-size: 13px;
	font-weight: 600;
}

.actionMenuButton:hover {
	border-color: #3a3a3a;
	background: #181818;
}

.actionMenuButton:focus-visible {
	outline: none;
	border-color: #4a8d87;
	box-shadow: 0 0 0 1px rgba(123, 213, 203, 0.45);
}

button {
padding: 6px 10px;
cursor: pointer;
}

#main {
	display: grid;
	grid-template-columns: 280px 1fr 380px;
	grid-template-rows: 1fr;
	min-height: 0;
}

#main > * {
min-height: 0;
}

#left, #right {
background: #151515;
overflow: auto;
}

#left {
border-right: 1px solid #222;
}

#right {
border-left: 1px solid #222;
}

.paneTitle {
position: sticky;
top: 0;
padding: 10px;
background: #161616;
border-bottom: 1px solid #222;
font-weight: 600;
z-index: 1;
}

#tree {
padding: 8px;
}

.treeItem {
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
user-select: none;
display: flex;
gap: 8px;
align-items: center;
justify-content: space-between;
border: 1px solid transparent;
}

.treeItem:hover {
background: #202020;
}

.treeItem.selected {
background: #2a2a2a;
outline: 1px solid #333;
}

.treeItemHidden {
opacity: 0.58;
}

.treeType {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
color: #bbb;
}

.treeItemMain {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}

.treeVisibilityButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	flex: 0 0 auto;
}

.treeItem:hover .treeVisibilityButton,
.treeItem:focus-within .treeVisibilityButton,
.treeItem.treeItemHidden .treeVisibilityButton {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.treeVisibilityButton:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: #2d2d2d;
}

.treeVisibilityButton:focus-visible {
	outline: none;
	border-color: #3a3a3a;
	box-shadow: 0 0 0 1px #3a3a3a;
}

.treeVisibilityIcon {
	width: 16px;
	height: 16px;
	object-fit: contain;
	pointer-events: none;
}

.treeItem.dragging {
opacity: 0.45;
}

.treeItem.dropInto {
background: #183042;
border-color: #2b526c;
}

.treeContextMenu {
position: fixed;
z-index: 1000;
min-width: 220px;
max-width: min(320px, calc(100vw - 16px));
background: #151515;
border: 1px solid #2a2a2a;
border-radius: 12px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
padding: 8px;
}

.treeContextMenuPanel {
display: flex;
flex-direction: column;
gap: 8px;
}

.treeContextMenuGroup {
display: flex;
flex-direction: column;
gap: 6px;
}

.treeContextMenuGroupSubmenu {
position: relative;
}

.treeContextMenuGroupSubmenu::after {
content: "";
position: absolute;
top: 0;
right: -12px;
bottom: 0;
width: 12px;
}

.treeContextMenuSubmenu {
display: none;
flex-direction: column;
gap: 4px;
position: absolute;
top: 0;
left: calc(100% + 8px);
min-width: 220px;
max-height: min(320px, 50vh);
overflow: auto;
padding: 8px;
background: #151515;
border: 1px solid #2a2a2a;
border-radius: 12px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
z-index: 1;
}

.treeContextMenuGroupSubmenu.treeContextMenuGroupSubmenuOpen .treeContextMenuSubmenu {
display: flex;
}

.treeContextMenuItem {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
padding: 8px 10px;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: #ddd;
font: inherit;
text-align: left;
text-decoration: none;
font-size: 13px;
cursor: pointer;
}

.treeContextMenuDivider,
.actionMenuDivider {
height: 1px;
margin: 6px 2px;
background: #262626;
}

.treeContextMenuSubmenuTrigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.treeContextMenuSubmenuCaret {
color: #8d8d8d;
font-size: 15px;
line-height: 1;
}

.treeContextMenuItem:hover:not(:disabled) {
background: #202020;
border-color: transparent;
}

.treeContextMenuItem:focus-visible {
outline: none;
background: #202020;
border-color: transparent;
}

.treeContextMenuItemDanger {
color: #ff6b6b;
}

.treeContextMenuItemDanger:hover:not(:disabled) {
color: #ff8a8a;
background: rgba(255, 107, 107, 0.12);
border-color: rgba(255, 107, 107, 0.3);
}

.treeContextMenuItem:disabled {
opacity: 0.45;
cursor: not-allowed;
}

#center {
background: #000;
overflow: hidden;
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}

#viewBar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-bottom: 1px solid #1f1f1f;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%),
		#0f0f0f;
}

.viewTabs {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex-wrap: wrap;
	flex: 1 1 auto;
}

.workspaceTools {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.renderSizeControls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
}

.renderSizeLabel {
	font-size: 12px;
	font-weight: 600;
	color: #a9a9a9;
}

.renderSizeSelect {
	min-width: 130px;
	padding: 7px 10px;
}

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

.renderSizeCustom input {
	width: 78px;
	padding: 7px 8px;
}

.renderSizeSeparator {
	color: #7c7c7c;
	font-size: 12px;
	font-weight: 600;
}

.workspaceToolButton {
	padding: 7px 12px;
	border: 1px solid #2a2a2a;
	border-radius: 999px;
	background: #101010;
	color: #d6d6d6;
	font-size: 12px;
	font-weight: 600;
}

.workspaceToolButton:hover {
	border-color: #3a3a3a;
	background: #181818;
}

.workspaceToolButton:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.workspaceToolButton:disabled:hover {
	border-color: #2a2a2a;
	background: #101010;
}

.viewTabsHint {
	font-size: 12px;
	color: #888;
}

.viewTab {
	padding: 8px 12px;
	border: 1px solid #2a2a2a;
	border-radius: 999px;
	background: #111;
	color: #cfcfcf;
	font-size: 12px;
	font-weight: 600;
}

.viewTab:hover {
	border-color: #3a3a3a;
	background: #181818;
}

.viewTabActive {
	border-color: #355a5f;
	background:
		linear-gradient(180deg, rgba(151, 245, 234, 0.08) 0%, rgba(151, 245, 234, 0.01) 100%),
		#152122;
	color: #a7fff2;
}

#canvasStage {
	position: relative;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at top, rgba(255, 255, 255, 0.03), transparent 38%),
		#060606;
	cursor: grab;
}

#canvasStage.workspacePanning {
	cursor: grabbing;
}

#workspace {
	position: absolute;
	inset: 0;
	transform-origin: 0 0;
	will-change: transform;
}

#workspaceGrid {
	position: absolute;
	inset: -4000px;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position: center center;
	pointer-events: none;
}

.editorCanvas {
	position: absolute;
	display: block;
	width: 800px;
	height: 500px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
		#050505;
	border: 1px solid #242424;
	border-radius: 0;
	box-shadow:
		0 18px 48px rgba(0, 0, 0, 0.42),
		0 0 0 1px rgba(255, 255, 255, 0.03);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	touch-action: none;
}

.editorCanvasRound {
	border-radius: 50%;
}

.editorCanvasActive {
	border-color: #355a5f;
	box-shadow:
		0 22px 58px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(123, 213, 203, 0.32),
		0 0 30px rgba(75, 181, 170, 0.12);
}

.editorCanvasInactive {
	filter: saturate(0.9);
}

@media (max-width: 1200px) {
	#viewBar {
		flex-wrap: wrap;
	}

	.workspaceTools {
		width: auto;
		justify-content: space-between;
		margin-left: 0;
	}

	.renderSizeControls {
		width: 100%;
		margin-left: 0;
		flex-wrap: wrap;
	}
}

#selectionOverlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}

.selectionBounds,
.hoverBounds {
position: absolute;
box-sizing: border-box;
border-radius: 0;
}

.selectionBounds {
border: 2px solid rgba(255, 68, 68, 0.95);
background: rgba(255, 48, 48, 0.08);
box-shadow:
	0 0 0 1px rgba(255, 120, 120, 0.18),
	0 0 18px rgba(255, 48, 48, 0.24),
	inset 0 0 18px rgba(255, 48, 48, 0.08);
	transform-origin: center;
	animation: selectionBoundsPulse 1.2s ease-in-out infinite;
}

@keyframes selectionBoundsPulse {
	0% {
		opacity: 0.55;
		box-shadow:
			0 0 0 1px rgba(255, 120, 120, 0.12),
			0 0 10px rgba(255, 48, 48, 0.18),
			inset 0 0 10px rgba(255, 48, 48, 0.05);
	}

	50% {
		opacity: 1;
		box-shadow:
			0 0 0 1px rgba(255, 140, 140, 0.28),
			0 0 28px rgba(255, 48, 48, 0.35),
			inset 0 0 24px rgba(255, 48, 48, 0.12);
	}

	100% {
		opacity: 0.72;
		box-shadow:
			0 0 0 1px rgba(255, 120, 120, 0.18),
			0 0 18px rgba(255, 48, 48, 0.24),
			inset 0 0 18px rgba(255, 48, 48, 0.08);
	}
}

.hoverBounds {
border: 2px solid rgba(255, 214, 64, 0.95);
background: rgba(255, 214, 64, 0.1);
box-shadow:
	0 0 0 1px rgba(255, 229, 128, 0.24),
	0 0 14px rgba(255, 214, 64, 0.22),
	inset 0 0 14px rgba(255, 214, 64, 0.08);
}

#panels {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}

.floatingPanel {
position: absolute;
width: 340px;
max-width: calc(100% - 16px);
max-height: calc(100% - 16px);
overflow: hidden;
border: 1px solid #2a2a2a;
border-radius: 12px;
background: #131313;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
pointer-events: auto;
}

.floatingPanelHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
background: #1b1b1b;
border-bottom: 1px solid #262626;
cursor: move;
user-select: none;
}

.floatingPanelTitle {
font-weight: 600;
font-size: 13px;
}

.floatingPanelActions {
display: flex;
gap: 6px;
}

.floatingPanelClose {
	padding: 5px 9px;
	border-radius: 8px;
	border: 1px solid #2e2e2e;
	background: #101010;
	color: #d9d9d9;
	font-size: 12px;
}

.floatingPanelClose:hover {
	border-color: #3b3b3b;
	background: #181818;
}

.floatingPanelBody {
max-height: 60vh;
overflow: auto;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}

#inspector {
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
background: #151515;
}

.inspectorSection {
	border-bottom: 1px solid #2a2a2a;
	background: transparent;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.inspectorSectionHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 10px 0;
}

.inspectorSectionTitle {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #e2e2e2;
}

.inspectorFields {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 12px 10px;
}

.propertyField {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}

.propertyFieldWide {
grid-column: 1 / -1;
}

.uiRuleDisabled {
	opacity: 0.6;
}

.propertyLabel {
		font-size: 12px;
		font-weight: 600;
		color: #d2d2d2;
}

.propertyLabelWithAction {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.propertyLabelText {
	min-width: 0;
	flex: 1 1 auto;
}

.nullableToggleButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	background: #101010;
	flex: 0 0 auto;
}

.nullableToggleButton:hover {
	border-color: #3a3a3a;
	background: #171717;
}

.nullableToggleButton:focus-visible {
	outline: none;
	border-color: #4a8d87;
	box-shadow: 0 0 0 1px rgba(123, 213, 203, 0.45);
}

.nullableToggleIcon {
	width: 14px;
	height: 14px;
	object-fit: contain;
	pointer-events: none;
}

.nullablePropertyHint {
	font-size: 12px;
	color: #8d8d8d;
	padding: 2px 0 0;
}

.propertySelect {
	width: 100%;
}

.imageAssetWidget {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.imageAssetWidgetInputRow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
}

.imageAssetWidgetActions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.imageAssetWidgetButton {
	flex: 0 0 auto;
}

.imageAssetWidgetSelect {
	flex: 1 1 220px;
	min-width: 0;
}

.imageAssetWidgetHint {
	font-size: 12px;
	color: #8d8d8d;
}

.imageAssetWidgetPreview {
	display: block;
	width: 100%;
	max-height: 180px;
	object-fit: contain;
	border: 1px solid #2a2a2a;
	border-radius: 12px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%),
		#0f0f0f;
	padding: 10px;
	box-sizing: border-box;
}

.propertySelect .dropdown-button {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid #2a2a2a;
	background: #0f0f0f;
	color: #ddd;
	outline: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	font-size: 13px;
}

.propertySelect .dropdown-button:hover {
		border-color: #3a3a3a;
}

.segmentedSelect {
	display: inline-flex;
	width: 100%;
	min-width: 0;
	padding: 3px;
	gap: 3px;
	border: 1px solid #2a2a2a;
	border-radius: 12px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%),
		#111;
	box-sizing: border-box;
}

.segmentedSelectOption {
	flex: 1 1 0;
	min-width: 0;
	min-height: 42px;
	padding: 10px 12px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #9aa0a4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.segmentedSelectOption:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #d8dcdc;
}

.segmentedSelectOption:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(150, 246, 235, 0.65);
}

.segmentedSelectOption.selected {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
		#2a2f2c;
	color: #a7fff2;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.segmentedSelectIcon {
	width: 20px;
	height: 20px;
	object-fit: contain;
	filter: grayscale(1) brightness(0.72);
	opacity: 0.95;
	pointer-events: none;
}

.segmentedSelectOption.selected .segmentedSelectIcon {
	filter: brightness(0) saturate(100%) invert(84%) sepia(18%) saturate(873%) hue-rotate(116deg) brightness(101%) contrast(94%);
}

.segmentedSelectText {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.segmentedSelectIconOnly .segmentedSelectOption {
	padding: 10px 8px;
}

.justifyWidget {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: stretch;
}

.justifyPreview {
	position: relative;
	min-height: 42px;
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%),
		#101010;
	overflow: hidden;
}

.justifyPreviewRail {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50%;
	height: 14px;
	transform: translateY(-50%);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.justifyPreviewBox {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-left: -6px;
	transform: translateY(-50%);
	border-radius: 4px;
	background: linear-gradient(180deg, #b8fff5 0%, #76d9ce 100%);
	box-shadow: 0 0 0 1px rgba(184, 255, 245, 0.14), 0 4px 10px rgba(118, 217, 206, 0.18);
	transition:
		left 320ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 320ms ease;
	will-change: left, transform;
}

.justifyPreview:hover .justifyPreviewBox {
	transform: translateY(-50%) scale(1.06);
}

.justifyControls {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	background: #101010;
	overflow: hidden;
}

.justifyStepButton,
.justifyNameButton {
	border: 0;
	background: transparent;
	color: #d7d7d7;
	font-size: 12px;
	font-weight: 600;
}

.justifyStepButton {
	width: 34px;
	min-width: 34px;
}

.justifyNameButton {
	min-width: 132px;
	padding: 0 12px;
	white-space: nowrap;
}

.justifyStepButton:hover,
.justifyNameButton:hover {
	background: rgba(255, 255, 255, 0.05);
}

.justifyStepButton:focus-visible,
.justifyNameButton:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 1px rgba(150, 246, 235, 0.65);
}

input[type="text"], input[type="number"], textarea, select {
	width: 100%;
	box-sizing: border-box;
	padding: 8px;
border-radius: 8px;
border: 1px solid #2a2a2a;
background: #0f0f0f;
color: #ddd;
outline: none;
}

input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
border-color: #3a3a3a;
box-shadow: 0 0 0 1px #3a3a3a;
}

textarea {
min-height: 90px;
resize: vertical;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 12px;
}

.colorRowButton {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #2a2a2a;
	border-radius: 12px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%),
		#101010;
	color: #e2e2e2;
	text-align: left;
}

.colorRowButton:hover {
	border-color: #3a3a3a;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%),
		#151515;
}

.colorRowButton:focus-visible {
	outline: none;
	border-color: #4a8d87;
	box-shadow: 0 0 0 1px rgba(123, 213, 203, 0.45);
}

.colorRowSwatch {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.18),
		0 3px 10px rgba(0, 0, 0, 0.18);
}

.colorRowText {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.colorRowName {
	font-size: 13px;
	font-weight: 600;
	color: #e4e4e4;
}

.colorSelectorWidget {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.colorSelectorCanvasWrap {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #2a2a2a;
	background: #0f0f0f;
}

.colorSelectorCanvas {
	display: block;
	width: 100%;
	height: 160px;
	cursor: crosshair;
}

.colorSelectorCanvasThumb {
	position: absolute;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	margin-top: -7px;
	border-radius: 999px;
	border: 2px solid white;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

.colorSelectorHueRow {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.colorSelectorHueSlider {
	appearance: none;
	width: 100%;
	height: 14px;
	border-radius: 999px;
	outline: none;
	border: 1px solid #2a2a2a;
	background: linear-gradient(
		90deg,
		#ff0000 0%,
		#ffff00 16.66%,
		#00ff00 33.33%,
		#00ffff 50%,
		#0000ff 66.66%,
		#ff00ff 83.33%,
		#ff0000 100%
	);
}

.colorSelectorHueSlider::-webkit-slider-thumb {
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 2px solid #fff;
	background: transparent;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.colorSelectorHueSlider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 2px solid #fff;
	background: transparent;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.colorSelectorInputs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.colorSelectorInputGroup {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.colorSelectorInputLabel {
	font-size: 11px;
	font-weight: 700;
	color: #96a0a3;
	text-transform: lowercase;
}

.colorSelectorInput {
	text-align: center;
	padding: 8px 6px !important;
}

.colorSelectorInputGroup:last-child .colorSelectorInput {
	text-align: left;
}

.gradientWidget {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.gradientWidgetPreview {
	border: 1px solid #2a2a2a;
	border-radius: 12px;
	padding: 8px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%),
		#101010;
}

.gradientWidgetPreviewBar {
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.gradientWidgetRows {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

.gradientWidgetRow {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: start;
}

.gradientWidgetRowMain {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
}

.gradientWidgetSwatchButton,
.gradientWidgetRemove,
.gradientWidgetAdd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	background: #101010;
	color: #ddd;
}

.gradientWidgetSwatchButton {
	width: 44px;
	height: 38px;
	padding: 0;
}

.gradientWidgetSwatchButton:hover,
.gradientWidgetRemove:hover,
.gradientWidgetAdd:hover {
	border-color: #3a3a3a;
	background: #171717;
}

.gradientWidgetSwatchButton:focus-visible,
.gradientWidgetRemove:focus-visible,
.gradientWidgetAdd:focus-visible {
	outline: none;
	border-color: #4a8d87;
	box-shadow: 0 0 0 1px rgba(123, 213, 203, 0.45);
}

.gradientWidgetSwatch {
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, 0.18),
		0 3px 10px rgba(0, 0, 0, 0.18);
}

.gradientWidgetPosition {
	min-width: 0;
}

.gradientWidgetRemove,
.gradientWidgetAdd {
	width: 38px;
	height: 38px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
}

.gradientWidgetFooter {
	display: flex;
	justify-content: flex-end;
}

.gradientWidgetEmpty {
	font-size: 12px;
	color: #8d8d8d;
	padding: 4px 0;
}

.gradientWidgetColorPopup {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
	padding: 10px;
	border: 1px solid #2a2a2a;
	border-radius: 12px;
	background: #111;
}

.gradientWidgetColorPopupRow {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 8px;
	align-items: center;
}

.gradientWidgetColorInput {
	width: 56px !important;
	height: 38px;
	padding: 4px !important;
	border-radius: 10px !important;
}

.gradientWidgetHexInput {
	min-width: 0;
}

.gradientWidgetColorHint {
	font-size: 11px;
	color: #8f989c;
}

.layoutSizeEditor {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 110px;
	align-items: center;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	background: #0f0f0f;
	overflow: hidden;
}

.layoutSizeEditorAuto {
	grid-template-columns: minmax(0, 1fr);
}

.layoutSizeEditorCompact {
	grid-template-columns: minmax(0, 1fr) 56px;
}

.layoutSizeEditorCompact.layoutSizeEditorAuto {
	grid-template-columns: minmax(0, 1fr);
}

.layoutSizeValueInput {
	min-width: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 8px 10px !important;
}

.layoutSizeUnitSelect {
	width: 100%;
}

.layoutSizeUnitSelect .dropdown-button {
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	min-height: 100%;
}

.layoutSizeUnitSelectCompact .dropdown-button {
	padding: 8px 6px;
	gap: 4px;
	font-size: 11px;
	justify-content: center;
}

.layoutSizeEditor:not(.layoutSizeEditorAuto) .layoutSizeUnitSelect .dropdown-button {
	border-left: 1px solid #2a2a2a;
}

.layoutSizeEditor:focus-within {
	border-color: #3a3a3a;
	box-shadow: 0 0 0 1px #3a3a3a;
}

.boxEditorSimple {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
	grid-template-rows: auto;
	gap: 8px;
	align-items: stretch;
}

.boxEditorSimpleExpanded {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px;
	grid-template-rows: repeat(2, auto);
}

.boxEditorItem {
	display: flex;
	align-items: stretch;
	gap: 8px;
	min-width: 0;
}

.boxEditorLabel {
	flex: 0 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 12px;
	font-weight: 700;
	color: #9fa6aa;
}

.boxEditorItem .boxLayoutSizeEditor {
	flex: 1;
}

.boxLayoutSizeEditor {
	width: 100%;
	border: 0;
	border-radius: 10px;
}

.boxLockButton {
	width: 100%;
	height: 100%;
	min-width: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
	color: #ddd;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.boxLockButtonSimple {
	grid-column: 3;
	grid-row: 1;
	border-radius: 12px;
	border: 1px solid #2a2a2a;
}

.boxEditorSimpleExpanded .boxLockButtonSimple {
	grid-row: 1 / span 2;
}

.boxLockButton:hover {
	border-color: #3a3a3a;
	background: linear-gradient(180deg, #202020 0%, #141414 100%);
}

.boxLockButton:focus {
	outline: none;
	border-color: #3a3a3a;
	box-shadow: 0 0 0 1px #3a3a3a;
}

.actions {
	display: flex;
	gap: 8px;
flex-wrap: wrap;
}

.smallBtn {
padding: 6px 10px;
font-size: 12px;
}

.emptyHint {
	color: #888;
	font-size: 13px;
}

.dropdownOverlay {
	position: fixed;
	inset: 0;
	z-index: 2000;
	pointer-events: none;
}

.dropdownOverlay.locked {
	pointer-events: auto;
}

.dropdown-list {
	position: absolute;
	margin: 0;
	padding: 6px;
	min-width: 180px;
	max-width: min(280px, calc(100vw - 16px));
	max-height: min(320px, calc(100vh - 16px));
	overflow-x: auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	background: #141414;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-width: max-content;
	padding: 8px 10px;
	border-radius: 8px;
	color: #ddd;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.dropdown-item:hover:not(.disabled),
.dropdown-item.stuck:not(.disabled) {
	background: #202020;
}

.dropdown-item.selected {
	background: #232323;
	outline: 1px solid #303030;
}

.dropdown-item.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.dropdown-item-context {
	flex: 0 0 auto;
	color: #9a9a9a;
	white-space: nowrap;
}

.dropdown-divider {
	height: 1px;
	margin: 6px 4px;
	background: #2a2a2a;
}

.dropdown-search {
	width: 100%;
	box-sizing: border-box;
	padding: 8px;
	border-radius: 8px;
	border: 1px solid #2a2a2a;
	background: #0f0f0f;
	color: #ddd;
	outline: none;
}