body.bodyColor {
	font-family: Arial, Helvetica, sans-serif;
	--classic-right-panel-width: 208px;
	--classic-panel-width: 162px;
	--classic-label-width: 74px;
	--classic-label-font: 0.75rem;
	--classic-row-height: 24px;
	--classic-panel-padding: 18px;
	--classic-tool-icon-size: 20px;
	--classic-topbar-button-size: 36px;
	--classic-topbar-icon-size: 18px;
	--classic-topbar-arrow-size: 24px;
	--classic-topbar-height: 38px;
}

.topbar {
	display: flex;
	/* Never let the toolbar be crushed by an oversized sibling. */
	flex-shrink: 0;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 0;
	line-height: 18px;
	width: 100%;
	min-height: var(--classic-topbar-height);
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	box-sizing: border-box;
}

.topbar .tool-area,
.topbar .widget.canvasColor.zoom {
	display: inline-flex;
	align-items: flex-start;
	flex: 0 0 auto;
	height: var(--classic-topbar-height);
	vertical-align: top;
}

.topbar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0;
	border: 0;
}

body:not(.layers-plugin) .topbar button[data-toggle="layers"],
.topbar button[hidden] {
	display: none;
}

body.layers-plugin .topbar button[data-toggle="layers"] {
	display: inline-flex;
}

.topbar button:not([data-hoveropen="file"]):not(.align-more-btn) {
	background-position: center;
	background-repeat: no-repeat;
	background-size: var(--classic-topbar-icon-size) var(--classic-topbar-icon-size);
}

.tools button {
	display: flex;
	align-items: center;
	justify-content: center;
	background-position: center;
	background-repeat: no-repeat;
	background-size: var(--classic-tool-icon-size) var(--classic-tool-icon-size);
	line-height: 1;
}

.tools button > svg {
	display: block;
	flex: 0 0 var(--classic-tool-icon-size);
	width: var(--classic-tool-icon-size);
	height: var(--classic-tool-icon-size);
}

.topbar .widget.canvasColor.zoom {
	justify-content: center;
	gap: 0;
	width: calc(var(--classic-topbar-button-size) * 2);
	margin: 1px 0 0;
	padding: 0;
	box-sizing: border-box;
}

#tool_undo,
#tool_redo,
#zoomIn,
#zoomOut,
.manageObjects button,
.align-toolbar button:not(.align-more-btn) {
	flex: 0 0 var(--classic-topbar-button-size);
	width: var(--classic-topbar-button-size);
	min-width: var(--classic-topbar-button-size);
	height: var(--classic-topbar-button-size);
	line-height: var(--classic-topbar-button-size);
}

.topbar button:not([data-hoveropen="file"]),
.topbar .widget.canvasColor.zoom button,
.manageObjects button,
.align-toolbar button:not(.align-more-btn) {
	min-width: var(--classic-topbar-button-size);
}

.manageObjects,
.align-toolbar {
	display: inline-flex;
	align-items: flex-start;
	flex: 0 0 auto;
	gap: 0;
}

.manageObjects {
	margin: 0 12px;
}

.topbar button.align-more-btn {
	flex: 0 0 var(--classic-topbar-arrow-size);
	width: var(--classic-topbar-arrow-size);
	min-width: var(--classic-topbar-arrow-size);
	height: var(--classic-topbar-button-size);
	padding: 0;
	line-height: var(--classic-topbar-button-size);
}

.widget.alignment {
	width: 188px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #cfcfcf;
	background: #fff;
	box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
}

.widget.alignment.hoverShow,
.widget.alignment.pinned {
	display: grid;
	grid-template-columns: repeat(3, 28px) minmax(0, 1fr);
	gap: 4px;
	align-items: center;
	justify-content: start;
}

.widget.alignment button {
	width: 28px;
	min-width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid transparent;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	line-height: 28px;
}

.widget.alignment button:hover,
.widget.alignment button:focus-visible {
	border-color: #c8c8c8;
	background-color: #f4f4f4;
}

.widget.alignment label {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: auto minmax(80px, 1fr);
	gap: 6px;
	align-items: center;
	margin: 2px 0 0;
	color: #666;
	font-size: 13px;
	font-weight: 400;
	line-height: var(--classic-row-height);
	white-space: nowrap;
}

.widget.alignment .advanced-align {
	grid-column: 1 / -1;
}

.topbar .widget.canvasColor.zoom button {
	flex: 0 0 var(--classic-topbar-button-size);
	top: auto;
}

#zoomSlider2 {
	display: block;
	width: var(--classic-panel-width);
	height: 18px;
	margin: 0 auto 6px;
	writing-mode: horizontal-tb;
	direction: ltr;
	appearance: auto;
	-webkit-appearance: auto;
}

.right-panel-wrap {
	width: var(--classic-right-panel-width);
	box-sizing: border-box;
	padding-bottom: 56px;
}

.workareaContainer {
	display: flex;
	flex-direction: column;
	min-width: 0;
	/* Clamp the work column to its lane: the right panel is absolutely
	   positioned at right:0, so intrinsic-width quirks in the topbar were
	   pushing this column underneath it on narrow screens. */
	width: calc(100% - var(--classic-right-panel-width));
	max-width: calc(100% - var(--classic-right-panel-width));
	box-sizing: border-box;
}

.topbar {
	max-width: 100%;
}

/* With the panel hidden the work column owns the full width again. */
body.hide-right-panel .workareaContainer {
	width: 100%;
	max-width: 100%;
}

#workarea {
	position: relative;
	/* flex-basis 0, not auto: with auto the basis equals the content height —
	   a deeply zoomed canvas is thousands of px — and the column enters
	   shrink mode that crushes the topbar to its minimum. Basis 0 makes the
	   workarea take only the space the toolbar rows leave over. */
	flex: 1 1 0px;
	min-height: 0;
	/* All touch interaction on the canvas is JS-driven (synthetic mouse
	   events for drawing, two-finger pan/zoom in ext-touchPanAndZoom).
	   Without touch-action:none, iOS Safari and Android Chrome claim
	   two-finger gestures for native scrolling/page-zoom and stop
	   delivering cancelable touch events — pinch and pan go dead. */
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

@media (max-width: 900px) {
	/* On small screens the right panel is collapsible: the (previously
	   invisible) hide-right-panel toggle becomes a visible tab on the
	   panel's edge. */
	[data-togglebody="hide-right-panel"] {
		position: fixed;
		top: 50%;
		right: var(--classic-right-panel-width);
		transform: translateY(-50%);
		width: 22px;
		height: 52px;
		z-index: 60;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 1px solid #c8c8c8;
		border-right: 0;
		border-radius: 6px 0 0 6px;
		background: #f4f4f4;
		color: #444;
		font-size: 15px;
	}

	[data-togglebody="hide-right-panel"]::after {
		content: "\203A"; /* › collapse */
	}

	body.hide-right-panel [data-togglebody="hide-right-panel"] {
		right: 0;
		width: 22px;
	}

	body.hide-right-panel [data-togglebody="hide-right-panel"]::after {
		content: "\2039"; /* ‹ expand */
	}

	body.hide-right-panel .topbar {
		margin-right: 26px;
	}

	body.bodyColor {
		--classic-right-panel-width: 192px;
		--classic-panel-width: 162px;
		--classic-label-width: 74px;
		--classic-row-height: 22px;
		--classic-panel-padding: 15px;
		--classic-topbar-button-size: 28px;
		--classic-topbar-icon-size: 16px;
		--classic-topbar-arrow-size: 22px;
		--classic-topbar-height: 30px;
	}

	.leftsidepanel {
		top: 10.25rem;
		width: 3.25rem;
		margin-top: 0;
	}

	.tools button {
		width: 3.25rem;
		min-width: 3.25rem;
	}

	.right-panel-wrap {
		width: var(--classic-right-panel-width);
	}

	.topbar {
		flex-wrap: wrap;
		gap: 4px 0;
		min-height: auto;
		overflow-x: visible;
		padding-bottom: 4px;
	}

	.topbar .tool-area {
		flex-wrap: wrap;
		width: 100%;
		height: auto;
	}

	.topbar .tool-area:first-child .manageObjects {
		flex-basis: auto;
		margin: 0 0 0 6px;
	}

	.topbar button:not([data-hoveropen="file"]),
	.topbar .widget.canvasColor.zoom button,
	.manageObjects button,
	.align-toolbar button:not(.align-more-btn) {
		flex-basis: var(--classic-topbar-button-size);
		width: var(--classic-topbar-button-size);
		min-width: var(--classic-topbar-button-size);
		height: var(--classic-topbar-button-size);
		line-height: var(--classic-topbar-button-size);
	}

	.topbar button[data-hoveropen="file"] {
		height: var(--classic-topbar-button-size);
		line-height: var(--classic-topbar-button-size);
		padding: 0 10px;
		min-width: 44px;
	}

	.topbar button:not([data-hoveropen="file"]):not(.align-more-btn) {
		background-size: var(--classic-topbar-icon-size) var(--classic-topbar-icon-size);
	}

	.topbar .widget.canvasColor.zoom {
		order: 2;
		width: calc(var(--classic-topbar-button-size) * 2);
		margin: 0;
		padding: 0;
		justify-content: flex-start;
	}

	.topbar button.align-more-btn {
		flex-basis: var(--classic-topbar-arrow-size);
		width: var(--classic-topbar-arrow-size);
		min-width: var(--classic-topbar-arrow-size);
		height: var(--classic-topbar-button-size);
		line-height: var(--classic-topbar-button-size);
	}

	.topbar .tool-area:last-child {
		order: 3;
		width: 100%;
		margin-top: 0;
		overflow-x: visible;
	}

	.manageObjects {
		gap: 0;
	}

	.align-toolbar {
		gap: 0;
	}

	#workarea {
		padding-left: 56px;
		box-sizing: border-box;
		text-align: left;
	}

	#svgcanvas {
		display: block;
	}

	.right-panel-wrap h4,
	.palette-section h3,
	.canvas-size-panel-title {
		font-size: 0.92rem;
	}
}

.palette-section,
.canvas-size-panel {
	margin: 0;
	padding: 0 var(--classic-panel-padding) 10px;
}

.palette-section h3,
.canvas-size-panel-title,
.right-panel-wrap h4 {
	margin: 8px 0 6px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.palette-stack {
	display: block;
	width: var(--classic-panel-width);
	margin: 0 auto;
}

.palette-static-row,
.palette-color-grid,
.stroke-width-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0;
	width: var(--classic-panel-width);
	margin: 0 auto;
}

.palette-color-grid {
	padding-bottom: 0;
}

div.palette_item,
input[type="color"].palette_item,
.sw-btn {
	display: block;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	margin: 0;
}

.sw-num {
	height: 18px;
	line-height: 18px;
}

.right-panel-wrap .form-area,
#exact-angle-bar .form-area,
#exact-dims-bar .form-area {
	margin: 4px auto 0;
	width: var(--classic-panel-width);
}

body:not([data-selected-shapes]) .right-panel-wrap [data-visableif-attr],
body[data-selected-shapes="0"] .right-panel-wrap [data-visableif-attr] {
	display: none;
}

.right-panel-wrap .label-name-area {
	flex: 0 0 var(--classic-label-width);
	min-width: 0;
	padding: 2px;
	overflow: hidden;
	box-sizing: border-box;
	font-size: var(--classic-label-font);
	line-height: 1.15;
	height: auto;
	min-height: var(--classic-row-height);
}

/* One label style for every panel row: long labels wrap to a second line
   instead of clipping (Roundness) or shrinking per-widget (Letter Spacing). */
.right-panel-wrap .label-name-area > span {
	min-width: 0;
	overflow-wrap: break-word;
	white-space: normal;
}

.right-panel-wrap .picker-container {
	display: none;
}

.right-panel-wrap .form-area > * {
	/* min-height, not height: label cells must be able to grow when larger
	   font metrics wrap their text, so the grid row grows with them instead
	   of letting the text spill into the next row. */
	min-height: var(--classic-row-height);
	box-sizing: border-box;
}

.right-panel-wrap input:not([type="color"]):not([type="checkbox"]):not([type="range"]),
.right-panel-wrap select {
	padding: 0 6px;
	border: 1px solid #c8c8c8;
	background: #fff;
	color: #222;
}

.widget.alignment select {
	width: 100%;
	min-width: 0;
	height: var(--classic-row-height);
	border: 1px solid #c8c8c8;
	background: #fff;
	color: #222;
	font-size: 13px;
	line-height: var(--classic-row-height);
}

.right-panel-wrap button.fullWidth,
.right-panel-wrap .widget.image .button,
.canvas-size-fit,
#exact-dims-mode,
.widget.text .text-style-row button,
.widget.text .text-align-row button,
.widget.path .form-area:first-child button,
.widget.path .form-area:first-child select {
	border: 1px solid #c8c8c8;
	background: #f4f4f4;
	color: #222;
	box-shadow: none;
}

.right-panel-wrap button.fullWidth,
.right-panel-wrap .widget.image .button,
.right-panel-wrap input.fullWidth,
.right-panel-wrap select.fullWidth {
	display: block;
	width: var(--classic-panel-width);
	margin: 4px auto 0;
	box-sizing: border-box;
}

.widget.path .form-area:first-child {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	width: var(--classic-panel-width);
	margin: 4px auto 0;
}

.widget.path .form-area:first-child .label-name-area {
	grid-column: 1 / -1;
}

.widget.path .form-area:first-child button,
.widget.path .form-area:first-child select {
	width: 100%;
	min-width: 0;
	height: var(--classic-row-height);
	line-height: var(--classic-row-height);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.widget.text {
	padding-bottom: 8px;
}

.widget.text h4 {
	width: var(--classic-panel-width);
	margin-left: auto;
	margin-right: auto;
}

.right-panel-wrap > .form-area,
.right-panel-wrap .lineoptions .form-area,
.right-panel-wrap .widget.rectangle .form-area,
.right-panel-wrap .widget.path .marker-controls,
.widget.text .form-area,
#exact-angle-bar .form-area,
#exact-dims-bar .form-area {
	display: grid;
	grid-template-columns: var(--classic-label-width) minmax(0, 1fr);
	grid-auto-rows: minmax(var(--classic-row-height), auto);
	align-items: stretch;
}

.widget.text .advanced-text {
	width: var(--classic-panel-width);
	margin: 0 auto;
}

.right-panel-wrap > .form-area > :last-child,
.right-panel-wrap .lineoptions .form-area > :last-child,
.right-panel-wrap .widget.rectangle .form-area > :last-child,
.right-panel-wrap .widget.path .marker-controls > :last-child,
.widget.text .form-area > input,
.widget.text .form-area > select,
#exact-angle-bar .form-area > :last-child,
#exact-dims-bar .form-area > :last-child {
	min-width: 0;
}

.right-panel-wrap
	> .form-area
	> input:not([type="color"]):not([type="checkbox"]):not([type="range"]),
.right-panel-wrap > .form-area > select,
.right-panel-wrap
	.lineoptions
	.form-area
	> input:not([type="color"]):not([type="checkbox"]):not([type="range"]),
.right-panel-wrap .lineoptions .form-area > select,
.right-panel-wrap
	.widget.rectangle
	.form-area
	> input:not([type="color"]):not([type="checkbox"]):not([type="range"]),
.right-panel-wrap .widget.rectangle .form-area > select,
.right-panel-wrap .widget.path .marker-controls > select,
.widget.text .form-area > input:not([type="color"]):not([type="checkbox"]):not([type="range"]),
.widget.text .form-area > select,
#exact-angle-bar .form-area > input:not([type="color"]):not([type="checkbox"]):not([type="range"]),
#exact-angle-bar .form-area > select,
#exact-dims-bar .form-area > input:not([type="color"]):not([type="checkbox"]):not([type="range"]),
#exact-dims-bar .form-area > select {
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}

.right-panel-wrap > .form-area .label-name-area,
.right-panel-wrap .lineoptions .form-area .label-name-area,
.right-panel-wrap .widget.rectangle .form-area .label-name-area,
.right-panel-wrap .widget.path .marker-controls .label-name-area,
#exact-angle-bar .label-name-area,
#exact-dims-bar .label-name-area {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.right-panel-wrap .widget.path .marker-controls {
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	min-height: calc((var(--classic-row-height) * 2) + 2px);
}

.right-panel-wrap .widget.path .marker-controls .label-name-area {
	justify-content: flex-start;
	min-height: var(--classic-row-height);
	padding: 0 6px;
	text-align: left;
	white-space: nowrap;
}

.right-panel-wrap .widget.path .marker-controls select.fullWidth {
	width: 100%;
	margin: 0;
}

/* Text-widget labels now share the uniform right-panel label style above. */

.widget.text .label-name-area,
.widget.text .form-area > input,
.widget.text .form-area > select {
	min-width: 0;
}

.widget.text .text-style-row,
.widget.text .text-align-row {
	display: grid;
	width: var(--classic-panel-width);
	margin: 4px auto 0;
	gap: 4px;
}

.widget.text .text-style-row {
	grid-template-columns: repeat(2, 1fr);
}

.widget.text .text-align-row {
	grid-template-columns: repeat(4, 1fr);
}

.widget.text .text-style-row button,
.widget.text .text-align-row button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	margin: 0;
	outline: 0;
}

.widget.text .text-align-row button {
	height: var(--classic-row-height);
	min-width: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
}

.widget.text .text-style-row button {
	height: var(--classic-row-height);
	min-width: 0;
	line-height: var(--classic-row-height);
	font-size: 1.25rem;
}

.widget.text .text-style-row button.push_button_pressed,
.widget.text .text-align-row button.push_button_pressed {
	border-color: #aaa;
	background-color: #e9e9e9;
	box-shadow: inset 0 0 0 1px #c4c4c4;
}

.widget.text .text-align-row button[value="left"][data-style="text-align"] {
	background-image: url("../images/icons/left_align.svg");
}

.widget.text .text-align-row button[value="right"][data-style="text-align"] {
	background-image: url("../images/icons/right_align.svg");
}

.widget.text .text-align-row button[value="center"][data-style="text-align"] {
	background-image: url("../images/icons/center_align.svg");
}

.widget.text .text-align-row button[value="justify"][data-style="text-align"] {
	background-image: url("../images/icons/justify_align.svg");
}

.advancedZoom.widget {
	width: var(--classic-panel-width);
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #cfcfcf;
	background: #fff;
	box-shadow: 0 2px 4px rgb(0 0 0 / 12%);
}

.advancedZoom.widget input:not([type="range"]),
.advancedZoom.widget button.fullWidth {
	display: block;
	width: 100%;
	height: var(--classic-row-height);
	min-width: 0;
	margin: 4px 0 0;
	box-sizing: border-box;
	border: 1px solid #c8c8c8;
	background-color: #f4f4f4;
	color: #222;
	font-size: 13px;
	line-height: var(--classic-row-height);
	box-shadow: none;
}

.advancedZoom.widget input:not([type="range"]) {
	padding: 0 6px;
	background-color: #fff;
	text-align: center;
}

.advancedZoom.widget button.fullWidth {
	padding: 0;
	overflow: hidden;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.advancedZoom.widget #tool_zoom {
	background-position: center;
	background-repeat: no-repeat;
	background-size: var(--classic-topbar-icon-size) var(--classic-topbar-icon-size);
}

.advancedZoom.widget #zoomSlider2 {
	width: 100%;
	margin: 0 0 6px;
}

html body.bodyColor #dev-feedback-btn {
	right: calc(var(--classic-right-panel-width) + 16px);
	bottom: 16px;
}

html body.bodyColor #dev-feedback-panel {
	right: calc(var(--classic-right-panel-width) + 16px);
	box-sizing: border-box;
	border-radius: 4px;
}

html body.bodyColor.hide-right-panel #dev-feedback-btn,
html body.bodyColor.hide-right-panel #dev-feedback-panel {
	right: 16px;
}

@media (max-width: 900px) {
	html body.bodyColor #dev-feedback-btn,
	html body.bodyColor #dev-feedback-panel {
		right: calc(var(--classic-right-panel-width) + 12px);
	}
}