:root {
	--bg: #f4f1e8;
	--surface: #fffdf7;
	--surface-2: #ebe5d7;
	--ink: #182018;
	--muted: #657064;
	--line: #d8d0bf;
	--leaf: #3f6d45;
	--leaf-dark: #244a2b;
	--amber: #b87934;
	--danger: #b6423a;
	--warning: #8a6120;
	--ok: #39744a;
	--shadow: 0 18px 50px rgba(42, 35, 25, 0.08);
	font-family: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
	color: var(--ink);
	background: var(--bg);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-width: 1100px;
	background:
		linear-gradient(135deg, rgba(63, 109, 69, 0.08), transparent 32%),
		linear-gradient(315deg, rgba(184, 121, 52, 0.08), transparent 34%),
		var(--bg);
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	border: 0;
	cursor: pointer;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.app-shell {
	min-height: 100vh;
	padding: 24px;
}

.dashboard {
	display: grid;
	grid-template-columns: 250px minmax(520px, 1fr) 360px;
	gap: 16px;
	max-width: 1540px;
	margin: 0 auto;
}

.panel {
	background: rgba(255, 253, 247, 0.92);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow);
	overflow: hidden;
}

.topbar {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 20px;
	padding: 22px 24px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow);
}

.eyebrow {
	color: var(--leaf);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.title {
	margin: 6px 0 0;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0;
}

.subtitle {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 14px;
}

.toolbar {
	display: flex;
	align-items: end;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.field {
	display: grid;
	gap: 6px;
	min-width: 150px;
}

.field span,
.field-label span {
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
}

.field-label {
	display: grid;
	gap: 4px;
}

.field-note {
	color: var(--muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
}

.input,
.select,
.textarea {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fffaf0;
	color: var(--ink);
	padding: 10px 11px;
	outline: none;
}

.textarea {
	min-height: 104px;
	resize: vertical;
	font-family: "Cascadia Mono", Consolas, monospace;
	font-size: 12px;
	line-height: 1.55;
}

.input:focus,
.select:focus,
.textarea:focus {
	border-color: var(--leaf);
	box-shadow: 0 0 0 3px rgba(63, 109, 69, 0.14);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 9px 13px;
	border-radius: 7px;
	background: var(--surface-2);
	color: var(--ink);
	font-weight: 800;
	transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.button:active {
	transform: translateY(1px);
}

.button.primary {
	background: var(--leaf);
	color: white;
}

.button.primary:hover {
	background: var(--leaf-dark);
}

.button.ghost {
	background: transparent;
	border: 1px solid var(--line);
}

.button.danger {
	background: #f7dedb;
	color: var(--danger);
}

.button.compact {
	min-height: 32px;
	padding: 7px 10px;
	font-size: 12px;
}

.side-panel {
	padding: 16px;
	display: grid;
	gap: 14px;
	align-content: start;
}

.module-list {
	display: grid;
	gap: 8px;
}

.module-button {
	width: 100%;
	padding: 13px;
	border-radius: 7px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 8px;
	text-align: left;
	background: transparent;
	color: var(--ink);
	border: 1px solid transparent;
}

.module-button:hover,
.module-button.active {
	background: #f8f4e9;
	border-color: var(--line);
}

.module-name {
	font-weight: 900;
}

.module-meta,
.small {
	color: var(--muted);
	font-size: 12px;
}

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 24px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--surface-2);
	color: var(--muted);
	font-size: 12px;
	font-weight: 900;
}

.badge.changed {
	background: #ddf0df;
	color: var(--leaf-dark);
}

.badge.error {
	background: #f5d8d5;
	color: var(--danger);
}

.badge.warning {
	background: #f7e6c9;
	color: var(--warning);
}

.status-strip {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

.editor {
	min-height: 720px;
	display: grid;
	grid-template-rows: auto 1fr;
}

.editor-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 14px;
	padding: 16px;
	border-bottom: 1px solid var(--line);
	background: #fffcf4;
}

.editor-title {
	margin: 0;
	font-size: 20px;
}

.editor-actions {
	display: flex;
	gap: 8px;
	align-items: end;
}

.editor-body {
	display: grid;
	grid-template-columns: 42% 58%;
	min-height: 0;
}

.item-list {
	border-right: 1px solid var(--line);
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr;
}

.search-row {
	padding: 12px;
	border-bottom: 1px solid var(--line);
}

.rows {
	overflow: auto;
	max-height: 645px;
}

.row-button {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(216, 208, 191, 0.6);
	background: transparent;
	text-align: left;
}

.row-button:hover,
.row-button.active {
	background: #f7f1e5;
}

.row-title {
	font-weight: 850;
}

.row-sub {
	color: var(--muted);
	font-size: 12px;
	margin-top: 4px;
}

.form-panel {
	padding: 16px;
	overflow: auto;
	max-height: 705px;
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.form-grid .wide {
	grid-column: 1 / -1;
}

.empty {
	padding: 28px;
	text-align: center;
	color: var(--muted);
}

.editor-note {
	margin-bottom: 14px;
}

.structured-field {
	gap: 10px;
	min-width: 0;
}

.structured-head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 12px;
}

.structured-head .field-label {
	flex: 1;
}

.structured-list {
	display: grid;
	gap: 10px;
}

.structured-row {
	display: grid;
	grid-template-columns: minmax(180px, 1.2fr) minmax(120px, 0.8fr) auto;
	align-items: end;
	gap: 10px;
	padding: 10px;
	border: 1px solid rgba(216, 208, 191, 0.75);
	border-radius: 8px;
	background: #fffaf0;
}

.structured-row.string-row {
	grid-template-columns: 1fr auto;
}

.field.mini {
	min-width: 0;
	gap: 5px;
}

.field.mini span {
	font-size: 11px;
}

.row-action {
	white-space: nowrap;
}

.row-json {
	grid-column: 1 / -1;
}

.drop-source-card {
	display: grid;
	gap: 10px;
	padding: 12px;
	border: 1px solid rgba(216, 208, 191, 0.75);
	border-radius: 8px;
	background: #fffaf0;
}

.drop-source-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.drop-source-grid .wide {
	grid-column: 1 / -1;
}

.structured-foot {
	display: flex;
	justify-content: flex-end;
}

.compact-empty {
	padding: 14px;
	border: 1px dashed rgba(216, 208, 191, 0.85);
	border-radius: 8px;
	background: rgba(255, 250, 240, 0.58);
}

.compact-textarea {
	min-height: 76px;
}

.right-stack {
	display: grid;
	gap: 16px;
	align-content: start;
}

.compact-panel {
	padding: 16px;
	display: grid;
	gap: 12px;
}

.panel-title {
	margin: 0;
	font-size: 16px;
}

.list {
	display: grid;
	gap: 8px;
	max-height: 260px;
	overflow: auto;
}

.notice {
	padding: 10px 12px;
	border-radius: 7px;
	background: #f5efe2;
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
	line-height: 1.45;
}

.notice.error {
	background: #f8e3e1;
	border-color: #e2aaa5;
	color: var(--danger);
}

.notice.warning {
	background: #f8ead0;
	border-color: #e5c991;
	color: var(--warning);
}

.notice.ok {
	background: #e5f2e7;
	border-color: #bad6c0;
	color: var(--ok);
}

.diff-row,
.revision-row {
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: 7px;
	background: #fffaf0;
	display: grid;
	gap: 8px;
}

.diff-path,
.mono {
	font-family: "Cascadia Mono", Consolas, monospace;
	font-size: 12px;
}

.diff-values {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.diff-values pre {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-word;
	font-family: "Cascadia Mono", Consolas, monospace;
	font-size: 11px;
	color: var(--muted);
	background: #f3eddf;
	border-radius: 6px;
	padding: 8px;
	max-height: 120px;
	overflow: auto;
}

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

.revision-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.auth-card {
	max-width: 520px;
	margin: 80px auto;
	padding: 24px;
	display: grid;
	gap: 16px;
}

.dialog-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(24, 32, 24, 0.42);
	display: grid;
	place-items: center;
	padding: 24px;
}

.dialog {
	width: min(640px, 100%);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 8px;
	box-shadow: var(--shadow);
	padding: 20px;
	display: grid;
	gap: 14px;
}

.dialog-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
}

@media (max-width: 1180px) {
	body {
		min-width: 0;
	}

	.dashboard {
		grid-template-columns: 1fr;
	}

	.editor-body {
		grid-template-columns: 1fr;
	}

	.item-list {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.rows,
	.form-panel {
		max-height: none;
	}
}

@media (max-width: 760px) {
	.app-shell {
		padding: 12px;
	}

	.topbar {
		grid-template-columns: 1fr;
		align-items: stretch;
		padding: 16px;
	}

	.toolbar {
		display: grid;
		grid-template-columns: 1fr;
		justify-content: stretch;
	}

	.toolbar .field,
	.toolbar .button {
		width: 100%;
		min-width: 0;
	}

	.title {
		font-size: 24px;
		line-height: 1.08;
	}

	.editor {
		min-height: 0;
	}

	.editor-head {
		grid-template-columns: 1fr;
	}

	.editor-actions {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.form-panel {
		padding: 12px;
	}

	.form-grid,
	.drop-source-grid {
		grid-template-columns: 1fr;
	}

	.field {
		min-width: 0;
	}

	.structured-head,
	.status-strip {
		align-items: stretch;
	}

	.structured-head {
		display: grid;
		grid-template-columns: 1fr;
	}

	.structured-row,
	.structured-row.string-row {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.structured-foot {
		justify-content: stretch;
	}

	.structured-foot .button,
	.row-action {
		width: 100%;
	}

	.diff-values {
		grid-template-columns: 1fr;
	}

	.dialog-actions,
	.revision-actions {
		display: grid;
		grid-template-columns: 1fr;
	}
}