html {
    font-size: 62.5%; /* 1rem = 10px (便于计算) */
}

/* 响应式调整根字体大小 */
@media (max-width: 768px) {
    html {
        font-size: 50%; /* 在小屏幕上减小根字体大小 */
    }
}

.question {
  /* 问题容器 */
  margin-bottom: 5%;
  padding: 1%;
  border-radius: 0.8rem;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.question.unanswered {
  /* 未回答问题的红框 */
  border: 2px solid #ff4444;
}

.question-stem {
  /* 问题题干 */
  font-weight: bold;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
  font-size: 1.8rem;
}

.question-id {
  /* 问题编号 */
  font-weight: bold;
  color: white;
  background-color: dodgerblue;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  /* 使用 flex 布局更易居中 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  width: 3rem;
  /* 调整宽度，适应 2 位数 */
  height: 3rem;
  /* 调整高度，与宽度相同 */
  font-size: 1.8rem;
  /* 适当调整字体大小 */
  box-sizing: border-box;
  /* 防止 padding 影响宽高 */
}

.options-container {
  /* 选项容器 */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 单选题和多选题样式 */
.radio-option,
.checkbox-option {
  /* 单选或多选选项样式 */
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  border-radius: 4px; /* 圆角半径 */
  transition: background-color 0.2s;
}

.radio-option:hover,
.checkbox-option:hover {
  /* 选项悬停时的背景颜色 */
  background-color: lightgray;
}

.radio-option input,
.checkbox-option input {
  /* 选项内的输入框样式 */
  transform: scale(1.5);
  margin-right: 0.5rem;
}

.radio-option label,
.checkbox-option label {
  /* 选项内的文本样式 */
  font-size: 1.6rem;
}

/* 卡片题样式 */
.cards-container {
  /* 卡片题容器 */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.card-option {
  /* 卡片题选项 */
  transition: all 0.2s;
  font-size: 3rem;
}

.card-option:hover {
  /* 选项悬停时的阴影和背景颜色 */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  background-color: lightgray;
}

.card-option.selected {
  /* 选中的卡片题后卡片背景颜色 */
  border-color: lightskyblue;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3), 0 3px 8px rgba(0, 0, 0, 0.15);
  background-color: lightskyblue;
}

.card-option .start-time,
.card-option .end-time {
  /* 卡片题选项中的出发时间和到达时间 */
  color: dodgerblue;
  font-size: 100%;
  font-weight: bold;

}

.card-option .train-flight-no {
  /* 卡片题选项中的车次航班号 */
  font-size: 40%;
  font-weight: bold;
  color: #666;
}

.card-option .start-station,
.card-option .end-station {
  /* 卡片题选项中的出发站和到达站 */
  font-size: 60%;
  font-weight: bold;
}

.card-option .during-time {
  /* 卡片题选项中的路程总时间 */
  font-size: 40%;
  color: #666;
  /* font-style: italic;*/
}

.card-option .time-1st,
.card-option .time-2nd {
  /* 卡片题选项中的第一程时间和第二程时间 */
  font-size: 30%;
  color: #666;
  white-space: pre-line;
  vertical-align: middle;
  text-align: center;
}

.card-option .company-label,
.card-option .airplane-type-label,
.card-option .transfer-label {
  /* 卡片题选项中的航空公司、飞机类型、中转车站（标题） */
  font-size: 40%;
  color: #666;
  font-weight: bold;
}

.card-option .company,
.card-option .airplane-type {
  /* 卡片题选项中的航空公司、飞机类型（数据） */
  font-size: 40%;
  color: #666;
}

.card-option .transfer-stations,
.card-option .transfer-time {
  /* 卡片题选项中的中转车站、中转时间 */
  font-size: 40%;
  color: #666;
}

[class^="price-"] {
  /* 卡片题选项中的价格 */
  font-size: 50%;
  color: #b86a0b;
}

[class^="class-"] {
  /* 卡片题选项中的舱位 */
  font-size: 36%;
  color: #00a100;
}

.card-option-weather {
  /* 天气卡片 */
  transition: all 0.2s;
  font-size: 3rem;
}

.card-option-weather .start-city,
.card-option-weather .end-city {
  /* 卡片题选项中的出发城市和到达城市 */
  font-size: 60%;
  font-weight: bold;
}

.card-option-weather .start-weather,
.card-option-weather .end-weather {
  /* 卡片题选项中的出发天气和到达天气 */
  font-size: 60%;
  font-weight: bold;
  color: #666;
}

.card-option-weather .start-temperature,
.card-option-weather .end-temperature {
  /* 卡片题选项中的出发温度和到达温度 */
  font-size: 40%;
  font-weight: bold;
  color: #00a100;
}

.card-option-weather .start-wind,
.card-option-weather .end-wind {
  /* 卡片题选项中的出发风速和到达风速 */
  font-size: 40%;
  font-weight: bold;
  color: #110080;
}

/* 日期题的显示效果 */
.date-container {
  /* 日期题容器 */
  margin-top: 1rem;
}

.date-container input {
  /* 日期题输入框 */
  padding: 0.8rem 1.2rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1.4rem;
}

.custom-date-container {
  /* 自定义日期题容器 */
  margin-top: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 1rem;
  max-width: 30rem;
}

.date-nav {
  /* 自定义日期题的导航栏 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.date-nav-btn {
  /* 自定义日期题的导航按钮 */
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.month-year-display {
  /* 自定义日期题的年月显示 */
  font-weight: bold;
  font-size: 1.6rem;
}

.weekdays-container {
  /* 自定义日期题的星期容器 */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 0.5rem;
  font-size: 1.6rem;
}

.weekday {
  /* 自定义日期题的工作日样式 */
  text-align: center;
  padding: 0.5rem;
  font-weight: bold;
}

.weekend {
  /* 自定义日期题的周末样式 */
  color: #ff4444;
}

.calendar-grid {
  /* 自定义日期题的日历网格 */
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
}

.calendar-day {
  /* 自定义日期题的日期单元格 */
  text-align: center;
  padding: 0.8rem 0;
  border-radius: 4px;
  cursor: default;
  font-size: 1.6rem;
}

.calendar-day.prev-month,
.calendar-day.next-month {
  /* 自定义日期题的上月/下月日期 */
  color: #ccc;
}

.calendar-day.selectable {
  /* 自定义日期题的可选日期 */
  cursor: pointer;
  background-color: #f5f5f5;
}

.calendar-day.selectable:hover {
  /* 自定义日期题的可选日期悬停效果 */
  background-color: lightgray;
}

.calendar-day.disabled {
  /* 自定义日期题的禁用日期 */
  color: #ccc;
  background-color: #f9f9f9;
  cursor: not-allowed;
}

.calendar-day.selected {
  /* 自定义日期题的已选日期 */
  background-color: #4a90e2;
  color: white;
}

.date-display {
  /* 自定义日期题的已选日期显示 */
  margin-top: 1rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  background-color: #f9f9f9;
  font-size: 1.6rem;
}

/* 新增页面切换相关样式 */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 0%;
}

.ico-container {
    /* 控制容器尺寸 */
    width: 10rem;
    height: 10rem;
    /* 控制内边距 */
    padding: 0rem;
    /* 使用自动边距让元素居中 */
    margin-left: auto;
    margin-right: auto;
    
    /* 控制圆角 */
    border-radius: 4px;
    
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ico-logo {
    /* logo的尺寸 */
    width: 10rem;
    height: 10rem;
    border-radius: 4px;
    /* 防止低质量缩放 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.page {
  display: none;
}

.page.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

.bg-white {
  background-color: #fff;
}

.p-6 {
  padding: 1.5rem;
}

.rounded-lg {
  /* 卡片圆角 */
  border-radius: 0.5rem;
}

.shadow-md {
  /* 容器阴影 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mb-8 {
  margin-bottom: 2rem;
}

.text-gray-700 {
  color: #4a5568;
  font-size: 1.6rem;
}

.quote-highlight {
  /* 字体背景高亮 */
  background-color: rgb(255, 255, 118);
  /* 浅灰色 */
  padding: 0.1em 0.3em;
  /* 增加内边距更美观 */
  border-radius: 4px;
  /* 轻微圆角 */
}

.mb-4 {
  /* 自定义间距 */
  margin-bottom: 1rem;
}

.mb-6 {
  /* 自定义间距 */
  margin-bottom: 1.5rem;
}

.text-center {
  /* 自定义居中对齐 */
  text-align: center;
}

.text-2xl {
  /* 自定义字体大小 */
  font-size: 2.5rem;
}

.font-bold {
  /* 自定义字体粗细 */
  font-weight: 700;
}

.text-gray-800 {
  /* 自定义字体颜色 */
  color: #2d3748;
}

.button-row {
  /* 自定义按钮行容器 */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* 两列等宽 */
  gap: 1.6rem;
  /* 按钮间距 */
  margin-top: 1.5rem;
  /* 和上方内容的距离 */
}

.w-start,
.w-submit {
  /* 开始、提交按钮宽度、位置 */
  width: 100%;
  grid-column: 2;
}

.w-next {
  /* 下一页按钮宽度、位置 */
  width: 100%;
  grid-column: 3;
}

.w-last {
  /* 上一页按钮宽度、位置 */
  width: 100%;
  grid-column: 1;
}

.bg-primary {
  /* 自定义按钮背景颜色 */
  background-color: #4a90e2;
}

.text-white {
  /* 自定义按钮文字颜色 */
  color: white;
}

.py-3 {
  /* 自定义按钮垂直内边距 */
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.px-6 {
  /* 自定义按钮内边距 */
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.font-medium {
  /* 自定义按钮字体粗细 */
  font-weight: 500;
}

.hover\:bg-blue-600:hover {
  /* 自定义按钮悬停效果 */
  background-color: #357abd;
}

.transition-colors {
  /* 自定义按钮颜色过渡效果 */
  transition: background-color 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 页脚备案样式 */
.footer {
    background: #fff;
    padding: 1.5rem 1rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    box-shadow: 0 -0.4rem 0.6rem rgba(0, 0, 0, 0.03);
}

.beian-container {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    max-width: 100%;
}

.beian-item {
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
    color: #4a5568;
    transition: all 0.2s ease;
    padding: 0.6rem 1rem;
    border-radius: 4px;
}

.beian-item:hover {
    background: #f7fafc;
    transform: translateY(-0.2rem);
}

.beian-link {
    color: #4a5568;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.beian-link:hover {
    color: #3182ce;
}

.gongan-icon {
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 0.6rem;
}

.survey-table {
    /* 表格样式 */
    width: 100%;
    table-layout: fixed; /* 列平均分布 */
    border-collapse: collapse;
    margin: 1.5rem 0;
    /* 字体大小 */
    font-size: 1.4rem;
}

.survey-table th,
.survey-table td {
    text-align: center; /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
    padding: 1rem; /* 单元格内边距 */
    border: 1px solid #ddd; /* 边框样式 */
}

.survey-table th {
    background-color: #f8f9fa; /* 表头背景色 */
    font-weight: bold;
}

.survey-table tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* 隔行变色效果 */
}