/* ============================================================
   门店促销员工单系统 · H5 端样式 v2
   华润三九 OTC 零售终端执行平台
   ------------------------------------------------------------
   设计原则
     1. 移动优先：320px 起步写基准样式，向上用 min-width 渐进增强
     2. 令牌优先：颜色/字号/间距/圆角/阴影/动效全部走 CSS 变量
     3. 无障碍：正文 ≥4.5:1，图形边界 ≥3:1，触摸目标 ≥44px，
                键盘焦点可见，尊重 prefers-reduced-motion
     4. 零外链：不引任何 CDN 字体/图标（微信 X5 内核下会白屏）
   与 v1 的类名完全兼容，可直接替换 style.css
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root {
  /* ---- 1.1 主色 · 蓝（品牌/交互） ----
     600 为原始主色，保留视觉延续性；700 用于文字/描边（AA 达标） */
  --c-primary-50:  #F0F6FF;
  --c-primary-100: #E0EBFE;
  --c-primary-200: #C7DBFC;
  --c-primary-300: #A3C2F8;
  --c-primary-400: #6D9BF0;
  --c-primary-500: #3B7BE0;
  --c-primary-600: #2B6DE5;   /* 填充色：按钮底/渐变  (白字 4.75:1) */
  --c-primary-700: #1E5FC9;   /* 文字色：链接/描边/图标 (白底 5.94:1) */
  --c-primary-800: #164BAD;   /* 按下态 */
  --c-primary-900: #133C8A;   /* 深色强调文字 */

  /* ---- 1.2 中性 · 冷灰 ----
     500 起可用于正文级小字；400 仅装饰/禁用；300 仅分隔线 */
  --c-ink-900: #101828;   /* 17.75:1 标题 */
  --c-ink-800: #1D2939;   /* 14.70:1 */
  --c-ink-700: #344054;   /* 10.46:1 正文 */
  --c-ink-600: #475467;   /*  7.69:1 次要正文 */
  --c-ink-500: #667085;   /*  4.97:1 辅助文字/占位符 */
  --c-ink-400: #86909C;   /*  3.24:1 输入边框/装饰图标/禁用 */
  --c-ink-300: #D0D5DD;   /*  1.47:1 仅分隔线、卡片描边（纯装饰） */
  --c-ink-200: #E4E7EC;
  --c-ink-100: #F2F4F7;
  --c-ink-50:  #F9FAFB;

  /* ---- 1.3 语义色：700 用于文字，600 用于填充，50 用于底色 ---- */
  --c-success-700: #15803D;  --c-success-600: #16A34A;  --c-success-50: #F0FDF4;
  --c-warning-700: #B45309;  --c-warning-600: #F59E0B;  --c-warning-50: #FFFBEB;
  --c-danger-700:  #B42318;  --c-danger-600:  #E5484D;  --c-danger-50:  #FEF3F2;
  --c-violet-700:  #6D28D9;  --c-violet-50:  #F5F3FF;
  --c-teal-700:    #0F766E;  --c-teal-50:    #F0FDFA;

  /* ---- 1.4 界面底色 ---- */
  --bg: #F5F7FB;
  --card: #FFFFFF;

  /* ---- 1.5 字体刻度（11 级，替代原 22 种散值） ----
     中文界面基准 14px；行高按用途分级 */
  --fs-micro:    10px;  /* 仅角标/水印，禁止承载关键信息 */
  --fs-note:     11px;  /* 徽章、时间戳 */
  --fs-caption:  12px;  /* 辅助说明、说明小字 */
  --fs-sm:       13px;  /* 紧凑正文、列表次要信息 */
  --fs-base:     14px;  /* 正文基准 */
  --fs-lg:       15px;  /* 卡片标题、门店名 */
  --fs-title-sm: 17px;  /* 页头标题 */
  --fs-title:    20px;  /* 区块大标题、统计数字 */
  --fs-title-lg: 24px;  /* 实时时钟 */
  --fs-display:  30px;  /* 空态图标 */
  --fs-hero:     38px;  /* 超大图形符号 */

  --lh-tight: 1.25;  /* 标题 */
  --lh-snug:  1.4;
  --lh-base:  1.6;   /* 正文 */
  --lh-loose: 1.75;  /* 长段落 */

  /* ---- 1.6 间距（8px 基线，4px 半档） ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;  --sp-12: 48px;

  /* ---- 1.7 圆角 ---- */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 10px;  --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-3xl: 24px; --r-full: 999px;

  /* ---- 1.8 阴影（冷蓝调，与原视觉一致） ---- */
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-2: 0 2px 10px rgba(31, 55, 110, .07);
  --sh-3: 0 6px 18px rgba(31, 55, 110, .13);
  --sh-up: 0 -10px 44px rgba(15, 35, 90, .20);
  --sh-brand: 0 4px 14px rgba(43, 109, 229, .28);

  /* ---- 1.9 动效 ---- */
  --dur-fast: .15s;  --dur: .22s;  --dur-slow: .32s;
  --ease-out: cubic-bezier(.32, .72, .34, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --press: scale(.96);   /* 统一按压反馈 */

  /* ---- 1.10 布局 ---- */
  --shell-max: 1080px;   /* 宽版容器 */
  --app-max: 480px;      /* 窄版容器（表单流） */
  --tabbar-h: 58px;      /* 底部导航高度 */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ---- 1.11 字体族（全部系统字体，零外链） ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "HarmonyOS Sans SC", "MiSans", "Source Han Sans SC",
               "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* ============================================================
     1.12 v1 变量别名（向后兼容，外部代码引用旧名不受影响）
     注意：--line 在 v1 被 var() 引用却未定义（4 处边框静默失效），
           此处补上定义
     ============================================================ */
  --primary:      var(--c-primary-600);
  --primary-deep: var(--c-primary-800);
  --primary-soft: var(--c-primary-100);
  --green:        var(--c-success-700);
  --green-soft:   var(--c-success-50);
  --red:          var(--c-danger-700);
  --red-soft:     var(--c-danger-50);
  --orange:       var(--c-warning-700);
  --orange-soft:  var(--c-warning-50);
  --gray:         var(--c-ink-500);
  --gray-soft:    var(--c-ink-100);
  --text:         var(--c-ink-900);
  --text-sub:     var(--c-ink-600);
  --line:         var(--c-ink-300);   /* ★ v1 缺失，导致 4 处边框失效 */
  --line-soft:    var(--c-ink-200);
  --radius:       14px;
  --radius-lg:    16px;
  --shadow:       var(--sh-2);
  --shadow-hover: var(--sh-3);
}


/* ============================================================
   2. Reset & 基础
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;       /* 横屏不放大字号 */
  text-size-adjust: 100%;
}

html, body {
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink-700);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  min-height: 100dvh;                   /* 移动端浏览器地址栏收缩不跳动 */
  -webkit-tap-highlight-color: transparent;   /* 去掉安卓点击灰色闪块 */
  overscroll-behavior-y: none;
}

/* 数字统一等宽，表格/统计列不抖动 */
.stat-box .sv, .geo-clock, .b-row .b-nums, .tk-no, .at-time,
.trail-item .tt, .num-input input, .mini-order .mo-line2 { font-variant-numeric: tabular-nums; }

/* 标题字重/行高统一 */
h1, h2, h3, h4 { font-weight: 700; line-height: var(--lh-tight); color: var(--c-ink-900); }
h1 { font-size: var(--fs-title); }
h2 { font-size: var(--fs-title-sm); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-base); }
a { color: var(--c-primary-700); }

button, input, select, textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }

/* 长英文/编号不撑破容器 */
.tk-no, .mono, .identity-chip, .region-chip, .ft-name,
.b-row .b-name, .learn-name, .info-row .v { overflow-wrap: anywhere; }


/* ============================================================
   3. 无障碍基础
   ============================================================ */

/* 键盘焦点可见（鼠标点击不出现描边，键盘 Tab 才出现） */
:focus-visible {
  outline: 2px solid var(--c-primary-700);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* 表单控件已有 box-shadow 焦点态，避免双重描边 */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* 屏幕阅读器专用文本 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 尊重系统「减弱动态效果」 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .card.clickable:hover, .btn-card:hover, .fab:hover { transform: none; }
}

/* 高对比度 / 强制颜色模式兜底 */
@media (forced-colors: active) {
  .badge, .chip, .btn, .btn-card { border: 1px solid currentColor; }
}


/* ============================================================
   4. 顶部栏
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(120deg, var(--c-primary-800), var(--c-primary-600) 55%, var(--c-primary-500));
  color: #fff;
  box-shadow: 0 2px 12px rgba(30, 81, 184, .30);
}
.topbar-inner {
  max-width: var(--shell-max); margin: 0 auto;
  padding: 10px var(--sp-4);
  padding-top: calc(10px + var(--safe-t));
  padding-left: calc(var(--sp-4) + var(--safe-l));
  padding-right: calc(var(--sp-4) + var(--safe-r));
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.brand-logo {
  width: 38px; height: 38px; border-radius: var(--r-md); flex: none;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .35);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-title-sm); font-weight: 700;
}
.brand-text { min-width: 0; }
.brand-text strong { display: block; font-size: var(--fs-lg); letter-spacing: .3px; line-height: 1.3; }
.brand-text small { display: block; opacity: .88; font-size: var(--fs-note); line-height: 1.4; }

.topbar-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.identity-chip {
  display: none; align-items: center; gap: var(--sp-1);
  min-height: 30px; padding: 4px var(--sp-3);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .36);
  color: #fff; border-radius: var(--r-full);
  font-size: var(--fs-note); cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  max-width: 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.identity-chip.show { display: inline-flex; }
.identity-chip:hover { background: rgba(255, 255, 255, .28); }
.identity-chip:active { transform: var(--press); }

.region-chip {
  display: none; align-items: center; gap: var(--sp-1);
  min-height: 30px; padding: 4px var(--sp-3);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .36);
  color: #fff; border-radius: var(--r-full);
  font-size: var(--fs-note); cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast);
  max-width: 122px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.region-chip.show { display: inline-flex; }
.region-chip:hover { background: rgba(255, 255, 255, .28); }
.region-chip:active { transform: var(--press); }


/* ============================================================
   5. 登录 / 注册页
   ============================================================ */
.login-page {
  position: fixed; inset: 0; z-index: 300; overflow-y: auto;
  background: linear-gradient(120deg, var(--c-primary-800), var(--c-primary-600) 55%, var(--c-primary-500));
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--sp-5) var(--sp-4);
  padding-top: calc(var(--sp-5) + var(--safe-t));
  padding-bottom: calc(var(--sp-10) + var(--safe-b));
  -webkit-overflow-scrolling: touch;
}
.login-card {
  background: #fff; border-radius: var(--r-2xl);
  width: 100%; max-width: 364px;
  box-shadow: 0 18px 44px rgba(15, 35, 90, .38);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  text-align: center;
  animation: loginIn var(--dur-slow) var(--ease-out);
}
@keyframes loginIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.login-logo {
  width: 56px; height: 56px; margin: 0 auto var(--sp-3); border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-500));
  color: #fff; font-size: var(--fs-title-lg);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-brand);
}
.login-card h1 { font-size: var(--fs-title); letter-spacing: .3px; }
.login-sub { font-size: var(--fs-caption); color: var(--c-ink-600); margin: var(--sp-2) 0 var(--sp-5); line-height: var(--lh-snug); }
.login-card .form-item { text-align: left; }
.login-tip {
  color: var(--c-danger-700); font-size: var(--fs-caption); font-weight: 600;
  min-height: 18px; margin-top: var(--sp-3); line-height: var(--lh-base);
}
.login-tip:not(:empty) { padding: var(--sp-2) var(--sp-3); background: var(--c-danger-50); border-radius: var(--r-sm); }
.login-reg { text-align: center; font-size: var(--fs-sm); margin-top: var(--sp-2); }
.login-reg a { color: var(--c-primary-700); text-decoration: none; font-weight: 600; }

/* 登录提示盒（暖色警示） */
.login-hint-box {
  margin-top: var(--sp-4);
  background: var(--c-warning-50);
  border: 1.5px solid #F5C36E;
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: left;
}
.login-hint-title { font-size: var(--fs-caption); font-weight: 700; color: var(--c-warning-700); margin-bottom: var(--sp-2); }
/* v1 里 .login-hint-body 只有类名没有样式（纯包裹层），此处补上分组间距 */
.login-hint-body { display: block; }
.login-hint-row { font-size: var(--fs-note); color: #6A4500; line-height: var(--lh-loose); display: flex; gap: var(--sp-2); }
.login-hint-row + .login-hint-row { margin-top: var(--sp-1); }
.login-hint-key {
  flex-shrink: 0;
  background: var(--c-warning-700); color: #FFF;
  border-radius: var(--r-xs); padding: 1px var(--sp-2);
  font-size: var(--fs-micro); font-weight: 700;
  height: 18px; line-height: 16px; align-self: flex-start; margin-top: 2px;
}
.login-hint-val { flex: 1; min-width: 0; }
.login-hint-val code {
  background: #FFE9B8; color: #8A5200; padding: 1px 5px; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-note); font-weight: 700;
  overflow-wrap: anywhere;
}
.login-hint-val b { color: var(--c-warning-700); }
.login-accounts {
  margin-top: var(--sp-4); font-size: var(--fs-note); color: var(--c-ink-600);
  text-align: left; line-height: var(--lh-loose);
  background: var(--c-ink-100); border-radius: var(--r-md); padding: var(--sp-3);
}
.login-accounts b { color: var(--c-ink-900); }

.login-dev-toggle {
  display: block; width: 100%; margin-top: var(--sp-4);
  min-height: 44px;
  background: transparent; border: 1px dashed var(--c-primary-200); border-radius: var(--r-md);
  color: var(--c-primary-700); font-size: var(--fs-caption); padding: var(--sp-3);
  cursor: pointer; text-align: left;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.login-dev-toggle:hover { background: var(--c-primary-50); border-color: var(--c-primary-700); }
.login-dev-toggle:active { transform: scale(.985); }
.login-dev-toggle span { font-weight: 700; margin-right: var(--sp-1); }

.login-dev-panel {
  margin-top: var(--sp-3); padding: var(--sp-3);
  background: var(--c-primary-50); border: 1px solid var(--c-primary-200); border-radius: var(--r-md);
  max-height: min(520px, 58vh); overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
}
.login-dev-title { font-size: var(--fs-note); color: var(--c-ink-600); margin-bottom: var(--sp-3); line-height: var(--lh-base); }
.login-dev-title code {
  background: var(--c-primary-100); color: var(--c-primary-700);
  padding: 1px var(--sp-2); border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--fs-note);
}
.login-dev-section { margin-bottom: var(--sp-3); }
.login-dev-section:last-child { margin-bottom: 0; }
.login-dev-h {
  font-size: var(--fs-note); font-weight: 700; color: var(--c-primary-800);
  margin-bottom: var(--sp-2); padding-bottom: var(--sp-1);
  border-bottom: 1px dashed var(--c-primary-200);
}
.login-dev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.login-dev-grid button {
  background: #fff; border: 1.5px solid var(--c-ink-200); border-radius: var(--r-sm);
  min-height: 40px; padding: var(--sp-2); font-size: var(--fs-caption); color: var(--c-ink-700);
  cursor: pointer; transition: all var(--dur-fast); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.login-dev-grid button:hover { border-color: var(--c-primary-700); background: var(--c-primary-50); }
.login-dev-grid button:active { transform: var(--press); }
.login-dev-grid button[onclick*="chenjunda"] {
  background: #FFF5E6; border-color: var(--c-warning-600); font-weight: 700; color: var(--c-warning-700);
}
.login-dev-hint { margin-top: var(--sp-2); font-size: var(--fs-note); color: var(--c-ink-500); line-height: var(--lh-base); }


/* ============================================================
   6. 启动加载层
   ============================================================ */
.boot-loading {
  position: fixed; inset: 0; z-index: 400; background: var(--bg);
  display: flex; flex-direction: column; gap: var(--sp-4);
  align-items: center; justify-content: center;
  color: var(--c-ink-600); font-size: var(--fs-base);
  text-align: center; padding: var(--sp-6);
}
.boot-spin {
  width: 34px; height: 34px; border-radius: var(--r-full);
  border: 3px solid var(--c-ink-200); border-top-color: var(--c-primary-600);
  animation: bootSpin .8s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }


/* ============================================================
   7. 页面容器
   ============================================================ */
.page {
  max-width: var(--shell-max); margin: 0 auto;
  padding: var(--sp-4) var(--sp-3) 90px;
  padding-left: calc(var(--sp-3) + var(--safe-l));
  padding-right: calc(var(--sp-3) + var(--safe-r));
}
.page.narrow { max-width: var(--app-max); }
.page.has-fab { padding-bottom: 132px; }


/* ============================================================
   8. 卡片
   ============================================================ */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--sh-2); padding: var(--sp-4); margin-bottom: var(--sp-3);
  transition: box-shadow var(--dur), transform var(--dur);
}
.card.clickable { cursor: pointer; }
.card.clickable:hover { box-shadow: var(--sh-3); transform: translateY(-2px); }
.card-title { font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.card-title .sub { font-weight: 400; font-size: var(--fs-caption); color: var(--c-ink-600); }
.sec-title { font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-900); }

/* 工单卡片 */
.ticket-card { position: relative; overflow: hidden; }
.ticket-card .tk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.tk-store { font-size: var(--fs-lg); font-weight: 700; }
.tk-no { font-size: var(--fs-note); color: var(--c-ink-500); margin-top: 2px; font-family: var(--font-mono); }
.tk-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-caption); color: var(--c-ink-600); }
.tk-meta b { color: var(--c-ink-900); font-weight: 600; }
.tk-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.tk-products { font-size: var(--fs-caption); color: var(--c-ink-600); background: var(--c-ink-100); border-radius: var(--r-sm); padding: var(--sp-1) var(--sp-2); }
/* 待我审核：左侧橙色标记 */
.tk-mine { border-left: 3px solid var(--c-warning-700); }


/* ============================================================
   9. 状态徽章（颜色 + 文字双通道，不依赖颜色单独传达信息）
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-note); font-weight: 600; line-height: 1.4;
  padding: 3px var(--sp-2); border-radius: var(--r-full); white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.pending   { background: var(--c-ink-100);     color: var(--c-ink-600); }      /* 6.98:1 */
.badge.running   { background: var(--c-primary-100); color: var(--c-primary-700); }  /* 4.95:1 */
.badge.reviewing { background: var(--c-warning-50);  color: var(--c-warning-700); }  /* 4.84:1 */
.badge.passed    { background: var(--c-success-50);  color: var(--c-success-700); }  /* 4.79:1 */
.badge.rejected  { background: var(--c-danger-50);   color: var(--c-danger-700); }   /* 6.05:1 */
.badge.archived  { background: var(--c-ink-100);     color: var(--c-ink-500); }
.badge.role-m    { background: var(--c-violet-50);   color: var(--c-violet-700); }   /* 6.48:1 */
.badge.role-p    { background: var(--c-primary-100); color: var(--c-primary-700); }

/* 9 步进度点 */
.steps-dots { display: flex; align-items: center; gap: 3px; }
.steps-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-ink-200); transition: all var(--dur); }
.steps-dots i.done { background: var(--c-success-600); }
.steps-dots i.current { background: var(--c-warning-600); box-shadow: 0 0 0 3px var(--c-warning-50); }


/* ============================================================
   10. 按钮体系
   ============================================================ */
.btn {
  border: none; border-radius: var(--r-md);
  min-height: 44px; padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-base); font-weight: 600; line-height: 1.4;
  cursor: pointer;
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  background: var(--c-primary-600); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn:hover { background: var(--c-primary-800); }
.btn:active { transform: var(--press); }
.btn.ghost { background: #fff; color: var(--c-primary-700); border: 1.5px solid var(--c-primary-700); }
.btn.ghost:hover { background: var(--c-primary-50); }
.btn.gray { background: var(--c-ink-100); color: var(--c-ink-600); }
.btn.gray:hover { background: var(--c-ink-200); }
.btn.block { width: 100%; padding: var(--sp-3); font-size: var(--fs-lg); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:disabled:active { transform: none; }
.btn-block { display: block; width: 100%; margin-top: var(--sp-4); text-align: center; }

/* 卡片式大按钮 */
.btn-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  width: 100%; min-height: 62px; text-align: left;
  border: 1.5px solid var(--c-ink-200); background: #fff; border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-4); cursor: pointer;
  transition: all var(--dur); box-shadow: var(--sh-2);
}
.btn-card .bc-ico { font-size: var(--fs-title); line-height: 1; }
.btn-card .bc-main { font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink-900); }
.btn-card .bc-sub { font-size: var(--fs-caption); color: var(--c-ink-600); line-height: var(--lh-snug); }
.btn-card:hover { border-color: var(--c-primary-700); box-shadow: var(--sh-3); transform: translateY(-1px); }
.btn-card:active { transform: scale(.97); box-shadow: var(--sh-1); }
.btn-card.primary { background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-500)); border-color: transparent; }
.btn-card.primary .bc-main, .btn-card.primary .bc-sub { color: #fff; }
.btn-card.success { background: linear-gradient(135deg, var(--c-success-600), #34B96A); border-color: transparent; }
.btn-card.success .bc-main, .btn-card.success .bc-sub { color: #fff; }
.btn-card.danger { background: linear-gradient(135deg, var(--c-danger-600), #F06E72); border-color: transparent; }
.btn-card.danger .bc-main, .btn-card.danger .bc-sub { color: #fff; }
.btn-card.warning { background: linear-gradient(135deg, var(--c-warning-600), #F7B033); border-color: transparent; }
.btn-card.warning .bc-main, .btn-card.warning .bc-sub { color: #fff; }
.btn-card:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

/* 按钮网格：320px 也能落两列，宽屏自动铺开 */
.btn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.btn-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }


/* ============================================================
   11. 标签页 / 分段 / 筛选碎片
   ============================================================ */
.tabs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); margin-bottom: var(--sp-3); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: none; background: #fff; border-radius: var(--r-full);
  min-height: 36px; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-ink-600); cursor: pointer;
  transition: all var(--dur); box-shadow: var(--sh-1); white-space: nowrap;
}
.tab.active { background: var(--c-primary-600); color: #fff; font-weight: 600; }
.tab .cnt { font-size: var(--fs-note); opacity: .85; margin-left: 3px; }

.seg { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); margin-bottom: var(--sp-3); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-btn {
  border: 1.5px solid var(--c-ink-200); background: #fff; border-radius: var(--r-full);
  min-height: 36px; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); color: var(--c-ink-600); cursor: pointer; white-space: nowrap;
  transition: all var(--dur);
}
.seg-btn:hover { border-color: var(--c-primary-700); }
.seg-btn.active { background: var(--c-primary-600); color: #fff; border-color: var(--c-primary-600); font-weight: 600; }

.chip-group { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  border: 1.5px solid var(--c-ink-200); background: #fff; border-radius: var(--r-full);
  min-height: 38px; padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm); cursor: pointer;
  transition: all var(--dur); color: var(--c-ink-600);
}
.chip:hover { border-color: var(--c-primary-700); }
.chip.on { background: var(--c-primary-600); color: #fff; border-color: var(--c-primary-600); font-weight: 600; }


/* ============================================================
   12. 页头（返回 + 标题）
   ============================================================ */
.page-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.back-btn {
  width: 44px; height: 44px; flex: none;
  border-radius: var(--r-md); border: none; background: #fff;
  box-shadow: var(--sh-2); cursor: pointer;
  font-size: var(--fs-title-sm); color: var(--c-ink-700);
  transition: all var(--dur-fast);
  display: flex; align-items: center; justify-content: center;
}
.back-btn:hover { box-shadow: var(--sh-3); }
.back-btn:active { transform: scale(.92); }
.page-head h2 { font-size: var(--fs-title-sm); }
.page-head .ph-sub { font-size: var(--fs-caption); color: var(--c-ink-600); margin-top: 2px; }


/* ============================================================
   13. 执行页步骤进度
   ============================================================ */
.exec-progress {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-bottom: var(--sp-3); padding: var(--sp-3) var(--sp-3);
  background: #fff; border-radius: var(--radius); box-shadow: var(--sh-2);
}
.exec-progress .ep-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); min-width: 0; }
.exec-progress .ep-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); font-weight: 700;
  background: var(--c-ink-100); color: var(--c-ink-500);
  transition: all var(--dur);
}
.exec-progress .ep-item.done .ep-dot { background: var(--c-success-600); color: #fff; }
.exec-progress .ep-item.current .ep-dot { background: var(--c-primary-600); color: #fff; box-shadow: 0 0 0 4px var(--c-primary-100); }
.exec-progress .ep-label { font-size: var(--fs-micro); color: var(--c-ink-600); white-space: nowrap; }
.exec-progress .ep-item.current .ep-label { color: var(--c-primary-700); font-weight: 700; }
.exec-progress .ep-arrow { color: var(--c-ink-300); font-size: var(--fs-micro); margin-bottom: 16px; flex: none; }

/* 执行页底部固定操作条 */
.exec-fab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(16, 24, 40, .06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.exec-fab-bar .btn { flex: 1; }
.exec-fab-bar .btn.outline {
  background: #fff; color: var(--c-primary-700);
  border: 1.5px solid var(--c-primary-700); font-weight: 600;
}
.exec-fab-bar .btn.outline:active { background: var(--c-primary-50); }
.exec-fab-bar .btn.primary {
  background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-500));
  color: #fff; border: none; font-weight: 700;
}


/* ============================================================
   14. 信息行 / 审计时间轴 / 流转记录
   ============================================================ */
.info-row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-sm); border-bottom: 1px dashed var(--line-soft); }
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--c-ink-600); flex: none; }
.info-row .v { font-weight: 600; text-align: right; word-break: break-all; }
.info-row .v.ok { color: var(--c-success-700); }
.info-row .v.bad { color: var(--c-danger-700); }

.audit-trail { font-size: var(--fs-caption); color: var(--c-ink-600); }
.audit-trail .at-item { display: flex; gap: var(--sp-2); padding: var(--sp-1) 0; }
.audit-trail .at-time { flex: none; color: var(--c-ink-500); font-family: var(--font-mono); font-size: var(--fs-note); width: 128px; }

.trail { border-left: 2px solid var(--c-ink-200); margin-left: var(--sp-1); padding-left: var(--sp-4); }
.trail-item { position: relative; padding-bottom: var(--sp-3); }
.trail-item::before {
  content: ""; position: absolute; left: -20.5px; top: 4px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--c-primary-600); box-shadow: 0 0 0 3px var(--c-primary-100);
}
.trail-item .tt { font-size: var(--fs-note); color: var(--c-ink-500); font-family: var(--font-mono); }
.trail-item .td { font-size: var(--fs-sm); margin-top: 2px; }
.trail-item .td b { font-weight: 600; }

/* 流转记录 */
.ft-head { font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); background: var(--c-warning-50); color: var(--c-warning-700); margin: var(--sp-2) 0 var(--sp-3); }
.ft-head.ok { background: var(--c-success-50); color: var(--c-success-700); }
.ft-head.bad { background: var(--c-danger-50); color: var(--c-danger-700); }
.ft-row { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--line-soft); }
.ft-row:last-child { border-bottom: none; }
.ft-step {
  flex: none; width: 40px; font-size: var(--fs-note); font-weight: 700;
  color: var(--c-ink-500); background: var(--c-ink-100); border-radius: var(--r-xs);
  padding: 3px 0; text-align: center; margin-top: 1px;
}
.ft-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.ft-name { font-size: var(--fs-sm); font-weight: 600; }
.ft-role { font-size: var(--fs-note); color: var(--c-ink-500); }
.ft-state { flex-basis: 100%; font-size: var(--fs-caption); line-height: var(--lh-snug); }
.ft-ok .ft-state { color: var(--c-success-700); }
.ft-bad .ft-state { color: var(--c-danger-700); }
.ft-cur .ft-step { background: var(--c-primary-600); color: #fff; }
.ft-cur .ft-state { color: var(--c-warning-700); font-weight: 600; }
.ft-wait .ft-state { color: var(--c-ink-500); }
/* 跳过的审核步骤仍属需阅读的信息，用 ink-500（4.97:1）+ 斜体做弱化，
   不用 ink-400（3.24:1 不满足正文对比度） */
.ft-skip .ft-state, .ft-skip .ft-name, .ft-skip .ft-role { color: var(--c-ink-500); font-style: italic; }
.ft-cc .ft-step { background: var(--c-primary-100); color: var(--c-primary-700); }
.ft-cc .ft-state { color: var(--c-ink-500); }

/* 传阅记录 */
.cc-row { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; font-size: var(--fs-sm); border-bottom: 1px dashed var(--line-soft); }
.cc-row:last-child { border-bottom: none; }
/* 未读圆点用 ink-400（3.24:1，图形元素 ≥3:1），不再是几乎看不见的 ink-300 */
.cc-row .cc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-ink-400); flex: none; }
.cc-row.read .cc-dot { background: var(--c-success-600); }
.cc-row .cc-name { font-weight: 600; }
.cc-row .cc-role { font-size: var(--fs-note); color: var(--c-ink-500); }
.cc-row .cc-state { margin-left: auto; font-size: var(--fs-note); color: var(--c-ink-500); }
.cc-row.read .cc-state { color: var(--c-success-700); }


/* ============================================================
   15. 定位 / 实时时钟
   ============================================================ */
.geo-card { display: flex; gap: var(--sp-3); align-items: center; }
.geo-pin { width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--c-primary-100); display: flex; align-items: center; justify-content: center; font-size: var(--fs-title); flex: none; }
.geo-card .geo-addr { font-size: var(--fs-sm); font-weight: 600; }
.geo-card .geo-dist { font-size: var(--fs-caption); margin-top: 3px; }
.geo-dist.in { color: var(--c-success-700); }
.geo-dist.out { color: var(--c-danger-700); font-weight: 700; }

.geo-clock-wrap {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3); margin-bottom: var(--sp-3);
  border-radius: var(--r-lg); background: var(--c-primary-50);
  border: 1px solid var(--c-primary-100);
}
.geo-clock { font-size: var(--fs-title-lg); font-weight: 800; letter-spacing: 1px; color: var(--c-ink-900); }
.geo-clock.ok { color: var(--c-success-700); }
.geo-clock.warn { color: var(--c-warning-700); }
.geo-clock.bad { color: var(--c-danger-700); }
.geo-clock-sub { font-size: var(--fs-note); color: var(--c-ink-500); }


/* ============================================================
   16. 照片墙 / 文件 / 小票
   ============================================================ */
.photo-wall { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.photo-box {
  aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; position: relative;
  background: linear-gradient(150deg, var(--c-primary-200), var(--c-primary-100));
  border: 1.5px solid var(--c-primary-100);
  display: flex; align-items: center; justify-content: center;
}
.photo-box .ph-ico { font-size: var(--fs-display); opacity: .55; }
.photo-box .ph-label {
  position: absolute; bottom: var(--sp-1); left: var(--sp-1); right: var(--sp-1);
  font-size: var(--fs-micro); color: var(--c-primary-900);
  font-weight: 600; text-align: center; pointer-events: none;
}
.photo-box.watermark::after {
  content: attr(data-wm); position: absolute; left: var(--sp-2); top: var(--sp-2); right: var(--sp-2);
  font-size: var(--fs-micro); line-height: var(--lh-base); color: #fff;
  text-shadow: 0 1px 3px rgba(16, 24, 40, .85);
  white-space: pre-line; pointer-events: none; font-weight: 600;
}
.photo-box.real { background: var(--c-ink-100); }
.photo-box.real img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-box.real .ph-label {
  z-index: 2; left: var(--sp-1); right: auto; bottom: var(--sp-1);
  background: rgba(16, 24, 40, .65); color: #fff;
  border-radius: var(--r-xs); padding: 2px var(--sp-2);
}
.photo-box.real img:not([src]) { opacity: 0; }
.photo-box.real.load-fail::before {
  content: "照片加载失败"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-caption); color: var(--c-danger-700);
}
.photo-add {
  aspect-ratio: 4 / 3; border-radius: var(--r-lg);
  border: 2px dashed var(--c-primary-200); background: var(--c-primary-50);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-1);
  cursor: pointer; color: var(--c-primary-700); font-size: var(--fs-caption);
  transition: all var(--dur);
}
.photo-add:hover { background: var(--c-primary-100); border-color: var(--c-primary-700); }
.photo-add:active { transform: var(--press); }
.photo-add .pa-ico { font-size: var(--fs-title-lg); }
.photo-count { font-size: var(--fs-caption); color: var(--c-ink-600); margin-top: var(--sp-2); }
.photo-count.ok { color: var(--c-success-700); font-weight: 600; }

.file-input {
  width: 100%; min-height: 48px;
  font-size: var(--fs-sm); color: var(--c-ink-600);
  border: 1.5px dashed var(--c-primary-200); border-radius: var(--r-lg);
  background: var(--c-primary-50); padding: var(--sp-3);
  outline: none; transition: all var(--dur);
}
.file-input:active, .file-input:focus { border-color: var(--c-primary-700); background: #fff; }

/* 销量表单行 */
.sale-item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px dashed var(--line-soft); }
.sale-item:last-child { border-bottom: none; }
.sale-item .si-name { font-size: var(--fs-sm); font-weight: 600; }
.sale-item .si-spec { font-size: var(--fs-note); color: var(--c-ink-500); margin-top: 2px; }

/* 数字步进器 */
.num-input {
  display: flex; align-items: center;
  border: 1.5px solid var(--c-ink-400); border-radius: var(--r-md);
  overflow: hidden; background: #fff;
  transition: border-color var(--dur);
}
.num-input:focus-within { border-color: var(--c-primary-700); box-shadow: 0 0 0 3px var(--c-primary-100); }
.num-input button {
  width: 44px; height: 44px; border: none;
  background: var(--c-ink-100); font-size: var(--fs-title-lg); cursor: pointer;
  color: var(--c-ink-700); line-height: 1;
  transition: background var(--dur-fast);
}
.num-input button:hover { background: var(--c-ink-200); }
.num-input button:active { background: var(--c-primary-100); }
.num-input input {
  width: 62px; height: 44px; border: none; text-align: center;
  font-size: 16px; font-weight: 700; outline: none;
  background: transparent; color: var(--c-ink-900);
  -moz-appearance: textfield;
}
.num-input input::-webkit-outer-spin-button, .num-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.num-input input::placeholder { color: var(--c-ink-500); font-weight: 400; font-size: var(--fs-caption); }
.num-input input:focus { background: var(--c-primary-50); }

/* 文本域 */
textarea.ta {
  width: 100%; min-height: 112px;
  border: 1.5px solid var(--c-ink-400); border-radius: var(--r-lg);
  padding: var(--sp-3); font-size: 16px; resize: vertical; outline: none;
  transition: border var(--dur), box-shadow var(--dur);
  color: var(--c-ink-900); background: #fff; line-height: var(--lh-base);
}
textarea.ta::placeholder { color: var(--c-ink-500); }
textarea.ta:focus { border-color: var(--c-primary-700); box-shadow: 0 0 0 3px var(--c-primary-100); }
.ta-tip { font-size: var(--fs-caption); margin-top: var(--sp-2); color: var(--c-ink-500); line-height: var(--lh-snug); }
.ta-tip.ok { color: var(--c-success-700); }


/* ============================================================
   17. 通用表单
   ============================================================ */
.form-item { margin-bottom: var(--sp-3); }
.form-item label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-2); color: var(--c-ink-700); }
.form-item .req { color: var(--c-danger-700); margin-left: 2px; }
.form-item input[type="text"],
.form-item input[type="password"],
.form-item input[type="tel"],
.form-item input[type="number"],
.form-item input[type="date"],
.form-item input[type="time"],
.form-item select {
  width: 100%; min-height: 46px;
  border: 1.5px solid var(--c-ink-400); border-radius: var(--r-lg);
  padding: 0 var(--sp-3); font-size: 16px;
  outline: none; background: #fff; color: var(--c-ink-900);
  transition: border var(--dur), box-shadow var(--dur);
}
.form-item input::placeholder, .form-item select::placeholder { color: var(--c-ink-500); }
.form-item input:focus, .form-item select:focus {
  border-color: var(--c-primary-700);
  box-shadow: 0 0 0 3px var(--c-primary-100);
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); }
/* 网格子项防撑破（达哥 2026-09-16 反馈：自主填报页所属连锁/门店搜索超框）：
   select 的选中项文案很长时，min-width:auto 会以最长 option 的 min-content
   撑破栅格轨道导致横向溢出；width:100% 拦不住，必须显式归零。 */
.form-row > .form-item { min-width: 0; }
/* 后代级：活动时段行的时间输入包在 JS 内联的 flex 容器里（非 .form-item 直接子元素），
   flex 子项 min-width:auto 同样不许收缩到 time 输入框最小内容宽度以下 */
.form-item input, .form-item select { min-width: 0; }

/* 自主填报页微调：门店数提示独立成行，落在「所属连锁/门店搜索」之下、
   「活动门店」下拉之上，不再挤在 label 行内换行显乱 */
#selfStoreCount {
  display: block;
  font-size: var(--fs-note); font-weight: 400;
  color: var(--c-ink-500); line-height: 1.5;
  margin: 2px 0 4px;
}

/* 全局下拉统一外观：去掉原生箭头，自绘 chevron */
select {
  -webkit-appearance: none; appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  background-size: 14px;
  padding-right: 36px;
  cursor: pointer;
}
select:focus { outline: none; }


/* ============================================================
   18. 地域级联选择
   ============================================================ */
.rp-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rp-tab {
  flex: 1; min-width: 0; min-height: 52px;
  border: 1.5px solid var(--c-ink-200); background: var(--c-primary-50);
  border-radius: var(--r-xl); padding: var(--sp-2) var(--sp-3);
  text-align: left; cursor: pointer;
  transition: border-color var(--dur), background var(--dur), box-shadow var(--dur), transform var(--dur-fast);
}
.rp-tab .rt-k { display: block; font-size: var(--fs-note); color: var(--c-ink-500); font-weight: 600; letter-spacing: .3px; margin-bottom: 2px; }
.rp-tab .rt-v { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--c-ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-tab.active { border-color: var(--c-primary-700); background: var(--c-primary-100); box-shadow: 0 3px 12px rgba(30, 95, 201, .14); }
.rp-tab.active .rt-k { color: var(--c-primary-700); }
.rp-tab.active .rt-v { color: var(--c-primary-700); }
.rp-tab:active:not(:disabled) { transform: scale(.97); }
.rp-tab:disabled { opacity: .5; cursor: not-allowed; }
.rp-count { font-size: var(--fs-note); color: var(--c-ink-500); margin: 0 2px var(--sp-2); }
.rp-list {
  max-height: 46vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  border: 1px solid var(--c-ink-200); border-radius: var(--radius);
  padding: var(--sp-1); background: #fff;
  animation: rpFade var(--dur) var(--ease-out);
}
@keyframes rpFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rp-item {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%; min-height: 46px;
  border: none; background: none;
  padding: var(--sp-3); border-radius: var(--r-md);
  font-size: var(--fs-base); color: var(--c-ink-700);
  cursor: pointer; transition: background var(--dur-fast), transform var(--dur-fast);
  text-align: left;
}
.rp-item:hover { background: var(--c-primary-50); }
.rp-item:active { background: var(--c-primary-100); transform: scale(.985); }
.rp-item.on { color: var(--c-primary-700); font-weight: 700; background: var(--c-primary-100); }
.rp-item.all { color: var(--c-ink-600); font-size: var(--fs-sm); }
.rp-item.all.on { color: var(--c-primary-700); font-weight: 700; }
.rp-item .ri-check { margin-left: auto; font-weight: 800; animation: rpPop var(--dur) var(--ease-out); }
@keyframes rpPop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.rp-foot { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.rp-foot .btn { flex: 1; }
.rp-foot .btn.loc { flex: none; min-width: 96px; }


/* ============================================================
   19. 弹层
   ============================================================ */
.modal-mask {
  position: fixed; inset: 0; background: rgba(16, 24, 40, .52); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.modal-mask.show {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.modal {
  position: relative;
  background: #fff; width: 100%; max-width: var(--app-max);
  border-radius: var(--r-3xl) var(--r-3xl) 0 0;
  padding: var(--sp-6) var(--sp-4) calc(var(--sp-6) + var(--safe-b));
  max-height: 88vh;
  max-height: 88dvh;                       /* 地址栏收缩时不遮挡底部按钮 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  transform: translateY(8%) scale(.99); opacity: .4;
  transition: transform .36s var(--ease-out), opacity .26s ease;
  box-shadow: var(--sh-up);
  will-change: transform;
}
.modal-mask.show .modal { transform: none; opacity: 1; }
/* 顶部抓手段（移动端底部弹层视觉锚点） */
.modal::before {
  content: ""; position: absolute; top: var(--sp-2); left: 50%; transform: translateX(-50%);
  width: 40px; height: 4.5px; border-radius: var(--r-full); background: var(--c-ink-200);
}
.modal h2, .modal h3 { font-size: var(--fs-title-sm); margin-bottom: var(--sp-2); letter-spacing: .2px; }
.modal .m-sub { font-size: var(--fs-caption); color: var(--c-ink-600); margin-bottom: var(--sp-3); line-height: var(--lh-snug); }
.m-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.m-actions .btn { flex: 1; }
.modal .close {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 44px; height: 44px;
  border: none; border-radius: 50%;
  background: var(--c-ink-100); color: var(--c-ink-600);
  font-size: var(--fs-title-sm); line-height: 1; cursor: pointer;
  transition: all var(--dur-fast);
  display: flex; align-items: center; justify-content: center;
}
.modal .close:hover { background: var(--c-ink-200); transform: rotate(90deg); }
.modal .close:active { transform: scale(.9); }

/* 选人列表 */
.person-list { max-height: 300px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.person-item {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-3);
  border-radius: var(--r-lg); border: 1.5px solid var(--c-ink-200);
  margin-bottom: var(--sp-2); cursor: pointer; transition: all var(--dur);
}
.person-item:hover { border-color: var(--c-primary-700); }
.person-item.selected { border-color: var(--c-primary-700); background: var(--c-primary-50); }
.person-item .pi-ava {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-primary-100); color: var(--c-primary-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--fs-base); flex: none;
}
.person-item .pi-name { font-size: var(--fs-base); font-weight: 600; }
.person-item .pi-role { font-size: var(--fs-note); color: var(--c-ink-500); }

/* 产品清单弹层行 */
.prod-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--line-soft); font-size: var(--fs-sm); }
.prod-row:last-child { border-bottom: none; }
.prod-row .pr-name { flex: 1; color: var(--c-ink-700); }
.prod-row .pr-tag { white-space: nowrap; font-size: var(--fs-caption); color: var(--c-ink-600); }
.prod-row .pr-task { color: var(--c-warning-700); font-weight: 600; margin-right: var(--sp-2); }
.prod-row .pr-sold { color: var(--c-success-700); font-weight: 700; }


/* ============================================================
   20. 首页：四级优先级分组 + 视图说明
   ============================================================ */
.home-group { margin-top: 2px; }
.hg-head { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-4) 2px var(--sp-2); }
.hg-title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .2px; }
.hg-cnt { margin-left: auto; font-size: var(--fs-note); color: var(--c-ink-600); background: var(--c-ink-100); border-radius: var(--r-full); padding: 2px var(--sp-2); }
.home-cap { margin: 2px 2px var(--sp-3); font-size: var(--fs-note); color: var(--c-ink-500); line-height: var(--lh-snug); }

.home-warn {
  display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3);
  min-height: 44px;
  background: var(--c-warning-50); color: var(--c-warning-700);
  border: 1px solid #FFE2AE; border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-caption); font-weight: 600;
  cursor: pointer; transition: background var(--dur-fast);
  width: 100%; text-align: left; font-family: inherit;
}
.home-warn:hover { background: #FFF3D6; }
.home-warn .hw-go { margin-left: auto; font-weight: 700; font-size: var(--fs-lg); line-height: 1; }

/* 产品胶囊按钮 */
.tk-prod-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: 30px;
  font-size: var(--fs-caption); font-weight: 600;
  color: var(--c-primary-700);
  background: var(--c-primary-100); border: 1px solid var(--c-primary-200);
  border-radius: var(--r-full); padding: 3px var(--sp-2);
  cursor: pointer; user-select: none; transition: all var(--dur-fast);
}
.tk-prod-btn:hover { background: var(--c-primary-200); }
.tk-prod-btn:active { transform: var(--press); }


/* ============================================================
   21. 统计头
   ============================================================ */
.stat-head {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(76px, 1fr));   /* 320px 自动落 3 列，420px 落 4 列 */
  gap: var(--sp-2); margin-bottom: var(--sp-3);
}
.stat-head.six { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.stat-box {
  background: #fff; border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-1); text-align: center;
  box-shadow: var(--sh-2);
}
.stat-box .sv { font-size: var(--fs-title); font-weight: 800; line-height: 1.15; }
.stat-box .sv-sfx { font-size: var(--fs-caption); font-weight: 700; color: var(--c-ink-500); }
.stat-box .sl { font-size: var(--fs-note); color: var(--c-ink-600); margin-top: 3px; line-height: 1.3; }
.stat-box .ss { font-size: var(--fs-micro); opacity: .95; margin-top: 3px; color: var(--c-ink-600); line-height: 1.3; }
.stat-box .ss b { font-weight: 700; color: var(--c-warning-700); }
.stat-box.c-blue .sv   { color: var(--c-primary-700); }
.stat-box.c-green .sv  { color: var(--c-success-700); }
.stat-box.c-orange .sv { color: var(--c-warning-700); }
.stat-box.c-red .sv    { color: var(--c-danger-700); }
.stat-box.c-purple .sv { color: var(--c-violet-700); }
.stat-box.c-teal .sv   { color: var(--c-teal-700); }
.stat-box.clickable { cursor: pointer; transition: transform var(--dur-fast), box-shadow var(--dur-fast); }
.stat-box.clickable:active { transform: var(--press); box-shadow: 0 2px 8px rgba(30, 95, 201, .22); }
.stat-box.clickable .sl::after { content: " ›"; color: var(--c-primary-700); font-weight: 700; }


/* ============================================================
   22. 看板：维度切换 + 横向条形
   ============================================================ */
.b-row { padding: var(--sp-2) 0; border-bottom: 1px dashed var(--line-soft); }
.b-row:last-child { border-bottom: none; }
.b-row .b-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.b-row .b-name { font-size: var(--fs-sm); font-weight: 600; word-break: break-all; }
.b-row .b-nums { font-size: var(--fs-caption); color: var(--c-ink-600); white-space: nowrap; }
.b-row .b-nums b { color: var(--c-primary-700); font-size: var(--fs-base); }
.b-row .b-passed { color: var(--c-success-700); }
.b-track { height: 8px; border-radius: var(--r-full); background: var(--c-ink-100); margin-top: var(--sp-2); overflow: hidden; }
.b-bar { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--c-primary-700), var(--c-primary-500)); transition: width .4s var(--ease-out); }

/* 自定义时间段 */
.custom-range-row { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.custom-range-row input[type="date"] {
  flex: 1; min-width: 0; min-height: 44px;
  border: 1.5px solid var(--c-ink-400); border-radius: var(--r-sm);
  padding: 0 var(--sp-2); font-size: 16px; color: var(--c-ink-900); background: #fff;
}
.custom-range-row input[type="date"]:focus { border-color: var(--c-primary-700); box-shadow: 0 0 0 3px var(--c-primary-100); outline: none; }


/* ============================================================
   23. 我的：即时订单查询
   ============================================================ */
.mini-order {
  border: 1.5px solid var(--c-ink-200); border-radius: var(--r-lg);
  padding: var(--sp-3); margin-bottom: var(--sp-2);
  cursor: pointer; transition: all var(--dur);
}
.mini-order:hover { border-color: var(--c-primary-700); box-shadow: var(--sh-2); }
.mini-order:active { transform: scale(.98); }
.mini-order .mo-line1 { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.mini-order .mo-store { font-size: var(--fs-sm); font-weight: 700; }
.mini-order .mo-line2 { font-size: var(--fs-note); color: var(--c-ink-600); margin-top: var(--sp-1); }


/* ============================================================
   24. 产品学习 / 图片选品
   ============================================================ */
.prod-pic {
  position: relative; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--c-primary-50), var(--c-primary-100));
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.prod-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.prod-pic img[src] { display: block; }
/* 无图时的首字占位：用 primary-700（5.94:1），原 primary-300 仅 1.81:1 基本看不清 */
.prod-pic .prod-pic-fb { font-size: var(--fs-title); font-weight: 700; color: var(--c-primary-700); display: block; }
.prod-pic img[src] + .prod-pic-fb, .prod-pic:not(.noimg) img[src] ~ .prod-pic-fb { display: none; }
.prod-pic.noimg img { display: none; }
.prod-pic.noimg .prod-pic-fb { display: block; }

.learn-thumb { width: 74px; height: 74px; }
.learn-big { width: 132px; height: 132px; border-radius: var(--radius); }
.pp-thumb { width: 52px; height: 52px; border-radius: var(--r-sm); }
.sales-thumb { width: 26px; height: 26px; border-radius: var(--r-xs); }
.sales-thumb .prod-pic-fb { font-size: var(--fs-caption); }

.learn-card { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.learn-card:active { transform: scale(.985); }
.learn-info { flex: 1; min-width: 0; }
.learn-name { font-size: var(--fs-lg); font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.learn-name .badge { font-size: var(--fs-micro); padding: 1px var(--sp-2); }
.learn-slogan { font-size: var(--fs-caption); color: var(--c-primary-700); margin-top: var(--sp-1); line-height: var(--lh-snug); }
.learn-slogan.big { font-size: var(--fs-sm); }
.learn-meta { font-size: var(--fs-note); color: var(--c-ink-500); margin-top: var(--sp-1); }
.learn-arrow { color: var(--c-ink-400); font-size: var(--fs-title-sm); }
.learn-entry { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; min-height: 44px; }
.learn-entry:active { transform: scale(.985); }
.learn-hero { display: flex; gap: var(--sp-4); align-items: flex-start; }
.learn-hero-info { flex: 1; min-width: 0; }
.learn-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.learn-points { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }
.learn-points li { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--c-ink-700); }
.learn-combo {
  font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--c-ink-700);
  background: var(--c-primary-50); border: 1px solid var(--c-primary-100);
  border-radius: var(--r-md); padding: var(--sp-3);
}

.prod-pick-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.prod-pick-card {
  border: 1.5px solid var(--c-ink-200); border-radius: var(--r-lg); background: #fff;
  overflow: hidden; transition: border-color var(--dur), box-shadow var(--dur);
}
.prod-pick-card.open { border-color: var(--c-primary-700); box-shadow: 0 2px 10px rgba(30, 95, 201, .10); }
.prod-pick-card.picked { border-color: var(--c-primary-700); background: var(--c-primary-50); }
.pp-head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); min-height: 56px; cursor: pointer; }
.pp-info { flex: 1; min-width: 0; }
.pp-name { font-size: var(--fs-base); font-weight: 700; display: flex; align-items: center; gap: var(--sp-2); }
.pp-count { font-size: var(--fs-note); font-weight: 600; color: var(--c-primary-700); background: var(--c-primary-100); border-radius: var(--r-full); padding: 1px var(--sp-2); }
.pp-specs { font-size: var(--fs-note); color: var(--c-ink-500); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-arrow { color: var(--c-ink-400); font-size: var(--fs-base); flex-shrink: 0; }
.pp-body { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 2px var(--sp-3) var(--sp-3) 73px; }


/* ============================================================
   25. 驳回原因 / 空状态
   ============================================================ */
.reject-tip {
  background: var(--c-danger-50); border: 1px solid #F6C9CA; border-radius: var(--r-lg);
  padding: var(--sp-3); font-size: var(--fs-caption); color: var(--c-danger-700);
  display: flex; gap: var(--sp-2); align-items: flex-start; line-height: var(--lh-snug);
}
.reject-tip .rt-ico { flex: none; }

.empty { text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--c-ink-500); }
.empty .em-ico { font-size: var(--fs-hero); margin-bottom: var(--sp-3); opacity: .45; line-height: 1; }
.empty .em-t { font-size: var(--fs-base); font-weight: 600; color: var(--c-ink-600); }
.empty .em-s { font-size: var(--fs-caption); margin-top: var(--sp-1); line-height: var(--lh-snug); }

/* 审核操作区 */
.review-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }


/* ============================================================
   26. 多维度组合筛选
   ============================================================ */
.f-entry { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.f-entry-btn {
  flex: none; min-height: 40px;
  border: 1.5px solid var(--c-ink-200); background: #fff; border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-ink-600);
  cursor: pointer; transition: all var(--dur); white-space: nowrap;
}
.f-entry-btn:hover { border-color: var(--c-primary-700); color: var(--c-primary-700); }
.f-entry-btn:active { transform: var(--press); }
.f-entry-btn.on {
  background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-500));
  color: #fff; border-color: transparent; box-shadow: var(--sh-brand);
}
.f-entry-tip { flex: 1; min-width: 0; font-size: var(--fs-note); color: var(--c-ink-500); line-height: var(--lh-snug); }

.f-echo { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.f-echo-chip {
  display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%;
  background: var(--c-primary-100); color: var(--c-primary-900);
  border-radius: var(--r-full); padding: 5px 6px 5px var(--sp-3);
  font-size: var(--fs-caption); font-weight: 600;
  animation: fPop var(--dur) var(--ease-out);
}
.f-echo-chip .f-echo-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-echo-chip i {
  font-style: normal; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(30, 95, 201, .16); color: var(--c-primary-900);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-base); line-height: 1; cursor: pointer;
}
.f-echo-chip i:active { transform: scale(.86); }
.f-echo-clear { align-self: center; font-size: var(--fs-caption); color: var(--c-danger-700); padding: var(--sp-2) var(--sp-2); cursor: pointer; font-weight: 600; }
@keyframes fPop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }

.f-grp { padding: var(--sp-3) 0; border-top: 1px dashed var(--line-soft); }
.f-grp:first-of-type { border-top: none; padding-top: var(--sp-1); }
.f-grp-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.f-grp-h b { font-size: var(--fs-sm); }
.f-grp-n { margin-left: auto; font-size: var(--fs-note); color: var(--c-ink-500); }
.f-sub { font-size: var(--fs-note); color: var(--c-ink-500); margin: var(--sp-2) 0; }
.f-search {
  width: 100%; min-height: 44px;
  border: 1.5px solid var(--c-ink-400); border-radius: var(--r-lg);
  padding: 0 var(--sp-3); font-size: 16px; outline: none;
  margin-bottom: var(--sp-2); color: var(--c-ink-900); background: #fff;
  transition: border var(--dur), box-shadow var(--dur);
}
.f-search::placeholder { color: var(--c-ink-500); }
.f-search:focus { border-color: var(--c-primary-700); box-shadow: 0 0 0 3px var(--c-primary-100); }
.f-opts { max-height: 34vh; overflow-y: auto; padding: 2px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.f-opts .chip { max-width: 100%; min-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fPop .18s var(--ease-out); }
.f-none { font-size: var(--fs-caption); color: var(--c-ink-500); padding: var(--sp-2) 2px; line-height: var(--lh-base); }
.f-more { font-size: var(--fs-note); color: var(--c-ink-500); padding: var(--sp-2) 2px 2px; }

.f-foot {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; gap: var(--sp-3); align-items: center;
  margin: var(--sp-4) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-6) - var(--safe-b));
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.f-foot .btn { flex: 1; }
.f-foot .f-reset {
  flex: none; width: 96px;
  background: #fff; color: var(--c-danger-700);
  border: 1.5px solid #F6C9CA; font-weight: 600;
}
.f-foot .f-reset:hover { background: var(--c-danger-50); color: var(--c-danger-700); }
.f-foot .btn.primary { background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-500)); font-weight: 700; }


/* ============================================================
   27. Toast / FAB / 底部导航
   ============================================================ */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 34px + var(--safe-b));
  transform: translateX(-50%) translateY(16px) scale(.96);
  background: rgba(16, 24, 40, .94); color: #fff;
  font-size: var(--fs-sm); padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-full); opacity: 0; pointer-events: none; z-index: 200;
  max-width: 86vw; text-align: center; line-height: var(--lh-snug);
  transition: all var(--dur-slow) var(--ease-spring);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .28);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.toast.err { background: rgba(180, 35, 24, .96); }
.toast.ok { background: rgba(21, 128, 61, .96); }

.fab {
  position: fixed; right: var(--sp-4);
  bottom: calc(var(--tabbar-h) + var(--sp-3) + var(--safe-b));
  z-index: 90;
  background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-500));
  color: #fff; border: none; border-radius: var(--r-full);
  min-height: 48px; padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-base); font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(43, 109, 229, .42);
  transition: all var(--dur); display: none;
}
.fab.show { display: block; }
.fab:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(43, 109, 229, .48); }
.fab:active { transform: var(--press); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: none;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -3px 14px rgba(31, 55, 110, .10);
  max-width: 520px; margin: 0 auto;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: var(--sp-1) var(--sp-2) calc(var(--sp-1) + var(--safe-b));
  padding-left: calc(var(--sp-2) + var(--safe-l));
  padding-right: calc(var(--sp-2) + var(--safe-r));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.tabbar.show { display: flex; }
.tabbar .tb-item {
  position: relative; flex: 1;
  min-height: 48px;
  border: none; background: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: var(--fs-note); color: var(--c-ink-500);
  padding: var(--sp-1) 0; border-radius: var(--r-lg);
  transition: color var(--dur-fast); font-family: inherit;
}
.tabbar .tb-item i { font-size: 21px; font-style: normal; line-height: 1; }
.tabbar .tb-item.active { color: var(--c-primary-700); font-weight: 700; }
.tabbar .tb-item.active::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px; border-radius: var(--r-full); background: var(--c-primary-700);
}
.tabbar .tb-item:active { transform: scale(.94); }


/* ============================================================
   28. 断点：渐进增强（移动优先）
   ============================================================ */

/* --- ≥ 576px 大屏手机 / 手机横屏 --- */
@media (min-width: 576px) {
  .page { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .photo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-text strong { font-size: var(--fs-title-sm); }
  .login-dev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .btn-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- ≥ 768px 平板：弹层转为居中对话框 --- */
@media (min-width: 768px) {
  .page { padding: var(--sp-5) var(--sp-6) 100px; }
  .ticket-card { padding: var(--sp-5); }
  .modal-mask { align-items: center; }
  .modal {
    border-radius: var(--r-2xl);
    padding: var(--sp-6);
    transform: translateY(16px) scale(.96);
    box-shadow: 0 20px 60px rgba(15, 35, 90, .24);
  }
  .modal-mask.show .modal { transform: none; }
  .modal::before { display: none; }
  .rp-list { max-height: 52vh; }
  .f-foot { margin: var(--sp-4) calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)); padding: var(--sp-3) var(--sp-6); }
  .toast { bottom: var(--sp-10); }
  /* 桌面端指针精准，触摸目标可收紧到 40px，提升信息密度 */
  .chip { min-height: 36px; }
  .seg-btn, .tab { min-height: 34px; }
}

/* --- ≥ 992px 笔记本：宽版容器 + 宽松留白 --- */
@media (min-width: 992px) {
  :root { --fs-base: 15px; }        /* 桌面端正文放大一档 */
  .photo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .btn-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .hg-title { font-size: var(--fs-base); }
}

/* --- ≥ 1200px 桌面 --- */
@media (min-width: 1200px) {
  .page { padding: var(--sp-6) var(--sp-8) 110px; }
  .card { padding: var(--sp-5) var(--sp-6); }
}

/* --- 超小屏 ≤ 360px（iPhone SE / 老安卓）兜底 --- */
@media (max-width: 360px) {
  :root { --fs-base: 13.5px; }
  .brand-text small { display: none; }          /* 副标题让位给地域/身份胶囊 */
  .topbar-inner { padding-top: calc(8px + var(--safe-t)); padding-bottom: 8px; }
  .btn-grid, .btn-grid.three { grid-template-columns: 1fr; }
  .photo-wall { grid-template-columns: 1fr; }
  .stat-head { grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); }
  .tabbar .tb-item { font-size: var(--fs-micro); }
  .page { padding-left: var(--sp-2); padding-right: var(--sp-2); }
}

/* --- 横屏矮屏：压缩纵向留白 --- */
@media (max-height: 460px) and (orientation: landscape) {
  .login-page { align-items: flex-start; padding-top: var(--sp-3); }
  .modal { max-height: 94dvh; }
}


/* ============================================================
   30. 内联样式防御层
   ------------------------------------------------------------
   JS 模板里有部分遗留的内联样式，优先级高于样式表。以下几处会
   造成实际功能影响，用最小范围的规则兜住，无需改动 JS。
   若后续把内联样式清理进样式表，本节可整段删除。
   ============================================================ */

/* iOS Safari 在 font-size < 16px 的输入控件上聚焦时会强制放大整个页面，
   且不会自动缩回。下面这条兜底确保任何输入控件（含 JS 内联 13px 的
   #pubStoreKw / #pubPromKw 门店与人员搜索框）在手机上都是 16px。
   全站输入控件在样式表里本就已设为 16px，此处 !important 仅为压住内联值。 */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px !important; }
}

/* admin.js 里两个搜索框内联了 height:36px，低于 44px 触摸最小尺寸。
   用 min-height 抬回来（min-height 会覆盖更小的 height，无需 !important）。 */
#pubStoreKw, #pubPromKw { min-height: 44px; }


/* ============================================================
   31. 打印
   ============================================================ */
@media print {
  .topbar, .fab, .review-actions, .tabbar, .exec-fab-bar, .toast { display: none !important; }
  .card { box-shadow: none; border: 1px solid var(--c-ink-300); break-inside: avoid; }
  .page { padding: 0; max-width: none; }
  body { background: #fff; }
}

/* ============================================================
   v2.1 视觉精修层（2026-09-29 · 达哥「美化一下，不影响功能」）
   ------------------------------------------------------------
   原则：
     1. 只追加，不修改上方任何既有规则 —— 出问题删掉本段即可整体回退
     2. 只用现有类名/ID 做增强，零 HTML 结构与 JS 改动
     3. 动画仅用 transform / opacity（GPU 加速），0.15~0.32s，克制不花哨
     4. 全部尊重 prefers-reduced-motion；不降低对比度、不隐藏内容
   ============================================================ */

/* ---- 1. 顶部栏质感：内高光 + 更通透的投影 ---- */
.topbar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 2px 12px rgba(30, 81, 184, .30),
    0 10px 32px rgba(15, 35, 90, .18);
}
.brand-logo {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 3px 10px rgba(0, 20, 60, .22);
}

/* ---- 2. 登录页：径向高光背景 + 卡片质感 + logo 呼吸 ---- */
.login-page {
  background:
    radial-gradient(120% 70% at 18% 8%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(90% 60% at 88% 96%, rgba(19, 60, 138, .55) 0%, rgba(19, 60, 138, 0) 58%),
    linear-gradient(120deg, var(--c-primary-800), var(--c-primary-600) 55%, var(--c-primary-500));
}
.login-card {
  border-radius: var(--r-3xl);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .90),
    0 24px 60px rgba(10, 26, 70, .44),
    0 4px 14px rgba(10, 26, 70, .22);
  animation: loginIn var(--dur-slow) var(--ease-spring);
}
.login-logo {
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: logoBreath 3.6s ease-in-out infinite;
}
@keyframes logoBreath {
  0%, 100% { transform: translateY(0) scale(1);     box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,.35); }
  50%      { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 22px rgba(43, 109, 229, .42), inset 0 1px 0 rgba(255,255,255,.35); }
}
/* 登录按钮：满宽 + 主渐变 */
#loginBtn {
  background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-500));
  box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255, 255, 255, .24);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              filter var(--dur-fast) var(--ease-out);
}
#loginBtn:hover { filter: brightness(1.06); transform: translateY(-1px); }
#loginBtn:active { transform: var(--press); filter: brightness(.97); }

/* ---- 3. 卡片质感：描边内高光 + 桌面 hover 层次 ---- */
.card {
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255, 255, 255, .85);
  border: 1px solid rgba(208, 213, 221, .55);
  transition: box-shadow var(--dur) var(--ease-out),
              transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card.clickable:hover {
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255, 255, 255, .9);
  border-color: var(--c-primary-200);
}

/* ---- 4. 触觉反馈统一：所有可点元素按压缩放 ---- */
.btn          { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.btn:hover    { filter: brightness(1.04); }
.btn:active   { transform: var(--press); filter: brightness(.96); }
.chip         { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.chip:active  { transform: scale(.94); }
.tab          { transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast), color var(--dur-fast); }
.tab:active   { transform: scale(.94); }
button        { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn-card     { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }

/* ---- 5. FAB：品牌阴影呼吸 ---- */
.fab {
  box-shadow: 0 8px 24px rgba(43, 109, 229, .40), inset 0 1px 0 rgba(255, 255, 255, .30);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.fab:hover { box-shadow: 0 12px 32px rgba(43, 109, 229, .50), inset 0 1px 0 rgba(255, 255, 255, .30); }
.fab:active { transform: scale(.92); }

/* ---- 6. Toast：弹性入场 ---- */
.toast { transition: opacity var(--dur) var(--ease-out), transform var(--dur-slow) var(--ease-spring); }
.toast.show { box-shadow: 0 10px 30px rgba(16, 24, 40, .28), inset 0 1px 0 rgba(255, 255, 255, .18); }

/* ---- 7. 底部导航：细顶高光 + 按压 ---- */
.tabbar { box-shadow: var(--sh-up), inset 0 1px 0 rgba(255, 255, 255, .92); }
.tabbar .tb-item { transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast); }
.tabbar .tb-item:active { transform: scale(.90); }

/* ---- 8. 桌面端滚动条（移动端无影响） ---- */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--c-ink-200); border-radius: var(--r-full);
    border: 3px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--c-ink-300); }
}

/* ---- 9. 焦点环统一：可交互元素键盘可见 ---- */
.btn:focus-visible, .btn-card:focus-visible, .chip:focus-visible,
.tab:focus-visible, .fab:focus-visible, .tb-item:focus-visible,
.identity-chip:focus-visible, .region-chip:focus-visible,
a:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--c-primary-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- 10. 输入控件：聚焦浮起 ---- */
input, select, textarea {
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--c-primary-400);
  box-shadow: 0 0 0 3px rgba(59, 123, 224, .14);
}

/* ---- 11. 徽章/状态点轻微立体感 ---- */
.badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38);
}

/* ---- 12. 弹窗质感（入场动效沿用既有 .modal-mask.show .modal 过渡，此处只加阴影） ---- */
.modal {
  box-shadow: 0 24px 64px rgba(16, 24, 40, .30), inset 0 1px 0 rgba(255, 255, 255, .90);
}

/* ---- 13. 图片/照片墙：细边框衬托 ---- */
.photo-wall img, .photo-item img { box-shadow: var(--sh-1); }

/* ---- 15. 发布页活动时段：time input 太窄导致 "09:00" 被截断显示成 "0"（正式线上已有问题）
     说明：iOS 防缩放规则强制 input font-size:16px !important，不能改字号；
     因此压缩 padding 与日历图标区域，腾出文本显示空间 ---- */
#pubStart, #pubEnd {
  padding-left: 4px;
  padding-right: 4px;
}
#pubStart::-webkit-calendar-picker-indicator,
#pubEnd::-webkit-calendar-picker-indicator {
  width: 14px; height: 14px;
  margin: 0; padding: 0;
}

/* ---- 14. 降级：尊重 reduced-motion / 打印 / 强制颜色 ---- */
@media (prefers-reduced-motion: reduce) {
  .login-logo, #loginBtn, .btn, .chip, .tab, .fab, .toast,
  .tabbar .tb-item, .card, .btn-card,
  input, select, textarea {
    animation: none !important;
    transition: none !important;
  }
  #loginBtn:hover, .btn:hover, .fab:hover { transform: none; filter: none; }
}
@media (forced-colors: active) {
  .card { border: 1px solid CanvasText; }
  #loginBtn { border: 1px solid ButtonText; }
}
@media print {
  .login-logo { animation: none; }
}