.tool-layout-json {
	align-items: stretch;
}

.tool-layout-json .tool-panel-json-input,
.tool-layout-json .tool-panel-json-output {
	display: grid;
	padding: 18px;
	background:
		linear-gradient(180deg, rgba(250, 253, 250, 0.94), rgba(241, 247, 243, 0.98));
}

.tool-layout-json .tool-panel-json-input {
	grid-template-rows: auto minmax(0, 1fr);
}

.tool-layout-json .tool-panel-json-output {
	grid-template-rows: auto auto minmax(0, 1fr);
}

.tool-layout-json .panel-head {
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(41, 72, 58, 0.08);
}

.tool-layout-json .panel-head h2 {
	font-size: 16px;
	letter-spacing: 0.01em;
}

.tool-status-inline {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	padding: 10px 12px;
	min-height: 0;
	border-radius: calc(var(--radius-md) - 2px);
	background:
		linear-gradient(135deg, rgba(246, 250, 247, 0.9), rgba(237, 245, 239, 0.92));
	box-shadow:
		inset 0 0 0 1px rgba(41, 72, 58, 0.06);
}

.tool-status-inline.is-success {
	background:
		linear-gradient(135deg, rgba(236, 247, 240, 0.98), rgba(228, 243, 233, 0.98));
}

.tool-status-inline.is-error {
	background:
		linear-gradient(135deg, rgba(253, 242, 242, 0.98), rgba(249, 232, 232, 0.98));
}

.tool-status-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 9px;
	min-width: 44px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(45, 82, 60, 0.88);
	background: rgba(255, 255, 255, 0.82);
	box-shadow: inset 0 0 0 1px rgba(41, 72, 58, 0.08);
}

.tool-status-inline.is-error .tool-status-indicator {
	color: #9d3131;
	box-shadow: inset 0 0 0 1px rgba(157, 49, 49, 0.12);
}

.tool-status-copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.tool-status-label {
	font-size: 13px;
	line-height: 1.35;
}

.tool-status-detail,
.tool-status-meta {
	font-size: 12px;
	color: rgba(72, 91, 81, 0.82);
}

.tool-status-detail {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tool-status-meta {
	align-self: center;
	white-space: nowrap;
}

.tool-toast-region {
	position: fixed;
	right: 18px;
	bottom: 18px;
	display: grid;
	gap: 8px;
	z-index: 30;
	pointer-events: none;
}

.tool-toast {
	max-width: min(360px, calc(100vw - 24px));
	padding: 11px 14px;
	border-radius: 14px;
	background: rgba(28, 40, 33, 0.92);
	color: #f6faf7;
	font-size: 13px;
	line-height: 1.45;
	box-shadow:
		0 14px 28px rgba(18, 27, 22, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.06);
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity 180ms ease,
		transform 180ms ease;
}

.tool-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.tool-toast.is-error {
	background: rgba(120, 33, 33, 0.94);
}

.field-json {
	display: grid;
	gap: 12px;
	min-height: 0;
	grid-template-rows: auto minmax(0, 1fr);
}

.field-json-output {
	height: 100%;
}

.tool-column-head {
	display: grid;
	gap: 10px;
}

.tool-toolbar-json {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tool-toolbar-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	color: var(--text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow:
		inset 0 0 0 1px rgba(41, 72, 58, 0.08),
		0 8px 18px rgba(37, 63, 47, 0.05);
	cursor: pointer;
	transition:
		background-color 120ms ease,
		box-shadow 120ms ease,
		transform 120ms ease,
		color 120ms ease;
}

.tool-toolbar-button:hover {
	transform: translateY(-1px);
	box-shadow:
		inset 0 0 0 1px rgba(41, 72, 58, 0.12),
		0 10px 20px rgba(37, 63, 47, 0.08);
}

.tool-toolbar-button.is-active,
.tool-toolbar-button-accent {
	background: linear-gradient(180deg, rgba(47, 106, 79, 0.96), rgba(35, 89, 63, 0.98));
	color: #f4fbf6;
	box-shadow: 0 12px 22px rgba(47, 106, 79, 0.18);
}

.editor-shell,
.output-shell {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	height: 100%;
	min-height: clamp(360px, 62dvh, 760px);
	border-radius: var(--radius-md);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 250, 248, 0.9));
	box-shadow:
		inset 0 0 0 1px rgba(41, 72, 58, 0.07),
		0 16px 28px rgba(28, 52, 37, 0.06);
	overflow: hidden;
}

.editor-main {
	position: relative;
	min-width: 0;
	background:
		linear-gradient(180deg, rgba(253, 254, 253, 0.86), rgba(248, 251, 249, 0.86));
}

.editor-gutter,
.editor-highlight,
.editor-input,
.tool-layout-json .output-panel {
	font-family:
		"Iosevka Fixed", "Iosevka", "SFMono-Regular", "IBM Plex Mono", monospace;
	font-size: 13px;
	line-height: 1.7;
	tab-size: 2;
}

.editor-gutter {
	margin: 0;
	padding: 16px 10px 20px 14px;
	min-width: 48px;
	text-align: right;
	color: rgba(50, 70, 60, 0.45);
	background: rgba(236, 241, 238, 0.94);
	border-right: 1px solid rgba(41, 72, 58, 0.08);
	overflow: hidden;
	user-select: none;
}

.editor-highlight,
.editor-input {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 16px 16px 20px;
	overflow: auto;
	white-space: pre;
	word-break: normal;
}

.editor-highlight {
	color: var(--text);
	pointer-events: none;
}

.editor-input {
	resize: none;
	min-height: 100%;
	color: transparent;
	-webkit-text-fill-color: transparent;
	background: transparent;
	caret-color: var(--text);
	box-shadow: none;
	border-radius: 0;
}

.editor-input::placeholder {
	color: var(--muted);
}

.tool-layout-json .output-panel {
	min-height: clamp(360px, 62dvh, 760px);
	padding: 16px 16px 20px;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

.token-key {
	color: #0f6b46;
	font-weight: 700;
}

.token-string {
	color: #2457a6;
}

.token-number {
	color: #b15a00;
	font-weight: 600;
}

.token-boolean,
.token-null {
	color: #8a2f6b;
	font-weight: 600;
}

.token-punctuation {
	color: #32463c;
}

@media (max-width: 860px) {
	.tool-layout-json .tool-panel-json-input,
	.tool-layout-json .tool-panel-json-output {
		grid-template-rows: none;
	}

	.tool-status-inline {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.tool-status-meta {
		align-self: start;
	}

	.tool-toast-region {
		right: 12px;
		left: 12px;
		bottom: 12px;
	}

	.tool-toast {
		max-width: none;
	}

	.editor-shell,
	.output-shell,
	.tool-layout-json .output-panel {
		min-height: min(360px, 52dvh);
	}

	.editor-gutter {
		min-width: 40px;
		padding-inline: 8px;
	}

}