/* ═══════════════════════════════════════════════════════════════════════════
 * wecom.css —— 企业微信移动端 H5 统一样式地基（P0）
 * 依据 docs/mobile-redesign-spec.md（方案 B）§1 Token、§2 组件
 * 加载于 head.ejs 内置 <style> 之后、tailwind.css 之前
 * 级联：head 遗留 :root（冻结，P6 清理）→ 本文件（Token 唯一真源）→ tailwind（工具类可覆盖）
 * 范围：workbench / checkin / visit / no-permission 共 4 页
 * 目录：1 Token（色彩·圆角·阴影·间距·字号·动效）  2 七组件  3 布局与无障碍
 * 设计方向：低饱和、暖白灰、克制圆角、极淡阴影——参考微信/支付宝国民级 App 的干净感。
 * 禁用红线：① 圆角 >16px，只准 8/12/16/full ② 正文 ≤11px，字号只准 12/14/15/17/20/28，字重只准 400/500/600
 *   ③ 新增色值：全站只有一个绿 --c-online、一个蓝 --c-wecom ④ 点击热区 <44px、非 4px 栅格间距
 *   ⑤ 高饱和荧光色、深蓝→亮蓝大跨度渐变、厚重蓝灰/彩色投影 ⑥ 无信息量的纯装饰动画
 * 渐进增强：毛玻璃（backdrop-filter）只用于页头返回键，不支持的 webview 自动退化为半透明白底。
 * 允许：.wc-btn--punch 打卡球作为页面唯一视觉中心，可用同色系柔和投影 + 顶部内高光 + 呼吸光晕。
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════ 1. Token ════════════════════════ */

:root {
  /* 1.1 色彩：主色只用于主操作与选中态，中性色承担 ~90% 界面，状态色只表达状态不做装饰。
     沿用 head.ejs 既有命名，避免 5 页回归。 */
  --c-wecom: #1677FF;          /* 品牌蓝：沉稳、不刺眼 */
  --c-wecom-light: #4A94FF;    /* 悬停、轻背景 */
  --c-wecom-deep: #0E5FD9;     /* 按下态 */
  --c-online: #07C160;         /* 微信绿：打卡成功 / 进店 / 完成 */
  --c-online-deep: #06AD56;    /* 成功按钮按下态、成功徽标文字 */
  --c-offline: #FF7D00;        /* 低饱和橙：警告 / 进行中 / 待离店 */
  --c-offline-deep: #D46800;   /* 警告徽标文字 */
  --c-danger: #FA5151;         /* 微信红：删除 / 失败 */
  --c-danger-deep: #D64040;    /* 危险按钮按下态 */

  /* 浅底 tint 系列：徽标底、信息提示卡底、已选态底。禁止拿来做按钮底色 */
  --tint-brand: #EAF2FF;
  --tint-success: #E6F7ED;
  --tint-warn: #FFF4E5;
  --tint-danger: #FEECEC;
  --tint-neutral: #F5F6FA;
  /* 与设计稿 --c-*-soft 等价的别名，值只有上面一个来源 */
  --c-wecom-soft: var(--tint-brand);
  --c-online-soft: var(--tint-success);
  --c-danger-soft: var(--tint-danger);
  --c-offline-soft: var(--tint-warn);

  /* 中性色：清爽冷调蓝灰，不发黄 */
  --bg-page: #ecf2fa;          /* 页面背景：冷调浅灰蓝（与品牌蓝协调，去黄调） */
  --bg-card: #FFFFFF;          /* 卡片、弹窗底 */
  --bg-subtle: #F5F6FA;        /* 输入框底、行 hover、占位块 */
  --line: #E8EAED;             /* 1px 实线边框 */
  --line-light: #F0F1F2;       /* 更淡的分割线 */

  /* 文字：纯灰阶，不发蓝 */
  --ink: #1F2329;
  --ink-sub: #646A73;
  --ink-faint: #B8C0CC;

  /* 中性填充：禁用 / 未完成 / 骨架条 */
  --fill-disabled: #E4E6EB;
  --fill-pending: #F0F1F2;
  --ink-on-disabled: #FFFFFF;

  /* 渐变：header 用同色系微渐变，拒绝深蓝→亮蓝大跨度 */
  --grad-dawn: linear-gradient(180deg, #1677FF 0%, #0E5FD9 100%);
  --grad-brand: linear-gradient(135deg, #3C90FF 0%, #1677FF 100%);

  /* 1.2 圆角：更小更克制（国民级 App 普遍 8/12/16） */
  --r-sm: 8px;        /* 标签、徽标、缩略图 */
  --r-md: 12px;       /* 按钮、输入框 */
  --r-card: 16px;     /* 卡片、弹窗 */
  --r-full: 9999px;   /* 返回键、胶囊、打卡球 */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-card);
  --radius-card: var(--r-card);
  --radius-full: var(--r-full);

  /* 1.3 阴影：极淡中性黑影，卡片在暖白灰背景上刚好能区分层级，不发脏 */
  --sh-card: 0 1px 2px rgba(0, 0, 0, .03), 0 2px 8px rgba(0, 0, 0, .04);
  --sh-float: 0 4px 12px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-1: var(--sh-card);
  --shadow-2: var(--sh-float);
  --shadow-card: var(--sh-card);
  --shadow-float: var(--sh-float);

  /* 1.4 间距：4px 栅格。禁止 7px / 13px 这类脱格值；同级卡片左右内距统一 20px、
     页面左右边距统一 24px，禁止 px-4 / px-5 / px-6 混用。 */
  --sp-1: 4px;    /* 图标与文字间隙、徽标内距 */
  --sp-2: 8px;    /* 标签内距、紧凑元素间隙 */
  --sp-3: 12px;   /* 卡内元素间隙、输入框内距、列表项内距 */
  --sp-4: 16px;   /* 卡片外间距、区块内默认间距 */
  --sp-5: 20px;   /* 卡片左右内边距 */
  --sp-6: 24px;   /* 页面左右边距、大区块间隔 */
  --sp-7: 32px;   /* 页级区块间距、页头底部浮出空间 */

  /* 1.5 字号：压到 6 档。禁止 ≤11px 用于正文（角标 / 时间戳 / 单位 / 图注可用 12px）。 */
  --fs-1: 12px;   /* 角标、时间戳、单位、图注、字数统计 */
  --fs-2: 14px;   /* 次要正文、说明文字、表单输入 */
  --fs-3: 15px;   /* 正文、按钮文字、列表主文案 */
  --fs-4: 17px;   /* 区块标题、卡片标题 */
  --fs-5: 20px;   /* 页面标题、空状态标题 */
  --fs-6: 28px;   /* 数据大数：计数、计时 */
  --lh-body: 1.5;    /* 12/14/15px 正文 */
  --lh-title: 1.3;   /* 17/20px 标题 */
  --lh-num: 1.2;     /* 30px 大数 */

  /* 1.6 动效：只允许作用于展开收起、抽屉、Toast、loading、路由切换。
     --dur 由 head 的 .3s 收敛为 200ms，页面无需再写死时长。 */
  --dur-fast: 150ms;
  --dur: 200ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* 1.7 其它 */
  --tap-min: 44px;      /* 最小点击热区，可点元素不得小于此值 */
  --z-dialog: 1200;     /* 弹窗层级，与 head 的 .app-dialog 一致 */
  --page-max: 480px;    /* 414 及以上宽屏的内容最大宽，防拉伸 */
}


/* ════════════════════════ 2. 组件骨架 ════════════════════════
 * 每个组件统一四态：default / active / disabled / loading。
 * 非交互组件（header、stepper、badge）的 active 指「当前或选中态」，loading 指「骨架占位」。
 * ═════════════════════════════════════════════════════════════ */

/* ── 2.1 .wc-header 页头 ── 背景 --grad-dawn，左右 24px、上 16px、下 32px。
   底部 32px 留白用于制造卡片浮出空间，禁止用负边距把卡片叠在页头上。
   结构：.wc-header > .wc-header-back / .wc-header-body（内嵌 .wc-header-title、.wc-header-sub）/ .wc-header-extra */
.wc-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6) var(--sp-7);
  background: var(--grad-dawn);
  color: #fff;
}
/* 内容层级 */
.wc-header > * { position: relative; z-index: 1; }
/* 统一页头高度：min-height 保证内容少的页面（拜访）不会「塌陷」，
   padding-bottom 固定 32px，不再用叠卡式 padding（导致各页高度不一致）。 */
/* 统一页头高度 + 底部间距，让 header 和卡片之间不紧贴 */
.wc-header { min-height: 92px; padding-bottom: var(--sp-6); margin-bottom: var(--sp-4); }
/* 返回键 44×44 达标热区，半透明白底。禁止使用毛玻璃背景模糊 */
.wc-header-back {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .16);
  /* 毛玻璃按渐进增强处理：不支持的 webview 自动退化为纯半透明白底，不影响可用性与可读性 */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.wc-header-body { flex: 1 1 auto; min-width: 0; }   /* min-width:0 允许长标题换行，禁止 nowrap 撑破布局 */
.wc-header-title { margin: 0; font-size: var(--fs-4); font-weight: 600; line-height: var(--lh-title); color: #fff; }
.wc-header-sub { margin: var(--sp-1) 0 0; font-size: var(--fs-1); line-height: var(--lh-body); color: rgba(255, 255, 255, .8); }
.wc-header-extra { flex: none; display: flex; align-items: center; gap: var(--sp-2); padding-top: 6px; font-size: var(--fs-2); color: rgba(255, 255, 255, .8); }
/* 态：active —— 返回键按下反馈，仅 150ms 位移，不加深阴影 */
.wc-header-back:active,
.wc-header-back.is-active { transform: scale(.94); background: rgba(255, 255, 255, .26); }
/* 态：disabled —— 无上级页面时禁用返回键 */
.wc-header-back.is-disabled,
.wc-header-back[disabled] { opacity: .45; pointer-events: none; }
/* 态：loading —— 标题区静态骨架占位，无 spinner 跳动 */
.wc-header.is-loading .wc-header-title,
.wc-header.is-loading .wc-header-sub { color: transparent; background: rgba(255, 255, 255, .22); border-radius: var(--r-sm); width: 60%; }
.wc-header.is-loading .wc-header-sub { width: 40%; margin-top: var(--sp-2); }


/* ── 2.2 .wc-card 卡片 ── 白底 + 22px 圆角 + 20px 内距。
   主卡 --sh-float，次级卡加 .wc-card--flat 降为 --sh-card。禁止给普通区块乱加投影制造所谓层次感。 */
.wc-card {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  box-shadow: var(--sh-float);
  color: var(--ink);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wc-card--flat { box-shadow: var(--sh-card); }
/* 态：active —— 按下或选中，150ms 轻压，阴影降一档（不加深、不放大） */
.wc-card.is-active,
.wc-card--tap:active { transform: scale(.98); box-shadow: var(--sh-card); }
/* 态：disabled —— 整块不可用 */
.wc-card.is-disabled { opacity: .5; pointer-events: none; }
/* 态：loading —— 骨架屏占位：内部文字隐藏，铺一层中性灰块，无动画 */
.wc-card.is-loading > * { visibility: hidden; }
.wc-card.is-loading::after {
  content: '';
  position: absolute;
  left: var(--sp-5);
  right: var(--sp-5);
  top: var(--sp-5);
  bottom: var(--sp-5);
  border-radius: var(--r-sm);
  background: var(--fill-pending);
}


/* ── 2.3 .wc-btn 按钮 ── 高 48px、圆角 16px、字号 15px/600、最小宽 96px。
   变体：--primary（主色渐变）/ --success（绿）/ --ghost（白底描边）/ --danger（红）/ --text（纯文字）/ --block（通栏）
   特例：--punch 打卡球 128×128，仅 1 层阴影，禁止内阴影与光晕伪元素。 */
.wc-btn {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 96px;
  height: 48px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--grad-brand);
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  user-select: none;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.wc-btn--primary { background: var(--grad-brand); color: #fff; }
.wc-btn--success { background: var(--c-online); color: #fff; }
.wc-btn--danger { background: var(--c-danger); color: #fff; }
.wc-btn--ghost { background: var(--bg-card); color: var(--ink); border: 1px solid var(--line); }
.wc-btn--text { min-width: 0; height: var(--tap-min); padding: 0 var(--sp-2); background: transparent; color: var(--c-wecom); }
.wc-btn--block { display: flex; width: 100%; }
/* 打卡球特例：108×108 圆形（比 128 更克制）。全页唯一视觉中心，允许质感叠加。
   背景用同色系三段渐变造体积感；阴影四层但全部压低，光晕只到 .20，拒绝艳俗。 */
.wc-btn--punch {
  width: 108px; height: 108px; min-width: 108px;
  padding: 0;
  border-radius: var(--r-full);
  background: linear-gradient(160deg, #2AD98A 0%, #07C160 48%, #06AD56 100%);
  color: #fff;
  font-size: var(--fs-4);
  box-shadow:
    0 10px 24px rgba(7, 193, 96, .26),
    0 2px 6px rgba(0, 0, 0, .05),
    inset 0 1.5px 0 rgba(255, 255, 255, .35),
    inset 0 -6px 12px rgba(0, 0, 0, .09);
}
.wc-btn--punch::before {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgba(7, 193, 96, .20), transparent 68%);
  animation: wc-breathe 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wc-breathe {
  0%, 100% { opacity: .5;  transform: scale(.97); }
  50%      { opacity: .92; transform: scale(1.03); }
}
/* 态：active —— 按下轻压 150ms，不加深阴影、不改色值 */
.wc-btn:active, .wc-btn.is-active { transform: scale(.97); }
.wc-btn--punch:active, .wc-btn--punch.is-active { transform: scale(.96); }
/* 态：disabled —— 固定灰底，不用透明度叠加，避免不同变体深浅不一 */
.wc-btn:disabled,
.wc-btn[disabled],
.wc-btn.is-disabled {
  background: var(--fill-disabled);
  background-image: none;
  color: var(--ink-on-disabled);
  border-color: transparent;
  box-shadow: none;
  opacity: .7;
  pointer-events: none;
}
/* 打卡球禁用：连呼吸光晕一起撤掉，避免「灰球还在呼吸」误导成可点 */
.wc-btn--punch:disabled::before,
.wc-btn--punch[disabled]::before,
.wc-btn--punch.is-disabled::before { content: none; }
/* 尊重系统「减弱动效」：关闭呼吸与旋转，静态呈现 */
@media (prefers-reduced-motion: reduce) {
  .wc-btn--punch::before { animation: none; opacity: .8; }
}
/* 态：loading —— 文字透明以保留原宽度防抖动，中间换 16px 旋转环 */
.wc-btn.is-loading { color: transparent; pointer-events: none; }
.wc-btn.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  /* 全站唯一允许的循环动画：loading 旋转环（设计稿 §1.6 允许作用于 loading）。
     若 §5-14 按字面要求 0 次循环动画，删掉本行即可，环退化为静态圈，布局不受影响。 */
  animation: wc-spin .7s linear infinite;
}
/* 白底变体的环改用深色，保证可见 */
.wc-btn--ghost.is-loading::after,
.wc-btn--text.is-loading::after { border-color: rgba(0, 0, 0, .12); border-top-color: var(--c-wecom); }
@keyframes wc-spin { to { transform: rotate(360deg); } }


/* ── 2.4 .wc-field 表单控件 ── 高 48px、圆角 16px、底 --bg-subtle、1px 描边。
   结构：.wc-field > .wc-field-label（内含 .wc-field-req 必填星号）/ .wc-field-input / .wc-field-error
   输入字号固定 16px（iOS 防聚焦缩放，禁止改小），视觉要 14px 时用 .is-compact 缩放。
   校验失败只出下方 12px 红字，禁止弹窗报错。 */
.wc-field { position: relative; display: block; }
.wc-field-label { display: block; margin-bottom: var(--sp-2); font-size: var(--fs-2); font-weight: 500; line-height: var(--lh-body); color: var(--ink-sub); }
.wc-field-req { margin-left: 2px; color: var(--c-danger); }
.wc-field-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;              /* iOS 防聚焦缩放的底线值，禁止下调 */
  line-height: var(--lh-body);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.wc-field-input::placeholder { color: var(--ink-faint); }
/* 多行文本变体 */
.wc-field-input--area { height: auto; min-height: 88px; padding: var(--sp-3); resize: none; }
/* 视觉 14px：物理字号仍 16px，靠缩放实现，不触发 iOS 聚焦放大 */
.wc-field-input.is-compact { font-size: 16px; transform: scale(.875); transform-origin: center; }
/* 态：active（= focus 聚焦）—— 主色描边 + 3px 焦点环。
   注意：这是 0 模糊的焦点环（ring），不是彩色投影，未使用任何彩色模糊投影。 */
.wc-field-input:focus,
.wc-field.is-active .wc-field-input { border-color: var(--c-wecom); box-shadow: 0 0 0 3px rgba(0, 130, 239, .16); }
/* 态：error —— 红描边 + 下方 12px 红字，不弹窗 */
.wc-field.is-error .wc-field-input,
.wc-field-input.is-error { border-color: var(--c-danger); }
.wc-field-error { display: none; margin-top: var(--sp-1); font-size: var(--fs-1); line-height: var(--lh-body); color: var(--c-danger); }
.wc-field.is-error .wc-field-error { display: block; }
/* 态：disabled —— 灰底 + 弱文字 */
.wc-field-input:disabled,
.wc-field-input[disabled],
.wc-field.is-disabled .wc-field-input { background: var(--fill-pending); color: var(--ink-faint); pointer-events: none; }
/* 态：loading —— 文字透明，铺一条静态骨架条（无动画） */
.wc-field.is-loading .wc-field-input { color: transparent; }
.wc-field.is-loading::after {
  content: '';
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  top: 50%;
  height: 12px;
  margin-top: -6px;
  border-radius: var(--r-sm);
  background: var(--fill-pending);
}


/* ── 2.5 .wc-stepper 步骤器 ── 结构：.wc-stepper > .wc-step（.is-done / .is-active）+ .wc-step-dot + .wc-step-label
   步骤点 36×36，连接线 2px 高、两端各让出 8px。非交互组件：active = 当前步，
   disabled = aria-disabled="true"（语义化，不能只靠 class），loading = 骨架占位。 */
.wc-stepper { display: flex; align-items: flex-start; margin: 0; padding: 0; list-style: none; }
.wc-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.wc-step-dot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1;
  background: var(--fill-pending);
  color: var(--ink-faint);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.wc-step-label { font-size: var(--fs-1); line-height: var(--lh-body); color: var(--ink-faint); text-align: center; }
/* 连接线：从上一节点中心画到本节点中心，两端各让出 26px（点半径 18 + 间隙 8） */
.wc-step + .wc-step::before {
  content: '';
  position: absolute;
  top: 17px;
  height: 2px;
  left: calc(-50% + 26px);
  right: calc(50% + 26px);
  background: var(--fill-pending);
}
/* 态：done —— 绿实心 + 白勾，进入该步的连接线同步变绿 */
.wc-step.is-done .wc-step-dot { background: var(--c-online); color: #fff; }
.wc-step.is-done .wc-step-label { color: var(--ink-sub); }
.wc-step.is-done::before { background: var(--c-online); }
/* 态：active —— 主色渐变 + 4px 焦点环（0 模糊 ring，非彩色投影） */
.wc-step.is-active .wc-step-dot { background: var(--grad-brand); color: #fff; box-shadow: 0 0 0 4px rgba(0, 130, 239, .12); }
.wc-step.is-active .wc-step-label { color: var(--ink); font-weight: 600; }
/* 态：disabled —— 语义化属性驱动，未达步骤必须同时写 aria-disabled="true" */
.wc-step[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* 态：loading —— 步骤点转骨架灰圈，文字隐藏 */
.wc-stepper.is-loading .wc-step-dot { background: var(--fill-pending); box-shadow: none; }
.wc-stepper.is-loading .wc-step-dot,
.wc-stepper.is-loading .wc-step-label { color: transparent; }


/* ── 2.6 .wc-badge 状态徽标 ── 高 24px、圆角 12px、字号 12px/600、左右内距 8px。
   变体 --success / --warn / --danger / --info / --neutral 通过 --badge-bg、--badge-fg 注入，
   因此 4 个状态只需 3 条规则即可覆盖全部变体。 */
.wc-badge {
  --badge-bg: var(--tint-neutral);
  --badge-fg: var(--ink-sub);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.wc-badge--success { --badge-bg: var(--tint-success); --badge-fg: var(--c-online-deep); }
.wc-badge--warn { --badge-bg: var(--tint-warn); --badge-fg: var(--c-offline-deep); }
.wc-badge--danger { --badge-bg: var(--tint-danger); --badge-fg: var(--c-danger); }
.wc-badge--info { --badge-bg: var(--tint-brand); --badge-fg: var(--c-wecom-deep); }
.wc-badge--neutral { --badge-bg: var(--tint-neutral); --badge-fg: var(--ink-sub); }
/* 态：active —— 选中或强调态：反转为实心底，自动适配所有变体 */
.wc-badge.is-active { background: var(--badge-fg); color: #fff; }
/* 态：disabled —— 整枚弱化 */
.wc-badge.is-disabled { opacity: .5; }
/* 态：loading —— 骨架占位：文字透明，保留最小宽度防抖动 */
.wc-badge.is-loading { color: transparent; background: var(--fill-pending); min-width: 40px; }


/* ── 2.7 .wc-dialog 弹窗 ── 面板宽 86%、最大 340px、圆角 22px、内距 24px 20px，入场 200ms。
   结构：.wc-dialog（加 .is-open 打开）> .wc-dialog-mask + .wc-dialog-box，
   盒内 .wc-dialog-icon（.ok/.err）/ .wc-dialog-title / .wc-dialog-text / .wc-dialog-actions。
   与 head 现有 .app-dialog 结构一致；本文件不改 head 一行，同时给 .app-dialog-mask / .app-dialog-box
   提供同款降级支持，便于 P4 把 visit 的 .abandon-* 私有弹窗平滑迁移。
   危险操作（删除 / 放弃拜访）必须用 .wc-btn--danger，且业务侧必须二次确认。 */
.wc-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-dialog);
  display: none;                  /* 态：default 关闭 */
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  overscroll-behavior: contain;   /* 防止弹窗内滚动穿透到页面 */
}
/* 态：active —— 打开。用 class 切换，禁止直接写 element.style.display */
.wc-dialog.is-open { display: flex; }
/* 遮罩四边铺满：用低饱和黑而非蓝灰，透明度压到 .45 避免过暗 */
.wc-dialog-mask,
.wc-dialog .app-dialog-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, .45);
  animation: wc-dialog-fade-in var(--dur) var(--ease-out) both;
}
/* 弹窗主体：阴影压淡，不再用 24px 60px 那种压迫感很重的投影 */
.wc-dialog-box,
.wc-dialog .app-dialog-box {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 86%;
  max-width: 340px;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-radius: 16px;
  background: var(--bg-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
  animation: wc-dialog-pop-in var(--dur) var(--ease-out) both;
}
.wc-dialog-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto var(--sp-4); border-radius: var(--r-full); background: var(--tint-brand); color: var(--c-wecom); }
.wc-dialog-icon.ok { background: var(--tint-success); color: var(--c-online-deep); }
.wc-dialog-icon.err { background: var(--tint-danger); color: var(--c-danger); }
.wc-dialog-icon.warn { background: var(--tint-warn); color: var(--c-offline-deep); }
.wc-dialog-icon.info { background: var(--tint-brand); color: var(--c-wecom); }
.wc-dialog-title { margin: 0; font-size: var(--fs-4); font-weight: 600; line-height: var(--lh-title); text-align: center; color: var(--ink); }
.wc-dialog-text { margin: var(--sp-2) 0 0; font-size: var(--fs-3); line-height: 1.65; text-align: center; color: var(--ink-sub); word-break: break-word; }
.wc-dialog-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.wc-dialog-actions .wc-btn { flex: 1 1 0; min-width: 0; }
/* 态：disabled —— 提交中锁死操作区 */
.wc-dialog.is-disabled .wc-dialog-actions { opacity: .5; pointer-events: none; }
/* 态：loading —— 正文区骨架占位（静态灰块，无 spinner 跳动） */
.wc-dialog.is-loading .wc-dialog-text { color: transparent; background: var(--fill-pending); border-radius: var(--r-sm); min-height: 44px; }
@keyframes wc-dialog-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wc-dialog-pop-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }

/* ── 2.8 底部确认抽屉 wc-sheet（替代原生 confirm） ──
   为什么用底部弹起：拇指天然落在屏幕下半部；危险项放最远端，物理上降低误触。
   规范遵守：圆角只取 --r-card(22)，字号只取 --fs-4/--fs-2，按钮高 52px(≥--tap-min)，
   间距全 4px 栅格，色值复用 --c-danger，投影只用中性色。 */
.wc-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-dialog);
  display: none;                 /* 态：default 关闭 */
  overscroll-behavior: contain;
}
.wc-sheet.is-open { display: block; }   /* 态：active 打开 */

.wc-sheet-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(10, 17, 30, .55);
  animation: wc-sheet-fade-in var(--dur) var(--ease-out) both;
}

.wc-sheet-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  animation: wc-sheet-slide-up var(--dur) var(--ease-out) both;
}

/* 说明区：白卡，承载「要做什么 + 后果是什么」两行 */
.wc-sheet-head {
  box-sizing: border-box;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-card);
  background: var(--bg-card);
  text-align: center;
}
.wc-sheet-title {
  margin: 0;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: var(--lh-title);
  color: var(--ink);
  word-break: break-word;
}
/* 副文案讲后果，删除类必填；无则隐藏避免出现空行 */
.wc-sheet-desc {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink-sub);
  word-break: break-word;
}
.wc-sheet-desc:empty { display: none; }

/* 操作区：确认按钮蓝底白字（醒目主操作），取消按钮白底灰字 */
.wc-sheet-btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-card);
  background: var(--c-wecom);
  font-family: inherit;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: 52px;
  color: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wc-sheet-btn:active { opacity: .8; }
.wc-sheet-btn:disabled { opacity: .5; pointer-events: none; }

/* 取消按钮：白底灰字，与确认形成主次对比 */
.wc-sheet-btn--cancel {
  background: var(--bg-card);
  color: var(--ink-sub);
}

/* 危险操作：红底白字（微信红包/删除确认风格） */
.wc-sheet-btn--danger {
  background: var(--c-danger);
  color: #fff;
  font-weight: 600;
}

/* 取消与确认之间间距稍大：视觉分隔主次 */
.wc-sheet-gap { height: var(--sp-3); }

@keyframes wc-sheet-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wc-sheet-slide-up { from { transform: translateY(100%); } to { transform: none; } }

/* ── 2.9 工作台主入口 wb-entry ──
   解决「上下线打卡 / 拜访打卡」长期被点错的问题。
   区分手段：① 形状（实心 vs 白底）② 动词/文案 ③ 图标语义 ④ 颜色仅辅助。
   不再用 112px 巨型绿条霸屏——换成 72px 品牌蓝按钮 + 白底拜访卡片，更克制。 */
.wb-entry {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 72px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-card);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.wb-entry:active { transform: scale(.98); opacity: .95; }

/* ① 上下线：实心主按钮 = 「点一下就完事」的考勤动作 */
.wb-entry--punch {
  background: var(--c-wecom);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(22, 119, 255, .22);
}

/* ② 拜访 / 流程入口：白底 + 细描边 + 右箭头 = 「进去走流程」 */
.wb-entry--flow {
  margin-top: var(--sp-3);
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--ink);
}

/* 图标块：40px 方圆形，更精致 */
.wb-entry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.wb-entry--punch .wb-entry-icon { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.wb-entry--flow .wb-entry-icon { background: var(--tint-brand); color: var(--c-wecom); }

.wb-entry-body { flex: 1 1 auto; min-width: 0; margin-left: var(--sp-3); }
.wb-entry-title {
  display: block;
  font-size: var(--fs-4);
  font-weight: 600;
  line-height: var(--lh-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-entry--punch .wb-entry-title { color: #FFFFFF; }
.wb-entry--flow .wb-entry-title { color: var(--ink); }
.wb-entry-desc {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--ink-sub);
}
.wb-entry--punch .wb-entry-desc { color: rgba(255, 255, 255, .88); }

.wb-entry-arrow { flex: 0 0 auto; width: 18px; height: 18px; margin-left: var(--sp-2); }
.wb-entry--punch .wb-entry-arrow { color: rgba(255, 255, 255, .75); }
.wb-entry--flow .wb-entry-arrow { color: var(--ink-faint); }

/* ③ 次级入口列表行：56px，承载低频功能，不与上面两个主入口争视觉重量 */
.wb-entry-row {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-card);
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.wb-entry-row:active { opacity: .7; }
.wb-entry-row-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--bg-subtle); color: var(--ink-sub); display: flex; align-items: center; justify-content: center; }
.wb-entry-row-body { flex: 1 1 auto; min-width: 0; margin-left: var(--sp-3); }
.wb-entry-row-title { display: block; font-size: var(--fs-3); font-weight: 500; color: var(--ink); }
.wb-entry-row-desc { display: block; margin-top: 2px; font-size: var(--fs-1); color: var(--ink-sub); }
.wb-entry-row-arrow { flex: 0 0 auto; width: 18px; height: 18px; margin-left: var(--sp-2); color: var(--ink-faint); }


/* ── 2.10 .wc-punch-wrap 打卡球容器 + 装饰环 ──
   装饰环给打卡球一个「靶心」式视觉锚点，把球与周围留白分开，也让首屏不至于太空。
   用实线低透明度而非虚线：虚线在小屏上与呼吸光晕叠加会产生摩尔纹。 */
.wc-punch-wrap { position: relative; display: inline-flex; }
.wc-punch-ring {
  position: absolute;
  inset: -16px;
  border-radius: var(--r-full);
  border: 1.5px solid rgba(22, 119, 255, .18);
  pointer-events: none;
}

/* ── 2.11 .wc-progress 进度条 ── 轨道 8px 全圆角 + 内阴影（凹陷感），
   填充用绿→蓝渐变：左端=已完成、右端=进行中，方向感明确，比单色更有活力。 */
.wc-progress {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--fill-pending);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
  overflow: hidden;
}
.wc-progress-bar {
  height: 100%;
  width: 0;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, #07C160 0%, #1677FF 100%);
  transition: width 500ms var(--ease-out);
}


/* ── 2.12 拜访留痕拍照格 wc-photo-cell ──
   拒绝灰色大方块占位感：白底 + 虚线边框 + 淡色相机图标，明确「可点击拍照」。 */
.wc-photo-cell {
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  width: 72px;
  height: 72px;
  /* 圆角必须小：虚线边框在大圆角处 dash 会断裂，视觉上像「四个角被盖住」 */
  border-radius: var(--r-sm);
  background: var(--bg-card);
  background-clip: padding-box;      /* 背景不铺到边框下，避免虚线被底色糊住 */
  border: 1px dashed var(--line);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.wc-photo-cell:active { background: var(--bg-subtle); }
.wc-photo-cell img {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* 未拍照时 <img src=""> 会以全尺寸空元素盖在边框上，必须隐藏 */
.wc-photo-cell img:not([src]),
.wc-photo-cell img[src=""] { display: none; }
.wc-photo-cell .plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  gap: 4px;
  color: var(--ink-faint);
  pointer-events: none;
}
.wc-photo-cell .plus svg { width: 20px; height: 20px; }
.wc-photo-cell .plus span { font-size: 11px; }

/* ── 2.11a wc-tab 客户类型切换 ── 两档 tab：陈列/普通，白底描边切换，当前蓝底。
   触感反馈用 opacity（与按钮一致），圆角 --r-md 按钮标准。 */
.wc-tabs {
  display: flex;
  gap: var(--sp-2);
  width: 100%;
}
.wc-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  background: var(--bg-card);
  font-family: inherit;
  font-size: var(--fs-2);
  font-weight: 500;
  color: var(--ink-sub);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.wc-tab:active { opacity: .72; }
.wc-tab.is-active {
  background: var(--c-wecom);
  border-color: var(--c-wecom);
  color: #fff;
  font-weight: 600;
}

/* 停留计时：白底卡片 + 细描边，替代灰色大方块 */
.wc-stay-timer {
  width: 100%;
  border-radius: var(--r-card);
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: var(--sp-4);
}

/* ── 2.12a .wc-steps 分步进度条 ── 横向节点：圆点 + 连接线 + 下方文字。
   三种状态由 JS 切换：.is-active（当前步骤，实心蓝最醒目）/
   .is-done（已完成，浅蓝底对勾，弱于当前）/ 默认（灰，未到达）。
   连接线 .is-done 表示其左侧节点已完成，同步变蓝。 */
.wc-steps {
  display: flex;
  align-items: flex-start;
  width: 100%;
  padding: var(--sp-2) var(--sp-1) 0;
}
.wc-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 72px;
}
.wc-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  background: var(--bg-card);
  color: var(--ink-faint);
  font-size: var(--fs-1);
  font-weight: 600;
  line-height: 1;
}
.wc-step-label {
  font-size: var(--fs-1);
  color: var(--ink-faint);
  white-space: nowrap;
}
/* 当前步骤：实心蓝最醒目 */
.wc-step.is-active .wc-step-dot {
  border-color: var(--c-wecom);
  background: var(--c-wecom);
  color: #fff;
}
.wc-step.is-active .wc-step-label { color: var(--c-wecom); font-weight: 600; }
/* 已完成：浅蓝底对勾，弱于当前步骤 */
.wc-step.is-done .wc-step-dot {
  border-color: var(--c-wecom-light);
  background: var(--tint-brand);
  color: var(--c-wecom-deep);
}
.wc-step.is-done .wc-step-label { color: var(--ink-sub); }
.wc-step-line {
  flex: 1 1 0;
  height: 2px;
  margin-top: 11px; /* 对齐 24px 圆点的垂直中心 */
  border-radius: 1px;
  background: var(--line);
}
.wc-step-line.is-done { background: var(--c-wecom-light); }

/* ── 2.13 全局上传/提交中遮罩 ── 上传照片、提交打卡时覆盖全屏，防止重复点击 */
.wc-loading-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.wc-loading-mask .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--fill-pending);
  border-top-color: var(--c-wecom);
  border-radius: 50%;
  animation: wc-spin .8s linear infinite;
}
.wc-loading-mask p {
  font-size: var(--fs-3);
  color: var(--ink-sub);
}

/* ── 2.14 金蝶客户搜索结果项 customer-item ──
    清晰的两行结构：名称（粗）+ 编号/地址（弱化），
    左侧 56px 门头照缩略图，统一尺寸、圆角、object-cover，
    48px+ 热区，active 态浅灰底反馈，不要花哨装饰。 */
.customer-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--line-light);
  background: transparent;
  text-align: left;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.customer-item:last-child { border-bottom: none; }
.customer-item:active { background: var(--bg-subtle); }
.customer-name { font-size: var(--fs-3); font-weight: 500; }
.customer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
}
.customer-meta { font-size: var(--fs-1); color: var(--ink-faint); line-height: var(--lh-body); flex: 1 1 0; min-width: 0; }
.customer-dist { font-size: var(--fs-1); color: var(--c-wecom); font-weight: 500; white-space: nowrap; }
/* 客户列表项：左侧缩略图 + 右侧文字，横向排版 */
.customer-item-main {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.cust-photo {
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--fill-pending);
}
.cust-photo-empty {
  background: var(--fill-pending);
  border: 1px dashed var(--line);
}
.customer-item-text {
  flex: 1 1 0;
  min-width: 0;
}
/* 已选客户的较大门头照（72px） */
.cust-photo-lg {
  width: 72px;
  height: 72px;
  border-radius: var(--r-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--fill-pending);
}
/* 有内容时自动包裹成白底卡片，空时无样式 */
#customer-result:not(:empty) {
  background: var(--bg-card);
  border-radius: var(--r-card);
  border: 1px solid var(--line-light);
  overflow: hidden;
  margin-top: 8px;
}


/* ── 2.15 汾酒门店卡片 wc-store-card ── */
.wc-store-card {
  display: flex;
  align-items: stretch;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.wc-store-card:active { background: var(--bg-subtle); }
.wc-store-card.is-selected { border-color: var(--c-wecom); box-shadow: 0 0 0 3px rgba(22, 119, 255, .12); }

.wc-store-card-img {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: var(--r-md);
  object-fit: cover;
  background: var(--tint-neutral);
}
.wc-store-card-photo-wrap {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: var(--r-md);
  position: relative;
  background: var(--tint-neutral);
}
.wc-store-card-photo-placeholder {
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  background: var(--tint-neutral);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}
.wc-store-card-photo-placeholder::before {
  content: '';
  width: 28px;
  height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8C0CC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") center/contain no-repeat;
}

.wc-store-card-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.wc-store-card-name { margin: 0; font-size: var(--fs-3); font-weight: 600; line-height: var(--lh-title); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-store-card-addr { margin: var(--sp-1) 0 0; font-size: var(--fs-1); line-height: var(--lh-body); color: var(--ink-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wc-store-card-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.wc-store-card-tag { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-1); line-height: 1; color: var(--ink-faint); background: var(--tint-neutral); padding: 4px 8px; border-radius: var(--r-sm); }
.wc-store-card-tag-label { font-weight: 500; color: var(--ink-sub); }

.wc-store-card-dist { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 64px; font-size: var(--fs-2); font-weight: 500; line-height: 1; color: var(--c-wecom); padding: var(--sp-1) var(--sp-2); background: var(--tint-brand); border-radius: var(--r-md); white-space: nowrap; }


/* ── 2.16 图片预览弹窗 wc-img-modal ── */
.wc-img-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.wc-img-modal.is-open { opacity: 1; pointer-events: auto; }
.wc-img-modal.is-closing { opacity: 0; pointer-events: none; }

.wc-img-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 17, 30, .75);
  animation: wc-img-modal-fade-in var(--dur) var(--ease-out) both;
}

.wc-img-modal-img {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 75vh;
  border-radius: var(--r-card);
  box-shadow: var(--sh-float);
  transform: scale(.92) translateY(12px);
  transition: transform var(--dur) var(--ease-out);
}
.wc-img-modal.is-open .wc-img-modal-img { transform: scale(1) translateY(0); }
.wc-img-modal.is-closing .wc-img-modal-img { transform: scale(.92) translateY(12px); }

.wc-img-modal-close {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: var(--fs-2);
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.wc-img-modal-close:active { background: rgba(255, 255, 255, .22); transform: scale(.96); }

@keyframes wc-img-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }


/* ════════════════════════ 3. 布局与无障碍 ════════════════════════ */

/* 页面容器：414（Plus / Max）等宽屏防内容拉伸，居中且不超过 480px */
.wc-page { width: 100%; max-width: var(--page-max); margin: 0 auto; }

/* 数字类文本（计时 / 计数 / 坐标）等宽显示，防止跳字抖动 */
.wc-nums { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* 屏幕阅读器专用文本：视觉隐藏但仍可被读取 */
.wc-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

/* 尊重系统「减少动态效果」设置：关闭入场与旋转动画，不影响任何布局与状态 */
@media (prefers-reduced-motion: reduce) {
  .wc-dialog-mask,
  .wc-dialog-box,
  .wc-dialog .app-dialog-mask,
  .wc-dialog .app-dialog-box,
  .wc-sheet-mask,
  .wc-sheet-panel,
  .wc-btn.is-loading::after { animation: none; }
  .wc-header-back,
  .wc-card,
  .wc-btn,
  .wc-field-input,
  .wc-step-dot { transition: none; }
}