body {
	font-family: sans-serif;
	padding: 20px;
}
input, textarea {
	width: 100%;
	margin-bottom: 10px;
}
.db-section {
	border: 1px solid #ccc;
	padding: 15px;
	margin-bottom: 20px;
}
.diff-block {
	border: 1px dashed #999;
	margin-top: 20px;
	padding: 10px;
}
.diff-block.collapsed .diff-pair,
.diff-block.collapsed .sql-result {
	display: none;
}

.textarea-sql {
	height: 150px;
	font-family: monospace;
}
.columns {
	display: flex;
	gap: 10px;
}
.col {
	flex: 1;
}
button {
	padding: 10px 20px;
}

.codebox {
	overflow: auto;
	font-family: monospace;
	border: 1px solid #ccc;
	background: #f8f8f8;
	padding: 0;
	max-height: 600px;
}

.codebox-content {
	padding: 10px;
	overflow-x: auto;
	overflow-y: hidden;
}
.codebox-content.nowrap {
	white-space: nowrap;
}

.line {
	min-height: 1.5em;
	padding: 2px 6px;
	font-family: monospace;
	white-space: nowrap;
}

.line.diff-strong {
	background-color: #ff0000;
}
.line.diff-weak {
	background-color: #fff0f0;
}

.diff-pair {
	display: flex;
	gap: 10px;
}
.codebox.left,
.codebox.right {
	width: 50%;
}