/* =====================================================================
   超声医生派单系统 · 共享设计令牌与全局样式（跨端唯一样式源）
   命名约定：
     --brand-*   品牌色（全站唯一主色，禁止再用 #1989fa/#1677ff/#1668E3 硬编码）
     --ok/warn/danger(+ -ink)  功能色（-ink 为浅底上的可读加深色）
     --text-1/2/3  文本三级色（均满足 WCAG AA 4.5:1）
     --line/fill-1/fill-2  分隔线与浅填充
     --radius-*、--shadow-*、--fs-*  圆角 / 阴影 / 字号阶梯
   断点体系（跨端统一，JS 判定必须与此一致）：480 / 768 / 1024 / 1280
   ===================================================================== */
/* 注意：vant.css 在各页面中于 app.css 之后加载，其自身 :root,:host 会覆盖同名变量。
   故此处使用 :root:root 提高特异性（0,2,0 > 0,1,0），确保本文件是跨端唯一主题来源。 */
:root:root {
  /* ---- 品牌色：单一主色 #1668E3 ---- */
  --brand-700: #10399e;
  --brand-600: #1250c8;
  --brand-500: #1668e3; /* 主色 / 交互主色 / Vant primary */
  --brand-400: #3aa8ff;
  --brand-grad: linear-gradient(135deg, #1250c8 0%, #1668e3 62%, #3aa8ff 100%);
  --brand-grad-soft: linear-gradient(135deg, #e8f1ff 0%, #f4f9ff 100%);
  --brand-ink: #0b2a63;
  --brand-tint: rgba(22, 104, 227, .12);
  --brand-border: rgba(22, 104, 227, .30);
  /* 品牌色半透明阶梯（浅底/描边用，避免页面里再写 rgba(22,104,227,…)） */
  --brand-a05: rgba(22, 104, 227, .05);
  --brand-a08: rgba(22, 104, 227, .08);
  --brand-a10: rgba(22, 104, 227, .10);
  --brand-a28: rgba(22, 104, 227, .28);
  --brand-a35: rgba(22, 104, 227, .35);
  /* 功能色半透明阶梯（徽标 / 标签底色用，替代各页手写 rgba 与 hex 反解） */
  --ok-a10: rgba(7, 193, 96, .10);
  --warn-a10: rgba(255, 152, 0, .10);
  --danger-a10: rgba(238, 10, 36, .10);
  --muted-a10: rgba(150, 151, 153, .10);
  --muted-ink-a10: rgba(100, 101, 102, .10);
  /* 1-3b 补齐：原先各页手写的等价 rgba 已收敛到这些档位 */
  --ok-a12: rgba(7, 193, 96, .12);
  --warn-a14: rgba(255, 152, 0, .14);
  --warn-a25: rgba(255, 152, 0, .25);
  --warn-a28: rgba(255, 152, 0, .28);
  --danger-a22: rgba(238, 10, 36, .22);
  --purple-a10: rgba(114, 50, 221, .10);
  --purple-a12: rgba(114, 50, 221, .12);
  --fee-a10: rgba(255, 106, 0, .10);
  /* Vant 蓝 / antd 蓝残留（#1989fa / #1677ff）统一到品牌蓝阶梯 */
  --brand-a60: rgba(22, 104, 227, .60);

  /* ---- 功能色（含浅底可读加深色） ---- */
  --ok: #07c160;
  --ok-ink: #07934a;
  --warn: #ff9800;
  --warn-ink: #d98200;
  --danger: #ee0a24;
  --danger-ink: #c00000;

  /* ---- 中性灰（Vant 文本阶；1-3b 收敛：原先各页手写 #969799 / #646566） ---- */
  --muted: #969799;
  --muted-ink: #646566;

  /* ---- 次要色板（1-3b 收敛：原先散落在 25 个页面的硬编码） ---- */
  --purple: #7232dd;        /* 私有 / 非公开标签 */
  --purple-a08: rgba(114, 50, 221, .08);
  --orange: #ff8f1f;        /* 警告类标签（比 --warn 更醒目） */
  --orange-a13: rgba(255, 143, 31, .13);
  --fee: #ff6a00;           /* 金额 / 收益强调 */
  --mint: #22c892;          /* 品牌渐变辅色（青绿） */
  --brand-sky: #3b8bff;     /* 次级蓝：渐变副色 / 登录页强调 */
  --brand-line: #cfe0ff;    /* 浅蓝描边（输入框 / 次级按钮） */
  --brand-wash: #f2f7ff;    /* 极浅蓝底 */
  --danger-bg: #fff2f0;     /* 危险浅底（驳回说明卡） */
  --danger-line: #ffccc7;   /* 危险浅描边 */

  /* ---- 色板治理（2026-09-16）：补齐此前散落在各页面的「中间色」 ----
     取值原则：用「出现次数最多的代表值」，使绝大多数页面视觉零变化；
     目的：页面里不再出现字面色值（check_ui_rules 口径 12 会直接拦住新写的硬编码）。 */
  --muted-2: #c8c9cc;           /* 禁用态 / 极浅占位 / 空态图标 · 箭头（比 --muted 再浅一档） */

  /* ---- 灰阶二轮收敛（2026-09-16）----
     同色系只留一档，视觉差 ≤3/255、肉眼不可辨：
       · --fill-0  最浅填充（输入框底 / 表头底 / 行悬浮底 / 图片占位底）
       · --fill-1  浅填充（卡片内浅块）
       · --fill-2  中浅填充（表头 / 浅块 / 骨架底，原 --fill-3 并入此档）
       · --line    描边（原 --line-2 并入此档）
       · --brand-wash / --brand-wash-2  蓝调悬浮 / 选中底
     已把各页散落的 var(--fill-1, #f7f8fa) var(--fill-0, #fafbfd) var(--fill-0, #fafbfd) var(--fill-0, #fafbfd) var(--fill-0, #fafbfd) var(--brand-wash, #f2f7ff) var(--brand-wash, #f2f7ff) var(--brand-wash, #f2f7ff)
     var(--brand-wash-2, #eaf3ff) var(--fill-2, #f2f3f5) var(--fill-0, #fafbfd) var(--muted-2, #c8c9cc) var(--muted-2, #c8c9cc) var(--muted-2, #c8c9cc) var(--muted, #969799) var(--danger-bg, #fff2f0) var(--danger-bg, #fff2f0) 全部归到下面几档。 */
  --fill-0: #fafbfd;
  --brand-wash-2: #eaf3ff;
  --warn-bg: #fff7e6;           /* 警告浅底 */
  --warn-border: #ffd591;       /* 警告浅描边 */
  --warn-ink-strong: #ad6800;   /* 警告浅底上的深色文字（保住 AA 4.5:1，不可用 --warn-ink） */
  --ok-soft: #e9faf2;           /* 通过 / 健康浅底 */
  --ok-soft-border: #b8ecd3;    /* 通过浅描边 */
  --purple-bg: #f3f0ff;         /* 私有 / 非公开浅底 */

  /* ---- 文本三级 ---- */
  --text-1: #1f2329;
  --text-2: #5a6472;
  --text-3: #6b7480; /* 白底对比 ≈4.6:1，满足 AA */

  /* ---- 线与填充 ---- */
  --line: #e9edf3;
  --fill-1: #f7f8fa;
  --fill-2: #f2f3f5;

  /* ---- 圆角 / 阴影 ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 3px rgba(20, 40, 90, .06);
  --shadow-2: 0 6px 18px rgba(20, 40, 90, .10);
  --shadow-3: 0 18px 50px rgba(10, 40, 100, .25);

  /* ---- 字号阶梯（最小 12px） ---- */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-26: 26px;

  /* ---- 标签 ---- */
  --tag-radius: 6px;
  --tag-fs: 12px;

  /* ---- 页面 ---- */
  --page-bg: #eef2f8;
  /* H5 顶栏高度：次级吸顶元素（子页签等）用它对齐，避免各页写死 46px 后顶栏一改全错位 */
  --nav-h: 46px;
  /* H5 画布宽度：视口 ≥768px（平板 / PC 浏览器打开）时按此限宽居中，杜绝内容被拉满。
     PC 后台不适用，已在 pc.css 中解绑。 */
  --app-max: 480px;

  /* ---- Vant 主题令牌 ---- */
  --van-primary-color: var(--brand-500);
  --van-success-color: var(--ok);
  --van-danger-color: var(--danger);
  --van-warning-color: var(--warn);
  --van-radius-md: var(--radius-md);
  --van-radius-lg: var(--radius-lg);
}

/* 页面底色：细腻的浅蓝灰，避免刺眼纯白灰 */
body { background: var(--page-bg); }
/* H5 画布：内容限宽居中（窄屏无感；平板 / 桌面不拉伸）。PC 后台在 pc.css 中解绑。 */
#app {
  background: var(--page-bg);
  max-width: var(--app-max);
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
}

/* ---- 全局焦点可见性（无障碍：键盘操作必须可见） ---- */
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 4px; }
.van-button:focus-visible, .van-cell:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

/* ---- 顶部导航：品牌深蓝渐变 + 白字（.van-nav-bar.van-nav-bar 提升特异性以胜过 vant.css） ---- */
.van-nav-bar.van-nav-bar {
  background: var(--brand-grad);
  --van-nav-bar-icon-color: #fff;
  --van-nav-bar-text-color: #fff;
  --van-nav-bar-title-text-color: #fff;
}
.van-nav-bar .van-nav-bar__title { font-weight: 650; letter-spacing: .3px; }
.van-nav-bar .van-nav-bar__arrow,
.van-nav-bar .van-nav-bar__right,
.van-nav-bar .van-nav-bar__right div,
.van-nav-bar .van-nav-bar__text { color: #fff !important; }
.van-nav-bar .van-nav-bar__right { opacity: .95; }

/* ---- 底部导航：毛玻璃白条 + 品牌激活色（同样需提升特异性） ---- */
.van-tabbar.van-tabbar {
  /* 底部导航配色统一由令牌控制：页面不要再传 active-color / inactive-color */
  --van-tabbar-item-text-color: var(--text-3);
  --van-tabbar-item-active-color: var(--brand-500);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -2px 14px rgba(20, 50, 100, .08);
  max-width: var(--app-max);
  left: 0;
  right: 0;
  margin: 0 auto;
}
.van-tabbar.van-tabbar .van-tabbar-item--active { color: var(--brand-500); }

/* ---- 固定顶栏 / 底部弹层同样跟随 H5 画布限宽居中 ----
   Vant 中二者是 position:fixed + width:100%，若不限宽会与 #app 的 480px 画布错位。 */
.van-nav-bar.van-nav-bar--fixed,
.van-popup--bottom.van-popup--bottom {
  max-width: var(--app-max);
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* ---- 视口 ≥768px：H5 画布两侧留白，用阴影界定画布边界（仅此档生效） ---- */
@media (min-width: 768px) {
  #app { box-shadow: var(--shadow-2); }
}

/* ---- 通用卡片质感 ---- */
.van-cell-group,
.van-tabs,
.vant-card { border-radius: var(--radius-md); }

/* 状态文字工具 */
.st-text { font-size: var(--fs-12); color: var(--text-2); }

/* 迷你徽章 pill（统一圆角与字号，字号不再低于 12px） */
.pill-mini {
  display: inline-block; font-size: var(--tag-fs); padding: 2px 8px;
  border-radius: var(--tag-radius); font-weight: 500; line-height: 18px;
}

/* 轻盈水平条形（用于迷你图表/占比） */
.bar-wrap { display: flex; align-items: center; gap: 8px; }
.bar-wrap .bar { flex: 1; height: 8px; border-radius: 5px; background: var(--fill-2); overflow: hidden; }
.bar-wrap .bar i { display: block; height: 100%; border-radius: 5px; background: var(--brand-grad); }
.bar-wrap .val { flex: none; width: 52px; text-align: right; font-size: var(--fs-12); color: var(--text-2); }

/* ---- 通用按钮族 ---- */
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 14px; background: #fff; color: var(--brand-500);
  border: 1px solid var(--brand-border); border-radius: 16px;
  font-size: var(--fs-13); font-weight: 600; cursor: pointer;
}
.btn-ghost:active { background: var(--brand-grad-soft); }
.btn-pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .4);
  color: #fff; border-radius: var(--radius-lg); font-size: var(--fs-12); cursor: pointer;
}
.btn-pill:active { background: rgba(255, 255, 255, .3); }
.btn-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 18px; background: linear-gradient(135deg, var(--danger), #ff5a4a);
  color: #fff; border: none; border-radius: var(--radius-lg);
  font-size: var(--fs-13); font-weight: 700; cursor: pointer;
}
.btn-danger:active { opacity: .92; }

/* =====================================================================
   统一三态组件：空态 / 加载态 / 错误态（移动端与 PC 端共用同一视觉语言）
   ===================================================================== */
.u-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; text-align: center; color: var(--text-3); }
.u-empty .ico { font-size: 44px; line-height: 1; color: var(--muted-2, #c8c9cc); margin-bottom: 12px; }
.u-empty .t { font-size: var(--fs-14); color: var(--text-2); }
.u-empty .s { font-size: var(--fs-12); color: var(--text-3); margin-top: 6px; }
.u-empty .act { margin-top: 16px; }

.u-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 20px; color: var(--text-3); font-size: var(--fs-13); }
.u-loading .sp { width: 24px; height: 24px; border: 2px solid var(--line); border-top-color: var(--brand-500); border-radius: 50%; animation: uSpin .7s linear infinite; }
@keyframes uSpin { to { transform: rotate(360deg); } }

.u-error { display: flex; align-items: center; gap: 8px; margin: 12px 14px; padding: 10px 12px; background: rgba(238, 10, 36, .07); border: 1px solid rgba(238, 10, 36, .22); border-radius: var(--radius-md); color: var(--danger-ink); font-size: var(--fs-13); line-height: 1.6; }
.u-error .ico { flex: none; font-size: var(--fs-14); }

@media (prefers-reduced-motion: reduce) {
  .u-loading .sp { animation-duration: 1.6s; }
}

/* ---- 防 Vue 挂载前闪现模板源码 ----
   模板直接写在 HTML 里、Vue 脚本在 body 末尾，挂载前浏览器会先渲染原始 HTML：
   {{ }} 会原文显示，且 v-if / v-else 两个分支会同时出现（"闪现带代码的页面"）。
   给挂载点加 v-cloak，Vue 挂载时自动移除该属性，挂载前整块隐藏。 */
[v-cloak] { display: none !important; }

/* ---- H5 输入弹窗（DocAPI.prompt）----
   Vant 没有「带输入的确认框」，这里在 showDialog 的消息区放一个原生输入控件。
   样式贴合 Vant Field 的观感，避免为它再引入第二套 UI 组件。 */
.dlg-input-msg { margin-bottom: 10px; font-size: var(--fs-13); color: var(--text-2); line-height: 1.6; text-align: left; }
.dlg-input-control {
  display: block; width: 100%; box-sizing: border-box; padding: 8px 10px;
  background: #fff; color: var(--text-1, #1f2329); border: 1px solid var(--line);
  border-radius: var(--radius-md); font-size: var(--fs-14); line-height: 1.6;
  font-family: inherit; outline: none; -webkit-appearance: none;
}
.dlg-input-control:focus { border-color: var(--brand-500); }
.dlg-input-control::placeholder { color: var(--text-3); }
textarea.dlg-input-control { min-height: 76px; resize: none; }

/* ===== 2-5 列表页加载骨架：占位卡片替代转圈，消除「白屏 → 内容」跳变 ===== */
.sk-card { background: #fff; border-radius: var(--radius-md); margin: 10px 12px 0; padding: 14px; }
.sk-row { display: flex; align-items: center; gap: 10px; }
.sk-flex { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sk-line, .sk-av { background: linear-gradient(90deg, var(--fill-2, #f2f3f5) 25%, var(--fill-1, #f7f8fa) 37%, var(--fill-2, #f2f3f5) 63%); background-size: 400% 100%; animation: sk-shine 1.4s ease infinite; }
.sk-line { height: 12px; border-radius: 6px; }
.sk-line.t { height: 16px; }
.sk-line.s { height: 10px; }
.sk-av { width: 40px; height: 40px; border-radius: 10px; flex: none; }
@keyframes sk-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk-line, .sk-av { animation: none; } }

/* ===== 3-6 表单校验可定位：出错字段滚动到眼前并标红（约 2.6s 后自动清除） ===== */
.f-err .f-label,
.f-err label { color: var(--danger); }
.f-err .f-input,
.f-err textarea.f-input,
.f-err .pc-input,
.f-err .pc-select,
.f-err .f-click,
.f-err .region-box { border-color: var(--danger) !important; background: var(--danger-bg, #fff2f0); }
.f-err { animation: f-err-shake .3s ease; }
@keyframes f-err-shake {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  70% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .f-err { animation: none; } }

/* ---- 订单进度时间轴（阶段三 3-2；与 PC 端 <pc-steps> 同一套口径与节点样式语义）----
   纯状态驱动：当前状态高亮到第 N 个节点；流程终止（拒绝/取消/爽约）主链置灰 + 下方提示。
   节点文案取自 DocAPI.ORDER_STEPS，页面用 v-for 渲染，不要再手写一套状态名。 */
.step-track { display: flex; align-items: flex-start; margin: 10px 0 2px; }
.st-item { flex: 1; min-width: 0; position: relative; text-align: center; }
.st-item::before { content: ''; position: absolute; left: -50%; top: 8px; width: 100%; height: 2px; background: var(--line); }
.st-item:first-child::before { display: none; }
.st-dot { position: relative; z-index: 1; display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--fill-2); box-shadow: 0 0 0 2px #fff; }
.st-lb { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; color: var(--text-3); }
.st-item.done .st-dot { background: var(--brand-500); }
.st-item.done::before { background: var(--brand-500); }
.st-item.on .st-dot { background: var(--brand-500); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-a28); }
.st-item.on .st-lb { color: var(--brand-500); font-weight: 600; }
.st-track-bad { margin-top: 8px; font-size: var(--fs-12); color: var(--danger); }

/* 「须知 / 说明」字段类型（notice，全站通用）：只展示文案，不提供输入框 */
.nbx { margin: 10px 0; border-left: 3px solid var(--brand-500); padding: 2px 0 2px 10px; }
.nbx-t { font-size: 13px; font-weight: 700; color: var(--text-1); }
.nbx-c { font-size: 12.5px; color: var(--muted); line-height: 1.75; margin-top: 4px; white-space: pre-wrap; }

/* ==========================================================================
   真机加固（2026-09-16 移动端走查）
   --------------------------------------------------------------------------
   ① iOS 自动放大：iOS Safari / WKWebView（含微信内置浏览器）在聚焦「字号 <16px」的输入框时，
      会自动把整页放大且失焦不还原 —— 用户表现为"页面突然变大、还要手动缩回"。
      这里只在 **WebKit 触屏内核**（@supports -webkit-touch-callout 可探测）内把输入类字号抬到 16px，
      桌面浏览器与安卓不受影响（避免为了 iOS 一个坑把全端字号改丑）。
   ② 横向兜底：长英文串 / 长数字 / 意外超宽的子元素，不允许把整页变成可左右拖动。
   ========================================================================== */
@supports (-webkit-touch-callout: none) {
  input, textarea, select, .van-field__control, [contenteditable="true"] { font-size: 16px !important; }
}
html, body { overflow-x: hidden; }

/* ==========================================================================
   登记须知与知情同意书（2026-09-19 新增，交互逻辑在 vendor/consent.js）
   产品红线：条款正文必须滑到底 → 复选框才可勾选 → 勾选后才能继续登记
   ========================================================================== */
#cs-wrap { position: fixed; inset: 0; z-index: 10000; display: none; }
#cs-wrap.show { display: block; }
#cs-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); }
#cs-panel {
  position: absolute; inset: 0; margin: 0 auto; max-width: var(--app-max, 480px);
  background: var(--fill-1); display: flex; flex-direction: column; box-shadow: var(--shadow-3);
}
.cs-hd { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: #fff; border-bottom: 1px solid var(--line); }
.cs-hd b { font-size: var(--fs-16); color: var(--text-1); }
.cs-x { font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.cs-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 8px; background: #fff; }
.cs-lead { margin: 0 0 14px; font-size: var(--fs-13); color: var(--muted-ink); line-height: 1.8; }
.cs-hl { color: var(--danger-ink); font-weight: 600; }
.cs-mute { color: var(--muted); font-size: var(--fs-12); }
.cs-t { margin: 16px 0 8px; font-size: var(--fs-14); color: var(--brand-ink); line-height: 1.5; }
.cs-p { margin: 0 0 8px; font-size: var(--fs-13); color: var(--text-1); line-height: 1.85; }
.cs-p b { color: var(--danger-ink); }
.cs-end { margin: 18px 0 6px; text-align: center; font-size: var(--fs-12); color: var(--muted); }
.cs-ft { flex: none; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); box-shadow: var(--shadow-1); }
.cs-tip { margin: 0 0 10px; text-align: center; font-size: var(--fs-12); color: var(--warn-ink); }
.cs-tip.ok { color: var(--ok-ink); }
.cs-check { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; font-size: var(--fs-13); color: var(--muted); line-height: 1.6; }
.cs-check.on { color: var(--text-1); }
.cs-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }
.cs-btn { width: 100%; height: 46px; border: none; border-radius: 23px; background: var(--brand-grad); color: #fff; font-size: var(--fs-16); font-weight: 600; cursor: pointer; }
.cs-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cs-btn.ghost { margin-top: 8px; background: #fff; color: var(--muted-ink); border: 1px solid var(--line); font-weight: 500; }