/* DTU参数配置工具 样式 */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
	background: #f0f2f5;
	color: #303133;
	font-size: 14px;
}
[v-cloak] { display: none; }

#app { display: flex; flex-direction: column; height: 100vh; }
.spacer { flex: 1; }

/* 标题栏 */
.app-header {
	flex-shrink: 0;
	height: 50px;
	background: #20222a;
	color: #fff;
	display: flex;
	align-items: center;
	padding: 0 16px;
}
.app-header .logo {
	font-size: 17px;
	font-weight: 600;
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.app-header .logo .dot {
	width: 10px; height: 10px; border-radius: 50%;
	background: #409eff; margin-right: 8px;
	box-shadow: 0 0 6px #409eff;
}
.app-header .sub { color: #909399; margin-left: 12px; font-size: 12px; }
.lang-switch .el-radio-button__inner { background: transparent; color: #cfd3dc; border-color: #4c4d55; }
.lang-switch .el-radio-button__orig-radio:checked + .el-radio-button__inner {
	background: #409eff; border-color: #409eff; color: #fff; box-shadow: -1px 0 0 0 #409eff;
}

/* 顶部栏: 串口设置 (横向一行) */
.serial-bar {
	flex-shrink: 0;
	background: #fff;
	border-bottom: 1px solid #e4e7ed;
	box-shadow: 0 1px 4px rgba(0,21,41,.08);
	padding: 7px 14px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	z-index: 5;
}
.serial-bar .field { display: inline-flex; align-items: center; gap: 5px; }
.serial-bar .field label { font-size: 12px; color: #606266; white-space: nowrap; }
.serial-bar .el-button + .el-button { margin-left: 0; }
.serial-status {
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
}
.serial-status.info { background: #f4f4f5; color: #909399; }
.serial-status.success { background: #f0f9eb; color: #67c23a; }
.serial-status.danger { background: #fef0f0; color: #f56c6c; }
.serial-status.primary { background: #ecf5ff; color: #409eff; }

.not-support {
	background: #fef0f0; color: #f56c6c;
	padding: 8px 12px; border-radius: 4px; font-size: 13px; line-height: 1.5;
	flex: 1;
}

/* 主体: 左参数配置 | 分隔条 | 右日志 */
.app-main { flex: 1; display: flex; min-height: 0; padding: 10px; }

/* 左侧参数配置 */
.config-card {
	flex-shrink: 0;
	min-width: 420px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0,21,41,.08);
	display: flex;
	flex-direction: column;
	padding: 14px 20px 0;
	min-height: 0;
}
.card-title-row {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.card-title-row .el-button + .el-button { margin-left: 0; }
.config-card .card-title { margin: 0; font-size: 16px; font-weight: 600; flex-shrink: 0; }
.config-card .el-tabs { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.config-card .el-tabs__content { flex: 1; overflow-y: auto; padding-bottom: 10px; }

/* 拖动分隔条 */
.splitter {
	flex-shrink: 0;
	width: 8px;
	margin: 0 1px;
	cursor: col-resize;
	border-radius: 4px;
	position: relative;
	transition: background 0.15s;
}
.splitter::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 2px; height: 36px;
	border-left: 1px solid #c0c4cc;
	border-right: 1px solid #c0c4cc;
}
.splitter:hover, .splitter.dragging { background: #d0e3fa; }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing * { user-select: none !important; }

/* 右侧日志面板 */
.log-card {
	flex: 1;
	min-width: 260px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0,21,41,.08);
	display: flex;
	flex-direction: column;
	padding: 10px 14px;
	min-height: 0;
}
.log-pane {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	min-height: 80px;
}
/* 上下拖动分隔条 */
.h-splitter {
	flex-shrink: 0;
	height: 8px;
	margin: 1px 0;
	cursor: row-resize;
	border-radius: 4px;
	position: relative;
	transition: background 0.15s;
}
.h-splitter::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 36px; height: 2px;
	border-top: 1px solid #c0c4cc;
	border-bottom: 1px solid #c0c4cc;
}
.h-splitter:hover, .h-splitter.dragging { background: #d0e3fa; }
body.row-resizing { cursor: row-resize; user-select: none; }
body.row-resizing * { user-select: none !important; }
/* 发送区 */
.send-pane {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.send-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-bottom: 4px;
}
.send-item {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.send-item .send-input { flex: 1; min-width: 80px; }
.send-item .el-button + .el-button { margin-left: 0; }
.log-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.log-toolbar .title { font-size: 14px; font-weight: 600; margin-right: auto; }
.log-toolbar .opt { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #606266; }
.log-toolbar .el-button + .el-button { margin-left: 0; }

.log-box {
	flex: 1;
	overflow-y: auto;
	background: #1e1e1e;
	border-radius: 4px;
	padding: 8px 10px;
	font-family: Consolas, Menlo, monospace;
	font-size: 12px;
	line-height: 1.6;
	color: #d4d4d4;
}
.log-box .log-item { margin-bottom: 2px; word-break: break-all; white-space: pre-wrap; }
.log-box .dir-tx { color: #4fc1ff; }
.log-box .dir-rx { color: #89d185; }
.log-box .dir-sys { color: #f48771; }
.log-box .log-data { color: #d4d4d4; }
.log-box .log-tag { color: #808080; }

/* 表单微调, 接近截图风格 */
.tip-text { margin-left: 20px; color: #666; font-size: 13px; }
.unit-text { font-size: 13px; color: #303133; margin-left: 6px; }
.el-form-item { margin-bottom: 16px; }
.preview-textarea textarea { font-family: Consolas, Menlo, monospace; font-size: 12px; }