.custom-segment {
  display: flex;
  justify-content: flex-start; /* 左对齐 */
  margin-bottom: 16px; /* 与内容的间距 */
}

.nav-button {
  flex: 1; /* 每个按钮占据相等的空间 */
  margin-right: 16px; /* 按钮之间的间距 */
  font-size: 16px; /* 默认字体大小 */
  --color: #000; /* 默认字体颜色 */
  --background: transparent; /* 背景透明 */
  border: none; /* 去掉边框 */
  text-align: left; /* 文本左对齐 */
}

.nav-button:last-child {
  margin-right: 0; /* 最后一个按钮不需要右边距 */
}

.nav-button.activated {
  font-weight: bold; /* 点击时字体加粗 */
  font-size: 18px; /* 点击时字体变大 */
  --color: black; /* 激活状态的字体颜色（可以根据需要调整） */
}

.info-section {
  background-color: white; /* 背景色为白色 */
  padding: 16px;
  border-radius: 8px; /* 圆角 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  margin-top: 16px; /* 与导航栏的间距 */
}

.input-row {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: space-between; /* 在行内均匀分布 */
  margin-bottom: 16px; /* 每一行的间距 */
}

.input-group {
  display: flex;
  align-items: center;
}

.input-group label {
  flex: 1; /* 标签占据剩余空间 */
}

.input-box {
  border-radius: 15px; /* 圆角矩形 */
  border: none; /* 去掉边框 */
  padding: 8px 12px; /* 内边距 */
  margin-left: 8px; /* 标签与输入框之间的间距 */
  background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */
  width: 75px;
}

.unit {
  margin-left: 8px; /* 输入框与单位之间的间距 */
}

.gender-section {
  display: flex;
  align-items: center;
  margin-left: 16px; /* 性别选择与年龄输入框的间距 */
}

.gender-option {
  border-radius: 20px; /* 圆角矩形 */
  padding: 8px 12px; /* 内边距 */
  background: rgb(217, 214, 214); /* 默认背景色为灰色 */
  margin-left: 16px; /* 选项之间的间距 */
  cursor: pointer; /* 鼠标悬停时显示为指针 */
}

.gender-option.selected {
  background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */
  color: white; /* 选中时字体颜色为白色 */
}



ion-content {
  --background: #f8f8f8; /* 页面背景颜色 */
  padding: 16px; /* 内容内边距 */
}

.textarea-section {
  position: relative; /* 使得绝对定位的元素相对于此元素定位 */
  margin-top: 8px; /* 与上方区域的距离 */
}

.textarea-input {
  width: 100%; /* 宽度100% */
  height: auto; /* 允许高度自适应 */
  min-height: 120px; /* 设置最小高度 */
  border-radius: 8px; /* 圆角矩形 */
  border: none; /* 去掉边框 */
  background-color: white; /* 背景颜色为白色 */
  padding: 8px; /* 内边距 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  resize: none; /* 禁止调整大小 */
  font-size: 17px; /* 字体大小 */
  color: #000; /* 字体颜色 */
}

.image-display-section {
  background-color: white; /* 背景颜色为白色 */
  border-radius: 8px; /* 圆角矩形 */
  padding: 16px; /* 内边距 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  margin-top: 8px; /* 与上方区域的距离 */
  text-align: center; /* 内容居中 */
  width: 100%;
  height: 325px;
}

.image-display-section img {
  width: 100%; /* 图片宽度100% */
  height: 100%; /* 图片高度100% */
  object-fit: cover; /* 保持比例填充 */
  border-radius: 5px; /* 图片圆角 */
  margin-top: 10px; /* 图片与标题之间的间距 */
}

.analysis-button {
  --background: linear-gradient(to right, #ffcccb, #add8e6); /* 渐变背景色 */
  color: white; /* 文字颜色为白色 */
  border-radius: 8px; /* 圆角矩形 */
  margin-top: 16px; /* 与上方区域的距离 */
  width: 100%; /* 按钮宽度100% */
  padding: 12px; /* 内边距 */
  text-align: center; /* 文本居中 */
  font-size: 17px;
}

.bigbox1 {
  width: 100%;
  background-color: #ffffff; // 背景色
  border: 1px solid #e0e0e0; // 边框
  border-radius: 12px; // 圆角
  padding: 20px; // 盒子内边距
  margin-top: 20px; // 与上方内容的间距
}


/* 当生成文本时的样式 */
.analysis-button.generating {
  --background: #808080; /* 生成时的背景颜色为灰色 */
  color: white; /* 文字颜色保持为白色 */
}


//AI评价
.evaluation-content {
display: flex; /* 使用 flexbox 布局 */
flex-direction: column; /* 垂直方向排列 */
align-items: center; /* 水平方向居中 */
justify-content: center; /* 垂直方向居中 */
padding: 16px;
height: 100%; /* 填充整个内容区域 */
}

ion-textarea {
width: 100%; /* 使文本区域宽度适应父容器 */
max-width: 500px; /* 设置最大宽度 */
min-height: 150px; /* 设置最小高度 */
margin-bottom: 16px; /* 文本区域和按钮之间的间距 */
}

.submit-button {
background-color: orange; /* 橙色背景 */
color: white !important; /* 强制设置文字颜色为白色 */
border-radius: 20px; /* 椭圆形 */
padding: 6px 12px; /* 调整内边距以缩小按钮 */
font-size: 16px; /* 调整字体大小 */
height: auto; /* 自适应高度 */
min-width: 80px; /* 最小宽度 */
}
.rating-container {
display: flex; /* 使用 flexbox 布局 */

height:90px;
padding-left: 16px;
border-bottom: 1px solid grey; /* 只显示底部边框，设置为黑色 */
margin-bottom: 10px; /* 评分容器与文本之间的间距 */
margin-top: 0;
}

.rating-label {
display: flex; /* 使用 flexbox 布局 */
padding-top: 7px;
font-weight: bold; /* 加粗评分文本 */
font-size: 22px; /* 调整字体大小 */
margin-right: 7px; /* 评分文本与星星之间的间距 */
}

.actual-score {
display: flex; /* 使用 flexbox 布局 */
padding-top: 12px;
margin-left: 50px; /* 分数与星星之间的间距 */
font-size: 15px; /* 调整字体大小 */
color: grey;
}

.textbox{
width: 100%; /* 使文本区域宽度适应父容器 */
height: 300px; /* 设置最大宽度 */
border-bottom: 1px solid grey; /* 只显示底部边框，设置为黑色 */
}

.imgbox{
width: 100%; /* 使文本区域宽度适应父容器 */
height: 150px; /* 设置最大宽度 */
background-size: contain; /* 图像填充方式 */
background-position: center; /* 图像居中 */
background-repeat: no-repeat; /* 不重复图像 */
margin-top: 50px;
}