/* ============================================================================
   手机端共用骨架 mobile.css  V1.0
   ────────────────────────────────────────────────────────────────────────────
   给 E3 车主端（c-app.html）与 E4 门店接单端（store-app.html）用。
   颜色与间距一律来自 store/ui.css，这里只管手机专有的结构与尺寸。

   为什么单独一个文件：这两页原先各写了一套手机样式，同一件事（底栏高度、
   卡片圆角、点击区大小）两边数值不同。端一多，分叉就变成「看起来是两个产品」。
   现在：外壳 / 状态条 / 标题栏 / 滚动区 / 底栏 / 卡片 / 列表行 / 按钮 / 表单 /
   弹层 / 吐司 —— 各只有一份，两页共用。

   页面引用顺序：ui.css → mobile.css
   页面自己只留「这一屏才有」的样式（如车辆大卡、海报、二维码）。
   ========================================================================= */

/* ── 外壳 ────────────────────────────────────────────────────────────────
   两台机器摆在演示底上。深底同属靛族（--ui-shell），不能各页一个黑。 */
.phone {
  width: 390px;
  height: 844px;
  max-height: 92vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ui-bg);
  border: 8px solid var(--ui-side-2);
  border-radius: 36px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px var(--ui-shell-line);
}

/* ── 状态条 ──────────────────────────────────────────────────────────────
   纯装饰，不承载信息；两页同名不同类，这里都接上。 */
.pstatus, .statusbar {
  flex: 0 0 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--ui-space-5);
  background: var(--ui-surface);
  color: var(--ui-text-1);
  font-size: var(--ui-fs-small);
  font-weight: 600;
}
.pstatus .r { display: flex; gap: 5px; align-items: center; font-size: 10.5px; color: var(--t2); }
.statusbar .dots { letter-spacing: 2px; }

/* ── 标题栏 ──────────────────────────────────────────────────────────────
   固定 56，和桌面端顶栏同一节奏。返回键给足 44 点击区。 */
.phead, .hdr {
  flex: 0 0 auto;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-1) var(--ui-space-4);
  background: var(--ui-surface);
  border-bottom: 1px solid var(--bd);
  position: relative;
}
.phead h1, .hdr h1 { font-size: var(--ui-fs-h2); font-weight: 600; letter-spacing: -.01em; }
.phead .sub, .hdr .sub { font-size: var(--ui-fs-caption); color: var(--t3); }
.phead .bk, .hdr .bk {
  width: var(--ui-touch);
  height: var(--ui-touch);
  margin-left: calc(var(--ui-space-2) * -1);
  flex: 0 0 var(--ui-touch);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-r-lg);
  background: transparent;
  color: var(--t2);
  font-size: 17px;
  cursor: pointer;
}
.phead .bk.on, .hdr .bk.on, .hdr .bk { display: flex; }
.phead .bk:hover, .hdr .bk:hover { background: var(--ui-primary-soft); color: var(--p); }
.hdr .who {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--ui-fs-small);
  font-weight: 600;
  color: var(--p);
  background: var(--ui-info-bg);
  border-radius: 99px;
  padding: 6px var(--ui-space-3);
  cursor: pointer;
  white-space: nowrap;
}

/* ── 滚动区 ──────────────────────────────────────────────────────────────
   16px 页边距：手机上 12px 贴边，拇指滑动容易误触。 */
.pbody, .body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ui-space-4);
  background: var(--ui-bg);
  -webkit-overflow-scrolling: touch;
}
.pbody::-webkit-scrollbar, .body::-webkit-scrollbar { width: 0; }

/* ── 卡片 ────────────────────────────────────────────────────────────────
   圆角取 --ui-r-xl（10），与桌面大卡同值。手机屏宽 390，再圆就发软；
   静态卡片只描边不投影，投影只给弹层与吐司。 */
.card, .hero, .job, .part, .msg, .mine .big, .kpi3 > div, .quick div, .todo {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-r-xl);
}
.card { padding: var(--ui-space-4); margin-bottom: var(--ui-space-3); }
.card h3, .card h4 {
  font-size: var(--ui-fs-title);
  font-weight: 600;
  margin-bottom: var(--ui-space-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.card h3 .more, .card h4 .r {
  margin-left: auto;
  font-size: var(--ui-fs-caption);
  color: var(--t3);
  font-weight: 400;
}

/* ── 底栏 ────────────────────────────────────────────────────────────────
   每个 tab 至少 44 高，戴手套、单手都能点稳。 */
.pbottom, .tabbar {
  flex: 0 0 auto;
  height: 60px;
  display: flex;
  background: var(--ui-surface);
  border-top: 1px solid var(--bd);
}
.ptab, .tabbar div {
  flex: 1;
  min-height: var(--ui-touch);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10.5px;
  color: var(--t3);
  cursor: pointer;
  position: relative;
  transition: color var(--ui-dur) var(--ui-ease);
}
.ptab.on, .tabbar div.on { color: var(--p); font-weight: 600; }
.ptab .ic { font-size: 18px; line-height: 1; }
.tabbar i { width: 21px; height: 21px; position: relative; display: block; }
.tabbar i svg { width: 21px; height: 21px; display: block; }
.ptab .dot, .tabbar .b {
  position: absolute;
  top: 6px;
  right: 22%;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ui-danger);
  color: var(--ui-text-inverse);
  font-size: 9.5px;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ui-surface);
}
.tabbar .b { right: -8px; top: -6px; min-width: 14px; height: 14px; }

/* ── 按钮 ────────────────────────────────────────────────────────────────
   约定与桌面端 proto.css 完全一致：裸 .btn 是次要（白底描边），
   .btn.primary 才是实心。以前两个手机页正好相反 —— E3 裸 .btn 是实心、
   E4 裸 .btn 是次要，同一套类名两种意思，改一处就错一处。
   46 高：拇指最容易命中的高度。 */
.btn {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ui-border-2);
  border-radius: 12px;
  background: var(--ui-surface);
  color: var(--t1);
  font-size: var(--ui-fs-h3);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--ui-dur) var(--ui-ease), border-color var(--ui-dur) var(--ui-ease);
}
.btn:active { background: var(--ui-surface-2); }
.btn.ghost { color: var(--p); border-color: var(--p); }
.btn.ghost:active { background: var(--ui-primary-soft); }
.btn.primary { background: var(--p); border-color: var(--p); color: var(--ui-text-inverse); }
.btn.primary:active { background: var(--ui-primary-active); border-color: var(--ui-primary-active); }
.btn.gray { background: var(--ui-neutral-bg); border-color: var(--ui-neutral-bg); color: var(--t2); }
.btn.danger { background: var(--ui-danger); border-color: var(--ui-danger); color: var(--ui-text-inverse); }
.btn.sm { width: auto; height: 34px; padding: 0 var(--ui-space-4); font-size: var(--ui-fs-small); border-radius: var(--ui-r-lg); font-weight: 500; }
.btn.wide { grid-column: 1 / -1; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--ui-space-2); margin-bottom: var(--ui-space-3); }

/* ── 标签 ────────────────────────────────────────────────────────────────
   圆角与桌面同值（--ui-r-sm）。全站不做胶囊，状态灯点除外——
   胶囊一多，一屏里全是气泡，反而看不出哪个是真状态。
   语义同桌面：绿成 / 黄待 / 红危 / 蓝信 / 灰止。 */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: var(--ui-r-sm);
  line-height: 1.6;
  white-space: nowrap;
  font-weight: 500;
}
.tag.g, .tag.ok { background: var(--ui-success-bg); color: var(--ui-success-text); }
.tag.o, .tag.warn, .tag.p { background: var(--ui-warning-bg); color: var(--ui-warning-text); }
.tag.r, .tag.danger { background: var(--ui-danger-bg); color: var(--ui-danger-text); }
.tag.b, .tag.i, .tag.info { background: var(--ui-info-bg); color: var(--ui-info-text); }
.tag.gr, .tag.mute { background: var(--ui-neutral-bg); color: var(--ui-neutral-text); }

/* ── 表单 ────────────────────────────────────────────────────────────────
   输入框 44 高，字号 16（低于 16 时 iOS 会强制放大整页，这是硬约束）。 */
.f { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--ui-space-3); }
.f label, .selrow label { font-size: var(--ui-fs-caption); color: var(--t3); font-weight: 500; }
.f input, .f select, .f textarea,
select.inp, .inp, .sel, .scan input, .selrow select {
  width: 100%;
  height: var(--ui-touch);
  border: 1px solid var(--ui-border-2);
  border-radius: 10px;
  padding: 0 var(--ui-space-3);
  background: var(--ui-surface);
  color: var(--t1);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--ui-dur) var(--ui-ease), box-shadow var(--ui-dur) var(--ui-ease);
}
.f textarea { height: 76px; padding: 10px var(--ui-space-3); resize: none; line-height: 1.6; }
.f input:focus, .f select:focus, .f textarea:focus,
select.inp:focus, .inp:focus, .sel:focus, .scan input:focus, .selrow select:focus {
  border-color: var(--p);
  box-shadow: 0 0 0 3px var(--soft);
}
.hint { font-size: 10.5px; color: var(--t3); line-height: 1.6; margin-bottom: var(--ui-space-3); }

/* ── 勾选 ────────────────────────────────────────────────────────────────
   整行可点，不要求精确点中小方块。 */
.chk { display: flex; gap: var(--ui-space-2); align-items: flex-start; font-size: var(--ui-fs-small); color: var(--t2); line-height: 1.6; margin-top: var(--ui-space-2); }
.chk input { width: 18px; height: 18px; accent-color: var(--p); flex: 0 0 18px; margin-top: 1px; }

/* ── 可点行 ──────────────────────────────────────────────────────────────
   行高 ≥48，一行一个点击目标，不靠滚动列表里的小箭头。
   注意：只放「点了会跳/会开」的行。纯读的金额清单不是点击目标，
   塞进 48 高的行里，一张报价单五行就占满一屏 —— 那是数据行，见下。 */
.row, .item_row, .menu_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  min-height: 48px;
  padding: var(--ui-space-2) 0;
  border-bottom: 1px solid var(--ui-divider);
  font-size: var(--ui-fs-body);
}
.row:last-child, .item_row:last-child, .menu_row:last-child { border-bottom: 0; }
.row .l, .item_row .n { flex: 1; min-width: 0; }
.menu_row { padding: var(--ui-space-3) var(--ui-space-1); font-size: var(--ui-fs-h3); cursor: pointer; }

/* ── 数据行 ──────────────────────────────────────────────────────────────
   金额拆项、规格清单：按内容紧排，只对齐不撑高。 */
.kv, .money_row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ui-space-2);
  padding: 6px 0;
  font-size: var(--ui-fs-small);
  color: var(--t2);
}
.kv b, .money_row b { font-weight: 600; color: var(--t1); font-variant-numeric: tabular-nums; }
.menu_row .ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px; background: var(--ui-primary-soft); color: var(--p); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.menu_row .r { margin-left: auto; color: var(--t3); font-size: var(--ui-fs-small); }

/* ── 弹层 ────────────────────────────────────────────────────────────────
   两种形态：居中小卡（.dyn / .mask）与底部抽起（.sheet）。都用同一层遮罩色。 */
.mask, .sheet {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 50;
  background: rgba(6, 27, 49, .55);
}
.mask { align-items: center; justify-content: center; padding: var(--ui-space-6); }
.sheet { align-items: flex-end; z-index: 20; }
.mask.on, .sheet.on { display: flex; }
.dyn {
  width: 100%;
  max-width: 320px;
  max-height: 82%;
  overflow: auto;
  padding: var(--ui-space-4);
  background: var(--ui-surface);
  border-radius: var(--ui-r-xl);
  box-shadow: var(--ui-shadow-lg);
}
.dyn .mh { display: flex; align-items: center; gap: var(--ui-space-2); margin-bottom: var(--ui-space-2); }
.dyn .mh b { font-size: var(--ui-fs-h3); }
.dyn .mh .x, .sheet h3 .x { margin-left: auto; color: var(--t3); font-size: 18px; line-height: 1; cursor: pointer; }
.sheet .in {
  width: 100%;
  max-height: 86%;
  overflow: auto;
  padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-5);
  background: var(--ui-surface);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--ui-shadow-lg);
}
.sheet h3 { display: flex; align-items: center; font-size: var(--ui-fs-h3); margin-bottom: var(--ui-space-3); }

/* ── 吐司 ────────────────────────────────────────────────────────────────
   贴在底栏上方，两根手指在车间不一定看得见顶部。 */
#toast, .toast {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(12px);
  max-width: 86%;
  padding: 10px var(--ui-space-4);
  border-radius: var(--ui-r-lg);
  background: rgba(6, 27, 49, .94);
  color: var(--ui-text-inverse);
  font-size: var(--ui-fs-small);
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ui-dur) var(--ui-ease), transform var(--ui-dur) var(--ui-ease);
  z-index: 99;
}
.toast { top: auto; }
#toast.on, .toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err, .toast.err { background: var(--ui-danger-text); }

/* ── 照片位 ──────────────────────────────────────────────────────────────
   列数由页面定（.c2 / .c4），不给就三列。格高统一 70。 */
.photos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--ui-space-2); margin: var(--ui-space-2) 0 var(--ui-space-3); }
.photos.c2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.photos.c3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.photos.c4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.photos .ph, .photos > div {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--ui-border-2);
  border-radius: 10px;
  background: var(--ui-surface-2);
  color: var(--t3);
  font-size: 10.5px;
  cursor: pointer;
}
.photos .ph.on { border-style: solid; border-color: var(--ui-success); background: var(--ui-success-bg); color: var(--ui-success-text); }

/* ── 空态 ────────────────────────────────────────────────────────────────*/
.list_empty { font-size: var(--ui-fs-small); color: var(--t3); text-align: center; padding: var(--ui-space-4) 0; }

.hide { display: none !important; }

/* ── 演示外壳 ────────────────────────────────────────────────────────────
   两个手机页都摆在同一个深底上（--ui-shell）。以前 E3 深底、E4 浅底，
   同一份原型里两个端像两个产品；底色本身也是界面的一部分，得同源。 */
.stage { display: flex; gap: 34px; align-items: center; }
.legend { width: 260px; font-size: var(--ui-fs-small); color: var(--ui-shell-text); line-height: 1.85; }
.legend h2 { font-size: 19px; line-height: 1.35; color: #fff; letter-spacing: -.01em; margin-bottom: var(--ui-space-2); }
.legend p { font-size: var(--ui-fs-small); color: var(--ui-shell-text); margin-bottom: var(--ui-space-3); }
.legend ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.legend li { padding-left: var(--ui-space-3); position: relative; }
.legend li:before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--ui-shell-line); }
.legend li b { color: #fff; }
.legend .back { margin-top: var(--ui-space-4); display: inline-block; color: var(--ui-shell-link); font-size: var(--ui-fs-small); text-decoration: none; }
.legend .back:hover { text-decoration: underline; }