#gensquare-popup-overlay,
#gencircle-popup-overlay,
#gencircleindex-popup-overlay,
#genpolygon-popup-overlay,
#gengear-popup-overlay,
#genstar-popup-overlay,
#gentext-popup-overlay,
#shiftpoints-popup-overlay,
#modifyrotate-popup-overlay,
#mirrorgcode-popup-overlay,
#modifyscale-popup-overlay,
#modifyoffsetpath-popup-overlay,
#tabs-popup-overlay,
#deletedextrapoints-popup-overlay,
#multipasscut-popup-overlay,
#unitconvert-popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 16px;
	overflow-y: auto;
}

#gensquare-popup-overlay .gensquare-window,
#gencircle-popup-overlay .gencircle-window,
#gencircleindex-popup-overlay .gencircleindex-window,
#genpolygon-popup-overlay .genpolygon-window,
#gengear-popup-overlay .genpolygon-window,
#genstar-popup-overlay .genstar-window,
#gentext-popup-overlay .gentext-window,
#shiftpoints-popup-overlay .shiftpoints-window,
#modifyrotate-popup-overlay .modifyrotate-window,
#mirrorgcode-popup-overlay .modifyrotate-window,
#modifyscale-popup-overlay .modifyrotate-window,
#modifyoffsetpath-popup-overlay .modifyrotate-window,
#tabs-popup-overlay .shiftpoints-window,
#deletedextrapoints-popup-overlay .deletedextrapoints-window,
#multipasscut-popup-overlay .shiftpoints-window,
#unitconvert-popup-overlay .modifyrotate-window {
	width: min(520px, 100%);
	max-height: calc(100vh - 32px);
	background: #1c1f24;
	border: 1px solid #3a4048;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
	color: #eff3f8;
	overflow: hidden;
	font-family: inherit;
	display: flex;
	flex-direction: column;
}

.gensquare-header,
.gencircle-header,
.gencircleindex-header,
.genpolygon-header,
.genstar-header,
.gentext-header,
.shiftpoints-header,
.modifyrotate-header,
.deletedextrapoints-header {
	padding: 18px 20px 12px;
	border-bottom: 1px solid #2d3238;
	background: linear-gradient(180deg, rgba(39, 45, 53, 0.95), rgba(28, 31, 36, 1));
}

.gensquare-header h2,
.gencircle-header h2,
.gencircleindex-header h2,
.genpolygon-header h2,
.genstar-header h2,
.gentext-header h2,
.shiftpoints-header h2,
.modifyrotate-header h2,
.deletedextrapoints-header h2 {
	font-size: 18px;
	margin-bottom: 6px;
}

.gensquare-header p,
.gencircle-header p,
.gencircleindex-header p,
.genpolygon-header p,
.genstar-header p,
.gentext-header p,
.shiftpoints-header p,
.modifyrotate-header p,
.deletedextrapoints-header p {
	font-size: 12px;
	line-height: 1.45;
	color: #aeb6c2;
}

.gensquare-body,
.gencircle-body,
.gencircleindex-body,
.genpolygon-body,
.genstar-body,
.gentext-body,
.shiftpoints-body,
.modifyrotate-body,
.deletedextrapoints-body {
	padding: 18px 20px 8px;
	overflow-y: auto;
}

.gensquare-note,
.gencircle-note,
.gencircleindex-note,
.genpolygon-note,
.genstar-note,
.gentext-note,
.shiftpoints-note,
.modifyrotate-note,
.deletedextrapoints-note {
	margin-top: 14px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(76, 182, 255, 0.1);
	color: #b7dcff;
	font-size: 12px;
}

.gensquare-footer,
.gencircle-footer,
.gencircleindex-footer,
.genpolygon-footer,
.genstar-footer,
.gentext-footer,
.shiftpoints-footer,
.modifyrotate-footer,
.deletedextrapoints-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 0 20px 20px;
	margin-top: 8px;
}

.gensquare-btn,
.gencircle-btn,
.gencircleindex-btn,
.genpolygon-btn,
.genstar-btn,
.gentext-btn,
.shiftpoints-btn,
.modifyrotate-btn,
.deletedextrapoints-btn {
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.gensquare-btn-secondary,
.gencircle-btn-secondary,
.gencircleindex-btn-secondary,
.genpolygon-btn-secondary,
.genstar-btn-secondary,
.gentext-btn-secondary,
.shiftpoints-btn-secondary,
.modifyrotate-btn-secondary,
.deletedextrapoints-btn-secondary {
	background: #2a3037;
	color: #eef2f7;
	border-color: #404854;
}

.gensquare-btn-secondary:hover,
.gencircle-btn-secondary:hover,
.gencircleindex-btn-secondary:hover,
.genpolygon-btn-secondary:hover,
.genstar-btn-secondary:hover,
.gentext-btn-secondary:hover,
.shiftpoints-btn-secondary:hover,
.modifyrotate-btn-secondary:hover,
.deletedextrapoints-btn-secondary:hover {
	background: #323841;
}

#shiftpoints-copy,
#modifyrotate-copy {
	background: linear-gradient(180deg, #34a9ff, #1686d8);
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(22, 134, 216, 0.28);
	border-color: transparent;
}

#shiftpoints-copy:hover,
#modifyrotate-copy:hover {
	filter: brightness(1.05);
}

.gensquare-btn-primary,
.gencircle-btn-primary,
.gencircleindex-btn-primary,
.genpolygon-btn-primary,
.genstar-btn-primary,
.gentext-btn-primary,
.shiftpoints-btn-primary,
.modifyrotate-btn-primary,
.deletedextrapoints-btn-primary {
	background: linear-gradient(180deg, #34a9ff, #1686d8);
	color: #ffffff;
	box-shadow: 0 8px 20px rgba(22, 134, 216, 0.28);
}

.gensquare-btn-primary:hover,
.gencircle-btn-primary:hover,
.gencircleindex-btn-primary:hover,
.genpolygon-btn-primary:hover,
.genstar-btn-primary:hover,
.gentext-btn-primary:hover,
.shiftpoints-btn-primary:hover,
.modifyrotate-btn-primary:hover,
.deletedextrapoints-btn-primary:hover {
	filter: brightness(1.05);
}

.deletedextrapoints-row {
	display: grid;
	gap: 6px;
	font-size: 12px;
	color: #c9d1db;
}

.deletedextrapoints-row input[type="number"] {
	width: 100%;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 10px 10px;
	outline: none;
}

.deletedextrapoints-row input[type="number"]:focus {
	border-color: #4cb6ff;
	box-shadow: 0 0 0 2px rgba(76, 182, 255, 0.18);
}

.deletedextrapoints-note.warning {
	background: rgba(255, 187, 69, 0.12);
	color: #ffd28a;
}

.gensquare-grid,
.gencircle-grid,
.gencircleindex-grid,
.genpolygon-grid,
.genstar-grid,
.gentext-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.gensquare-grid label,
.gencircle-grid label,
.gencircleindex-grid label,
.genpolygon-grid label,
.genstar-grid label,
.gentext-grid label {
	display: grid;
	gap: 6px;
	font-size: 12px;
	color: #c9d1db;
}

.gensquare-grid input[type="number"],
.gencircle-grid input[type="number"],
.gencircleindex-grid input[type="number"],
.genpolygon-grid input[type="number"],
.genstar-grid input[type="number"],
.gentext-grid input[type="number"],
.gensquare-grid select,
.gencircle-grid select,
.gencircleindex-grid select,
.genpolygon-grid select,
.genstar-grid select,
.gentext-grid select {
	width: 100%;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 10px 10px;
	outline: none;
}

.gensquare-grid input[type="number"]:focus,
.gencircle-grid input[type="number"]:focus,
.gencircleindex-grid input[type="number"]:focus,
.genpolygon-grid input[type="number"]:focus,
.genstar-grid input[type="number"]:focus,
.gentext-grid input[type="number"]:focus,
.gensquare-grid select:focus,
.gencircle-grid select:focus,
.gencircleindex-grid select:focus,
.genpolygon-grid select:focus,
.genstar-grid select:focus,
.gentext-grid select:focus {
	border-color: #4cb6ff;
	box-shadow: 0 0 0 2px rgba(76, 182, 255, 0.18);
}

.gensquare-grid .genshape-toggle,
.gencircle-grid .genshape-toggle,
.gencircleindex-grid .genshape-toggle,
.genpolygon-grid .genshape-toggle,
.genstar-grid .genshape-toggle,
.gentext-grid .genshape-toggle {
	grid-column: span 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border: 1px solid #3c4450;
	background: #111419;
	border-radius: 8px;
	gap: 12px;
}

.gensquare-grid .genshape-toggle input[type="checkbox"],
.gencircle-grid .genshape-toggle input[type="checkbox"],
.gencircleindex-grid .genshape-toggle input[type="checkbox"],
.genpolygon-grid .genshape-toggle input[type="checkbox"],
.genstar-grid .genshape-toggle input[type="checkbox"],
.gentext-grid .genshape-toggle input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #4cb6ff;
}

/* Specific styles for Insert Text Generator */
.gentext-text-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 12px;
}

.gentext-text-row label,
.gentext-font-row label {
	font-size: 12px;
	color: #c9d1db;
	font-weight: 600;
}

.gentext-text-row textarea {
	width: 100%;
	min-height: 60px;
	resize: vertical;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 10px;
	font: 13px/1.4 Consolas, Monaco, monospace;
	outline: none;
	box-sizing: border-box;
}

.gentext-text-row textarea:focus {
	border-color: #4cb6ff;
	box-shadow: 0 0 0 2px rgba(76, 182, 255, 0.18);
}

.gentext-font-row {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 12px;
}

.gentext-font-select-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gentext-font-select-wrap select {
	width: 100%;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 10px 10px;
	outline: none;
}

.gentext-font-select-wrap select:focus {
	border-color: #4cb6ff;
	box-shadow: 0 0 0 2px rgba(76, 182, 255, 0.18);
}

.gentext-file-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gentext-preview-toggle-wrap {
	grid-column: span 1 !important;
}

.gentext-preview-toggle-wrap input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #4cb6ff;
}

.shiftpoints-axis-grid {
	display: grid;
	gap: 12px;
}

.shiftpoints-axis-row {
	display: grid;
	grid-template-columns: 24px 24px 1fr;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #343b45;
	background: #14181e;
	border-radius: 10px;
}

.shiftpoints-axis-row > span {
	font-size: 13px;
	font-weight: 700;
	color: #dbe4ef;
}

.shiftpoints-axis-row input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #3aa8f7;
}

.shiftpoints-axis-row input[type="number"] {
	width: 100%;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 9px 10px;
	outline: none;
}

.shiftpoints-axis-row input[type="number"]:focus {
	border-color: #4cb6ff;
	box-shadow: 0 0 0 2px rgba(76, 182, 255, 0.18);
}

.shiftpoints-axis-row input[type="number"].disabled {
	opacity: 0.55;
}

.shiftpoints-input-group {
	display: grid;
	gap: 6px;
	margin-top: 12px;
}

.shiftpoints-label {
	display: block;
	font-size: 12px;
	color: #c9d1db;
}

.shiftpoints-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.shiftpoints-label-row .shiftpoints-label {
	margin: 0;
}

.shiftpoints-label-row .shiftpoints-btn {
	padding: 4px 10px;
	font-size: 11px;
}

.shiftpoints-home-row {
	display: grid;
	grid-template-columns: auto minmax(80px, 1fr) auto;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.shiftpoints-home-row input[type="number"] {
	min-width: 0;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 8px;
}

.shiftpoints-textarea {
	width: 100%;
	min-height: 108px;
	resize: vertical;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 10px;
	font: 12px/1.4 Consolas, Monaco, monospace;
	outline: none;
}

.shiftpoints-textarea:focus {
	border-color: #4cb6ff;
	box-shadow: 0 0 0 2px rgba(76, 182, 255, 0.18);
}

.shiftpoints-note.warning {
	background: rgba(255, 187, 69, 0.12);
	color: #ffd28a;
}

.modifyrotate-note.warning {
	background: rgba(255, 187, 69, 0.12);
	color: #ffd28a;
}

.modifyrotate-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.modifyrotate-grid label {
	display: grid;
	gap: 6px;
	font-size: 12px;
	color: #c9d1db;
}

#modifyoffsetpath-popup-overlay .modifyrotate-grid [hidden] {
	display: none;
}

.modifyrotate-grid input[type="number"] {
	width: 100%;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 9px 10px;
	outline: none;
}

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

.unitconvert-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #c9d1db;
}

#unitconvert-popup-overlay .modifyrotate-window {
	width: min(820px, 100%);
}

.unitconvert-cell textarea {
	min-height: 260px;
}

.unitconvert-cell label {
	align-self: flex-start;
}

.modifyrotate-select {
	width: 100%;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 9px 10px;
	margin-bottom: 12px;
	outline: none;
}

.modifyrotate-grid input[type="number"]:focus,
.modifyrotate-select:focus,
.modifyrotate-slider-wrap input[type="number"]:focus,
.modifyrotate-slider-wrap input[type="range"]:focus-visible,
.modifyrotate-body textarea:focus {
	border-color: #4cb6ff;
	box-shadow: 0 0 0 2px rgba(76, 182, 255, 0.18);
}

.modifyrotate-slider-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	font-size: 12px;
	color: #d1dae7;
	margin-bottom: 12px;
}

.modifyrotate-slider-wrap input[type="number"] {
	width: 120px;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 8px 10px;
	outline: none;
}

.modifyrotate-slider-wrap input[type="range"] {
	width: 100%;
	accent-color: #4cb6ff;
}

.modifyrotate-label,
.gencircleindex-label {
	display: block;
	font-size: 12px;
	color: #c9d1db;
	margin: 8px 0 6px;
}

.modifyrotate-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.modifyrotate-label-row .modifyrotate-label {
	margin: 8px 0 6px;
}

.modifyrotate-label-row .modifyrotate-btn {
	padding: 4px 10px;
	font-size: 11px;
}

.modifyrotate-body textarea,
.gencircleindex-body textarea {
	width: 100%;
	min-height: 108px;
	resize: vertical;
	border: 1px solid #3c4450;
	background: #111419;
	color: #eef2f7;
	border-radius: 8px;
	padding: 10px;
	font: 12px/1.4 Consolas, Monaco, monospace;
	outline: none;
}

.modifyrotate-preview {
	margin-top: 10px;
	padding: 0;
	border: 1px solid #344454;
	background: #121821;
	border-radius: 8px;
	overflow: hidden;
	min-height: 210px;
}

.modifyrotate-preview-canvas {
	display: block;
	width: 100%;
	height: 210px;
}

@media (max-width: 560px) {
	.gensquare-grid,
	.gencircle-grid,
	.gencircleindex-grid,
	.genpolygon-grid,
	.genstar-grid,
	.gentext-grid,
	.modifyrotate-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gensquare-footer,
	.gencircle-footer,
	.gencircleindex-footer,
	.genpolygon-footer,
	.genstar-footer,
	.gentext-footer,
	.shiftpoints-footer,
	.modifyrotate-footer {
		flex-direction: column;
	}

	.gensquare-btn,
	.gencircle-btn,
	.gencircleindex-btn,
	.genpolygon-btn,
	.genstar-btn,
	.gentext-btn,
	.shiftpoints-btn,
	.modifyrotate-btn {
		width: 100%;
	}

	.shiftpoints-home-row {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.shiftpoints-home-row button {
		grid-column: 1 / -1;
	}
}