/* ========================= 全局基础样式 ========================= */
/* 重置body和html的默认内外边距，确保页面无默认留白 */
body, html {
  margin: 0;           /* 清除默认外边距 */
  padding: 0;          /* 清除默认内边距 */
  height: 100%;        /* 让页面高度铺满整个视口（屏幕） */
  font-family: "Microsoft YaHei", sans-serif; /* 设置字体：优先微软雅黑，无则用系统无衬线字体（适配中文） */
  color: #fff;         /* 全局文字默认白色（适配暗黑背景） */
  overflow-x: hidden;  /* 隐藏水平方向滚动条，防止页面横向溢出 */
}

/* ========================= 背景画布样式 ========================= */
/* 针对id为bg的canvas标签（页面动态背景画布） */
canvas#bg {
  position: fixed;     /* 固定定位：画布始终贴在视口，不随滚动条移动 */
  top: 0;              /* 顶部对齐视口 */
  left: 0;             /* 左侧对齐视口 */
  width: 100%;         /* 宽度铺满视口 */
  height: 100%;        /* 高度铺满视口 */
  z-index: -1;         /* 层级设为-1：确保画布在所有内容下方（作为背景） */
}

/* ========================= 内容容器样式 ========================= */
/* 页面核心内容的容器（居中显示） */
.container {
  max-width: 700px;    /* 容器最大宽度700px（适配移动端+PC端，不会太宽） */
  margin: 50px auto;   /* 上下外边距50px，左右自动（实现水平居中） */
  padding: 20px;       /* 容器内边距20px，让内容和容器边缘有间距 */
}

/* 标题中的span标签样式（用于副标题/标注文字） */
h1 span {
  font-size: 0.6em;    /* 字体大小为父元素（h1）的60%（小号标注） */
  color: #0ff;         /* 文字颜色设为青色（#0ff=rgb(0,255,255)，科技感高亮色） */
}

/* ========================= 卡片组件样式 ========================= */
/* 表单/结果卡片的通用样式（半透明暗黑卡片） */
.card {
  background: rgba(0,0,0,0.3); /* 背景：黑色，透明度30%（半透明暗黑，保留背景画布可见） */
  padding: 15px;                /* 卡片内边距15px，内容不贴边 */
  margin-bottom: 20px;          /* 卡片底部外边距20px，多个卡片间有间距 */
  border-radius: 8px;           /* 圆角8px，弱化直角的生硬感 */
}

/* 卡片内的h2标题样式 */
.card h2 {
  margin-top: 0; /* 清除h2默认的顶部外边距，让标题贴卡片顶部 */
}

/* ========================= 表单控件样式（下拉框/文本域） ========================= */
/* 下拉选择框(select)和文本域(textarea)的通用样式 */
select, textarea {
  width: 100%;                  /* 宽度铺满父容器（卡片） */
  background-color: rgba(255,255,255,0.1); /* 背景：白色，透明度10%（半透明白底，适配暗黑风格） */
  border: 1px solid #0ff;       /* 边框：1px实线，青色（和标题标注色统一，科技感） */
  color: #fff;                  /* 输入文字白色 */
  padding: 8px;                 /* 内边距8px，输入内容不贴边框 */
  margin-top: 6px;              /* 顶部外边距6px，和标签有间距 */
  border-radius: 5px;           /* 圆角5px，和卡片风格统一 */
  font-size: 14px;              /* 字体大小14px（易读） */
  resize: vertical;             /* 文本域仅允许垂直调整大小（防止横向拉伸破坏布局） */
}

/* ========================= 下拉选项样式 ========================= */
/* 下拉框(select)的选项(option)样式 */
select option {
  background-color: rgba(0,0,0,0.9); /* 选项背景：黑色，透明度30%（和卡片背景一致） */
  color: #fff;                       /* 选项文字白色 */
  text-align: center;                /* 选项文字居中显示（提升可读性） */
}

/* ========================= 按钮样式 ========================= */
/* 按钮基础样式 */
button {
  padding: 10px 20px;    /* 内边距：上下10px，左右20px（按钮大小适中） */
  background: #0ff;      /* 背景色青色（主色调，突出按钮） */
  border: none;          /* 清除默认边框 */
  border-radius: 5px;    /* 圆角5px，和表单控件风格统一 */
  cursor: pointer;       /* 鼠标悬浮时显示手型（提示可点击） */
  font-weight: bold;     /* 文字加粗（突出按钮文字） */
}

/* 按钮hover（悬浮）状态样式 */
button:hover {
  background: #0aa;      /* 背景色改为深青色（#0aa=rgb(0,170,170)，反馈hover交互） */
}

/* ========================= 结果展示样式 ========================= */
/* 诊断报告结果的显示区域样式 */
.result {
  white-space: pre-wrap; /* 保留文本中的换行和空格，同时自动换行（适配返回的带换行的报告） */
}

/* 新增h1样式（标题居中核心） */
h1 {
  text-align: center;  /* ✅ 新增：主标题文字居中 */
}

/* 标题中的span标签样式（继承h1的居中，无需额外改） */
h1 span {
  font-size: 0.6em;    
  color: #0ff;         
}

/* 卡片内的h2标题样式 */
.card h2 {
  margin-top: 0; 
  text-align: center;  /* ✅ 新增：卡片标题文字居中 */
}

.ai-from {
  font-size: 16px;
  color: #7dd3fc;
  margin-bottom: 8px;
  text-align: right;
  opacity: 0.8;
}

.result pre {
  white-space: pre-wrap;
  line-height: 1.6;
}

.ai-from {
  display: block !important;
  position: relative;
  z-index: 999;
  font-size: 14px;
  color: #00eaff;
  text-align: right;
  margin-bottom: 10px;
}

.ai-from {
  display: block !important;
  position: relative;
  z-index: 999;
  font-size: 14px;
  color: #09eaff;
  text-align: right;
  margin-bottom: 10px;
}

result.innerHTML = `
  <div class="ai-from">
    来源：${json.provider || 'RULE（本地规则）'}
  </div>
  <pre>${json.report}</pre>
`;