body { font-family: Arial, Helvetica, sans-serif; margin:0; height:100vh; }

/* 布局 */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
.app-layout { display: flex; height: 100vh; font-family: Arial, sans-serif; }

/* 侧边栏 */
.sidebar { width: 92px; background: #f5f7fb; border-right: 1px solid #e1e4ea; display: flex; flex-direction: column; align-items: center; padding-top: 12px; }
.sidebar-items { display: flex; flex-direction: column; gap: 22px; }
.sidebar-item { width: 72px; height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border-radius: 10px; }
.sidebar-item img { width: 44px; height: 44px; -webkit-user-drag: none; }
.app-name { font-size:11px; font-weight:600; color:#1a202c; text-align:center;margin-top:4px; }

/* 主区域 */
.main-content { flex: 1; padding: 12px; display: flex; flex-direction: column; min-width: 0; }

/* 编辑器行 */
.editor-row { display: flex; gap: 12px; flex: 1; min-height: 0; }
.ldf-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ldf-editor textarea { width: 100%; height: 100%; resize: none; font-family: monospace; font-size: 13px; padding: 8px; overflow: auto; white-space: pre; }

.right-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.editor-toolbar { height: 36px; display: flex; gap: 6px; align-items: center; padding: 4px; }
.editor-toolbar button { padding: 6px 10px; border: none; border-radius: 4px; background: #e6eefc; cursor: pointer; }
.editor-toolbar button.active { background: #cfe0ff; }

/* Toolbar groups: left and right-aligned controls */
.editor-toolbar { justify-content: space-between; }
.editor-toolbar .group { display: flex; gap: 6px; align-items: center; }
.editor-toolbar .group.right { margin-left: 12px; }
.editor-toolbar .hide-button { width: 34px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-weight: 700; }

.code-area { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.code-area .code-editor { width: 100%; height: 100%; }

/* Excel view: container that shows a table and allows scrolling when oversized */
.excel-container { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; border: 1px solid #e6eefc; background: #fff; }
.excel-wrapper { flex: 1; overflow: auto; padding: 8px; }
.excel-table { border-collapse: collapse; width: 100%; }
.excel-table td, .excel-table th { border: 1px solid #dfe7f5; padding: 6px 8px; font-size: 13px; }
.excel-table th { background: #f3f7ff; font-weight: 600; }

/* When right editor area is used for Excel, ensure it doesn't exceed available space */
.editor-row { align-items: stretch; }

/* CodeMirror 强制填满容器并允许内部滚动 */
.CodeMirror { height: 100% !important; }
.CodeMirror-scroll { height: 100% !important; overflow: auto; }
.CodeMirror pre { white-space: pre; }

/* 防止长单行内容扩展外部布局 */
.editor-row > * { min-width: 0; }

/* 其他小样式 */
body, button { font-family: inherit; }

/* 响应式：窄屏设备（手机）时将左右编辑器改为上下堆叠 */
@media (max-width: 768px) {
	.app-layout { flex-direction: column; }
	.sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid #e1e4ea; padding: 8px; }
	.sidebar-items { flex-direction: row; gap: 12px; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; }
	.sidebar-item { width: 64px; height: auto; padding: 6px; }
	.sidebar-item .app-icon { margin-bottom: 4px; }

	/* 编辑器区域竖直排列 */
	.main-content { padding: 8px; }
	.editor-row { flex-direction: column; gap: 8px; }
	.editor-row > * { width: 100%; }

	/* 给每个编辑块一个相对高度，CodeMirror 会填满其容器 */
	.ldf-editor { flex: none; height: 38vh; }
	.right-editor { flex: none; height: 50vh; }

	/* 确保 CodeMirror 内部滚动仍然有效 */
	.CodeMirror, .CodeMirror-scroll { height: 100% !important; }
}

/* 当左侧隐藏时，右侧占满可用空间 */
.editor-row.collapsed .right-editor { flex: 1 1 100%; }
.editor-row.collapsed .ldf-editor { display: none; }

/* Toast 通知样式（非阻塞提示） */
.toast-container {
	position: fixed;
	top: 16px;
	right: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 9999;
}
.toast {
	min-width: 160px;
	max-width: 360px;
	padding: 8px 12px;
	border-radius: 6px;
	color: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity 220ms ease, transform 220ms ease;
	font-size: 13px;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: #2f855a; }
.toast.error { background: #c53030; }
.toast.info { background: #3182ce; }