* { box-sizing: border-box; }
.civedit-root {
	font-family: monospace;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	color: #222;
	position: relative;
}

/* ── Toolbar ────────────────────────────────────────────── */
#toolbar {
	display: flex;
	align-items: center;
	padding: 5px 8px;
	gap: 6px;
	flex-wrap: wrap;
	background: #f4f4f6;
	border-bottom: 1px solid #d0d0d8;
	box-shadow: 0 1px 4px rgba(0,0,0,0.07);
	position: relative;
	z-index: 1;
	font-size: 12px;
}
#toolbar .separator {
	width: 1px;
	height: 18px;
	background: #ccc;
	margin: 0 2px;
}
#toolbar button, #toolbar select, #toolbar input[type="number"], #toolbar input[type="text"] {
	font-family: monospace;
	font-size: 12px;
}
#toolbar input[type="number"] {
	width: 50px;
	border: 1px solid #c4c4cc;
	border-radius: 3px;
	padding: 2px 4px;
	background: #fff;
}
#toolbar input[type="text"] {
	width: 140px;
	border: 1px solid #c4c4cc;
	border-radius: 3px;
	padding: 2px 4px;
	background: #fff;
}
#toolbar select {
	border: 1px solid #c4c4cc;
	border-radius: 3px;
	padding: 2px 4px;
	background: #fff;
}
#toolbar input:focus, #toolbar select:focus {
	outline: none;
	border-color: #88aacc;
	box-shadow: 0 0 0 2px rgba(100,140,200,0.15);
}

/* ── Buttons (base) ─────────────────────────────────────── */
.civedit-root button,
.civedit-root a.toolbar-link {
	border: 1px solid #c0c0c8;
	border-radius: 3px;
	background: linear-gradient(to bottom, #fafafa, #f0f0f2);
	padding: 3px 8px;
	cursor: pointer;
	color: #333;
	font-family: monospace;
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
}
.civedit-root button:hover:not(:disabled),
.civedit-root a.toolbar-link:hover {
	background: linear-gradient(to bottom, #eef3fa, #e4ecf6);
	border-color: #a0b4cc;
	color: #111;
}
.civedit-root button:active:not(:disabled),
.civedit-root a.toolbar-link:active {
	background: #d8e8f4;
	border-color: #88a0bc;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.civedit-root button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* ── Mode toggle ────────────────────────────────────────── */
.mode-toggle {
	display: inline-flex;
	border: 1px solid #aaa;
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.mode-toggle button {
	border: none;
	border-radius: 0;
	background: #ebebeb;
	padding: 3px 10px;
	box-shadow: none;
}
.mode-toggle button:hover:not(:disabled) {
	background: #e0e8f4;
	border: none;
	box-shadow: none;
}
.mode-toggle button.active {
	background: #3a9a6a;
	color: #fff;
	border: none;
}
.mode-toggle button.active:hover:not(:disabled) {
	background: #2d8a5e;
}

/* ── Layers panel ───────────────────────────────────────── */
.layers-wrapper {
	position: relative;
}
.layers-panel {
	display: none;
	position: absolute;
	top: calc(100% + 3px);
	left: 0;
	z-index: 10;
	background: #fff;
	border: 1px solid #c8c8d0;
	border-radius: 4px;
	box-shadow: 0 3px 10px rgba(0,0,0,0.12);
	padding: 6px 12px;
	white-space: nowrap;
}
.layers-panel.open {
	display: block;
}
.layers-panel label {
	display: block;
	padding: 3px 0;
	cursor: pointer;
	font-size: 12px;
	color: #333;
}
.layers-panel label:hover {
	color: #000;
}
.layers-panel label input {
	margin-right: 6px;
	accent-color: #3a9a6a;
}
#mapSizePanel label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
#mapSizePanel #resizeMapBtn {
	margin-top: 6px;
	width: 100%;
}

/* ── Zoom controls ──────────────────────────────────────── */
.zoom-controls {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.zoom-controls button {
	height: 24px;
	cursor: pointer;
	white-space: nowrap;
}
.zoom-controls button.zoom-step {
	width: 24px;
	padding: 0;
	text-align: center;
}
.zoom-controls span {
	min-width: 34px;
	text-align: center;
	color: #555;
}

/* ── Main layout ────────────────────────────────────────── */
#content {
	flex: 1;
	display: flex;
	min-height: 0;
	position: relative;
}

/* ── Region (copy/paste) floating strip ─────────────────── */
#regionControls {
	position: absolute;
	top: 10px;
	left: 14px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 5px 7px;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid #c8c8d0;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
#regionStatus {
	color: #666;
	font-size: 11px;
	white-space: nowrap;
}
#grid {
	flex: 1;
	overflow: auto;
	padding: 6px;
	line-height: 0;
	min-width: 0;
	min-height: 0;
	background: #e8e8ec;
	position: relative;
}
#grid canvas {
	cursor: inherit;
	border-radius: 2px;
}

/* ── Right panel ────────────────────────────────────────── */
#rightPanel {
	width: 260px;
	min-width: 200px;
	border-left: 1px solid #d0d0d8;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
}

/* ── Section headers (shared) ───────────────────────────── */
.section-header {
	padding: 6px 10px;
	font-weight: bold;
	font-size: 11px;
	letter-spacing: 0.03em;
	background: #f4f4f6;
	border-bottom: 1px solid #e8e8ee;
	color: #444;
	flex-shrink: 0;
}

/* ── Data section ───────────────────────────────────────── */
#blocksSection {
	border-bottom: 1px solid #d8d8e0;
	overflow: hidden;
	max-height: 35%;
	display: flex;
	flex-direction: column;
}
#blocksSection .section-header {
	cursor: pointer;
	user-select: none;
}
#blocksSection .section-header:hover {
	background: #eaeaf0;
}
#dataColumns {
	display: flex;
	flex: 1;
	min-height: 0;
}
#dataGroups {
	width: 50%;
	overflow-y: auto;
	border-right: 1px solid #eee;
}
#dataItems {
	width: 50%;
	overflow-y: auto;
}
.data-group {
	cursor: pointer;
	padding: 4px 8px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #333;
}
.data-group:hover {
	background: #f0f0f8;
}
.data-group.active {
	background: #daeaff;
	color: #004080;
}
.data-item {
	cursor: pointer;
	padding: 4px 8px;
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #333;
}
.data-item:hover {
	background: #f0f0f8;
}
.data-item.active {
	background: #daeaff;
	color: #004080;
}

/* ── Properties section ─────────────────────────────────── */
#propertiesSection {
	flex: 1;
	overflow-y: auto;
}
#propertiesSection .section-header {
	position: sticky;
	top: 0;
	z-index: 1;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
#properties {
	padding: 8px 10px;
}
.property-line-group {
	border-left: 3px solid #e0e0e8;
	padding-left: 6px;
	margin-bottom: 8px;
}
.property-line-group.multi {
	background: #f8f8fc;
	border-radius: 0 3px 3px 0;
}
.property-line-group .prop-row-with-delete {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
}
.property-line-group .prop-row-with-delete .property-row {
	flex: 1;
	min-width: 0;
	margin-bottom: 0;
}
.property-line-group .prop-delete-btn {
	font-size: 11px;
	flex-shrink: 0;
	padding: 2px 5px;
	color: #888;
	border-color: #ddd;
	background: #fafafa;
}
.property-line-group .prop-delete-btn:hover:not(:disabled) {
	color: #c00;
	border-color: #f88;
	background: #fff0f0;
}
.property-row {
	margin-bottom: 4px;
}
.property-row > div {
	font-size: 10px;
	color: #777;
	margin-bottom: 2px;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.property-row input, .property-row select {
	width: 100%;
	font-family: monospace;
	font-size: 11px;
	border: 1px solid #d4d4dc;
	border-radius: 2px;
	padding: 2px 4px;
	background: #fff;
	color: #222;
}
.property-row input:focus, .property-row select:focus {
	outline: none;
	border-color: #88aacc;
	box-shadow: 0 0 0 2px rgba(100,140,200,0.15);
}
.property-row input:disabled {
	background: #f4f4f6;
	color: #888;
	border-color: #e0e0e8;
}
.unit-section {
	border-left: 3px solid #5aaa88;
	padding-left: 8px;
	margin: 6px 0;
	padding-top: 2px;
}
.units-header {
	display: flex;
	align-items: center;
	margin-top: 12px;
	gap: 8px;
}
.unit-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* ── Paint palette ──────────────────────────────────────── */
#paletteSection {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
#paletteBody {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}
.palette-category {
	margin-bottom: 10px;
}
.palette-category-header {
	font-size: 10px;
	font-weight: bold;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 4px;
	padding-bottom: 3px;
	border-bottom: 1px solid #e8e8ee;
}
.palette-grid {
	display: grid;
	gap: 3px;
}
.palette-grid-terrain {
	grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
}
.palette-grid-symbol {
	grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
}
.palette-grid-emoji {
	grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
}
.palette-swatch {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px 2px;
	border: 2px solid transparent;
	border-radius: 4px;
	cursor: pointer;
	user-select: none;
	background: #f2f2f6;
	min-height: 42px;
	transition: border-color 0.08s, background 0.08s;
}
.palette-swatch:hover {
	background: #ddeeff;
	border-color: #99bbdd;
}
.palette-swatch.active {
	border-color: #4488aa;
	background: #cce4f5;
	box-shadow: inset 0 0 0 1px #4488aa;
}
.palette-swatch-terrain {
	border-color: rgba(0,0,0,0.12);
	min-height: 48px;
}
.palette-swatch-terrain:hover {
	border-color: #4488aa;
	filter: brightness(1.08);
}
.palette-swatch-terrain.active {
	border-color: #fff;
	box-shadow: 0 0 0 2px #4488aa;
}
.palette-swatch-icon {
	font-size: 16px;
	line-height: 1.2;
}
.palette-swatch-label {
	font-size: 9px;
	color: #555;
	text-align: center;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	padding: 0 2px;
}
.palette-swatch-terrain .palette-swatch-label {
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.palette-swatch-terrain[data-light-bg="1"] .palette-swatch-label {
	color: #333;
	text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

/* ── Search panel ───────────────────────────────────────── */
#searchSection {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.sq-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sq-header-right {
	display: flex;
	align-items: center;
	gap: 6px;
}
.sq-count {
	font-size: 10px;
	color: #3a9a6a;
	font-weight: normal;
	letter-spacing: 0;
}
.sq-clear-btn {
	font-size: 10px;
	padding: 1px 5px;
	color: #888;
	border-color: #ddd;
	background: #f8f8fb;
}
.sq-clear-btn:hover:not(:disabled) {
	color: #c00;
	border-color: #f88;
	background: #fff0f0;
}
.sq-body {
	padding: 8px 8px 4px;
	overflow-y: auto;
	flex: 1;
}
.sq-group {
	border-left: 2px solid #b4c4d8;
	padding-left: 6px;
	margin-bottom: 4px;
}
.sq-group-header {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-bottom: 4px;
}
.sq-op-btn {
	font-size: 10px;
	font-weight: bold;
	padding: 1px 7px;
	min-width: 36px;
	letter-spacing: 0.04em;
}
.sq-op-btn.sq-op-or {
	background: linear-gradient(to bottom, #fdf4e0, #f5e8c0);
	border-color: #c8a040;
	color: #7a5000;
}
.sq-op-btn.sq-op-or:hover:not(:disabled) {
	background: linear-gradient(to bottom, #fef7e8, #f0dfa0);
	border-color: #b08030;
}
.sq-remove-btn {
	font-size: 10px;
	padding: 1px 4px;
	color: #bbb;
	border-color: #e0e0e8;
	background: #fafafa;
	margin-left: auto;
}
.sq-remove-btn:hover:not(:disabled) {
	color: #c00;
	border-color: #f88;
	background: #fff0f0;
}
.sq-children {
	margin-bottom: 2px;
}
.sq-condition {
	display: flex;
	align-items: center;
	gap: 3px;
	margin-bottom: 3px;
}
.sq-condition select {
	font-family: monospace;
	font-size: 11px;
	border: 1px solid #d4d4dc;
	border-radius: 2px;
	padding: 2px 2px;
	background: #fff;
	color: #222;
	min-width: 0;
}
.sq-condition select:focus {
	outline: none;
	border-color: #88aacc;
	box-shadow: 0 0 0 2px rgba(100,140,200,0.15);
}
.sq-prop { flex: 5 0 0; }
.sq-op   { flex: 3 0 0; }
.sq-val  { flex: 4 0 0; }
.sq-actions {
	display: flex;
	gap: 4px;
	margin-top: 2px;
	margin-bottom: 6px;
}
.sq-add-btn {
	font-size: 10px;
	padding: 1px 6px;
	color: #3a7a6a;
	border-color: #9acfb8;
	background: linear-gradient(to bottom, #f0faf5, #e4f5ec);
}
.sq-add-btn:hover:not(:disabled) {
	background: linear-gradient(to bottom, #e0f5ec, #d0ecdf);
	border-color: #6abc9a;
	color: #1a5a4a;
}

/* ── Validation panel ───────────────────────────────────── */
#validateBtn.active {
	background: #c0392b;
	border-color: #a02a1e;
	color: #fff;
}
#validateBtn.active:hover:not(:disabled) {
	background: #b23326;
	border-color: #902418;
	color: #fff;
}
#validationSection {
	display: flex;
	flex-direction: column;
	max-height: 45%;
	border-bottom: 1px solid #d8d8e0;
	overflow: hidden;
}
.val-count {
	color: #c0392b;
}
.val-body {
	overflow-y: auto;
	flex: 1;
	padding: 4px 0 6px;
}
.val-empty {
	padding: 10px;
	font-size: 11px;
	color: #888;
	text-align: center;
}
.val-group {
	margin-bottom: 4px;
}
.val-group-header {
	font-size: 10px;
	font-weight: bold;
	color: #a02a1e;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 5px 10px 3px;
	background: #fbf0ef;
	border-top: 1px solid #f0dcd9;
	border-bottom: 1px solid #f0dcd9;
}
.val-item {
	font-size: 11px;
	color: #444;
	padding: 4px 10px 4px 16px;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border-left: 3px solid transparent;
}
.val-item:hover {
	background: #fff0ee;
}
.val-item.active {
	background: #fde4e0;
	border-left-color: #c0392b;
	color: #7a1c12;
	font-weight: 600;
}

/* ── Share dialog ───────────────────────────────────────── */
.share-overlay,
.help-overlay,
.welcome-overlay {
	position: absolute;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
}
.share-dialog,
.help-dialog,
.welcome-dialog {
	max-width: calc(100% - 24px);
	max-height: calc(100% - 24px);
	overflow: auto;
	background: #fff;
	border: 1px solid #c8c8d0;
	border-radius: 6px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
	padding: 14px 16px;
	font-size: 12px;
}
.share-dialog { width: 380px; }
.welcome-dialog { width: 400px; }
/* Help dialog: header + actions stay put; only the body scrolls. */
.help-dialog {
	width: 560px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}
.share-dialog-header,
.help-header,
.welcome-header {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
	color: #222;
}
.share-form {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.share-field {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: #444;
}
.share-field input[type="text"],
.share-field textarea {
	font-family: monospace;
	font-size: 12px;
	border: 1px solid #c4c4cc;
	border-radius: 3px;
	padding: 4px 6px;
	background: #fff;
	width: 100%;
	resize: vertical;
}
.share-field input:focus,
.share-field textarea:focus {
	outline: none;
	border-color: #88aacc;
	box-shadow: 0 0 0 2px rgba(100, 140, 200, 0.15);
}
.share-tag-suggest {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 3px 0;
}
.share-tag-chip {
	padding: 2px 7px;
	font-size: 11px;
	border-radius: 10px;
}
.share-tag-chip.active {
	background: #3a9a6a;
	color: #fff;
	border-color: #2d8a5e;
}
.share-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 4px;
}
.share-tag-active {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 4px 2px 8px;
	font-size: 11px;
	background: #eef3fa;
	border: 1px solid #c4d2e4;
	border-radius: 10px;
	color: #345;
}
.share-tag-active button {
	border: none;
	background: none;
	padding: 0 2px;
	font-size: 10px;
	color: #678;
	cursor: pointer;
	line-height: 1;
}
.share-tag-active button:hover {
	color: #c0392b;
	background: none;
}
.share-update-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 7px 9px;
	background: #eef7f1;
	border: 1px solid #bfe0cd;
	border-radius: 4px;
	font-size: 11px;
	color: #2d6a4a;
	cursor: pointer;
}
.share-update-row input {
	margin-top: 1px;
	accent-color: #3a9a6a;
}
.share-error {
	color: #c0392b;
	font-size: 11px;
}
.share-actions,
.help-actions,
.welcome-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 12px;
}
.share-submit {
	background: linear-gradient(to bottom, #45a877, #3a9a6a);
	color: #fff;
	border-color: #2d8a5e;
}
.share-submit:hover:not(:disabled) {
	background: linear-gradient(to bottom, #3fa06f, #34905f);
	color: #fff;
}
.share-result-heading {
	font-size: 14px;
	font-weight: 600;
	color: #2d8a5e;
	margin-bottom: 8px;
}
.share-result-link {
	display: inline-block;
	margin-bottom: 10px;
	color: #2766b8;
}
.share-result-note {
	color: #555;
	margin-bottom: 4px;
}
.share-manage-row {
	display: flex;
	gap: 6px;
}
.share-manage-link {
	flex: 1;
	font-family: monospace;
	font-size: 11px;
	border: 1px solid #c4c4cc;
	border-radius: 3px;
	padding: 4px 6px;
	background: #f7f7f9;
	color: #333;
}

/* ── Help & welcome modals ─────────────────────────────────── */
/* Help header carries a close ✕ in its top-right corner. */
.help-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}
.help-close-x {
	background: none;
	border: none;
	padding: 0 2px;
	margin: -2px -2px 0 0;
	font-size: 16px;
	line-height: 1;
	color: #888;
	cursor: pointer;
}
.help-close-x:hover {
	background: none;
	color: #c0392b;
}
.help-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding-right: 4px;
}
.help-section h4 {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	color: #2766b8;
}
.help-section ul,
.welcome-list {
	margin: 0;
	padding-left: 18px;
	color: #444;
}
.help-section li,
.welcome-list li {
	margin: 2px 0;
	line-height: 1.4;
}
.welcome-intro {
	color: #555;
	margin-bottom: 10px;
	line-height: 1.4;
}
.welcome-list {
	margin-bottom: 4px;
}
/* "Show intro" link in the Help footer, kept left of the action buttons. */
.help-actions .help-intro-link {
	margin-right: auto;
	background: none;
	border: none;
	padding: 0;
	color: #2766b8;
	text-decoration: underline;
	cursor: pointer;
}
.help-actions .help-intro-link:hover {
	background: none;
	color: #1a4f93;
}

/* ── Contextual hints & empty state ────────────────────────── */
.panel-hint {
	font-size: 11px;
	color: #777;
	padding: 4px 8px 6px;
	line-height: 1.35;
}
.panel-empty {
	font-size: 12px;
	color: #888;
	font-style: italic;
	padding: 8px;
}
.grid-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	text-align: center;
	color: #889;
	font-size: 13px;
	line-height: 1.6;
	padding: 20px;
}
.grid-empty code {
	font-size: 12px;
	background: #ececf2;
	border-radius: 3px;
	padding: 1px 4px;
	color: #556;
}