/* 定义全局颜色、阴影和尺寸变量，方便统一维护深色工业界面。 */
:root {
  --bg: #07101d; /* 设置页面最深层背景色。 */
  --panel: #0d1929; /* 设置卡片基础背景色。 */
  --panel-soft: #111f32; /* 设置输入框和次级区域背景色。 */
  --line: #203149; /* 设置界面边框颜色。 */
  --text: #edf4ff; /* 设置主要文字颜色。 */
  --muted: #7f91aa; /* 设置辅助文字颜色。 */
  --blue: #3b82f6; /* 设置主操作蓝色。 */
  --cyan: #23d5d5; /* 设置速度数据青色。 */
  --violet: #a779ff; /* 设置力矩数据紫色。 */
  --green: #3ddc97; /* 设置安全和正常状态绿色。 */
  --orange: #ffab5c; /* 设置警告状态橙色。 */
  --red: #ff5e72; /* 设置危险状态红色。 */
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.24); /* 设置卡片悬浮阴影。 */
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif; /* 强制优先使用清晰的中文无衬线字体，避免回退到宋体。 */
  color-scheme: dark; /* 告知浏览器页面使用深色主题。 */
}

/* 统一所有元素的盒模型计算方式。 */
* { box-sizing: border-box; /* 将边框和内边距计入元素宽高。 */ }

/* 设置页面基础尺寸、背景和文字样式。 */
body { margin: 0; /* 移除浏览器默认外边距。 */ min-width: 1180px; /* 保证专业控制台布局不被过度压缩。 */ min-height: 100vh; /* 保证页面至少占满视口高度。 */ background: radial-gradient(circle at 72% 8%, #102d4a 0, transparent 27%), var(--bg); /* 使用柔和光晕增强层次。 */ color: var(--text); /* 使用全局主要文字颜色。 */ }

/* 让按钮、输入框和下拉框继承页面字体。 */
button, input, select { font: inherit; /* 避免控件字体与正文不一致。 */ }

/* 设置按钮鼠标指针和默认过渡效果。 */
button { cursor: pointer; /* 提示用户按钮可以点击。 */ transition: 160ms ease; /* 平滑呈现悬停和按下效果。 */ }

/* 统一禁用控件的交互反馈。 */
button:disabled { cursor: not-allowed; /* 提示当前操作不可用。 */ opacity: 0.45; /* 降低禁用按钮视觉权重。 */ }

/* 构建侧栏和主内容双栏布局。 */
.app-shell { display: grid; /* 使用网格实现稳定双栏。 */ grid-template-columns: 232px 1fr; /* 固定侧栏并让主区自适应。 */ min-height: 100vh; /* 让应用铺满整个窗口。 */ }

/* 设置左侧导航栏的固定视觉结构。 */
.sidebar { position: sticky; /* 滚动时保持导航可见。 */ top: 0; /* 将侧栏固定在视口顶部。 */ height: 100vh; /* 让侧栏占满窗口高度。 */ padding: 30px 18px 22px; /* 设置舒适的内部间距。 */ border-right: 1px solid var(--line); /* 使用分隔线区分主内容。 */ background: rgba(6, 15, 27, 0.92); /* 使用半透明深色背景。 */ backdrop-filter: blur(16px); /* 增强玻璃质感。 */ display: flex; /* 使用弹性布局组织导航。 */ flex-direction: column; /* 让导航内容纵向排列。 */ z-index: 4; /* 保证侧栏位于内容上方。 */ }

/* 设置品牌区域横向排列。 */
.brand { display: flex; /* 横向排列图标与文字。 */ align-items: center; /* 垂直居中品牌内容。 */ gap: 12px; /* 设置图标与文字间距。 */ padding: 0 10px 28px; /* 设置品牌区下方留白。 */ }

/* 显示 SUNO 品牌图片。 */
.brand-mark { width: 42px; /* 设置图标宽度。 */ height: 42px; /* 设置图标高度。 */ border-radius: 13px; /* 与图片自身圆角保持一致。 */ display: block; /* 移除图片行内基线间隙。 */ flex: 0 0 auto; /* 防止侧栏空间不足时压缩图标。 */ object-fit: cover; /* 保持方形图片完整填充。 */ box-shadow: 0 8px 24px rgba(49, 110, 255, 0.24); /* 添加与页面主题一致的柔和光晕。 */ }

/* 设置品牌主名称。 */
.brand strong { display: block; /* 让名称独占一行。 */ font-size: 18px; /* 设置品牌名称字号。 */ letter-spacing: 0.3px; /* 略微增加字间距。 */ }

/* 设置品牌协议副标题。 */
.brand span { display: block; /* 让协议版本独占一行。 */ margin-top: 3px; /* 与名称保持小间距。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 11px; /* 设置较小字号。 */ letter-spacing: 1px; /* 增加协议标识的字间距。 */ }

/* 设置导航按钮容器。 */
.nav-list { display: grid; /* 让按钮纵向整齐排列。 */ gap: 8px; /* 设置按钮之间的间距。 */ }

/* 设置单个导航按钮。 */
.nav-item { width: 100%; /* 让导航按钮撑满侧栏。 */ border: 0; /* 移除默认按钮边框。 */ border-radius: 12px; /* 设置按钮圆角。 */ padding: 13px 15px; /* 设置按钮点击区域。 */ display: flex; /* 横向排列图标和文字。 */ align-items: center; /* 垂直居中按钮内容。 */ gap: 12px; /* 设置图标与文字间距。 */ color: #91a3bb; /* 设置未选中文字颜色。 */ background: transparent; /* 默认使用透明背景。 */ text-align: left; /* 让导航文字左对齐。 */ }

/* 设置导航图标尺寸。 */
.nav-item span { width: 20px; /* 固定图标区域宽度。 */ color: #5e7491; /* 设置默认图标颜色。 */ font-size: 19px; /* 设置图标视觉尺寸。 */ text-align: center; /* 让图标居中。 */ }

/* 设置导航悬停状态。 */
.nav-item:hover { color: var(--text); /* 提高悬停文字亮度。 */ background: rgba(255, 255, 255, 0.035); /* 添加轻微背景反馈。 */ }

/* 设置当前导航选中状态。 */
.nav-item.active { color: white; /* 让选中文字更醒目。 */ background: linear-gradient(100deg, rgba(54, 116, 246, 0.22), rgba(37, 213, 213, 0.05)); /* 添加蓝色选中背景。 */ box-shadow: inset 3px 0 #4388ff; /* 用左侧亮线标记当前页面。 */ }

/* 设置选中导航图标颜色。 */
.nav-item.active span { color: #5ea0ff; /* 使用主蓝色突出图标。 */ }

/* 设置侧栏安全状态卡片。 */
.safety-card { margin-top: auto; /* 将安全卡推到侧栏底部。 */ padding: 14px; /* 设置卡片内边距。 */ border: 1px solid #1f3640; /* 添加低对比边框。 */ border-radius: 13px; /* 设置卡片圆角。 */ background: rgba(24, 67, 63, 0.17); /* 使用安全绿色透明背景。 */ display: flex; /* 横向排列状态点和说明。 */ align-items: center; /* 垂直居中内容。 */ gap: 11px; /* 设置内容间距。 */ }

/* 绘制通用状态点。 */
.status-dot { width: 9px; /* 设置状态点宽度。 */ height: 9px; /* 设置状态点高度。 */ border-radius: 50%; /* 将状态点绘制成圆形。 */ flex: 0 0 auto; /* 防止状态点被压缩。 */ }

/* 设置安全状态点颜色。 */
.status-dot.safe { background: var(--green); /* 使用绿色表示安全。 */ box-shadow: 0 0 12px rgba(61, 220, 151, 0.7); /* 添加绿色光晕。 */ }

/* 设置安全卡主文字。 */
.safety-card strong { display: block; /* 让状态名称独占一行。 */ font-size: 13px; /* 设置状态文字字号。 */ }

/* 设置安全卡辅助文字。 */
.safety-card small { display: block; /* 让辅助信息独占一行。 */ margin-top: 3px; /* 增加上下间距。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 10px; /* 设置较小字号。 */ }

/* 设置主内容区底部备案信息。 */
.site-footer { margin-top: auto; /* 页面内容不足一屏时将备案信息推到底部。 */ padding: 30px 16px 2px; /* 与页面内容保持间距并减少底部空白。 */ color: #c7d4e6; /* 使用高对比浅色保证深色背景下清晰可读。 */ font-size: 13px; /* 使用清晰且不过分抢眼的备案字号。 */ line-height: 1.6; /* 保证窄屏换行时仍易于阅读。 */ display: flex; /* 将版权和两个备案号横向排列。 */ align-items: center; /* 让三项文字垂直居中。 */ justify-content: center; /* 将整组备案信息水平居中。 */ flex-wrap: wrap; /* 窄屏空间不足时允许自然换行。 */ column-gap: 26px; /* 设置三项信息之间的横向间距。 */ row-gap: 6px; /* 设置窄屏换行后的纵向间距。 */ }
.site-footer a, .site-footer a:link, .site-footer a:visited, .site-footer a:hover, .site-footer a:active { color: inherit; /* 所有链接状态都使用备案正文颜色。 */ text-decoration: none; /* 取消链接下划线和默认跳转标签外观。 */ }
.public-security-record { display: inline-flex; /* 将公安备案图标和文字排列在同一行。 */ align-items: center; /* 让图标与备案文字垂直居中。 */ gap: 8px; /* 设置图标和备案文字之间的间距。 */ }
.public-security-record img { width: auto; /* 按原始比例自动计算图标宽度。 */ height: 20px; /* 缩小备案图标并使其与文字高度更协调。 */ display: block; /* 移除图片行内基线产生的底部空隙。 */ object-fit: contain; /* 保证公安备案图标完整显示。 */ }

/* 设置主内容区域尺寸。 */
.main-area { position: relative; /* 为提示条定位提供参考。 */ padding: 0 32px 24px; /* 设置页面左右和底部留白。 */ min-width: 0; /* 允许网格内容正确收缩。 */ min-height: 100vh; /* 保证备案信息可以稳定停靠在页面底部。 */ display: flex; /* 使用弹性布局组织顶部栏、页面和备案信息。 */ flex-direction: column; /* 让顶部栏、页面和备案信息纵向排列。 */ }

/* 设置顶部连接栏。 */
.topbar { height: 104px; /* 固定顶部栏高度。 */ display: flex; /* 横向排列标题和操作。 */ align-items: center; /* 垂直居中内容。 */ justify-content: space-between; /* 将标题和按钮分列两端。 */ border-bottom: 1px solid rgba(40, 58, 82, 0.65); /* 添加底部细分隔线。 */ }

/* 设置页面眉题。 */
.eyebrow { margin: 0 0 4px; /* 控制眉题与标题间距。 */ color: #4e8eea; /* 使用蓝色强调。 */ font-size: 10px; /* 设置眉题字号。 */ font-weight: 800; /* 加粗眉题。 */ letter-spacing: 2px; /* 增强大写标签感。 */ }

/* 设置页面主标题。 */
.topbar h1 { margin: 0; /* 移除标题默认外边距。 */ font-size: 24px; /* 设置页面标题字号。 */ letter-spacing: 0.2px; /* 稍微增加字间距。 */ }

/* 设置顶部按钮组。 */
.top-actions { display: flex; /* 横向排列状态和按钮。 */ align-items: center; /* 垂直居中操作项。 */ gap: 10px; /* 设置操作项间距。 */ }

/* 设置通用按钮外观。 */
.btn { border: 1px solid transparent; /* 预留边框避免状态变化抖动。 */ border-radius: 10px; /* 设置按钮圆角。 */ padding: 10px 15px; /* 设置默认点击区域。 */ color: white; /* 设置按钮文字颜色。 */ font-size: 12px; /* 设置按钮字号。 */ font-weight: 700; /* 加粗按钮文字。 */ }

/* 设置主按钮样式。 */
.btn.primary { background: linear-gradient(135deg, #3477ef, #2362d3); /* 使用蓝色渐变突出主操作。 */ box-shadow: 0 8px 20px rgba(46, 113, 237, 0.22); /* 添加主按钮阴影。 */ }

/* 设置主按钮悬停效果。 */
.btn.primary:hover:not(:disabled) { transform: translateY(-1px); /* 悬停时轻微上移。 */ filter: brightness(1.08); /* 提高按钮亮度。 */ }

/* 设置电机使能按钮的绿色安全操作样式。 */
.btn.success { border-color: rgba(46, 216, 167, 0.48); /* 使用绿色边框表示使能操作。 */ background: rgba(46, 216, 167, 0.15); /* 使用绿色透明背景突出使能按钮。 */ color: #64f0c4; /* 使用高对比绿色文字。 */ }

/* 设置电机使能按钮悬停效果。 */
.btn.success:hover:not(:disabled) { transform: translateY(-1px); /* 悬停时轻微上移。 */ background: rgba(46, 216, 167, 0.24); /* 悬停时提高绿色背景亮度。 */ }

/* 设置次级透明按钮。 */
.btn.ghost { border-color: var(--line); /* 使用界面分隔色作为边框。 */ background: #101d2e; /* 设置次级按钮背景。 */ color: #c5d2e3; /* 设置柔和文字颜色。 */ }

/* 设置次级按钮悬停效果。 */
.btn.ghost:hover:not(:disabled) { border-color: #3b5271; /* 提高悬停边框亮度。 */ background: #16263b; /* 提高悬停背景亮度。 */ }

/* 设置危险操作按钮。 */
.btn.danger { border-color: rgba(255, 94, 114, 0.45); /* 使用半透明红色边框。 */ background: rgba(255, 94, 114, 0.13); /* 使用红色透明背景。 */ color: #ff8d9c; /* 使用亮红色文字。 */ }

/* 设置大尺寸操作按钮。 */
.btn.large { padding: 12px 20px; /* 增大按钮点击区域。 */ min-width: 128px; /* 保持主要按钮宽度一致。 */ }

/* 设置卡片内小按钮。 */
.btn.tiny { padding: 7px 11px; /* 缩小辅助按钮内边距。 */ font-size: 10px; /* 缩小辅助按钮字号。 */ }

/* 设置连接状态胶囊。 */
.connection-pill { padding: 8px 11px; /* 设置状态胶囊内边距。 */ border-radius: 30px; /* 绘制胶囊形状。 */ display: flex; /* 横向排列状态点和文字。 */ align-items: center; /* 垂直居中状态内容。 */ gap: 7px; /* 设置状态点与文字间距。 */ background: rgba(255, 255, 255, 0.035); /* 添加轻微背景。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 11px; /* 设置状态文字字号。 */ }

/* 绘制连接胶囊中的状态点。 */
.connection-pill i { width: 7px; /* 设置连接点宽度。 */ height: 7px; /* 设置连接点高度。 */ border-radius: 50%; /* 绘制圆形连接点。 */ background: #64748b; /* 离线时使用灰色。 */ }

/* 设置在线连接胶囊。 */
.connection-pill.online { color: #86edbd; /* 在线时使用绿色文字。 */ background: rgba(61, 220, 151, 0.1); /* 在线时使用绿色背景。 */ }

/* 设置在线连接点。 */
.connection-pill.online i { background: var(--green); /* 在线时使用绿色状态点。 */ box-shadow: 0 0 9px rgba(61, 220, 151, 0.8); /* 添加在线状态光晕。 */ }

/* 设置全局提示条。 */
.toast { position: fixed; /* 让提示条固定在窗口顶部。 */ top: 20px; /* 设置距顶部位置。 */ left: 50%; /* 将提示条定位到水平中心。 */ transform: translate(-50%, -16px); /* 居中并设置初始上移。 */ padding: 11px 18px; /* 设置提示条内边距。 */ border: 1px solid #2d4669; /* 设置提示条边框。 */ border-radius: 10px; /* 设置提示条圆角。 */ background: #13243a; /* 设置提示条背景。 */ color: #dceaff; /* 设置提示文字颜色。 */ font-size: 12px; /* 设置提示文字字号。 */ box-shadow: var(--shadow); /* 添加浮层阴影。 */ opacity: 0; /* 默认隐藏提示条。 */ pointer-events: none; /* 防止隐藏提示条阻挡点击。 */ z-index: 20; /* 保证提示条位于最上层。 */ transition: 180ms ease; /* 平滑显示和隐藏提示。 */ }

/* 设置提示条显示状态。 */
.toast.show { opacity: 1; /* 显示提示条。 */ transform: translate(-50%, 0); /* 将提示条移动到最终位置。 */ }

/* 设置错误提示条颜色。 */
.toast.error { border-color: rgba(255, 94, 114, 0.5); /* 使用红色边框提示错误。 */ background: #321a28; /* 使用深红背景提示错误。 */ color: #ffb7c1; /* 使用浅红文字提示错误。 */ }

/* 设置CAN看门狗安全确认弹窗的浏览器外层。 */
.safety-dialog { width: min(560px, calc(100vw - 32px)); /* 限制弹窗宽度并兼容窄屏。 */ padding: 0; /* 移除dialog默认内边距。 */ border: 1px solid rgba(255, 94, 114, 0.52); /* 使用危险色边框强调风险。 */ border-radius: 16px; /* 使用与页面卡片协调的圆角。 */ background: #0d1b2c; /* 使用页面一致的深色背景。 */ color: var(--text); /* 使用高对比正文颜色。 */ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58); /* 增强模态层级。 */ }
/* 设置弹窗后方遮罩。 */
.safety-dialog::backdrop { background: rgba(2, 8, 18, 0.78); /* 压暗页面以聚焦安全确认。 */ backdrop-filter: blur(4px); /* 轻微模糊后台内容。 */ }
/* 设置弹窗内部内容布局。 */
.safety-dialog-panel { padding: 28px; /* 提供清晰的内容留白。 */ display: grid; /* 纵向排列警告内容。 */ justify-items: center; /* 将图标和标题水平居中。 */ gap: 16px; /* 设置内容块间距。 */ text-align: center; /* 让安全提示易于集中阅读。 */ }
/* 设置弹窗警告图标。 */
.safety-dialog-icon { width: 52px; /* 设置图标宽度。 */ height: 52px; /* 设置图标高度。 */ border: 1px solid rgba(255, 94, 114, 0.62); /* 使用红色图标边框。 */ border-radius: 50%; /* 绘制圆形警告标识。 */ background: rgba(255, 94, 114, 0.14); /* 使用半透明红色背景。 */ color: #ff8d9c; /* 使用高对比红色符号。 */ display: grid; /* 使用网格居中感叹号。 */ place-items: center; /* 将感叹号水平垂直居中。 */ font-size: 28px; /* 放大警告符号。 */ font-weight: 900; /* 加粗警告符号。 */ }
/* 设置弹窗标题。 */
.safety-dialog h2 { margin: 0; /* 移除标题默认外边距。 */ font-size: 22px; /* 突出安全确认标题。 */ }
/* 设置弹窗风险说明。 */
.safety-dialog p { margin: 0; /* 移除段落默认外边距。 */ color: #cbd8e9; /* 使用高对比浅色正文。 */ font-size: 14px; /* 保证风险说明清晰可读。 */ line-height: 1.8; /* 提高长提示词的阅读舒适度。 */ text-align: left; /* 长文本使用左对齐提高可读性。 */ }
/* 设置弹窗操作按钮区域。 */
.safety-dialog-actions { width: 100%; /* 让按钮区域撑满弹窗。 */ margin-top: 4px; /* 与风险正文保持间距。 */ display: flex; /* 横向排列两个操作按钮。 */ justify-content: flex-end; /* 将操作按钮放在右侧。 */ gap: 12px; /* 设置按钮之间的间距。 */ }

/* 默认隐藏非当前功能页面。 */
.page { display: none; /* 隐藏未选中的页面。 */ padding-top: 28px; /* 设置页面内容顶部间距。 */ }

/* 显示当前功能页面并加入淡入动画。 */
.page.active { display: block; /* 显示当前页面。 */ animation: reveal 180ms ease; /* 应用轻微淡入动画。 */ }

/* 定义页面淡入动画。 */
@keyframes reveal { from { opacity: 0; /* 从透明状态开始。 */ transform: translateY(4px); /* 从略低位置开始。 */ } to { opacity: 1; /* 最终完全显示。 */ transform: translateY(0); /* 最终回到正常位置。 */ } }

/* 设置通用卡片外观。 */
.card { padding: 23px; /* 设置卡片内部间距。 */ border: 1px solid rgba(40, 60, 86, 0.82); /* 设置卡片细边框。 */ border-radius: 16px; /* 设置卡片圆角。 */ background: linear-gradient(145deg, rgba(15, 29, 47, 0.96), rgba(11, 23, 38, 0.96)); /* 使用细微渐变增强层次。 */ box-shadow: var(--shadow); /* 添加卡片阴影。 */ }

/* 设置卡片标题区域。 */
.card-heading { display: flex; /* 横向排列标题和操作。 */ align-items: flex-start; /* 从顶部对齐标题内容。 */ justify-content: space-between; /* 将标题和操作分列两端。 */ gap: 12px; /* 保留内容间距。 */ margin-bottom: 20px; /* 设置标题区与内容间距。 */ }

/* 设置卡片标题文字。 */
.card h2 { margin: 0; /* 移除默认标题边距。 */ font-size: 17px; /* 设置卡片标题字号。 */ }

/* 设置卡片小标题。 */
.section-kicker { margin: 0 0 5px; /* 控制小标题间距。 */ color: #5f89c5; /* 使用低饱和蓝色。 */ font-size: 9px; /* 设置小标题字号。 */ font-weight: 800; /* 加粗小标题。 */ letter-spacing: 1.5px; /* 增加标签感。 */ text-transform: uppercase; /* 统一英文标签大写。 */ }

/* 设置通用标签。 */
.tag { padding: 6px 9px; /* 设置标签内边距。 */ border: 1px solid #284568; /* 设置标签边框。 */ border-radius: 7px; /* 设置标签圆角。 */ background: rgba(42, 102, 184, 0.1); /* 设置蓝色透明背景。 */ color: #87b9ff; /* 设置标签文字颜色。 */ font-size: 9px; /* 设置标签字号。 */ font-weight: 800; /* 加粗标签文字。 */ }

/* 设置警告标签。 */
.tag.warning { border-color: rgba(255, 171, 92, 0.35); /* 使用橙色警告边框。 */ background: rgba(255, 171, 92, 0.08); /* 使用橙色透明背景。 */ color: #ffc185; /* 使用亮橙文字。 */ }

/* 设置设备信息卡片底部间距。 */
.device-card { margin-bottom: 18px; /* 与下方指标卡保持间距。 */ }

/* 设置设备信息六列布局。 */
.device-grid { display: grid; /* 使用网格排列设备字段。 */ grid-template-columns: repeat(6, 1fr); /* 均分六列设备字段。 */ gap: 10px; /* 设置字段间距。 */ }

/* 设置设备单字段容器。 */
.device-grid div { padding: 12px 14px; /* 设置字段内边距。 */ border-radius: 10px; /* 设置字段圆角。 */ background: rgba(255, 255, 255, 0.025); /* 添加轻微底色。 */ }

/* 设置字段名称。 */
.device-grid span, .execution-grid span { display: block; /* 让名称独占一行。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 9px; /* 设置名称字号。 */ }

/* 设置字段数值。 */
.device-grid strong, .execution-grid strong { display: block; /* 让数值独占一行。 */ margin-top: 6px; /* 与名称保持间距。 */ color: #dce8f8; /* 使用高亮文字颜色。 */ font-size: 12px; /* 设置数值字号。 */ }

/* 设置主要指标卡网格。 */
.metric-grid { display: grid; /* 使用网格排列指标。 */ grid-template-columns: repeat(6, 1fr); /* 均分六个指标卡。 */ gap: 12px; /* 设置指标卡间距。 */ margin-bottom: 18px; /* 与下方内容保持间距。 */ }

/* 设置指标卡样式。 */
.metric-card { position: relative; /* 为顶部高亮线定位。 */ overflow: hidden; /* 隐藏超出圆角的内容。 */ padding: 17px; /* 设置指标卡内边距。 */ border: 1px solid rgba(42, 62, 88, 0.8); /* 设置指标卡边框。 */ border-radius: 14px; /* 设置指标卡圆角。 */ background: rgba(13, 27, 45, 0.9); /* 设置指标卡背景。 */ }

/* 绘制指标卡顶部高亮线。 */
.metric-card::before { content: ""; /* 创建无文本装饰元素。 */ position: absolute; /* 将高亮线定位到卡片顶部。 */ inset: 0 0 auto; /* 让高亮线占满顶部宽度。 */ height: 2px; /* 设置高亮线高度。 */ background: var(--accent); /* 使用每张卡片自己的强调色。 */ }

/* 分配位置指标蓝色。 */
.accent-blue { --accent: var(--blue); /* 设置位置指标强调色。 */ }
/* 分配速度指标青色。 */
.accent-cyan { --accent: var(--cyan); /* 设置速度指标强调色。 */ }
/* 分配力矩指标紫色。 */
.accent-violet { --accent: var(--violet); /* 设置力矩指标强调色。 */ }
/* 分配电压指标绿色。 */
.accent-green { --accent: var(--green); /* 设置电压指标强调色。 */ }
/* 分配温度指标橙色。 */
.accent-orange { --accent: var(--orange); /* 设置温度指标强调色。 */ }
/* 分配故障指标红色。 */
.accent-red { --accent: var(--red); /* 设置故障指标强调色。 */ }

/* 设置指标名称。 */
.metric-card span { display: block; /* 让指标名称独占一行。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 10px; /* 设置指标名称字号。 */ }

/* 设置指标主数值。 */
.metric-card strong { display: inline-block; /* 让数值和单位可同行显示。 */ margin-top: 11px; /* 与指标名称保持间距。 */ font-size: 22px; /* 设置醒目的数值字号。 */ letter-spacing: -0.5px; /* 让数字视觉更紧凑。 */ }

/* 设置指标单位。 */
.metric-card small { margin-left: 5px; /* 与主数值保持间距。 */ color: #61738b; /* 使用低对比单位颜色。 */ font-size: 9px; /* 设置单位字号。 */ }

/* 设置通用双栏内容网格。 */
.content-grid { display: grid; /* 使用网格排列内容卡片。 */ gap: 18px; /* 设置卡片间距。 */ }

/* 设置左宽右窄内容比例。 */
.content-grid.wide-left { grid-template-columns: minmax(0, 2fr) minmax(280px, 0.78fr); /* 让曲线区域更宽。 */ }

/* 设置两列等宽内容。 */
.content-grid.equal { grid-template-columns: repeat(2, minmax(0, 1fr)); /* 让两张卡片宽度一致。 */ }

/* 设置曲线图例。 */
.chart-legend { display: flex; /* 横向排列图例。 */ gap: 24px; /* 增加图例间距。 */ margin: -7px 0 11px; /* 调整图例与标题和画布间距。 */ color: var(--muted); /* 设置图例文字颜色。 */ font-size: 12px; /* 放大图例字号。 */ font-weight: 700; /* 加粗图例文字。 */ }

/* 为图例绘制颜色点。 */
.chart-legend span::before { content: ""; /* 创建图例线段。 */ display: inline-block; /* 让线段与文字同行。 */ width: 25px; /* 增加图例线段宽度。 */ height: 3px; /* 设置图例线段粗细。 */ margin-right: 8px; /* 与图例文字保持间距。 */ border-radius: 3px; /* 设置线段圆角。 */ vertical-align: middle; /* 让图例线段与文字垂直对齐。 */ background: currentColor; /* 使用当前图例颜色。 */ }

/* 设置位置图例颜色。 */
.chart-legend .blue { color: #FFD166; /* 使用高对比黄色表示位置。 */ }
/* 设置速度图例颜色。 */
.chart-legend .cyan { color: #00E5FF; /* 使用高亮青色表示速度。 */ }
/* 设置力矩图例颜色。 */
.chart-legend .violet { color: #FF4FD8; /* 使用高亮粉色表示力矩。 */ }

/* 设置实时曲线画布。 */
#telemetryChart { display: block; /* 移除画布行内元素间隙。 */ width: 100%; /* 让画布适应卡片宽度。 */ height: 330px; /* 增加三条独立分轨的显示高度。 */ border: 1px solid rgba(65, 96, 132, 0.34); /* 添加画布边框提高区域对比度。 */ border-radius: 10px; /* 设置画布圆角。 */ background: #071421; /* 使用稳定的深色画布背景。 */ }

/* 设置详情列表纵向排列。 */
.detail-list { display: grid; /* 使用网格排列详情字段。 */ gap: 4px; /* 设置详情字段间距。 */ }

/* 设置详情列表单行。 */
.detail-list div { padding: 12px 2px; /* 设置单行上下间距。 */ border-bottom: 1px solid rgba(38, 56, 79, 0.65); /* 使用细线分隔字段。 */ display: flex; /* 横向排列字段名称和数值。 */ justify-content: space-between; /* 将名称和数值分列两端。 */ gap: 14px; /* 保留字段间距。 */ }

/* 移除最后一条详情的分隔线。 */
.detail-list div:last-child { border-bottom: 0; /* 避免列表底部重复边框。 */ }

/* 设置详情字段名称。 */
.detail-list span { color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 10px; /* 设置字段名称字号。 */ }

/* 设置详情字段数值。 */
.detail-list strong { color: #d9e6f8; /* 使用高亮数值颜色。 */ font-size: 11px; /* 设置字段数值字号。 */ font-weight: 700; /* 加粗字段数值。 */ }

/* 设置表单双列网格。 */
.form-grid { display: grid; /* 使用网格排列表单控件。 */ grid-template-columns: repeat(2, minmax(0, 1fr)); /* 设置两个等宽表单列。 */ gap: 16px; /* 设置表单项间距。 */ }

/* 让指定表单项横跨两列。 */
.form-grid .full { grid-column: 1 / -1; /* 让元素占满表单宽度。 */ }

/* 设置表单标签名称。 */
.form-grid label > span { display: block; /* 让标签名称独占一行。 */ margin-bottom: 7px; /* 与输入框保持间距。 */ color: #91a2b8; /* 使用柔和文字颜色。 */ font-size: 10px; /* 设置标签字号。 */ }

/* 设置带单位输入框容器。 */
.form-grid label > div { display: flex; /* 横向排列输入框和单位。 */ align-items: center; /* 垂直居中输入内容。 */ border: 1px solid #263a53; /* 设置输入区域边框。 */ border-radius: 9px; /* 设置输入区域圆角。 */ background: #091522; /* 设置输入区域背景。 */ overflow: hidden; /* 隐藏超出圆角的内容。 */ }

/* 设置输入框和下拉框。 */
.form-grid input[type="number"], .form-grid input[type="text"], .form-grid select { width: 100%; /* 让控件占满可用宽度。 */ min-width: 0; /* 允许输入框在网格中收缩。 */ padding: 11px 12px; /* 设置控件内边距。 */ border: 1px solid #263a53; /* 设置控件边框。 */ border-radius: 9px; /* 设置控件圆角。 */ outline: none; /* 移除浏览器默认焦点轮廓。 */ background: #091522; /* 设置控件背景。 */ color: #e8f2ff; /* 设置输入文字颜色。 */ font-size: 11px; /* 设置控件字号。 */ }

/* 移除带单位输入框自身的重复边框。 */
.form-grid label > div input { border: 0; /* 由外层容器提供边框。 */ border-radius: 0; /* 由外层容器提供圆角。 */ background: transparent; /* 使用外层容器背景。 */ }

/* 设置表单控件焦点状态。 */
.form-grid input:focus, .form-grid select:focus, .form-grid label > div:focus-within { border-color: #3e7dd6; /* 使用蓝色强调焦点。 */ box-shadow: 0 0 0 2px rgba(62, 125, 214, 0.1); /* 添加焦点光环。 */ }

/* 设置输入框单位文字。 */
.form-grid em { padding-right: 12px; /* 设置单位右侧间距。 */ color: #9fb2ca; /* 提高单位文字对比度。 */ font-size: 12px; /* 放大单位字号以便清晰阅读。 */ font-weight: 500; /* 增加单位文字字重。 */ font-style: normal; /* 移除默认斜体。 */ white-space: nowrap; /* 禁止单位换行。 */ }

/* 设置复选框行。 */
.form-grid .check-line { display: flex; /* 横向排列复选框和文字。 */ align-items: center; /* 垂直居中复选框内容。 */ gap: 8px; /* 设置复选框与文字间距。 */ padding-top: 5px; /* 微调复选框行位置。 */ }

/* 设置复选框尺寸和主题色。 */
.check-line input { width: 15px; /* 设置复选框宽度。 */ height: 15px; /* 设置复选框高度。 */ accent-color: var(--blue); /* 使用主蓝色作为选中色。 */ }

/* 调整复选框文字间距。 */
.form-grid .check-line > span { margin: 0; /* 移除普通标签的底部间距。 */ }

/* 设置表单操作区。 */
.form-actions { display: flex; /* 横向排列表单按钮。 */ gap: 10px; /* 设置按钮间距。 */ padding-top: 5px; /* 与表单内容保持间距。 */ }

/* 设置执行状态卡片。 */
.execution-card { min-height: 580px; /* 保持两列卡片高度协调。 */ }

/* 设置通用状态徽章。 */
.status-badge { padding: 6px 10px; /* 设置徽章内边距。 */ border-radius: 20px; /* 绘制胶囊形状态徽章。 */ font-size: 9px; /* 设置徽章字号。 */ font-weight: 800; /* 加粗状态文字。 */ }

/* 设置空闲状态徽章。 */
.status-badge.idle { background: rgba(127, 145, 170, 0.12); /* 使用灰色透明背景。 */ color: #8ea0b8; /* 使用灰蓝色文字。 */ }

/* 设置运行状态徽章。 */
.status-badge.running { background: rgba(61, 220, 151, 0.12); /* 使用绿色透明背景。 */ color: #6eeab0; /* 使用亮绿色文字。 */ }

/* 绘制当前目标圆形视觉组件。 */
.target-orbit { width: 190px; /* 设置圆环宽度。 */ height: 190px; /* 设置圆环高度。 */ margin: 30px auto; /* 水平居中并保留上下间距。 */ border: 1px solid rgba(59, 130, 246, 0.45); /* 设置外圈蓝色边框。 */ border-radius: 50%; /* 绘制圆形外圈。 */ display: grid; /* 使用网格居中内部内容。 */ place-items: center; /* 水平垂直居中内容。 */ background: radial-gradient(circle, rgba(59, 130, 246, 0.13), transparent 67%); /* 使用径向渐变表现能量感。 */ box-shadow: 0 0 35px rgba(59, 130, 246, 0.08), inset 0 0 30px rgba(59, 130, 246, 0.05); /* 添加内外光晕。 */ }

/* 设置圆环内部文字居中。 */
.target-orbit div { text-align: center; /* 居中显示目标信息。 */ }

/* 设置圆环字段名称。 */
.target-orbit span { display: block; /* 让字段名称独占一行。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 9px; /* 设置字段名称字号。 */ }

/* 设置圆环主数值。 */
.target-orbit strong { display: block; /* 让主数值独占一行。 */ margin: 7px 0 2px; /* 设置主数值上下间距。 */ font-size: 30px; /* 使用醒目的大字号。 */ }

/* 设置圆环单位。 */
.target-orbit small { color: #5f7795; /* 使用低对比单位颜色。 */ font-size: 9px; /* 设置单位字号。 */ }

/* 设置MIT执行信息网格。 */
.execution-grid { display: grid; /* 使用网格排列执行字段。 */ grid-template-columns: repeat(2, 1fr); /* 设置两个等宽列。 */ gap: 9px; /* 设置执行字段间距。 */ }

/* 设置单个执行字段。 */
.execution-grid div { padding: 12px; /* 设置执行字段内边距。 */ border-radius: 9px; /* 设置执行字段圆角。 */ background: rgba(255, 255, 255, 0.025); /* 添加轻微底色。 */ }

/* 设置安全说明框。 */
.notice { margin-top: 20px; /* 与执行数据保持间距。 */ padding: 13px 15px; /* 设置说明框内边距。 */ border-left: 3px solid #3a79cf; /* 使用蓝色竖线强调说明。 */ border-radius: 0 8px 8px 0; /* 设置右侧圆角。 */ background: rgba(45, 103, 182, 0.08); /* 使用蓝色透明背景。 */ }

/* 设置说明框标题。 */
.notice strong { font-size: 10px; /* 设置说明标题字号。 */ color: #94bdf3; /* 使用浅蓝标题颜色。 */ }

/* 设置说明框正文。 */
.notice p { margin: 5px 0 0; /* 设置正文与标题间距。 */ color: #7389a5; /* 使用辅助正文颜色。 */ font-size: 9px; /* 设置说明正文字号。 */ line-height: 1.7; /* 提高多行文字可读性。 */ }

/* 设置校准视觉卡片的内容居中。 */
.calibration-visual { min-height: 480px; /* 保持校准卡片高度。 */ display: flex; /* 使用弹性布局组织内容。 */ flex-direction: column; /* 纵向排列校准内容。 */ align-items: center; /* 水平居中校准内容。 */ justify-content: center; /* 垂直居中校准内容。 */ text-align: center; /* 居中校准文字。 */ }

/* 绘制校准进度圆环。 */
.calibration-ring { width: 180px; /* 设置圆环宽度。 */ height: 180px; /* 设置圆环高度。 */ margin-bottom: 24px; /* 与校准标题保持间距。 */ border: 2px solid #234265; /* 设置圆环基础边框。 */ border-top-color: #3f87f4; /* 使用亮蓝色标记进度起点。 */ border-radius: 50%; /* 绘制圆形进度环。 */ display: grid; /* 使用网格居中内部内容。 */ place-items: center; /* 水平垂直居中内容。 */ box-shadow: inset 0 0 36px rgba(49, 118, 235, 0.08); /* 添加内部光晕。 */ }

/* 设置运行中的校准圆环动画。 */
.calibration-ring.running { animation: spin 1.4s linear infinite; /* 持续旋转表示校准进行中。 */ }

/* 保持校准圆环内文字方向固定。 */
.calibration-ring.running div { animation: spin 1.4s linear infinite reverse; /* 反向旋转抵消外圈动画。 */ }

/* 定义校准旋转动画。 */
@keyframes spin { to { transform: rotate(360deg); /* 旋转一整圈。 */ } }

/* 设置校准百分比。 */
.calibration-ring strong { display: block; /* 让百分比独占一行。 */ font-size: 30px; /* 设置醒目百分比字号。 */ }

/* 设置校准环内说明。 */
.calibration-ring span { display: block; /* 让说明独占一行。 */ margin-top: 4px; /* 与百分比保持间距。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 9px; /* 设置说明字号。 */ }

/* 设置校准说明正文。 */
.calibration-visual p { max-width: 430px; /* 限制正文宽度提高可读性。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 10px; /* 设置正文字号。 */ line-height: 1.8; /* 提高多行文字可读性。 */ }

/* 设置简化后的单按钮校准卡片。 */
.calibration-simple { min-height: 520px; /* 保持校准页面拥有稳定的视觉高度。 */ display: flex; /* 使用弹性布局组织校准内容。 */ flex-direction: column; /* 让校准内容纵向排列。 */ align-items: center; /* 水平居中校准内容。 */ justify-content: center; /* 垂直居中校准内容。 */ text-align: center; /* 居中校准说明文字。 */ }

/* 绘制简化校准页面的功能图标。 */
.calibration-icon { width: 104px; /* 设置图标容器宽度。 */ height: 104px; /* 设置图标容器高度。 */ margin-bottom: 25px; /* 与功能标题保持间距。 */ border: 1px solid rgba(59, 130, 246, 0.5); /* 使用蓝色边框突出校准功能。 */ border-radius: 50%; /* 绘制圆形图标容器。 */ display: grid; /* 使用网格实现内容居中。 */ place-items: center; /* 水平垂直居中校准符号。 */ background: radial-gradient(circle, rgba(59, 130, 246, 0.18), rgba(59, 130, 246, 0.03)); /* 添加柔和蓝色光晕。 */ color: #6ba5ff; /* 设置校准符号颜色。 */ font-size: 48px; /* 设置校准符号视觉尺寸。 */ box-shadow: 0 0 38px rgba(59, 130, 246, 0.1); /* 添加图标外部光晕。 */ }

/* 让校准执行中的图标持续旋转并增强光晕。 */
.calibration-icon.calibrating { border-color: #32d7ff; /* 使用高亮青色显示运行状态。 */ color: #32d7ff; /* 提高校准符号对比度。 */ box-shadow: 0 0 42px rgba(50, 215, 255, 0.32); /* 增强校准中的外部光晕。 */ animation: calibration-spin 1.2s linear infinite, calibration-pulse 1.5s ease-in-out infinite; /* 同时播放旋转和呼吸动画。 */ }

/* 定义校准图标旋转动画。 */
@keyframes calibration-spin { to { transform: rotate(360deg); /* 每个动画周期旋转一整圈。 */ } }

/* 定义校准图标呼吸动画。 */
@keyframes calibration-pulse { 50% { box-shadow: 0 0 64px rgba(50, 215, 255, 0.52); /* 动画中点增强外部光晕。 */ } }

/* 设置简化校准页面的说明文字。 */
.calibration-copy { max-width: 520px; /* 限制说明文字宽度。 */ margin: 14px auto 26px; /* 设置说明文字上下间距。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 11px; /* 设置说明文字字号。 */ line-height: 1.8; /* 提高多行说明可读性。 */ }

/* 设置唯一校准按钮的尺寸。 */
.calibration-button { min-width: 190px; /* 保证校准按钮足够醒目。 */ padding: 14px 26px; /* 增大校准按钮点击区域。 */ font-size: 13px; /* 设置校准按钮字号。 */ }

/* 设置校准命令反馈文字。 */
.calibration-status { min-height: 20px; /* 防止状态更新时布局跳动。 */ margin-top: 15px; /* 与校准按钮保持间距。 */ color: #9bb5d3; /* 提高状态文字对比度。 */ font-size: 12px; /* 放大状态文字便于读取。 */ font-weight: 500; /* 增加状态文字字重。 */ }

/* 设置校准进度轨道。 */
.progress-track { width: 72%; /* 设置进度条宽度。 */ height: 5px; /* 设置进度条高度。 */ margin-top: 20px; /* 与校准正文保持间距。 */ border-radius: 5px; /* 设置进度条圆角。 */ background: #16263a; /* 设置进度轨道底色。 */ overflow: hidden; /* 隐藏超出圆角的进度。 */ }

/* 设置校准实际进度。 */
.progress-track i { display: block; /* 让进度元素显示为块。 */ width: 0; /* 初始进度为零。 */ height: 100%; /* 让进度填满轨道高度。 */ border-radius: inherit; /* 继承轨道圆角。 */ background: linear-gradient(90deg, #367ef0, #26d1d1); /* 使用蓝青渐变展示进度。 */ transition: width 220ms ease; /* 平滑更新进度宽度。 */ }

/* 设置CAN连接示意图。 */
.can-diagram { min-height: 150px; /* 设置示意图高度。 */ margin-bottom: 14px; /* 与参数列表保持间距。 */ display: flex; /* 横向排列两个节点。 */ align-items: center; /* 垂直居中节点。 */ justify-content: center; /* 水平居中示意图。 */ gap: 0; /* 让连线自然连接节点。 */ }

/* 设置CAN示意图节点。 */
.can-diagram span { padding: 18px 22px; /* 设置节点内边距。 */ border: 1px solid #2b496b; /* 设置节点边框。 */ border-radius: 11px; /* 设置节点圆角。 */ background: #0c1a2b; /* 设置节点背景。 */ color: #c5d7ed; /* 设置节点文字颜色。 */ font-size: 11px; /* 设置节点字号。 */ }

/* 绘制CAN示意图连线。 */
.can-diagram i { position: relative; /* 为连线装饰定位。 */ width: 110px; /* 设置连线长度。 */ color: #53769f; /* 设置连线文字颜色。 */ font-size: 8px; /* 设置连线文字字号。 */ font-style: normal; /* 移除默认斜体。 */ text-align: center; /* 居中显示CAN标识。 */ }

/* 绘制CAN实线。 */
.can-diagram i::before { content: ""; /* 创建连线元素。 */ position: absolute; /* 定位连线。 */ top: 50%; /* 将连线置于垂直中心。 */ left: 0; /* 从连接区左侧开始。 */ right: 0; /* 延伸到连接区右侧。 */ height: 1px; /* 设置连线粗细。 */ background: #315981; /* 设置连线颜色。 */ z-index: 0; /* 将连线放到文字下层。 */ }

/* 保证CAN标识拥有可读背景。 */
.can-diagram i { background: var(--panel); /* 用卡片背景遮挡连线。 */ z-index: 1; /* 将CAN文字置于连线上方。 */ }

/* 设置日志卡片最小高度。 */
.log-card { min-height: 650px; /* 保证日志区域拥有足够空间。 */ }

/* 设置多个小按钮横向排列。 */
.button-row { display: flex; /* 横向排列按钮。 */ gap: 7px; /* 设置按钮间距。 */ }

/* 设置日志筛选工具栏。 */
.log-toolbar { display: flex; /* 横向排列筛选按钮和计数。 */ align-items: center; /* 垂直居中工具栏内容。 */ gap: 6px; /* 设置筛选按钮间距。 */ padding: 10px; /* 设置工具栏内边距。 */ border: 1px solid var(--line); /* 设置工具栏边框。 */ border-radius: 9px 9px 0 0; /* 设置顶部圆角。 */ background: #0a1625; /* 设置工具栏背景。 */ }

/* 设置日志筛选按钮。 */
.filter { padding: 8px 13px; /* 增大筛选按钮点击区域。 */ border: 0; /* 移除默认边框。 */ border-radius: 6px; /* 设置筛选按钮圆角。 */ background: transparent; /* 未选中时使用透明背景。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 12px; /* 放大筛选按钮字号以提高可读性。 */ }

/* 设置选中的日志筛选按钮。 */
.filter.active { background: #1d3659; /* 使用蓝色背景标记选中。 */ color: #b9d7ff; /* 使用浅蓝文字。 */ }

/* 将日志计数推到工具栏右侧。 */
.log-toolbar > span { margin-left: auto; /* 将计数推到最右侧。 */ color: #7187a3; /* 提高计数文字对比度。 */ font-size: 11px; /* 放大日志计数字号。 */ }

/* 设置日志表格边框。 */
.log-table { border: 1px solid var(--line); /* 设置日志表格外边框。 */ border-top: 0; /* 避免与工具栏边框重复。 */ border-radius: 0 0 9px 9px; /* 设置底部圆角。 */ overflow: hidden; /* 隐藏超出圆角的内容。 */ }

/* 设置日志表头和日志行网格。 */
.log-header, .log-row { display: grid; /* 使用网格对齐日志列。 */ grid-template-columns: 120px 76px 170px minmax(0, 1fr); /* 放宽日志列以容纳更大字体。 */ gap: 14px; /* 增加日志列间距。 */ align-items: center; /* 垂直居中日志内容。 */ }

/* 设置日志表头。 */
.log-header { padding: 12px 16px; /* 增大表头内边距。 */ background: rgba(255, 255, 255, 0.025); /* 设置表头底色。 */ color: #8298b4; /* 提高表头文字对比度。 */ font-size: 11px; /* 放大日志表头字号。 */ font-weight: 600; /* 适度加粗日志表头。 */ }

/* 设置日志滚动区域。 */
.log-body { max-height: 500px; /* 限制日志区域高度。 */ overflow-y: auto; /* 超出高度时允许纵向滚动。 */ }

/* 设置单条日志行。 */
.log-row { min-height: 46px; /* 增加每条日志的可读高度。 */ padding: 12px 16px; /* 增大日志行内边距。 */ border-top: 1px solid rgba(35, 52, 73, 0.65); /* 使用细线分隔日志。 */ color: #aebed2; /* 提高日志默认文字对比度。 */ font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", Arial, sans-serif; /* 强制日志使用中文无衬线字体而不是宋体。 */ font-size: 12px; /* 放大日志字号以便阅读。 */ line-height: 1.55; /* 增加日志行高避免文字拥挤。 */ }

/* 设置日志内容省略展示。 */
.log-row span:last-child { overflow: hidden; /* 隐藏过长日志内容。 */ text-overflow: ellipsis; /* 使用省略号标记截断。 */ white-space: nowrap; /* 禁止日志内容换行。 */ }

/* 设置发送日志颜色。 */
.log-row.tx span:nth-child(2) { color: #78aaff; /* 使用蓝色标记发送方向。 */ }
/* 设置接收日志颜色。 */
.log-row.rx span:nth-child(2) { color: #55dca3; /* 使用绿色标记接收方向。 */ }
/* 设置错误日志颜色。 */
.log-row.error { color: #ff8998; /* 使用红色标记异常日志。 */ }

/* 设置独立曲线页面的控制卡片间距。 */
.analysis-control-card { margin-bottom: 18px; /* 与下方大图表保持清晰间距。 */ }

/* 设置独立曲线页面工具栏。 */
.analysis-toolbar { display: flex; /* 横向排列图表操作控件。 */ align-items: center; /* 垂直居中所有控件。 */ gap: 9px; /* 设置工具栏控件间距。 */ margin-bottom: 18px; /* 与通道选择器保持间距。 */ }

/* 将时间窗口选择器推到工具栏右侧。 */
.analysis-window-label { margin-left: auto; /* 将时间窗口控件推到右侧。 */ display: flex; /* 横向排列说明和下拉框。 */ align-items: center; /* 垂直居中说明和控件。 */ gap: 8px; /* 设置说明与下拉框间距。 */ color: var(--muted); /* 使用辅助文字颜色。 */ font-size: 11px; /* 设置时间窗口说明字号。 */ }

/* 设置时间窗口下拉框。 */
.analysis-window-label select { padding: 7px 28px 7px 10px; /* 设置下拉框点击区域。 */ border: 1px solid var(--line); /* 设置下拉框边框。 */ border-radius: 8px; /* 设置下拉框圆角。 */ background: #0a1727; /* 设置下拉框深色背景。 */ color: var(--text); /* 设置下拉框文字颜色。 */ font-size: 11px; /* 设置下拉框字号。 */ }

/* 设置参数类别的网格布局。 */
.channel-selector { display: grid; /* 使用网格排列参数类别。 */ grid-template-columns: repeat(4, minmax(0, 1fr)); /* 设置四个等宽类别列。 */ gap: 12px; /* 设置类别卡片间距。 */ }

/* 设置单个参数类别卡片。 */
.channel-group { padding: 13px; /* 设置类别卡片内边距。 */ border: 1px solid rgba(42, 64, 91, 0.78); /* 设置类别卡片边框。 */ border-radius: 11px; /* 设置类别卡片圆角。 */ background: rgba(255, 255, 255, 0.018); /* 添加轻微背景层次。 */ }

/* 设置参数类别标题。 */
.channel-group h3 { margin: 0 0 10px; /* 设置标题与参数间距。 */ color: #8ca5c4; /* 使用清晰的蓝灰色标题。 */ font-size: 11px; /* 设置类别标题字号。 */ }

/* 设置类别内部参数网格。 */
.channel-options { display: grid; /* 使用网格排列参数选项。 */ grid-template-columns: repeat(2, minmax(0, 1fr)); /* 每个类别显示两列选项。 */ gap: 7px; /* 设置参数选项间距。 */ }

/* 设置单个参数选择项。 */
.channel-option { position: relative; /* 为颜色识别条提供定位参考。 */ min-width: 0; /* 允许参数文字在网格内收缩。 */ padding: 8px 8px 8px 13px; /* 设置参数选择项内边距。 */ border: 1px solid #23374f; /* 设置未选中边框。 */ border-radius: 8px; /* 设置参数选择项圆角。 */ display: flex; /* 横向排列复选框和参数名称。 */ align-items: center; /* 垂直居中参数内容。 */ gap: 7px; /* 设置复选框与文字间距。 */ background: #091522; /* 设置参数选择项背景。 */ color: #91a4bc; /* 设置未选中文字颜色。 */ font-size: 10px; /* 设置参数选项字号。 */ cursor: pointer; /* 提示用户该区域可以点击。 */ overflow: hidden; /* 隐藏超出圆角的颜色条。 */ }

/* 绘制每个参数自己的颜色识别条。 */
.channel-option::before { content: ""; /* 创建颜色识别条。 */ position: absolute; /* 将识别条固定在选项左侧。 */ inset: 0 auto 0 0; /* 让识别条占满选项高度。 */ width: 4px; /* 设置识别条宽度。 */ background: var(--channel-color); /* 使用通道对应曲线颜色。 */ opacity: 0.45; /* 未选中时降低识别条亮度。 */ }

/* 设置选中参数项的高亮状态。 */
.channel-option.selected { border-color: color-mix(in srgb, var(--channel-color) 58%, #23374f); /* 使用曲线颜色强化选中边框。 */ background: color-mix(in srgb, var(--channel-color) 8%, #091522); /* 使用曲线颜色添加选中背景。 */ color: #eef6ff; /* 提高选中文字亮度。 */ }

/* 提高选中参数颜色条亮度。 */
.channel-option.selected::before { opacity: 1; /* 完整显示选中参数颜色。 */ }

/* 设置参数复选框。 */
.channel-option input { width: 14px; /* 设置复选框宽度。 */ height: 14px; /* 设置复选框高度。 */ margin: 0; /* 移除浏览器默认外边距。 */ accent-color: var(--channel-color); /* 使用曲线颜色作为复选框选中色。 */ }

/* 设置参数名称文本截断方式。 */
.channel-option span { overflow: hidden; /* 隐藏超出宽度的文字。 */ text-overflow: ellipsis; /* 使用省略号标记截断。 */ white-space: nowrap; /* 禁止参数名称换行。 */ }

/* 设置独立曲线图表卡片。 */
.analysis-chart-card { min-height: 560px; /* 保证大图表拥有充足显示空间。 */ }

/* 设置图表状态文字。 */
.analysis-status { color: #7f98b6; /* 使用蓝灰色状态文字。 */ font-size: 11px; /* 设置状态文字字号。 */ }

/* 设置多通道画布滚动区域。 */
.analysis-canvas-scroll { max-height: 680px; /* 限制大量通道同时显示时的页面高度。 */ border: 1px solid rgba(54, 83, 116, 0.48); /* 设置图表区域边框。 */ border-radius: 12px; /* 设置图表区域圆角。 */ background: #071421; /* 设置图表区域深色背景。 */ overflow-y: auto; /* 多通道超出高度时允许纵向滚动。 */ overflow-x: hidden; /* 禁止横向滚动。 */ }

/* 设置独立多通道曲线画布。 */
#analysisChart { display: block; /* 移除画布行内元素间隙。 */ width: 100%; /* 让画布适应卡片宽度。 */ min-height: 420px; /* 无数据时仍保持基础高度。 */ background: #071421; /* 使用稳定的深色画布背景。 */ }

/* 在较窄桌面窗口中适度压缩内容间距。 */
@media (max-width: 1350px) {
  .main-area { padding-left: 22px; /* 缩小主区左侧间距。 */ padding-right: 22px; /* 缩小主区右侧间距。 */ }
  .device-grid { grid-template-columns: repeat(3, 1fr); /* 将设备字段调整为三列。 */ }
  .metric-grid { grid-template-columns: repeat(3, 1fr); /* 将指标卡调整为三列。 */ }
}