/* 引入外部样式文件（可能是第三方工具类样式） */
@import url("wing.css");

/* 定义自定义字体：DroidSans（主要用于正文）
   - 字体文件格式为woff，路径与当前CSS文件同级
   - 许可证为Apache V2.00 */
@font-face{
  font-family: 'DroidSans';
  src: url('DroidSans.woff') format('woff');
  /*font license Apache V2.00: https://www.fontsquirrel.com/license/droid-sans*/
}

/* 定义自定义字体：IBMVGA（复古风格字体，用于特定UI切换）
   - 字体文件格式为truetype（.ttf）
   - 来源：VileR's old school font pack（复古字体包） */
@font-face{
  font-family: 'IBMVGA';
  src: url('PxPlus_IBM_VGA_8x16.ttf') format('truetype');
  /* VileR's old school font pack - int10h.org */
}

/* 定义自定义字体：H1Weird（专门用于h1标题的特殊字体） */
@font-face{
  font-family: 'H1Weird';
  src: url('../css/orbitron-light.otf') format('truetype');
}

/* 颜色主题设计思路（注释块，记录各主题色的色相和饱和度）
   - 这些颜色对应下方:root中的变量，用于不同主题风格（如默认青绿、橙色、黄色等）
   - 例如TIP_OVER_TEAL对应默认的绿色系主题，OVERFIT_ORANGE对应橙色主题 */
/* {
  "TIP_OVER_TEAL" :
  #00d16d
    { "Hue" : 0.42, "Saturation" : 1.00 },
  "OVERFIT_ORANGE" :
    { "Hue" : 0.05, "Saturation" : 0.95 },
  "UNCANNY_YELLOW" :
    { "Hue" : 0.11, "Saturation" : 1.00 },
  "NON_LINEAR_LIME" :
    { "Hue" : 0.21, "Saturation" : 1.00 },
  "SINGULARITY_SAPPHIRE" :
    { "Hue" : 0.57, "Saturation" : 1.00 },
  "FALSE_POSITIVE_PURPLE" :
  #e237e6
    { "Hue" : 0.83, "Saturation" : 0.76 },
  "CONFUSION_MATRIX_GREEN" :
    { "Hue" : 0.30, "Saturation" : 1.00 }
} */

/* 全局CSS变量定义（:root伪类表示文档根元素，变量可在全样式表中复用）
   - 主要用于颜色、字体等全局属性，方便主题切换和统一修改 */
:root {
  --bg-color: #1e1e1e; /* 页面背景色（深灰黑色） */
  --body-font-family: 'DroidSans', sans-serif; /* 默认正文字体 */
  --bg-color-alt: rgba(196,196,196,1); /* 辅助背景色（浅灰色 #C4C4C4） */
  --button-color: rgba(75,75,75,1); /* 按钮默认背景色（深灰色 #4B4B4B） */
  --button-color-alt: rgba(164,164,164,1); /* 按钮辅助色（浅灰色 #A4A4A4） */
  --fg-color: #00ff80; /* 前景色/强调色（亮绿色，用于标题、链接等突出元素） */
  --medium-battery: #ced100; /* 电池中等电量颜色（亮黄色） */
  --low-battery: #ff0000; /* 电池低电量颜色（亮红色） */
  --fg-color-alt: rgba(51,237,109,.05); /* 强调色变体（透明绿色，用于阴影等） */
  --text-color: rgba(255,255,255,1); /* 文本颜色（白色） */
  --text-color-alt: rgba(34,34,34,1); /* 辅助文本色（黑色，用于浅色背景上的文字） */
}

/* 图标样式（针对导航菜单中的图标） */
.selectedicon {
  color: var(--fg-color); /* 选中状态的图标颜色（使用强调色） */
}

.notselectedicon {
  color: var(--fg-color); /* 未选中状态的图标颜色（同样用强调色） */
  filter: drop-shadow(0 0 8px var(--fg-color)); /* 图标添加阴影，增强视觉效果 */
}

.notselectedicon:hover {
  color: var(--text-color); /* 鼠标悬停时，未选中图标变为白色 */
}

/* 导航项 hover 时，选中状态的图标保持强调色 */
.main-nav-child:hover .selectedicon {
  color: var(--fg-color);
}

/* 图标状态过渡效果（立即生效，无动画延迟） */
.selectedicon, .notselectedicon {
  transition: all 0s ease-in-out;
}

/* 下拉菜单容器样式 */
.dropdown {
  position: relative; /* 相对定位，作为下拉内容的父容器 */
  display: inline-block; /*  inline-block 使容器只占内容宽度 */
}

/* 按钮禁用状态样式 */
button:disabled, button[type="submit"]:disabled {
  background: var(--bg-color); /* 禁用按钮背景色（同页面背景） */
  color : var(--bg-color-alt); /* 禁用按钮文字色（浅灰色） */
}

/* 按钮默认样式 */
button, button[type="submit"] {
  font-family: var(--body-font-family); /* 使用默认正文字体 */
  font-size: 0.9em; /* 字体大小 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 按钮阴影（增强立体感） */
  width: 170px; /* 固定宽度 */
  border: 2px solid var(--fg-color); /* 边框颜色（强调色） */
  background-color: var(--button-color); /* 背景色（深灰色） */
  color: var(--text-color); /* 文字色（白色） */
  transition: border-color 0.3s, background-color 0.3s; /* 边框和背景色过渡动画（0.3秒） */
}

/* 按钮 hover 状态（鼠标悬停时） */
button:hover, button[type="submit"]:hover {
  border-color: var(--fg-color-alt); /* 边框颜色变为强调色变体 */
  background-color: var(--fg-color); /* 背景色变为强调色（亮绿色） */
  color: var(--text-color-alt); /* 文字色变为黑色（与绿色背景对比） */
}

/* 下拉菜单内容样式（默认隐藏） */
.dropdown-content {
  display: none; /* 默认不显示 */
  position: absolute; /* 绝对定位，相对于父容器.dropdown */
  background-color: var(--bg-color); /* 背景色（同页面） */
  min-width: 160px; /* 最小宽度 */
  box-shadow: 0px 8px 16px 0px var(--fg-color-alt); /* 阴影（透明绿色） */
  padding: 12px 16px; /* 内边距 */
  z-index: 1; /* 层级高于其他元素，避免被遮挡 */
}

/* 鼠标悬停在下拉容器上时，显示下拉内容 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 文本输入框、文件选择框、下拉选择框的基础样式 */
input[type="text"], input[type="file"], select {
  background-color: #2d2d2d; /* 背景色（深灰） */
  color: #ffffff; /* 文字色（白色） */
  font-family: var(--body-font-family); /* 默认字体 */
  font-size: 0.9em; /* 字体大小 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */
  text-align: center; /* 文字居中 */
  border: 1px solid var(--fg-color); /* 边框（强调色） */
  box-sizing: border-box; /* 盒模型：边框和内边距计入宽度 */
  transition: border-color 0.3s; /* 边框颜色过渡动画 */
}

/* 输入框 hover 或 focus 状态（鼠标悬停或获取焦点时） */
input[type="text"]:hover, input[type="file"]:hover, select:hover,
input[type="text"]:focus, input[type="file"]:focus, select:focus {
  border-color: white; /* 边框变为白色 */
  border: 1px solid;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

/* 禁用状态的文本输入框 */
input[type='text']:disabled {
  cursor: not-allowed; /* 鼠标变为禁止图标 */
}

/* 短水平线样式（用于分隔内容，宽度30%） */
.small-hr {
  border: 1px solid #3e3e3e; /* 边框颜色（中灰色） */
  width: 30%;
}

/* 日志区域的水平线样式（底部留白更多） */
.log-hr {
  margin-bottom: 50px;
}

/* 文件选择框宽度自适应内容 */
input[type="file"] {
  width: auto;
}

/* 下拉选择框宽度自适应内容 */
select {
  width: auto;
}

/* 页面 body 样式 */
body {
  background-color: var(--bg-color); /* 背景色（深灰黑） */
  font-family: var(--body-font-family); /* 默认字体 */
  font-size: 1.8em; /* 基础字体大小 */
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 100vh; /* 最小高度为屏幕高度（占满全屏） */
  margin: 0; /* 清除默认外边距 */
  flex-wrap: wrap; /* 内容过多时自动换行 */
  text-align: center; /* 文本居中 */
  padding-top: env(safe-area-inset-top); /* 适配移动设备刘海屏，顶部留出安全区域 */
}

/* 标题和文本元素样式 */
h1, h2, h3, h4, small, p, li, label {
  font-family: var(--body-font-family); /* 统一使用默认字体 */
  color: var(--text-color); /* 文字色（白色） */
}

h2, h3 {
  margin-top: 0px; /* 清除默认上外边距 */
  margin-bottom: 0px; /* 清除默认下外边距 */
}

/* 描述文本样式（次要文本） */
.desc {
  color: var(--bg-color-alt); /* 颜色为浅灰色 */
}

/* h1 标题样式（页面主标题） */
h1 {
  color: var(--fg-color); /* 颜色为强调色（亮绿色） */
  font-family: "H1Weird", sans-serif; /* 使用专用标题字体 */
  font-size: 3em; /* 大尺寸 */
  font-weight: bold; /* 加粗 */
  letter-spacing: 0.08em; /* 字间距 */
  text-align: center; /* 居中 */
}

/* 文本域样式（如日志区域） */
textarea {
  background-color: #2d2d2d; /* 背景色（深灰） */
  color: #ffffff; /* 文字色（白色） */
  font-family: var(--body-font-family); /* 默认字体 */
  font-size: 0.9em; /* 字体大小 */
  height: 280px; /* 固定高度 */
  border: 2px solid var(--fg-color); /* 边框（强调色） */
  box-sizing: border-box; /* 盒模型 */
  transition: border-color 0.3s; /* 边框过渡动画 */
}

/* 文本域 hover 或 focus 状态 */
textarea:hover, textarea:focus {
  border-color: white; /* 边框变为白色 */
  border: 2px solid;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

/* 内容区块默认隐藏（通过JS控制显示/隐藏，如自定义意图、日志等区域） */
.content {
  display: none;
}

/* 强制内容不换行且不溢出 */
.wrap {
  overflow: hidden !important; /* 溢出隐藏 */
  white-space: nowrap !important; /* 不换行 */
}

/* 水平线样式（主要分隔线） */
hr {
  border: 1px solid #3e3e3e; /* 边框颜色（中灰色） */
}

/* 链接样式 */
a {
  color: var(--fg-color); /* 颜色为强调色（亮绿色） */
}

a:hover {
  text-decoration: none; /*  hover 时去除下划线 */
  color: var(--fg-color); /* 保持颜色不变 */
}

/* 列表样式重置 */
ul, li {
  list-style-position:inside; /* 列表项符号在内部（不超出容器） */
  margin:0; /* 清除默认外边距 */
  padding:0; /* 清除默认内边距 */
}

/* 通用输入框样式（如IP地址输入框） */
.tinput {
  width: 315px !important; /* 固定宽度（!important 强制覆盖其他样式） */
  background-color: var(--button-color) !important; /* 背景色（深灰色） */
  color: var(--text-color) !important; /* 文字色（白色） */
  border: 2px solid var(--fg-color); /* 边框（强调色） */
}

/* 身份验证输入框样式（如用户名/密码框） */
.tinputauth {
  width: 499px !important; /* 更宽的固定宽度 */
  background-color: var(--button-color) !important;
  color: var(--text-color) !important;
  border: 2px solid var(--fg-color);
}

/* 画布元素样式（可能用于图表或动态图形） */
canvas{
  width:750px !important; /* 固定宽度 */
  height:400px !important; /* 固定高度 */
}

/* 单选按钮样式（自定义外观） */
input[type='radio'] {
  appearance: none; /* 清除默认样式 */
  height: 40px; /* 高度 */
  width: 40px; /* 宽度 */
  transition: all .2s ease; /* 过渡动画 */
  background: var(--button-color); /* 背景色（深灰色） */
  cursor: pointer; /* 鼠标变为指针 */
  outline: none; /* 去除焦点轮廓 */
  position: relative; /* 相对定位 */
  z-index: 1000; /* 层级较高，避免被遮挡 */
  border-radius: 50%; /* 圆形外观 */
  border: 1px solid var(--fg-color); /* 边框（强调色） */
}

/* 单选按钮选中状态 */
input[type='radio']:checked:after {
  width: 40px; /* 与按钮同宽 */
  height: 40px; /* 与按钮同高 */
  border-radius: 50%; /* 圆形 */
  background-color: var(--fg-color); /* 背景色变为强调色（选中状态） */
  content: ''; /* 伪元素内容为空 */
  display: inline-block; /* 块级显示 */
}

/* 单选按钮禁用状态 */
input[type='radio']:disabled {
  cursor: not-allowed; /* 鼠标变为禁止图标 */
}

input[type='radio']:disabled:after {
  background-color: var(--button-color-alt); /* 禁用时背景色为浅灰色 */
  cursor: not-allowed;
}

/* 用户名和密码输入框样式（覆盖通用输入框） */
#username, #password {
  width: 499px !important; /* 固定宽度 */
  background-color: var(--bg-color-alt) !important; /* 背景色（浅灰色） */
  color: var(--text-color) !important; /* 文字色（白色） */
  border: 2px solid var(--fg-color); /* 边框（强调色） */
}

/* 机器人身份验证区域文本颜色 */
#botAuth {
  color: var(--text-color); /* 白色 */
}

/* 主内容容器样式 */
#content {
  width: 950px !important; /* 固定宽度 */
  white-space:normal !important; /* 允许文字正常换行 */
}

/* 外层容器样式（包裹整个页面内容） */
#outer {
  width: 100%; /* 占满父容器宽度 */
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 高度为屏幕高度 */
  align-items: start; /* 垂直顶部对齐 */
}

/* 机器人状态区域样式（显示连接状态、电池等） */
#botStats {
  width: 100%; /* 占满宽度 */
  height: 50px; /* 固定高度 */
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  gap: 30px; /* 子元素间距30px */
}

/* 机器人加载动画样式（使用GIF动图） */
.botLoader {
  background-image: url('/assets/cloudface.gif'); /* 动图路径 */
  background-size: 60px 60px; /* 背景图大小 */
  background-position: center; /* 居中 */
  background-clip: border-box; /* 背景绘制区域 */
  background-repeat: no-repeat; /* 不重复 */
  width: 60px; /* 宽度 */
  height: 60px; /* 高度 */
  margin: 0 auto; /* 居中 */
}

/* 电池状态容器样式（包含电池图标和提示） */
.batteryContainer {
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin: 0 auto; /* 居中 */
  height: 60px; /* 高度 */
  padding-bottom: 15px; /* 底部内边距 */
  gap: 15px; /* 子元素间距 */
  cursor: pointer; /* 鼠标变为指针（可交互） */
}

/* 鼠标悬停在电池容器上时，显示提示框 */
.batteryContainer:hover .tooltip {
  display: block;
}

/* 电池提示框样式（显示充电剩余时间等） */
.tooltip {
  position: absolute; /* 绝对定位 */
  display: none; /* 默认隐藏 */
  background-color: var(--bg-color); /* 背景色（深灰黑） */
  color: var(--text-color); /* 文字色（白色） */
  border-radius: 5px; /* 圆角 */
  padding: 5px; /* 内边距 */
  z-index: 1000; /* 高层级，避免被遮挡 */
  margin-top: 145px; /* 位置调整（在电池下方） */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); /* 阴影 */
}

/* 电池轮廓样式 */
.batteryOutline {
  outline: 2px solid var(--text-color); /* 外轮廓（白色） */
  outline-offset: 2px; /* 轮廓与边框的距离 */
  border-radius: 5px; /* 圆角 */
  width: 100px; /* 宽度 */
  height: 40px; /* 高度 */
  position: relative; /* 相对定位（作为内部元素的父容器） */
}

/* 电池内部填充层（默认背景） */
.batteryOutline::before {
  content: ''; /* 空内容 */
  position: absolute; /* 绝对定位 */
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--button-color); /* 深灰色 */
  border-radius: 5px; /* 圆角 */
}

/* 电池正极突出部分 */
.batteryOutline::after {
  content: '';
  position: absolute;
  top: 12px; /* 垂直位置 */
  left: 102px; /* 水平位置（电池右侧） */
  width: 6px; /* 宽度 */
  height: 18px; /* 高度 */
  background-color: var(--text-color); /* 白色 */
}

/* 机器人面部图标样式 */
.vectorFace {
  height: 60px; /* 高度 */
  width: 60px; /* 宽度 */
  background-position: center; /* 背景图居中 */
  background-size: contain; /* 背景图适应容器 */
  background-repeat: no-repeat; /* 不重复 */
}

/* 电池电量填充层（根据电量动态调整宽度） */
.batteryLevel {
  position: absolute; /* 绝对定位 */
  top: 0px;
  left: 0px;
  width: 100%; /* 默认满电（通过JS动态修改宽度） */
  height: 100%;
  background-color: var(--button-color-alt); /* 默认浅灰色 */
  border-radius: 5px; /* 圆角 */
}

/* 电池电量等级样式（0%：低电量） */
.battery0 {
  background-color: var(--low-battery); /* 红色 */
}

/* 电池电量等级样式（1-33%：中等电量） */
.battery1 {
  background-color: var(--medium-battery); /* 黄色 */
}

/* 电池电量等级样式（34-100%：高电量） */
.battery3, .battery2  {
  background-color: var(--fg-color); /* 绿色 */
}

/* 充电状态指示器（闪电图标） */
.charging {
  position: absolute; /* 绝对定位 */
  top: 0px;
  left: 30px; /* 水平位置 */
  width: 40px; /* 宽度 */
  height: 40px; /* 高度 */
  /* 闪电图标SVG（内嵌数据URL，避免外部文件依赖） */
  content: url('data:image/svg+xml;utf8,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><polygon points="20,0 5,33 24,33 15,60 35,27 16,27" fill="white"/></svg>');
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4)); /* 阴影 */
}

/* 充电剩余时间文本样式 */
.chargeTimeRemaining {
  position: absolute; /* 绝对定位 */
  bottom: 0px; /* 底部对齐 */
  left: 3px; /* 左侧偏移 */
  font-size: 0.6em; /* 小字体 */
  color: white; /* 白色 */
  text-shadow: 0 0 4px rgba(0, 0, 0, 1); /* 文字阴影（增强可读性） */
}


/* 导航菜单容器样式（桌面端） */
.main-nav-parent {
  display: flex; /* 弹性布局 */
  justify-content: center; /* 水平居中 */
  flex-wrap: wrap; /* 内容过多时自动换行 */
  gap: 5px; /* 导航项间距 */
  margin: 1rem auto; /* 上下外边距1rem，左右居中 */
  padding: 1rem; /* 内边距 */
  text-align: center; /* 文本居中 */
  width: 100%; /* 占满宽度 */
  max-width: 800px; /* 最大宽度（避免过宽） */
}

/* 单个导航项样式 */
.main-nav-child {
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 垂直排列（图标在上，文字在下） */
  align-items: center; /* 水平居中 */
  border-radius: 12px; /* 圆角 */
  border: 1px solid white; /* 边框（白色） */
  padding: 1px 1px; /* 内边距 */
  vertical-align: top; /* 顶部对齐 */
  width: auto; /* 宽度自适应 */
  background: rgba(255, 255, 255, 0); /* 背景色（半透明深灰） */
  border: 1px solid rgba(255, 255, 255, 0); /* 边框（半透明白色） */
  min-width: 85px; /* 最小宽度（确保文字不换行） */
  transition: all 0.3s ease-in-out; /* 所有属性过渡动画（0.3秒） */
  width: 85px; /* 固定宽度 */
}

/* 包含选中状态图标的导航项样式（当前页面） */
.main-nav-child:has(.selectedicon) {
  background: rgba(25, 25, 25, 0.9); /* 背景色（更深的灰色） */
  border: 2px solid var(--fg-color); /* 边框（强调色） */
  box-shadow: 0 0 15px rgba(0, 255, 128, 0.1); /* 绿色阴影（突出当前项） */
}

/* 导航项 hover 状态（鼠标悬停） */
.main-nav-child:hover {
  transform: translateY(-2px); /* 向上移动2px（悬浮效果） */
  border-color: white; /* 边框变为白色 */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); /* 白色阴影 */
}

/* 导航项中的图标样式（原FontAwesome图标） */
.main-nav-child i {
  font-size: 32px; /* 图标大小 */
  margin-bottom: 1px; /* 与下方文字的间距 */
  transition: all 0.3s ease-in-out; /* 过渡动画 */
}

/* 导航项中的链接样式 */
.main-nav-child a {
  width: 100%; /* 占满导航项宽度 */
  text-decoration: none; /* 去除下划线 */
  font-size: 85%; /* 字体大小 */
  color: var(--bg-color-alt); /* 文字色（浅灰色） */
}

/* 导航项链接 hover 状态 */
.main-nav-child a:hover {
  color: var(--text-color); /* 文字变为白色 */
}

/* 导航项中链接内的图标样式（原FontAwesome图标） */
.main-nav-child a i {
  text-decoration: none;
  font-size: 10px; /* 更大的图标尺寸 */
  padding-bottom: 10px; /* 与文字的间距 */
}

/* 导航项中链接内的本地图片图标样式（替换FontAwesome后生效） */
.main-nav-child a img {
  width: 85px; /* 图标宽度 */
  height: 85px; /* 图标高度 */
  margin-bottom: 0px; /* 与文字的间距 */
  object-fit: contain; /* 保持图标比例，不拉伸 */
}

/* 响应式布局：屏幕宽度≤768px时（手机、平板竖屏） */
@media screen and (max-width: 768px) {
  /* 导航容器改为网格布局（更适合小屏幕） */
  .main-nav-parent {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); /* 自动计算列数，每列最小110px */
    gap: 15px; /* 间距缩小 */
    padding: 0.5rem; /* 内边距缩小 */
    margin: 0; /* 清除外边距 */
    width: 100%; /* 占满屏幕宽度 */
  }
  
  /* 外层容器限制宽度，避免横向滚动 */
  #outer {
    max-width: 100vw; /* 最大宽度为屏幕宽度 */
    overflow-x: hidden; /* 隐藏横向溢出 */
    box-sizing: border-box; /* 盒模型（边框计入宽度） */
  }

  /* 主内容容器自适应屏幕宽度 */
  #content {
    width: 100% !important; /* 占满宽度 */
    max-width: 100vw; /* 最大宽度为屏幕宽度 */
    padding: 0 10px; /* 左右内边距（避免内容贴边） */
    box-sizing: border-box;
  }
}

/* 复选框样式（自定义外观） */
input[type='checkbox'] {
  appearance: none; /* 清除默认样式 */
  width: 25px; /* 宽度 */
  height: 25px; /* 高度 */
  background-color: var(--button-color); /* 背景色（深灰色） */
  border: 2px solid var(--fg-color); /* 边框（强调色） */
  border-radius: 5px; /* 圆角 */
  cursor: pointer; /* 鼠标指针 */
  position: relative; /* 相对定位 */
  display: inline-block; /*  inline-block 布局 */
  vertical-align: middle; /* 垂直居中对齐 */
}

/* 复选框选中状态 */
input[type='checkbox']:checked {
  background-color: var(--fg-color); /* 背景色变为强调色（绿色） */
}

/* 复选框选中后的对勾图标（用伪元素实现） */
input[type='checkbox']:checked:after {
  content: ''; /* 空内容 */
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  width: 6px; /* 对勾宽度 */
  height: 12px; /* 对勾高度 */
  border: solid var(--text-color); /* 边框（白色） */
  border-width: 0 2px 2px 0; /* 只显示右下边框（形成对勾形状） */
  transform: translate(-50%, -60%) rotate(45deg); /* 旋转45度，调整位置 */
}

/* 复选框标签样式 */
.checkbox-label {
  padding-top: 3px; /* 顶部内边距（对齐复选框） */
  margin-left: 5px; /* 与复选框的间距 */
  word-break: break-word; /* 文字过长时换行 */
}

/* 在你的CSS文件中添加以下代码 */
.small-text {
  font-size: 0.9em; /* 调整这个值来控制大小，数值越小字体越小 */
  /* 可以保留原有的颜色等样式，避免冲突 */
  color: grey;
}

/* 统一API相关输入框宽度 */
#zhiXKey, #zhiXEndpoint,
#appId, #appSecret, #appKey {
  width: 400px; /* 和智简Pro输入框保持相同宽度 */
  max-width: 100%; /* 适配小屏幕 */
  /* 继承已有输入框样式（如背景、边框等），无需重复设置 */
}