/**
 * ============================================================================
 * 手机端基础样式  (mobile/css/base.css)
 * ----------------------------------------------------------------------------
 * 作用：手机端所有页面共用的基础样式 —— CSS 变量、全局重置、通用组件。
 *       页面只需引入本文件 + 各自页面 css 即可保持统一视觉。
 * 适配：手机竖屏 320px–480px；页面最大宽度 480px 居中。
 * 规范：基础字号 16px、按钮文字 ≥18px；主色 #1a73e8、辅助色 #ff6d00、背景 #f5f7fa；
 *       系统无衬线字体；全局 box-sizing: border-box。
 * 注意：禁止页面缩放需配合 HTML 的 viewport 设置：
 *       <meta name="viewport" content="width=device-width, initial-scale=1,
 *        maximum-scale=1, user-scalable=no">
 *       本文件另加 touch-action 与 16px 输入框字号，进一步防止 iOS 聚焦缩放。
 * ============================================================================
 */

/* ====================== 1. CSS 变量（颜色 / 间距 / 圆角 / 字号） ====================== */
:root {
  /* —— 颜色 —— */
  --color-primary:        #1a73e8;   /* 主色调：蓝 */
  --color-primary-dark:   #1559b8;   /* 主色加深（渐变/按压态） */
  --color-accent:         #ff6d00;   /* 辅助色：橙（强调/提示） */
  --color-bg:             #f5f7fa;   /* 页面背景 */
  --color-white:          #ffffff;
  --color-text:           #222222;   /* 主文字 */
  --color-text-secondary: #666666;   /* 次要文字 */
  --color-border:         #dcdfe6;   /* 边框 */
  --color-border-light:   #ebeef5;   /* 更浅边框/分割线 */
  --color-danger:         #e53935;   /* 必填/错误标记 */

  /* —— 间距 —— */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;   /* 页面左右标准边距 */
  --space-lg: 24px;
  --space-xl: 32px;

  /* —— 圆角 —— */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  /* —— 字号 —— */
  --font-base: 16px;  /* 基础字号 */
  --font-lg:   18px;  /* 按钮/标题 */
  --font-xl:   20px;

  /* —— 阴影 —— */
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ====================== 2. 全局重置 ====================== */
*,
*::before,
*::after {
  box-sizing: border-box;            /* 所有元素统一盒模型 */
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;    /* 禁止文字自动放大 */
  touch-action: manipulation;        /* 去掉 300ms 延迟与双击缩放 */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", sans-serif;  /* 系统无衬线字体 */
  font-size: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

/* ====================== 3. 页面容器 .page ====================== */
.page {
  max-width: 480px;                  /* 最大宽度 480px 居中 */
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);  /* 左右 16px，底部留白 */
  min-height: 100vh;
  background: var(--color-bg);
}

/* ====================== 4. 头部 .header ====================== */
.header {
  position: sticky;                  /* 滚动时吸顶 */
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--space-md);
  /* 负边距让头部左右出血到页面边缘（在 .page 内仍保持 480px 内满宽） */
  margin: 0 calc(-1 * var(--space-md));
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-white);
}

.header-title {
  flex: 1;
  text-align: center;
  font-size: var(--font-lg);
  font-weight: 600;
}

.back-btn {
  display: flex;
  align-items: center;
  min-width: 48px;
  height: 56px;
  font-size: var(--font-base);
  color: var(--color-white);
}

.header-right {
  min-width: 48px;
  text-align: right;
  font-size: var(--font-base);
}

/* ====================== 5. 进度条 .progress-bar（三步） ====================== */
.progress-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin: var(--space-lg) 0;
}

.progress-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-step .dot {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-step .label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* 已完成 / 当前步：蓝色高亮 */
.progress-step.active .dot,
.progress-step.done .dot {
  background: var(--color-primary);
}

.progress-step.active .label,
.progress-step.done .label {
  color: var(--color-primary);
  font-weight: 600;
}

/* 步骤之间的连接线（除最后一步外，横线穿过圆点中心） */
.progress-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;                         /* 圆点高度的一半 */
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  z-index: 1;
}

.progress-step.done::after {
  background: var(--color-primary);
}

/* ====================== 6. 表单组 .form-group ====================== */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-group > label {
  display: block;
  font-weight: 700;                  /* 标签加粗 */
  margin-bottom: var(--space-xs);
  font-size: var(--font-base);
}

/* 必填标记（标签内 <span class="req">*</span>） */
.form-group label .req {
  color: var(--color-danger);
  margin-left: 2px;
}

.form-group .hint {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ====================== 7. 输入框 / 文本域 ====================== */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
textarea,
.input {
  width: 100%;
  height: 48px;                      /* 48px 高 */
  padding: 0 var(--space-md);
  font-size: 16px;                   /* ≥16px，避免 iOS 聚焦自动缩放 */
  color: var(--color-text);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);    /* 圆角 8px */
  outline: none;
}

textarea {
  height: auto;
  min-height: 96px;
  padding: var(--space-sm) var(--space-md);
  line-height: 1.5;
  resize: vertical;
}

input:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.12);  /* 聚焦高亮 */
}

/* 必填校验未通过：输入框 / 文本域标红（由 app.js 的 checkRequired 添加，用户开始输入即自动移除） */
input.input-err,
textarea.input-err,
.input.input-err {
  border-color: #e5484d;
  box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.12);
}

/* ====================== 8. 选项按钮 .option-btn ====================== */
.option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;                  /* 大卡片 52px 高 */
  padding: var(--space-sm) var(--space-md);
  font-size: 15px;
  text-align: center;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
  user-select: none;
}

/* 选中态：蓝色边框 + 浅蓝背景（单选/多选通用，由 JS 切换 .selected 类） */
.option-btn.selected {
  border-color: var(--color-primary);
  background: rgba(26, 115, 232, 0.08);
  color: var(--color-primary);
  font-weight: 600;
}

/* 两列网格 */
.option-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

/* 三列网格 */
.option-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

/* ====================== 9. 主按钮 .btn-primary ====================== */
.btn-primary {
  display: block;
  width: 100%;                       /* 全宽 */
  height: 60px;                      /* 60px 高 */
  font-size: var(--font-lg);         /* 18px ≥ 要求 */
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}

.btn-primary:active {
  background: var(--color-primary-dark);
}

/* ====================== 10. 次要按钮 .btn-secondary ====================== */
.btn-secondary {
  display: block;
  width: 100%;
  height: 60px;
  font-size: var(--font-lg);
  font-weight: 600;
  color: var(--color-text);
  background: #e9edf2;               /* 灰色背景 */
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}

.btn-secondary:active {
  background: #dde3ea;
}

/* 按钮横向并列（可选） */
.btn-row {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* ====================== 11. 卡片 .card ====================== */
.card {
  background: var(--color-white);
  border-radius: var(--radius-md);   /* 圆角 12px */
  box-shadow: var(--shadow-card);    /* 阴影 */
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}

.card-title {
  font-size: var(--font-lg);
  font-weight: 700;
  margin: 0 0 var(--space-sm);
}

/* ====================== 12. 拍照上传区域 ====================== */
.upload-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 三列网格 */
  gap: var(--space-sm);
}

/* 已选图片缩略（明显点击区域，正方形） */
.upload-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg);
}

.upload-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 缩略图右上角删除按钮 */
.upload-item .remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-white);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 添加图片的虚线框（明显点击区） */
.upload-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.upload-add .plus {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
  color: var(--color-primary);
}

/* ====================== 13. Toast 提示 ====================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%) translateY(20px);
  max-width: 80%;
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--color-white);
  font-size: 14px;
  border-radius: 24px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ====================== 14. 采集员姓名必填守卫（全屏弹层） ====================== */
.name-guard-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;   /* 兼容旧内核，保留 inset 兜底 */
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10000;
}
.name-guard-card {
  width: 100%;
  max-width: 340px;
  background: var(--color-white, #fff);
  border-radius: 16px;
  padding: 22px 20px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  text-align: left;
}
.name-guard-icon { font-size: 34px; line-height: 1; text-align: center; margin-bottom: 8px; }
.name-guard-title { font-size: 17px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.name-guard-tip { font-size: 13px; color: var(--color-text-secondary, #6b7280); line-height: 1.7; margin-bottom: 14px; }
.name-guard-card .input { width: 100%; }
.name-guard-err { display: none; margin-top: 8px; font-size: 13px; color: #e5484d; }
.name-guard-btn { margin-top: 16px; width: 100%; }
.input.input-err { border-color: #e5484d; box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.12); }