.in4u-mapgen { max-width: 760px; margin: 0 auto; font-family: inherit; }

.in4u-mapgen-controls {
	background: #f7f8fa; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; margin-bottom: 14px;
}
.in4u-mapgen-field { display: block; }
.in4u-mapgen-field > span { display: block; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.in4u-mapgen-search { display: flex; gap: 8px; }
.in4u-mapgen-field input[type="text"] {
	flex: 1; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; font-family: inherit; min-height: 44px;
}
.in4u-mapgen-status { display: block; font-size: 14px; color: #2563eb; margin-top: 8px; }

.in4u-mapgen-btn { padding: 10px 18px; border-radius: 8px; border: 1px solid transparent; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.in4u-mapgen-btn-primary { background: #2563eb; color: #fff; }
.in4u-mapgen-btn-primary:hover { background: #1d4ed8; }

.in4u-mapgen-results { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.in4u-mapgen-result {
	text-align: right; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
	font-size: 13px; color: #374151; cursor: pointer; line-height: 1.4;
}
.in4u-mapgen-result:hover { background: #eff4ff; border-color: #93b4f5; }
.in4u-mapgen-result.active { background: #dbeafe; border-color: #2563eb; }

.in4u-mapgen-map { height: 380px; width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.in4u-mapgen-hint { font-size: 13px; color: #6b7280; margin: 8px 2px 16px; }

.in4u-mapgen-out { margin-top: 4px; }
.in4u-mapgen-out b { display: block; font-size: 14px; color: #374151; margin-bottom: 6px; }
.in4u-mapgen-code {
	width: 100%; border: 1px solid #d1d5db; background: #f9fafb; border-radius: 8px; padding: 10px 12px;
	font-size: 13px; line-height: 1.5; font-family: ui-monospace, Menlo, Consolas, monospace;
	direction: ltr; text-align: left; resize: vertical; min-height: 84px;
}
.in4u-mapgen-actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }

@media (max-width: 480px) {
	.in4u-mapgen-map { height: 300px; }
	.in4u-mapgen-search { flex-direction: column; }
	.in4u-mapgen-btn { width: 100%; }
}