/* 采集员端外观：把手机端对齐到三个工作台（运营后台那一套）。
 *
 * 为什么单独一份而不是改 base.css：base.css 还被官网（site.css 叠在它上面）
 * 用着，动它等于顺手改了营销页。这份只在 collector.html 里加载，叠在
 * base.css 之后，做的事和 workspace.css 对三个设计稿做的事一样——
 * 只换观感（字号、圆角、卡片、标签），不动结构和行为。
 *
 * 对齐的口径（取自 workspace.css）：正文 13.5px/1.6、面板底色 #f6f8fa、
 * 卡片白底 11px 圆角、按钮 8px 圆角 12.5px、标签 5px 圆角 11px、
 * 品牌角标 34px 渐变方块、区块标题 13px。
 */

:root {
  --panel: #f6f8fa;
  --inset: #eff2f5;
  --surface: #fff;
  --accent-ink: #0550ae;
  --ok-bg: #dafbe1; --ok-bd: #aceebb;
  --warn-bg: #fff8c5; --warn-bd: #d4a72c;
  --bad-bg: #ffebe9; --bad-bd: #ffaba8;
  --pend-bg: #eaeef2;
}

body.mobile { background: var(--panel); font-size: 13.5px; line-height: 1.6; }

/* ── 手机外壳：和工作台一样是「白卡片浮在灰底上」 ───────────────── */
.phone {
  max-width: 430px; background: var(--surface);
}
@media (min-width: 480px) {
  .phone {
    border: 1px solid var(--line); border-left: 1px solid var(--line);
    border-right: 1px solid var(--line); border-radius: 14px;
    margin: 16px auto; min-height: calc(100vh - 32px);
    box-shadow: 0 1px 3px rgba(20, 30, 28, .06), 0 4px 14px rgba(20, 30, 28, .05);
    overflow: hidden;
  }
}

/* ── 页头：17px 标题，和工作台 .topbar .ttl 同一号 ───────────────── */
.phone .hd { padding: 16px 18px 10px; }
.phone .hd h1 { font-size: 17px; font-weight: 700; }
.phone .hd .back {
  width: 28px; height: 28px; border-radius: 8px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 18px; margin-right: 2px;
}
.phone .hd .back:hover { background: var(--inset); color: var(--ink); text-decoration: none; }
.phone .bd { padding: 6px 18px 20px; }
.phone .ft { padding: 12px 18px 18px; border-top: 1px solid var(--line); background: var(--surface); }

/* 区块标题对齐 workspace 的 .sect */
.phone h2 { font-size: 13px; font-weight: 700; margin: 22px 0 10px; }

/* ── 按钮：8px 圆角、12.5px；整行主按钮 10px 圆角 ─────────────────── */
.btn { border-radius: 8px; font-size: 12.5px; font-weight: 500; }
.btn.sm { border-radius: 6px; font-size: 11.5px; }
.phone .big { height: 46px; border-radius: 10px; font-size: 15px; font-weight: 600; }

/* ── 状态：工作台用方角标签，手机端跟上 ──────────────────────────── */
.phone .st {
  display: inline-block; border-radius: 5px; padding: 1px 8px; font-size: 11.5px;
  font-weight: 500; line-height: 18px; border: 1px solid var(--line);
  background: var(--pend-bg); color: var(--muted);
}
.phone .st::before { display: none; }
.phone .st.ok { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.phone .st.warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.phone .st.bad { background: var(--bad-bg); border-color: var(--bad-bd); color: var(--bad); }
.phone .st.run { background: var(--accent-soft); border-color: #b6e3ff; color: var(--accent-ink); }
.phone .st.none { background: var(--surface); border-color: var(--line); color: var(--muted); }
/* 首页「还没开工」那行标题里的状态字号跟着标题走 */
.phone .state .st { font-size: 12.5px; align-self: flex-start; }

/* ── 提示条：和工作台的 .note 一样 8px 圆角、12px ─────────────────── */
.notice {
  border-radius: 8px; font-size: 12px; line-height: 1.65; padding: 10px 12px;
  background: var(--panel); border-color: var(--line);
}
.notice.warn { background: var(--warn-bg); border-color: var(--warn-bd); }
.notice.bad { background: var(--bad-bg); border-color: var(--bad-bd); }

/* ── 卡片化：两块入口、开工中那块 ─────────────────────────────── */
.phone .tiles { gap: 10px; }
.phone .tile { border-radius: 11px; padding: 13px 14px; }
.phone .tile b { font-size: 14px; }
.phone .tile em { font-size: 11.5px; }

/* ── 列表行 / 选择行：行高与字号跟工作台表格一致 ─────────────────── */
.phone .list > * { padding: 11px 0; }
.phone .list b { font-size: 13.5px; }
.phone .list small { font-size: 11.5px; }
.phone .pick .t b { font-size: 13.5px; }
.phone .pick .t small { font-size: 11.5px; }

/* ── 表单控件：36px 高、8px 圆角，和上传向导里的输入框同款 ─────────── */
.phone input[type=text], .phone input[type=tel], .phone input[type=number],
.phone select, .phone textarea {
  height: 36px; border-radius: 8px; padding: 7px 10px; font-size: 13.5px;
  /* 只换底色：写成 background 简写会把 base.css 给 select 画的下拉箭头一起抹掉 */
  border: 1px solid var(--line); background-color: var(--surface);
}
.phone select { padding-right: 28px; }
.phone select:disabled { background-color: var(--panel); color: var(--faint); }
.phone textarea { height: auto; }

/* 下拉组：标签在上、下拉在下。开工的「环境 → 地点 → 场景」一行一个，
 * 「还能拍多少」的四个筛选两两一行（.two） */
.phone .pickers { display: grid; gap: 10px; }
.phone .pickers.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 10px; margin: 14px 0 2px; }
.phone .pickers label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.phone .pickers label > span { font-size: 12px; color: var(--muted); }
.phone .pickers select { width: 100%; }
.phone input:focus, .phone select:focus, .phone textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ── 额度条 / 进度条：4px 高，和工作台 .track 一致 ───────────────── */
.phone .quota { padding: 12px 0; }
.phone .quota .r { font-size: 13.5px; }
.phone .bar { height: 4px; border-radius: 2px; }

/* ── 怎么拍：步骤与禁止项 ───────────────────────────────────────── */
.phone .howsteps li { padding: 11px 0 11px 34px; }
.phone .howsteps b { font-size: 13.5px; }
.phone .howsteps span { font-size: 12.5px; }
.phone .howsteps li::before { border-radius: 7px; font-size: 11px; }
.phone .dont b { font-size: 13.5px; }
.phone .dont span { font-size: 12.5px; }
.phone .player { border-radius: 11px; }

/* 首页「开工中」那块：白卡片 + 蓝边，和工作台的强调卡片同一档 */
.phone #home-live {
  border: 1px solid var(--accent); border-radius: 11px; padding: 14px;
  background: var(--accent-soft);
}
.phone #home-live b { font-size: 14px; }

/* 页头里标题右边挂状态标签（工作台页头也是这么排的） */
.phone .hd { align-items: center; }

/* 页头里跟在标题后面的说明字：长了会把标题挤成两行（「还能拍 / 多少」），
 * 让它单独占一行 —— 和工作台页头「标题一行、说明一行」的排法一致 */
.phone .hd { flex-wrap: wrap; }
.phone .hd h1 { white-space: nowrap; }
.phone .hd > small { flex: 1 0 100%; margin-left: 30px; }